@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.3

package/recipes/manner-temp.css

@@ -1,50 +0,0 @@
-.seed-manner-temp {
-    display: inline-flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--seed-dimension-x1);
-    --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__text {
-    --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)
-;
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-bold)}
-.seed-manner-temp__text--level_l1 {
-    color: var(--seed-color-manner-temp-l1-text)
-}
-.seed-manner-temp__text--level_l2 {
-    color: var(--seed-color-manner-temp-l2-text)
-}
-.seed-manner-temp__text--level_l3 {
-    color: var(--seed-color-manner-temp-l3-text)
-}
-.seed-manner-temp__text--level_l4 {
-    color: var(--seed-color-manner-temp-l4-text)
-}
-.seed-manner-temp__text--level_l5 {
-    color: var(--seed-color-manner-temp-l5-text)
-}
-.seed-manner-temp__text--level_l6 {
-    color: var(--seed-color-manner-temp-l6-text)
-}
-.seed-manner-temp__text--level_l7 {
-    color: var(--seed-color-manner-temp-l7-text)
-}
-.seed-manner-temp__text--level_l8 {
-    color: var(--seed-color-manner-temp-l8-text)
-}
-.seed-manner-temp__text--level_l9 {
-    color: var(--seed-color-manner-temp-l9-text)
-}
-.seed-manner-temp__text--level_l10 {
-    color: var(--seed-color-manner-temp-l10-text)
-}

package/recipes/manner-temp.d.ts

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

package/recipes/manner-temp.layered.css

@@ -1,71 +0,0 @@
-@layer seed-components {
-  .seed-manner-temp {
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--seed-dimension-x1);
-    --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__text {
-    --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__text {
-    --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);
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-bold);
-  }
-
-  .seed-manner-temp__text--level_l1 {
-    color: var(--seed-color-manner-temp-l1-text);
-  }
-
-  .seed-manner-temp__text--level_l2 {
-    color: var(--seed-color-manner-temp-l2-text);
-  }
-
-  .seed-manner-temp__text--level_l3 {
-    color: var(--seed-color-manner-temp-l3-text);
-  }
-
-  .seed-manner-temp__text--level_l4 {
-    color: var(--seed-color-manner-temp-l4-text);
-  }
-
-  .seed-manner-temp__text--level_l5 {
-    color: var(--seed-color-manner-temp-l5-text);
-  }
-
-  .seed-manner-temp__text--level_l6 {
-    color: var(--seed-color-manner-temp-l6-text);
-  }
-
-  .seed-manner-temp__text--level_l7 {
-    color: var(--seed-color-manner-temp-l7-text);
-  }
-
-  .seed-manner-temp__text--level_l8 {
-    color: var(--seed-color-manner-temp-l8-text);
-  }
-
-  .seed-manner-temp__text--level_l9 {
-    color: var(--seed-color-manner-temp-l9-text);
-  }
-
-  .seed-manner-temp__text--level_l10 {
-    color: var(--seed-color-manner-temp-l10-text);
-  }
-}

package/recipes/manner-temp.layered.mjs

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

package/recipes/manner-temp.mjs

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

package/recipes/menu-sheet-item.css

@@ -1,67 +0,0 @@
-.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;
-}
-.seed-menu-sheet-item__root: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 {
-    --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

@@ -1,28 +0,0 @@
-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>];
-}

package/recipes/menu-sheet-item.layered.css

