@seed-design/lynx-css 0.1.1-alpha.0

package/recipes/app-screen.layered.mjs

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,22 @@
+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

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

package/recipes/article.layered.mjs

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,24 @@
+@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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,79 @@
+.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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,102 @@
+@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);
+  }
+}