Components Tokens
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-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-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-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-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-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-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-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-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-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-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-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. |