component / accordion
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-accordion-collapse-duration |
125ms | --oc-semantic-transition-collapse-duration | |
--oc-component-accordion-collapse-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-collapse-easing | |
--oc-component-accordion-expand-duration |
200ms | --oc-semantic-transition-expand-duration | |
--oc-component-accordion-expand-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-expand-easing | |
--oc-component-accordion-gap-y |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-accordion-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-accordion-icon-size |
1.5rem | ||
--oc-component-accordion-label-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-accordion-label-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-component-accordion-spacing-bottom |
12px | --oc-semantic-spacing-absolute-75 |
component / action-signifier
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-action-signifier-icon-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-action-signifier-icon-size |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-action-signifier-inverted-icon-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-action-signifier-inverted-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-action-signifier-text-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-action-signifier-text-gap-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-action-signifier-text-icon-size |
12px | --oc-base-dimension-absolute-12 | |
--oc-component-action-signifier-text-text-color |
#2366cb | --oc-semantic-color-text-interactive |
component / back-to-top-button
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-back-to-top-button-appear-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-back-to-top-button-appear-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing | |
--oc-component-back-to-top-button-disappear-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-back-to-top-button-disappear-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-back-to-top-button-outer-spacing-x |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-back-to-top-button-outer-spacing-y |
24px | --oc-semantic-spacing-absolute-150 |
component / badge
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-badge-50-height |
0.5rem | ||
--oc-component-badge-50-width |
0.5rem | ||
--oc-component-badge-100-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-badge-100-font |
700 0.625rem/0.75rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-10 | |
--oc-component-badge-100-height |
1rem | ||
--oc-component-badge-100-icon-size |
0.75rem | ||
--oc-component-badge-100-icon-spacing |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-badge-100-min-width |
1rem | ||
--oc-component-badge-100-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-badge-100-text-spacing-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-badge-border-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-badge-border-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-badge-error-background-color |
#e64b69 | --oc-semantic-color-stroke-error | |
--oc-component-badge-error-background-color-text |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-badge-hint-background-color |
#418ade | --oc-semantic-color-stroke-hint | |
--oc-component-badge-hint-background-color-text |
#2366cb | --oc-semantic-color-text-hint | |
--oc-component-badge-info-background-color |
#212121 | --oc-semantic-color-text-info | |
--oc-component-badge-info-background-color-text |
#212121 | --oc-semantic-color-text-info | |
--oc-component-badge-primary-background-color |
#dc001d | --oc-semantic-color-background-primary | |
--oc-component-badge-primary-background-color-text |
#dc001d | --oc-semantic-color-background-primary | |
--oc-component-badge-secondary-background-color |
#6d6d6d | --oc-semantic-color-stroke-info | |
--oc-component-badge-secondary-background-color-text |
#6d6d6d | --oc-semantic-color-stroke-info | |
--oc-component-badge-success-background-color |
#3e935e | --oc-semantic-color-stroke-success | |
--oc-component-badge-success-background-color-text |
#227642 | --oc-semantic-color-text-success | |
--oc-component-badge-warning-background-color |
#e35316 | --oc-semantic-color-stroke-warning | |
--oc-component-badge-warning-background-color-text |
#ae4518 | --oc-semantic-color-text-warning |
component / banner
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-banner-100-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-banner-100-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-banner-100-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-banner-100-spacing |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-banner-100-text-spacing-bottom |
0px | --oc-semantic-spacing-absolute-0 | |
--oc-component-banner-200-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-banner-200-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-banner-200-headline-font |
700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-100 | |
--oc-component-banner-200-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-banner-200-spacing |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-banner-200-text-spacing-bottom |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-banner-300-gap-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-banner-300-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-banner-300-headline-font |
700 1.25rem/1.75rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-200 | |
--oc-component-banner-300-icon-size |
64px | --oc-base-dimension-absolute-64 | |
--oc-component-banner-300-spacing |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-banner-300-text-spacing-bottom |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-banner-border-color |
rgba(33, 33, 33, 0.10196078431372549) | --oc-semantic-color-stroke-divider | |
--oc-component-banner-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-banner-border-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-banner-copy-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-banner-copy-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-banner-error-background-color |
#ffe2e2 | --oc-semantic-color-background-soft-error | |
--oc-component-banner-error-headline-color |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-banner-error-icon-color |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-banner-hint-background-color |
#dcf2ff | --oc-semantic-color-background-soft-hint | |
--oc-component-banner-hint-headline-color |
#2366cb | --oc-semantic-color-text-hint | |
--oc-component-banner-hint-icon-color |
#2366cb | --oc-semantic-color-text-hint | |
--oc-component-banner-info-background-color |
#e5e5e5 | --oc-semantic-color-background-soft-info | |
--oc-component-banner-info-headline-color |
#212121 | --oc-semantic-color-text-info | |
--oc-component-banner-info-icon-color |
#212121 | --oc-semantic-color-text-info | |
--oc-component-banner-link-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-banner-success-background-color |
#d3eedd | --oc-semantic-color-background-soft-success | |
--oc-component-banner-success-headline-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-banner-success-icon-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-banner-warning-background-color |
#fee3d3 | --oc-semantic-color-background-soft-warning | |
--oc-component-banner-warning-headline-color |
#ae4518 | --oc-semantic-color-text-warning | |
--oc-component-banner-warning-icon-color |
#ae4518 | --oc-semantic-color-text-warning |
component / block
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-block-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-block-background-color-default |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-block-border-radius |
0rem | --oc-semantic-border-radius-0 | |
--oc-component-block-default-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-block-default-spacing-y |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-block-stacked-border-color |
rgba(33, 33, 33, 0.10196078431372549) | --oc-semantic-color-stroke-divider | |
--oc-component-block-stacked-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-block-stacked-default-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-block-stacked-default-spacing-y |
16px | --oc-semantic-spacing-absolute-100 |
component / button
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-button-50-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-button-50-default-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-button-50-disabled-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-button-50-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-button-50-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-button-50-icon-spacing-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-button-50-keep-padding-icon-hidden |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-button-50-primary-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-button-50-primary-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-button-50-secondary-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-button-50-spacing-y |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-button-50-tertiary-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-button-100-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-button-100-default-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-button-100-disabled-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-button-100-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-button-100-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-button-100-icon-spacing-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-button-100-keep-padding-icon-hidden |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-button-100-primary-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-button-100-primary-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-button-100-secondary-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-button-100-spacing-y |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-button-100-tertiary-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-button-disabled-background-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-button-disabled-icon-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-button-disabled-text-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-button-primary-background-color |
#dc001d | --oc-semantic-color-background-primary | |
--oc-component-button-primary-background-color-active |
#850012 | --oc-base-color-otto-red-darken-20 | |
--oc-component-button-primary-background-color-hover |
#b80018 | --oc-base-color-otto-red-darken-10 | |
--oc-component-button-primary-icon-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-button-primary-text-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-button-secondary-background-color |
#e5e5e5 | #545454 | --oc-base-color-gray-100 |
--oc-component-button-secondary-background-color-active |
#cccccc | #6d6d6d | --oc-base-color-black-lighten-67 |
--oc-component-button-secondary-background-color-hover |
#d6d6d6 | #616161 | --oc-base-color-black-lighten-71 |
--oc-component-button-secondary-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-button-secondary-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-button-secondary-over-color-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-button-secondary-over-color-background-color-active |
#cccccc | #474747 | --oc-base-color-gray-150 |
--oc-component-button-secondary-over-color-background-color-hover |
#e5e5e5 | #3a3a3a | --oc-base-color-gray-100 |
--oc-component-button-secondary-over-color-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-button-secondary-over-color-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-button-spinner-delay |
275ms | --oc-semantic-duration-medium-50 | |
--oc-component-button-success-background-color |
#d3eedd | --oc-semantic-color-background-success | |
--oc-component-button-success-background-color-active |
#89d2a4 | #268247 | |
--oc-component-button-success-background-color-hover |
#aee0c1 | #1b5a32 | |
--oc-component-button-success-icon-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-button-success-text-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-button-tertiary-background-color |
rgba(33, 33, 33, 0) | rgba(255, 255, 255, 0) | --oc-base-color-black-opacity-0 |
--oc-component-button-tertiary-background-color-active |
rgba(33, 33, 33, 0.10196078431372549) | rgba(255, 255, 255, 0.10196078431372549) | --oc-base-color-black-opacity-10 |
--oc-component-button-tertiary-background-color-hover |
rgba(33, 33, 33, 0.050980392156862744) | rgba(255, 255, 255, 0.050980392156862744) | --oc-base-color-black-opacity-5 |
--oc-component-button-tertiary-icon-color |
#2366cb | --oc-semantic-color-text-interactive | |
--oc-component-button-tertiary-text-color |
#2366cb | --oc-semantic-color-text-interactive | |
--oc-component-button-transition-resize-duration |
200ms | --oc-semantic-transition-expand-duration | |
--oc-component-button-transition-resize-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-expand-easing |
component / card
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-card-50-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-card-100-border-radius |
1rem | --oc-semantic-border-radius-200 | |
--oc-component-card-background-color-default |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-card-default-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-card-inverted-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-card-overlay-active |
rgba(0, 0, 0, 0.09019607843137255) | --oc-semantic-color-overlay-active | |
--oc-component-card-overlay-hover |
rgba(0, 0, 0, 0.03137254901960784) | --oc-semantic-color-overlay-hover | |
--oc-component-card-text-color |
#212121 | --oc-semantic-color-text-default |
component / carousel
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-carousel-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-carousel-hide-button-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-carousel-hide-button-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-carousel-show-button-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-carousel-show-button-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing | |
--oc-component-carousel-stage-gap-x |
16px | --oc-semantic-spacing-cinema-gap | |
--oc-component-carousel-stage-spacing-x |
0px | --oc-base-dimension-absolute-0 |
component / chat-bubble
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-chat-bubble-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-chat-bubble-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-chat-bubble-datetime-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-chat-bubble-datetime-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-chat-bubble-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-chat-bubble-sender-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-chat-bubble-sender-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-chat-bubble-sender-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-chat-bubble-spacing-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-chat-bubble-spacing-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-chat-bubble-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-chat-bubble-text-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 |
component / chip
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-chip-100-border-radius |
16px | ||
--oc-component-chip-100-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-chip-100-gap-x |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-chip-100-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-chip-100-image-size |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-chip-100-min-height |
2rem | --oc-base-dimension-relative-32 | |
--oc-component-chip-100-min-width |
2rem | --oc-base-dimension-relative-32 | |
--oc-component-chip-100-spacing-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-chip-100-spacing-y |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-chip-200-border-radius |
24px | ||
--oc-component-chip-200-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-chip-200-gap-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-chip-200-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-chip-200-image-size |
40px | --oc-base-dimension-absolute-40 | |
--oc-component-chip-200-min-height |
3rem | --oc-base-dimension-relative-48 | |
--oc-component-chip-200-min-width |
3rem | --oc-base-dimension-relative-48 | |
--oc-component-chip-200-spacing-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-chip-200-spacing-y |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-chip-200-text-spacing-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-chip-checked-background-color |
#b9e5ff | #1a4991 | --oc-base-color-interactive-blue-lighten-45 |
--oc-component-chip-checked-background-color-active |
#53bfff | #215fbc | --oc-base-color-interactive-blue-lighten-25 |
--oc-component-chip-checked-background-color-hover |
#86d2ff | #1d54a7 | --oc-base-color-interactive-blue-lighten-35 |
--oc-component-chip-checked-border-color |
#212121 | #ffffff | --oc-base-color-black-100 |
--oc-component-chip-checked-border-width |
1.5px | --oc-semantic-border-width-150 | |
--oc-component-chip-checked-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-chip-default-background-color |
#f0f0f0 | --oc-semantic-color-background-stacked | |
--oc-component-chip-default-background-color-active |
#bdbdbd | #545454 | --oc-base-color-black-lighten-61 |
--oc-component-chip-default-background-color-hover |
#d6d6d6 | #474747 | --oc-base-color-black-lighten-71 |
--oc-component-chip-disabled-background-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-chip-disabled-checked-border-color |
#cccccc | --oc-semantic-color-stroke-disabled | |
--oc-component-chip-disabled-icon-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-chip-disabled-text-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-chip-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-chip-image-spacing-left |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-chip-over-color-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-chip-over-color-background-color-active |
#cccccc | #474747 | --oc-base-color-gray-150 |
--oc-component-chip-over-color-background-color-hover |
#e5e5e5 | #3a3a3a | --oc-base-color-gray-100 |
--oc-component-chip-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-chip-transition-duration |
200ms | --oc-semantic-transition-expand-duration | |
--oc-component-chip-transition-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-expand-easing |
component / cinema
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-cinema-cut-item-visible-percentage |
0.5 | ||
--oc-component-cinema-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-cinema-hide-button-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-cinema-hide-button-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-cinema-show-button-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-cinema-show-button-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing | |
--oc-component-cinema-stage-gap-x |
16px | --oc-semantic-spacing-cinema-gap | |
--oc-component-cinema-stage-spacing-x |
16px | --oc-semantic-spacing-content-layout-outer |
component / divider
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-divider-border-color |
rgba(33, 33, 33, 0.10196078431372549) | --oc-semantic-color-stroke-divider | |
--oc-component-divider-border-width |
1px | --oc-semantic-border-width-100 |
component / expander
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-expander-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-expander-collapse-duration |
125ms | --oc-semantic-transition-collapse-duration | |
--oc-component-expander-collapse-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-collapse-easing | |
--oc-component-expander-default-cutoff-height |
9.375rem | ||
--oc-component-expander-expand-duration |
200ms | --oc-semantic-transition-expand-duration | |
--oc-component-expander-expand-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-expand-easing | |
--oc-component-expander-fade-color |
linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.75) 50%, #FFF 100%) | linear-gradient(180deg, rgba(46,46,46, 0.00) 0%, rgba(46,46,46, 0.75) 50%, #2e2e2e 100%) | |
--oc-component-expander-fade-height |
6.25rem | ||
--oc-component-expander-fade-stop-0 |
rgba(255, 255, 255, 0) | rgba(46, 46, 46, 0) | |
--oc-component-expander-fade-stop-100 |
#ffffff | #2e2e2e | |
--oc-component-expander-fade-stop-50 |
rgba(255, 255, 255, 0.7490196078431373) | rgba(46, 46, 46, 0.7490196078431373) | |
--oc-component-expander-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-expander-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-expander-primary-icon-color |
#2366cb | --oc-semantic-color-text-interactive | |
--oc-component-expander-primary-text-color |
#2366cb | --oc-semantic-color-text-interactive | |
--oc-component-expander-secondary-icon-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-expander-secondary-text-color |
#6d6d6d | --oc-semantic-color-text-secondary |
component / focused-dialog
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-focused-dialog-action-bar-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-focused-dialog-action-bar-conditional-border-top-color |
#f0f0f0 | --oc-semantic-color-background-frame | |
--oc-component-focused-dialog-action-bar-conditional-border-top-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-focused-dialog-action-bar-conditional-shadow |
drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.07)) | --oc-base-shadow-100 | |
--oc-component-focused-dialog-action-bar-spacing-bottom |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-focused-dialog-action-bar-spacing-top |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-focused-dialog-action-bar-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-focused-dialog-background-color |
#f0f0f0 | --oc-semantic-color-background-frame | |
--oc-component-focused-dialog-content-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-focused-dialog-footer-link-divider |
・ | ||
--oc-component-focused-dialog-footer-link-divider-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-focused-dialog-footer-link-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-focused-dialog-footer-link-gap |
0px | --oc-semantic-spacing-absolute-0 | |
--oc-component-focused-dialog-footer-small-print-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-focused-dialog-footer-small-print-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-focused-dialog-footer-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-focused-dialog-footer-spacing-top |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-focused-dialog-footer-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-focused-dialog-header-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-focused-dialog-header-close-button-spacing-right |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-focused-dialog-header-close-button-spacing-top |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-focused-dialog-header-conditional-border-bottom-color |
#f0f0f0 | --oc-semantic-color-background-frame | |
--oc-component-focused-dialog-header-conditional-border-bottom-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-focused-dialog-header-conditional-shadow |
drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.07)) | --oc-base-shadow-100 | |
--oc-component-focused-dialog-header-gap-y |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-focused-dialog-header-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-focused-dialog-header-title-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-focused-dialog-header-title-font |
700 1.25rem/1.75rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-200 | |
--oc-component-focused-dialog-header-title-spacing-top |
4px | --oc-semantic-spacing-absolute-25 |
component / form
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-form-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-form-background-color-checked |
#212121 | --oc-semantic-color-background-inverted | |
--oc-component-form-border-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-form-border-width-active |
2px | --oc-semantic-border-width-200 | |
--oc-component-form-border-width-hover |
2px | --oc-semantic-border-width-200 | |
--oc-component-form-checkbox-50-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-form-checkbox-50-container-size |
1.25rem | ||
--oc-component-form-checkbox-50-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-form-checkbox-50-hitbox-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-form-checkbox-50-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-form-checkbox-50-label-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-form-checkbox-100-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-form-checkbox-100-container-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-form-checkbox-100-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-form-checkbox-100-hitbox-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-form-checkbox-100-icon-size |
1rem | 16px | --oc-base-dimension-relative-16 |
--oc-component-form-checkbox-100-label-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-form-checkbox-icon-scale-duration |
125ms | --oc-component-back-to-top-button-appear-duration | |
--oc-component-form-checkbox-icon-scale-easing |
cubic-bezier(0.6,0,0.2,1.3) | --oc-base-easing-expressive-bounce | |
--oc-component-form-default-border-color |
#949494 | #6d6d6d | --oc-base-color-gray-200 |
--oc-component-form-default-border-color-active |
#6d6d6d | --oc-base-color-black-lighten-30 | |
--oc-component-form-default-border-color-focus |
#212121 | #cccccc | --oc-base-color-black-100 |
--oc-component-form-default-hint-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-form-default-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-form-default-icon-color-checked |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-form-default-label-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-form-disabled-background-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-form-disabled-background-color-checked |
#cccccc | --oc-semantic-color-stroke-disabled | |
--oc-component-form-disabled-border-color |
#cccccc | --oc-semantic-color-stroke-disabled | |
--oc-component-form-disabled-hint-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-form-disabled-icon-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-form-disabled-icon-color-checked |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-form-disabled-input-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-form-disabled-label-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-form-error-background-color-checked |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-form-error-border-color |
#e64b69 | --oc-semantic-color-stroke-error | |
--oc-component-form-error-hint-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-form-error-icon-color |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-form-error-label-color |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-form-error-validation-message-color |
#b30023 | --oc-semantic-color-text-error | |
--oc-component-form-field-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-form-field-floating-label-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-form-field-floating-label-inner-spacing-x |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-form-field-floating-label-spacing-left |
8px | --oc-base-dimension-absolute-8 | |
--oc-component-form-field-focus-outline-radius |
calc(0.5rem + 2px) | --oc-semantic-focus-outline-radius-100 | |
--oc-component-form-field-input-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-form-field-input-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-form-field-label-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-form-field-placeholder-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-form-field-placeholder-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-form-field-spacing-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-form-field-spacing-y |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-form-group-gap-x |
24px | --oc-semantic-spacing-form-checkbox-radio-button-horizontal | |
--oc-component-form-group-gap-y |
24px | --oc-semantic-spacing-form-checkbox-radio-button-vertical | |
--oc-component-form-hint-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-form-hint-gap-y |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-form-label-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-form-label-motion-duration |
125ms | --oc-semantic-duration-short-100 | |
--oc-component-form-label-motion-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-base-easing-default-in-out | |
--oc-component-form-radio-button-50-container-size |
1.25rem | ||
--oc-component-form-radio-button-50-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-form-radio-button-50-hitbox-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-form-radio-button-50-icon-size |
0.625rem | ||
--oc-component-form-radio-button-50-label-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-form-radio-button-100-container-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-form-radio-button-100-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-form-radio-button-100-hitbox-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-form-radio-button-100-icon-size |
0.625rem | ||
--oc-component-form-radio-button-100-label-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-form-radio-button-icon-scale-duration |
125ms | --oc-component-back-to-top-button-appear-duration | |
--oc-component-form-radio-button-icon-scale-easing |
cubic-bezier(0.6,0,0.2,1.3) | --oc-base-easing-expressive-bounce | |
--oc-component-form-state-icon-gap-x |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-form-success-border-color |
#3e935e | --oc-semantic-color-stroke-success | |
--oc-component-form-success-hint-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-form-success-icon-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-form-success-label-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-form-validation-message-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-form-warning-border-color |
#e35316 | --oc-semantic-color-stroke-warning | |
--oc-component-form-warning-hint-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-form-warning-icon-color |
#ae4518 | --oc-semantic-color-text-warning | |
--oc-component-form-warning-label-color |
#ae4518 | --oc-semantic-color-text-warning |
component / icon
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-icon-50-default-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-icon-100-default-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-icon-color-transition-duration |
50ms | --oc-semantic-duration-short-50 | |
--oc-component-icon-color-transition-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-base-easing-default-in-out |
component / icon-button
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-icon-button-25-background-size |
1rem | --oc-base-dimension-relative-16 | |
--oc-component-icon-button-25-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-icon-button-25-hitbox-size |
calc(1rem + 2* 4px) | ||
--oc-component-icon-button-25-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-icon-button-50-background-size |
2rem | --oc-base-dimension-relative-32 | |
--oc-component-icon-button-50-border-radius |
1rem | --oc-semantic-border-radius-200 | |
--oc-component-icon-button-50-hitbox-size |
calc(2rem + 2* 8px) | ||
--oc-component-icon-button-50-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-icon-button-75-background-size |
2.5rem | --oc-base-dimension-relative-40 | |
--oc-component-icon-button-75-border-radius |
1.25rem | --oc-semantic-border-radius-250 | |
--oc-component-icon-button-75-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-icon-button-100-background-size |
3rem | --oc-base-dimension-relative-48 | |
--oc-component-icon-button-100-border-radius |
1.5rem | --oc-semantic-border-radius-300 | |
--oc-component-icon-button-100-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-icon-button-disabled-background-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-icon-button-disabled-icon-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-icon-button-elevation-level-100-background-color |
#ffffff | #f0f0f0 | --oc-semantic-color-background-canvas |
--oc-component-icon-button-elevation-level-100-background-color-active |
#cccccc | #545454 | --oc-base-color-gray-150 |
--oc-component-icon-button-elevation-level-100-background-color-hover |
#e5e5e5 | #474747 | --oc-base-color-gray-100 |
--oc-component-icon-button-elevation-level-100-shadow |
drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.07)) | --oc-base-shadow-100 | |
--oc-component-icon-button-elevation-level-200-background-color |
#ffffff | --oc-semantic-color-background-above | |
--oc-component-icon-button-elevation-level-200-background-color-active |
#cccccc | #616161 | --oc-base-color-gray-150 |
--oc-component-icon-button-elevation-level-200-background-color-hover |
#e5e5e5 | #545454 | --oc-base-color-gray-100 |
--oc-component-icon-button-elevation-level-200-shadow |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-above | |
--oc-component-icon-button-elevation-level-300-background-color |
#ffffff | --oc-semantic-color-background-sticky | |
--oc-component-icon-button-elevation-level-300-background-color-active |
#cccccc | #6d6d6d | --oc-base-color-gray-150 |
--oc-component-icon-button-elevation-level-300-background-color-hover |
#e5e5e5 | #616161 | --oc-base-color-gray-100 |
--oc-component-icon-button-elevation-level-300-shadow |
drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.30)) drop-shadow(0px 9px 10px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-sticky | |
--oc-component-icon-button-inverted-background-color |
rgba(255, 255, 255, 0) | rgba(0, 0, 0, 0) | |
--oc-component-icon-button-inverted-background-color-active |
rgba(255, 255, 255, 0.10196078431372549) | rgba(0, 0, 0, 0.10196078431372549) | |
--oc-component-icon-button-inverted-background-color-hover |
rgba(255, 255, 255, 0.03137254901960784) | rgba(0, 0, 0, 0.03137254901960784) | |
--oc-component-icon-button-inverted-icon-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-icon-button-primary-background-color |
#dc001d | --oc-component-button-primary-background-color | |
--oc-component-icon-button-primary-background-color-active |
#850012 | --oc-component-button-primary-background-color-active | |
--oc-component-icon-button-primary-background-color-hover |
#b80018 | --oc-component-button-primary-background-color-hover | |
--oc-component-icon-button-primary-icon-color |
#ffffff | --oc-component-button-primary-icon-color | |
--oc-component-icon-button-secondary-background-color |
#e5e5e5 | --oc-component-button-secondary-background-color | |
--oc-component-icon-button-secondary-background-color-active |
#cccccc | --oc-component-button-secondary-background-color-active | |
--oc-component-icon-button-secondary-background-color-hover |
#d6d6d6 | --oc-component-button-secondary-background-color-hover | |
--oc-component-icon-button-secondary-icon-color |
#212121 | --oc-component-button-secondary-icon-color | |
--oc-component-icon-button-secondary-over-color-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-icon-button-secondary-over-color-background-color-active |
#cccccc | #474747 | --oc-base-color-gray-150 |
--oc-component-icon-button-secondary-over-color-background-color-hover |
#e5e5e5 | #3a3a3a | --oc-base-color-gray-100 |
--oc-component-icon-button-secondary-over-color-elevated-shadow |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) | --oc-base-shadow-200 | |
--oc-component-icon-button-secondary-over-color-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-icon-button-spinner-delay |
275ms | --oc-semantic-duration-medium-50 | |
--oc-component-icon-button-success-background-color |
#d3eedd | --oc-component-button-success-background-color | |
--oc-component-icon-button-success-background-color-active |
#89d2a4 | --oc-component-button-success-background-color-active | |
--oc-component-icon-button-success-background-color-hover |
#aee0c1 | --oc-component-button-success-background-color-hover | |
--oc-component-icon-button-success-icon-color |
#227642 | --oc-component-button-success-icon-color | |
--oc-component-icon-button-tertiary-icon-color |
#2366cb | --oc-component-button-tertiary-icon-color | |
--oc-component-icon-button-transparent-background-color |
rgba(0, 0, 0, 0) | --oc-semantic-color-overlay-default | |
--oc-component-icon-button-transparent-background-color-active |
rgba(0, 0, 0, 0.09019607843137255) | --oc-semantic-color-overlay-active | |
--oc-component-icon-button-transparent-background-color-hover |
rgba(0, 0, 0, 0.03137254901960784) | --oc-semantic-color-overlay-hover | |
--oc-component-icon-button-transparent-icon-color |
#212121 | --oc-semantic-color-text-default |
component / image
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-image-ambient-contain-default-background-color |
#f0f0f0 | --oc-semantic-color-background-stacked | |
--oc-component-image-ambient-default-background-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-image-backdrop-preset |
blurred-backdrop | ||
--oc-component-image-cutout-default-background-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-image-default-border-radius |
0rem | --oc-semantic-border-radius-0 | |
--oc-component-image-default-cutout-spacing |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-image-min-inner-radius |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-image-missing-background-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-image-missing-icon-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-image-missing-icon-max-size |
24px | --oc-base-dimension-absolute-24 |
component / interactive-overlay
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-interactive-overlay-active-transition-duration |
15ms | --oc-semantic-duration-instant | |
--oc-component-interactive-overlay-active-transition-easing |
cubic-bezier(0,0,1,1) | --oc-base-easing-linear | |
--oc-component-interactive-overlay-background-color-active |
rgba(0, 0, 0, 0.09019607843137255) | --oc-semantic-color-overlay-active | |
--oc-component-interactive-overlay-background-color-hover |
rgba(0, 0, 0, 0.03137254901960784) | --oc-semantic-color-overlay-hover | |
--oc-component-interactive-overlay-default-border-radius |
0rem | --oc-semantic-border-radius-0 | |
--oc-component-interactive-overlay-default-offset |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-interactive-overlay-default-scale |
0.009999999776482582px | ||
--oc-component-interactive-overlay-hover-transition-duration |
50ms | --oc-semantic-duration-short-50 | |
--oc-component-interactive-overlay-hover-transition-easing |
cubic-bezier(0,0,0.4,1) | --oc-base-easing-default-out | |
--oc-component-interactive-overlay-inverted-background-color-active |
rgba(255, 255, 255, 0.12156862745098039) | --oc-semantic-color-overlay-active-inverted | |
--oc-component-interactive-overlay-inverted-background-color-hover |
rgba(255, 255, 255, 0.0784313725490196) | --oc-semantic-color-overlay-hover-inverted |
component / link
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-link-100-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-link-125-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-link-50-font |
400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-50 | |
--oc-component-link-75-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-link-gap-x |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-link-inverted-bold-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-link-inverted-opacity-active |
0.65 | ||
--oc-component-link-inverted-opacity-hover |
0.75 | ||
--oc-component-link-inverted-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-link-inverted-text-decoration |
underline | ||
--oc-component-link-over-color-bold-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-link-over-color-opacity-active |
0.65 | ||
--oc-component-link-over-color-opacity-hover |
0.75 | ||
--oc-component-link-over-color-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-link-over-color-text-decoration |
underline | ||
--oc-component-link-primary-text-color |
#2366cb | --oc-semantic-color-text-interactive | |
--oc-component-link-primary-text-color-active |
#143b75 | #b7e4ff | |
--oc-component-link-primary-text-color-hover |
#1c50a0 | #84d1ff | |
--oc-component-link-primary-text-decoration |
none | ||
--oc-component-link-primary-text-decoration-hover |
underline | ||
--oc-component-link-sale-text-color |
#dc001d | --oc-semantic-color-text-sale | |
--oc-component-link-sale-text-color-active |
#75000f | #ff425b | |
--oc-component-link-sale-text-color-hover |
#a80016 | #ff0f2e | |
--oc-component-link-sale-text-decoration |
none | ||
--oc-component-link-sale-text-decoration-hover |
underline | ||
--oc-component-link-secondary-text-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-link-secondary-text-color-active |
#3a3a3a | #ffffff | |
--oc-component-link-secondary-text-color-hover |
#545454 | #e5e5e5 | |
--oc-component-link-secondary-text-decoration |
none | ||
--oc-component-link-secondary-text-decoration-hover |
underline |
component / list
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-list-item-spacing-bottom |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-list-last-item-spacing-bottom |
0px | --oc-semantic-spacing-absolute-0 | |
--oc-component-list-nested-last-item-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 |
component / logo
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-logo-paypal-color |
#000000 | #ffffff |
component / media-object-card
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-media-object-card-25-copy-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-media-object-card-25-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-media-object-card-25-headline-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-component-media-object-card-25-icon-size |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-media-object-card-25-icon-spacing-left |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-25-icon-spacing-y |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-25-image-border-radius |
0.75rem | --oc-semantic-border-radius-150 | |
--oc-component-media-object-card-25-image-spacing-left |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-media-object-card-25-image-spacing-y |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-media-object-card-25-image-width |
40px | --oc-base-dimension-absolute-40 | |
--oc-component-media-object-card-25-min-height |
48px | ||
--oc-component-media-object-card-25-spacing-right |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-25-text-spacing-left |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-50-copy-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-component-media-object-card-50-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-50-headline-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-component-media-object-card-50-icon-size |
32px | --oc-base-dimension-absolute-32 | |
--oc-component-media-object-card-50-icon-spacing-left |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-50-icon-spacing-y |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-50-image-border-radius |
0.75rem | --oc-semantic-border-radius-150 | |
--oc-component-media-object-card-50-image-spacing-left |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-media-object-card-50-image-spacing-y |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-media-object-card-50-image-width |
56px | --oc-base-dimension-absolute-56 | |
--oc-component-media-object-card-50-min-height |
64px | ||
--oc-component-media-object-card-50-spacing-right |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-50-text-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-75-copy-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-media-object-card-75-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-75-headline-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-component-media-object-card-75-icon-size |
40px | --oc-base-dimension-absolute-40 | |
--oc-component-media-object-card-75-icon-spacing-left |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-media-object-card-75-icon-spacing-y |
1.25rem | ||
--oc-component-media-object-card-75-image-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-media-object-card-75-image-spacing-left |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-media-object-card-75-image-spacing-y |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-media-object-card-75-image-width |
64px | --oc-base-dimension-absolute-64 | |
--oc-component-media-object-card-75-min-height |
80px | ||
--oc-component-media-object-card-75-spacing-right |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-75-text-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-100-copy-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-media-object-card-100-gap-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-100-icon-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-100-image-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-media-object-card-100-image-spacing-left |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-media-object-card-100-image-spacing-y |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-media-object-card-100-l-xl-headline-font |
700 1.25rem/1.75rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-200 | |
--oc-component-media-object-card-100-l-xl-icon-size |
48px | --oc-base-dimension-absolute-48 | |
--oc-component-media-object-card-100-l-xl-icon-spacing-y |
1rem | ||
--oc-component-media-object-card-100-l-xl-image-width |
64px | --oc-base-dimension-absolute-64 | |
--oc-component-media-object-card-100-l-xl-min-height |
80px | ||
--oc-component-media-object-card-100-s-m-headline-font |
700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-100 | |
--oc-component-media-object-card-100-s-m-icon-size |
64px | --oc-base-dimension-absolute-64 | |
--oc-component-media-object-card-100-s-m-icon-spacing-y |
1.25rem | ||
--oc-component-media-object-card-100-s-m-image-width |
88px | ||
--oc-component-media-object-card-100-s-m-min-height |
104px | ||
--oc-component-media-object-card-100-spacing-right |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-100-text-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-media-object-card-border-radius |
1rem | --oc-semantic-border-radius-200 | |
--oc-component-media-object-card-cutout-image-spacing |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-media-object-card-default-background-color |
#ffffff | --oc-component-card-background-color-default | |
--oc-component-media-object-card-default-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-media-object-card-default-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-media-object-card-inverted-background-color |
#dc001d | --oc-semantic-color-background-sale | |
--oc-component-media-object-card-inverted-icon-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-media-object-card-inverted-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-media-object-card-single-line-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-media-object-card-spacing-y-min |
4px | --oc-semantic-spacing-absolute-25 |
component / pagination-dot
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-pagination-dot-50-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-pagination-dot-50-container-background-color |
#ffffff | --oc-semantic-color-background-above | |
--oc-component-pagination-dot-50-container-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-pagination-dot-50-container-position-bottom |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-pagination-dot-50-container-spacing |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-pagination-dot-50-gap-x |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-pagination-dot-50-size-default |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-pagination-dot-50-size-small |
2px | --oc-base-dimension-absolute-2 | |
--oc-component-pagination-dot-50-width-selected |
12px | --oc-base-dimension-absolute-12 | |
--oc-component-pagination-dot-100-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-pagination-dot-100-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-pagination-dot-100-size-default |
8px | --oc-base-dimension-absolute-8 | |
--oc-component-pagination-dot-100-size-small |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-pagination-dot-100-width-selected |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-pagination-dot-active |
#6d6d6d | #cccccc | --oc-base-color-black-lighten-30 |
--oc-component-pagination-dot-default |
#cccccc | #6d6d6d | --oc-base-color-gray-150 |
--oc-component-pagination-dot-hover |
#949494 | --oc-base-color-black-lighten-45 | |
--oc-component-pagination-dot-selected |
#212121 | #ffffff | --oc-base-color-black-100 |
--oc-component-pagination-dot-selected-play |
#949494 | --oc-base-color-gray-200 | |
--oc-component-pagination-dot-transition-all-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-pagination-dot-transition-all-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing |
component / paper-card
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-paper-card-50-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-paper-card-50-spacing-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-paper-card-100-gap-y |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-paper-card-100-spacing |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-paper-card-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-paper-card-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-paper-card-cutout-size |
20px | ||
--oc-component-paper-card-divider-area-height |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-paper-card-divider-area-width |
12px | --oc-base-dimension-absolute-12 | |
--oc-component-paper-card-divider-color |
rgba(33, 33, 33, 0.10196078431372549) | --oc-semantic-color-stroke-divider | |
--oc-component-paper-card-divider-style |
dashed | ||
--oc-component-paper-card-divider-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-paper-card-shadow |
drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.07)) | --oc-base-shadow-100 | |
--oc-component-paper-card-transition-resize-duration |
200ms | --oc-semantic-transition-expand-duration | |
--oc-component-paper-card-transition-resize-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-expand-easing |
component / popover
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-popover-context-offset |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-popover-default-arrow-height |
8px | --oc-base-dimension-absolute-8 | |
--oc-component-popover-default-background-color |
#ffffff | --oc-semantic-color-background-above | |
--oc-component-popover-default-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-popover-default-max-width |
432px | ||
--oc-component-popover-frame-spacing |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-popover-hide-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-popover-hide-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-popover-shadow |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-above | |
--oc-component-popover-show-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-popover-show-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing |
component / progress-bar
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-progress-bar-50-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-progress-bar-50-height |
4px | 0.25rem | --oc-base-dimension-absolute-4 |
--oc-component-progress-bar-100-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-progress-bar-100-height |
8px | --oc-base-dimension-absolute-8 | |
--oc-component-progress-bar-default-gap-x |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-progress-bar-error-active-indicator-color |
#e64b69 | --oc-semantic-color-stroke-error | |
--oc-component-progress-bar-error-stop-indicator-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-progress-bar-hint-active-indicator-color |
#418ade | --oc-semantic-color-stroke-hint | |
--oc-component-progress-bar-hint-stop-indicator-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-progress-bar-primary-active-indicator-color |
#212121 | #ffffff | --oc-base-color-black-100 |
--oc-component-progress-bar-primary-stop-indicator-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-progress-bar-secondary-active-indicator-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-progress-bar-secondary-stop-indicator-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-progress-bar-show-active-indicator-duration |
500ms | --oc-semantic-duration-long-50 | |
--oc-component-progress-bar-show-active-indicator-easing |
cubic-bezier(0.8,0,0.4,1) | --oc-semantic-transition-expand-easing | |
--oc-component-progress-bar-stepped-50-gap-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-progress-bar-stepped-100-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-progress-bar-stop-indicator-50-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-progress-bar-stop-indicator-50-size |
2px | --oc-base-dimension-absolute-2 | |
--oc-component-progress-bar-stop-indicator-100-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-progress-bar-stop-indicator-100-size |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-progress-bar-success-active-indicator-color |
#3e935e | --oc-semantic-color-stroke-success | |
--oc-component-progress-bar-success-stop-indicator-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-progress-bar-track-color |
#f0f0f0 | --oc-semantic-color-background-stacked | |
--oc-component-progress-bar-track-color-over-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-progress-bar-warning-active-indicator-color |
#e35316 | --oc-semantic-color-stroke-warning | |
--oc-component-progress-bar-warning-border-color |
#e35316 | --oc-semantic-color-stroke-warning | |
--oc-component-progress-bar-warning-stop-indicator-color |
#949494 | --oc-base-color-gray-200 |
component / promo-card
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-promo-card-footer-spacing-top |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-promo-card-gap-headline-copy |
0px | --oc-semantic-spacing-absolute-0 | |
--oc-component-promo-card-gap-logo |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-promo-card-header-spacing-bottom |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-promo-card-image-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-promo-card-image-spacing |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-promo-card-inverted-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-promo-card-l-xl-first-headline-font |
700 1.25rem/1.75rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-200 | |
--oc-component-promo-card-l-xl-header-height |
4.75rem | ||
--oc-component-promo-card-l-xl-interactive-scale |
0.005 | ||
--oc-component-promo-card-l-xl-logo-max-width |
348px | ||
--oc-component-promo-card-l-xl-second-headline-font |
700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-100 | |
--oc-component-promo-card-logo-default-background-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-promo-card-logo-height |
48px | --oc-base-dimension-absolute-48 | |
--oc-component-promo-card-logo-indent |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-promo-card-logo-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-promo-card-overline-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-promo-card-s-m-first-headline-font |
700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-100 | |
--oc-component-promo-card-s-m-header-height |
4.5rem | ||
--oc-component-promo-card-s-m-second-headline-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-component-promo-card-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-promo-card-spacing-y |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-promo-card-tag-container-spacing-x |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-promo-card-tag-container-spacing-y |
0.5rem | --oc-semantic-spacing-relative-50 | |
--oc-component-promo-card-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-promo-card-text-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 |
component / row
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-row-background-border-radius |
8px | --oc-base-dimension-8 | |
--oc-component-row-background-color |
rgba(255, 255, 255, 0) | rgba(33, 33, 33, 0) | --oc-base-color-white-opacity-0 |
--oc-component-row-background-color-active |
rgba(0, 0, 0, 0.09019607843137255) | --oc-semantic-color-overlay-active | |
--oc-component-row-background-color-hover |
rgba(0, 0, 0, 0.03137254901960784) | --oc-semantic-color-overlay-hover | |
--oc-component-row-background-color-selected |
#dcf2ff | #1a4991 | --oc-base-color-interactive-blue-lighten-55 |
--oc-component-row-background-color-selected-active |
#86d2ff | #215fbc | --oc-base-color-interactive-blue-lighten-35 |
--oc-component-row-background-color-selected-hover |
#b9e5ff | #1d54a7 | --oc-base-color-interactive-blue-lighten-45 |
--oc-component-row-background-offset-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-row-border-color |
rgba(33, 33, 33, 0.10196078431372549) | --oc-semantic-color-stroke-divider | |
--oc-component-row-border-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-row-gap-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-row-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-row-selected-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-component-row-spacing-y |
12px | --oc-semantic-spacing-absolute-75 |
component / search-field
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-search-field-background-color |
#f0f0f0 | --oc-semantic-color-background-stacked | |
--oc-component-search-field-background-color-focused |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-search-field-background-color-over-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-search-field-border-color-focused |
#212121 | #cccccc | --oc-base-color-black-100 |
--oc-component-search-field-border-color-hover |
#949494 | #6d6d6d | --oc-base-color-gray-200 |
--oc-component-search-field-border-radius |
1.5rem | --oc-semantic-border-radius-300 | |
--oc-component-search-field-border-width |
2px | --oc-semantic-border-width-200 | |
--oc-component-search-field-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-search-field-icon-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-search-field-icon-spacing |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-search-field-input-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-search-field-input-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-search-field-placeholder-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-component-search-field-placeholder-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-search-field-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-search-field-spacing-right |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-search-field-spacing-y |
12px |
component / selection-signifier
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-selection-signifier-border-width |
1px | --oc-component-form-border-width | |
--oc-component-selection-signifier-default-background-color |
#ffffff | --oc-component-form-background-color | |
--oc-component-selection-signifier-default-background-color-checked |
#212121 | --oc-component-form-background-color-checked | |
--oc-component-selection-signifier-default-border-color |
#949494 | --oc-component-form-default-border-color | |
--oc-component-selection-signifier-default-icon-color |
#ffffff | --oc-component-form-default-icon-color-checked | |
--oc-component-selection-signifier-disabled-background-color |
#e5e5e5 | --oc-component-form-disabled-background-color | |
--oc-component-selection-signifier-disabled-background-color-checked |
#cccccc | --oc-component-form-disabled-background-color-checked | |
--oc-component-selection-signifier-disabled-border-color |
#cccccc | --oc-component-form-disabled-border-color | |
--oc-component-selection-signifier-disabled-icon-color |
#e5e5e5 | --oc-component-form-disabled-icon-color-checked | |
--oc-component-selection-signifier-multiple-border-radius |
0.25rem | --oc-component-form-checkbox-100-border-radius | |
--oc-component-selection-signifier-multiple-container-size |
1.5rem | --oc-component-form-checkbox-100-container-size | |
--oc-component-selection-signifier-multiple-icon-size |
1rem | --oc-component-form-checkbox-100-icon-size | |
--oc-component-selection-signifier-single-container-size |
1.5rem | --oc-component-form-radio-button-100-container-size | |
--oc-component-selection-signifier-single-icon-size |
0.625rem |
component / selection-tile
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-selection-tile-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-selection-tile-border-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-selection-tile-border-color-selected |
#212121 | #ffffff | --oc-base-color-black-100 |
--oc-component-selection-tile-border-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-selection-tile-border-width-selected |
2px | --oc-semantic-border-width-200 | |
--oc-component-selection-tile-disabled-border-color |
#cccccc | --oc-semantic-color-stroke-disabled | |
--oc-component-selection-tile-disabled-border-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-selection-tile-disabled-overlay |
rgba(214, 214, 214, 0.6392156862745098) | --oc-semantic-color-overlay-disabled | |
--oc-component-selection-tile-inner-border-color-selected |
#ffffff | #2e2e2e | --oc-base-color-white-100 |
--oc-component-selection-tile-inner-border-width-active |
1px | --oc-semantic-border-width-100 | |
--oc-component-selection-tile-inner-border-width-hover |
1px | --oc-semantic-border-width-100 | |
--oc-component-selection-tile-inner-border-width-selected |
1px | --oc-semantic-border-width-100 | |
--oc-component-selection-tile-round-hitbox-size |
calc(1.5rem + 8px) | ||
--oc-component-selection-tile-round-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-selection-tile-roundrect-border-radius |
0.5rem | --oc-semantic-border-radius-100 | |
--oc-component-selection-tile-strike-through-color |
#949494 | --oc-base-color-gray-200 | |
--oc-component-selection-tile-strike-through-outline-color |
rgba(255, 255, 255, 0.9019607843137255) | ||
--oc-component-selection-tile-strike-through-outline-width |
2px | --oc-semantic-border-width-200 | |
--oc-component-selection-tile-strike-through-spacing |
0.5rem | ||
--oc-component-selection-tile-strike-through-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-selection-tile-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-selection-tile-text-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-selection-tile-text-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-selection-tile-text-spacing-y |
12px | --oc-semantic-spacing-absolute-75 |
component / sheet
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-sheet-action-bar-background-color |
#ffffff | #f0f0f0 | --oc-semantic-color-background-canvas |
--oc-component-sheet-action-bar-centered-spacing-bottom |
16px | --oc-base-dimension-absolute-16 | |
--oc-component-sheet-action-bar-conditional-border-top-color |
#f0f0f0 | --oc-semantic-color-background-frame | |
--oc-component-sheet-action-bar-conditional-border-top-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-sheet-action-bar-spacing-bottom |
32px | --oc-base-dimension-absolute-32 | |
--oc-component-sheet-action-bar-spacing-top |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-sheet-action-bar-spacing-x |
16px | --oc-semantic-spacing-content-layout-outer | |
--oc-component-sheet-adaptive-viewport-width |
30rem | ||
--oc-component-sheet-border-radius |
1.5rem | --oc-semantic-border-radius-300 | |
--oc-component-sheet-bottom-max-height-percentage |
95 | ||
--oc-component-sheet-centered-max-height-percentage |
95 | ||
--oc-component-sheet-centered-max-width-default |
48rem | --oc-base-breakpoint-l | |
--oc-component-sheet-centered-width-percentage |
90 | ||
--oc-component-sheet-conditional-border-transition-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-sheet-conditional-border-transition-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-sheet-content-content-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-sheet-content-content-spacing-top |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-sheet-content-default-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-sheet-drag-indicator-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-sheet-drag-indicator-color |
rgba(33, 33, 33, 0.4) | rgba(255, 255, 255, 0.4) | --oc-base-color-black-opacity-40 |
--oc-component-sheet-drag-indicator-height |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-sheet-drag-indicator-spacing-top |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-sheet-drag-indicator-width |
48px | --oc-base-dimension-absolute-48 | |
--oc-component-sheet-header-back-button-spacing-left |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-sheet-header-background-color |
#ffffff | #f0f0f0 | --oc-semantic-color-background-canvas |
--oc-component-sheet-header-button-spacing-top |
1.25rem | ||
--oc-component-sheet-header-button-spacing-top-hide-header |
1.25rem | ||
--oc-component-sheet-header-close-button-spacing-right |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-sheet-header-conditional-border-bottom-color |
#f0f0f0 | --oc-semantic-color-background-frame | |
--oc-component-sheet-header-conditional-border-bottom-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-sheet-header-gap-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-sheet-header-title-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-sheet-header-title-font |
700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-100 | |
--oc-component-sheet-header-title-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-sheet-header-title-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-sheet-header-title-spacing-top |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-sheet-hide-duration |
200ms | --oc-semantic-transition-exit-duration | |
--oc-component-sheet-hide-easing |
cubic-bezier(0.6,0,0.8,0) | --oc-semantic-transition-exit-easing | |
--oc-component-sheet-scrim-color |
rgba(33, 33, 33, 0.6509803921568628) | --oc-semantic-color-overlay-scrim | |
--oc-component-sheet-show-duration |
425ms | --oc-semantic-transition-enter-duration | |
--oc-component-sheet-show-easing |
cubic-bezier(0.2,1,0.4,1) | --oc-semantic-transition-enter-easing | |
--oc-component-sheet-side-width |
28rem | --oc-base-breakpoint-m |
component / siteframe
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-siteframe-background-color |
#f0f0f0 | --oc-semantic-color-background-frame | |
--oc-component-siteframe-dialog-header-m-xl-logo-height |
2rem | --oc-base-dimension-relative-32 | |
--oc-component-siteframe-dialog-header-m-xl-logo-spacing-bottom |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-siteframe-dialog-header-m-xl-logo-spacing-top |
32px | --oc-semantic-spacing-absolute-200 | |
--oc-component-siteframe-dialog-header-s-logo-height |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-siteframe-dialog-header-s-logo-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-siteframe-dialog-header-s-logo-spacing-top |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-siteframe-dialog-header-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-siteframe-dialog-header-spacing-top |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-siteframe-dialog-max-width |
600px | ||
--oc-component-siteframe-main-content-max-width |
72rem | ||
--oc-component-siteframe-main-content-min-width |
20rem | ||
--oc-component-siteframe-main-gap-y |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-siteframe-main-info-wrapper-width |
192px |
component / skeleton
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-skeleton-background-color |
#e5e5e5 | #545454 | --oc-base-color-gray-100 |
--oc-component-skeleton-content-animation-duration |
125ms | --oc-semantic-duration-short-100 | |
--oc-component-skeleton-content-animation-easing |
cubic-bezier(0,0,1,1) | --oc-base-easing-linear | |
--oc-component-skeleton-cursor |
progress | ||
--oc-component-skeleton-wave-animation-duration |
350ms | --oc-semantic-duration-medium-100 | |
--oc-component-skeleton-wave-animation-easing |
cubic-bezier(0,0,1,1) | --oc-base-easing-linear | |
--oc-component-skeleton-wave-animation-pause |
500ms | --oc-semantic-duration-long-50 | |
--oc-component-skeleton-wave-color |
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%) | linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 100%) | |
--oc-component-skeleton-wave-stop-0 |
rgba(255, 255, 255, 0) | rgba(0, 0, 0, 0) | |
--oc-component-skeleton-wave-stop-100 |
rgba(255, 255, 255, 0) | rgba(0, 0, 0, 0) | |
--oc-component-skeleton-wave-stop-50 |
rgba(254, 254, 254, 0.5019607843137255) | rgba(0, 0, 0, 0.25098039215686274) | |
--oc-component-skeleton-wave-width |
152px |
component / skip-link
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-skip-link-appear-duration |
50ms | 125ms | --oc-semantic-transition-disappear-duration |
--oc-component-skip-link-appear-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing | |
--oc-component-skip-link-background-color |
#ffffff | --oc-semantic-color-background-above | |
--oc-component-skip-link-border-radius |
1rem | --oc-semantic-border-radius-200 | |
--oc-component-skip-link-disappear-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-skip-link-disappear-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-skip-link-gap |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-skip-link-position-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-skip-link-position-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-skip-link-shadow |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-above | |
--oc-component-skip-link-spacing |
8px | --oc-semantic-spacing-absolute-50 |
component / snackbar
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-snackbar-appear-duration |
425ms | --oc-semantic-transition-enter-duration | |
--oc-component-snackbar-appear-easing |
cubic-bezier(0.2,1,0.4,1) | --oc-semantic-transition-enter-easing | |
--oc-component-snackbar-auto-dismiss-duration |
5s | ||
--oc-component-snackbar-background-color |
#212121 | --oc-semantic-color-background-inverted | |
--oc-component-snackbar-border-radius |
0.25rem | --oc-semantic-border-radius-50 | |
--oc-component-snackbar-copy-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-snackbar-copy-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-snackbar-disappear-duration |
200ms | --oc-semantic-transition-exit-duration | |
--oc-component-snackbar-disappear-easing |
cubic-bezier(0.6,0,0.8,0) | --oc-semantic-transition-exit-easing | |
--oc-component-snackbar-gap-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-snackbar-outer-spacing-bottom |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-snackbar-outer-spacing-x |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-snackbar-shadow |
drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.30)) drop-shadow(0px 9px 10px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-sticky | |
--oc-component-snackbar-spacing-left |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-snackbar-spacing-right |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-snackbar-spacing-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-snackbar-text-action-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-snackbar-text-action-min-gap-x |
24px | --oc-semantic-spacing-absolute-150 | |
--oc-component-snackbar-text-action-spacing-y |
4px | --oc-semantic-spacing-absolute-25 |
component / spinner
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-spinner-50-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-spinner-50-stroke-width |
1px | --oc-semantic-border-width-100 | |
--oc-component-spinner-100-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-spinner-100-stroke-width |
2px | --oc-semantic-border-width-200 | |
--oc-component-spinner-200-size |
3rem | --oc-base-dimension-relative-48 | |
--oc-component-spinner-200-stroke-width |
4px | --oc-semantic-border-width-400 | |
--oc-component-spinner-animation-duration |
1000ms | --oc-semantic-animation-loop-duration | |
--oc-component-spinner-animation-easing |
cubic-bezier(0.8,0.35,0.6,0.85) | --oc-semantic-animation-loop-easing | |
--oc-component-spinner-animation-repetition |
infinite | --oc-semantic-animation-loop-repetition | |
--oc-component-spinner-default-fill-color |
#6d6d6d | #e5e5e5 | --oc-base-color-gray-400 |
--oc-component-spinner-inverted-fill-color |
#ffffff | #212121 | --oc-base-color-white-100 |
--oc-component-spinner-track-opacity |
0.25 |
component / switch
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-switch-50-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-switch-50-handle-size |
1rem | --oc-base-dimension-relative-16 | |
--oc-component-switch-50-height |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-switch-50-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-switch-50-label-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-switch-50-width |
2.25rem | ||
--oc-component-switch-100-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-switch-100-handle-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-switch-100-height |
2rem | --oc-base-dimension-relative-32 | |
--oc-component-switch-100-icon-size |
1rem | --oc-base-dimension-relative-16 | |
--oc-component-switch-100-label-font |
400 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-125 | |
--oc-component-switch-100-width |
3rem | --oc-base-dimension-relative-48 | |
--oc-component-switch-checked-background-color |
#3e935e | --oc-semantic-color-stroke-success | |
--oc-component-switch-checked-background-color-active |
#235235 | #7ac797 | |
--oc-component-switch-checked-background-color-hover |
#32764c | #56b87b | |
--oc-component-switch-checked-handle-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-switch-checked-icon-color |
#227642 | --oc-semantic-color-text-success | |
--oc-component-switch-checked-label-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-switch-default-background-color |
#949494 | #545454 | --oc-base-color-gray-200 |
--oc-component-switch-default-background-color-active |
#545454 | #949494 | --oc-base-color-black-lighten-20 |
--oc-component-switch-default-background-color-hover |
#6d6d6d | --oc-base-color-gray-400 | |
--oc-component-switch-default-handle-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-switch-default-label-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-switch-disabled-background-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-switch-disabled-handle-color |
#cccccc | --oc-semantic-color-stroke-disabled | |
--oc-component-switch-disabled-icon-color |
#e5e5e5 | --oc-semantic-color-background-disabled | |
--oc-component-switch-disabled-label-color |
#949494 | --oc-semantic-color-text-disabled | |
--oc-component-switch-transition-duration |
275ms | --oc-semantic-duration-medium-50 | |
--oc-component-switch-transition-easing |
cubic-bezier(0.9,0.1,0.1,0.9) | --oc-base-easing-expressive-in-out |
component / tab
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-tab-bar-background-color |
#ffffff | --oc-semantic-color-background-canvas | |
--oc-component-tab-bar-fade-stop-1 |
rgba(255, 255, 255, 1) | rgba(46, 46, 46, 1) | |
--oc-component-tab-bar-fade-stop-2 |
rgba(255, 255, 255, 0.8) | rgba(46, 46, 46, 0.8) | |
--oc-component-tab-bar-fade-width |
96px | ||
--oc-component-tab-bar-gap-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-tab-bar-spacing-x |
16px | --oc-semantic-spacing-absolute-100 | |
--oc-component-tab-bar-transition-duration |
200ms | --oc-base-duration-200 | |
--oc-component-tab-bar-transition-easing |
cubic-bezier(0,0,0.4,1) | --oc-base-easing-default-out | |
--oc-component-tab-item-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-tab-item-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-tab-item-gap-y |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-tab-item-icon-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tab-item-icon-size |
1.5rem | --oc-base-dimension-relative-24 | |
--oc-component-tab-item-max-width |
208px | ||
--oc-component-tab-item-min-width |
48px | --oc-base-dimension-absolute-48 | |
--oc-component-tab-item-selected-indicator-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tab-item-selected-indicator-width |
2px | --oc-semantic-border-width-200 | |
--oc-component-tab-item-spacing-x |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-tab-item-spacing-y |
12px | --oc-semantic-spacing-absolute-75 | |
--oc-component-tab-item-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tab-bar-gradient-width |
|||
--oc-component-tab-item-background-color-active |
|||
--oc-component-tab-item-background-color-hover |
component / tag
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-tag-25-font |
700 0.625rem/0.75rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-10 | |
--oc-component-tag-25-gap-x |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-tag-25-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-tag-25-spacing-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-tag-25-spacing-y |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-tag-50-font |
700 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-25 | |
--oc-component-tag-50-gap-x |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-tag-50-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-tag-50-spacing-x |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-tag-50-spacing-y |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-tag-100-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-component-tag-100-gap-x |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-component-tag-100-icon-size |
0.75rem | --oc-base-dimension-relative-12 | |
--oc-component-tag-100-spacing-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-tag-100-spacing-y |
2px | --oc-semantic-spacing-absolute-12 | |
--oc-component-tag-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-tag-error-background-color |
#f78ca1 | --oc-semantic-color-background-emphasized-error | |
--oc-component-tag-error-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tag-hint-background-color |
#47bbff | --oc-semantic-color-background-emphasized-hint | |
--oc-component-tag-hint-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tag-hitbox-min-height |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-tag-info-primary-background-color |
#212121 | --oc-semantic-color-text-info | |
--oc-component-tag-info-primary-text-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-tag-info-secondary-background-color |
#e5e5e5 | --oc-semantic-color-background-soft-info | |
--oc-component-tag-info-secondary-text-color |
#212121 | --oc-semantic-color-text-info | |
--oc-component-tag-sale-background-color |
#dc001d | --oc-semantic-color-background-sale | |
--oc-component-tag-sale-text-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-tag-service-background-color |
#76a6c6 | #3f7498 | --oc-base-color-service-blue-100 |
--oc-component-tag-service-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tag-sold-out-background-color |
#6d6d6d | --oc-base-color-gray-400 | |
--oc-component-tag-sold-out-text-color |
#ffffff | --oc-base-color-white-100 | |
--oc-component-tag-success-background-color |
#67bd88 | --oc-semantic-color-background-emphasized-success | |
--oc-component-tag-success-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-component-tag-warning-background-color |
#ff8e5d | --oc-semantic-color-background-emphasized-warning | |
--oc-component-tag-warning-text-color |
#212121 | --oc-semantic-color-text-default |
component / toggletip
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-toggletip-action-spacing-bottom |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-toggletip-arrow-height |
8px | --oc-base-dimension-absolute-8 | |
--oc-component-toggletip-arrow-width |
16px | --oc-base-dimension-absolute-16 | |
--oc-component-toggletip-background-color |
#212121 | --oc-semantic-color-background-inverted | |
--oc-component-toggletip-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-toggletip-close-button-spacing |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-toggletip-context-spacing |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-toggletip-copy-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-toggletip-copy-font |
400 0.875rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-100 | |
--oc-component-toggletip-frame-spacing |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-toggletip-gap-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-toggletip-gap-y |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-toggletip-headline-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-toggletip-headline-font |
700 1rem/1.5rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-100 | |
--oc-component-toggletip-hide-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-toggletip-hide-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-toggletip-icon-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-toggletip-icon-size |
24px | --oc-base-dimension-absolute-24 | |
--oc-component-toggletip-link-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-toggletip-max-width |
432px | ||
--oc-component-toggletip-shadow |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-above | |
--oc-component-toggletip-show-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-toggletip-show-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing | |
--oc-component-toggletip-text-spacing |
12px | --oc-semantic-spacing-absolute-75 |
component / tooltip
| Token | Light | Dark | References |
|---|---|---|---|
--oc-component-tooltip-arrow-height |
4px | --oc-base-dimension-absolute-4 | |
--oc-component-tooltip-arrow-width |
8px | --oc-base-dimension-absolute-8 | |
--oc-component-tooltip-background-color |
#212121 | --oc-semantic-color-background-inverted | |
--oc-component-tooltip-border-radius |
0.125rem | --oc-semantic-border-radius-25 | |
--oc-component-tooltip-context-spacing |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-component-tooltip-copy-color |
#ffffff | --oc-semantic-color-text-inverted | |
--oc-component-tooltip-copy-font |
400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-50 | |
--oc-component-tooltip-frame-spacing |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-tooltip-hide-delay |
200ms | --oc-semantic-duration-short-150 | |
--oc-component-tooltip-hide-duration |
50ms | --oc-semantic-transition-disappear-duration | |
--oc-component-tooltip-hide-easing |
cubic-bezier(0.8,0,1,1) | --oc-semantic-transition-disappear-easing | |
--oc-component-tooltip-long-press-delay |
500ms | ||
--oc-component-tooltip-max-width |
344px | ||
--oc-component-tooltip-shadow |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) | --oc-semantic-shadow-above | |
--oc-component-tooltip-show-delay |
500ms | --oc-semantic-duration-long-50 | |
--oc-component-tooltip-show-duration |
125ms | --oc-semantic-transition-appear-duration | |
--oc-component-tooltip-show-easing |
cubic-bezier(0,0,0.4,1) | --oc-semantic-transition-appear-easing | |
--oc-component-tooltip-spacing-x |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-component-tooltip-spacing-y |
4px | --oc-semantic-spacing-absolute-25 |
feature-component / energy-label
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-energy-label-100-height |
1.25rem | ||
--oc-feature-component-energy-label-200-height |
2.25rem | ||
--oc-feature-component-energy-label-hitbox-min-height |
24px | --oc-base-dimension-absolute-24 |
feature-component / placeholder
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-placeholder-background-color |
#30d9ba | ||
--oc-feature-component-placeholder-background-opacity |
50 | ||
--oc-feature-component-placeholder-text-color |
#ffffff | --oc-semantic-color-text-inverted |
feature-component / price-information
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-price-information-campaign-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-feature-component-price-information-campaign-font-weight |
700 | --oc-base-font-weight-bold | |
--oc-feature-component-price-information-campaign-spacing-bottom-100 |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-feature-component-price-information-campaign-spacing-bottom-200 |
0.25rem | --oc-semantic-spacing-relative-25 | |
--oc-feature-component-price-information-campaign-text-color |
#dc001d | --oc-semantic-color-text-sale | |
--oc-feature-component-price-information-discounted-price-font |
400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-50 | |
--oc-feature-component-price-information-discounted-price-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-feature-component-price-information-discounted-price-text-decoration |
line-through | ||
--oc-feature-component-price-information-retail-price-100-font-euro-sign |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-price-information-retail-price-100-font-from |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-price-information-retail-price-100-font-retail-price |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-price-information-retail-price-200-font-euro-sign |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-price-information-retail-price-200-font-from |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-price-information-retail-price-200-font-retail-price |
700 1.5rem/2rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-300 | |
--oc-feature-component-price-information-retail-price-text-color-default |
#212121 | --oc-semantic-color-text-default | |
--oc-feature-component-price-information-retail-price-text-color-discounted |
#dc001d | --oc-semantic-color-text-sale | |
--oc-feature-component-price-information-tag-gap |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-feature-component-price-information-tag-spacing-bottom-100 |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-feature-component-price-information-tag-spacing-bottom-200 |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-feature-component-price-information-tag-spacing-top-100 |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-feature-component-price-information-tag-spacing-top-200 |
8px | --oc-semantic-spacing-absolute-50 | |
--oc-feature-component-price-information-unit-norm-price-font |
400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-50 | |
--oc-feature-component-price-information-unit-norm-price-text-color |
#6d6d6d | --oc-semantic-color-text-secondary | |
--oc-feature-component-price-information-uvp-font |
400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-50 | |
--oc-feature-component-price-information-uvp-spacing-right |
4px | --oc-semantic-spacing-absolute-25 | |
--oc-feature-component-price-information-uvp-text-color |
#212121 | --oc-semantic-color-text-default |
feature-component / pricing-item
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-pricing-item-campaign-text-color |
#dc001d | --oc-semantic-color-text-sale | |
--oc-feature-component-pricing-item-old-price-text-color |
#212121 | --oc-semantic-color-text-default | |
--oc-feature-component-pricing-item-retail-price-text-color-default |
#212121 | --oc-semantic-color-text-default | |
--oc-feature-component-pricing-item-retail-price-text-color-discounted |
#dc001d | --oc-semantic-color-text-sale | |
--oc-feature-component-pricing-item-size-100-campaign-font |
700 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-25 | |
--oc-feature-component-pricing-item-size-100-from-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-pricing-item-size-100-old-price-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-feature-component-pricing-item-size-100-retail-price-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-pricing-item-size-100-unit-font |
400 0.625rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-50 | |
--oc-feature-component-pricing-item-size-200-campaign-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-pricing-item-size-200-from-font |
700 0.875rem/1.25rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-50 | |
--oc-feature-component-pricing-item-size-200-old-price-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-feature-component-pricing-item-size-200-retail-price-font |
700 1.5rem/2rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-headline-300 | |
--oc-feature-component-pricing-item-size-200-unit-font |
400 0.75rem/1rem 'OTTOSans', Arial, Helvetica, sans-serif | --oc-semantic-font-copy-75 | |
--oc-feature-component-pricing-item-unit-price-text-color |
#6d6d6d | --oc-semantic-color-text-secondary |
feature-component / sponsored-declaration
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-sponsored-declaration-link-min-height |
24px | --oc-base-dimension-absolute-24 | |
--oc-feature-component-sponsored-declaration-spacing-y |
4px | 8px | --oc-semantic-spacing-absolute-25 |
feature-component / sustainability-badge
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-sustainability-badge-background-color |
#658c62 | --oc-semantic-color-stroke-sustainable | |
--oc-feature-component-sustainability-badge-background-color-active |
#4e724b | --oc-base-color-sustainable-green-darken-20 | |
--oc-feature-component-sustainability-badge-background-color-hover |
#588155 | --oc-base-color-sustainable-green-darken-15 | |
--oc-feature-component-sustainability-badge-background-size |
2rem | --oc-base-dimension-relative-32 | |
--oc-feature-component-sustainability-badge-icon-color |
#ffffff | --oc-base-color-white-100 | |
--oc-feature-component-sustainability-badge-icon-size |
1.5rem | --oc-base-dimension-relative-24 |
feature-component / wishlist-save-button
| Token | Light | Dark | References |
|---|---|---|---|
--oc-feature-component-wishlist-save-button-heart-active-color-black-friday |
#212121 | --oc-semantic-color-text-default | |
--oc-feature-component-wishlist-save-button-heart-active-color-default |
#eb001f | --oc-semantic-color-text-brand | |
--oc-feature-component-wishlist-save-button-heart-active-color-pride |
linear-gradient(to right top, #7e3906 0, #7e3906 10%, #ff889e 10%, #ff889e 23%, #8d0083 23%, #8d0083 37%, #198504 37%, #198504 48.5%, #334982 48.5%, #334982 63%, #ffd229 63%, #ffd229 76%, #ee9201 76%, #ee9201 90%, #d52b1e 90%, #d52b1e 100%) | linear-gradient(to right top, #7e3906 0, #7e3906 10%, #ff889e 10%, #ff889e 23%, #8d0083 23%, #8d0083 37%, #198504 37%, #198504 48.5%, #334982 48.5%, #334982 63%, #ffd229 63%, #ffd229 76%, #ee9201 76%, #ee9201 90%, #d52b1e 90%, #d52b1e 100%)ing value | |
--oc-feature-component-wishlist-save-button-icon-button-transparent-background-color |
rgba(255, 255, 255, 0) | ||
--oc-feature-component-wishlist-save-button-icon-button-transparent-background-icon-color |
rgba(255, 255, 255, 0.8) |