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

package/recipes/app-screen.layered.mjs

@@ -1,98 +0,0 @@
-import './app-screen.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const appScreenSlotNames = [
-  [
-    "root",
-    "seed-app-screen__root"
-  ],
-  [
-    "layer",
-    "seed-app-screen__layer"
-  ],
-  [
-    "dim",
-    "seed-app-screen__dim"
-  ],
-  [
-    "edge",
-    "seed-app-screen__edge"
-  ]
-];
-
-const defaultVariant = {
-  "theme": "cupertino",
-  "transitionStyle": "slideFromRightIOS",
-  "layerOffsetTop": "appBar",
-  "layerOffsetBottom": "none",
-  "tone": "layer",
-  "gradient": true
-};
-
-const compoundVariants = [
-  {
-    "tone": "transparent",
-    "gradient": true
-  },
-  {
-    "tone": "transparent",
-    "gradient": true,
-    "layerOffsetBottom": "none"
-  },
-  {
-    "tone": "transparent",
-    "gradient": true,
-    "layerOffsetTop": "safeArea"
-  },
-  {
-    "tone": "transparent",
-    "gradient": true,
-    "layerOffsetTop": "appBar"
-  }
-];
-
-export const appScreenVariantMap = {
-  "theme": [
-    "cupertino",
-    "android"
-  ],
-  "transitionStyle": [
-    "slideFromRightIOS",
-    "fadeFromBottomAndroid",
-    "fadeIn"
-  ],
-  "layerOffsetTop": [
-    "none",
-    "safeArea",
-    "appBar"
-  ],
-  "layerOffsetBottom": [
-    "none",
-    "safeArea"
-  ],
-  "tone": [
-    "layer",
-    "transparent"
-  ],
-  "gradient": [
-    true,
-    false
-  ]
-};
-
-export const appScreenVariantKeys = Object.keys(appScreenVariantMap);
-
-export function appScreen(props) {
-  return Object.fromEntries(
-    appScreenSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(appScreen, { splitVariantProps: (props) => splitVariantProps(props, appScreenVariantMap) });
-
-// @recipe(seed): app-screen

package/recipes/app-screen.mjs

@@ -1,98 +0,0 @@
-import './app-screen.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const appScreenSlotNames = [
-  [
-    "root",
-    "seed-app-screen__root"
-  ],
-  [
-    "layer",
-    "seed-app-screen__layer"
-  ],
-  [
-    "dim",
-    "seed-app-screen__dim"
-  ],
-  [
-    "edge",
-    "seed-app-screen__edge"
-  ]
-];
-
-const defaultVariant = {
-  "theme": "cupertino",
-  "transitionStyle": "slideFromRightIOS",
-  "layerOffsetTop": "appBar",
-  "layerOffsetBottom": "none",
-  "tone": "layer",
-  "gradient": true
-};
-
-const compoundVariants = [
-  {
-    "tone": "transparent",
-    "gradient": true
-  },
-  {
-    "tone": "transparent",
-    "gradient": true,
-    "layerOffsetBottom": "none"
-  },
-  {
-    "tone": "transparent",
-    "gradient": true,
-    "layerOffsetTop": "safeArea"
-  },
-  {
-    "tone": "transparent",
-    "gradient": true,
-    "layerOffsetTop": "appBar"
-  }
-];
-
-export const appScreenVariantMap = {
-  "theme": [
-    "cupertino",
-    "android"
-  ],
-  "transitionStyle": [
-    "slideFromRightIOS",
-    "fadeFromBottomAndroid",
-    "fadeIn"
-  ],
-  "layerOffsetTop": [
-    "none",
-    "safeArea",
-    "appBar"
-  ],
-  "layerOffsetBottom": [
-    "none",
-    "safeArea"
-  ],
-  "tone": [
-    "layer",
-    "transparent"
-  ],
-  "gradient": [
-    true,
-    false
-  ]
-};
-
-export const appScreenVariantKeys = Object.keys(appScreenVariantMap);
-
-export function appScreen(props) {
-  return Object.fromEntries(
-    appScreenSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(appScreen, { splitVariantProps: (props) => splitVariantProps(props, appScreenVariantMap) });
-
-// @recipe(seed): app-screen

package/recipes/article.d.ts

@@ -1,22 +0,0 @@
-declare interface ArticleVariant {
-  
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type ArticleVariantMap = {
-  [key in keyof ArticleVariant]: Array<ArticleVariant[key]>;
-};
-
-export declare type ArticleVariantProps = Partial<ArticleVariant>;
-
-export declare type ArticleSlotName = "root" | "text";
-
-export declare const articleVariantMap: ArticleVariantMap;
-
-export declare const article: ((
-  props?: ArticleVariantProps,
-) => Record<ArticleSlotName, string>) & {
-  splitVariantProps: <T extends ArticleVariantProps>(
-    props: T,
-  ) => [ArticleVariantProps, Omit<T, keyof ArticleVariantProps>];
-}

package/recipes/article.layered.css

@@ -1 +0,0 @@
-@layer seed-components;

package/recipes/article.layered.mjs

@@ -1,43 +0,0 @@
-import './article.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const articleSlotNames = [
-  [
-    "root",
-    "seed-article"
-  ],
-  [
-    "text",
-    "seed-article__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const articleVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const articleVariantKeys = Object.keys(articleVariantMap);
-
-export function article(props) {
-  return Object.fromEntries(
-    articleSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(article, { splitVariantProps: (props) => splitVariantProps(props, articleVariantMap) });
-
-// @recipe(seed): article

package/recipes/article.mjs

@@ -1,43 +0,0 @@
-import './article.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const articleSlotNames = [
-  [
-    "root",
-    "seed-article"
-  ],
-  [
-    "text",
-    "seed-article__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const articleVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const articleVariantKeys = Object.keys(articleVariantMap);
-
-export function article(props) {
-  return Object.fromEntries(
-    articleSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(article, { splitVariantProps: (props) => splitVariantProps(props, articleVariantMap) });
-
-// @recipe(seed): article

package/recipes/aspect-ratio.css

@@ -1,22 +0,0 @@
-.seed-aspect-ratio {
-    --seed-aspect-ratio-padding: 75%;
-}.seed-aspect-ratio__text {
-    --seed-aspect-ratio-padding: 75%;
-}
-.seed-aspect-ratio::before {
-    display: block;
-    height: 0;
-    padding-bottom: var(--seed-aspect-ratio-padding);
-}
-.seed-aspect-ratio > *:not(style) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}

package/recipes/aspect-ratio.d.ts

@@ -1,22 +0,0 @@
-declare interface AspectRatioVariant {
-  
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type AspectRatioVariantMap = {
-  [key in keyof AspectRatioVariant]: Array<AspectRatioVariant[key]>;
-};
-
-export declare type AspectRatioVariantProps = Partial<AspectRatioVariant>;
-
-export declare type AspectRatioSlotName = "root" | "text";
-
-export declare const aspectRatioVariantMap: AspectRatioVariantMap;
-
-export declare const aspectRatio: ((
-  props?: AspectRatioVariantProps,
-) => Record<AspectRatioSlotName, string>) & {
-  splitVariantProps: <T extends AspectRatioVariantProps>(
-    props: T,
-  ) => [AspectRatioVariantProps, Omit<T, keyof AspectRatioVariantProps>];
-}

package/recipes/aspect-ratio.layered.css

@@ -1,24 +0,0 @@
-@layer seed-components {
-  .seed-aspect-ratio, .seed-aspect-ratio__text {
-    --seed-aspect-ratio-padding: 75%;
-  }
-
-  .seed-aspect-ratio:before {
-    height: 0;
-    padding-bottom: var(--seed-aspect-ratio-padding);
-    display: block;
-  }
-
-  .seed-aspect-ratio > :not(style) {
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-}

package/recipes/aspect-ratio.layered.mjs

@@ -1,43 +0,0 @@
-import './aspect-ratio.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const aspectRatioSlotNames = [
-  [
-    "root",
-    "seed-aspect-ratio"
-  ],
-  [
-    "text",
-    "seed-aspect-ratio__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const aspectRatioVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const aspectRatioVariantKeys = Object.keys(aspectRatioVariantMap);
-
-export function aspectRatio(props) {
-  return Object.fromEntries(
-    aspectRatioSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(aspectRatio, { splitVariantProps: (props) => splitVariantProps(props, aspectRatioVariantMap) });
-
-// @recipe(seed): aspect-ratio

package/recipes/aspect-ratio.mjs

@@ -1,43 +0,0 @@
-import './aspect-ratio.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const aspectRatioSlotNames = [
-  [
-    "root",
-    "seed-aspect-ratio"
-  ],
-  [
-    "text",
-    "seed-aspect-ratio__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const aspectRatioVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const aspectRatioVariantKeys = Object.keys(aspectRatioVariantMap);
-
-export function aspectRatio(props) {
-  return Object.fromEntries(
-    aspectRatioSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(aspectRatio, { splitVariantProps: (props) => splitVariantProps(props, aspectRatioVariantMap) });
-
-// @recipe(seed): aspect-ratio

package/recipes/avatar-stack.css

@@ -1,79 +0,0 @@
-.seed-avatar-stack__root {
-    display: inline-flex;
-    align-items: center
-}
-.seed-avatar-stack__item {
-    display: block;
-    border-radius: var(--seed-radius-full);
-    background-clip: padding-box
-}
-.seed-avatar-stack__item--size_20:not(:first-child) {
-    margin-left: -5px
-}
-.seed-avatar-stack__item--size_20 {
-    clip-path: inset(-1px);
-    box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_24:not(:first-child) {
-    margin-left: -6px
-}
-.seed-avatar-stack__item--size_24 {
-    clip-path: inset(-1px);
-    box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_36:not(:first-child) {
-    margin-left: -8px
-}
-.seed-avatar-stack__item--size_36 {
-    clip-path: inset(-2px);
-    box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_42:not(:first-child) {
-    margin-left: -10px
-}
-.seed-avatar-stack__item--size_42 {
-    clip-path: inset(-2px);
-    box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_48:not(:first-child) {
-    margin-left: -12px
-}
-.seed-avatar-stack__item--size_48 {
-    clip-path: inset(-2px);
-    box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_56:not(:first-child) {
-    margin-left: -13px
-}
-.seed-avatar-stack__item--size_56 {
-    clip-path: inset(-3px);
-    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_64:not(:first-child) {
-    margin-left: -16px
-}
-.seed-avatar-stack__item--size_64 {
-    clip-path: inset(-3px);
-    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_80:not(:first-child) {
-    margin-left: -20px
-}
-.seed-avatar-stack__item--size_80 {
-    clip-path: inset(-4px);
-    box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_96:not(:first-child) {
-    margin-left: -24px
-}
-.seed-avatar-stack__item--size_96 {
-    clip-path: inset(-5px);
-    box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default)
-}
-.seed-avatar-stack__item--size_108:not(:first-child) {
-    margin-left: -27px
-}
-.seed-avatar-stack__item--size_108 {
-    clip-path: inset(-5px);
-    box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default)
-}

package/recipes/avatar-stack.d.ts

@@ -1,24 +0,0 @@
-declare interface AvatarStackVariant {
-  /**
-  * @default 48
-  */
-  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
-}
-
-declare type AvatarStackVariantMap = {
-  [key in keyof AvatarStackVariant]: Array<AvatarStackVariant[key]>;
-};
-
-export declare type AvatarStackVariantProps = Partial<AvatarStackVariant>;
-
-export declare type AvatarStackSlotName = "root" | "item";
-
-export declare const avatarStackVariantMap: AvatarStackVariantMap;
-
-export declare const avatarStack: ((
-  props?: AvatarStackVariantProps,
-) => Record<AvatarStackSlotName, string>) & {
-  splitVariantProps: <T extends AvatarStackVariantProps>(
-    props: T,
-  ) => [AvatarStackVariantProps, Omit<T, keyof AvatarStackVariantProps>];
-}

package/recipes/avatar-stack.layered.css

@@ -1,102 +0,0 @@
-@layer seed-components {
-  .seed-avatar-stack__root {
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .seed-avatar-stack__item {
-    border-radius: var(--seed-radius-full);
-    background-clip: padding-box;
-    display: block;
-  }
-
-  .seed-avatar-stack__item--size_20:not(:first-child) {
-    margin-left: -5px;
-  }
-
-  .seed-avatar-stack__item--size_20 {
-    clip-path: inset(-1px);
-    box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_24:not(:first-child) {
-    margin-left: -6px;
-  }
-
-  .seed-avatar-stack__item--size_24 {
-    clip-path: inset(-1px);
-    box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_36:not(:first-child) {
-    margin-left: -8px;
-  }
-
-  .seed-avatar-stack__item--size_36 {
-    clip-path: inset(-2px);
-    box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_42:not(:first-child) {
-    margin-left: -10px;
-  }
-
-  .seed-avatar-stack__item--size_42 {
-    clip-path: inset(-2px);
-    box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_48:not(:first-child) {
-    margin-left: -12px;
-  }
-
-  .seed-avatar-stack__item--size_48 {
-    clip-path: inset(-2px);
-    box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_56:not(:first-child) {
-    margin-left: -13px;
-  }
-
-  .seed-avatar-stack__item--size_56 {
-    clip-path: inset(-3px);
-    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_64:not(:first-child) {
-    margin-left: -16px;
-  }
-
-  .seed-avatar-stack__item--size_64 {
-    clip-path: inset(-3px);
-    box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_80:not(:first-child) {
-    margin-left: -20px;
-  }
-
-  .seed-avatar-stack__item--size_80 {
-    clip-path: inset(-4px);
-    box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_96:not(:first-child) {
-    margin-left: -24px;
-  }
-
-  .seed-avatar-stack__item--size_96 {
-    clip-path: inset(-5px);
-    box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
-  }
-
-  .seed-avatar-stack__item--size_108:not(:first-child) {
-    margin-left: -27px;
-  }
-
-  .seed-avatar-stack__item--size_108 {
-    clip-path: inset(-5px);
-    box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
-  }
-}