@seed-design/css 1.2.2 → 1.2.4

package/recipes/text.layered.css

@@ -0,0 +1,364 @@
+@layer seed-components {
+  .seed-text {
+    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);
+    user-select: var(--seed-user-select);
+    --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-max-lines: initial;
+    margin: 0;
+  }
+
+  .seed-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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;
+    text-overflow: unset;
+    white-space: var(--seed-white-space);
+    -webkit-line-clamp: unset;
+  }
+
+  .seed-text--maxLines_single {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: var(--seed-max-lines);
+    min-width: 0;
+    display: block;
+    overflow: hidden;
+  }
+
+  .seed-text--maxLines_multi {
+    text-overflow: ellipsis;
+    min-width: 0;
+    white-space: initial;
+    -webkit-line-clamp: var(--seed-max-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .seed-text--textDecorationLine_none {
+    text-decoration-line: none;
+  }
+
+  .seed-text--textDecorationLine_line-through {
+    text-decoration-line: line-through;
+  }
+
+  .seed-text--textDecorationLine_underline {
+    text-decoration-line: underline;
+  }
+}

package/recipes/text.layered.mjs

@@ -0,0 +1,90 @@
+import './text.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+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"
+  ]
+};
+
+export const textVariantKeys = Object.keys(textVariantMap);
+
+export function text(props) {
+  return createClassName(
+    "seed-text",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });
+
+// @recipe(seed): text

package/recipes/toggle-button.css

@@ -14,15 +14,18 @@
     text-decoration: none;
     flex-shrink: 0;
     font-family: inherit;
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
 }
-.seed-toggle-button:is(:focus, [data-focus]) {
-    outline: none;
+.seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
 }
 .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
 .seed-toggle-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     font-weight: var(--seed-font-weight-bold);
 }
 .seed-toggle-button--variant_brandSolid {
@@ -31,8 +34,15 @@
     --track-color: var(--seed-color-palette-static-white-alpha-300);
     --range-color: var(--seed-color-palette-static-white);
 }
-.seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
-    background: var(--seed-color-bg-brand-solid-pressed);
+@media (hover: hover) {
+    .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-brand-solid-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
+        background: var(--seed-color-bg-brand-solid-pressed);
+    }
 }
 .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]) {
     background: var(--seed-color-bg-neutral-weak);
@@ -42,8 +52,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
-    background: var(--seed-color-bg-neutral-weak-pressed);
+@media (hover: hover) {
+    .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_brandSolid:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
 }
 .seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);
@@ -67,8 +84,15 @@
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
-    background: var(--seed-color-bg-neutral-weak-pressed);
+@media (hover: hover) {
+    .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
 }
 .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]) {
     background: var(--seed-color-bg-neutral-weak);
@@ -78,8 +102,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
-    background: var(--seed-color-bg-neutral-weak-pressed);
+@media (hover: hover) {
+    .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:hover, [data-hover]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-toggle-button--variant_neutralWeak:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+        background: var(--seed-color-bg-neutral-weak-pressed);
+    }
 }
 .seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-bg-disabled);