@seed-design/lynx-css 0.14.2 → 1.0.1

package/recipes/{input-button.css → field-button.css}

@@ -1,4 +1,4 @@
-.seed-input-button__root {
+.seed-field-button__root {
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -6,7 +6,7 @@
     position: relative;
     overflow: hidden
 }
-.seed-input-button__content {
+.seed-field-button__content {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -14,7 +14,7 @@
     height: 100%;
     pointer-events: none
 }
-.seed-input-button__button {
+.seed-field-button__button {
     position: absolute;
     top: 0;
     right: 0;
@@ -23,7 +23,7 @@
     background-color: var(--seed-color-bg-transparent);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
-.seed-input-button__baseStroke {
+.seed-field-button__baseStroke {
     position: absolute;
     top: 0;
     right: 0;
@@ -34,7 +34,7 @@
     border-color: var(--seed-color-stroke-neutral-weak);
     pointer-events: none
 }
-.seed-input-button__stroke {
+.seed-field-button__stroke {
     position: absolute;
     top: 0;
     right: 0;
@@ -46,7 +46,7 @@
     transition: border-color 0.1s var(--seed-timing-function-easing);
     pointer-events: none
 }
-.seed-input-button__value {
+.seed-field-button__value {
     flex-grow: 1;
     min-width: 0;
     color: var(--seed-color-fg-neutral);
@@ -56,7 +56,7 @@
     white-space: nowrap;
     pointer-events: none
 }
-.seed-input-button__placeholder {
+.seed-field-button__placeholder {
     flex-grow: 1;
     min-width: 0;
     color: var(--seed-color-fg-placeholder);
@@ -66,163 +66,163 @@
     white-space: nowrap;
     pointer-events: none
 }
-.seed-input-button__prefixText {
+.seed-field-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 {
+.seed-field-button__prefixIcon {
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-muted);
     pointer-events: none
 }
-.seed-input-button__suffixText {
+.seed-field-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 {
+.seed-field-button__suffixIcon {
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-muted);
     pointer-events: none
 }
-.seed-input-button__clearButton {
+.seed-field-button__clearButton {
     pointer-events: auto;
     flex-shrink: 0;
     color: var(--seed-color-fg-neutral-subtle)
 }
-.seed-input-button__root--size_large {
+.seed-field-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__content--size_large {
+.seed-field-button__content--size_large {
     gap: var(--seed-dimension-x2_5)
 }
-.seed-input-button__button--size_large {
+.seed-field-button__button--size_large {
     border-radius: var(--seed-radius-r3)
 }
-.seed-input-button__baseStroke--size_large {
+.seed-field-button__baseStroke--size_large {
     border-radius: var(--seed-radius-r3)
 }
-.seed-input-button__stroke--size_large {
+.seed-field-button__stroke--size_large {
     border-radius: var(--seed-radius-r3)
 }
-.seed-input-button__value--size_large {
+.seed-field-button__value--size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5)
 }
-.seed-input-button__placeholder--size_large {
+.seed-field-button__placeholder--size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5)
 }
-.seed-input-button__prefixText--size_large {
+.seed-field-button__prefixText--size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5)
 }
-.seed-input-button__prefixIcon--size_large {
+.seed-field-button__prefixIcon--size_large {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5)
 }
-.seed-input-button__suffixText--size_large {
+.seed-field-button__suffixText--size_large {
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5)
 }
-.seed-input-button__suffixIcon--size_large {
+.seed-field-button__suffixIcon--size_large {
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5)
 }
-.seed-input-button__clearButton--size_large {
+.seed-field-button__clearButton--size_large {
     width: 22px;
     height: 22px
 }
-.seed-input-button__root--size_medium {
+.seed-field-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__content--size_medium {
+.seed-field-button__content--size_medium {
     gap: var(--seed-dimension-x2)
 }
-.seed-input-button__button--size_medium {
+.seed-field-button__button--size_medium {
     border-radius: var(--seed-radius-r2)
 }
-.seed-input-button__baseStroke--size_medium {
+.seed-field-button__baseStroke--size_medium {
     border-radius: var(--seed-radius-r2)
 }
-.seed-input-button__stroke--size_medium {
+.seed-field-button__stroke--size_medium {
     border-radius: var(--seed-radius-r2)
 }
-.seed-input-button__value--size_medium {
+.seed-field-button__value--size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4)
 }
-.seed-input-button__placeholder--size_medium {
+.seed-field-button__placeholder--size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4)
 }
-.seed-input-button__prefixText--size_medium {
+.seed-field-button__prefixText--size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4)
 }
-.seed-input-button__prefixIcon--size_medium {
+.seed-field-button__prefixIcon--size_medium {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4)
 }
-.seed-input-button__suffixText--size_medium {
+.seed-field-button__suffixText--size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4)
 }
-.seed-input-button__suffixIcon--size_medium {
+.seed-field-button__suffixIcon--size_medium {
     width: var(--seed-dimension-x4);
     height: var(--seed-dimension-x4)
 }
-.seed-input-button__clearButton--size_medium {
+.seed-field-button__clearButton--size_medium {
     width: var(--seed-dimension-x4_5);
     height: var(--seed-dimension-x4_5)
 }
-.seed-input-button__button--pressed_true {
+.seed-field-button__button--pressed_true {
     background-color: var(--seed-color-bg-transparent-pressed)
 }
-.seed-input-button__stroke--invalid_true {
+.seed-field-button__stroke--invalid_true {
     border-color: var(--seed-color-stroke-critical-solid)
 }
-.seed-input-button__button--disabled_true {
+.seed-field-button__button--disabled_true {
     background-color: var(--seed-color-bg-disabled)
 }
-.seed-input-button__value--disabled_true {
+.seed-field-button__value--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-input-button__placeholder--disabled_true {
+.seed-field-button__placeholder--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-input-button__prefixText--disabled_true {
+.seed-field-button__prefixText--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-input-button__prefixIcon--disabled_true {
+.seed-field-button__prefixIcon--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-input-button__suffixText--disabled_true {
+.seed-field-button__suffixText--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-input-button__suffixIcon--disabled_true {
+.seed-field-button__suffixIcon--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-input-button__button--readOnly_true {
+.seed-field-button__button--readOnly_true {
     background-color: var(--seed-color-bg-disabled)
 }
-.seed-input-button__value--readOnly_true {
+.seed-field-button__value--readOnly_true {
     color: var(--seed-color-fg-neutral)
 }
-.seed-input-button__placeholder--readOnly_true {
+.seed-field-button__placeholder--readOnly_true {
     color: var(--seed-color-fg-placeholder)
 }
-.seed-input-button__button--disabled_false-readOnly_false:active {
+.seed-field-button__button--disabled_false-readOnly_false:active {
     background-color: var(--seed-color-bg-transparent-pressed)
 }

package/recipes/field-button.d.ts

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

package/recipes/{input-button.mjs → field-button.mjs}

@@ -1,54 +1,54 @@
-import './input-button.css';
+import './field-button.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const inputButtonSlotNames = [
+const fieldButtonSlotNames = [
   [
     "root",
-    "seed-input-button__root"
+    "seed-field-button__root"
   ],
   [
     "button",
-    "seed-input-button__button"
+    "seed-field-button__button"
   ],
   [
     "content",
-    "seed-input-button__content"
+    "seed-field-button__content"
   ],
   [
     "baseStroke",
-    "seed-input-button__baseStroke"
+    "seed-field-button__baseStroke"
   ],
   [
     "stroke",
-    "seed-input-button__stroke"
+    "seed-field-button__stroke"
   ],
   [
     "value",
-    "seed-input-button__value"
+    "seed-field-button__value"
   ],
   [
     "placeholder",
-    "seed-input-button__placeholder"
+    "seed-field-button__placeholder"
   ],
   [
     "prefixText",
-    "seed-input-button__prefixText"
+    "seed-field-button__prefixText"
   ],
   [
     "prefixIcon",
-    "seed-input-button__prefixIcon"
+    "seed-field-button__prefixIcon"
   ],
   [
     "suffixText",
-    "seed-input-button__suffixText"
+    "seed-field-button__suffixText"
   ],
   [
     "suffixIcon",
-    "seed-input-button__suffixIcon"
+    "seed-field-button__suffixIcon"
   ],
   [
     "clearButton",
-    "seed-input-button__clearButton"
+    "seed-field-button__clearButton"
   ]
 ];
 
@@ -67,7 +67,7 @@ const compoundVariants = [
   }
 ];
 
-export const inputButtonVariantMap = {
+export const fieldButtonVariantMap = {
   "size": [
     "large",
     "medium"
@@ -90,11 +90,11 @@ export const inputButtonVariantMap = {
   ]
 };
 
-export const inputButtonVariantKeys = Object.keys(inputButtonVariantMap);
+export const fieldButtonVariantKeys = Object.keys(fieldButtonVariantMap);
 
-export function inputButton(props) {
+export function fieldButton(props) {
   return Object.fromEntries(
-    inputButtonSlotNames.map(([slot, className]) => {
+    fieldButtonSlotNames.map(([slot, className]) => {
       return [
         slot,
         createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
@@ -103,6 +103,6 @@ export function inputButton(props) {
   );
 }
 
-Object.assign(inputButton, { splitVariantProps: (props) => splitVariantProps(props, inputButtonVariantMap) });
+Object.assign(fieldButton, { splitVariantProps: (props) => splitVariantProps(props, fieldButtonVariantMap) });
 
-// @recipe(seed): input-button
+// @recipe(seed): field-button

package/recipes/floating-action-button.css

@@ -3,14 +3,15 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     flex-shrink: 0;
     max-width: 100%;
     overflow: hidden;
+    gap: var(--seed-dimension-x1);
     background-color: var(--seed-color-bg-brand-solid);
     border-radius: var(--seed-radius-full);
     box-shadow: var(--seed-shadow-s3);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding-left var(--seed-duration-d4) var(--seed-timing-function-easing), padding-right var(--seed-duration-d4) var(--seed-timing-function-easing), gap var(--seed-duration-d4) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding-left var(--seed-duration-d4) var(--seed-timing-function-easing), padding-right var(--seed-duration-d4) var(--seed-timing-function-easing)
 }
 .seed-floating-action-button__icon {
     flex-shrink: 0;
@@ -20,17 +21,18 @@
 .seed-floating-action-button__label {
     width: max-content;
     flex-shrink: 0;
+    white-space: nowrap;
     color: var(--seed-color-fg-on-brand-solid);
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-bold)
+    font-weight: var(--seed-font-weight-bold);
+    transition: opacity var(--seed-duration-d4) var(--seed-timing-function-easing)
 }
 .seed-floating-action-button__root--extended_true {
     width: fit-content;
     height: 48px;
     padding-left: var(--seed-dimension-x4_5);
-    padding-right: var(--seed-dimension-x4_5);
-    gap: var(--seed-dimension-x1)
+    padding-right: var(--seed-dimension-x4_5)
 }
 .seed-floating-action-button__icon--extended_true {
     width: var(--seed-dimension-x4);
@@ -39,14 +41,16 @@
 .seed-floating-action-button__root--extended_false {
     width: 56px;
     height: 56px;
-    padding-left: 0;
-    padding-right: 0;
-    gap: 0
+    padding-left: calc((56px - var(--seed-dimension-x6)) / 2);
+    padding-right: 0
 }
 .seed-floating-action-button__icon--extended_false {
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6)
 }
+.seed-floating-action-button__label--extended_false {
+    opacity: 0
+}
 .seed-floating-action-button__root--pressed_true {
     background-color: var(--seed-color-bg-brand-solid-pressed)
 }
@@ -56,6 +60,9 @@
 .seed-floating-action-button__icon--transitionEnabled_false {
     transition-duration: 0s
 }
+.seed-floating-action-button__label--transitionEnabled_false {
+    transition-duration: 0s
+}
 .seed-floating-action-button__root--extended_true-transitionEnabled_true {
     width: calc(var(--fab-label-width) + var(--seed-dimension-x4) + var(--seed-dimension-x1) + 2 * var(--seed-dimension-x4_5))
 }

package/recipes/image-frame-icon.css

@@ -0,0 +1,8 @@
+.seed-image-frame-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--seed-color-palette-static-white);
+    width: 24px;
+    height: 24px
+}

package/recipes/image-frame-icon.d.ts

@@ -0,0 +1,19 @@
+declare interface ImageFrameIconVariant {
+  
+}
+
+declare type ImageFrameIconVariantMap = {
+  [key in keyof ImageFrameIconVariant]: Array<ImageFrameIconVariant[key]>;
+};
+
+export declare type ImageFrameIconVariantProps = Partial<ImageFrameIconVariant>;
+
+export declare const imageFrameIconVariantMap: ImageFrameIconVariantMap;
+
+export declare const imageFrameIcon: ((
+  props?: ImageFrameIconVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ImageFrameIconVariantProps>(
+    props: T,
+  ) => [ImageFrameIconVariantProps, Omit<T, keyof ImageFrameIconVariantProps>];
+}

package/recipes/image-frame-icon.mjs

@@ -0,0 +1,22 @@
+import './image-frame-icon.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const imageFrameIconVariantMap = {};
+
+export const imageFrameIconVariantKeys = Object.keys(imageFrameIconVariantMap);
+
+export function imageFrameIcon(props) {
+  return createClassName(
+    "seed-image-frame-icon",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(imageFrameIcon, { splitVariantProps: (props) => splitVariantProps(props, imageFrameIconVariantMap) });
+
+// @recipe(seed): image-frame-icon

package/recipes/image-frame-indicator.css

@@ -0,0 +1,17 @@
+.seed-image-frame-indicator__root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--seed-color-palette-static-black-alpha-800);
+    border-radius: var(--seed-radius-full);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    padding-top: var(--seed-dimension-x0_5);
+    padding-bottom: var(--seed-dimension-x0_5)
+}
+.seed-image-frame-indicator__label {
+    color: var(--seed-color-palette-static-white);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-medium)
+}

package/recipes/image-frame-indicator.d.ts

@@ -0,0 +1,21 @@
+declare interface ImageFrameIndicatorVariant {
+  
+}
+
+declare type ImageFrameIndicatorVariantMap = {
+  [key in keyof ImageFrameIndicatorVariant]: Array<ImageFrameIndicatorVariant[key]>;
+};
+
+export declare type ImageFrameIndicatorVariantProps = Partial<ImageFrameIndicatorVariant>;
+
+export declare type ImageFrameIndicatorSlotName = "root" | "label";
+
+export declare const imageFrameIndicatorVariantMap: ImageFrameIndicatorVariantMap;
+
+export declare const imageFrameIndicator: ((
+  props?: ImageFrameIndicatorVariantProps,
+) => Record<ImageFrameIndicatorSlotName, string>) & {
+  splitVariantProps: <T extends ImageFrameIndicatorVariantProps>(
+    props: T,
+  ) => [ImageFrameIndicatorVariantProps, Omit<T, keyof ImageFrameIndicatorVariantProps>];
+}

package/recipes/image-frame-indicator.mjs

@@ -0,0 +1,36 @@
+import './image-frame-indicator.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const imageFrameIndicatorSlotNames = [
+  [
+    "root",
+    "seed-image-frame-indicator__root"
+  ],
+  [
+    "label",
+    "seed-image-frame-indicator__label"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const imageFrameIndicatorVariantMap = {};
+
+export const imageFrameIndicatorVariantKeys = Object.keys(imageFrameIndicatorVariantMap);
+
+export function imageFrameIndicator(props) {
+  return Object.fromEntries(
+    imageFrameIndicatorSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(imageFrameIndicator, { splitVariantProps: (props) => splitVariantProps(props, imageFrameIndicatorVariantMap) });
+
+// @recipe(seed): image-frame-indicator

package/recipes/image-frame-reaction-button.css

@@ -0,0 +1,20 @@
+.seed-image-frame-reaction-button__root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    background-color: transparent
+}
+.seed-image-frame-reaction-button__fillIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none
+}
+.seed-image-frame-reaction-button__lineIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none
+}

package/recipes/image-frame-reaction-button.d.ts

@@ -0,0 +1,21 @@
+declare interface ImageFrameReactionButtonVariant {
+  
+}
+
+declare type ImageFrameReactionButtonVariantMap = {
+  [key in keyof ImageFrameReactionButtonVariant]: Array<ImageFrameReactionButtonVariant[key]>;
+};
+
+export declare type ImageFrameReactionButtonVariantProps = Partial<ImageFrameReactionButtonVariant>;
+
+export declare type ImageFrameReactionButtonSlotName = "root" | "fillIcon" | "lineIcon";
+
+export declare const imageFrameReactionButtonVariantMap: ImageFrameReactionButtonVariantMap;
+
+export declare const imageFrameReactionButton: ((
+  props?: ImageFrameReactionButtonVariantProps,
+) => Record<ImageFrameReactionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ImageFrameReactionButtonVariantProps>(
+    props: T,
+  ) => [ImageFrameReactionButtonVariantProps, Omit<T, keyof ImageFrameReactionButtonVariantProps>];
+}