@seed-design/css 0.0.0-alpha-20260324091316

package/recipes/list-item.mjs

@@ -0,0 +1,59 @@
+import './list-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const listItemSlotNames = [
+  [
+    "root",
+    "seed-list-item__root"
+  ],
+  [
+    "content",
+    "seed-list-item__content"
+  ],
+  [
+    "title",
+    "seed-list-item__title"
+  ],
+  [
+    "detail",
+    "seed-list-item__detail"
+  ],
+  [
+    "prefix",
+    "seed-list-item__prefix"
+  ],
+  [
+    "suffix",
+    "seed-list-item__suffix"
+  ]
+];
+
+const defaultVariant = {
+  "highlighted": false
+};
+
+const compoundVariants = [];
+
+export const listItemVariantMap = {
+  "highlighted": [
+    false,
+    true
+  ]
+};
+
+export const listItemVariantKeys = Object.keys(listItemVariantMap);
+
+export function listItem(props) {
+  return Object.fromEntries(
+    listItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(listItem, { splitVariantProps: (props) => splitVariantProps(props, listItemVariantMap) });
+
+// @recipe(seed): list-item

package/recipes/manner-temp-badge.css

@@ -0,0 +1,60 @@
+.seed-manner-temp-badge {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    text-transform: none;
+    text-align: start;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none;
+    border-radius: var(--seed-radius-full);
+    min-height: var(--seed-dimension-x5);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    padding-top: var(--seed-dimension-x0_5);
+    padding-bottom: var(--seed-dimension-x0_5);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-bold)
+}
+.seed-manner-temp-badge--level_l1 {
+    background-color: var(--seed-color-manner-temp-l1-bg);
+    color: var(--seed-color-manner-temp-l1-text)
+}
+.seed-manner-temp-badge--level_l2 {
+    background-color: var(--seed-color-manner-temp-l2-bg);
+    color: var(--seed-color-manner-temp-l2-text)
+}
+.seed-manner-temp-badge--level_l3 {
+    background-color: var(--seed-color-manner-temp-l3-bg);
+    color: var(--seed-color-manner-temp-l3-text)
+}
+.seed-manner-temp-badge--level_l4 {
+    background-color: var(--seed-color-manner-temp-l4-bg);
+    color: var(--seed-color-manner-temp-l4-text)
+}
+.seed-manner-temp-badge--level_l5 {
+    background-color: var(--seed-color-manner-temp-l5-bg);
+    color: var(--seed-color-manner-temp-l5-text)
+}
+.seed-manner-temp-badge--level_l6 {
+    background-color: var(--seed-color-manner-temp-l6-bg);
+    color: var(--seed-color-manner-temp-l6-text)
+}
+.seed-manner-temp-badge--level_l7 {
+    background-color: var(--seed-color-manner-temp-l7-bg);
+    color: var(--seed-color-manner-temp-l7-text)
+}
+.seed-manner-temp-badge--level_l8 {
+    background-color: var(--seed-color-manner-temp-l8-bg);
+    color: var(--seed-color-manner-temp-l8-text)
+}
+.seed-manner-temp-badge--level_l9 {
+    background-color: var(--seed-color-manner-temp-l9-bg);
+    color: var(--seed-color-manner-temp-l9-text)
+}
+.seed-manner-temp-badge--level_l10 {
+    background-color: var(--seed-color-manner-temp-l10-bg);
+    color: var(--seed-color-manner-temp-l10-text)
+}

package/recipes/manner-temp-badge.d.ts

@@ -0,0 +1,22 @@
+declare interface MannerTempBadgeVariant {
+  /**
+  * @default "l1"
+  */
+  level: "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "l8" | "l9" | "l10";
+}
+
+declare type MannerTempBadgeVariantMap = {
+  [key in keyof MannerTempBadgeVariant]: Array<MannerTempBadgeVariant[key]>;
+};
+
+export declare type MannerTempBadgeVariantProps = Partial<MannerTempBadgeVariant>;
+
+export declare const mannerTempBadgeVariantMap: MannerTempBadgeVariantMap;
+
+export declare const mannerTempBadge: ((
+  props?: MannerTempBadgeVariantProps,
+) => string) & {
+  splitVariantProps: <T extends MannerTempBadgeVariantProps>(
+    props: T,
+  ) => [MannerTempBadgeVariantProps, Omit<T, keyof MannerTempBadgeVariantProps>];
+}

package/recipes/manner-temp-badge.layered.css

@@ -0,0 +1,72 @@
+@layer seed-components {
+  .seed-manner-temp-badge {
+    box-sizing: border-box;
+    text-transform: none;
+    text-align: start;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    border-radius: var(--seed-radius-full);
+    min-height: var(--seed-dimension-x5);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    padding-top: var(--seed-dimension-x0_5);
+    padding-bottom: var(--seed-dimension-x0_5);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-bold);
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .seed-manner-temp-badge--level_l1 {
+    background-color: var(--seed-color-manner-temp-l1-bg);
+    color: var(--seed-color-manner-temp-l1-text);
+  }
+
+  .seed-manner-temp-badge--level_l2 {
+    background-color: var(--seed-color-manner-temp-l2-bg);
+    color: var(--seed-color-manner-temp-l2-text);
+  }
+
+  .seed-manner-temp-badge--level_l3 {
+    background-color: var(--seed-color-manner-temp-l3-bg);
+    color: var(--seed-color-manner-temp-l3-text);
+  }
+
+  .seed-manner-temp-badge--level_l4 {
+    background-color: var(--seed-color-manner-temp-l4-bg);
+    color: var(--seed-color-manner-temp-l4-text);
+  }
+
+  .seed-manner-temp-badge--level_l5 {
+    background-color: var(--seed-color-manner-temp-l5-bg);
+    color: var(--seed-color-manner-temp-l5-text);
+  }
+
+  .seed-manner-temp-badge--level_l6 {
+    background-color: var(--seed-color-manner-temp-l6-bg);
+    color: var(--seed-color-manner-temp-l6-text);
+  }
+
+  .seed-manner-temp-badge--level_l7 {
+    background-color: var(--seed-color-manner-temp-l7-bg);
+    color: var(--seed-color-manner-temp-l7-text);
+  }
+
+  .seed-manner-temp-badge--level_l8 {
+    background-color: var(--seed-color-manner-temp-l8-bg);
+    color: var(--seed-color-manner-temp-l8-text);
+  }
+
+  .seed-manner-temp-badge--level_l9 {
+    background-color: var(--seed-color-manner-temp-l9-bg);
+    color: var(--seed-color-manner-temp-l9-text);
+  }
+
+  .seed-manner-temp-badge--level_l10 {
+    background-color: var(--seed-color-manner-temp-l10-bg);
+    color: var(--seed-color-manner-temp-l10-text);
+  }
+}

package/recipes/manner-temp-badge.layered.mjs

@@ -0,0 +1,37 @@
+import './manner-temp-badge.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempBadgeVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6",
+    "l7",
+    "l8",
+    "l9",
+    "l10"
+  ]
+};
+
+export const mannerTempBadgeVariantKeys = Object.keys(mannerTempBadgeVariantMap);
+
+export function mannerTempBadge(props) {
+  return createClassName(
+    "seed-manner-temp-badge",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(mannerTempBadge, { splitVariantProps: (props) => splitVariantProps(props, mannerTempBadgeVariantMap) });
+
+// @recipe(seed): manner-temp-badge

package/recipes/manner-temp-badge.mjs

@@ -0,0 +1,37 @@
+import './manner-temp-badge.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempBadgeVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6",
+    "l7",
+    "l8",
+    "l9",
+    "l10"
+  ]
+};
+
+export const mannerTempBadgeVariantKeys = Object.keys(mannerTempBadgeVariantMap);
+
+export function mannerTempBadge(props) {
+  return createClassName(
+    "seed-manner-temp-badge",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(mannerTempBadge, { splitVariantProps: (props) => splitVariantProps(props, mannerTempBadgeVariantMap) });
+
+// @recipe(seed): manner-temp-badge

package/recipes/manner-temp.css

@@ -0,0 +1,45 @@
+.seed-manner-temp {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--seed-dimension-x1);
+    box-sizing: border-box;
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-bold);
+    --seed-suffix-icon-size: var(--seed-dimension-x8);
+    --seed-suffix-icon-margin-left: calc(var(--seed-dimension-x1) * -1);
+    --seed-suffix-icon-margin-right: calc(var(--seed-dimension-x1) * -1);
+    --seed-suffix-icon-margin-top: calc(var(--seed-dimension-x1) * -1);
+    --seed-suffix-icon-margin-bottom: calc(var(--seed-dimension-x1) * -1)
+}
+.seed-manner-temp--level_l1 {
+    color: var(--seed-color-manner-temp-l1-text)
+}
+.seed-manner-temp--level_l2 {
+    color: var(--seed-color-manner-temp-l2-text)
+}
+.seed-manner-temp--level_l3 {
+    color: var(--seed-color-manner-temp-l3-text)
+}
+.seed-manner-temp--level_l4 {
+    color: var(--seed-color-manner-temp-l4-text)
+}
+.seed-manner-temp--level_l5 {
+    color: var(--seed-color-manner-temp-l5-text)
+}
+.seed-manner-temp--level_l6 {
+    color: var(--seed-color-manner-temp-l6-text)
+}
+.seed-manner-temp--level_l7 {
+    color: var(--seed-color-manner-temp-l7-text)
+}
+.seed-manner-temp--level_l8 {
+    color: var(--seed-color-manner-temp-l8-text)
+}
+.seed-manner-temp--level_l9 {
+    color: var(--seed-color-manner-temp-l9-text)
+}
+.seed-manner-temp--level_l10 {
+    color: var(--seed-color-manner-temp-l10-text)
+}

