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

package/recipes/avatar-stack.layered.mjs

@@ -0,0 +1,51 @@
+import './avatar-stack.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarStackSlotNames = [
+  [
+    "root",
+    "seed-avatar-stack__root"
+  ],
+  [
+    "item",
+    "seed-avatar-stack__item"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48
+};
+
+const compoundVariants = [];
+
+export const avatarStackVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "56",
+    "64",
+    "80",
+    "96",
+    "108"
+  ]
+};
+
+export const avatarStackVariantKeys = Object.keys(avatarStackVariantMap);
+
+export function avatarStack(props) {
+  return Object.fromEntries(
+    avatarStackSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatarStack, { splitVariantProps: (props) => splitVariantProps(props, avatarStackVariantMap) });
+
+// @recipe(seed): avatar-stack

package/recipes/avatar-stack.mjs

@@ -0,0 +1,51 @@
+import './avatar-stack.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarStackSlotNames = [
+  [
+    "root",
+    "seed-avatar-stack__root"
+  ],
+  [
+    "item",
+    "seed-avatar-stack__item"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48
+};
+
+const compoundVariants = [];
+
+export const avatarStackVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "56",
+    "64",
+    "80",
+    "96",
+    "108"
+  ]
+};
+
+export const avatarStackVariantKeys = Object.keys(avatarStackVariantMap);
+
+export function avatarStack(props) {
+  return Object.fromEntries(
+    avatarStackSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatarStack, { splitVariantProps: (props) => splitVariantProps(props, avatarStackVariantMap) });
+
+// @recipe(seed): avatar-stack

package/recipes/avatar.css

@@ -0,0 +1,168 @@
+.seed-avatar__root {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--seed-radius-full);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+}
+.seed-avatar__root:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border-radius: var(--seed-radius-full);
+    box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);
+    transform: translateZ(0);
+}
+.seed-avatar__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    transform: translateZ(0);
+}
+.seed-avatar__image:not([data-loading-state='loaded']) {
+    display: none;
+}
+.seed-avatar__fallback {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--seed-radius-full);
+    transform: translateZ(0);
+}
+.seed-avatar__fallback[data-loading-state='loaded'] {
+    display: none;
+}
+.seed-avatar__badge {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    top: var(--badge-offset);
+    left: var(--badge-offset);
+    width: var(--badge-size);
+    height: var(--badge-size);
+}
+.seed-avatar__root--size_20 {
+    --avatar-size: 20px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 0px;
+    --badge-mask-offset: 0px;
+}
+.seed-avatar__badge--size_20 {
+    display: none;
+}
+.seed-avatar__root--size_24 {
+    --avatar-size: 24px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 12px;
+    --badge-mask-offset: 14px;
+}
+.seed-avatar__badge--size_24 {
+    --badge-size: 10px;
+    --badge-offset: 15px;
+}
+.seed-avatar__root--size_36 {
+    --avatar-size: 36px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 18px;
+    --badge-mask-offset: 20px;
+}
+.seed-avatar__badge--size_36 {
+    --badge-size: 14px;
+    --badge-offset: 22px;
+}
+.seed-avatar__root--size_42 {
+    --avatar-size: 42px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 20px;
+    --badge-mask-offset: 24px;
+}
+.seed-avatar__badge--size_42 {
+    --badge-size: 16px;
+    --badge-offset: 26px;
+}
+.seed-avatar__root--size_48 {
+    --avatar-size: 48px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 22px;
+    --badge-mask-offset: 28px;
+}
+.seed-avatar__badge--size_48 {
+    --badge-size: 18px;
+    --badge-offset: 30px;
+}
+.seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+}
+.seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+}
+.seed-avatar__root--size_64 {
+    --avatar-size: 64px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 26px;
+    --badge-mask-offset: 40px;
+}
+.seed-avatar__badge--size_64 {
+    --badge-size: 22px;
+    --badge-offset: 42px;
+}
+.seed-avatar__root--size_80 {
+    --avatar-size: 80px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 32px;
+    --badge-mask-offset: 52px;
+}
+.seed-avatar__badge--size_80 {
+    --badge-size: 28px;
+    --badge-offset: 54px;
+}
+.seed-avatar__root--size_96 {
+    --avatar-size: 96px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 38px;
+    --badge-mask-offset: 62px;
+}
+.seed-avatar__badge--size_96 {
+    --badge-size: 32px;
+    --badge-offset: 65px;
+}
+.seed-avatar__root--size_108 {
+    --avatar-size: 108px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 44px;
+    --badge-mask-offset: 70px;
+}
+.seed-avatar__badge--size_108 {
+    --badge-size: 36px;
+    --badge-offset: 74px;
+}
+.seed-avatar__root--badgeMask_none {
+    --svg-mask-uri: url('data:image/svg+xml;utf8,<svg />');
+}
+.seed-avatar__root--badgeMask_circle {
+    --svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>');
+}
+.seed-avatar__badge--badgeMask_circle {
+    border-radius: 9999px;
+}
+.seed-avatar__root--badgeMask_flower {
+    --svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path shape-rendering="crispEdges" fill-rule="evenodd" clip-rule="evenodd" d="M29.9115 8C28.4089 5.42609 25.682 4.02087 22.8994 4.10435C21.5637 1.68348 19.0037 0 15.9985 0C12.9933 0 10.4333 1.65565 9.09762 4.10435C6.32893 4.03478 3.60197 5.42609 2.09936 8C0.596754 10.5739 0.76371 13.6348 2.19675 16C0.749797 18.3652 0.596754 21.4261 2.09936 24C3.60197 26.5739 6.32893 27.9791 9.11154 27.8957C10.4472 30.3165 13.0072 32 16.0124 32C19.0176 32 21.5776 30.3443 22.9133 27.8957C25.682 27.9652 28.4089 26.5739 29.9115 24C31.4141 21.4261 31.2472 18.3652 29.8141 16C31.2611 13.6348 31.4141 10.5739 29.9115 8Z" fill="white"/></svg>');
+}
+.seed-avatar__root--badgeMask_shield {
+    --svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.137 31.4527C18.1171 31.4616 18.0943 31.4721 18.0531 31.491C18.046 31.4943 18.0356 31.4994 18.0221 31.5059C17.8282 31.5996 16.9959 32.0019 16.0001 32C15.0096 32.002 14.1895 31.6075 13.986 31.5096L13.8629 31.4527C13.5452 31.3105 13.1039 31.1059 12.5795 30.8436C11.541 30.3242 10.1273 29.554 8.68691 28.5676C7.2706 27.5976 5.67543 26.3154 4.39746 24.7323C3.12739 23.159 1.92743 20.9794 1.92743 18.3179V7.77468C1.92743 6.02645 3.02031 4.4647 4.66276 3.86583L14.5747 0.25173C15.4953 -0.0839101 16.5047 -0.0839101 17.4252 0.25173L27.3372 3.86583C28.9796 4.4647 30.0725 6.02646 30.0725 7.77468V18.3179C30.0725 20.9794 28.8726 23.159 27.6025 24.7323C26.3245 26.3154 24.7294 27.5976 23.313 28.5676C21.8727 29.554 20.4589 30.3242 19.4205 30.8436C18.8961 31.1059 18.4547 31.3106 18.137 31.4527Z" fill="white"/></svg>');
+}

