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

package/recipes/input-button.layered.css

@@ -1,135 +0,0 @@
-@layer seed-components {
-  .seed-input-button__root {
-    width: 100%;
-    height: var(--seed-dimension-x13);
-    align-items: center;
-    gap: var(--seed-dimension-x2_5);
-    padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
-    display: flex;
-    position: relative;
-  }
-
-  .seed-input-button__button {
-    z-index: -1;
-    border-radius: var(--seed-radius-r3);
-    background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
-    border: none;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .seed-input-button__button:after {
-    border-radius: inherit;
-    transition: border-color .1s var(--seed-timing-function-easing);
-    pointer-events: none;
-    border: 2px solid #0000;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .seed-input-button__button.seed-input-button__button--disabled_true {
-    background-color: var(--seed-color-bg-disabled);
-  }
-
-  .seed-input-button__button:not([data-disabled]):not([data-readonly]):active {
-    background-color: var(--seed-color-bg-transparent-pressed);
-  }
-
-  .seed-input-button__button.seed-input-button__button--readonly_true:not(.seed-input-button__button--disabled_true) {
-    background-color: var(--seed-color-bg-disabled);
-  }
-
-  .seed-input-button__button.seed-input-button__button--invalid_true:after {
-    border-width: 2px;
-    border-color: var(--seed-color-stroke-critical-solid);
-  }
-
-  .seed-input-button__value {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral);
-    text-overflow: ellipsis;
-    pointer-events: none;
-    flex-grow: 1;
-    overflow: hidden;
-  }
-
-  .seed-input-button__value.seed-input-button__value--disabled_true {
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-input-button__value.seed-input-button__value--readonly_true:not(.seed-input-button__value--disabled_true) {
-    color: var(--seed-color-fg-neutral);
-  }
-
-  .seed-input-button__placeholder {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-placeholder);
-    text-overflow: ellipsis;
-    pointer-events: none;
-    flex-grow: 1;
-    overflow: hidden;
-  }
-
-  .seed-input-button__placeholder.seed-input-button__placeholder--disabled_true {
-    color: var(--seed-color-fg-disabled);
-  }
-
-  .seed-input-button__placeholder.seed-input-button__placeholder--readonly_true:not(.seed-input-button__placeholder--disabled_true) {
-    color: var(--seed-color-fg-placeholder);
-  }
-
-  .seed-input-button__prefixText {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-muted);
-    pointer-events: none;
-  }
-
-  .seed-input-button__prefixIcon {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-    color: var(--seed-color-fg-neutral-muted);
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-
-  .seed-input-button__suffixText {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-muted);
-    pointer-events: none;
-  }
-
-  .seed-input-button__suffixIcon {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-    color: var(--seed-color-fg-neutral-muted);
-    pointer-events: none;
-    flex-shrink: 0;
-  }
-
-  .seed-input-button__clearButton {
-    border-radius: var(--seed-radius-full);
-    --seed-icon-size: 22px;
-    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
-    background-color: #0000;
-    border: none;
-    padding: 0;
-  }
-}

package/recipes/input-button.layered.mjs

