UNPKG

@atlaskit/tokens

Version:

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

atlassian.design/components/tokens

6 lines • 10.7 kB
1
2
3
4
5
6
/** * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen} * @codegen <<SignedSource::ae4f63a66ab5a1410a086d45fed47c95>> * @codegenCommand yarn build tokens */ export 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 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 SlideOutTop8px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(4px);\n }\n}\n@keyframes SlideOutBottom8px {\n 0% {\n transform: translateY(0px);\n }\n 100% {\n transform: translateY(-4px);\n }\n}\n@keyframes SlideOutLeft8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(4px);\n }\n}\n@keyframes SlideOutRight8px {\n 0% {\n transform: translateX(0px);\n }\n 100% {\n transform: translateX(-4px);\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}\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-input-focused: 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-hovered: 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-keyframe-fade-in: FadeIn0to100;\n --ds-keyframe-fade-out: FadeOut100to0;\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: SlideOutBottom8px;\n --ds-keyframe-slide-out-left-half: SlideOut15PercentLeft;\n --ds-keyframe-slide-out-left-short: SlideOutLeft8px;\n --ds-keyframe-slide-out-right-short: SlideOutRight8px;\n --ds-keyframe-slide-out-top-short: SlideOutTop8px;\n --ds-label-enter: 150ms cubic-bezier(0.4, 1, 0.6, 1) ScaleXIn80to100 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) ScaleXOut100to0 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) SlideOutBottom8px 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) SlideOutLeft8px 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) SlideOutRight8px 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) SlideOutTop8px 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}\n";