UNPKG

@atlaskit/tokens

Version:

Design tokens are the single source of truth to name and store design decisions.

atlassian.design/components/tokens

8 lines (7 loc) • 12.8 kB
1
2
3
4
5
6
7
8
/** * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen} * @codegen <<SignedSource::da60c3a2026429deb1b6ff29f115684e>> * @codegenCommand yarn build tokens */ declare const _default = "\n@keyframes SlideInTop8px {\n 0% {\n transform: translateY(8px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInBottom8px {\n 0% {\n transform: translateY(-8px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInBottom2px {\n 0% {\n transform: translateY(-2px);\n }\n 100% {\n transform: translateY(0px);\n }\n}\n@keyframes SlideInLeft8px {\n 0% {\n transform: translateX(8px);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n@keyframes SlideInRight8px {\n 0% {\n transform: translateX(-8px);\n }\n 100% {\n transform: translateX(0px);\n }\n}\n@keyframes SlideOutTop4px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(4px);\n }\n}\n@keyframes SlideOutBottom4px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(-4px);\n }\n}\n@keyframes SlideOutBottom2px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(-2px);\n }\n}\n@keyframes SlideOutLeft4px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(4px);\n }\n}\n@keyframes SlideOutRight4px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-4px);\n }\n}\n@keyframes SlideOutLeft8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-8px);\n }\n}\n@keyframes SlideOutRight8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(8px);\n }\n}\n@keyframes ScaleIn80to100 {\n 0% {\n transform: scale(0.8);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes ScaleIn95to100 {\n 0% {\n transform: scale(0.95);\n }\n 100% {\n transform: scale(1);\n }\n}\n@keyframes ScaleOut100to80 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.8);\n }\n}\n@keyframes ScaleOut100to95 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.95);\n }\n}\n@keyframes FadeIn0to100 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@keyframes FadeOut100to0 {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes SlideOut15PercentLeft {\n 0% {\n transform: translateX(0px);\n transform-origin: left;\n }\n 100% {\n transform: translateX(-15%);\n transform-origin: left;\n }\n}\n@keyframes SlideIn50PercentLeft {\n 0% {\n transform: translateX(-50%);\n transform-origin: left;\n }\n 100% {\n transform: translateX(0px);\n transform-origin: left;\n }\n}\n@keyframes SlideOut100PercentLeft {\n 0% {\n transform: translateX(0px);\n transform-origin: left;\n }\n 100% {\n transform: translateX(-100%);\n transform-origin: left;\n }\n}\n@keyframes SlideIn100PercentLeft {\n 0% {\n transform: translateX(-100%);\n transform-origin: left;\n }\n 100% {\n transform: translateX(0px);\n transform-origin: left;\n }\n}\n@keyframes SlideOut100PercentRight {\n 0% {\n transform: translateX(0px);\n transform-origin: right;\n }\n 100% {\n transform: translateX(100%);\n transform-origin: right;\n }\n}\n@keyframes SlideIn100PercentRight {\n 0% {\n transform: translateX(100%);\n transform-origin: right;\n }\n 100% {\n transform: translateX(0px);\n transform-origin: right;\n }\n}\n@keyframes ScaleXIn80to100 {\n 0% {\n transform: scaleX(0.8);\n }\n 100% {\n transform: scaleX(1);\n }\n}\n@keyframes ScaleXOut100to0 {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n}\n@keyframes GridColumnIn80to100 {\n 0% {\n grid-template-columns: minmax(0, 0.8fr);\n }\n 100% {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n@keyframes GridColumnOut100to0 {\n 0% {\n grid-template-columns: minmax(0, 1fr);\n }\n 100% {\n grid-template-columns: minmax(0, 0fr);\n }\n}\nhtml[data-theme~=\"motion:motion\"], [data-subtree-theme][data-theme~=\"motion:motion\"] {\n --ds-avatar-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleIn80to100 backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-avatar-exit: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to80 forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-avatar-hovered: transform 250ms linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);\n --ds-blanket-enter: 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100 backwards;\n --ds-blanket-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-button-hovered: background-color 150ms cubic-bezier(0.4, 1, 0.6, 1), border-color 150ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-button-pressed: background-color 150ms cubic-bezier(0.4, 1, 0.6, 1), border-color 150ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-duration-instant: 0ms;\n --ds-duration-long: 250ms;\n --ds-duration-medium: 200ms;\n --ds-duration-short: 150ms;\n --ds-duration-xlong: 400ms;\n --ds-duration-xshort: 100ms;\n --ds-duration-xxlong: 600ms;\n --ds-duration-xxshort: 50ms;\n --ds-easing-in-practical: cubic-bezier(0.6, 0, 0.8, 0.6);\n --ds-easing-inout-bold: cubic-bezier(0.4, 0, 0, 1);\n --ds-easing-out-practical: cubic-bezier(0.4, 1, 0.6, 1);\n --ds-easing-out-bold: cubic-bezier(0, 0.4, 0, 1);\n --ds-easing-spring: linear(0, 0.021, 0.058, 0.107, 0.164, 0.227, 0.292, 0.359, 0.425, 0.49, 0.552, 0.61, 0.664, 0.714, 0.759, 0.8, 0.837, 0.869, 0.898, 0.922, 0.943, 0.961, 0.976, 0.988, 0.998, 1.006, 1.013, 1.017, 1.02, 1.023, 1.024, 1.024, 1.024, 1.024, 1.023, 1.022, 1.02, 1.019, 1.017, 1.015, 1.014, 1.012, 1.011, 1.009, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 0.999, 0.999, 0.999, 0.999, 1);\n --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft backwards, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100 backwards;\n --ds-flag-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft forwards, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-flag-reposition: transform 250ms cubic-bezier(0.4, 0, 0, 1);\n --ds-form-message-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom2px backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-form-message-exit: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom2px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-input: background-color 150ms cubic-bezier(0.4, 1, 0.6, 1), border-color 150ms cubic-bezier(0.4, 1, 0.6, 1), box-shadow 150ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-input-selection: background-color 150ms cubic-bezier(0.4, 1, 0.6, 1), border-color 150ms cubic-bezier(0.4, 1, 0.6, 1), color 150ms cubic-bezier(0.4, 1, 0.6, 1), fill 150ms cubic-bezier(0.4, 1, 0.6, 1), stroke 150ms cubic-bezier(0.4, 1, 0.6, 1), opacity 150ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-keyframe-fade-in: FadeIn0to100;\n --ds-keyframe-fade-out: FadeOut100to0;\n --ds-keyframe-grid-column-in: GridColumnIn80to100;\n --ds-keyframe-grid-column-out: GridColumnOut100to0;\n --ds-keyframe-scale-in-medium: ScaleIn80to100;\n --ds-keyframe-scale-in-small: ScaleIn95to100;\n --ds-keyframe-scale-out-medium: ScaleOut100to80;\n --ds-keyframe-scale-out-small: ScaleOut100to95;\n --ds-keyframe-slide-in-bottom-short: SlideInBottom8px;\n --ds-keyframe-slide-in-left-half: SlideIn50PercentLeft;\n --ds-keyframe-slide-in-left-short: SlideInLeft8px;\n --ds-keyframe-slide-in-right-short: SlideInRight8px;\n --ds-keyframe-slide-in-top-short: SlideInTop8px;\n --ds-keyframe-slide-out-bottom-short: SlideOutBottom4px;\n --ds-keyframe-slide-out-left-half: SlideOut15PercentLeft;\n --ds-keyframe-slide-out-left-short: SlideOutLeft4px;\n --ds-keyframe-slide-out-right-short: SlideOutRight4px;\n --ds-keyframe-slide-out-top-short: SlideOutTop4px;\n --ds-label-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) GridColumnIn80to100 backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-label-exit: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) GridColumnOut100to0 forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-listitem-hovered: background-color 50ms cubic-bezier(0.4, 1, 0.6, 1), border-color 50ms cubic-bezier(0.4, 1, 0.6, 1), color 50ms cubic-bezier(0.4, 1, 0.6, 1), text-decoration-color 50ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-listitem-pressed: background-color 100ms cubic-bezier(0.4, 1, 0.6, 1), border-color 100ms cubic-bezier(0.4, 1, 0.6, 1), color 100ms cubic-bezier(0.4, 1, 0.6, 1), text-decoration-color 100ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-listitem-selected: background-color 100ms cubic-bezier(0.4, 1, 0.6, 1), border-color 100ms cubic-bezier(0.4, 1, 0.6, 1), color 100ms cubic-bezier(0.4, 1, 0.6, 1), text-decoration-color 100ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-modal-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100 backwards;\n --ds-modal-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95 forwards;\n --ds-panel-content-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-panel-content-exit: 50ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-panel-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn100PercentRight backwards;\n --ds-panel-enter-left: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn100PercentLeft backwards;\n --ds-panel-enter-right: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn100PercentRight backwards;\n --ds-panel-exit: 200ms cubic-bezier(0, 0.4, 0, 1) SlideOut100PercentRight forwards;\n --ds-panel-exit-left: 200ms cubic-bezier(0, 0.4, 0, 1) SlideOut100PercentLeft forwards;\n --ds-panel-exit-right: 200ms cubic-bezier(0, 0.4, 0, 1) SlideOut100PercentRight forwards;\n --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px backwards, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100 backwards;\n --ds-popup-exit-bottom: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom4px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-popup-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft4px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-popup-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight4px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-popup-exit-top: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop4px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-sidenav-enter-left: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn100PercentLeft backwards;\n --ds-sidenav-enter-right: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn100PercentRight backwards;\n --ds-sidenav-exit-left: 200ms cubic-bezier(0, 0.4, 0, 1) SlideOut100PercentLeft forwards;\n --ds-sidenav-exit-right: 200ms cubic-bezier(0, 0.4, 0, 1) SlideOut100PercentRight forwards;\n --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100 backwards, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100 backwards;\n --ds-spotlight-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleOut100to95 forwards, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-tab: color 150ms cubic-bezier(0.4, 1, 0.6, 1), opacity 150ms cubic-bezier(0.4, 1, 0.6, 1);\n --ds-tab-indicator-enter-left: 150ms cubic-bezier(0, 0.4, 0, 1) SlideInRight8px backwards, 150ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100 backwards;\n --ds-tab-indicator-enter-right: 150ms cubic-bezier(0, 0.4, 0, 1) SlideInLeft8px backwards, 150ms cubic-bezier(0, 0.4, 0, 1) FadeIn0to100 backwards;\n --ds-tab-indicator-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n --ds-tab-indicator-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px forwards, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0 forwards;\n}\n"; export default _default;