@seed-design/lynx-css 0.10.2 → 0.11.0

package/recipes/page-banner.d.ts

@@ -11,6 +11,10 @@ declare interface PageBannerVariant {
   * @default false
   */
   pressed: boolean;
+/**
+  * @default false
+  */
+  interactive: boolean;
 /**
   * @default false
   */

package/recipes/page-banner.mjs

@@ -48,10 +48,66 @@ const defaultVariant = {
   "tone": "neutral",
   "variant": "weak",
   "pressed": false,
-  "closeButtonPressed": false
+  "closeButtonPressed": false,
+  "interactive": false
 };
 
 const compoundVariants = [
+  {
+    "tone": "neutral",
+    "variant": "weak",
+    "interactive": true
+  },
+  {
+    "tone": "neutral",
+    "variant": "solid",
+    "interactive": true
+  },
+  {
+    "tone": "informative",
+    "variant": "weak",
+    "interactive": true
+  },
+  {
+    "tone": "informative",
+    "variant": "solid",
+    "interactive": true
+  },
+  {
+    "tone": "positive",
+    "variant": "weak",
+    "interactive": true
+  },
+  {
+    "tone": "positive",
+    "variant": "solid",
+    "interactive": true
+  },
+  {
+    "tone": "warning",
+    "variant": "weak",
+    "interactive": true
+  },
+  {
+    "tone": "warning",
+    "variant": "solid",
+    "interactive": true
+  },
+  {
+    "tone": "critical",
+    "variant": "weak",
+    "interactive": true
+  },
+  {
+    "tone": "critical",
+    "variant": "solid",
+    "interactive": true
+  },
+  {
+    "tone": "magic",
+    "variant": "weak",
+    "interactive": true
+  },
   {
     "tone": "neutral",
     "variant": "weak"
@@ -170,6 +226,10 @@ export const pageBannerVariantMap = {
     true,
     false
   ],
+  "interactive": [
+    true,
+    false
+  ],
   "closeButtonPressed": [
     true,
     false

package/recipes/radio.css

@@ -37,4 +37,7 @@
 }
 .seed-radio__label--disabled_true {
     color: var(--seed-color-fg-disabled)
+}
+.seed-radio__root--disabled_false:active .seed-radiomark__root {
+    background-color: var(--seed-radiomark-pressed-color)
 }

package/recipes/radiomark.css

@@ -8,7 +8,8 @@
     border-style: solid;
     border-color: var(--seed-color-stroke-neutral-weak);
     border-radius: var(--seed-radius-full);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    --seed-radiomark-pressed-color: var(--seed-color-bg-transparent-pressed)
 }
 .seed-radiomark__icon {
     border-radius: var(--seed-radius-full)
@@ -34,6 +35,7 @@
 }
 .seed-radiomark__root--tone_brand-checked_true-disabled_false {
     background-color: var(--seed-color-bg-brand-solid);
+    --seed-radiomark-pressed-color: var(--seed-color-bg-brand-solid-pressed);
     border-width: 0px;
     border-color: #00000000
 }
@@ -43,6 +45,7 @@
 }
 .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
     background-color: var(--seed-color-bg-neutral-inverted);
+    --seed-radiomark-pressed-color: var(--seed-color-bg-neutral-inverted-pressed);
     border-width: 0px;
     border-color: #00000000
 }

package/recipes/reaction-button.css

