@seed-design/lynx-css 0.14.1 → 1.0.0

package/recipes/menu.css

@@ -1,17 +1,5 @@
 .seed-menu__positioner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0
-}
-.seed-menu__backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0
+    z-index: 99
 }
 .seed-menu__content {
     position: absolute;

package/recipes/menu.d.ts

@@ -19,7 +19,7 @@ declare type MenuVariantMap = {
 
 export declare type MenuVariantProps = Partial<MenuVariant>;
 
-export declare type MenuSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+export declare type MenuSlotName = "positioner" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
 
 export declare const menuVariantMap: MenuVariantMap;
 

package/recipes/menu.mjs

@@ -6,10 +6,6 @@ const menuSlotNames = [
     "positioner",
     "seed-menu__positioner"
   ],
-  [
-    "backdrop",
-    "seed-menu__backdrop"
-  ],
   [
     "content",
     "seed-menu__content"

package/recipes/page-banner.css

@@ -218,7 +218,7 @@
     color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-informative-solid);
 }
 .seed-page-banner__root--tone_positive-variant_weak {
     background-color: var(--seed-color-bg-positive-weak);
@@ -260,7 +260,7 @@
     color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-positive-solid);
 }
 .seed-page-banner__root--tone_warning-variant_weak {
     background-color: var(--seed-color-bg-warning-weak);
@@ -302,7 +302,7 @@
     color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
-    color: var(--seed-color-palette-static-black-alpha-900);
+    color: var(--seed-color-fg-on-warning-solid);
 }
 .seed-page-banner__root--tone_critical-variant_weak {
     background-color: var(--seed-color-bg-critical-weak);
@@ -344,7 +344,7 @@
     color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-critical-solid);
 }
 .seed-page-banner__root--tone_magic-variant_weak {
     background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));

package/recipes/progress-circle.css

@@ -36,21 +36,55 @@
   clip-path: path("M7 0 A7 7 0 1 1 7 14 A7 7 0 1 1 7 0 Z M7 2 A5 5 0 1 0 7 12 A5 5 0 1 0 7 2 Z");
 }
 
+.seed-progress-circle__track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .seed-progress-circle__cap {
   position: absolute;
   border-radius: 50%;
   z-index: 1;
 }
 
