@seed-design/lynx-css 0.10.2 → 0.11.0

package/recipes/input-button.css

@@ -0,0 +1,209 @@
+.seed-input-button__root {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    position: relative;
+    overflow: hidden
+}
+.seed-input-button__button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--seed-color-bg-transparent)
+}
+.seed-input-button__baseStroke {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-weak);
+    pointer-events: none
+}
+.seed-input-button__stroke {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-style: solid;
+    border-width: 2px;
+    border-color: transparent;
+    transition: border-color 0.1s var(--seed-timing-function-easing);
+    pointer-events: none
+}
+.seed-input-button__value {
+    flex-grow: 1;
+    min-width: 0;
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-regular);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none
+}
+.seed-input-button__placeholder {
+    flex-grow: 1;
+    min-width: 0;
+    color: var(--seed-color-fg-placeholder);
+    font-weight: var(--seed-font-weight-regular);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none
+}
+.seed-input-button__prefixText {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle);
+    font-weight: var(--seed-font-weight-regular);
+    pointer-events: none
+}
+.seed-input-button__prefixIcon {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-muted);
+    pointer-events: none
+}
+.seed-input-button__suffixText {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle);
+    font-weight: var(--seed-font-weight-regular);
+    pointer-events: none
+}
+.seed-input-button__suffixIcon {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-muted);
+    pointer-events: none
+}
+.seed-input-button__clearButton {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-input-button__root--size_large {
+    height: var(--seed-dimension-x13);
+    gap: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    border-radius: var(--seed-radius-r3)
+}
+.seed-input-button__button--size_large {
+    border-radius: var(--seed-radius-r3)
+}
+.seed-input-button__baseStroke--size_large {
+    border-radius: var(--seed-radius-r3)
+}
+.seed-input-button__stroke--size_large {
+    border-radius: var(--seed-radius-r3)
+}
+.seed-input-button__value--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-input-button__placeholder--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-input-button__prefixText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-input-button__prefixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-input-button__suffixText--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-input-button__suffixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-input-button__clearButton--size_large {
+    width: 22px;
+    height: 22px
+}
+.seed-input-button__root--size_medium {
+    height: var(--seed-dimension-x10);
+    gap: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-input-button__button--size_medium {
+    border-radius: var(--seed-radius-r2)
+}
+.seed-input-button__baseStroke--size_medium {
+    border-radius: var(--seed-radius-r2)
+}
+.seed-input-button__stroke--size_medium {
+    border-radius: var(--seed-radius-r2)
+}
+.seed-input-button__value--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-input-button__placeholder--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-input-button__prefixText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-input-button__prefixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-input-button__suffixText--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-input-button__suffixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-input-button__clearButton--size_medium {
+    width: var(--seed-dimension-x4_5);
+    height: var(--seed-dimension-x4_5)
+}
+.seed-input-button__button--pressed_true {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-input-button__stroke--invalid_true {
+    border-color: var(--seed-color-stroke-critical-solid)
+}
+.seed-input-button__button--disabled_true {
+    background-color: var(--seed-color-bg-disabled)
+}
+.seed-input-button__value--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-input-button__placeholder--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-input-button__prefixText--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-input-button__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-input-button__suffixText--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-input-button__suffixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-input-button__button--readOnly_true {
+    background-color: var(--seed-color-bg-disabled)
+}
+.seed-input-button__value--readOnly_true {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-input-button__placeholder--readOnly_true {
+    color: var(--seed-color-fg-placeholder)
+}

package/recipes/input-button.d.ts

@@ -0,0 +1,40 @@
+declare interface InputButtonVariant {
+  /**
+  * @default "large"
+  */
+  size: "large" | "medium";
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  invalid: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  readOnly: boolean;
+}
+
+declare type InputButtonVariantMap = {
+  [key in keyof InputButtonVariant]: Array<InputButtonVariant[key]>;
+};
+
+export declare type InputButtonVariantProps = Partial<InputButtonVariant>;
+
+export declare type InputButtonSlotName = "root" | "button" | "baseStroke" | "stroke" | "value" | "placeholder" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "clearButton";
+
+export declare const inputButtonVariantMap: InputButtonVariantMap;
+
+export declare const inputButton: ((
+  props?: InputButtonVariantProps,
+) => Record<InputButtonSlotName, string>) & {
+  splitVariantProps: <T extends InputButtonVariantProps>(
+    props: T,
+  ) => [InputButtonVariantProps, Omit<T, keyof InputButtonVariantProps>];
+}

package/recipes/input-button.mjs

@@ -0,0 +1,99 @@
+import './input-button.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const inputButtonSlotNames = [
+  [
+    "root",
+    "seed-input-button__root"
+  ],
+  [
+    "button",
+    "seed-input-button__button"
+  ],
+  [
+    "baseStroke",
+    "seed-input-button__baseStroke"
+  ],
+  [
+    "stroke",
+    "seed-input-button__stroke"
+  ],
+  [
+    "value",
+    "seed-input-button__value"
+  ],
+  [
+    "placeholder",
+    "seed-input-button__placeholder"
+  ],
+  [
+    "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 = {
+  "size": "large",
+  "pressed": false,
+  "invalid": false,
+  "disabled": false,
+  "readOnly": false
+};
+
+const compoundVariants = [];
+
+export const inputButtonVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "invalid": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "readOnly": [
+    true,
+    false
+  ]
+};
+
+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/list-header.css

@@ -0,0 +1,22 @@
+.seed-list-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: var(--seed-dimension-x2_5);
+    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);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-list-header--variant_mediumWeak {
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-list-header--variant_boldSolid {
+    font-weight: var(--seed-font-weight-bold);
+    color: var(--seed-color-fg-neutral)
+}

package/recipes/list-header.d.ts

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

package/recipes/list-header.mjs

@@ -0,0 +1,29 @@
+import './list-header.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "variant": "mediumWeak"
+};
+
+const compoundVariants = [];
+
+export const listHeaderVariantMap = {
+  "variant": [
+    "mediumWeak",
+    "boldSolid"
+  ]
+};
+
+export const listHeaderVariantKeys = Object.keys(listHeaderVariantMap);
+
+export function listHeader(props) {
+  return createClassName(
+    "seed-list-header",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(listHeader, { splitVariantProps: (props) => splitVariantProps(props, listHeaderVariantMap) });
+
+// @recipe(seed): list-header

package/recipes/list-item.css

@@ -0,0 +1,120 @@
+.seed-list-item__interactionRoot {
+    display: flex;
+    width: 100%
+}
+.seed-list-item__root {
+    position: relative;
+    display: flex;
+    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-x3);
+    padding-bottom: var(--seed-dimension-x3)
+}
+.seed-list-item__highlightedOverlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 0;
+    background-color: var(--seed-color-bg-brand-weak);
+    opacity: 0;
+    transition: opacity var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+}
+.seed-list-item__pressedOverlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: 0;
+    background-color: var(--seed-color-bg-transparent-pressed);
+    opacity: 0;
+    transition: opacity var(--seed-duration-color-transition) var(--seed-timing-function-easing), left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing), border-radius var(--seed-duration-d3) var(--seed-timing-function-easing)
+}
+.seed-list-item__layout {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    transform: scale(1);
+    transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-list-item__prefix {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    padding-right: var(--seed-dimension-x3)
+}
+.seed-list-item__suffix {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--seed-dimension-x1);
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-list-item__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-grow: 1;
+    gap: var(--seed-dimension-x0_5);
+    padding-right: var(--seed-dimension-x2_5)
+}
+.seed-list-item__title {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral);
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-list-item__detail {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-list-item__prefixIcon {
+    width: 22px;
+    height: 22px;
+    color: var(--seed-color-fg-neutral)
+}
+.seed-list-item__suffixIcon {
+    width: 18px;
+    height: 18px;
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-list-item__highlightedOverlay--highlighted_true {
+    opacity: 1
+}
+.seed-list-item__pressedOverlay--highlighted_true {
+    background-color: var(--seed-color-bg-brand-weak-pressed)
+}
+.seed-list-item__pressedOverlay--pressed_true {
+    right: var(--seed-dimension-x1_5);
+    left: var(--seed-dimension-x1_5);
+    border-radius: var(--seed-dimension-x2_5);
+    opacity: 1
+}
+.seed-list-item__layout--pressed_true {
+    transform: scale(var(--seed-scale-s98))
+}
+.seed-list-item__title--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-list-item__detail--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-list-item__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-list-item__suffixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}

package/recipes/list-item.d.ts

@@ -0,0 +1,32 @@
+declare interface ListItemVariant {
+  /**
+  * @default false
+  */
+  highlighted: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type ListItemVariantMap = {
+  [key in keyof ListItemVariant]: Array<ListItemVariant[key]>;
+};
+
+export declare type ListItemVariantProps = Partial<ListItemVariant>;
+
+export declare type ListItemSlotName = "interactionRoot" | "root" | "highlightedOverlay" | "pressedOverlay" | "layout" | "content" | "title" | "detail" | "prefix" | "suffix" | "prefixIcon" | "suffixIcon";
+
+export declare const listItemVariantMap: ListItemVariantMap;
+
+export declare const listItem: ((
+  props?: ListItemVariantProps,
+) => Record<ListItemSlotName, string>) & {
+  splitVariantProps: <T extends ListItemVariantProps>(
+    props: T,
+  ) => [ListItemVariantProps, Omit<T, keyof ListItemVariantProps>];
+}

package/recipes/list-item.mjs

@@ -0,0 +1,93 @@
+import './list-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const listItemSlotNames = [
+  [
+    "interactionRoot",
+    "seed-list-item__interactionRoot"
+  ],
+  [
+    "root",
+    "seed-list-item__root"
+  ],
+  [
+    "highlightedOverlay",
+    "seed-list-item__highlightedOverlay"
+  ],
+  [
+    "pressedOverlay",
+    "seed-list-item__pressedOverlay"
+  ],
+  [
+    "layout",
+    "seed-list-item__layout"
+  ],
+  [
+    "content",
+    "seed-list-item__content"
+  ],
+  [
+    "title",
+    "seed-list-item__title"
+  ],
+  [
+    "detail",
+    "seed-list-item__detail"
+  ],
+  [
+    "prefix",
+    "seed-list-item__prefix"
+  ],
+  [
+    "suffix",
+    "seed-list-item__suffix"
+  ],
+  [
+    "prefixIcon",
+    "seed-list-item__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-list-item__suffixIcon"
+  ]
+];
+
+const defaultVariant = {
+  "highlighted": false,
+  "pressed": false,
+  "disabled": false
+};
+
+const compoundVariants = [];
+
+export const listItemVariantMap = {
+  "highlighted": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const listItemVariantKeys = Object.keys(listItemVariantMap);
+
+export function listItem(props) {
+  return Object.fromEntries(
+    listItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(listItem, { splitVariantProps: (props) => splitVariantProps(props, listItemVariantMap) });
+
+// @recipe(seed): list-item

package/recipes/list.css

@@ -0,0 +1,5 @@
+.seed-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%
+}

package/recipes/list.d.ts

@@ -0,0 +1,19 @@
+declare interface ListVariant {
+  
+}
+
+declare type ListVariantMap = {
+  [key in keyof ListVariant]: Array<ListVariant[key]>;
+};
+
+export declare type ListVariantProps = Partial<ListVariant>;
+
+export declare const listVariantMap: ListVariantMap;
+
+export declare const list: ((
+  props?: ListVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ListVariantProps>(
+    props: T,
+  ) => [ListVariantProps, Omit<T, keyof ListVariantProps>];
+}