@seed-design/css 1.2.3 → 1.2.4

package/recipes/callout.css

@@ -22,6 +22,13 @@
 }
 .seed-callout__root:is(button, a) {
     cursor: pointer;
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-callout__root:is(button, a):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-callout__content {
     margin-right: auto;
@@ -57,6 +64,14 @@
     font-weight: var(--seed-font-weight-regular);
     text-decoration: underline;
     text-underline-offset: 2px;
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    border-radius: var(--seed-radius-r1);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-callout__link: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-callout__closeButton {
     border: none;
@@ -71,14 +86,29 @@
     width: var(--seed-dimension-x10);
     height: var(--seed-dimension-x10);
     margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -0.5);
+    border-radius: var(--seed-radius-r2_5);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-callout__closeButton: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-callout__root--tone_neutral {
     background-color: var(--seed-color-bg-neutral-weak);
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-neutral-weak-pressed);
+@media (hover: hover) {
+    .seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-neutral-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-neutral-weak-pressed);
+    }
 }
 .seed-callout__title--tone_neutral {
     color: var(--seed-color-fg-neutral);
@@ -94,8 +124,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
 }
-.seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-informative-weak-pressed);
+@media (hover: hover) {
+    .seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-informative-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-informative-weak-pressed);
+    }
 }
 .seed-callout__title--tone_informative {
     color: var(--seed-color-fg-informative-contrast);
@@ -111,8 +148,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
 }
-.seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-positive-weak-pressed);
+@media (hover: hover) {
+    .seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-positive-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-positive-weak-pressed);
+    }
 }
 .seed-callout__title--tone_positive {
     color: var(--seed-color-fg-positive-contrast);
@@ -128,8 +172,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
 }
-.seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-warning-weak-pressed);
+@media (hover: hover) {
+    .seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-warning-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-warning-weak-pressed);
+    }
 }
 .seed-callout__title--tone_warning {
     color: var(--seed-color-fg-warning-contrast);
@@ -145,8 +196,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
     --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
 }
-.seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
-    background-color: var(--seed-color-bg-critical-weak-pressed);
+@media (hover: hover) {
+    .seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-critical-weak-pressed);
+    }
+}
+@media (hover: none) {
+    .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-critical-weak-pressed);
+    }
 }
 .seed-callout__title--tone_critical {
     color: var(--seed-color-fg-critical-contrast);
@@ -162,8 +220,15 @@
     --seed-prefix-icon-color: var(--seed-color-fg-neutral);
     --seed-suffix-icon-color: var(--seed-color-fg-neutral);
 }
-.seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
-    background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+@media (hover: hover) {
+    .seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
+        background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+    }
+}
+@media (hover: none) {
+    .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
+        background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+    }
 }
 .seed-callout__title--tone_magic {
     color: var(--seed-color-fg-neutral);

package/recipes/callout.layered.css

@@ -0,0 +1,242 @@
+@layer seed-components {
+  .seed-callout__root {
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: inherit;
+    font-size: unset;
+    text-align: start;
+    width: 100%;
+    min-height: 50px;
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+    padding-top: var(--seed-dimension-x3_5);
+    padding-bottom: var(--seed-dimension-x3_5);
+    align-items: center;
+    gap: var(--seed-dimension-x3);
+    border-radius: var(--seed-radius-r2_5);
+    --seed-prefix-icon-size: var(--seed-dimension-x4);
+    --seed-suffix-icon-size: var(--seed-dimension-x4);
+    border: none;
+    text-decoration: none;
+    display: flex;
+  }
+
+  .seed-callout__root:is(button, a) {
+    cursor: pointer;
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-callout__root:is(button, a):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-callout__content {
+    line-height: var(--seed-line-height-t4);
+    margin-right: auto;
+  }
+
+  .seed-callout__title {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-callout__title:after {
+    content: "  ";
+    white-space: pre;
+  }
+
+  .seed-callout__description {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-callout__description:not(:last-child):after {
+    content: "  ";
+    white-space: pre;
+  }
+
+  .seed-callout__link {
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-regular);
+    text-underline-offset: 2px;
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    border-radius: var(--seed-radius-r1);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+    background-color: #0000;
+    border: none;
+    padding: 0;
+    text-decoration: underline;
+    display: inline-block;
+  }
+
+  .seed-callout__link: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-callout__closeButton {
+    cursor: pointer;
+    width: var(--seed-dimension-x10);
+    height: var(--seed-dimension-x10);
+    margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
+    border-radius: var(--seed-radius-r2_5);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+    background-color: #0000;
+    border: none;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: flex;
+  }
+
+  .seed-callout__closeButton: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-callout__root--tone_neutral {
+    background-color: var(--seed-color-bg-neutral-weak);
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  @media (hover: hover) {
+    .seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-neutral-weak-pressed);
+    }
+  }
+
+  .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-callout__root--tone_informative {
+    background-color: var(--seed-color-bg-informative-weak);
+    --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
+    --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
+  }
+
+  @media (hover: hover) {
+    .seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-informative-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-informative-weak-pressed);
+    }
+  }
+
+  .seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
+    color: var(--seed-color-fg-informative-contrast);
+  }
+
+  .seed-callout__root--tone_positive {
+    background-color: var(--seed-color-bg-positive-weak);
+    --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
+    --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
+  }
+
+  @media (hover: hover) {
+    .seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-positive-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-positive-weak-pressed);
+    }
+  }
+
+  .seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
+    color: var(--seed-color-fg-positive-contrast);
+  }
+
+  .seed-callout__root--tone_warning {
+    background-color: var(--seed-color-bg-warning-weak);
+    --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
+    --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
+  }
+
+  @media (hover: hover) {
+    .seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-warning-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-warning-weak-pressed);
+    }
+  }
+
+  .seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
+    color: var(--seed-color-fg-warning-contrast);
+  }
+
+  .seed-callout__root--tone_critical {
+    background-color: var(--seed-color-bg-critical-weak);
+    --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
+    --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
+  }
+
+  @media (hover: hover) {
+    .seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-critical-weak-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-critical-weak-pressed);
+    }
+  }
+
+  .seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
+    color: var(--seed-color-fg-critical-contrast);
+  }
+
+  .seed-callout__root--tone_magic {
+    background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    --seed-suffix-icon-color: var(--seed-color-fg-neutral);
+  }
+
+  @media (hover: hover) {
+    .seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
+      background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+    }
+  }
+
+  @media (hover: none) {
+    .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
+      background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
+    }
+  }
+
+  .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
+    color: var(--seed-color-fg-neutral);
+  }
+}

