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

package/recipes/chip.mjs

@@ -1,80 +0,0 @@
-import './chip.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const chipSlotNames = [
-  [
-    "root",
-    "seed-chip__root"
-  ],
-  [
-    "label",
-    "seed-chip__label"
-  ],
-  [
-    "prefixIcon",
-    "seed-chip__prefixIcon"
-  ],
-  [
-    "suffixIcon",
-    "seed-chip__suffixIcon"
-  ],
-  [
-    "prefixAvatar",
-    "seed-chip__prefixAvatar"
-  ]
-];
-
-const defaultVariant = {
-  "variant": "solid",
-  "size": "medium",
-  "layout": "withText"
-};
-
-const compoundVariants = [
-  {
-    "size": "small",
-    "layout": "iconOnly"
-  },
-  {
-    "size": "medium",
-    "layout": "iconOnly"
-  },
-  {
-    "size": "large",
-    "layout": "iconOnly"
-  }
-];
-
-export const chipVariantMap = {
-  "variant": [
-    "solid",
-    "outlineStrong",
-    "outlineWeak"
-  ],
-  "size": [
-    "large",
-    "medium",
-    "small"
-  ],
-  "layout": [
-    "iconOnly",
-    "withText"
-  ]
-};
-
-export const chipVariantKeys = Object.keys(chipVariantMap);
-
-export function chip(props) {
-  return Object.fromEntries(
-    chipSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(chip, { splitVariantProps: (props) => splitVariantProps(props, chipVariantMap) });
-
-// @recipe(seed): chip

package/recipes/content-placeholder.css

@@ -1,19 +0,0 @@
-.seed-content-placeholder__root {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background-color: var(--seed-color-palette-gray-200)
-}
-.seed-content-placeholder__asset {
-    display: block;
-    height: calc(0.5 * 100%);
-    min-width: var(--seed-dimension-x4);
-    max-width: 64px;
-    width: auto;
-    aspect-ratio: 1 / 1;
-    color: var(--seed-color-palette-gray-400)
-}

package/recipes/content-placeholder.d.ts

@@ -1,24 +0,0 @@
-declare interface ContentPlaceholderVariant {
-  /**
-  * @default "default"
-  */
-  type: "default" | "buySell" | "car" | "commerce" | "coupon" | "food" | "group" | "image" | "jobs" | "business" | "post" | "realty";
-}
-
-declare type ContentPlaceholderVariantMap = {
-  [key in keyof ContentPlaceholderVariant]: Array<ContentPlaceholderVariant[key]>;
-};
-
-export declare type ContentPlaceholderVariantProps = Partial<ContentPlaceholderVariant>;
-
-export declare type ContentPlaceholderSlotName = "root" | "asset";
-
-export declare const contentPlaceholderVariantMap: ContentPlaceholderVariantMap;
-
-export declare const contentPlaceholder: ((
-  props?: ContentPlaceholderVariantProps,
-) => Record<ContentPlaceholderSlotName, string>) & {
-  splitVariantProps: <T extends ContentPlaceholderVariantProps>(
-    props: T,
-  ) => [ContentPlaceholderVariantProps, Omit<T, keyof ContentPlaceholderVariantProps>];
-}

package/recipes/content-placeholder.layered.css

@@ -1,22 +0,0 @@
-@layer seed-components {
-  .seed-content-placeholder__root {
-    background-color: var(--seed-color-palette-gray-200);
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    display: inline-flex;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .seed-content-placeholder__asset {
-    height: 50%;
-    min-width: var(--seed-dimension-x4);
-    aspect-ratio: 1;
-    width: auto;
-    max-width: 64px;
-    color: var(--seed-color-palette-gray-400);
-    display: block;
-  }
-}

package/recipes/content-placeholder.layered.mjs

@@ -1,53 +0,0 @@
-import './content-placeholder.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const contentPlaceholderSlotNames = [
-  [
-    "root",
-    "seed-content-placeholder__root"
-  ],
-  [
-    "asset",
-    "seed-content-placeholder__asset"
-  ]
-];
-
-const defaultVariant = {
-  "type": "default"
-};
-
-const compoundVariants = [];
-
-export const contentPlaceholderVariantMap = {
-  "type": [
-    "default",
-    "buySell",
-    "car",
-    "commerce",
-    "coupon",
-    "food",
-    "group",
-    "image",
-    "jobs",
-    "business",
-    "post",
-    "realty"
-  ]
-};
-
-export const contentPlaceholderVariantKeys = Object.keys(contentPlaceholderVariantMap);
-
-export function contentPlaceholder(props) {
-  return Object.fromEntries(
-    contentPlaceholderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(contentPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, contentPlaceholderVariantMap) });
-
-// @recipe(seed): content-placeholder

package/recipes/content-placeholder.mjs

@@ -1,53 +0,0 @@
-import './content-placeholder.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const contentPlaceholderSlotNames = [
-  [
-    "root",
-    "seed-content-placeholder__root"
-  ],
-  [
-    "asset",
-    "seed-content-placeholder__asset"
-  ]
-];
-
-const defaultVariant = {
-  "type": "default"
-};
-
-const compoundVariants = [];
-
-export const contentPlaceholderVariantMap = {
-  "type": [
-    "default",
-    "buySell",
-    "car",
-    "commerce",
-    "coupon",
-    "food",
-    "group",
-    "image",
-    "jobs",
-    "business",
-    "post",
-    "realty"
-  ]
-};
-
-export const contentPlaceholderVariantKeys = Object.keys(contentPlaceholderVariantMap);
-
-export function contentPlaceholder(props) {
-  return Object.fromEntries(
-    contentPlaceholderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(contentPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, contentPlaceholderVariantMap) });
-
-// @recipe(seed): content-placeholder

package/recipes/contextual-floating-button.css

@@ -1,123 +0,0 @@
-.seed-contextual-floating-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-}.seed-contextual-floating-button__text {
-    font-family: inherit;
-}
-.seed-contextual-floating-button {
-    border-radius: var(--seed-radius-full);
-    box-shadow: var(--seed-shadow-s3);
-    --seed-box-z-index: auto;
-    z-index: var(--seed-box-z-index);
-    --seed-box-position: relative;
-    position: var(--seed-box-position);
-    --seed-box-top: auto;
-    --seed-box-right: auto;
-    --seed-box-bottom: auto;
-    --seed-box-left: auto;
-    top: var(--seed-box-top);
-    right: var(--seed-box-right);
-    bottom: var(--seed-box-bottom);
-    left: var(--seed-box-left);
-    --seed-icon-size: 22px;
-    --size: 16px;
-    --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-}
-.seed-contextual-floating-button__text {
-    --seed-box-z-index: auto;
-    --seed-box-position: relative;
-    --seed-box-top: auto;
-    --seed-box-right: auto;
-    --seed-box-bottom: auto;
-    --seed-box-left: auto;
-    --seed-icon-size: 22px;
-    --size: 16px;
-    --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    font-weight: var(--seed-font-weight-medium);
-}
-.seed-contextual-floating-button--variant_solid {
-    background: var(--seed-color-bg-neutral-inverted);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
-    --track-color: var(--seed-color-palette-gray-700);
-    --range-color: var(--seed-color-fg-neutral-inverted);
-}
-.seed-contextual-floating-button__text--variant_solid {
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
-    --track-color: var(--seed-color-palette-gray-700);
-    --range-color: var(--seed-color-fg-neutral-inverted);
-    color: var(--seed-color-fg-neutral-inverted);
-}
-.seed-contextual-floating-button--variant_solid:active {
-    background: var(--seed-color-bg-neutral-inverted-pressed);
-}
-.seed-contextual-floating-button--variant_solid.seed-contextual-floating-button--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-}
-.seed-contextual-floating-button__text--variant_solid.seed-contextual-floating-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-    color: var(--seed-color-fg-disabled);
-}
-.seed-contextual-floating-button--variant_solid.seed-contextual-floating-button--loading_true {
-    background: var(--seed-color-bg-neutral-inverted-pressed);
-}
-.seed-contextual-floating-button--variant_layer {
-    background: var(--seed-color-bg-layer-floating);
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-}
-.seed-contextual-floating-button__text--variant_layer {
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    color: var(--seed-color-fg-neutral);
-}
-.seed-contextual-floating-button--variant_layer:active {
-    background: var(--seed-color-bg-layer-floating-pressed);
-}
-.seed-contextual-floating-button--variant_layer.seed-contextual-floating-button--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-}
-.seed-contextual-floating-button__text--variant_layer.seed-contextual-floating-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-    color: var(--seed-color-fg-disabled);
-}
-.seed-contextual-floating-button--variant_layer.seed-contextual-floating-button--loading_true {
-    background: var(--seed-color-bg-layer-floating-pressed);
-}
-.seed-contextual-floating-button--layout_withText {
-    min-height: 36px;
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    gap: var(--seed-dimension-x1);
-    --seed-prefix-icon-size: 16px;
-}
-.seed-contextual-floating-button__text--layout_withText {
-    --seed-prefix-icon-size: 16px;
-}
-.seed-contextual-floating-button--layout_iconOnly {
-    width: 44px;
-    height: 44px;
-    --seed-icon-size: 22px;
-}
-.seed-contextual-floating-button__text--layout_iconOnly {
-    --seed-icon-size: 22px;
-}

