@seed-design/lynx-css 0.14.2 → 1.0.1

package/recipes/bottom-sheet.mjs

@@ -22,6 +22,14 @@ const bottomSheetSlotNames = [
     "body",
     "seed-bottom-sheet__body"
   ],
+  [
+    "scrollArea",
+    "seed-bottom-sheet__scrollArea"
+  ],
+  [
+    "scrollContent",
+    "seed-bottom-sheet__scrollContent"
+  ],
   [
     "footer",
     "seed-bottom-sheet__footer"
@@ -37,15 +45,29 @@ const bottomSheetSlotNames = [
   [
     "closeButton",
     "seed-bottom-sheet__closeButton"
+  ],
+  [
+    "closeButtonIcon",
+    "seed-bottom-sheet__closeButtonIcon"
   ]
 ];
 
 const defaultVariant = {
   "headerAlign": "left",
-  "skipAnimation": false
+  "skipAnimation": false,
+  "closeButton": false
 };
 
-const compoundVariants = [];
+const compoundVariants = [
+  {
+    "headerAlign": "left",
+    "closeButton": true
+  },
+  {
+    "headerAlign": "center",
+    "closeButton": true
+  }
+];
 
 export const bottomSheetVariantMap = {
   "headerAlign": [
@@ -55,6 +77,10 @@ export const bottomSheetVariantMap = {
   "skipAnimation": [
     true,
     false
+  ],
+  "closeButton": [
+    true,
+    false
   ]
 };
 

package/recipes/callout.css

@@ -30,8 +30,7 @@
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-regular);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
+    text-decoration: underline;
 }
 .seed-callout__closeButton {
     flex-grow: 0;
@@ -74,7 +73,6 @@
 }
 .seed-callout__link--tone_neutral {
     color: var(--seed-color-fg-neutral);
-    border-bottom-color: var(--seed-color-fg-neutral);
 }
 .seed-callout__prefixIcon--tone_neutral {
     color: var(--seed-color-fg-neutral);
@@ -93,7 +91,6 @@
 }
 .seed-callout__link--tone_informative {
     color: var(--seed-color-fg-informative-contrast);
-    border-bottom-color: var(--seed-color-fg-informative-contrast);
 }
 .seed-callout__prefixIcon--tone_informative {
     color: var(--seed-color-fg-informative-contrast);
@@ -112,7 +109,6 @@
 }
 .seed-callout__link--tone_positive {
     color: var(--seed-color-fg-positive-contrast);
-    border-bottom-color: var(--seed-color-fg-positive-contrast);
 }
 .seed-callout__prefixIcon--tone_positive {
     color: var(--seed-color-fg-positive-contrast);
@@ -131,7 +127,6 @@
 }
 .seed-callout__link--tone_warning {
     color: var(--seed-color-fg-warning-contrast);
-    border-bottom-color: var(--seed-color-fg-warning-contrast);
 }
 .seed-callout__prefixIcon--tone_warning {
     color: var(--seed-color-fg-warning-contrast);
@@ -150,7 +145,6 @@
 }
 .seed-callout__link--tone_critical {
     color: var(--seed-color-fg-critical-contrast);
-    border-bottom-color: var(--seed-color-fg-critical-contrast);
 }
 .seed-callout__prefixIcon--tone_critical {
     color: var(--seed-color-fg-critical-contrast);
@@ -169,7 +163,6 @@
 }
 .seed-callout__link--tone_magic {
     color: var(--seed-color-fg-neutral);
-    border-bottom-color: var(--seed-color-fg-neutral);
 }
 .seed-callout__prefixIcon--tone_magic {
     color: var(--seed-color-fg-neutral);

package/recipes/checkbox.css

@@ -41,6 +41,12 @@
 .seed-checkbox__root--disabled_false:active .seed-checkmark__root {
     background-color: var(--seed-checkmark-pressed-color)
 }
-.seed-checkbox__root--disabled_false:active .seed-checkmark__background {
+.seed-checkbox__root--disabled_false:active .seed-checkmark__background--checked_false.seed-checkmark__background--indeterminate_false {
+    opacity: 1
+}
+.seed-checkbox__root--disabled_false:active .seed-checkmark__selectedBackground--checked_true {
+    opacity: 1
+}
+.seed-checkbox__root--disabled_false:active .seed-checkmark__selectedBackground--indeterminate_true {
     opacity: 1
 }

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/chip-tabs.css

@@ -22,8 +22,12 @@
     align-items: center;
     flex-shrink: 0;
     gap: var(--seed-dimension-x1_5);
+    --seed-chip-tabs-stroke-width: 0px;
+    border-width: var(--seed-chip-tabs-stroke-width);
+    border-style: solid;
+    border-color: transparent;
     border-radius: var(--seed-radius-full);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-chip-tabs__triggerLabel {
     display: flex;
@@ -48,8 +52,8 @@
 .seed-chip-tabs__trigger--size_medium {
     min-height: 36px;
     min-width: var(--seed-dimension-x12);
-    padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
-    padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5))
+    padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width))
 }
 .seed-chip-tabs__triggerLabel--size_medium {
     font-size: var(--seed-font-size-t4);
@@ -58,8 +62,8 @@
 .seed-chip-tabs__trigger--size_large {
     min-height: 40px;
     min-width: var(--seed-dimension-x13);
-    padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
-    padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5))
+    padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5) - var(--seed-chip-tabs-stroke-width))
 }
 .seed-chip-tabs__triggerLabel--size_large {
     font-size: var(--seed-font-size-t4);
@@ -73,7 +77,8 @@
 }
 .seed-chip-tabs__trigger--variant_neutralOutline {
     background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
+    --seed-chip-tabs-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-chip-tabs__triggerLabel--variant_neutralOutline {
     color: var(--seed-color-fg-neutral)
@@ -108,7 +113,7 @@
 }
 .seed-chip-tabs__trigger--variant_neutralOutline-selected_true {
     background-color: var(--seed-color-bg-neutral-solid);
-    box-shadow: inset 0 0 0 1px transparent
+    border-color: transparent
 }
 .seed-chip-tabs__triggerLabel--variant_neutralOutline-selected_true {
     color: var(--seed-color-fg-on-neutral-solid)

package/recipes/chip.css

@@ -5,9 +5,12 @@
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
-    border: none;
+    --seed-chip-stroke-width: 0px;
+    border-width: var(--seed-chip-stroke-width);
+    border-style: solid;
+    border-color: transparent;
     border-radius: var(--seed-radius-full);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-chip__label {
     display: flex;
@@ -57,7 +60,8 @@
 }
 .seed-chip__root--variant_outlineStrong {
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
+    --seed-chip-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-chip__label--variant_outlineStrong {
     color: var(--seed-color-fg-neutral)
@@ -73,7 +77,8 @@
 }
 .seed-chip__root--variant_outlineWeak {
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
+    --seed-chip-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-chip__label--variant_outlineWeak {
     color: var(--seed-color-fg-neutral)
@@ -89,8 +94,8 @@
 }
 .seed-chip__root--size_small {
     height: 32px;
-    padding-left: var(--seed-dimension-x1_5);
-    padding-right: var(--seed-dimension-x1_5)
+    padding-left: calc(var(--seed-dimension-x1_5) - var(--seed-chip-stroke-width));
+    padding-right: calc(var(--seed-dimension-x1_5) - var(--seed-chip-stroke-width))
 }
 .seed-chip__label--size_small {
     font-size: var(--seed-font-size-t4);
@@ -114,8 +119,8 @@
 }
 .seed-chip__root--size_medium {
     height: 36px;
-    padding-left: var(--seed-dimension-x2);
-    padding-right: var(--seed-dimension-x2)
+    padding-left: calc(var(--seed-dimension-x2) - var(--seed-chip-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2) - var(--seed-chip-stroke-width))
 }
 .seed-chip__label--size_medium {
     font-size: var(--seed-font-size-t4);
@@ -139,8 +144,8 @@
 }
 .seed-chip__root--size_large {
     height: 40px;
-    padding-left: var(--seed-dimension-x2_5);
-    padding-right: var(--seed-dimension-x2_5)
+    padding-left: calc(var(--seed-dimension-x2_5) - var(--seed-chip-stroke-width));
+    padding-right: calc(var(--seed-dimension-x2_5) - var(--seed-chip-stroke-width))
 }
 .seed-chip__label--size_large {
     font-size: var(--seed-font-size-t4);
@@ -216,7 +221,7 @@
 }
 .seed-chip__root--variant_outlineWeak-selected_true {
     background: var(--seed-color-bg-neutral-weak);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast)
+    border-color: var(--seed-color-stroke-neutral-contrast)
 }
 .seed-chip__root--variant_solid-pressed_true-selected_false {
     background: var(--seed-color-bg-neutral-weak-alpha-pressed)

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);