Components Tokens
tap-avatar
Name | Default Value | Description |
---|---|---|
--tap-avatar-background-color | --tap-sys-color-surface-secondary | - |
--tap-avatar-border-color | --tap-sys-color-border-primary | - |
--tap-avatar-border-radius | --tap-sys-radius-full | - |
--tap-avatar-width-xxSmall | --tap-sys-spacing-8 | - |
--tap-avatar-height-xxSmall | --tap-sys-spacing-8 | - |
--tap-avatar-width-xSmall | --tap-sys-spacing-9 | - |
--tap-avatar-height-xSmall | --tap-sys-spacing-9 | - |
--tap-avatar-width-small | --tap-sys-spacing-10 | - |
--tap-avatar-height-small | --tap-sys-spacing-10 | - |
--tap-avatar-width-medium | --tap-sys-spacing-11 | - |
--tap-avatar-height-medium | --tap-sys-spacing-11 | - |
--tap-avatar-width-large | 56px | - |
--tap-avatar-height-large | 56px | - |
--tap-avatar-width-xLarge | 72px | - |
--tap-avatar-height-xLarge | 72px | - |
tap-badge
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | Font family of the badge. |
--tap-badge-line-height | --tap-sys-typography-body-xs-height | Line height of the badge text. |
--tap-badge-font-size | --tap-sys-typography-body-xs-size | Font size of the badge text. |
--tap-badge-font-weight | --tap-sys-typography-body-xs-weight | Font weight of the badge text. |
--tap-badge-color | --tap-sys-color-content-primary | Text color of the badge. |
--tap-badge-border-radius | --tap-sys-radius-4 | Border radius of the badge. |
--tap-badge-icon-margin | --tap-sys-spacing-2 | Margin around the icon. |
--tap-badge-pill-numeral-border-radius | --tap-sys-radius-4 | Border radius for pill and numeral types. |
--tap-badge-pill-numeral-vertical-padding | --tap-sys-spacing-2 | Vertical padding for pill and numeral types. |
--tap-badge-pill-numeral-horizontal-padding | --tap-sys-spacing-4 | Horizontal padding for pill and numeral types. |
--tap-badge-dot-width | 6px | Width of the dot type badge. |
--tap-badge-dot-height | 6px | Height of the dot type badge. |
--tap-badge-dot-margin | 3px | Margin around the dot type badge. |
--tap-badge-info-background-color | --tap-sys-color-surface-accent | Background color for info variant. |
--tap-badge-info-color | --tap-sys-color-content-on-negative | Text color for info variant. |
--tap-badge-success-background-color | --tap-sys-color-surface-positive | Background color for success variant. |
--tap-badge-success-color | --tap-sys-color-content-on-negative | Text color for success variant. |
--tap-badge-error-background-color | --tap-sys-color-surface-negative | Background color for error variant. |
--tap-badge-error-color | --tap-sys-color-content-on-negative | Text color for error variant. |
--tap-badge-warning-background-color | --tap-sys-color-surface-warning | Background color for warning variant. |
--tap-badge-warning-color | --tap-sys-color-content-on-warning | Text color for warning variant. |
--tap-badge-inverse-background-color | --tap-sys-color-surface-disabled | Background color for inverse variant. |
--tap-badge-inverse-color | --tap-sys-color-content-tertiary | Text color for inverse variant. |
--tap-badge-info-low-background-color | --tap-sys-color-surface-accent-light | Background color for low priority info variant. |
--tap-badge-info-low-color | --tap-sys-color-content-accent | Text color for low priority info variant. |
--tap-badge-success-low-background-color | --tap-sys-color-surface-positive-light | Background color for low priority success variant. |
--tap-badge-success-low-color | --tap-sys-color-content-positive | Text color for low priority success variant. |
--tap-badge-error-low-background-color | --tap-sys-color-surface-negative-light | Background color for low priority error variant. |
--tap-badge-error-low-color | --tap-sys-color-content-negative | Text color for low priority error variant. |
--tap-badge-warning-low-background-color | --tap-sys-color-surface-warning-light | Background color for low priority warning variant. |
--tap-badge-warning-low-color | --tap-sys-color-content-warning | Text color for low priority warning variant. |
tap-banner
Name | Default Value | Description |
---|---|---|
--tap-sys-spacing-6 | undefined | Spacing around the banner content. |
--tap-banner-color-surface | undefined | Background color of the banner. |
--tap-sys-radius-4 | undefined | Border radius of the banner. |
--tap-banner-background-image | undefined | Background image of the banner. |
--tap-sys-spacing-4 | undefined | Margin around the banner. |
--tap-banner-color-content | undefined | Text color of the banner. |
--tap-sys-typography-headline-xs-font | --tap-sys-font-family | Font family for the heading text. |
--tap-sys-typography-headline-xs-height | undefined | Line height for the heading text. |
--tap-sys-typography-headline-xs-size | undefined | Font size for the heading text. |
--tap-sys-typography-headline-xs-weight | undefined | Font weight for the heading text. |
--tap-sys-spacing-3 | undefined | Margin below the heading text. |
--tap-sys-typography-body-xs-font | undefined | Font family for the description text. |
--tap-sys-typography-body-xs-height | undefined | Line height for the description text. |
--tap-sys-typography-body-xs-size | undefined | Font size for the description text. |
--tap-sys-typography-body-xs-weight | undefined | Font weight for the description text. |
--tap-sys-spacing-5 | undefined | Margin above the action slot. |
--tap-sys-spacing-8 | undefined | Minimum height of the extra slot in the hero variant. |
tap-bottom-navigation
Name | Default Value | Description |
---|---|---|
--tap-bottom-navigation-background | --tap-sys-color-surface-secondary | The background color of the navigation bar. |
--tap-bottom-navigation-border-top-width | --tap-sys-stroke-1 | The width of the top border of the navigation bar. |
--tap-bottom-navigation-border-top-color | --tap-sys-color-border-primary | The color of the top border of the navigation bar. |
tap-bottom-navigation-item
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family for the navigation item. |
--tap-bottom-navigation-item-color | --tap-sys-color-content-tertiary | The text color when the item is inactive. |
--tap-bottom-navigation-active-color | --tap-sys-color-content-primary | The text color when the item is active. |
--tap-bottom-navigation-item-line-height | --tap-sys-typography-label-xs-height | The line height for the label. |
--tap-bottom-navigation-item-font-size | --tap-sys-typography-label-xs-size | The font size for the label. |
--tap-bottom-navigation-item-font-weight | --tap-sys-typography-label-xs-weight | The font weight for the label. |
tap-bottom-sheet
Name | Default Value | Description |
---|---|---|
--tap-bottom-sheet-bottom | 0 | - |
--tap-bottom-sheet-header-padding | 0 | - |
--tap-bottom-sheet-header-padding | 12px | - |
--tap-bottom-sheet-background | --tap-sys-color-surface-primary | - |
--tap-bottom-sheet-content-overflow-y | scroll | - |
tap-button
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family for the button. |
--tap-sys-radius-full | undefined | The border radius for the button. |
--tap-button-color-surface-cover | --tap-sys-color-surface-overlay-light | The surface cover color for the button. |
--tap-sys-color-surface-overlay-light | undefined | The overlay light color for the button. |
--tap-sys-color-surface-disabled | undefined | The disabled surface color for the button. |
--tap-button-color-surface-disabled | --tap-sys-color-surface-disabled | The disabled surface color for the button. |
--tap-sys-spacing-9 | undefined | The spacing for the small button height. |
--tap-sys-spacing-10 | undefined | The spacing for the medium button height. |
--tap-sys-spacing-11 | undefined | The spacing for the large button height. |
--tap-sys-spacing-5 | undefined | The spacing for the small button padding. |
--tap-sys-spacing-6 | undefined | The spacing for the medium button padding. |
--tap-sys-spacing-8 | undefined | The spacing for the large button padding. |
--tap-button-typography-label-sm-height | --tap-sys-typography-label-sm-height | The line height for the small button label. |
--tap-button-typography-label-sm-size | --tap-sys-typography-label-sm-size | The font size for the small button label. |
--tap-button-typography-label-sm-weight | --tap-sys-typography-label-sm-weight | The font weight for the small button label. |
--tap-button-typography-label-md-height | --tap-sys-typography-label-sm-height | The line height for the medium button label. |
--tap-button-typography-label-md-size | --tap-sys-typography-label-sm-size | The font size for the medium button label. |
--tap-button-typography-label-md-weight | --tap-sys-typography-label-sm-weight | The font weight for the medium button label. |
--tap-button-typography-label-lg-height | --tap-sys-typography-label-lg-height | The line height for the large button label. |
--tap-button-typography-label-lg-size | --tap-sys-typography-label-lg-size | The font size for the large button label. |
--tap-button-typography-label-lg-weight | --tap-sys-typography-label-lg-weight | The font weight for the large button label. |
--tap-button-color-surface-inverse-primary | --tap-sys-color-surface-inverse-primary | The surface color for the primary variant. |
--tap-sys-color-surface-inverse-primary | undefined | The surface color for the primary variant. |
--tap-button-color-content-on-inverse | --tap-sys-color-content-on-inverse | The content color on inverse surface. |
--tap-sys-color-content-on-inverse | undefined | The content color on inverse surface. |
--tap-button-color-surface-tertiary | --tap-sys-color-surface-tertiary | The surface color for the ghost variant. |
--tap-sys-color-surface-tertiary | undefined | The surface color for the ghost variant. |
--tap-button-color-content-primary | --tap-sys-color-content-primary | The content color for the primary variant. |
--tap-sys-color-content-primary | undefined | The content color for the primary variant. |
--tap-button-color-surface-primary | --tap-sys-color-surface-primary | The surface color for the elevated variant. |
--tap-sys-color-surface-primary | undefined | The surface color for the elevated variant. |
--tap-button-color-surface-destructive | --tap-sys-color-surface-negative-light | The surface color for the destructive variant. |
--tap-sys-color-surface-negative-light | undefined | The surface color for the destructive variant. |
--tap-button-color-content-destructive | --tap-sys-color-content-negative | The content color for the destructive variant. |
--tap-sys-color-content-negative | undefined | The content color for the destructive variant. |
--tap-button-color-gradient-brand | --tap-sys-color-gradient-brand | The gradient color for the brand variant. |
--tap-sys-color-gradient-brand | undefined | The gradient color for the brand variant. |
tap-checkbox
Name | Default Value | Description |
---|---|---|
--tap-checkbox-border-radius | --tap-sys-radius-1 | The border radius of the checkbox. |
--tap-checkbox-height | --tap-sys-spacing-7 | The height of the checkbox. |
--tap-checkbox-width | --tap-sys-spacing-7 | The width of the checkbox. |
--tap-checkbox-input-height | --tap-sys-spacing-7 | The height of the checkbox input. |
--tap-checkbox-input-width | --tap-sys-spacing-7 | The width of the checkbox input. |
--tap-checkbox-background-color | --tap-sys-color-surface-primary | The background color of the checkbox. |
--tap-checkbox-border | --tap-sys-color-border-inverse-primary | The border color of the checkbox. |
--tap-checkbox-checked-background-color | --tap-sys-color-surface-inverse-primary | The background color of the checked or indeterminate checkbox. |
--tap-checkbox-checked-color | --tap-sys-color-content-on-inverse | The color of the content inside the checked or indeterminate checkbox. |
--tap-checkbox-checked-color | --tap-sys-color-surface-disabled | The background color of the disabled checkbox. |
--tap-checkbox-disabled-border-color | --tap-sys-color-surface-disabled | The border color of the disabled checkbox. |
--tap-checkbox-disabled-color | --tap-sys-color-content-disabled | The color of the content inside the disabled checkbox. |
tap-chip
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the chip. |
--tap-chip-font-size | --tap-sys-typography-body-sm-size | The font size for the chip's content. |
--tap-chip-line-height | --tap-sys-typography-body-sm-height | The line height for the chip's content. |
--tap-chip-border-radius | --tap-sys-radius-full | The border radius for the chip. |
--tap-chip-border-color | --tap-sys-color-border-primary | The border color of the chip. |
--tap-chip-background-color | --tap-sys-color-surface-primary | The background color of the chip. |
--tap-chip-color | --tap-sys-color-content-primary | The text color of the chip. |
--tap-chip-horizontal-padding | --tap-sys-spacing-4 | The horizontal padding inside the chip. |
--tap-chip-min-width | 72px | The minimum width of the chip. |
--tap-chip-icon-gap | --tap-sys-spacing-4 | The gap of the icon slot in the chip. |
--tap-chip-selected-background-color | --tap-sys-color-surface-secondary | The background color of a selected chip. |
--tap-chip-selected-border-color | --tap-sys-color-surface-inverse-primary | The border color of a selected chip. |
--tap-chip-disabled-color | --tap-sys-color-content-disabled | The text color of a disabled chip. |
--tap-chip-selected-and-disabled-color | --tap-sys-color-border-primary | The border color of a selected and disabled chip. |
--tap-chip-group-sm-height | --tap-sys-spacing-9 | The height of the chip in small size. |
--tap-chip-group-md-height | --tap-sys-spacing-10 | The height of the chip in medium size. |
tap-chip-group
Name | Default Value | Description |
---|---|---|
--tap-chip-group-gap | --tap-sys-spacing-5 | The gap between chips in the group. |
tap-divider
Name | Default Value | Description |
---|---|---|
--tap-divider-background-color | --tap-sys-color-border-primary | The background color of the divider. |
--tap-divider-margin | --tap-sys-spacing-4 | The margin around the divider. |
--tap-divider-thin-height | --tap-sys-spacing-1 | The height of the thin divider. |
--tap-divider-medium-height | --tap-sys-spacing-2 | The height of the medium divider. |
--tap-divider-bold-background-color | --tap-sys-color-surface-secondary | The background color of the bold divider. |
--tap-divider-bold-height | --tap-sys-spacing-4 | The height of the bold divider. |
tap-empty-state
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the empty state. |
--tap-empty-state-icon-horizontal-margin | undefined | The horizontal margin for the icon slot. |
--tap-empty-state-icon-vertical-margin | --tap-sys-spacing-6 | The vertical margin for the icon slot. |
--tap-empty-state-actions-horizontal-margin | undefined | The horizontal margin for the actions slot. |
--tap-empty-state-actions-vertical-margin | --tap-sys-spacing-6 | The vertical margin for the actions slot. |
--tap-empty-state-content-horizontal-padding | --tap-sys-spacing-6 | The horizontal padding for the content slot. |
--tap-empty-state-content-vertical-padding | --tap-sys-spacing-4 | The vertical padding for the content slot. |
--tap-empty-state-title-font-size | --tap-sys-typography-headline-sm-size | The font size used for the title in the empty state. |
--tap-empty-state-title-font-weight | --tap-sys-typography-headline-sm-weight | The font weight used for the title in the empty state. |
--tap-empty-state-title-line-height | --tap-sys-typography-headline-sm-height | The line height used for the title in the empty state. |
--tap-empty-state-description-font-size | --tap-sys-typography-headline-sm-size | The font size used for the description in the empty state. |
--tap-empty-state-description-font-weight | --tap-sys-typography-headline-sm-size | The font weight used for the description in the empty state. |
--tap-empty-state-description-line-height | --tap-sys-typography-headline-sm-size | The line height used for the description in the empty state. |
--tap-empty-state-description-color | --tap-sys-typography-headline-sm-size | The color used for the description in the empty state. |
--tap-empty-state-description-top-margin | --tap-sys-spacing-4 | The top margin used for the description in the empty state. |
tap-icon-button
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family for the button. |
--tap-sys-radius-full | undefined | The border radius for the button. |
--tap-button-color-surface-cover | --tap-sys-color-surface-overlay-light | The surface cover color for the button. |
--tap-sys-color-surface-overlay-light | undefined | The overlay light color for the button. |
--tap-sys-color-surface-disabled | undefined | The disabled surface color for the button. |
--tap-button-color-surface-disabled | --tap-sys-color-surface-disabled | The disabled surface color for the button. |
--tap-sys-spacing-9 | undefined | The spacing for the small button height. |
--tap-sys-spacing-10 | undefined | The spacing for the medium button height. |
--tap-sys-spacing-11 | undefined | The spacing for the large button height. |
--tap-sys-spacing-5 | undefined | The spacing for the small button padding. |
--tap-sys-spacing-6 | undefined | The spacing for the medium button padding. |
--tap-sys-spacing-8 | undefined | The spacing for the large button padding. |
--tap-button-typography-label-sm-height | --tap-sys-typography-label-sm-height | The line height for the small button label. |
--tap-button-typography-label-sm-size | --tap-sys-typography-label-sm-size | The font size for the small button label. |
--tap-button-typography-label-sm-weight | --tap-sys-typography-label-sm-weight | The font weight for the small button label. |
--tap-button-typography-label-md-height | --tap-sys-typography-label-sm-height | The line height for the medium button label. |
--tap-button-typography-label-md-size | --tap-sys-typography-label-sm-size | The font size for the medium button label. |
--tap-button-typography-label-md-weight | --tap-sys-typography-label-sm-weight | The font weight for the medium button label. |
--tap-button-typography-label-lg-height | --tap-sys-typography-label-lg-height | The line height for the large button label. |
--tap-button-typography-label-lg-size | --tap-sys-typography-label-lg-size | The font size for the large button label. |
--tap-button-typography-label-lg-weight | --tap-sys-typography-label-lg-weight | The font weight for the large button label. |
--tap-button-color-surface-inverse-primary | --tap-sys-color-surface-inverse-primary | The surface color for the primary variant. |
--tap-sys-color-surface-inverse-primary | undefined | The surface color for the primary variant. |
--tap-button-color-content-on-inverse | --tap-sys-color-content-on-inverse | The content color on inverse surface. |
--tap-sys-color-content-on-inverse | undefined | The content color on inverse surface. |
--tap-button-color-surface-tertiary | --tap-sys-color-surface-tertiary | The surface color for the ghost variant. |
--tap-sys-color-surface-tertiary | undefined | The surface color for the ghost variant. |
--tap-button-color-content-primary | --tap-sys-color-content-primary | The content color for the primary variant. |
--tap-sys-color-content-primary | undefined | The content color for the primary variant. |
--tap-button-color-surface-primary | --tap-sys-color-surface-primary | The surface color for the elevated variant. |
--tap-sys-color-surface-primary | undefined | The surface color for the elevated variant. |
--tap-button-color-surface-destructive | --tap-sys-color-surface-negative-light | The surface color for the destructive variant. |
--tap-sys-color-surface-negative-light | undefined | The surface color for the destructive variant. |
--tap-button-color-content-destructive | --tap-sys-color-content-negative | The content color for the destructive variant. |
--tap-sys-color-content-negative | undefined | The content color for the destructive variant. |
--tap-button-color-gradient-brand | --tap-sys-color-gradient-brand | The gradient color for the brand variant. |
--tap-sys-color-gradient-brand | undefined | The gradient color for the brand variant. |
tap-modal
Name | Default Value | Description |
---|---|---|
--tap-dialog-color-surface-overlay | --tap-sys-color-surface-overlay-dark | The background color of the overlay. |
--tap-dialog-color-surface-primary | --tap-sys-color-surface-primary | The background color of the modal dialog. |
--tap-dialog-radius | --tap-sys-radius-6 | The border radius of the modal dialog. |
--tap-dialog-icon-top-margin | --tap-sys-spacing-8 | The top margin of the icon. |
--tap-dialog-image-container-background-color | --tap-palette-gray-100 | The background color of the image container. |
--tap-dialog-content-vertical-padding | --tap-sys-spacing-4 | The vertical padding of the content. |
--tap-dialog-content-horizontal-padding | --tap-sys-spacing-6 | The horizontal padding of the content. |
--tap-dialog-content-vertical-margin | --tap-sys-spacing-6 | The vertical margin of the content. |
--tap-dialog-content-horizontal-margin | undefined | The horizontal margin of the content. |
--tap-dialog-title-font-size | --tap-sys-typography-headline-sm-size | The font size of the title in the dialog modal. |
--tap-dialog-title-font-weight | --tap-sys-typography-headline-sm-weight | The font weight of title in the dialog modal. |
--tap-dialog-title-line-height | --tap-sys-typography-headline-sm-height | The line height of title in the dialog modal. |
--tap-dialog-description-margin | undefined | The margin of the description in the dialog modal. |
--tap-dialog-description-padding-top | --tap-sys-spacing-4 | The top padding of the description in the dialog modal. |
--tap-dialog-description-font-size | --tap-sys-typography-body-md-size | The font size of the description in the dialog modal. |
--tap-dialog-description-font-weight | --tap-sys-typography-body-md-weight | The font weight of the description in the dialog modal. |
--tap-dialog-description-line-height | --tap-sys-typography-body-md-height | The line height of the description in the dialog modal. |
--tap-dialog-description-color | --tap-palette-gray-500 | The color of the description in the dialog modal. |
--tap-dialog-actions-padding | --tap-sys-spacing-6 | The padding of the actions in the dialog modal. |
tap-notice
Name | Default Value | Description |
---|---|---|
--tap-notice-width | 100% | The width of the notice component. |
--tap-notice-height | auto | The height of the notice component. |
--tap-notice-gap | --tap-sys-spacing-5 | The default gap between horizontal items of the notice. |
--tap-notice-radius | --tap-sys-radius-3 | The default border radius of the notice. |
--tap-notice-vertical-padding | --tap-sys-spacing-6 | The default vertical padding of the notice. |
--tap-notice-horizontal-padding | --tap-sys-spacing-5 | The default horizontal padding of the notice. |
--tap-font-family | --tap-sys-font-family | The default font used for tapsi web components. |
--tap-notice-actions-margin-top | --tap-sys-spacing-4 | The space between message and action buttons if there are any. |
--tap-notice-title-font-size | --tap-sys-typography-label-md-size | - |
--tap-notice-title-line-height | --tap-sys-typography-label-md-height | - |
--tap-notice-title-font-weight | --tap-sys-typography-label-md-weight | - |
--tap-notice-message-font-size | --tap-sys-typography-label-sm-size | - |
--tap-notice-message-line-height | --tap-sys-typography-label-sm-height | - |
--tap-notice-message-font-weight | --tap-sys-typography-label-sm-weight | - |
--tap-notice-message-font-weight | --tap-sys-typography-label-sm-weight | - |
--tap-notice-[variant]-[priority]-color | undefined | The text and icon color in the specified variant and high priority. The icon color in the specified variant and low priority. |
--tap-notice-[variant]-[priority]-bg-color | undefined | The background color in the specified variant and priority. |
--tap-notice-title-low-color | --tap-sys-color-content-primary | The color of the title in the low priority mode (overrides --tap-notice-[variant]-[priority]-color). |
--tap-notice-message-low-color | --tap-sys-color-content-secondary | The color of the message in the low priority mode (overrides --tap-notice-[variant]-[priority]-color). |
--tap-notice-dismiss-low-color | --tap-sys-color-content-secondary | The color of the dismiss button in the low priority mode (overrides --tap-notice-[variant]-[priority]-color). |
tap-pinwheel
Name | Default Value | Description |
---|---|---|
--tap-pinwheel-vertical-padding | --tap-sys-spacing-0 | - |
--tap-pinwheel-horizontal-padding | --tap-sys-spacing-6 | - |
--tap-pinwheel-item-height | --tap-sys-spacing-11 | - |
--tap-font-family | --tap-sys-font-family | - |
--tap-pinwheel-typography-body-md-height | --tap-sys-typography-body-md-height | - |
--tap-pinwheel-typography-body-md-size | --tap-sys-typography-body-md-size | - |
--tap-pinwheel-typography-body-md-weight | --tap-sys-typography-body-md-weight | - |
--tap-pinwheel-item-color | --tap-sys-color-content-tertiary | - |
--tap-pinwheel-typography-label-md-height | --tap-sys-typography-label-md-height | - |
--tap-pinwheel-typography-label-md-size | --tap-sys-typography-label-md-size | - |
--tap-pinwheel-typography-label-md-weight | --tap-sys-typography-label-md-weight | - |
--tap-pinwheel-active-item-color | --tap-sys-color-content-primary | - |
tap-pinwheel-group
Name | Default Value | Description |
---|---|---|
--tap-pinwheel-group-selector-radius | --tap-sys-spacing-4 | - |
--tap-pinwheel-group-selector-background-color | --tap-sys-color-surface-tertiary | - |
tap-progress-indicator
Name | Default Value | Description |
---|---|---|
--tap-progress-indicator-progressbar-color | --tap-sys-spacing-3 | The gap between steps. |
--tap-progress-indicator-step-height | --tap-sys-spacing-3 | The height of each step. |
--tap-progress-indicator-step-background-color | --tap-sys-color-surface-tertiary | The background color of each step. |
--tap-progress-indicator-active-step-background-color | --tap-sys-color-border-inverse-primary | The background color of active steps. |
tap-radio
Name | Default Value | Description |
---|---|---|
--tap-radio-border-radius | --tap-sys-radius-full | The border radius of the radio button. |
--tap-radio-height | --tap-sys-spacing-7 | The height of the radio button. |
--tap-radio-width | --tap-sys-spacing-7 | The width of the radio button. |
--tap-radio-background-color | --tap-sys-color-surface-primary | The background color of the radio button. |
--tap-radio-border | --tap-sys-color-border-inverse-primary | The border color of the radio button. |
--tap-radio-checked-background-color | --tap-sys-color-surface-inverse-primary | The background color of the checked radio button. |
--tap-radio-checked-color | --tap-sys-color-content-on-inverse | The color of the content inside the checked radio button. |
--tap-radio-disabled-background-color | --tap-sys-color-surface-disabled | The background color of the disabled radio button. |
--tap-radio-disabled-border-color | --tap-sys-color-surface-disabled | The border color of the disabled radio button. |
--tap-radio-disabled-color | --tap-sys-color-content-disabled | The color of the content inside the disabled radio button. |
--tap-radio-input-height | --tap-sys-spacing-7 | The height of the radio button input. |
--tap-radio-input-width | --tap-sys-spacing-7 | The width of the radio button input. |
tap-radio-group
Name | Default Value | Description |
---|---|---|
--tap-radio-group-padding | --tap-sys-spacing-3 | The padding around the radio group. |
--tap-radio-group-gap | --tap-sys-spacing-3 | The gap between radio buttons. |
tap-route
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the row. |
--tap-row-background-color | --tap-palette-white | The background color of the row. |
--tap-row-leading-vertical-padding | undefined | The vertical padding for the leading slot. |
--tap-row-leading-horizontal-padding | --tap-sys-spacing-4 | The horizontal padding for the leading slot. |
--tap-row-content-padding | --tap-sys-spacing-4 | The padding for the content slot. |
--tap-row-trailing-vertical-padding | undefined | The vertical padding for the trailing slot. |
--tap-row-trailing-horizontal-padding | --tap-sys-spacing-4 | The horizontal padding for the trailing slot. |
--tap-row-standard-height | --tap-sys-spacing-13 | The height of the standard size row. |
--tap-row-compact-height | --tap-sys-spacing-12 | The height of the compact size row. |
tap-row
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the row. |
--tap-row-background-color | --tap-palette-white | The background color of the row. |
--tap-row-leading-vertical-padding | undefined | The vertical padding for the leading slot. |
--tap-row-leading-horizontal-padding | --tap-sys-spacing-4 | The horizontal padding for the leading slot. |
--tap-row-content-padding | --tap-sys-spacing-4 | The padding for the content slot. |
--tap-row-trailing-vertical-padding | undefined | The vertical padding for the trailing slot. |
--tap-row-trailing-horizontal-padding | --tap-sys-spacing-4 | The horizontal padding for the trailing slot. |
--tap-row-standard-height | --tap-sys-spacing-13 | The height of the standard size row. |
--tap-row-compact-height | --tap-sys-spacing-12 | The height of the compact size row. |
tap-segmented-button
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the button. |
--tap-segmented-button-border-radius | --tap-sys-radius-full | The border radius of the button. |
--tap-segmented-button-color | --tap-sys-color-content-primary | The text color of the button. |
--tap-segmented-button-line-height | --tap-sys-typography-label-sm-height | The line height of the button text. |
--tap-segmented-button-font-size | --tap-sys-typography-label-sm-size | The font size of the button text. |
--tap-segmented-button-font-weight | --tap-sys-typography-label-sm-weight | The font weight of the button text. |
--tap-segmented-button-selected-background-color | --tap-sys-color-surface-primary | The background color of the selected button. |
tap-segmented-button-group
Name | Default Value | Description |
---|---|---|
--tap-segmented-button-group-color-surface | --tap-sys-color-surface-secondary | The background color of the button group. |
--tap-segmented-button-group-border-radius | --tap-sys-radius-full | The border radius of the button group. |
--tap-segmented-button-group-padding | --tap-sys-spacing-3 | The padding inside the button group. |
--tap-segmented-button-group-sm-height | --tap-sys-spacing-10 | The height of the small size button group. |
--tap-segmented-button-group-md-height | --tap-sys-spacing-11 | The height of the medium size button group. |
tap-skeleton
Name | Default Value | Description |
---|---|---|
--tap-skeleton-background | --tap-sys-color-surface-tertiary | Background color of the skeleton |
--tap-skeleton-radius | --tap-sys-radius-2 | Border radius of the skeleton |
--tap-skeleton-width | 100% | Width of the skeleton |
--tap-skeleton-height | --tap-sys-spacing-8 | Height of the skeleton |
--tap-skeleton-rect-radius | --tap-sys-spacing-0 | Border radius of the skeleton variant rect |
--tap-skeleton-circle-radius | --tap-sys-radius-full | Border radius of the skeleton variant circle |
--tap-skeleton-circle-width | --tap-sys-spacing-10 | Width of the skeleton variant circle |
--tap-skeleton-circle-height | --tap-sys-spacing-10 | Height of the skeleton variant circle |
tap-spinner
Name | Default Value | Description |
---|---|---|
--tap-spinner-color-primary | --tap-sys-color-surface-black | - |
--tap-spinner-color-inverse | --tap-sys-color-surface-white | - |
--tap-spinner-sm-size | --tap-sys-spacing-7 | - |
--tap-spinner-md-size | --tap-sys-spacing-8 | - |
--tap-spinner-lg-size | --tap-sys-spacing-10 | - |
--tap-spinner-padding | --tap-sys-spacing-2 | - |
tap-step-indicator
Name | Default Value | Description |
---|---|---|
--tap-step-indicator-step-size | --tap-sys-spacing-5 | The size of each step. |
--tap-step-indicator-step-border-radius | --tap-sys-radius-full | The border radius of each step. |
--tap-step-indicator-step-border-color | --tap-sys-color-surface-primary | The border color of each step. |
--tap-step-indicator-step-background-color | --tap-sys-color-border-primary | The background color of each step. |
tap-stepper
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | - |
--tap-stepper-typography-label-sm-size | --tap-sys-typography-label-md-size | - |
--tap-stepper-typography-label-md-size | --tap-sys-typography-label-lg-size | - |
tap-switch
Name | Default Value | Description |
---|---|---|
--tap-switch-background-color | --tap-sys-color-surface-tertiary | The background color of the switch. |
--tap-switch-checked-background-color | --tap-sys-color-surface-inverse-primary | The background color of the checked switch. |
--tap-switch-disabled-background-color | var(--tap-sys-color-surface-disabled) | The background color of the disabled switch. |
tap-text-field
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the text field. |
--tap-input-field-gap | --tap-sys-spacing-4 | The gap between the elements in the text field. |
--tap-input-label-color | --tap-sys-color-content-primary | The color of the label. |
--tap-input-label-line-height | --tap-sys-typography-label-sm-height | The line height of the label. |
--tap-input-label-font-size | --tap-sys-typography-label-sm-size | The font size of the label. |
--tap-input-label-font-weight | --tap-sys-typography-label-sm-weight | The font weight of the label. |
--tap-input-caption-color | --tap-sys-color-content-tertiary | The color of the caption. |
--tap-input-caption-line-height | --tap-sys-typography-body-sm-height | The line height of the caption. |
--tap-input-caption-font-size | --tap-sys-typography-body-sm-size | The font size of the caption. |
--tap-input-caption-font-weight | --tap-sys-typography-body-sm-weight | The font weight of the caption. |
--tap-input-container-height | --tap-sys-spacing-11 | The height of the container. |
--tap-input-container-padding | --tap-sys-spacing-6 | The padding inside the container. |
--tap-input-container-gap | --tap-sys-spacing-4 | The gap between elements in the container. |
--tap-input-container-background-color | --tap-sys-color-surface-tertiary | The background color of the container. |
--tap-input-container-border-radius | --tap-sys-radius-3 | The border radius of the container. |
--tap-input-focus-background-color | --tap-sys-color-surface-secondary | The background color of the container when focused. |
--tap-input-focus-border-width | --tap-sys-color-border-inverse-primary | The border width of the container when focused. |
--tap-text-field-input-color | --tap-sys-color-content-primary | The color of the input text. |
--tap-text-field-input-line-height | --tap-sys-typography-body-md-height | The line height of the input text. |
--tap-text-field-input-font-size | --tap-sys-typography-body-md-size | The font size of the input text. |
--tap-text-field-input-font-weight | --tap-sys-typography-body-md-weight | The font weight of the input text. |
--tap-text-field-input-placeholder-color | --tap-sys-color-content-tertiary | The color of the placeholder text. |
--tap-text-field-input-placeholder-line-height | --tap-sys-typography-body-md-height | The line height of the placeholder text. |
--tap-text-field-input-placeholder-font-size | --tap-sys-typography-body-md-size | The font size of the placeholder text. |
--tap-text-field-input-placeholder-font-weight | --tap-sys-typography-body-md-weight | The font weight of the placeholder text. |
--tap-input-error-caption-color | --tap-sys-color-content-negative | The color of the caption when there is an error. |
--tap-input-error-container-background-color | --tap-sys-color-surface-negative-light | The background color of the container when there is an error. |
--tap-input-error-container-border-color | --tap-sys-color-border-negative | The border color of the container when there is an error. |
--tap-input-disabled-container-background-color | --tap-sys-color-surface-disabled | The background color of the container when disabled. |
--tap-input-disabled-container-color | --tap-sys-color-content-disabled | The color of the text and elements when disabled. |
--tap-input-caret-color | --tap-sys-color-surface-accent | The color of the input caret. |
tap-textarea
Name | Default Value | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the input. |
--tap-input-field-gap | --tap-sys-spacing-4 | The gap between the elements in the input. |
--tap-input-label-color | --tap-sys-color-content-primary | The color of the label. |
--tap-input-label-line-height | --tap-sys-typography-label-sm-height | The line height of the label. |
--tap-input-label-font-size | --tap-sys-typography-label-sm-size | The font size of the label. |
--tap-input-label-font-weight | --tap-sys-typography-label-sm-weight | The font weight of the label. |
--tap-input-caption-color | --tap-sys-color-content-tertiary | The color of the caption. |
--tap-input-caption-line-height | --tap-sys-typography-body-sm-height | The line height of the caption. |
--tap-input-caption-font-size | --tap-sys-typography-body-sm-size | The font size of the caption. |
--tap-input-caption-font-weight | --tap-sys-typography-body-sm-weight | The font weight of the caption. |
--tap-input-container-height | --tap-sys-spacing-11 | The height of the container. |
--tap-input-container-padding | --tap-sys-spacing-6 | The padding inside the container. |
--tap-input-container-gap | --tap-sys-spacing-4 | The gap between elements in the container. |
--tap-input-container-background-color | --tap-sys-color-surface-tertiary | The background color of the container. |
--tap-input-container-border-radius | --tap-sys-radius-3 | The border radius of the container. |
--tap-input-focus-background-color | --tap-sys-color-surface-secondary | The background color of the container when focused. |
--tap-input-focus-border-width | --tap-sys-color-border-inverse-primary | The border width of the container when focused. |
--tap-textarea-input-color | --tap-sys-color-content-primary | The color of the input text. |
--tap-textarea-input-line-height | --tap-sys-typography-body-md-height | The line height of the input text. |
--tap-textarea-input-font-size | --tap-sys-typography-body-md-size | The font size of the input text. |
--tap-textarea-input-font-weight | --tap-sys-typography-body-md-weight | The font weight of the input text. |
--tap-textarea-input-placeholder-color | --tap-sys-color-content-tertiary | The color of the placeholder text. |
--tap-textarea-input-placeholder-line-height | --tap-sys-typography-body-md-height | The line height of the placeholder text. |
--tap-textarea-input-placeholder-font-size | --tap-sys-typography-body-md-size | The font size of the placeholder text. |
--tap-textarea-input-placeholder-font-weight | --tap-sys-typography-body-md-weight | The font weight of the placeholder text. |
--tap-input-error-caption-color | --tap-sys-color-content-negative | The color of the caption when there is an error. |
--tap-input-error-container-background-color | --tap-sys-color-surface-negative-light | The background color of the container when there is an error. |
--tap-input-error-container-border-color | --tap-sys-color-border-negative | The border color of the container when there is an error. |
--tap-input-disabled-container-background-color | --tap-sys-color-surface-disabled | The background color of the container when disabled. |
--tap-input-disabled-container-color | --tap-sys-color-content-disabled | The color of the text and elements when disabled. |
--tap-input-caret-color | --tap-sys-color-surface-accent | The color of the input caret. |
tap-toast
Name | Default Value | Description |
---|---|---|
--tap-toast-vertical-padding | --tap-sys-spacing-5 | The vertical padding inside the toast. |
--tap-toast-horizontal-padding | --tap-sys-spacing-5 | The horizontal padding inside the toast. |
--tap-toast-background-color-default | --tap-sys-color-surface-inverse-secondary | The default background color of the toast. |
--tap-toast-color-default | --tap-sys-color-content-on-inverse | The default text color of the toast. |
--tap-toast-background-color-success | --tap-sys-color-surface-positive | The background color of the success variant. |
--tap-toast-color-success | --tap-sys-color-content-on-inverse | The text color of the success variant. |
--tap-toast-background-color-error | --tap-sys-color-surface-negative | The background color of the error variant. |
--tap-toast-color-error | --tap-sys-color-content-on-inverse | The text color of the error variant. |
--tap-toast-background-color-info | --tap-sys-color-surface-accent | The background color of the info variant. |
--tap-toast-color-info | --tap-sys-color-content-on-inverse | The text color of the info variant. |
--tap-toast-background-color-warning | --tap-sys-color-surface-warning | The background color of the warning variant. |
--tap-toast-color-warning | --tap-sys-color-content-primary | The text color of the warning variant. |
--tap-toast-background-color-inverse | --tap-sys-color-surface-inverse-secondary | The background color of the inverse variant. |
--tap-toast-color-inverse | --tap-sys-color-content-on-inverse | The text color of the inverse variant. |
--tap-toast-dismiss-color | 'inherit' | The color of the dismiss button. |
--tap-toast-dismiss-background-color | transparent | The background color of the dismiss button. |