package/recipes/callout.layered.mjs

@@ -0,0 +1,63 @@
+import './callout.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const calloutSlotNames = [
+  [
+    "root",
+    "seed-callout__root"
+  ],
+  [
+    "content",
+    "seed-callout__content"
+  ],
+  [
+    "title",
+    "seed-callout__title"
+  ],
+  [
+    "description",
+    "seed-callout__description"
+  ],
+  [
+    "link",
+    "seed-callout__link"
+  ],
+  [
+    "closeButton",
+    "seed-callout__closeButton"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const calloutVariantMap = {
+  "tone": [
+    "neutral",
+    "informative",
+    "positive",
+    "warning",
+    "critical",
+    "magic"
+  ]
+};
+
+export const calloutVariantKeys = Object.keys(calloutVariantMap);
+
+export function callout(props) {
+  return Object.fromEntries(
+    calloutSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(callout, { splitVariantProps: (props) => splitVariantProps(props, calloutVariantMap) });
+
+// @recipe(seed): callout

package/recipes/checkbox-group.layered.css

@@ -0,0 +1,7 @@
+@layer seed-components {
+  .seed-checkbox-group {
+    gap: var(--seed-dimension-x1);
+    flex-direction: column;
+    display: flex;
+  }
+}

package/recipes/checkbox-group.layered.mjs

@@ -0,0 +1,22 @@
+import './checkbox-group.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const checkboxGroupVariantMap = {};
+
+export const checkboxGroupVariantKeys = Object.keys(checkboxGroupVariantMap);
+
+export function checkboxGroup(props) {
+  return createClassName(
+    "seed-checkbox-group",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(checkboxGroup, { splitVariantProps: (props) => splitVariantProps(props, checkboxGroupVariantMap) });
+
+// @recipe(seed): checkbox-group

package/recipes/checkbox.layered.css

@@ -0,0 +1,54 @@
+@layer seed-components {
+  .seed-checkbox__root {
+    vertical-align: top;
+    isolation: isolate;
+    cursor: pointer;
+    align-items: flex-start;
+    gap: var(--seed-dimension-x2);
+    max-width: 100%;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-checkbox__root:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  .seed-checkbox__label {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-checkbox__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-checkbox__label--weight_regular {
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-checkbox__label--weight_bold {
+    font-weight: var(--seed-font-weight-bold);
+  }
+
+  .seed-checkbox__root--size_large {
+    min-height: var(--seed-dimension-x9);
+    --checkmark-margin-top: calc((var(--seed-dimension-x9)  - var(--seed-dimension-x6)) / 2);
+  }
+
+  .seed-checkbox__label--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
+  }
+
+  .seed-checkbox__root--size_medium {
+    min-height: var(--seed-dimension-x8);
+    --checkmark-margin-top: calc((var(--seed-dimension-x8)  - var(--seed-dimension-x5)) / 2);
+  }
+
+  .seed-checkbox__label--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
+  }
+}

package/recipes/checkbox.layered.mjs

@@ -0,0 +1,48 @@
+import './checkbox.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const checkboxSlotNames = [
+  [
+    "root",
+    "seed-checkbox__root"
+  ],
+  [
+    "label",
+    "seed-checkbox__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "weight": "regular"
+};
+
+const compoundVariants = [];
+
+export const checkboxVariantMap = {
+  "weight": [
+    "regular",
+    "bold"
+  ],
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const checkboxVariantKeys = Object.keys(checkboxVariantMap);
+
+export function checkbox(props) {
+  return Object.fromEntries(
+    checkboxSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(checkbox, { splitVariantProps: (props) => splitVariantProps(props, checkboxVariantMap) });
+
+// @recipe(seed): checkbox