@seed-design/lynx-css 0.8.0 → 0.9.0

package/recipes/chip.css

@@ -0,0 +1,239 @@
+.seed-chip__root {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border: none;
+    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)
+}
+.seed-chip__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-weight: var(--seed-font-weight-medium);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    white-space: nowrap
+}
+.seed-chip__prefixIcon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: var(--seed-dimension-x1_5)
+}
+.seed-chip__prefixAvatar {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-chip__suffixIcon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-right: var(--seed-dimension-x1_5)
+}
+.seed-chip__icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-chip__root--variant_solid {
+    background: var(--seed-color-bg-neutral-weak-alpha)
+}
+.seed-chip__label--variant_solid {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__prefixIcon--variant_solid {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__suffixIcon--variant_solid {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__icon--variant_solid {
+    color: var(--seed-color-fg-neutral)
+}
+.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__label--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__prefixIcon--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__suffixIcon--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__icon--variant_outlineStrong {
+    color: var(--seed-color-fg-neutral)
+}
+.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__label--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__prefixIcon--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__suffixIcon--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__icon--variant_outlineWeak {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-chip__root--size_small {
+    height: 32px;
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5)
+}
+.seed-chip__label--size_small {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-chip__prefixIcon--size_small {
+    width: var(--seed-dimension-x3_5);
+    height: var(--seed-dimension-x3_5)
+}
+.seed-chip__prefixAvatar--size_small {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-chip__suffixIcon--size_small {
+    width: var(--seed-dimension-x3_5);
+    height: var(--seed-dimension-x3_5)
+}
+.seed-chip__icon--size_small {
+    width: var(--seed-dimension-x3_5);
+    height: var(--seed-dimension-x3_5)
+}
+.seed-chip__root--size_medium {
+    height: 36px;
+    padding-left: var(--seed-dimension-x2);
+    padding-right: var(--seed-dimension-x2)
+}
+.seed-chip__label--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-chip__prefixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-chip__prefixAvatar--size_medium {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6)
+}
+.seed-chip__suffixIcon--size_medium {
+    width: var(--seed-dimension-x3_5);
+    height: var(--seed-dimension-x3_5)
+}
+.seed-chip__icon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-chip__root--size_large {
+    height: 40px;
+    padding-left: var(--seed-dimension-x2_5);
+    padding-right: var(--seed-dimension-x2_5)
+}
+.seed-chip__label--size_large {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-chip__prefixIcon--size_large {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4);
+    margin-left: var(--seed-dimension-x1_5)
+}
+.seed-chip__prefixAvatar--size_large {
+    width: var(--seed-dimension-x7);
+    height: var(--seed-dimension-x7)
+}
+.seed-chip__suffixIcon--size_large {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-chip__icon--size_large {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-chip__root--disabled_true {
+    opacity: 0.5
+}
+.seed-chip__root--size_small-layout_withText {
+    min-width: 44px
+}
+.seed-chip__root--size_medium-layout_withText {
+    min-width: var(--seed-dimension-x12)
+}
+.seed-chip__root--size_large-layout_withText {
+    min-width: var(--seed-dimension-x13)
+}
+.seed-chip__root--size_small-layout_iconOnly {
+    min-width: var(--seed-dimension-x8)
+}
+.seed-chip__root--size_medium-layout_iconOnly {
+    min-width: var(--seed-dimension-x9)
+}
+.seed-chip__root--size_large-layout_iconOnly {
+    min-width: var(--seed-dimension-x10)
+}
+.seed-chip__root--variant_solid-selected_true {
+    background: var(--seed-color-bg-neutral-inverted)
+}
+.seed-chip__label--variant_solid-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__prefixIcon--variant_solid-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__suffixIcon--variant_solid-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__icon--variant_solid-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__root--variant_outlineStrong-selected_true {
+    background: var(--seed-color-bg-neutral-inverted)
+}
+.seed-chip__label--variant_outlineStrong-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__prefixIcon--variant_outlineStrong-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__suffixIcon--variant_outlineStrong-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.seed-chip__icon--variant_outlineStrong-selected_true {
+    color: var(--seed-color-fg-neutral-inverted)
+}
+.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)
+}
+.seed-chip__root--variant_solid-pressed_true-selected_false {
+    background: var(--seed-color-bg-neutral-weak-alpha-pressed)
+}
+.seed-chip__root--variant_outlineStrong-pressed_true-selected_false {
+    background: var(--seed-color-bg-transparent-pressed)
+}
+.seed-chip__root--variant_outlineWeak-pressed_true-selected_false {
+    background: var(--seed-color-bg-transparent-pressed)
+}
+.seed-chip__root--variant_solid-selected_true-pressed_true {
+    background: var(--seed-color-bg-neutral-inverted-pressed)
+}
+.seed-chip__root--variant_outlineStrong-selected_true-pressed_true {
+    background: var(--seed-color-bg-neutral-inverted-pressed)
+}
+.seed-chip__root--variant_outlineWeak-selected_true-pressed_true {
+    background: var(--seed-color-bg-neutral-weak-pressed)
+}

package/recipes/chip.d.ts

@@ -0,0 +1,44 @@
+declare interface ChipVariant {
+  /**
+  * @default "solid"
+  */
+  variant: "solid" | "outlineStrong" | "outlineWeak";
+/**
+  * @default "medium"
+  */
+  size: "small" | "medium" | "large";
+/**
+  * @default "withText"
+  */
+  layout: "iconOnly" | "withText";
+/**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type ChipVariantMap = {
+  [key in keyof ChipVariant]: Array<ChipVariant[key]>;
+};
+
+export declare type ChipVariantProps = Partial<ChipVariant>;
+
+export declare type ChipSlotName = "root" | "label" | "prefixIcon" | "prefixAvatar" | "suffixIcon" | "icon";
+
+export declare const chipVariantMap: ChipVariantMap;
+
+export declare const chip: ((
+  props?: ChipVariantProps,
+) => Record<ChipSlotName, string>) & {
+  splitVariantProps: <T extends ChipVariantProps>(
+    props: T,
+  ) => [ChipVariantProps, Omit<T, keyof ChipVariantProps>];
+}

package/recipes/chip.mjs

@@ -0,0 +1,153 @@
+import './chip.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const chipSlotNames = [
+  [
+    "root",
+    "seed-chip__root"
+  ],
+  [
+    "label",
+    "seed-chip__label"
+  ],
+  [
+    "prefixIcon",
+    "seed-chip__prefixIcon"
+  ],
+  [
+    "prefixAvatar",
+    "seed-chip__prefixAvatar"
+  ],
+  [
+    "suffixIcon",
+    "seed-chip__suffixIcon"
+  ],
+  [
+    "icon",
+    "seed-chip__icon"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "solid",
+  "size": "medium",
+  "layout": "withText",
+  "selected": false,
+  "pressed": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "large",
+    "layout": "withText"
+  },
+  {
+    "size": "small",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "medium",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "large",
+    "layout": "iconOnly"
+  },
+  {
+    "variant": "solid",
+    "selected": true
+  },
+  {
+    "variant": "outlineStrong",
+    "selected": true
+  },
+  {
+    "variant": "outlineWeak",
+    "selected": true
+  },
+  {
+    "variant": "solid",
+    "pressed": true,
+    "selected": false
+  },
+  {
+    "variant": "outlineStrong",
+    "pressed": true,
+    "selected": false
+  },
+  {
+    "variant": "outlineWeak",
+    "pressed": true,
+    "selected": false
+  },
+  {
+    "variant": "solid",
+    "selected": true,
+    "pressed": true
+  },
+  {
+    "variant": "outlineStrong",
+    "selected": true,
+    "pressed": true
+  },
+  {
+    "variant": "outlineWeak",
+    "selected": true,
+    "pressed": true
+  }
+];
+
+export const chipVariantMap = {
+  "variant": [
+    "solid",
+    "outlineStrong",
+    "outlineWeak"
+  ],
+  "size": [
+    "small",
+    "medium",
+    "large"
+  ],
+  "layout": [
+    "iconOnly",
+    "withText"
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const chipVariantKeys = Object.keys(chipVariantMap);
+
+export function chip(props) {
+  return Object.fromEntries(
+    chipSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(chip, { splitVariantProps: (props) => splitVariantProps(props, chipVariantMap) });
+
+// @recipe(seed): chip

package/recipes/progress-circle.css

@@ -43,38 +43,38 @@
 }
 
 .seed-progress-circle__root--tone_neutral {
-  background: var(--seed-color-palette-gray-200);
+  background-color: var(--seed-color-palette-gray-200);
 }
 
 .seed-progress-circle__root--tone_brand {
-  background: var(--seed-color-palette-carrot-200);
+  background-color: var(--seed-color-palette-carrot-200);
 }
 
 .seed-progress-circle__root--tone_staticWhite {
-  background: var(--seed-color-palette-static-white-alpha-300);
+  background-color: var(--seed-color-palette-static-white-alpha-300);
 }
 
 .seed-progress-circle__range--tone_neutral,
 .seed-progress-circle__cap--tone_neutral {
-  background: var(--seed-color-palette-gray-500);
+  background-color: var(--seed-color-palette-gray-500);
 }
 
 .seed-progress-circle__range--tone_brand,
 .seed-progress-circle__cap--tone_brand {
-  background: var(--seed-color-bg-brand-solid);
+  background-color: var(--seed-color-bg-brand-solid);
 }
 
 .seed-progress-circle__range--tone_staticWhite,
 .seed-progress-circle__cap--tone_staticWhite {
-  background: var(--seed-color-palette-static-white);
+  background-color: var(--seed-color-palette-static-white);
 }
 
 /* inherit: inherits --track-color / --range-color from parent (e.g. action-button) */
 .seed-progress-circle__root--tone_inherit {
-  background: var(--track-color);
+  background-color: var(--track-color);
 }
 
 .seed-progress-circle__range--tone_inherit,
 .seed-progress-circle__cap--tone_inherit {
-  background: var(--range-color);
+  background-color: var(--range-color);
 }

package/recipes/tabs.css

@@ -0,0 +1,136 @@
+.seed-tabs__root {
+    position: relative
+}
+.seed-tabs__list {
+    position: relative;
+    background-color: var(--seed-color-bg-layer-default);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--seed-color-stroke-neutral-muted)
+}
+.seed-tabs__listContent {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    width: max-content;
+    min-width: 100%
+}
+.seed-tabs__carousel {
+    display: flex;
+    overflow: hidden
+}
+.seed-tabs__carouselCamera {
+    width: 100%
+}
+.seed-tabs__content {
+    width: 100%;
+    min-width: 0px;
+    overflow: hidden
+}
+.seed-tabs__indicator {
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    height: 2px;
+    width: var(--tabs-indicator-width, 0px);
+    background-color: var(--seed-color-fg-neutral);
+    transform: translateX(var(--tabs-indicator-x, 0px));
+    transition-property: transform, width;
+    transition-duration: var(--seed-duration-d4);
+    transition-timing-function: var(--seed-timing-function-easing)
+}
+.seed-tabs__trigger {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-tabs__triggerLabel {
+    white-space: nowrap;
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-tabs__listContent--triggerLayout_fill {
+    width: 100%;
+    padding-left: 0px;
+    padding-right: 0px
+}
+.seed-tabs__indicator--triggerLayout_fill {
+    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter)));
+    width: calc(var(--tabs-indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter))
+}
+.seed-tabs__trigger--triggerLayout_fill {
+    flex: 1
+}
+.seed-tabs__listContent--triggerLayout_hug {
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
+}
+.seed-tabs__indicator--triggerLayout_hug {
+    transform: translateX(calc(var(--tabs-indicator-x, 0px) + 0px));
+    width: calc(var(--tabs-indicator-width, 0px) - 2 * 0px)
+}
+.seed-tabs__root--contentLayout_fill {
+    display: flex;
+    flex-direction: column;
+    height: 100%
+}
+.seed-tabs__carousel--contentLayout_fill {
+    flex: 1
+}
+.seed-tabs__carouselCamera--contentLayout_fill {
+    height: 100%
+}
+.seed-tabs__content--contentLayout_fill {
+    height: 100%
+}
+.seed-tabs__list--size_small {
+    min-height: 40px
+}
+.seed-tabs__trigger--size_small {
+    min-height: 40px;
+    padding-left: var(--seed-dimension-x2_5);
+    padding-right: var(--seed-dimension-x2_5);
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5)
+}
+.seed-tabs__triggerLabel--size_small {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-tabs__list--size_medium {
+    min-height: 44px
+}
+.seed-tabs__trigger--size_medium {
+    min-height: 44px;
+    padding-left: var(--seed-dimension-x2_5);
+    padding-right: var(--seed-dimension-x2_5);
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5)
+}
+.seed-tabs__triggerLabel--size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-tabs__list--stickyList_true {
+    position: sticky;
+    top: 0px;
+    z-index: 1
+}
+.seed-tabs__triggerLabel--selected_true {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-tabs__content--selected_false {
+    display: none
+}
+.seed-tabs__triggerLabel--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-tabs__content--selected_false-inCarousel_true {
+    display: flex
+}

package/recipes/tabs.d.ts

@@ -0,0 +1,39 @@
+declare interface TabsVariant {
+  /**
+  * @default "fill"
+  */
+  triggerLayout: "fill" | "hug";
+/**
+  * @default "hug"
+  */
+  contentLayout: "fill" | "hug";
+/**
+  * @default "small"
+  */
+  size: "small" | "medium";
+/**
+  * @default false
+  */
+  stickyList: boolean;
+selected: boolean;
+disabled: boolean;
+inCarousel: boolean;
+}
+
+declare type TabsVariantMap = {
+  [key in keyof TabsVariant]: Array<TabsVariant[key]>;
+};
+
+export declare type TabsVariantProps = Partial<TabsVariant>;
+
+export declare type TabsSlotName = "root" | "list" | "listContent" | "carousel" | "carouselCamera" | "content" | "indicator" | "trigger" | "triggerLabel";
+
+export declare const tabsVariantMap: TabsVariantMap;
+
+export declare const tabs: ((
+  props?: TabsVariantProps,
+) => Record<TabsSlotName, string>) & {
+  splitVariantProps: <T extends TabsVariantProps>(
+    props: T,
+  ) => [TabsVariantProps, Omit<T, keyof TabsVariantProps>];
+}