package/recipes/avatar.d.ts

@@ -0,0 +1,28 @@
+declare interface AvatarVariant {
+  /**
+  * @default 48
+  */
+  size: "20" | "24" | "36" | "42" | "48" | "56" | "64" | "80" | "96" | "108";
+/**
+  * @default "none"
+  */
+  badgeMask: "none" | "circle" | "flower" | "shield";
+}
+
+declare type AvatarVariantMap = {
+  [key in keyof AvatarVariant]: Array<AvatarVariant[key]>;
+};
+
+export declare type AvatarVariantProps = Partial<AvatarVariant>;
+
+export declare type AvatarSlotName = "root" | "image" | "fallback" | "badge";
+
+export declare const avatarVariantMap: AvatarVariantMap;
+
+export declare const avatar: ((
+  props?: AvatarVariantProps,
+) => Record<AvatarSlotName, string>) & {
+  splitVariantProps: <T extends AvatarVariantProps>(
+    props: T,
+  ) => [AvatarVariantProps, Omit<T, keyof AvatarVariantProps>];
+}

package/recipes/avatar.layered.css

@@ -0,0 +1,201 @@
+@layer seed-components {
+  .seed-avatar__root {
+    border-radius: var(--seed-radius-full);
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-avatar__root:after {
+    pointer-events: none;
+    border-radius: var(--seed-radius-full);
+    box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateZ(0);
+  }
+
+  .seed-avatar__image {
+    width: 100%;
+    height: 100%;
+    display: block;
+    overflow: hidden;
+    transform: translateZ(0);
+  }
+
+  .seed-avatar__image:not([data-loading-state="loaded"]) {
+    display: none;
+  }
+
+  .seed-avatar__fallback {
+    border-radius: var(--seed-radius-full);
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    transform: translateZ(0);
+  }
+
+  .seed-avatar__fallback.seed-avatar__fallback--loading-state_loaded {
+    display: none;
+  }
+
+  .seed-avatar__badge {
+    z-index: 1;
+    top: var(--badge-offset);
+    left: var(--badge-offset);
+    width: var(--badge-size);
+    height: var(--badge-size);
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .seed-avatar__root--size_20 {
+    --avatar-size: 20px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 0px;
+    --badge-mask-offset: 0px;
+  }
+
+  .seed-avatar__badge--size_20 {
+    display: none;
+  }
+
+  .seed-avatar__root--size_24 {
+    --avatar-size: 24px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 12px;
+    --badge-mask-offset: 14px;
+  }
+
+  .seed-avatar__badge--size_24 {
+    --badge-size: 10px;
+    --badge-offset: 15px;
+  }
+
+  .seed-avatar__root--size_36 {
+    --avatar-size: 36px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 18px;
+    --badge-mask-offset: 20px;
+  }
+
+  .seed-avatar__badge--size_36 {
+    --badge-size: 14px;
+    --badge-offset: 22px;
+  }
+
+  .seed-avatar__root--size_42 {
+    --avatar-size: 42px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 20px;
+    --badge-mask-offset: 24px;
+  }
+
+  .seed-avatar__badge--size_42 {
+    --badge-size: 16px;
+    --badge-offset: 26px;
+  }
+
+  .seed-avatar__root--size_48 {
+    --avatar-size: 48px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 22px;
+    --badge-mask-offset: 28px;
+  }
+
+  .seed-avatar__badge--size_48 {
+    --badge-size: 18px;
+    --badge-offset: 30px;
+  }
+
+  .seed-avatar__root--size_56 {
+    --avatar-size: 56px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 24px;
+    --badge-mask-offset: 34px;
+  }
+
+  .seed-avatar__badge--size_56 {
+    --badge-size: 20px;
+    --badge-offset: 36px;
+  }
+
+  .seed-avatar__root--size_64 {
+    --avatar-size: 64px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 26px;
+    --badge-mask-offset: 40px;
+  }
+
+  .seed-avatar__badge--size_64 {
+    --badge-size: 22px;
+    --badge-offset: 42px;
+  }
+
+  .seed-avatar__root--size_80 {
+    --avatar-size: 80px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 32px;
+    --badge-mask-offset: 52px;
+  }
+
+  .seed-avatar__badge--size_80 {
+    --badge-size: 28px;
+    --badge-offset: 54px;
+  }
+
+  .seed-avatar__root--size_96 {
+    --avatar-size: 96px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 38px;
+    --badge-mask-offset: 62px;
+  }
+
+  .seed-avatar__badge--size_96 {
+    --badge-size: 32px;
+    --badge-offset: 65px;
+  }
+
+  .seed-avatar__root--size_108 {
+    --avatar-size: 108px;
+    --avatar-stroke-width: 1px;
+    --badge-mask-size: 44px;
+    --badge-mask-offset: 70px;
+  }
+
+  .seed-avatar__badge--size_108 {
+    --badge-size: 36px;
+    --badge-offset: 74px;
+  }
+
+  .seed-avatar__root--badgeMask_none {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg />");
+  }
+
+  .seed-avatar__root--badgeMask_circle {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"16\" cy=\"16\" r=\"16\" fill=\"white\"/></svg>");
+  }
+
+  .seed-avatar__badge--badgeMask_circle {
+    border-radius: 9999px;
+  }
+
+  .seed-avatar__root--badgeMask_flower {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path shape-rendering=\"crispEdges\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M29.9115 8C28.4089 5.42609 25.682 4.02087 22.8994 4.10435C21.5637 1.68348 19.0037 0 15.9985 0C12.9933 0 10.4333 1.65565 9.09762 4.10435C6.32893 4.03478 3.60197 5.42609 2.09936 8C0.596754 10.5739 0.76371 13.6348 2.19675 16C0.749797 18.3652 0.596754 21.4261 2.09936 24C3.60197 26.5739 6.32893 27.9791 9.11154 27.8957C10.4472 30.3165 13.0072 32 16.0124 32C19.0176 32 21.5776 30.3443 22.9133 27.8957C25.682 27.9652 28.4089 26.5739 29.9115 24C31.4141 21.4261 31.2472 18.3652 29.8141 16C31.2611 13.6348 31.4141 10.5739 29.9115 8Z\" fill=\"white\"/></svg>");
+  }
+
+  .seed-avatar__root--badgeMask_shield {
+    --svg-mask-uri: url("data:image/svg+xml;utf8,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M18.137 31.4527C18.1171 31.4616 18.0943 31.4721 18.0531 31.491C18.046 31.4943 18.0356 31.4994 18.0221 31.5059C17.8282 31.5996 16.9959 32.0019 16.0001 32C15.0096 32.002 14.1895 31.6075 13.986 31.5096L13.8629 31.4527C13.5452 31.3105 13.1039 31.1059 12.5795 30.8436C11.541 30.3242 10.1273 29.554 8.68691 28.5676C7.2706 27.5976 5.67543 26.3154 4.39746 24.7323C3.12739 23.159 1.92743 20.9794 1.92743 18.3179V7.77468C1.92743 6.02645 3.02031 4.4647 4.66276 3.86583L14.5747 0.25173C15.4953 -0.0839101 16.5047 -0.0839101 17.4252 0.25173L27.3372 3.86583C28.9796 4.4647 30.0725 6.02646 30.0725 7.77468V18.3179C30.0725 20.9794 28.8726 23.159 27.6025 24.7323C26.3245 26.3154 24.7294 27.5976 23.313 28.5676C21.8727 29.554 20.4589 30.3242 19.4205 30.8436C18.8961 31.1059 18.4547 31.3106 18.137 31.4527Z\" fill=\"white\"/></svg>");
+  }
+}

package/recipes/avatar.layered.mjs

@@ -0,0 +1,66 @@
+import './avatar.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "seed-avatar__root"
+  ],
+  [
+    "image",
+    "seed-avatar__image"
+  ],
+  [
+    "fallback",
+    "seed-avatar__fallback"
+  ],
+  [
+    "badge",
+    "seed-avatar__badge"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48,
+  "badgeMask": "none"
+};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "56",
+    "64",
+    "80",
+    "96",
+    "108"
+  ],
+  "badgeMask": [
+    "none",
+    "circle",
+    "flower",
+    "shield"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });
+
+// @recipe(seed): avatar

package/recipes/avatar.mjs

@@ -0,0 +1,66 @@
+import './avatar.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "seed-avatar__root"
+  ],
+  [
+    "image",
+    "seed-avatar__image"
+  ],
+  [
+    "fallback",
+    "seed-avatar__fallback"
+  ],
+  [
+    "badge",
+    "seed-avatar__badge"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48,
+  "badgeMask": "none"
+};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "42",
+    "48",
+    "56",
+    "64",
+    "80",
+    "96",
+    "108"
+  ],
+  "badgeMask": [
+    "none",
+    "circle",
+    "flower",
+    "shield"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });
+
+// @recipe(seed): avatar