@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.2

package/recipes/app-bar.css

@@ -1,375 +0,0 @@
-.seed-app-bar__root {
-    z-index: var(--z-index-app-bar);
-    top: 0;
-    position: absolute;
-    width: 100%;
-    display: flex;
-    align-items: flex-end;
-}
-.seed-app-bar__root:before {
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-}
-.seed-app-bar__left {
-    display: flex;
-    align-items: center;
-    height: 100%;
-}
-.seed-app-bar__right {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    margin-left: auto;
-}
-.seed-app-bar__iconButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: none;
-    font-family: inherit;
-    padding: 0;
-    border-radius: var(--seed-radius-r1);
-}
-.seed-app-bar__icon {
-    display: inline-block;
-    flex-shrink: 0;
-}
-.seed-app-bar__root--theme_cupertino {
-    height: calc(44px + env(safe-area-inset-top));
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    padding-top: env(safe-area-inset-top);
-}
-.seed-app-bar__iconButton--theme_cupertino {
-    width: 44px;
-    height: 44px;
-}
-.seed-app-bar__iconButton--theme_cupertino:first-child {
-    margin-left: calc(-1 * (44px - 24px) / 2);
-}
-.seed-app-bar__iconButton--theme_cupertino:last-child {
-    margin-right: calc(-1 * (44px - 24px) / 2);
-}
-.seed-app-bar__icon--theme_cupertino {
-    width: var(--seed-icon-size, 24px);
-    height: var(--seed-icon-size, 24px);
-}
-.seed-app-bar__root--theme_android {
-    height: calc(56px + env(safe-area-inset-top));
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    padding-top: env(safe-area-inset-top);
-}
-.seed-app-bar__iconButton--theme_android {
-    width: 44px;
-    height: 44px;
-}
-.seed-app-bar__iconButton--theme_android:first-child {
-    margin-left: calc(-1 * (44px - 24px) / 2);
-}
-.seed-app-bar__iconButton--theme_android:last-child {
-    margin-right: calc(-1 * (44px - 24px) / 2);
-}
-.seed-app-bar__icon--theme_android {
-    width: var(--seed-icon-size, 24px);
-    height: var(--seed-icon-size, 24px);
-}
-.seed-app-bar__left--theme_android {
-    padding-right: 16px;
-}
-[data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:before {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-}
-[data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:before {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:before {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-}
-[data-swipe-back-state=swiping] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:not(#\#):before {
-    animation: none;
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-}
-[data-swipe-back-state=canceling] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:not(#\#):before {
-    animation: none !important;
-    transform: translate3d(0, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:not(#\#):before {
-    animation: none !important;
-    transform: translate3d(100%, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true {
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true:not(#\#) {
-    animation: none;
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-}
-[data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true) {
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true) {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true) {
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true):not(#\#) {
-    animation: none;
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-}
-[data-swipe-back-state=canceling] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true):not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true):not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true {
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true:not(#\#) {
-    animation: none;
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-}
-[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true) {
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true) {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true) {
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true):not(#\#) {
-    animation: none;
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-}
-[data-swipe-back-state=canceling] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true):not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true):not(#\#) {
-    animation: none !important;
-    opacity: 1;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid.seed-app-bar__root--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid.seed-app-bar__root--activity-is-top_true {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: linear;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-active] .seed-app-bar__root--transitionStyle_fadeIn.seed-app-bar__root--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: ease-out;
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-bar__root--transitionStyle_fadeIn.seed-app-bar__root--activity-is-top_true {
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: ease-in;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-app-bar__root--tone_layer:before {
-    background: var(--seed-box-background, var(--seed-color-bg-layer-default));
-}
-.seed-app-bar__icon--tone_layer {
-    color: var(--seed-icon-color, var(--seed-color-fg-neutral));
-}
-.seed-app-bar__root--tone_transparent {
-    background-color: #00000000;
-}
-.seed-app-bar__icon--tone_transparent {
-    color: var(--seed-icon-color, var(--seed-color-palette-static-white));
-}
-.seed-app-bar__root--divider_true:before {
-    box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
-}

package/recipes/app-bar.d.ts

@@ -1,36 +0,0 @@
-declare interface AppBarVariant {
-  /**
-  * @default "cupertino"
-  */
-  theme: "cupertino" | "android";
-/**
-  * @default "slideFromRightIOS"
-  */
-  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid" | "fadeIn";
-/**
-  * @default "layer"
-  */
-  tone: "layer" | "transparent";
-/**
-  * @default false
-  */
-  divider: boolean;
-}
-
-declare type AppBarVariantMap = {
-  [key in keyof AppBarVariant]: Array<AppBarVariant[key]>;
-};
-
-export declare type AppBarVariantProps = Partial<AppBarVariant>;
-
-export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon" | "custom";
-
-export declare const appBarVariantMap: AppBarVariantMap;
-
-export declare const appBar: ((
-  props?: AppBarVariantProps,
-) => Record<AppBarSlotName, string>) & {
-  splitVariantProps: <T extends AppBarVariantProps>(
-    props: T,
-  ) => [AppBarVariantProps, Omit<T, keyof AppBarVariantProps>];
-}