@@ -1,83 +0,0 @@
-@layer seed-components {
-  .seed-menu-sheet-item__root {
-    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);
-    align-items: center;
-    gap: var(--seed-dimension-x3_5);
-    box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
-    border: none;
-    margin: 0;
-    font-family: inherit;
-    display: flex;
-  }
-
-  .seed-menu-sheet-item__root: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 {
-    --seed-prefix-icon-size: 22px;
-  }
-
-  .seed-menu-sheet-item__content {
-    gap: var(--seed-dimension-x0_5);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .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.layered.mjs

@@ -1,56 +0,0 @@
-import './menu-sheet-item.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const menuSheetItemSlotNames = [
-  [
-    "root",
-    "seed-menu-sheet-item__root"
-  ],
-  [
-    "content",
-    "seed-menu-sheet-item__content"
-  ],
-  [
-    "label",
-    "seed-menu-sheet-item__label"
-  ],
-  [
-    "description",
-    "seed-menu-sheet-item__description"
-  ]
-];
-
-const defaultVariant = {
-  "tone": "neutral",
-  "labelAlign": "left"
-};
-
-const compoundVariants = [];
-
-export const menuSheetItemVariantMap = {
-  "tone": [
-    "neutral",
-    "critical"
-  ],
-  "labelAlign": [
-    "left",
-    "center"
-  ]
-};
-
-export const menuSheetItemVariantKeys = Object.keys(menuSheetItemVariantMap);
-
-export function menuSheetItem(props) {
-  return Object.fromEntries(
-    menuSheetItemSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(menuSheetItem, { splitVariantProps: (props) => splitVariantProps(props, menuSheetItemVariantMap) });
-
-// @recipe(seed): menu-sheet-item

package/recipes/menu-sheet-item.mjs

@@ -1,56 +0,0 @@
-import './menu-sheet-item.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const menuSheetItemSlotNames = [
-  [
-    "root",
-    "seed-menu-sheet-item__root"
-  ],
-  [
-    "content",
-    "seed-menu-sheet-item__content"
-  ],
-  [
-    "label",
-    "seed-menu-sheet-item__label"
-  ],
-  [
-    "description",
-    "seed-menu-sheet-item__description"
-  ]
-];
-
-const defaultVariant = {
-  "tone": "neutral",
-  "labelAlign": "left"
-};
-
-const compoundVariants = [];
-
-export const menuSheetItemVariantMap = {
-  "tone": [
-    "neutral",
-    "critical"
-  ],
-  "labelAlign": [
-    "left",
-    "center"
-  ]
-};
-
-export const menuSheetItemVariantKeys = Object.keys(menuSheetItemVariantMap);
-
-export function menuSheetItem(props) {
-  return Object.fromEntries(
-    menuSheetItemSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(menuSheetItem, { splitVariantProps: (props) => splitVariantProps(props, menuSheetItemVariantMap) });
-
-// @recipe(seed): menu-sheet-item

package/recipes/menu-sheet.css

@@ -1,135 +0,0 @@
-.seed-menu-sheet__positioner {
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    --sheet-z-index: 2;
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
-}
-.seed-menu-sheet__backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: var(--seed-color-bg-overlay);
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
-}
-.seed-menu-sheet__content {
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
-    background: var(--seed-color-bg-layer-floating);
-    padding-left: var(--seed-dimension-spacing-x-global-gutter);
-    padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    padding-top: var(--seed-dimension-x4);
-    padding-bottom: calc(var(--seed-dimension-x4) + env(safe-area-inset-bottom));
-    border-top-left-radius: var(--seed-radius-r5);
-    border-top-right-radius: var(--seed-radius-r5);
-}
-.seed-menu-sheet__header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: var(--seed-dimension-x1);
-    padding-bottom: var(--seed-dimension-x4);
-}
-.seed-menu-sheet__title {
-    color: var(--seed-color-fg-neutral);
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-    font-weight: var(--seed-font-weight-bold);
-    margin: 0;
-}
-.seed-menu-sheet__description {
-    color: var(--seed-color-fg-neutral-muted);
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-    font-weight: var(--seed-font-weight-regular);
-    margin: 0;
-}
-.seed-menu-sheet__list {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--seed-dimension-x2_5);
-}
-.seed-menu-sheet__group {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    overflow: hidden;
-    border-radius: var(--seed-radius-r4);
-}
-.seed-menu-sheet__footer {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    padding-top: var(--seed-dimension-x2_5);
-}
-.seed-menu-sheet__closeButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--seed-color-bg-neutral-weak);
-    min-height: 52px;
-    padding-left: var(--seed-dimension-x5);
-    padding-right: var(--seed-dimension-x5);
-    padding-top: var(--seed-dimension-x3_5);
-    padding-bottom: var(--seed-dimension-x3_5);
-    border-radius: var(--seed-radius-r3);
-    border: none;
-    font-family: inherit;
-    color: var(--seed-color-fg-neutral);
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-medium);
-}
-.seed-menu-sheet__closeButton:active {
-    background-color: var(--seed-color-bg-neutral-weak-pressed);
-}
-.seed-menu-sheet__backdrop--skipAnimation_false.seed-menu-sheet__backdrop--state_open, .seed-menu-sheet__backdrop--skipAnimation_false.seed-menu-sheet__backdrop--open_true {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d2);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-}
-.seed-menu-sheet__backdrop--skipAnimation_false:not(.seed-menu-sheet__backdrop--state_open):not([data-open]) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-exit);
-    animation-duration: var(--seed-duration-d2);
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-menu-sheet__content--skipAnimation_false.seed-menu-sheet__content--state_open, .seed-menu-sheet__content--skipAnimation_false.seed-menu-sheet__content--open_true {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter-expressive);
-    animation-duration: var(--seed-duration-d6);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 100%;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-}
-.seed-menu-sheet__content--skipAnimation_false:not(.seed-menu-sheet__content--state_open):not([data-open]) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-exit);
-    animation-duration: var(--seed-duration-d4);
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 100%;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}