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

package/recipes/app-bar.layered.css

@@ -1,385 +0,0 @@
-@layer seed-components {
-  .seed-app-bar__root {
-    z-index: var(--z-index-app-bar);
-    align-items: flex-end;
-    width: 100%;
-    display: flex;
-    position: absolute;
-    top: 0;
-  }
-
-  .seed-app-bar__root:before {
-    pointer-events: none;
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .seed-app-bar__left {
-    align-items: center;
-    height: 100%;
-    display: flex;
-  }
-
-  .seed-app-bar__right {
-    align-items: center;
-    height: 100%;
-    margin-left: auto;
-    display: flex;
-  }
-
-  .seed-app-bar__iconButton {
-    border-radius: var(--seed-radius-r1);
-    background: none;
-    border: none;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    font-family: inherit;
-    display: flex;
-  }
-
-  .seed-app-bar__icon {
-    flex-shrink: 0;
-    display: inline-block;
-  }
-
-  .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: -10px;
-  }
-
-  .seed-app-bar__iconButton--theme_cupertino:last-child {
-    margin-right: -10px;
-  }
-
-  .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: -10px;
-  }
-
-  .seed-app-bar__iconButton--theme_android:last-child {
-    margin-right: -10px;
-  }
-
-  .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 {
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    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);
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:before {
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    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 {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:not(#\#):before {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-bar__root--transitionStyle_slideFromRightIOS.seed-app-bar__root--activity-is-top_true:not(#\#):before {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(100%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [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) * .15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true {
-    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 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;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true:not(#\#) {
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true:not(#\#) {
-    opacity: 1;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS.seed-app-bar__icon--activity-is-top_true:not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [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;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [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) {
-    --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;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [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));
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true):not(#\#) {
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true):not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not(.seed-app-bar__icon--activity-is-top_true):not(#\#) {
-    opacity: 1;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [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) * .15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true {
-    --seed-enter-translate-x: calc(var(--swipe-back-displacement, 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;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true:not(#\#) {
-    transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true:not(#\#) {
-    opacity: 1;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS.seed-app-bar__custom--activity-is-top_true:not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [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;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [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) {
-    --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;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [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));
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true):not(#\#) {
-    opacity: calc(var(--swipe-back-displacement-ratio, 0));
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true):not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not(.seed-app-bar__custom--activity-is-top_true):not(#\#) {
-    opacity: 1;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid.seed-app-bar__root--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid.seed-app-bar__root--activity-is-top_true {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeIn.seed-app-bar__root--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s ease-out seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeIn.seed-app-bar__root--activity-is-top_true {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s ease-in forwards seed-exit;
-  }
-
-  .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: #0000;
-  }
-
-  .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.layered.mjs

@@ -1,74 +0,0 @@
-import './app-bar.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const appBarSlotNames = [
-  [
-    "root",
-    "seed-app-bar__root"
-  ],
-  [
-    "left",
-    "seed-app-bar__left"
-  ],
-  [
-    "right",
-    "seed-app-bar__right"
-  ],
-  [
-    "iconButton",
-    "seed-app-bar__iconButton"
-  ],
-  [
-    "icon",
-    "seed-app-bar__icon"
-  ],
-  [
-    "custom",
-    "seed-app-bar__custom"
-  ]
-];
-
-const defaultVariant = {
-  "theme": "cupertino",
-  "transitionStyle": "slideFromRightIOS",
-  "tone": "layer",
-  "divider": false
-};
-
-const compoundVariants = [];
-
-export const appBarVariantMap = {
-  "theme": [
-    "cupertino",
-    "android"
-  ],
-  "transitionStyle": [
-    "slideFromRightIOS",
-    "fadeFromBottomAndroid",
-    "fadeIn"
-  ],
-  "tone": [
-    "layer",
-    "transparent"
-  ],
-  "divider": [
-    true
-  ]
-};
-
-export const appBarVariantKeys = Object.keys(appBarVariantMap);
-
-export function appBar(props) {
-  return Object.fromEntries(
-    appBarSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(appBar, { splitVariantProps: (props) => splitVariantProps(props, appBarVariantMap) });
-
-// @recipe(seed): app-bar

package/recipes/app-bar.mjs

@@ -1,74 +0,0 @@
-import './app-bar.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const appBarSlotNames = [
-  [
-    "root",
-    "seed-app-bar__root"
-  ],
-  [
-    "left",
-    "seed-app-bar__left"
-  ],
-  [
-    "right",
-    "seed-app-bar__right"
-  ],
-  [
-    "iconButton",
-    "seed-app-bar__iconButton"
-  ],
-  [
-    "icon",
-    "seed-app-bar__icon"
-  ],
-  [
-    "custom",
-    "seed-app-bar__custom"
-  ]
-];
-
-const defaultVariant = {
-  "theme": "cupertino",
-  "transitionStyle": "slideFromRightIOS",
-  "tone": "layer",
-  "divider": false
-};
-
-const compoundVariants = [];
-
-export const appBarVariantMap = {
-  "theme": [
-    "cupertino",
-    "android"
-  ],
-  "transitionStyle": [
-    "slideFromRightIOS",
-    "fadeFromBottomAndroid",
-    "fadeIn"
-  ],
-  "tone": [
-    "layer",
-    "transparent"
-  ],
-  "divider": [
-    true
-  ]
-};
-
-export const appBarVariantKeys = Object.keys(appBarVariantMap);
-
-export function appBar(props) {
-  return Object.fromEntries(
-    appBarSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(appBar, { splitVariantProps: (props) => splitVariantProps(props, appBarVariantMap) });
-
-// @recipe(seed): app-bar