package/recipes/contextual-floating-button.d.ts

@@ -1,29 +0,0 @@
-declare interface ContextualFloatingButtonVariant {
-  /**
-  * @default "solid"
-  */
-  variant: "solid" | "layer";
-/**
-  * @default "withText"
-  */
-  layout: "withText" | "iconOnly";
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type ContextualFloatingButtonVariantMap = {
-  [key in keyof ContextualFloatingButtonVariant]: Array<ContextualFloatingButtonVariant[key]>;
-};
-
-export declare type ContextualFloatingButtonVariantProps = Partial<ContextualFloatingButtonVariant>;
-
-export declare type ContextualFloatingButtonSlotName = "root" | "text";
-
-export declare const contextualFloatingButtonVariantMap: ContextualFloatingButtonVariantMap;
-
-export declare const contextualFloatingButton: ((
-  props?: ContextualFloatingButtonVariantProps,
-) => Record<ContextualFloatingButtonSlotName, string>) & {
-  splitVariantProps: <T extends ContextualFloatingButtonVariantProps>(
-    props: T,
-  ) => [ContextualFloatingButtonVariantProps, Omit<T, keyof ContextualFloatingButtonVariantProps>];
-}

package/recipes/contextual-floating-button.layered.css

@@ -1,190 +0,0 @@
-@layer seed-components {
-  .seed-contextual-floating-button {
-    border: none;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .seed-contextual-floating-button__text {
-    font-family: inherit;
-  }
-
-  .seed-contextual-floating-button {
-    border-radius: var(--seed-radius-full);
-    box-shadow: var(--seed-shadow-s3);
-    --seed-box-z-index: auto;
-    z-index: var(--seed-box-z-index);
-    --seed-box-position: relative;
-    position: var(--seed-box-position);
-    --seed-box-top: auto;
-    --seed-box-right: auto;
-    --seed-box-bottom: auto;
-    --seed-box-left: auto;
-    top: var(--seed-box-top);
-    right: var(--seed-box-right);
-    bottom: var(--seed-box-bottom);
-    left: var(--seed-box-left);
-    --seed-icon-size: 22px;
-    --size: 16px;
-    --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-  }
-
-  .seed-contextual-floating-button__text {
-    --seed-box-z-index: auto;
-    --seed-box-position: relative;
-    --seed-box-top: auto;
-    --seed-box-right: auto;
-    --seed-box-bottom: auto;
-    --seed-box-left: auto;
-    --seed-icon-size: 22px;
-    --size: 16px;
-    --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-  }
-
-  .seed-contextual-floating-button__text {
-    --seed-box-z-index: auto;
-    --seed-box-position: relative;
-    --seed-box-top: auto;
-    --seed-box-right: auto;
-    --seed-box-bottom: auto;
-    --seed-box-left: auto;
-    --seed-icon-size: 22px;
-    --size: 16px;
-    --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    font-weight: var(--seed-font-weight-medium);
-  }
-
-  .seed-contextual-floating-button--variant_solid {
-    background: var(--seed-color-bg-neutral-inverted);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
-    --track-color: var(--seed-color-palette-gray-700);
-    --range-color: var(--seed-color-fg-neutral-inverted);
-  }
-
-  .seed-contextual-floating-button__text--variant_solid {
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
-    --track-color: var(--seed-color-palette-gray-700);
-    --range-color: var(--seed-color-fg-neutral-inverted);
-  }
-
-  .seed-contextual-floating-button__text--variant_solid {
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
-    --track-color: var(--seed-color-palette-gray-700);
-    --range-color: var(--seed-color-fg-neutral-inverted);
-    color: var(--seed-color-fg-neutral-inverted);
-  }
-
-  .seed-contextual-floating-button--variant_solid:active {
-    background: var(--seed-color-bg-neutral-inverted-pressed);
-  }
-
-  .seed-contextual-floating-button--variant_solid.seed-contextual-floating-button--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-contextual-floating-button__text--variant_solid.seed-contextual-floating-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-contextual-floating-button__text--variant_solid.seed-contextual-floating-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-contextual-floating-button--variant_solid.seed-contextual-floating-button--loading_true {
-    background: var(--seed-color-bg-neutral-inverted-pressed);
-  }
-
-  .seed-contextual-floating-button--variant_layer {
-    background: var(--seed-color-bg-layer-floating);
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-  }
-
-  .seed-contextual-floating-button__text--variant_layer {
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-  }
-
-  .seed-contextual-floating-button__text--variant_layer {
-    --seed-icon-color: var(--seed-color-fg-neutral);
-    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
-    --track-color: var(--seed-color-palette-gray-500);
-    --range-color: var(--seed-color-fg-neutral);
-    color: var(--seed-color-fg-neutral);
-  }
-
-  .seed-contextual-floating-button--variant_layer:active {
-    background: var(--seed-color-bg-layer-floating-pressed);
-  }
-
-  .seed-contextual-floating-button--variant_layer.seed-contextual-floating-button--disabled_true {
-    background: var(--seed-color-bg-disabled);
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-contextual-floating-button__text--variant_layer.seed-contextual-floating-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-contextual-floating-button__text--variant_layer.seed-contextual-floating-button__text--disabled_true {
-    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
-    --seed-icon-color: var(--seed-color-fg-disabled);
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-contextual-floating-button--variant_layer.seed-contextual-floating-button--loading_true {
-    background: var(--seed-color-bg-layer-floating-pressed);
-  }
-
-  .seed-contextual-floating-button--layout_withText {
-    min-height: 36px;
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    gap: var(--seed-dimension-x1);
-    --seed-prefix-icon-size: 16px;
-  }
-
-  .seed-contextual-floating-button__text--layout_withText {
-    --seed-prefix-icon-size: 16px;
-  }
-
-  .seed-contextual-floating-button__text--layout_withText {
-    --seed-prefix-icon-size: 16px;
-  }
-
-  .seed-contextual-floating-button--layout_iconOnly {
-    --seed-icon-size: 22px;
-    width: 44px;
-    height: 44px;
-  }
-
-  .seed-contextual-floating-button__text--layout_iconOnly {
-    --seed-icon-size: 22px;
-  }
-
-  .seed-contextual-floating-button__text--layout_iconOnly {
-    --seed-icon-size: 22px;
-  }
-}

package/recipes/contextual-floating-button.layered.mjs

@@ -1,54 +0,0 @@
-import './contextual-floating-button.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const contextualFloatingButtonSlotNames = [
-  [
-    "root",
-    "seed-contextual-floating-button"
-  ],
-  [
-    "text",
-    "seed-contextual-floating-button__text"
-  ]
-];
-
-const defaultVariant = {
-  "variant": "solid",
-  "layout": "withText"
-};
-
-const compoundVariants = [];
-
-export const contextualFloatingButtonVariantMap = {
-  "variant": [
-    "solid",
-    "layer"
-  ],
-  "layout": [
-    "withText",
-    "iconOnly"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const contextualFloatingButtonVariantKeys = Object.keys(contextualFloatingButtonVariantMap);
-
-export function contextualFloatingButton(props) {
-  return Object.fromEntries(
-    contextualFloatingButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(contextualFloatingButton, { splitVariantProps: (props) => splitVariantProps(props, contextualFloatingButtonVariantMap) });
-
-// @recipe(seed): contextual-floating-button