@seed-design/lynx-css 0.11.1 → 0.12.1

package/recipes/help-bubble.css

@@ -0,0 +1,112 @@
+.seed-help-bubble__positioner {
+    position: fixed
+}
+.seed-help-bubble__motion {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    padding: 8px;
+    margin: -8px;
+    overflow: visible;
+    opacity: 0;
+    transform: scale(1);
+    transition-property: opacity, transform;
+    transition-duration: var(--seed-duration-d4);
+    transition-timing-function: var(--seed-timing-function-easing)
+}
+.seed-help-bubble__content {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    overflow: visible;
+    background-color: var(--seed-color-bg-neutral-inverted);
+    padding-top: var(--seed-dimension-x2_5);
+    padding-right: var(--seed-dimension-x3);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x3);
+    border-radius: var(--seed-radius-r3);
+    max-width: 280px
+}
+.seed-help-bubble__arrow {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    overflow: visible;
+    transform: rotate(0deg)
+}
+.seed-help-bubble__arrowTip {
+    width: 12px;
+    height: calc(8px + 1px);
+    background-color: var(--seed-color-bg-neutral-inverted);
+    clip-path: path("M0 0 H12 V1 L8 7 Q6 9 4 7 L0 1 Z");
+    transform: translateY(-1px)
+}
+.seed-help-bubble__body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: visible;
+    gap: var(--seed-dimension-x0_5)
+}
+.seed-help-bubble__title {
+    color: var(--seed-color-fg-neutral-inverted);
+    font-size: var(--seed-font-size-t3);
+    font-weight: var(--seed-font-weight-bold);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-help-bubble__description {
+    color: var(--seed-color-fg-neutral-inverted);
+    font-size: var(--seed-font-size-t3);
+    font-weight: var(--seed-font-weight-regular);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-help-bubble__closeButton {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding-top: calc((38px - var(--seed-dimension-x3_5)) / 2);
+    padding-right: calc((38px - var(--seed-dimension-x3_5)) / 2);
+    padding-bottom: calc((38px - var(--seed-dimension-x3_5)) / 2);
+    padding-left: calc((38px - var(--seed-dimension-x3_5)) / 2);
+    margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
+    margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
+    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
+    border-radius: var(--seed-radius-r3);
+    color: var(--seed-color-fg-neutral-inverted);
+    transform: scale(1);
+    transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-help-bubble__motion--positioned_true {
+    width: calc(100% + 16px)
+}
+.seed-help-bubble__arrow--side_top {
+    transform: rotate(0deg)
+}
+.seed-help-bubble__arrow--side_right {
+    transform: rotate(90deg)
+}
+.seed-help-bubble__arrow--side_bottom {
+    transform: rotate(180deg)
+}
+.seed-help-bubble__arrow--side_left {
+    transform: rotate(270deg)
+}
+.seed-help-bubble__closeButton--pressed_true {
+    transform: scale(var(--seed-scale-s97))
+}
+.seed-help-bubble__motion--positioned_false {
+    opacity: 0;
+    transform: scale(0.9);
+    transition-duration: 0s
+}
+.seed-help-bubble__motion--open_true-positioned_true {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: var(--seed-duration-d4);
+    transition-timing-function: var(--seed-timing-function-enter)
+}

package/recipes/help-bubble.d.ts

@@ -0,0 +1,36 @@
+declare interface HelpBubbleVariant {
+  /**
+  * @default false
+  */
+  open: boolean;
+/**
+  * @default false
+  */
+  positioned: boolean;
+/**
+  * @default "top"
+  */
+  side: "top" | "right" | "bottom" | "left";
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type HelpBubbleVariantMap = {
+  [key in keyof HelpBubbleVariant]: Array<HelpBubbleVariant[key]>;
+};
+
+export declare type HelpBubbleVariantProps = Partial<HelpBubbleVariant>;
+
+export declare type HelpBubbleSlotName = "positioner" | "motion" | "content" | "arrow" | "arrowTip" | "body" | "title" | "description" | "closeButton";
+
+export declare const helpBubbleVariantMap: HelpBubbleVariantMap;
+
+export declare const helpBubble: ((
+  props?: HelpBubbleVariantProps,
+) => Record<HelpBubbleSlotName, string>) & {
+  splitVariantProps: <T extends HelpBubbleVariantProps>(
+    props: T,
+  ) => [HelpBubbleVariantProps, Omit<T, keyof HelpBubbleVariantProps>];
+}

package/recipes/help-bubble.mjs

@@ -0,0 +1,96 @@
+import './help-bubble.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const helpBubbleSlotNames = [
+  [
+    "positioner",
+    "seed-help-bubble__positioner"
+  ],
+  [
+    "motion",
+    "seed-help-bubble__motion"
+  ],
+  [
+    "content",
+    "seed-help-bubble__content"
+  ],
+  [
+    "arrow",
+    "seed-help-bubble__arrow"
+  ],
+  [
+    "arrowTip",
+    "seed-help-bubble__arrowTip"
+  ],
+  [
+    "body",
+    "seed-help-bubble__body"
+  ],
+  [
+    "title",
+    "seed-help-bubble__title"
+  ],
+  [
+    "description",
+    "seed-help-bubble__description"
+  ],
+  [
+    "closeButton",
+    "seed-help-bubble__closeButton"
+  ]
+];
+
+const defaultVariant = {
+  "open": false,
+  "positioned": false,
+  "side": "top",
+  "pressed": false
+};
+
+const compoundVariants = [
+  {
+    "positioned": false
+  },
+  {
+    "open": true,
+    "positioned": true
+  }
+];
+
+export const helpBubbleVariantMap = {
+  "open": [
+    true,
+    false
+  ],
+  "positioned": [
+    true,
+    false
+  ],
+  "side": [
+    "top",
+    "right",
+    "bottom",
+    "left"
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const helpBubbleVariantKeys = Object.keys(helpBubbleVariantMap);
+
+export function helpBubble(props) {
+  return Object.fromEntries(
+    helpBubbleSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(helpBubble, { splitVariantProps: (props) => splitVariantProps(props, helpBubbleVariantMap) });
+
+// @recipe(seed): help-bubble

package/recipes/identity-placeholder.css

@@ -0,0 +1,11 @@
+.seed-identity-placeholder__root {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: var(--seed-color-palette-gray-500)
+}
+.seed-identity-placeholder__image {
+    display: block;
+    width: 100%;
+    height: 100%
+}

package/recipes/identity-placeholder.d.ts

@@ -0,0 +1,24 @@
+declare interface IdentityPlaceholderVariant {
+  /**
+  * @default "person"
+  */
+  identity: "person" | "business";
+}
+
+declare type IdentityPlaceholderVariantMap = {
+  [key in keyof IdentityPlaceholderVariant]: Array<IdentityPlaceholderVariant[key]>;
+};
+
+export declare type IdentityPlaceholderVariantProps = Partial<IdentityPlaceholderVariant>;
+
+export declare type IdentityPlaceholderSlotName = "root" | "image";
+
+export declare const identityPlaceholderVariantMap: IdentityPlaceholderVariantMap;
+
+export declare const identityPlaceholder: ((
+  props?: IdentityPlaceholderVariantProps,
+) => Record<IdentityPlaceholderSlotName, string>) & {
+  splitVariantProps: <T extends IdentityPlaceholderVariantProps>(
+    props: T,
+  ) => [IdentityPlaceholderVariantProps, Omit<T, keyof IdentityPlaceholderVariantProps>];
+}

package/recipes/identity-placeholder.mjs

@@ -0,0 +1,43 @@
+import './identity-placeholder.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const identityPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-identity-placeholder__root"
+  ],
+  [
+    "image",
+    "seed-identity-placeholder__image"
+  ]
+];
+
+const defaultVariant = {
+  "identity": "person"
+};
+
+const compoundVariants = [];
+
+export const identityPlaceholderVariantMap = {
+  "identity": [
+    "person",
+    "business"
+  ]
+};
+
+export const identityPlaceholderVariantKeys = Object.keys(identityPlaceholderVariantMap);
+
+export function identityPlaceholder(props) {
+  return Object.fromEntries(
+    identityPlaceholderSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(identityPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, identityPlaceholderVariantMap) });
+
+// @recipe(seed): identity-placeholder

package/recipes/input-button.css

@@ -6,13 +6,22 @@
     position: relative;
     overflow: hidden
 }
+.seed-input-button__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    pointer-events: none
+}
 .seed-input-button__button {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: var(--seed-color-bg-transparent)
+    background-color: var(--seed-color-bg-transparent);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-input-button__baseStroke {
     position: absolute;
@@ -80,6 +89,7 @@
     pointer-events: none
 }
 .seed-input-button__clearButton {
+    pointer-events: auto;
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-subtle)
 }
@@ -90,6 +100,9 @@
     padding-right: var(--seed-dimension-x4);
     border-radius: var(--seed-radius-r3)
 }
+.seed-input-button__content--size_large {
+    gap: var(--seed-dimension-x2_5)
+}
 .seed-input-button__button--size_large {
     border-radius: var(--seed-radius-r3)
 }
@@ -134,6 +147,9 @@
     padding-right: var(--seed-dimension-x3_5);
     border-radius: var(--seed-radius-r2)
 }
+.seed-input-button__content--size_medium {
+    gap: var(--seed-dimension-x2)
+}
 .seed-input-button__button--size_medium {
     border-radius: var(--seed-radius-r2)
 }
@@ -206,4 +222,7 @@
 }
 .seed-input-button__placeholder--readOnly_true {
     color: var(--seed-color-fg-placeholder)
+}
+.seed-input-button__button--disabled_false-readOnly_false:active {
+    background-color: var(--seed-color-bg-transparent-pressed)
 }