@@ -0,0 +1,145 @@
+.seed-reaction-button__root {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background: var(--seed-color-bg-transparent);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    transform: scale(1);
+    --track-color: var(--seed-color-palette-gray-500);
+    --range-color: var(--seed-color-fg-neutral);
+    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), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-reaction-button__content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    opacity: 1
+}
+.seed-reaction-button__label {
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-medium)
+}
+.seed-reaction-button__count {
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-reaction-button__prefixIcon {
+    color: var(--seed-color-fg-neutral);
+    flex-shrink: 0
+}
+.seed-reaction-button__loadingIndicator {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.seed-reaction-button__root--size_xsmall {
+    height: var(--seed-dimension-x8);
+    border-radius: var(--seed-radius-full);
+    padding-left: var(--seed-dimension-x3);
+    padding-right: var(--seed-dimension-x3);
+    padding-top: var(--seed-dimension-x1_5);
+    padding-bottom: var(--seed-dimension-x1_5)
+}
+.seed-reaction-button__content--size_xsmall {
+    gap: var(--seed-dimension-x1)
+}
+.seed-reaction-button__label--size_xsmall {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-reaction-button__count--size_xsmall {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-reaction-button__prefixIcon--size_xsmall {
+    width: 18px;
+    height: 18px
+}
+.seed-reaction-button__root--size_small {
+    height: var(--seed-dimension-x9);
+    border-radius: var(--seed-radius-full);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2)
+}
+.seed-reaction-button__content--size_small {
+    gap: var(--seed-dimension-x1)
+}
+.seed-reaction-button__label--size_small {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-reaction-button__count--size_small {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-reaction-button__prefixIcon--size_small {
+    width: 18px;
+    height: 18px
+}
+.seed-reaction-button__root--selected_true {
+    background: var(--seed-color-bg-transparent);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    --track-color: var(--seed-color-palette-carrot-200);
+    --range-color: var(--seed-color-fg-brand)
+}
+.seed-reaction-button__label--selected_true {
+    color: var(--seed-color-fg-brand)
+}
+.seed-reaction-button__count--selected_true {
+    color: var(--seed-color-fg-brand)
+}
+.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)
+}
+.seed-reaction-button__label--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-reaction-button__count--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-reaction-button__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-reaction-button__root--loading_true {
+    background: var(--seed-color-bg-neutral-weak-pressed);
+    transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-reaction-button__content--loading_true {
+    opacity: 0
+}
+.seed-reaction-button__root--selected_true-pressed_true {
+    background: var(--seed-color-bg-transparent-pressed)
+}
+.seed-reaction-button__root--size_xsmall-pressed_true {
+    transform: scale(var(--seed-scale-s95))
+}
+.seed-reaction-button__root--size_small-pressed_true {
+    transform: scale(var(--seed-scale-s97))
+}
+.seed-reaction-button__root--selected_true-pressed_false-loading_false {
+    transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-reaction-button__root--selected_true-loading_true {
+    background: var(--seed-color-bg-transparent-pressed);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    --track-color: var(--seed-color-palette-carrot-200);
+    --range-color: var(--seed-color-fg-brand)
+}

package/recipes/reaction-button.d.ts

@@ -0,0 +1,40 @@
+declare interface ReactionButtonVariant {
+  /**
+  * @default "small"
+  */
+  size: "xsmall" | "small";
+/**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  loading: boolean;
+}
+
+declare type ReactionButtonVariantMap = {
+  [key in keyof ReactionButtonVariant]: Array<ReactionButtonVariant[key]>;
+};
+
+export declare type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
+
+export declare type ReactionButtonSlotName = "root" | "content" | "label" | "count" | "prefixIcon" | "loadingIndicator";
+
+export declare const reactionButtonVariantMap: ReactionButtonVariantMap;
+
+export declare const reactionButton: ((
+  props?: ReactionButtonVariantProps,
+) => Record<ReactionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ReactionButtonVariantProps>(
+    props: T,
+  ) => [ReactionButtonVariantProps, Omit<T, keyof ReactionButtonVariantProps>];
+}

package/recipes/reaction-button.mjs

@@ -0,0 +1,101 @@
+import './reaction-button.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const reactionButtonSlotNames = [
+  [
+    "root",
+    "seed-reaction-button__root"
+  ],
+  [
+    "content",
+    "seed-reaction-button__content"
+  ],
+  [
+    "label",
+    "seed-reaction-button__label"
+  ],
+  [
+    "count",
+    "seed-reaction-button__count"
+  ],
+  [
+    "prefixIcon",
+    "seed-reaction-button__prefixIcon"
+  ],
+  [
+    "loadingIndicator",
+    "seed-reaction-button__loadingIndicator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "small",
+  "selected": false,
+  "pressed": false,
+  "disabled": false,
+  "loading": false
+};
+
+const compoundVariants = [
+  {
+    "selected": true,
+    "pressed": true
+  },
+  {
+    "size": "xsmall",
+    "pressed": true
+  },
+  {
+    "size": "small",
+    "pressed": true
+  },
+  {
+    "selected": true,
+    "pressed": false,
+    "loading": false
+  },
+  {
+    "selected": true,
+    "loading": true
+  }
+];
+
+export const reactionButtonVariantMap = {
+  "size": [
+    "xsmall",
+    "small"
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "loading": [
+    true,
+    false
+  ]
+};
+
+export const reactionButtonVariantKeys = Object.keys(reactionButtonVariantMap);
+
+export function reactionButton(props) {
+  return Object.fromEntries(
+    reactionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(reactionButton, { splitVariantProps: (props) => splitVariantProps(props, reactionButtonVariantMap) });
+
+// @recipe(seed): reaction-button

package/recipes/segmented-control.css

@@ -36,12 +36,20 @@
     min-width: 86px;
     min-height: 34px;
     height: 100%;
+    border-radius: var(--seed-radius-full)
+}
+.seed-segmented-control__itemContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
     gap: var(--seed-dimension-x1_5);
     padding-left: var(--seed-dimension-x6);
     padding-right: var(--seed-dimension-x6);
     padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5);
-    border-radius: var(--seed-radius-full)
+    padding-bottom: var(--seed-dimension-x1_5)
 }
 .seed-segmented-control__itemBackground {
     position: absolute;
@@ -79,12 +87,18 @@
 .seed-segmented-control__label--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
+.seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground {
+    opacity: 1
+}
 .seed-segmented-control__itemBackground--pressed_true {
     opacity: 1
 }
 .seed-segmented-control__indicator--hasSelection_false {
     opacity: 0
 }
+.seed-segmented-control__itemBackground--disabled_true-pressed_true {
+    opacity: 0
+}
 .seed-segmented-control__item--selected_true-disabled_true {
     background-color: var(--seed-color-bg-disabled);
     box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted)

package/recipes/segmented-control.d.ts

@@ -23,7 +23,7 @@ declare type SegmentedControlVariantMap = {
 
 export declare type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
 
-export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemBackground" | "label";
+export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemContent" | "itemBackground" | "label";
 
 export declare const segmentedControlVariantMap: SegmentedControlVariantMap;
 

package/recipes/segmented-control.mjs

@@ -14,6 +14,10 @@ const segmentedControlSlotNames = [
     "item",
     "seed-segmented-control__item"
   ],
+  [
+    "itemContent",
+    "seed-segmented-control__itemContent"
+  ],
   [
     "itemBackground",
     "seed-segmented-control__itemBackground"
@@ -32,6 +36,10 @@ const defaultVariant = {
 };
 
 const compoundVariants = [
+  {
+    "disabled": true,
+    "pressed": true
+  },
   {
     "selected": true,
     "disabled": true

package/recipes/select-box.css

@@ -20,6 +20,15 @@
     overflow: hidden;
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
+.seed-select-box__scaleContent {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex-grow: 1
+}
 .seed-select-box__selectedStroke {
     position: absolute;
     top: 0;
@@ -133,6 +142,9 @@
 .seed-select-box__description--disabled_true {
     color: var(--seed-color-fg-disabled)
 }
+.seed-select-box__root--disabled_false:active {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
 .seed-select-box__footer--footerOpen_true {
     opacity: 1;
     transition: height 400ms var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing)

package/recipes/select-box.d.ts

@@ -27,7 +27,7 @@ declare type SelectBoxVariantMap = {
 
 export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
 
-export declare type SelectBoxSlotName = "interactionRoot" | "root" | "selectedStroke" | "trigger" | "content" | "prefixIcon" | "body" | "label" | "description" | "footer" | "footerInner";
+export declare type SelectBoxSlotName = "interactionRoot" | "root" | "scaleContent" | "selectedStroke" | "trigger" | "content" | "prefixIcon" | "body" | "label" | "description" | "footer" | "footerInner";
 
 export declare const selectBoxVariantMap: SelectBoxVariantMap;
 

package/recipes/select-box.mjs

@@ -10,6 +10,10 @@ const selectBoxSlotNames = [
     "root",
     "seed-select-box__root"
   ],
+  [
+    "scaleContent",
+    "seed-select-box__scaleContent"
+  ],
   [
     "selectedStroke",
     "seed-select-box__selectedStroke"

package/scale-feedback/index.d.ts

@@ -0,0 +1,2 @@
+export declare const feedbackScaleDuration: 150;
+export declare const feedbackScaleTimingFunction: "cubic-bezier(0, 0, 0.15, 1)";

package/scale-feedback/index.mjs

@@ -0,0 +1,3 @@
+// Generated from Rootage pressed-scale motion tokens. Do not edit directly.
+export const feedbackScaleDuration = 150;
+export const feedbackScaleTimingFunction = "cubic-bezier(0, 0, 0.15, 1)";