package/recipes/manner-temp.d.ts

@@ -0,0 +1,22 @@
+declare interface MannerTempVariant {
+  /**
+  * @default "l1"
+  */
+  level: "l1" | "l2" | "l3" | "l4" | "l5" | "l6" | "l7" | "l8" | "l9" | "l10";
+}
+
+declare type MannerTempVariantMap = {
+  [key in keyof MannerTempVariant]: Array<MannerTempVariant[key]>;
+};
+
+export declare type MannerTempVariantProps = Partial<MannerTempVariant>;
+
+export declare const mannerTempVariantMap: MannerTempVariantMap;
+
+export declare const mannerTemp: ((
+  props?: MannerTempVariantProps,
+) => string) & {
+  splitVariantProps: <T extends MannerTempVariantProps>(
+    props: T,
+  ) => [MannerTempVariantProps, Omit<T, keyof MannerTempVariantProps>];
+}

package/recipes/manner-temp.layered.css

@@ -0,0 +1,57 @@
+@layer seed-components {
+  .seed-manner-temp {
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--seed-dimension-x1);
+    box-sizing: border-box;
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-bold);
+    --seed-suffix-icon-size: var(--seed-dimension-x8);
+    --seed-suffix-icon-margin-left: calc(var(--seed-dimension-x1) * -1);
+    --seed-suffix-icon-margin-right: calc(var(--seed-dimension-x1) * -1);
+    --seed-suffix-icon-margin-top: calc(var(--seed-dimension-x1) * -1);
+    --seed-suffix-icon-margin-bottom: calc(var(--seed-dimension-x1) * -1);
+    display: inline-flex;
+  }
+
+  .seed-manner-temp--level_l1 {
+    color: var(--seed-color-manner-temp-l1-text);
+  }
+
+  .seed-manner-temp--level_l2 {
+    color: var(--seed-color-manner-temp-l2-text);
+  }
+
+  .seed-manner-temp--level_l3 {
+    color: var(--seed-color-manner-temp-l3-text);
+  }
+
+  .seed-manner-temp--level_l4 {
+    color: var(--seed-color-manner-temp-l4-text);
+  }
+
+  .seed-manner-temp--level_l5 {
+    color: var(--seed-color-manner-temp-l5-text);
+  }
+
+  .seed-manner-temp--level_l6 {
+    color: var(--seed-color-manner-temp-l6-text);
+  }
+
+  .seed-manner-temp--level_l7 {
+    color: var(--seed-color-manner-temp-l7-text);
+  }
+
+  .seed-manner-temp--level_l8 {
+    color: var(--seed-color-manner-temp-l8-text);
+  }
+
+  .seed-manner-temp--level_l9 {
+    color: var(--seed-color-manner-temp-l9-text);
+  }
+
+  .seed-manner-temp--level_l10 {
+    color: var(--seed-color-manner-temp-l10-text);
+  }
+}