package/recipes/input-button.d.ts

@@ -27,7 +27,7 @@ declare type InputButtonVariantMap = {
 
 export declare type InputButtonVariantProps = Partial<InputButtonVariant>;
 
-export declare type InputButtonSlotName = "root" | "button" | "baseStroke" | "stroke" | "value" | "placeholder" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "clearButton";
+export declare type InputButtonSlotName = "root" | "button" | "content" | "baseStroke" | "stroke" | "value" | "placeholder" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "clearButton";
 
 export declare const inputButtonVariantMap: InputButtonVariantMap;
 

package/recipes/input-button.mjs

@@ -10,6 +10,10 @@ const inputButtonSlotNames = [
     "button",
     "seed-input-button__button"
   ],
+  [
+    "content",
+    "seed-input-button__content"
+  ],
   [
     "baseStroke",
     "seed-input-button__baseStroke"
@@ -56,7 +60,12 @@ const defaultVariant = {
   "readOnly": false
 };
 
-const compoundVariants = [];
+const compoundVariants = [
+  {
+    "disabled": false,
+    "readOnly": false
+  }
+];
 
 export const inputButtonVariantMap = {
   "size": [

package/recipes/list-item.css

@@ -28,19 +28,17 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: 0;
+    border-radius: var(--seed-dimension-x2_5);
     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)
+    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)
 }
 .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)
