@seed-design/lynx-css 0.1.1-alpha.0

package/recipes/tabs.mjs

@@ -0,0 +1,78 @@
+import './tabs.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tabsSlotNames = [
+  [
+    "root",
+    "seed-tabs__root"
+  ],
+  [
+    "list",
+    "seed-tabs__list"
+  ],
+  [
+    "carousel",
+    "seed-tabs__carousel"
+  ],
+  [
+    "carouselCamera",
+    "seed-tabs__carouselCamera"
+  ],
+  [
+    "content",
+    "seed-tabs__content"
+  ],
+  [
+    "indicator",
+    "seed-tabs__indicator"
+  ],
+  [
+    "trigger",
+    "seed-tabs__trigger"
+  ]
+];
+
+const defaultVariant = {
+  "triggerLayout": "fill",
+  "contentLayout": "hug",
+  "size": "small",
+  "stickyList": false
+};
+
+const compoundVariants = [];
+
+export const tabsVariantMap = {
+  "triggerLayout": [
+    "fill",
+    "hug"
+  ],
+  "contentLayout": [
+    "fill",
+    "hug"
+  ],
+  "size": [
+    "small",
+    "medium"
+  ],
+  "stickyList": [
+    true,
+    false
+  ]
+};
+
+export const tabsVariantKeys = Object.keys(tabsVariantMap);
+
+export function tabs(props) {
+  return Object.fromEntries(
+    tabsSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tabs, { splitVariantProps: (props) => splitVariantProps(props, tabsVariantMap) });
+
+// @recipe(seed): tabs

package/recipes/tag-group-item.css

@@ -0,0 +1,75 @@
+.seed-tag-group-item__root {
+    display: var(--tag-group-item-display);
+    align-items: center;
+    flex-shrink: var(--seed-box-flex-shrink, 1);
+    min-width: 0;
+}
+.seed-tag-group-item__label {
+    display: inline;
+    min-width: 0;
+    overflow: var(--tag-group-item-overflow);
+    text-overflow: var(--tag-group-item-text-overflow);
+}
+.seed-tag-group-item__label:not(:first-child) {
+    margin-left: var(--seed-dimension-x0_5);
+}
+.seed-tag-group-item__label:not(:last-child) {
+    margin-right: var(--seed-dimension-x0_5);
+}
+.seed-tag-group-item__root--size_t2 {
+    --seed-prefix-icon-size: var(--seed-dimension-x3);
+    --seed-suffix-icon-size: var(--seed-dimension-x3);
+    --seed-icon-size: var(--seed-dimension-x3);
+}
+.seed-tag-group-item__label--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+}
+.seed-tag-group-item__root--size_t3 {
+    --seed-prefix-icon-size: 13px;
+    --seed-suffix-icon-size: 13px;
+    --seed-icon-size: 13px;
+}
+.seed-tag-group-item__label--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+}
+.seed-tag-group-item__root--size_t4 {
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    --seed-icon-size: var(--seed-dimension-x3_5);
+}
+.seed-tag-group-item__label--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+}
+.seed-tag-group-item__label--weight_regular {
+    font-weight: var(--seed-font-weight-regular);
+}
+.seed-tag-group-item__label--weight_bold {
+    font-weight: var(--seed-font-weight-bold);
+}
+.seed-tag-group-item__root--tone_neutralSubtle {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-tag-group-item__label--tone_neutralSubtle {
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-tag-group-item__root--tone_neutral {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-tag-group-item__label--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-tag-group-item__root--tone_brand {
+    --seed-prefix-icon-color: var(--seed-color-fg-brand);
+    --seed-suffix-icon-color: var(--seed-color-fg-brand);
+    --seed-icon-color: var(--seed-color-fg-brand);
+}
+.seed-tag-group-item__label--tone_brand {
+    color: var(--seed-color-fg-brand);
+}

package/recipes/tag-group-item.d.ts

@@ -0,0 +1,32 @@
+declare interface TagGroupItemVariant {
+  /**
+  * @default "t2"
+  */
+  size: "t2" | "t3" | "t4";
+/**
+  * @default "regular"
+  */
+  weight: "regular" | "bold";
+/**
+  * @default "neutralSubtle"
+  */
+  tone: "neutralSubtle" | "neutral" | "brand";
+}
+
+declare type TagGroupItemVariantMap = {
+  [key in keyof TagGroupItemVariant]: Array<TagGroupItemVariant[key]>;
+};
+
+export declare type TagGroupItemVariantProps = Partial<TagGroupItemVariant>;
+
+export declare type TagGroupItemSlotName = "root" | "label";
+
+export declare const tagGroupItemVariantMap: TagGroupItemVariantMap;
+
+export declare const tagGroupItem: ((
+  props?: TagGroupItemVariantProps,
+) => Record<TagGroupItemSlotName, string>) & {
+  splitVariantProps: <T extends TagGroupItemVariantProps>(
+    props: T,
+  ) => [TagGroupItemVariantProps, Omit<T, keyof TagGroupItemVariantProps>];
+}

package/recipes/tag-group-item.layered.css

@@ -0,0 +1,94 @@
+@layer seed-components {
+  .seed-tag-group-item__root {
+    display: var(--tag-group-item-display);
+    flex-shrink: var(--seed-box-flex-shrink, 1);
+    align-items: center;
+    min-width: 0;
+  }
+
+  .seed-tag-group-item__label {
+    min-width: 0;
+    overflow: var(--tag-group-item-overflow);
+    text-overflow: var(--tag-group-item-text-overflow);
+    display: inline;
+  }
+
+  .seed-tag-group-item__label:not(:first-child) {
+    margin-left: var(--seed-dimension-x0_5);
+  }
+
+  .seed-tag-group-item__label:not(:last-child) {
+    margin-right: var(--seed-dimension-x0_5);
+  }
+
+  .seed-tag-group-item__root--size_t2 {
+    --seed-prefix-icon-size: var(--seed-dimension-x3);
+    --seed-suffix-icon-size: var(--seed-dimension-x3);
+    --seed-icon-size: var(--seed-dimension-x3);
+  }
+
+  .seed-tag-group-item__label--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+  }
+
+  .seed-tag-group-item__root--size_t3 {
+    --seed-prefix-icon-size: 13px;
+    --seed-suffix-icon-size: 13px;
+    --seed-icon-size: 13px;
+  }
+
+  .seed-tag-group-item__label--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+  }
+
+  .seed-tag-group-item__root--size_t4 {
+    --seed-prefix-icon-size: var(--seed-dimension-x3_5);
+    --seed-suffix-icon-size: var(--seed-dimension-x3_5);
+    --seed-icon-size: var(--seed-dimension-x3_5);
+  }
+
+  .seed-tag-group-item__label--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+  }
+
+  .seed-tag-group-item__label--weight_regular {
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-tag-group-item__label--weight_bold {
+    font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-tag-group-item__root--tone_neutralSubtle {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+  }
+
+  .seed-tag-group-item__label--tone_neutralSubtle {
+    color: var(--seed-color-fg-neutral-subtle);
+  }
+
+  .seed-tag-group-item__root--tone_neutral {
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+    --seed-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-tag-group-item__label--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-tag-group-item__root--tone_brand {
+    --seed-prefix-icon-color: var(--seed-color-fg-brand);
+    --seed-suffix-icon-color: var(--seed-color-fg-brand);
+    --seed-icon-color: var(--seed-color-fg-brand);
+  }
+
+  .seed-tag-group-item__label--tone_brand {
+    color: var(--seed-color-fg-brand);
+  }
+}

package/recipes/tag-group-item.layered.mjs

@@ -0,0 +1,55 @@
+import './tag-group-item.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupItemSlotNames = [
+  [
+    "root",
+    "seed-tag-group-item__root"
+  ],
+  [
+    "label",
+    "seed-tag-group-item__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": "t2",
+  "weight": "regular",
+  "tone": "neutralSubtle"
+};
+
+const compoundVariants = [];
+
+export const tagGroupItemVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ],
+  "weight": [
+    "regular",
+    "bold"
+  ],
+  "tone": [
+    "neutralSubtle",
+    "neutral",
+    "brand"
+  ]
+};
+
+export const tagGroupItemVariantKeys = Object.keys(tagGroupItemVariantMap);
+
+export function tagGroupItem(props) {
+  return Object.fromEntries(
+    tagGroupItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tagGroupItem, { splitVariantProps: (props) => splitVariantProps(props, tagGroupItemVariantMap) });
+
+// @recipe(seed): tag-group-item

package/recipes/tag-group-item.mjs

@@ -0,0 +1,55 @@
+import './tag-group-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupItemSlotNames = [
+  [
+    "root",
+    "seed-tag-group-item__root"
+  ],
+  [
+    "label",
+    "seed-tag-group-item__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": "t2",
+  "weight": "regular",
+  "tone": "neutralSubtle"
+};
+
+const compoundVariants = [];
+
+export const tagGroupItemVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ],
+  "weight": [
+    "regular",
+    "bold"
+  ],
+  "tone": [
+    "neutralSubtle",
+    "neutral",
+    "brand"
+  ]
+};
+
+export const tagGroupItemVariantKeys = Object.keys(tagGroupItemVariantMap);
+
+export function tagGroupItem(props) {
+  return Object.fromEntries(
+    tagGroupItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tagGroupItem, { splitVariantProps: (props) => splitVariantProps(props, tagGroupItemVariantMap) });
+
+// @recipe(seed): tag-group-item

package/recipes/tag-group.css

@@ -0,0 +1,42 @@
+.seed-tag-group__separator {
+    color: var(--seed-color-palette-gray-600);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-tag-group__separator--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-tag-group__separator--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-tag-group__separator--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-tag-group__root--truncate_true {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    --tag-group-item-display: inline-flex;
+    --tag-group-item-overflow: hidden;
+    --tag-group-item-text-overflow: ellipsis;
+    --tag-group-item-white-space: nowrap
+}
+.seed-tag-group__root--truncate_false {
+    display: inline-block;
+    font-size: 0;
+    --tag-group-item-display: inline;
+    --tag-group-item-overflow: visible;
+    --tag-group-item-text-overflow: clip;
+    --tag-group-item-white-space: normal
+}
+.seed-tag-group__root--size_t2-truncate_false {
+    line-height: var(--seed-line-height-t2)
+}
+.seed-tag-group__root--size_t3-truncate_false {
+    line-height: var(--seed-line-height-t3)
+}
+.seed-tag-group__root--size_t4-truncate_false {
+    line-height: var(--seed-line-height-t4)
+}

package/recipes/tag-group.d.ts

@@ -0,0 +1,28 @@
+declare interface TagGroupVariant {
+  /**
+  * @default "t2"
+  */
+  size: "t2" | "t3" | "t4";
+/**
+  * @default false
+  */
+  truncate: boolean;
+}
+
+declare type TagGroupVariantMap = {
+  [key in keyof TagGroupVariant]: Array<TagGroupVariant[key]>;
+};
+
+export declare type TagGroupVariantProps = Partial<TagGroupVariant>;
+
+export declare type TagGroupSlotName = "root" | "separator";
+
+export declare const tagGroupVariantMap: TagGroupVariantMap;
+
+export declare const tagGroup: ((
+  props?: TagGroupVariantProps,
+) => Record<TagGroupSlotName, string>) & {
+  splitVariantProps: <T extends TagGroupVariantProps>(
+    props: T,
+  ) => [TagGroupVariantProps, Omit<T, keyof TagGroupVariantProps>];
+}

package/recipes/tag-group.layered.css

@@ -0,0 +1,52 @@
+@layer seed-components {
+  .seed-tag-group__separator {
+    color: var(--seed-color-palette-gray-600);
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-tag-group__separator--size_t2 {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+  }
+
+  .seed-tag-group__separator--size_t3 {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+  }
+
+  .seed-tag-group__separator--size_t4 {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+  }
+
+  .seed-tag-group__root--truncate_true {
+    --tag-group-item-display: inline-flex;
+    --tag-group-item-overflow: hidden;
+    --tag-group-item-text-overflow: ellipsis;
+    --tag-group-item-white-space: nowrap;
+    align-items: center;
+    max-width: 100%;
+    display: inline-flex;
+  }
+
+  .seed-tag-group__root--truncate_false {
+    --tag-group-item-display: inline;
+    --tag-group-item-overflow: visible;
+    --tag-group-item-text-overflow: clip;
+    --tag-group-item-white-space: normal;
+    font-size: 0;
+    display: inline-block;
+  }
+
+  .seed-tag-group__root--size_t2-truncate_false {
+    line-height: var(--seed-line-height-t2);
+  }
+
+  .seed-tag-group__root--size_t3-truncate_false {
+    line-height: var(--seed-line-height-t3);
+  }
+
+  .seed-tag-group__root--size_t4-truncate_false {
+    line-height: var(--seed-line-height-t4);
+  }
+}

package/recipes/tag-group.layered.mjs

@@ -0,0 +1,62 @@
+import './tag-group.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupSlotNames = [
+  [
+    "root",
+    "seed-tag-group__root"
+  ],
+  [
+    "separator",
+    "seed-tag-group__separator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "t2",
+  "truncate": false
+};
+
+const compoundVariants = [
+  {
+    "size": "t2",
+    "truncate": false
+  },
+  {
+    "size": "t3",
+    "truncate": false
+  },
+  {
+    "size": "t4",
+    "truncate": false
+  }
+];
+
+export const tagGroupVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ],
+  "truncate": [
+    true,
+    false
+  ]
+};
+
+export const tagGroupVariantKeys = Object.keys(tagGroupVariantMap);
+
+export function tagGroup(props) {
+  return Object.fromEntries(
+    tagGroupSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tagGroup, { splitVariantProps: (props) => splitVariantProps(props, tagGroupVariantMap) });
+
+// @recipe(seed): tag-group

package/recipes/tag-group.mjs

@@ -0,0 +1,62 @@
+import './tag-group.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const tagGroupSlotNames = [
+  [
+    "root",
+    "seed-tag-group__root"
+  ],
+  [
+    "separator",
+    "seed-tag-group__separator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "t2",
+  "truncate": false
+};
+
+const compoundVariants = [
+  {
+    "size": "t2",
+    "truncate": false
+  },
+  {
+    "size": "t3",
+    "truncate": false
+  },
+  {
+    "size": "t4",
+    "truncate": false
+  }
+];
+
+export const tagGroupVariantMap = {
+  "size": [
+    "t2",
+    "t3",
+    "t4"
+  ],
+  "truncate": [
+    true,
+    false
+  ]
+};
+
+export const tagGroupVariantKeys = Object.keys(tagGroupVariantMap);
+
+export function tagGroup(props) {
+  return Object.fromEntries(
+    tagGroupSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tagGroup, { splitVariantProps: (props) => splitVariantProps(props, tagGroupVariantMap) });
+
+// @recipe(seed): tag-group