-.seed-progress-circle__root--tone_neutral {
+.seed-progress-circle__spinner,
+.seed-progress-circle__indeterminate-range,
+.seed-progress-circle__half,
+.seed-progress-circle__semicircle--first,
+.seed-progress-circle__semicircle--second {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.seed-progress-circle__range.seed-progress-circle__indeterminate-range {
+  background-color: transparent;
+}
+
+.seed-progress-circle__half--first,
+.seed-progress-circle__semicircle--second {
+  clip-path: inset(0 0 0 50%);
+}
+
+.seed-progress-circle__half--second,
+.seed-progress-circle__semicircle--first {
+  clip-path: inset(0 50% 0 0);
+}
+
+.seed-progress-circle__track--tone_neutral {
   background-color: var(--seed-color-palette-gray-200);
 }
 
-.seed-progress-circle__root--tone_brand {
+.seed-progress-circle__track--tone_brand {
   background-color: var(--seed-color-palette-carrot-200);
 }
 
-.seed-progress-circle__root--tone_staticWhite {
+.seed-progress-circle__track--tone_staticWhite {
   background-color: var(--seed-color-palette-static-white-alpha-300);
 }
 
@@ -70,7 +104,7 @@
 }
 
 /* inherit: inherits --track-color / --range-color from parent (e.g. action-button) */
-.seed-progress-circle__root--tone_inherit {
+.seed-progress-circle__track--tone_inherit {
   background-color: var(--track-color);
 }
 

package/recipes/progress-circle.d.ts

@@ -17,7 +17,7 @@ declare type ProgressCircleVariantMap = {
 
 export declare type ProgressCircleVariantProps = Partial<ProgressCircleVariant>;
 
-export declare type ProgressCircleSlotName = "root" | "range" | "cap";
+export declare type ProgressCircleSlotName = "root" | "track" | "range" | "cap";
 
 export declare const progressCircleVariantMap: ProgressCircleVariantMap;
 

package/recipes/progress-circle.mjs

@@ -4,6 +4,7 @@ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs"
 
 const progressCircleSlotNames = [
   ["root", "seed-progress-circle__root"],
+  ["track", "seed-progress-circle__track"],
   ["range", "seed-progress-circle__range"],
   ["cap", "seed-progress-circle__cap"],
 ];

package/recipes/pull-to-refresh.css

@@ -0,0 +1,14 @@
+.seed-pull-to-refresh__root {
+    height: 100%
+}
+.seed-pull-to-refresh__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--seed-dimension-x8);
+    padding-bottom: var(--seed-dimension-x8)
+}
+.seed-pull-to-refresh__content {
+    height: 100%;
+    width: 100%
+}

package/recipes/pull-to-refresh.d.ts

@@ -0,0 +1,21 @@
+declare interface PullToRefreshVariant {
+  
+}
+
+declare type PullToRefreshVariantMap = {
+  [key in keyof PullToRefreshVariant]: Array<PullToRefreshVariant[key]>;
+};
+
+export declare type PullToRefreshVariantProps = Partial<PullToRefreshVariant>;
+
+export declare type PullToRefreshSlotName = "root" | "indicator" | "content";
+
+export declare const pullToRefreshVariantMap: PullToRefreshVariantMap;
+
+export declare const pullToRefresh: ((
+  props?: PullToRefreshVariantProps,
+) => Record<PullToRefreshSlotName, string>) & {
+  splitVariantProps: <T extends PullToRefreshVariantProps>(
+    props: T,
+  ) => [PullToRefreshVariantProps, Omit<T, keyof PullToRefreshVariantProps>];
+}

package/recipes/pull-to-refresh.mjs

@@ -0,0 +1,40 @@
+import './pull-to-refresh.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const pullToRefreshSlotNames = [
+  [
+    "root",
+    "seed-pull-to-refresh__root"
+  ],
+  [
+    "indicator",
+    "seed-pull-to-refresh__indicator"
+  ],
+  [
+    "content",
+    "seed-pull-to-refresh__content"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const pullToRefreshVariantMap = {};
+
+export const pullToRefreshVariantKeys = Object.keys(pullToRefreshVariantMap);
+
+export function pullToRefresh(props) {
+  return Object.fromEntries(
+    pullToRefreshSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(pullToRefresh, { splitVariantProps: (props) => splitVariantProps(props, pullToRefreshVariantMap) });
+
+// @recipe(seed): pull-to-refresh

package/recipes/reaction-button.css

@@ -101,9 +101,6 @@
 .seed-reaction-button__prefixIcon--selected_true {
     color: var(--seed-color-fg-brand)
 }
-.seed-reaction-button__root--pressed_true {
-    background: var(--seed-color-bg-transparent-pressed)
-}
 .seed-reaction-button__root--disabled_true {
     background: var(--seed-color-bg-disabled);
     box-shadow: inset 0 0 0 0px var(--seed-color-stroke-neutral-muted)
@@ -123,9 +120,6 @@
 .seed-reaction-button__content--loading_true {
     opacity: 0
 }
-.seed-reaction-button__root--selected_true-pressed_true-disabled_false-loading_false {
-    background: var(--seed-color-bg-transparent-pressed)
-}
 .seed-reaction-button__root--selected_false-disabled_false-loading_false:active {
     background: var(--seed-color-bg-transparent-pressed)
 }

package/recipes/reaction-button.d.ts

@@ -7,10 +7,6 @@ declare interface ReactionButtonVariant {
   * @default false
   */
   selected: boolean;
-/**
-  * @default false
-  */
-  pressed: boolean;
 /**
   * @default false
   */

package/recipes/reaction-button.mjs

@@ -31,18 +31,11 @@ const reactionButtonSlotNames = [
 const defaultVariant = {
   "size": "small",
   "selected": false,
-  "pressed": false,
   "disabled": false,
   "loading": false
 };
 
 const compoundVariants = [
-  {
-    "selected": true,
-    "pressed": true,
-    "disabled": false,
-    "loading": false
-  },
   {
     "selected": false,
     "disabled": false,
@@ -68,10 +61,6 @@ export const reactionButtonVariantMap = {
     true,
     false
   ],
-  "pressed": [
-    true,
-    false
-  ],
   "disabled": [
     true,
     false

package/recipes/scroll-fog.css

@@ -5,8 +5,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__bottomMask {
     width: 100%;
@@ -14,8 +13,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__leftMask {
     width: 100%;
@@ -23,8 +21,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__rightMask {
     width: 100%;
@@ -32,17 +29,7 @@
     mask-image: linear-gradient(#000000ff, #000000ff);
     mask-position: top left;
     mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    pointer-events: none
-}
-.seed-scroll-fog__verticalScroll {
-    width: 100%;
-    height: 100%;
-    pointer-events: auto
-}
-.seed-scroll-fog__horizontalScroll {
-    width: 100%;
-    pointer-events: auto
+    mask-size: 100% 100%
 }
 .seed-scroll-fog__topMask--top_true {
     mask-image: linear-gradient(to bottom, #00000000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #00000066 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000000ff 100%), linear-gradient(#000000ff, #000000ff);

package/recipes/scroll-fog.d.ts

@@ -23,7 +23,7 @@ declare type ScrollFogVariantMap = {
 
 export declare type ScrollFogVariantProps = Partial<ScrollFogVariant>;
 
-export declare type ScrollFogSlotName = "root" | "topMask" | "bottomMask" | "leftMask" | "rightMask" | "verticalScroll" | "horizontalScroll";
+export declare type ScrollFogSlotName = "root" | "topMask" | "bottomMask" | "leftMask" | "rightMask";
 
 export declare const scrollFogVariantMap: ScrollFogVariantMap;
 

package/recipes/scroll-fog.mjs

@@ -21,14 +21,6 @@ const scrollFogSlotNames = [
   [
     "rightMask",
     "seed-scroll-fog__rightMask"
-  ],
-  [
-    "verticalScroll",
-    "seed-scroll-fog__verticalScroll"
-  ],
-  [
-    "horizontalScroll",
-    "seed-scroll-fog__horizontalScroll"
   ]
 ];
 

package/recipes/segmented-control.css

@@ -9,7 +9,8 @@
     max-width: 100%;
     padding: var(--seed-dimension-x1);
     border-radius: var(--seed-radius-full);
-    background-color: var(--seed-color-bg-neutral-weak-alpha)
+    background-color: var(--seed-color-bg-neutral-weak-alpha);
+    --segment-min-width: 86px
 }
 .seed-segmented-control__indicator {
     position: absolute;
@@ -18,6 +19,7 @@
     left: var(--seed-dimension-x1);
     z-index: 0;
     width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count, 1));
+    min-width: var(--segment-min-width);
     border-radius: var(--seed-radius-full);
     background-color: var(--seed-color-palette-gray-00);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
@@ -33,7 +35,7 @@
     z-index: 1;
     align-items: center;
     justify-content: center;
-    min-width: 86px;
+    min-width: var(--segment-min-width);
     min-height: 34px;
     height: 100%;
     border-radius: var(--seed-radius-full)
@@ -58,6 +60,22 @@
     bottom: 0;
     left: 0;
     border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-bg-neutral-weak-pressed);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing)
+}
+.seed-segmented-control__itemSelectedBackground {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--seed-radius-full);
+    background-color: var(--seed-color-palette-gray-100);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
     opacity: 0;
     transition-property: opacity;
     transition-duration: var(--seed-duration-color-transition);
@@ -73,31 +91,23 @@
     transition-duration: var(--seed-duration-color-transition);
     transition-timing-function: var(--seed-timing-function-easing)
 }
-.seed-segmented-control__itemBackground--selected_true {
-    background-color: var(--seed-color-palette-gray-100);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
-}
 .seed-segmented-control__label--selected_true {
     color: var(--seed-color-fg-neutral)
 }
-.seed-segmented-control__itemBackground--selected_false {
-    background-color: var(--seed-color-bg-neutral-weak-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)
-}
 .seed-segmented-control__label--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
-.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground {
+.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground--selected_false {
     opacity: 1
 }
-.seed-segmented-control__itemBackground--pressed_true {
+.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemSelectedBackground--selected_true {
     opacity: 1
 }
 .seed-segmented-control__indicator--hasSelection_false {
     opacity: 0
 }
-.seed-segmented-control__itemBackground--disabled_true-pressed_true {
-    opacity: 0
+.seed-segmented-control__indicator--transitionEnabled_false {
+    transition-duration: 0s
 }
 .seed-segmented-control__item--selected_true-disabled_true {
     background-color: var(--seed-color-bg-disabled);

package/recipes/segmented-control.d.ts

@@ -8,13 +8,13 @@ declare interface SegmentedControlVariant {
   */
   disabled: boolean;
 /**
-  * @default false
+  * @default true
   */
-  pressed: boolean;
+  hasSelection: boolean;
 /**
   * @default true
   */
-  hasSelection: boolean;
+  transitionEnabled: boolean;
 }
 
 declare type SegmentedControlVariantMap = {
@@ -23,7 +23,7 @@ declare type SegmentedControlVariantMap = {
 
 export declare type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
 
-export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemContent" | "itemBackground" | "label";
+export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemContent" | "itemBackground" | "itemSelectedBackground" | "label";
 
 export declare const segmentedControlVariantMap: SegmentedControlVariantMap;
 

package/recipes/segmented-control.mjs

@@ -22,6 +22,10 @@ const segmentedControlSlotNames = [
     "itemBackground",
     "seed-segmented-control__itemBackground"
   ],
+  [
+    "itemSelectedBackground",
+    "seed-segmented-control__itemSelectedBackground"
+  ],
   [
     "label",
     "seed-segmented-control__label"
@@ -31,15 +35,11 @@ const segmentedControlSlotNames = [
 const defaultVariant = {
   "selected": false,
   "disabled": false,
-  "pressed": false,
-  "hasSelection": true
+  "hasSelection": true,
+  "transitionEnabled": true
 };
 
 const compoundVariants = [
-  {
-    "disabled": true,
-    "pressed": true
-  },
   {
     "selected": true,
     "disabled": true
@@ -55,11 +55,11 @@ export const segmentedControlVariantMap = {
     true,
     false
   ],
-  "pressed": [
+  "hasSelection": [
     true,
     false
   ],
-  "hasSelection": [
+  "transitionEnabled": [
     true,
     false
   ]

package/recipes/select-box-checkmark.css

@@ -1,19 +1,16 @@
 .seed-select-box-checkmark__root {
-    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-shrink: 0;
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5)
 }
 .seed-select-box-checkmark__icon {
     display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    flex-shrink: 0;
     width: 15px;
     height: 15px;
-    margin: auto;
     color: var(--seed-color-fg-placeholder)
 }
 .seed-select-box-checkmark__icon--selected_true {

package/recipes/select-box.css

@@ -3,7 +3,6 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
-    height: 100%;
     min-height: 0;
     gap: 0
 }
@@ -13,7 +12,7 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
-    height: 100%;
+    flex-grow: 1;
     border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
@@ -25,7 +24,6 @@
     flex-direction: column;
     align-items: stretch;
     width: 100%;
-    height: 100%;
     min-height: 0;
     flex-grow: 1
 }
@@ -52,7 +50,9 @@
 .seed-select-box__content {
     display: flex;
     flex-direction: row;
-    min-width: 0
+    min-width: 0;
+    flex-grow: 1;
+    flex-shrink: 1
 }
 .seed-select-box__prefixIcon {
     display: flex;
@@ -72,6 +72,7 @@
 }
 .seed-select-box__label {
     display: flex;
+    flex-shrink: 0;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
@@ -82,6 +83,7 @@
     font-weight: var(--seed-font-weight-medium)
 }
 .seed-select-box__description {
+    flex-shrink: 0;
     color: var(--seed-color-fg-neutral-muted);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
@@ -114,6 +116,10 @@
     align-items: center;
     gap: var(--seed-dimension-x3)
 }
+.seed-select-box__body--layout_horizontal {
+    flex-grow: 1;
+    flex-shrink: 1
+}
 .seed-select-box__trigger--layout_vertical {
     padding-left: var(--seed-dimension-x4);
     padding-right: var(--seed-dimension-x4);

package/recipes/select-item.css

@@ -5,6 +5,13 @@
     align-items: center;
     flex-shrink: 0
 }
+.seed-select-item__scaleContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    min-width: 0
+}
 .seed-select-item__pressedOverlay {
     position: absolute;
     top: 0;
@@ -46,7 +53,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-select-item__scaleContent--size_large {
     gap: var(--seed-dimension-x3)
 }
 .seed-select-item__prefixIcon--size_large {
@@ -69,7 +78,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-select-item__scaleContent--size_medium {
     gap: var(--seed-dimension-x2)
 }
 .seed-select-item__prefixIcon--size_medium {

package/recipes/select-item.d.ts

@@ -23,7 +23,7 @@ declare type SelectItemVariantMap = {
 
 export declare type SelectItemVariantProps = Partial<SelectItemVariant>;
 
-export declare type SelectItemSlotName = "root" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "indicator";
+export declare type SelectItemSlotName = "root" | "scaleContent" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "indicator";
 
 export declare const selectItemVariantMap: SelectItemVariantMap;
 

package/recipes/select-item.mjs

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