+    width: 100%
 }
 .seed-list-item__prefix {
     display: flex;
@@ -100,12 +98,8 @@
 .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)
 }
@@ -117,4 +111,9 @@
 }
 .seed-list-item__suffixIcon--disabled_true {
     color: var(--seed-color-fg-disabled)
+}
+.seed-list-item__root--interactive_true-disabled_false:active .seed-list-item__pressedOverlay {
+    right: var(--seed-dimension-x1_5);
+    left: var(--seed-dimension-x1_5);
+    opacity: 1
 }

package/recipes/list-item.d.ts

@@ -1,5 +1,9 @@
 declare interface ListItemVariant {
   /**
+  * @default false
+  */
+  interactive: boolean;
+/**
   * @default false
   */
   highlighted: boolean;

package/recipes/list-item.mjs

@@ -53,14 +53,24 @@ const listItemSlotNames = [
 ];
 
 const defaultVariant = {
+  "interactive": false,
   "highlighted": false,
   "pressed": false,
   "disabled": false
 };
 
-const compoundVariants = [];
+const compoundVariants = [
+  {
+    "interactive": true,
+    "disabled": false
+  }
+];
 
 export const listItemVariantMap = {
+  "interactive": [
+    true,
+    false
+  ],
   "highlighted": [
     true,
     false

package/recipes/menu-item.css

@@ -5,6 +5,13 @@
     align-items: center;
     flex-shrink: 0
 }
+.seed-menu-item__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    min-width: 0
+}
 .seed-menu-item__pressedOverlay {
     position: absolute;
     top: 0;
@@ -42,7 +49,9 @@
     padding-top: var(--seed-dimension-x3);
     padding-bottom: var(--seed-dimension-x3);
     padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4)
+}
+.seed-menu-item__scaleContent--size_medium {
     gap: var(--seed-dimension-x3)
 }
 .seed-menu-item__label--size_medium {
@@ -65,7 +74,9 @@
     padding-top: var(--seed-dimension-x2_5);
     padding-bottom: var(--seed-dimension-x2_5);
     padding-left: var(--seed-dimension-x4);
-    padding-right: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4)
+}
+.seed-menu-item__scaleContent--size_small {
     gap: var(--seed-dimension-x2)
 }
 .seed-menu-item__label--size_small {
@@ -96,6 +107,9 @@
 .seed-menu-item__suffixIcon--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
+.seed-menu-item__root--disabled_false:active .seed-menu-item__pressedOverlay {
+    opacity: 1
+}
 .seed-menu-item__label--tone_neutral-disabled_false {
     color: var(--seed-color-fg-neutral)
 }

package/recipes/menu-item.d.ts

@@ -23,7 +23,7 @@ declare type MenuItemVariantMap = {
 
 export declare type MenuItemVariantProps = Partial<MenuItemVariant>;
 
-export declare type MenuItemSlotName = "root" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "suffixIcon";
+export declare type MenuItemSlotName = "root" | "scaleContent" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "suffixIcon";
 
 export declare const menuItemVariantMap: MenuItemVariantMap;
 

package/recipes/menu-item.mjs

@@ -6,6 +6,10 @@ const menuItemSlotNames = [
     "root",
     "seed-menu-item__root"
   ],
+  [
+    "scaleContent",
+    "seed-menu-item__scaleContent"
+  ],
   [
     "pressedOverlay",
     "seed-menu-item__pressedOverlay"

package/recipes/menu-sheet-item.css

@@ -9,8 +9,19 @@
     padding-right: var(--seed-dimension-x4);
     padding-bottom: var(--seed-dimension-x3_5);
     padding-left: var(--seed-dimension-x4);
+    background-color: var(--seed-color-bg-neutral-weak);
+}
+.seed-menu-sheet-item__root:active {
+    background-color: var(--seed-color-bg-neutral-weak-pressed);
+}
+.seed-menu-sheet-item__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    min-width: 0;
     gap: var(--seed-dimension-x3_5);
-    background-color: var(--seed-color-bg-neutral-weak)
 }
 .seed-menu-sheet-item__content {
     display: flex;
@@ -18,52 +29,52 @@
     flex-grow: 1;
     flex-shrink: 1;
     min-width: 0;
-    gap: var(--seed-dimension-x0_5)
+    gap: var(--seed-dimension-x0_5);
 }
 .seed-menu-sheet-item__label {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-regular)
+    font-weight: var(--seed-font-weight-regular);
 }
 .seed-menu-sheet-item__description {
     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-medium)
