@seed-design/lynx-css 0.14.1 → 1.0.0

package/recipes/checkmark.css

@@ -14,6 +14,15 @@
     opacity: 0;
     transition: opacity var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
+.seed-checkmark__selectedBackground {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    transition: opacity var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+}
 .seed-checkmark__icon {
     position: absolute
 }
@@ -38,6 +47,9 @@
 .seed-checkmark__background--size_medium {
     border-radius: var(--seed-radius-r1)
 }
+.seed-checkmark__selectedBackground--size_medium {
+    border-radius: var(--seed-radius-r1)
+}
 .seed-checkmark__root--size_large {
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6);
@@ -46,6 +58,9 @@
 .seed-checkmark__background--size_large {
     border-radius: var(--seed-radius-r1)
 }
+.seed-checkmark__selectedBackground--size_large {
+    border-radius: var(--seed-radius-r1)
+}
 .seed-checkmark__icon--variant_square-size_medium {
     width: 12px;
     height: 12px
@@ -114,16 +129,10 @@
 .seed-checkmark__icon--variant_square-indeterminate_true-disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-checkmark__background--variant_ghost-tone_brand-checked_true {
+.seed-checkmark__selectedBackground--variant_ghost-tone_brand {
     background-color: var(--seed-color-palette-carrot-200)
 }
-.seed-checkmark__background--variant_ghost-tone_neutral-checked_true {
-    background-color: var(--seed-color-palette-gray-200)
-}
-.seed-checkmark__background--variant_ghost-tone_brand-indeterminate_true {
-    background-color: var(--seed-color-palette-carrot-200)
-}
-.seed-checkmark__background--variant_ghost-tone_neutral-indeterminate_true {
+.seed-checkmark__selectedBackground--variant_ghost-tone_neutral {
     background-color: var(--seed-color-palette-gray-200)
 }
 .seed-checkmark__icon--variant_ghost-tone_brand-checked_true-disabled_false {
@@ -146,22 +155,4 @@
 }
 .seed-checkmark__icon--variant_ghost-indeterminate_true-disabled_true {
     color: var(--seed-color-fg-disabled)
-}
-.seed-checkmark__background--variant_ghost-pressed_true-disabled_false {
-    opacity: 1
-}
-.seed-checkmark__root--variant_square-pressed_true-checked_false-indeterminate_false-disabled_false {
-    background-color: var(--seed-color-bg-transparent-pressed)
-}
-.seed-checkmark__root--variant_square-tone_brand-pressed_true-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-brand-solid-pressed)
-}
-.seed-checkmark__root--variant_square-tone_neutral-pressed_true-checked_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-solid-pressed)
-}
-.seed-checkmark__root--variant_square-tone_brand-pressed_true-indeterminate_true-disabled_false {
-    background-color: var(--seed-color-bg-brand-solid-pressed)
-}
-.seed-checkmark__root--variant_square-tone_neutral-pressed_true-indeterminate_true-disabled_false {
-    background-color: var(--seed-color-bg-neutral-solid-pressed)
 }

package/recipes/checkmark.d.ts