package/recipes/manner-temp.layered.mjs

@@ -0,0 +1,37 @@
+import './manner-temp.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6",
+    "l7",
+    "l8",
+    "l9",
+    "l10"
+  ]
+};
+
+export const mannerTempVariantKeys = Object.keys(mannerTempVariantMap);
+
+export function mannerTemp(props) {
+  return createClassName(
+    "seed-manner-temp",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(mannerTemp, { splitVariantProps: (props) => splitVariantProps(props, mannerTempVariantMap) });
+
+// @recipe(seed): manner-temp

package/recipes/manner-temp.mjs

@@ -0,0 +1,37 @@
+import './manner-temp.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6",
+    "l7",
+    "l8",
+    "l9",
+    "l10"
+  ]
+};
+
+export const mannerTempVariantKeys = Object.keys(mannerTempVariantMap);
+
+export function mannerTemp(props) {
+  return createClassName(
+    "seed-manner-temp",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(mannerTemp, { splitVariantProps: (props) => splitVariantProps(props, mannerTempVariantMap) });
+
+// @recipe(seed): manner-temp

package/recipes/menu-sheet-item.css

@@ -0,0 +1,83 @@
+.seed-menu-sheet-item__root {
+    display: flex;
+    align-items: center;
+    background-color: var(--seed-color-bg-neutral-weak);
+    min-height: 52px;
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x3_5);
+    padding-bottom: var(--seed-dimension-x3_5);
+    gap: var(--seed-dimension-x3_5);
+    box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
+    margin: 0;
+    border: none;
+    font-family: inherit;
+}
+@media (hover: hover) {
+    .seed-menu-sheet-item__root:is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-menu-sheet-item__root:is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+.seed-menu-sheet-item__root:first-child {
+    border-top-left-radius: var(--seed-radius-r4);
+    border-top-right-radius: var(--seed-radius-r4);
+}
+.seed-menu-sheet-item__root:last-child {
+    border-bottom-left-radius: var(--seed-radius-r4);
+    border-bottom-right-radius: var(--seed-radius-r4);
+    box-shadow: none;
+}
+.seed-menu-sheet-item__root {
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-menu-sheet-item__root:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-menu-sheet-item__root {
+    --seed-prefix-icon-size: 22px;
+}
+.seed-menu-sheet-item__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--seed-dimension-x0_5);
+}
+.seed-menu-sheet-item__label {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-regular);
+}
+.seed-menu-sheet-item__description {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-menu-sheet-item__root--tone_neutral {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-menu-sheet-item__label--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-menu-sheet-item__root--tone_critical {
+    --seed-prefix-icon-color: var(--seed-color-fg-critical);
+}
+.seed-menu-sheet-item__label--tone_critical {
+    color: var(--seed-color-fg-critical);
+}
+.seed-menu-sheet-item__content--labelAlign_left {
+    text-align: start;
+}
+.seed-menu-sheet-item__root--labelAlign_center {
+    justify-content: center;
+}
+.seed-menu-sheet-item__content--labelAlign_center {
+    align-items: center;
+}

package/recipes/menu-sheet-item.d.ts

@@ -0,0 +1,28 @@
+declare interface MenuSheetItemVariant {
+  /**
+  * @default "neutral"
+  */
+  tone: "neutral" | "critical";
+/**
+  * @default "left"
+  */
+  labelAlign: "left" | "center";
+}
+
+declare type MenuSheetItemVariantMap = {
+  [key in keyof MenuSheetItemVariant]: Array<MenuSheetItemVariant[key]>;
+};
+
+export declare type MenuSheetItemVariantProps = Partial<MenuSheetItemVariant>;
+
+export declare type MenuSheetItemSlotName = "root" | "content" | "label" | "description";
+
+export declare const menuSheetItemVariantMap: MenuSheetItemVariantMap;
+
+export declare const menuSheetItem: ((
+  props?: MenuSheetItemVariantProps,
+) => Record<MenuSheetItemSlotName, string>) & {
+  splitVariantProps: <T extends MenuSheetItemVariantProps>(
+    props: T,
+  ) => [MenuSheetItemVariantProps, Omit<T, keyof MenuSheetItemVariantProps>];
+}