+    font-weight: var(--seed-font-weight-medium);
 }
 .seed-menu-sheet-item__prefixIcon {
     flex-shrink: 0;
     width: 22px;
-    height: 22px
+    height: 22px;
 }
 .seed-menu-sheet-item__divider {
     width: 100%;
     height: 1px;
-    background-color: var(--seed-color-stroke-neutral-muted)
+    background-color: var(--seed-color-stroke-neutral-muted);
 }
 .seed-menu-sheet-item__prefixIcon--tone_neutral {
-    color: var(--seed-color-fg-neutral)
+    color: var(--seed-color-fg-neutral);
 }
 .seed-menu-sheet-item__label--tone_neutral {
-    color: var(--seed-color-fg-neutral)
+    color: var(--seed-color-fg-neutral);
 }
 .seed-menu-sheet-item__prefixIcon--tone_critical {
-    color: var(--seed-color-fg-critical)
+    color: var(--seed-color-fg-critical);
 }
 .seed-menu-sheet-item__label--tone_critical {
-    color: var(--seed-color-fg-critical)
+    color: var(--seed-color-fg-critical);
 }
 .seed-menu-sheet-item__content--labelAlign_left {
     align-items: flex-start;
-    text-align: start
+    text-align: start;
 }
-.seed-menu-sheet-item__root--labelAlign_center {
-    justify-content: center
+.seed-menu-sheet-item__scaleContent--labelAlign_center {
+    justify-content: center;
 }
 .seed-menu-sheet-item__content--labelAlign_center {
     align-items: center;
-    text-align: center
+    text-align: center;
 }
 .seed-menu-sheet-item__root--pressed_true {
-    background-color: var(--seed-color-bg-neutral-weak-pressed)
+    background-color: var(--seed-color-bg-neutral-weak-pressed);
 }

package/recipes/menu-sheet-item.d.ts

@@ -19,7 +19,7 @@ declare type MenuSheetItemVariantMap = {
 
 export declare type MenuSheetItemVariantProps = Partial<MenuSheetItemVariant>;
 
-export declare type MenuSheetItemSlotName = "root" | "content" | "label" | "description" | "prefixIcon" | "divider";
+export declare type MenuSheetItemSlotName = "root" | "scaleContent" | "content" | "label" | "description" | "prefixIcon" | "divider";
 
 export declare const menuSheetItemVariantMap: MenuSheetItemVariantMap;
 

package/recipes/menu-sheet-item.mjs

@@ -6,6 +6,10 @@ const menuSheetItemSlotNames = [
     "root",
     "seed-menu-sheet-item__root"
   ],
+  [
+    "scaleContent",
+    "seed-menu-sheet-item__scaleContent"
+  ],
   [
     "content",
     "seed-menu-sheet-item__content"