@seed-design/lynx-css 0.0.0-alpha-20260622094810

package/recipes/action-button.mjs

@@ -0,0 +1,212 @@
+import './action-button.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const actionButtonSlotNames = [
+  [
+    "root",
+    "seed-action-button__root"
+  ],
+  [
+    "content",
+    "seed-action-button__content"
+  ],
+  [
+    "text",
+    "seed-action-button__text"
+  ],
+  [
+    "prefixIcon",
+    "seed-action-button__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-action-button__suffixIcon"
+  ],
+  [
+    "icon",
+    "seed-action-button__icon"
+  ],
+  [
+    "loadingIndicator",
+    "seed-action-button__loadingIndicator"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "brandSolid",
+  "size": "medium",
+  "layout": "withText",
+  "pressed": false,
+  "disabled": false,
+  "loading": false
+};
+
+const compoundVariants = [
+  {
+    "size": "xsmall",
+    "layout": "withText"
+  },
+  {
+    "size": "xsmall",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "small",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "large",
+    "layout": "withText"
+  },
+  {
+    "size": "large",
+    "layout": "iconOnly"
+  },
+  {
+    "variant": "brandSolid",
+    "pressed": true
+  },
+  {
+    "variant": "neutralSolid",
+    "pressed": true
+  },
+  {
+    "variant": "neutralWeak",
+    "pressed": true
+  },
+  {
+    "variant": "criticalSolid",
+    "pressed": true
+  },
+  {
+    "variant": "brandOutline",
+    "pressed": true
+  },
+  {
+    "variant": "neutralOutline",
+    "pressed": true
+  },
+  {
+    "variant": "ghost",
+    "pressed": true
+  },
+  {
+    "variant": "brandSolid",
+    "disabled": true
+  },
+  {
+    "variant": "neutralSolid",
+    "disabled": true
+  },
+  {
+    "variant": "neutralWeak",
+    "disabled": true
+  },
+  {
+    "variant": "criticalSolid",
+    "disabled": true
+  },
+  {
+    "variant": "brandOutline",
+    "disabled": true
+  },
+  {
+    "variant": "neutralOutline",
+    "disabled": true
+  },
+  {
+    "variant": "ghost",
+    "disabled": true
+  },
+  {
+    "variant": "brandSolid",
+    "loading": true
+  },
+  {
+    "variant": "neutralSolid",
+    "loading": true
+  },
+  {
+    "variant": "neutralWeak",
+    "loading": true
+  },
+  {
+    "variant": "criticalSolid",
+    "loading": true
+  },
+  {
+    "variant": "brandOutline",
+    "loading": true
+  },
+  {
+    "variant": "neutralOutline",
+    "loading": true
+  },
+  {
+    "variant": "ghost",
+    "loading": true
+  }
+];
+
+export const actionButtonVariantMap = {
+  "variant": [
+    "brandSolid",
+    "neutralSolid",
+    "neutralWeak",
+    "criticalSolid",
+    "brandOutline",
+    "neutralOutline",
+    "ghost"
+  ],
+  "size": [
+    "xsmall",
+    "small",
+    "medium",
+    "large"
+  ],
+  "layout": [
+    "withText",
+    "iconOnly"
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "loading": [
+    true,
+    false
+  ]
+};
+
+export const actionButtonVariantKeys = Object.keys(actionButtonVariantMap);
+
+export function actionButton(props) {
+  return Object.fromEntries(
+    actionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(actionButton, { splitVariantProps: (props) => splitVariantProps(props, actionButtonVariantMap) });
+
+// @recipe(seed): action-button

package/recipes/app-bar-main.css

@@ -0,0 +1,67 @@
+.seed-app-bar-main__root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0
+}
+.seed-app-bar-main__title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+.seed-app-bar-main__subtitle {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+.seed-app-bar-main__title--layout_titleOnly {
+    font-size: var(--seed-font-size-t6);
+    font-weight: var(--seed-font-weight-bold);
+    line-height: var(--seed-line-height-t6)
+}
+.seed-app-bar-main__title--layout_withSubtitle {
+    font-size: var(--seed-font-size-t5);
+    font-weight: var(--seed-font-weight-bold);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-app-bar-main__subtitle--layout_withSubtitle {
+    font-size: var(--seed-font-size-t2);
+    font-weight: var(--seed-font-weight-regular);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-app-bar-main__root--theme_cupertino {
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    top: var(--seed-safe-area-top);
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding-left: var(--centered-title-padding-x, 0);
+    padding-right: var(--centered-title-padding-x, 0)
+}
+.seed-app-bar-main__root--theme_android {
+    align-items: flex-start;
+    justify-content: center;
+    width: 100%;
+    height: 56px
+}
+.seed-app-bar-main__root--tone_layer {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-app-bar-main__title--tone_layer {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-app-bar-main__subtitle--tone_layer {
+    color: var(--seed-color-fg-neutral-muted)
+}
+.seed-app-bar-main__root--tone_transparent {
+    color: var(--seed-color-palette-static-white)
+}
+.seed-app-bar-main__title--tone_transparent {
+    color: var(--seed-color-palette-static-white)
+}
+.seed-app-bar-main__subtitle--tone_transparent {
+    color: var(--seed-color-palette-static-white)
+}

package/recipes/app-bar-main.d.ts

@@ -0,0 +1,36 @@
+declare interface AppBarMainVariant {
+  /**
+  * @default "titleOnly"
+  */
+  layout: "titleOnly" | "withSubtitle";
+/**
+  * @default "cupertino"
+  */
+  theme: "cupertino" | "android";
+/**
+  * @default "slideFromRightIOS"
+  */
+  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid" | "fadeIn";
+/**
+  * @default "layer"
+  */
+  tone: "layer" | "transparent";
+}
+
+declare type AppBarMainVariantMap = {
+  [key in keyof AppBarMainVariant]: Array<AppBarMainVariant[key]>;
+};
+
+export declare type AppBarMainVariantProps = Partial<AppBarMainVariant>;
+
+export declare type AppBarMainSlotName = "root" | "title" | "subtitle";
+
+export declare const appBarMainVariantMap: AppBarMainVariantMap;
+
+export declare const appBarMain: ((
+  props?: AppBarMainVariantProps,
+) => Record<AppBarMainSlotName, string>) & {
+  splitVariantProps: <T extends AppBarMainVariantProps>(
+    props: T,
+  ) => [AppBarMainVariantProps, Omit<T, keyof AppBarMainVariantProps>];
+}

package/recipes/app-bar-main.mjs

@@ -0,0 +1,63 @@
+import './app-bar-main.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const appBarMainSlotNames = [
+  [
+    "root",
+    "seed-app-bar-main__root"
+  ],
+  [
+    "title",
+    "seed-app-bar-main__title"
+  ],
+  [
+    "subtitle",
+    "seed-app-bar-main__subtitle"
+  ]
+];
+
+const defaultVariant = {
+  "layout": "titleOnly",
+  "theme": "cupertino",
+  "transitionStyle": "slideFromRightIOS",
+  "tone": "layer"
+};
+
+const compoundVariants = [];
+
+export const appBarMainVariantMap = {
+  "layout": [
+    "titleOnly",
+    "withSubtitle"
+  ],
+  "theme": [
+    "cupertino",
+    "android"
+  ],
+  "transitionStyle": [
+    "slideFromRightIOS",
+    "fadeFromBottomAndroid",
+    "fadeIn"
+  ],
+  "tone": [
+    "layer",
+    "transparent"
+  ]
+};
+
+export const appBarMainVariantKeys = Object.keys(appBarMainVariantMap);
+
+export function appBarMain(props) {
+  return Object.fromEntries(
+    appBarMainSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(appBarMain, { splitVariantProps: (props) => splitVariantProps(props, appBarMainVariantMap) });
+
+// @recipe(seed): app-bar-main

package/recipes/app-bar.css

@@ -0,0 +1,101 @@
+.seed-app-bar__root {
+    position: relative;
+    z-index: var(--z-index-app-bar);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end
+}
+.seed-app-bar__background {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1
+}
+.seed-app-bar__left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+    z-index: 1
+}
+.seed-app-bar__right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+    margin-left: auto;
+    z-index: 1
+}
+.seed-app-bar__iconButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-width: 0;
+    background: #00000000;
+    padding: 0;
+    border-radius: var(--seed-radius-r1)
+}
+.seed-app-bar__icon {
+    flex-shrink: 0
+}
+.seed-app-bar__custom {
+    display: flex;
+    flex-direction: row;
+    align-items: center
+}
+.seed-app-bar__root--theme_cupertino {
+    height: calc(44px + var(--seed-safe-area-top));
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-safe-area-top)
+}
+.seed-app-bar__left--theme_cupertino {
+    height: 44px
+}
+.seed-app-bar__right--theme_cupertino {
+    height: 44px
+}
+.seed-app-bar__iconButton--theme_cupertino {
+    width: 44px;
+    height: 44px
+}
+.seed-app-bar__icon--theme_cupertino {
+    width: 24px;
+    height: 24px
+}
+.seed-app-bar__root--theme_android {
+    height: calc(56px + var(--seed-safe-area-top));
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-safe-area-top)
+}
+.seed-app-bar__left--theme_android {
+    height: 56px;
+    padding-right: 16px
+}
+.seed-app-bar__right--theme_android {
+    height: 56px
+}
+.seed-app-bar__iconButton--theme_android {
+    width: 44px;
+    height: 44px
+}
+.seed-app-bar__icon--theme_android {
+    width: 24px;
+    height: 24px
+}
+.seed-app-bar__background--tone_layer {
+    background: var(--seed-color-bg-layer-default)
+}
+.seed-app-bar__icon--tone_layer {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-app-bar__background--tone_transparent {
+    background: #00000000
+}
+.seed-app-bar__icon--tone_transparent {
+    color: var(--seed-color-palette-static-white)
+}

package/recipes/app-bar.d.ts

@@ -0,0 +1,32 @@
+declare interface AppBarVariant {
+  /**
+  * @default "cupertino"
+  */
+  theme: "cupertino" | "android";
+/**
+  * @default "slideFromRightIOS"
+  */
+  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid" | "fadeIn";
+/**
+  * @default "layer"
+  */
+  tone: "layer" | "transparent";
+}
+
+declare type AppBarVariantMap = {
+  [key in keyof AppBarVariant]: Array<AppBarVariant[key]>;
+};
+
+export declare type AppBarVariantProps = Partial<AppBarVariant>;
+
+export declare type AppBarSlotName = "root" | "background" | "left" | "right" | "iconButton" | "icon" | "custom";
+
+export declare const appBarVariantMap: AppBarVariantMap;
+
+export declare const appBar: ((
+  props?: AppBarVariantProps,
+) => Record<AppBarSlotName, string>) & {
+  splitVariantProps: <T extends AppBarVariantProps>(
+    props: T,
+  ) => [AppBarVariantProps, Omit<T, keyof AppBarVariantProps>];
+}

package/recipes/app-bar.mjs

@@ -0,0 +1,74 @@
+import './app-bar.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const appBarSlotNames = [
+  [
+    "root",
+    "seed-app-bar__root"
+  ],
+  [
+    "background",
+    "seed-app-bar__background"
+  ],
+  [
+    "left",
+    "seed-app-bar__left"
+  ],
+  [
+    "right",
+    "seed-app-bar__right"
+  ],
+  [
+    "iconButton",
+    "seed-app-bar__iconButton"
+  ],
+  [
+    "icon",
+    "seed-app-bar__icon"
+  ],
+  [
+    "custom",
+    "seed-app-bar__custom"
+  ]
+];
+
+const defaultVariant = {
+  "theme": "cupertino",
+  "transitionStyle": "slideFromRightIOS",
+  "tone": "layer"
+};
+
+const compoundVariants = [];
+
+export const appBarVariantMap = {
+  "theme": [
+    "cupertino",
+    "android"
+  ],
+  "transitionStyle": [
+    "slideFromRightIOS",
+    "fadeFromBottomAndroid",
+    "fadeIn"
+  ],
+  "tone": [
+    "layer",
+    "transparent"
+  ]
+};
+
+export const appBarVariantKeys = Object.keys(appBarVariantMap);
+
+export function appBar(props) {
+  return Object.fromEntries(
+    appBarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(appBar, { splitVariantProps: (props) => splitVariantProps(props, appBarVariantMap) });
+
+// @recipe(seed): app-bar