@@ -23,10 +23,6 @@ declare interface CheckmarkVariant {
   * @default false
   */
   indeterminate: boolean;
-/**
-  * @default false
-  */
-  pressed: boolean;
 }
 
 declare type CheckmarkVariantMap = {
@@ -35,7 +31,7 @@ declare type CheckmarkVariantMap = {
 
 export declare type CheckmarkVariantProps = Partial<CheckmarkVariant>;
 
-export declare type CheckmarkSlotName = "root" | "background" | "icon";
+export declare type CheckmarkSlotName = "root" | "background" | "selectedBackground" | "icon";
 
 export declare const checkmarkVariantMap: CheckmarkVariantMap;
 

package/recipes/checkmark.mjs

@@ -10,6 +10,10 @@ const checkmarkSlotNames = [
     "background",
     "seed-checkmark__background"
   ],
+  [
+    "selectedBackground",
+    "seed-checkmark__selectedBackground"
+  ],
   [
     "icon",
     "seed-checkmark__icon"
@@ -22,8 +26,7 @@ const defaultVariant = {
   "size": "medium",
   "checked": false,
   "disabled": false,
-  "indeterminate": false,
-  "pressed": false
+  "indeterminate": false
 };
 
 const compoundVariants = [
@@ -98,23 +101,11 @@ const compoundVariants = [
   },
   {
     "variant": "ghost",
-    "tone": "brand",
-    "checked": true
-  },
-  {
-    "variant": "ghost",
-    "tone": "neutral",
-    "checked": true
-  },
-  {
-    "variant": "ghost",
-    "tone": "brand",
-    "indeterminate": true
+    "tone": "brand"
   },
   {
     "variant": "ghost",
-    "tone": "neutral",
-    "indeterminate": true
+    "tone": "neutral"
   },
   {
     "variant": "ghost",
@@ -153,46 +144,6 @@ const compoundVariants = [
     "variant": "ghost",
     "indeterminate": true,
     "disabled": true
-  },
-  {
-    "variant": "ghost",
-    "pressed": true,
-    "disabled": false
-  },
-  {
-    "variant": "square",
-    "pressed": true,
-    "checked": false,
-    "indeterminate": false,
-    "disabled": false
-  },
-  {
-    "variant": "square",
-    "tone": "brand",
-    "pressed": true,
-    "checked": true,
-    "disabled": false
-  },
-  {
-    "variant": "square",
-    "tone": "neutral",
-    "pressed": true,
-    "checked": true,
-    "disabled": false
-  },
-  {
-    "variant": "square",
-    "tone": "brand",
-    "pressed": true,
-    "indeterminate": true,
-    "disabled": false
-  },
-  {
-    "variant": "square",
-    "tone": "neutral",
-    "pressed": true,
-    "indeterminate": true,
-    "disabled": false
   }
 ];
 
@@ -220,10 +171,6 @@ export const checkmarkVariantMap = {
   "indeterminate": [
     true,
     false
-  ],
-  "pressed": [
-    true,
-    false
   ]
 };
 

package/recipes/content-placeholder.css

@@ -0,0 +1,29 @@
+.seed-content-placeholder__root {
+    position: relative;
+    display: 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: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(0.5 * 100%);
+    min-width: var(--seed-dimension-x4);
+    max-width: 160px;
+    aspect-ratio: 1 / 1
+}
+.seed-content-placeholder__presetLight {
+    width: 100%;
+    height: 100%;
+    display: var(--seed-content-placeholder-preset-light-display, flex)
+}
+.seed-content-placeholder__presetDark {
+    width: 100%;
+    height: 100%;
+    display: var(--seed-content-placeholder-preset-dark-display, none)
+}

package/recipes/content-placeholder.d.ts

@@ -0,0 +1,21 @@
+declare interface ContentPlaceholderVariant {
+  
+}
+
+declare type ContentPlaceholderVariantMap = {
+  [key in keyof ContentPlaceholderVariant]: Array<ContentPlaceholderVariant[key]>;
+};
+
+export declare type ContentPlaceholderVariantProps = Partial<ContentPlaceholderVariant>;
+
+export declare type ContentPlaceholderSlotName = "root" | "asset" | "presetLight" | "presetDark";
+
+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.mjs

@@ -0,0 +1,44 @@
+import './content-placeholder.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const contentPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-content-placeholder__root"
+  ],
+  [
+    "asset",
+    "seed-content-placeholder__asset"
+  ],
+  [
+    "presetLight",
+    "seed-content-placeholder__presetLight"
+  ],
+  [
+    "presetDark",
+    "seed-content-placeholder__presetDark"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const contentPlaceholderVariantMap = {};
+
+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/dialog.css

@@ -1,6 +1,7 @@
 .seed-dialog__positioner {
     position: fixed;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     top: 0;
@@ -35,9 +36,10 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    flex: 0 0 auto;
+    flex-shrink: 1;
+    min-height: 0;
     box-sizing: border-box;
-    width: calc(0.9 * 100vw);
+    width: calc(0.9 * 100%);
     max-height: calc(0.8 * 100vh);
     opacity: 0;
     transform: scale(1.3);

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>];
+}