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

package/recipes/text.layered.css

@@ -0,0 +1,371 @@
+@layer seed-components {
+  .seed-text {
+    --seed-text-color: inherit;
+    --seed-font-size: inherit;
+    --seed-font-weight: inherit;
+    --seed-line-height: inherit;
+    --seed-text-align: inherit;
+    --seed-user-select: inherit;
+    --seed-white-space: inherit;
+    margin: 0;
+  }
+  .seed-text__text {
+    --seed-text-color: inherit;
+    --seed-font-size: inherit;
+    --seed-font-weight: inherit;
+    --seed-line-height: inherit;
+    --seed-text-align: inherit;
+    --seed-user-select: inherit;
+    --seed-white-space: inherit;
+  }
+
+  .seed-text__text {
+    --seed-text-color: inherit;
+    --seed-font-size: inherit;
+    --seed-font-weight: inherit;
+    --seed-line-height: inherit;
+    --seed-text-align: inherit;
+    --seed-user-select: inherit;
+    --seed-white-space: inherit;
+    color: var(--seed-text-color);
+    font-size: var(--seed-font-size);
+    font-weight: var(--seed-font-weight);
+    line-height: var(--seed-line-height);
+    text-align: var(--seed-text-align);
+  }
+
+  .seed-text--textStyle_screenTitle, .seed-text__text--textStyle_screenTitle {
+    --seed-font-size: var(--seed-font-size-t10);
+    --seed-line-height: var(--seed-line-height-t10);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_articleBody, .seed-text__text--textStyle_articleBody {
+    --seed-font-size: var(--seed-font-size-t5);
+    --seed-line-height: var(--seed-line-height-t6);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_articleNote, .seed-text__text--textStyle_articleNote {
+    --seed-font-size: var(--seed-font-size-t4);
+    --seed-line-height: var(--seed-line-height-t5);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t1Regular, .seed-text__text--textStyle_t1Regular {
+    --seed-font-size: var(--seed-font-size-t1);
+    --seed-line-height: var(--seed-line-height-t1);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t1Medium, .seed-text__text--textStyle_t1Medium {
+    --seed-font-size: var(--seed-font-size-t1);
+    --seed-line-height: var(--seed-line-height-t1);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t1Bold, .seed-text__text--textStyle_t1Bold {
+    --seed-font-size: var(--seed-font-size-t1);
+    --seed-line-height: var(--seed-line-height-t1);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t2Regular, .seed-text__text--textStyle_t2Regular {
+    --seed-font-size: var(--seed-font-size-t2);
+    --seed-line-height: var(--seed-line-height-t2);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t2Medium, .seed-text__text--textStyle_t2Medium {
+    --seed-font-size: var(--seed-font-size-t2);
+    --seed-line-height: var(--seed-line-height-t2);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t2Bold, .seed-text__text--textStyle_t2Bold {
+    --seed-font-size: var(--seed-font-size-t2);
+    --seed-line-height: var(--seed-line-height-t2);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t3Regular, .seed-text__text--textStyle_t3Regular {
+    --seed-font-size: var(--seed-font-size-t3);
+    --seed-line-height: var(--seed-line-height-t3);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t3Medium, .seed-text__text--textStyle_t3Medium {
+    --seed-font-size: var(--seed-font-size-t3);
+    --seed-line-height: var(--seed-line-height-t3);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t3Bold, .seed-text__text--textStyle_t3Bold {
+    --seed-font-size: var(--seed-font-size-t3);
+    --seed-line-height: var(--seed-line-height-t3);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t4Regular, .seed-text__text--textStyle_t4Regular {
+    --seed-font-size: var(--seed-font-size-t4);
+    --seed-line-height: var(--seed-line-height-t4);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t4Medium, .seed-text__text--textStyle_t4Medium {
+    --seed-font-size: var(--seed-font-size-t4);
+    --seed-line-height: var(--seed-line-height-t4);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t4Bold, .seed-text__text--textStyle_t4Bold {
+    --seed-font-size: var(--seed-font-size-t4);
+    --seed-line-height: var(--seed-line-height-t4);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t5Regular, .seed-text__text--textStyle_t5Regular {
+    --seed-font-size: var(--seed-font-size-t5);
+    --seed-line-height: var(--seed-line-height-t5);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t5Medium, .seed-text__text--textStyle_t5Medium {
+    --seed-font-size: var(--seed-font-size-t5);
+    --seed-line-height: var(--seed-line-height-t5);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t5Bold, .seed-text__text--textStyle_t5Bold {
+    --seed-font-size: var(--seed-font-size-t5);
+    --seed-line-height: var(--seed-line-height-t5);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t6Regular, .seed-text__text--textStyle_t6Regular {
+    --seed-font-size: var(--seed-font-size-t6);
+    --seed-line-height: var(--seed-line-height-t6);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t6Medium, .seed-text__text--textStyle_t6Medium {
+    --seed-font-size: var(--seed-font-size-t6);
+    --seed-line-height: var(--seed-line-height-t6);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t6Bold, .seed-text__text--textStyle_t6Bold {
+    --seed-font-size: var(--seed-font-size-t6);
+    --seed-line-height: var(--seed-line-height-t6);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t7Regular, .seed-text__text--textStyle_t7Regular {
+    --seed-font-size: var(--seed-font-size-t7);
+    --seed-line-height: var(--seed-line-height-t7);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t7Medium, .seed-text__text--textStyle_t7Medium {
+    --seed-font-size: var(--seed-font-size-t7);
+    --seed-line-height: var(--seed-line-height-t7);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t7Bold, .seed-text__text--textStyle_t7Bold {
+    --seed-font-size: var(--seed-font-size-t7);
+    --seed-line-height: var(--seed-line-height-t7);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t8Bold, .seed-text__text--textStyle_t8Bold {
+    --seed-font-size: var(--seed-font-size-t8);
+    --seed-line-height: var(--seed-line-height-t8);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t9Bold, .seed-text__text--textStyle_t9Bold {
+    --seed-font-size: var(--seed-font-size-t9);
+    --seed-line-height: var(--seed-line-height-t9);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t10Bold, .seed-text__text--textStyle_t10Bold {
+    --seed-font-size: var(--seed-font-size-t10);
+    --seed-line-height: var(--seed-line-height-t10);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t1StaticRegular, .seed-text__text--textStyle_t1StaticRegular {
+    --seed-font-size: var(--seed-font-size-t1-static);
+    --seed-line-height: var(--seed-line-height-t1-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t1StaticMedium, .seed-text__text--textStyle_t1StaticMedium {
+    --seed-font-size: var(--seed-font-size-t1-static);
+    --seed-line-height: var(--seed-line-height-t1-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t1StaticBold, .seed-text__text--textStyle_t1StaticBold {
+    --seed-font-size: var(--seed-font-size-t1-static);
+    --seed-line-height: var(--seed-line-height-t1-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t2StaticRegular, .seed-text__text--textStyle_t2StaticRegular {
+    --seed-font-size: var(--seed-font-size-t2-static);
+    --seed-line-height: var(--seed-line-height-t2-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t2StaticMedium, .seed-text__text--textStyle_t2StaticMedium {
+    --seed-font-size: var(--seed-font-size-t2-static);
+    --seed-line-height: var(--seed-line-height-t2-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t2StaticBold, .seed-text__text--textStyle_t2StaticBold {
+    --seed-font-size: var(--seed-font-size-t2-static);
+    --seed-line-height: var(--seed-line-height-t2-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t3StaticRegular, .seed-text__text--textStyle_t3StaticRegular {
+    --seed-font-size: var(--seed-font-size-t3-static);
+    --seed-line-height: var(--seed-line-height-t3-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t3StaticMedium, .seed-text__text--textStyle_t3StaticMedium {
+    --seed-font-size: var(--seed-font-size-t3-static);
+    --seed-line-height: var(--seed-line-height-t3-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t3StaticBold, .seed-text__text--textStyle_t3StaticBold {
+    --seed-font-size: var(--seed-font-size-t3-static);
+    --seed-line-height: var(--seed-line-height-t3-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t4StaticRegular, .seed-text__text--textStyle_t4StaticRegular {
+    --seed-font-size: var(--seed-font-size-t4-static);
+    --seed-line-height: var(--seed-line-height-t4-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t4StaticMedium, .seed-text__text--textStyle_t4StaticMedium {
+    --seed-font-size: var(--seed-font-size-t4-static);
+    --seed-line-height: var(--seed-line-height-t4-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t4StaticBold, .seed-text__text--textStyle_t4StaticBold {
+    --seed-font-size: var(--seed-font-size-t4-static);
+    --seed-line-height: var(--seed-line-height-t4-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t5StaticRegular, .seed-text__text--textStyle_t5StaticRegular {
+    --seed-font-size: var(--seed-font-size-t5-static);
+    --seed-line-height: var(--seed-line-height-t5-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t5StaticMedium, .seed-text__text--textStyle_t5StaticMedium {
+    --seed-font-size: var(--seed-font-size-t5-static);
+    --seed-line-height: var(--seed-line-height-t5-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t5StaticBold, .seed-text__text--textStyle_t5StaticBold {
+    --seed-font-size: var(--seed-font-size-t5-static);
+    --seed-line-height: var(--seed-line-height-t5-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t6StaticRegular, .seed-text__text--textStyle_t6StaticRegular {
+    --seed-font-size: var(--seed-font-size-t6-static);
+    --seed-line-height: var(--seed-line-height-t6-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t6StaticMedium, .seed-text__text--textStyle_t6StaticMedium {
+    --seed-font-size: var(--seed-font-size-t6-static);
+    --seed-line-height: var(--seed-line-height-t6-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t6StaticBold, .seed-text__text--textStyle_t6StaticBold {
+    --seed-font-size: var(--seed-font-size-t6-static);
+    --seed-line-height: var(--seed-line-height-t6-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t7StaticRegular, .seed-text__text--textStyle_t7StaticRegular {
+    --seed-font-size: var(--seed-font-size-t7-static);
+    --seed-line-height: var(--seed-line-height-t7-static);
+    --seed-font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-text--textStyle_t7StaticMedium, .seed-text__text--textStyle_t7StaticMedium {
+    --seed-font-size: var(--seed-font-size-t7-static);
+    --seed-line-height: var(--seed-line-height-t7-static);
+    --seed-font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-text--textStyle_t7StaticBold, .seed-text__text--textStyle_t7StaticBold {
+    --seed-font-size: var(--seed-font-size-t7-static);
+    --seed-line-height: var(--seed-line-height-t7-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t8StaticBold, .seed-text__text--textStyle_t8StaticBold {
+    --seed-font-size: var(--seed-font-size-t8-static);
+    --seed-line-height: var(--seed-line-height-t8-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t9StaticBold, .seed-text__text--textStyle_t9StaticBold {
+    --seed-font-size: var(--seed-font-size-t9-static);
+    --seed-line-height: var(--seed-line-height-t9-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--textStyle_t10StaticBold, .seed-text__text--textStyle_t10StaticBold {
+    --seed-font-size: var(--seed-font-size-t10-static);
+    --seed-line-height: var(--seed-line-height-t10-static);
+    --seed-font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-text--maxLines_none {
+    overflow: unset;
+    min-width: unset;
+  }
+
+  .seed-text__text--maxLines_none {
+    text-overflow: unset;
+  }
+
+  .seed-text--maxLines_single {
+    min-width: 0;
+    display: block;
+    overflow: hidden;
+  }
+
+  .seed-text__text--maxLines_single {
+    text-overflow: ellipsis;
+  }
+
+  .seed-text--maxLines_multi {
+    min-width: 0;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .seed-text__text--maxLines_multi {
+    text-overflow: ellipsis;
+  }
+}

package/recipes/text.layered.mjs

@@ -0,0 +1,110 @@
+import './text.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const textSlotNames = [
+  [
+    "root",
+    "seed-text"
+  ],
+  [
+    "text",
+    "seed-text__text"
+  ]
+];
+
+const defaultVariant = {
+  "textStyle": "t5Regular",
+  "maxLines": "none",
+  "textDecorationLine": "none"
+};
+
+const compoundVariants = [];
+
+export const textVariantMap = {
+  "textStyle": [
+    "screenTitle",
+    "articleBody",
+    "articleNote",
+    "t1Regular",
+    "t1Medium",
+    "t1Bold",
+    "t2Regular",
+    "t2Medium",
+    "t2Bold",
+    "t3Regular",
+    "t3Medium",
+    "t3Bold",
+    "t4Regular",
+    "t4Medium",
+    "t4Bold",
+    "t5Regular",
+    "t5Medium",
+    "t5Bold",
+    "t6Regular",
+    "t6Medium",
+    "t6Bold",
+    "t7Regular",
+    "t7Medium",
+    "t7Bold",
+    "t8Bold",
+    "t9Bold",
+    "t10Bold",
+    "t1StaticRegular",
+    "t1StaticMedium",
+    "t1StaticBold",
+    "t2StaticRegular",
+    "t2StaticMedium",
+    "t2StaticBold",
+    "t3StaticRegular",
+    "t3StaticMedium",
+    "t3StaticBold",
+    "t4StaticRegular",
+    "t4StaticMedium",
+    "t4StaticBold",
+    "t5StaticRegular",
+    "t5StaticMedium",
+    "t5StaticBold",
+    "t6StaticRegular",
+    "t6StaticMedium",
+    "t6StaticBold",
+    "t7StaticRegular",
+    "t7StaticMedium",
+    "t7StaticBold",
+    "t8StaticBold",
+    "t9StaticBold",
+    "t10StaticBold"
+  ],
+  "maxLines": [
+    "none",
+    "single",
+    "multi"
+  ],
+  "textDecorationLine": [
+    "none",
+    "line-through",
+    "underline"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const textVariantKeys = Object.keys(textVariantMap);
+
+export function text(props) {
+  return Object.fromEntries(
+    textSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });
+
+// @recipe(seed): text

package/recipes/text.mjs

@@ -0,0 +1,110 @@
+import './text.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const textSlotNames = [
+  [
+    "root",
+    "seed-text"
+  ],
+  [
+    "text",
+    "seed-text__text"
+  ]
+];
+
+const defaultVariant = {
+  "textStyle": "t5Regular",
+  "maxLines": "none",
+  "textDecorationLine": "none"
+};
+
+const compoundVariants = [];
+
+export const textVariantMap = {
+  "textStyle": [
+    "screenTitle",
+    "articleBody",
+    "articleNote",
+    "t1Regular",
+    "t1Medium",
+    "t1Bold",
+    "t2Regular",
+    "t2Medium",
+    "t2Bold",
+    "t3Regular",
+    "t3Medium",
+    "t3Bold",
+    "t4Regular",
+    "t4Medium",
+    "t4Bold",
+    "t5Regular",
+    "t5Medium",
+    "t5Bold",
+    "t6Regular",
+    "t6Medium",
+    "t6Bold",
+    "t7Regular",
+    "t7Medium",
+    "t7Bold",
+    "t8Bold",
+    "t9Bold",
+    "t10Bold",
+    "t1StaticRegular",
+    "t1StaticMedium",
+    "t1StaticBold",
+    "t2StaticRegular",
+    "t2StaticMedium",
+    "t2StaticBold",
+    "t3StaticRegular",
+    "t3StaticMedium",
+    "t3StaticBold",
+    "t4StaticRegular",
+    "t4StaticMedium",
+    "t4StaticBold",
+    "t5StaticRegular",
+    "t5StaticMedium",
+    "t5StaticBold",
+    "t6StaticRegular",
+    "t6StaticMedium",
+    "t6StaticBold",
+    "t7StaticRegular",
+    "t7StaticMedium",
+    "t7StaticBold",
+    "t8StaticBold",
+    "t9StaticBold",
+    "t10StaticBold"
+  ],
+  "maxLines": [
+    "none",
+    "single",
+    "multi"
+  ],
+  "textDecorationLine": [
+    "none",
+    "line-through",
+    "underline"
+  ],
+  "disabled": [
+    true
+  ],
+  "loading": [
+    true
+  ]
+};
+
+export const textVariantKeys = Object.keys(textVariantMap);
+
+export function text(props) {
+  return Object.fromEntries(
+    textSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });
+
+// @recipe(seed): text