@@ -1,64 +0,0 @@
-import './input-button.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const inputButtonSlotNames = [
-  [
-    "root",
-    "seed-input-button__root"
-  ],
-  [
-    "value",
-    "seed-input-button__value"
-  ],
-  [
-    "placeholder",
-    "seed-input-button__placeholder"
-  ],
-  [
-    "button",
-    "seed-input-button__button"
-  ],
-  [
-    "prefixText",
-    "seed-input-button__prefixText"
-  ],
-  [
-    "prefixIcon",
-    "seed-input-button__prefixIcon"
-  ],
-  [
-    "suffixText",
-    "seed-input-button__suffixText"
-  ],
-  [
-    "suffixIcon",
-    "seed-input-button__suffixIcon"
-  ],
-  [
-    "clearButton",
-    "seed-input-button__clearButton"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const inputButtonVariantMap = {};
-
-export const inputButtonVariantKeys = Object.keys(inputButtonVariantMap);
-
-export function inputButton(props) {
-  return Object.fromEntries(
-    inputButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(inputButton, { splitVariantProps: (props) => splitVariantProps(props, inputButtonVariantMap) });
-
-// @recipe(seed): input-button

package/recipes/input-button.mjs

@@ -1,64 +0,0 @@
-import './input-button.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const inputButtonSlotNames = [
-  [
-    "root",
-    "seed-input-button__root"
-  ],
-  [
-    "value",
-    "seed-input-button__value"
-  ],
-  [
-    "placeholder",
-    "seed-input-button__placeholder"
-  ],
-  [
-    "button",
-    "seed-input-button__button"
-  ],
-  [
-    "prefixText",
-    "seed-input-button__prefixText"
-  ],
-  [
-    "prefixIcon",
-    "seed-input-button__prefixIcon"
-  ],
-  [
-    "suffixText",
-    "seed-input-button__suffixText"
-  ],
-  [
-    "suffixIcon",
-    "seed-input-button__suffixIcon"
-  ],
-  [
-    "clearButton",
-    "seed-input-button__clearButton"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const inputButtonVariantMap = {};
-
-export const inputButtonVariantKeys = Object.keys(inputButtonVariantMap);
-
-export function inputButton(props) {
-  return Object.fromEntries(
-    inputButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(inputButton, { splitVariantProps: (props) => splitVariantProps(props, inputButtonVariantMap) });
-
-// @recipe(seed): input-button

package/recipes/link-content.css

@@ -1,45 +0,0 @@
-.seed-link-content {
-    display: inline-flex;
-    align-items: center;
-    background-color: transparent;
-    border: none;
-    --seed-suffix-icon-color: var(--seed-box-color)
-}.seed-link-content__text {
-    --seed-suffix-icon-color: var(--seed-box-color)
-;
-    font-family: inherit;
-    text-align: center;
-    color: var(--seed-box-color)}
-.seed-link-content__text--weight_bold {
-    font-weight: var(--seed-font-weight-bold)
-}
-.seed-link-content__text--weight_regular {
-    font-weight: var(--seed-font-weight-regular)
-}
-.seed-link-content--size_t6 {
-    gap: var(--seed-dimension-x0_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x4)
-}
-.seed-link-content__text--size_t6 {
-    --seed-suffix-icon-size: var(--seed-dimension-x4)
-;
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6)}
-.seed-link-content--size_t5 {
-    gap: var(--seed-dimension-x0_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5)
-}
-.seed-link-content__text--size_t5 {
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5)
-;
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5)}
-.seed-link-content--size_t4 {
-    gap: var(--seed-dimension-x0_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3)
-}
-.seed-link-content__text--size_t4 {
-    --seed-suffix-icon-size: var(--seed-dimension-x3)
-;
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4)}

package/recipes/link-content.d.ts

@@ -1,29 +0,0 @@
-declare interface LinkContentVariant {
-  /**
-  * @default "regular"
-  */
-  weight: "bold" | "regular";
-/**
-  * @default "t4"
-  */
-  size: "t6" | "t5" | "t4";
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type LinkContentVariantMap = {
-  [key in keyof LinkContentVariant]: Array<LinkContentVariant[key]>;
-};
-
-export declare type LinkContentVariantProps = Partial<LinkContentVariant>;
-
-export declare type LinkContentSlotName = "root" | "text";
-
-export declare const linkContentVariantMap: LinkContentVariantMap;
-
-export declare const linkContent: ((
-  props?: LinkContentVariantProps,
-) => Record<LinkContentSlotName, string>) & {
-  splitVariantProps: <T extends LinkContentVariantProps>(
-    props: T,
-  ) => [LinkContentVariantProps, Omit<T, keyof LinkContentVariantProps>];
-}

package/recipes/link-content.layered.css

@@ -1,72 +0,0 @@
-@layer seed-components {
-  .seed-link-content {
-    --seed-suffix-icon-color: var(--seed-box-color);
-    background-color: #0000;
-    border: none;
-    align-items: center;
-    display: inline-flex;
-  }
-  .seed-link-content__text {
-    --seed-suffix-icon-color: var(--seed-box-color);
-  }
-
-  .seed-link-content__text {
-    --seed-suffix-icon-color: var(--seed-box-color);
-    text-align: center;
-    color: var(--seed-box-color);
-    font-family: inherit;
-  }
-
-  .seed-link-content__text--weight_bold {
-    font-weight: var(--seed-font-weight-bold);
-  }
-
-  .seed-link-content__text--weight_regular {
-    font-weight: var(--seed-font-weight-regular);
-  }
-
-  .seed-link-content--size_t6 {
-    gap: var(--seed-dimension-x0_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x4);
-  }
-
-  .seed-link-content__text--size_t6 {
-    --seed-suffix-icon-size: var(--seed-dimension-x4);
-  }
-
-  .seed-link-content__text--size_t6 {
-    --seed-suffix-icon-size: var(--seed-dimension-x4);
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-  }
-
-  .seed-link-content--size_t5 {
-    gap: var(--seed-dimension-x0_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-  }
-
-  .seed-link-content__text--size_t5 {
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-  }
-
-  .seed-link-content__text--size_t5 {
-    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-  }
-
-  .seed-link-content--size_t4 {
-    gap: var(--seed-dimension-x0_5);
-    --seed-suffix-icon-size: var(--seed-dimension-x3);
-  }
-
-  .seed-link-content__text--size_t4 {
-    --seed-suffix-icon-size: var(--seed-dimension-x3);
-  }
-
-  .seed-link-content__text--size_t4 {
-    --seed-suffix-icon-size: var(--seed-dimension-x3);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-  }
-}

package/recipes/link-content.layered.mjs

@@ -1,55 +0,0 @@
-import './link-content.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const linkContentSlotNames = [
-  [
-    "root",
-    "seed-link-content"
-  ],
-  [
-    "text",
-    "seed-link-content__text"
-  ]
-];
-
-const defaultVariant = {
-  "size": "t4",
-  "weight": "regular"
-};
-
-const compoundVariants = [];
-
-export const linkContentVariantMap = {
-  "weight": [
-    "bold",
-    "regular"
-  ],
-  "size": [
-    "t6",
-    "t5",
-    "t4"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const linkContentVariantKeys = Object.keys(linkContentVariantMap);
-
-export function linkContent(props) {
-  return Object.fromEntries(
-    linkContentSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(linkContent, { splitVariantProps: (props) => splitVariantProps(props, linkContentVariantMap) });
-
-// @recipe(seed): link-content

package/recipes/link-content.mjs

@@ -1,55 +0,0 @@
-import './link-content.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const linkContentSlotNames = [
-  [
-    "root",
-    "seed-link-content"
-  ],
-  [
-    "text",
-    "seed-link-content__text"
-  ]
-];
-
-const defaultVariant = {
-  "size": "t4",
-  "weight": "regular"
-};
-
-const compoundVariants = [];
-
-export const linkContentVariantMap = {
-  "weight": [
-    "bold",
-    "regular"
-  ],
-  "size": [
-    "t6",
-    "t5",
-    "t4"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const linkContentVariantKeys = Object.keys(linkContentVariantMap);
-
-export function linkContent(props) {
-  return Object.fromEntries(
-    linkContentSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(linkContent, { splitVariantProps: (props) => splitVariantProps(props, linkContentVariantMap) });
-
-// @recipe(seed): link-content

package/recipes/list-header.css

@@ -1,22 +0,0 @@
-.seed-list-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    gap: var(--seed-dimension-x2_5);
-    justify-content: space-between;
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2)
-}.seed-list-header__text {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4)
-}
-.seed-list-header__text--variant_mediumWeak {
-    font-weight: var(--seed-font-weight-medium);
-    color: var(--seed-color-fg-neutral-subtle)
-}
-.seed-list-header__text--variant_boldSolid {
-    font-weight: var(--seed-font-weight-bold);
-    color: var(--seed-color-fg-neutral)
-}

package/recipes/list-header.d.ts

@@ -1,25 +0,0 @@
-declare interface ListHeaderVariant {
-  /**
-  * @default "mediumWeak"
-  */
-  variant: "mediumWeak" | "boldSolid";
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type ListHeaderVariantMap = {
-  [key in keyof ListHeaderVariant]: Array<ListHeaderVariant[key]>;
-};
-
-export declare type ListHeaderVariantProps = Partial<ListHeaderVariant>;
-
-export declare type ListHeaderSlotName = "root" | "text";
-
-export declare const listHeaderVariantMap: ListHeaderVariantMap;
-
-export declare const listHeader: ((
-  props?: ListHeaderVariantProps,
-) => Record<ListHeaderSlotName, string>) & {
-  splitVariantProps: <T extends ListHeaderVariantProps>(
-    props: T,
-  ) => [ListHeaderVariantProps, Omit<T, keyof ListHeaderVariantProps>];
-}

package/recipes/list-header.layered.css

@@ -1,28 +0,0 @@
-@layer seed-components {
-  .seed-list-header {
-    align-items: center;
-    gap: var(--seed-dimension-x2_5);
-    width: 100%;
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2);
-    justify-content: space-between;
-    display: flex;
-  }
-
-  .seed-list-header__text {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-  }
-
-  .seed-list-header__text--variant_mediumWeak {
-    font-weight: var(--seed-font-weight-medium);
-    color: var(--seed-color-fg-neutral-subtle);
-  }
-
-  .seed-list-header__text--variant_boldSolid {
-    font-weight: var(--seed-font-weight-bold);
-    color: var(--seed-color-fg-neutral);
-  }
-}

package/recipes/list-header.layered.mjs

@@ -1,49 +0,0 @@
-import './list-header.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const listHeaderSlotNames = [
-  [
-    "root",
-    "seed-list-header"
-  ],
-  [
-    "text",
-    "seed-list-header__text"
-  ]
-];
-
-const defaultVariant = {
-  "variant": "mediumWeak"
-};
-
-const compoundVariants = [];
-
-export const listHeaderVariantMap = {
-  "variant": [
-    "mediumWeak",
-    "boldSolid"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const listHeaderVariantKeys = Object.keys(listHeaderVariantMap);
-
-export function listHeader(props) {
-  return Object.fromEntries(
-    listHeaderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(listHeader, { splitVariantProps: (props) => splitVariantProps(props, listHeaderVariantMap) });
-
-// @recipe(seed): list-header

package/recipes/list-header.mjs

@@ -1,49 +0,0 @@
-import './list-header.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const listHeaderSlotNames = [
-  [
-    "root",
-    "seed-list-header"
-  ],
-  [
-    "text",
-    "seed-list-header__text"
-  ]
-];
-
-const defaultVariant = {
-  "variant": "mediumWeak"
-};
-
-const compoundVariants = [];
-
-export const listHeaderVariantMap = {
-  "variant": [
-    "mediumWeak",
-    "boldSolid"
-  ],
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const listHeaderVariantKeys = Object.keys(listHeaderVariantMap);
-
-export function listHeader(props) {
-  return Object.fromEntries(
-    listHeaderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(listHeader, { splitVariantProps: (props) => splitVariantProps(props, listHeaderVariantMap) });
-
-// @recipe(seed): list-header