@seed-design/css 0.1.3 → 0.1.5

package/README.md

@@ -1,3 +1,4 @@
 # @seed-design/css
 
 CSS implementation of Seed Design, providing design tokens and component styles and theming codes.
+

package/all.css

@@ -61,6 +61,7 @@
   margin-left: var(--seed-suffix-icon-margin-left);
   margin-right: var(--seed-suffix-icon-margin-right);
   margin-top: var(--seed-suffix-icon-margin-top);
+  margin-bottom: var(--seed-suffix-icon-margin-bottom);
   color: var(--seed-suffix-icon-color, currentColor);
 }
 
@@ -2868,6 +2869,230 @@
   min-width: var(--seed-dimension-x8);
 }
 
+.seed-chip__root {
+  box-sizing: border-box;
+  cursor: pointer;
+  text-transform: none;
+  text-align: start;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: var(--seed-radius-full);
+  transition-duration: var(--seed-duration-d4);
+  transition-timing-function: var(--seed-timing-function-easing);
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  line-height: 1;
+  transition-property: background-color, color, border-color, box-shadow;
+  display: inline-flex;
+}
+
+.seed-chip__root:is(:focus, [data-focus]) {
+  outline: none;
+}
+
+.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
+  cursor: not-allowed;
+}
+
+.seed-chip__root {
+  --seed-icon-color: inherit;
+}
+
+.seed-chip__label {
+  font-weight: var(--seed-font-weight-medium);
+  padding-inline: var(--seed-dimension-x1_5);
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__prefixIcon {
+  padding-left: var(--seed-dimension-x1_5);
+  --seed-icon-color: inherit;
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__prefixAvatar {
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__suffixIcon {
+  padding-right: var(--seed-dimension-x1_5);
+  --seed-icon-color: inherit;
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.seed-chip__root--variant_solid {
+  background: var(--seed-color-bg-neutral-weak);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_solid:is(:checked, [data-checked]) {
+  box-shadow: none;
+  background: var(--seed-color-bg-neutral-inverted);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-weak-pressed);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-inverted-pressed);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
+  opacity: .5;
+}
+
+.seed-chip__root--variant_solid {
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong {
+  background: var(--seed-color-bg-layer-default);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-layer-default-pressed);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
+  background: var(--seed-color-bg-neutral-inverted);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-inverted-pressed);
+  color: var(--seed-color-fg-neutral-inverted);
+  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
+}
+
+.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
+  opacity: .5;
+}
+
+.seed-chip__root--variant_outlineStrong {
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak {
+  background: var(--seed-color-bg-layer-default);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-layer-default-pressed);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
+  background: var(--seed-color-bg-neutral-weak);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
+  background: var(--seed-color-bg-neutral-weak-pressed);
+  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-field-focused);
+  color: var(--seed-color-fg-neutral);
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
+  opacity: .5;
+}
+
+.seed-chip__root--variant_outlineWeak {
+  --seed-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-chip__root--size_large {
+  height: 40px;
+  padding-inline: var(--seed-dimension-x2_5);
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__label--size_large {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_large, .seed-chip__suffixIcon--size_large {
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__root--size_medium {
+  height: 36px;
+  padding-inline: var(--seed-dimension-x2);
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__label--size_medium {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_medium {
+  --seed-icon-size: var(--seed-dimension-x4);
+}
+
+.seed-chip__suffixIcon--size_medium {
+  --seed-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__root--size_small {
+  height: 32px;
+  padding-inline: var(--seed-dimension-x1_5);
+  --seed-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__label--size_small {
+  font-size: var(--seed-font-size-t4);
+  line-height: var(--seed-line-height-t4);
+}
+
+.seed-chip__prefixIcon--size_small, .seed-chip__suffixIcon--size_small {
+  --seed-icon-size: var(--seed-dimension-x3_5);
+}
+
+.seed-chip__root--size_small-layout_iconOnly {
+  min-width: var(--seed-dimension-x8);
+}
+
+.seed-chip__root--size_medium-layout_iconOnly {
+  min-width: var(--seed-dimension-x9);
+}
+
+.seed-chip__root--size_large-layout_iconOnly {
+  min-width: var(--seed-dimension-x10);
+}
+
 .seed-control-chip {
   box-sizing: border-box;
   cursor: pointer;
@@ -2990,14 +3215,17 @@
 
 .seed-callout__content {
   margin-inline-end: auto;
-  display: block;
 }
 
 .seed-callout__title {
   font-size: var(--seed-font-size-t4);
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-bold);
-  margin-inline-end: 1ch;
+}
+
+.seed-callout__title:after {
+  content: "  ";
+  white-space: pre;
 }
 
 .seed-callout__description {
@@ -3006,8 +3234,9 @@
   font-weight: var(--seed-font-weight-regular);
 }
 
-.seed-callout__description:not(:last-child) {
-  margin-inline-end: 1ch;
+.seed-callout__description:not(:last-child):after {
+  content: "  ";
+  white-space: pre;
 }
 
 .seed-callout__link {
@@ -3194,6 +3423,181 @@
   color: var(--seed-color-manner-temp-l6-text);
 }
 
+.seed-menu-sheet__positioner {
+  overscroll-behavior-y: none;
+  --sheet-z-index: 2;
+  z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+  justify-content: center;
+  align-items: flex-end;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.seed-menu-sheet__backdrop {
+  background: var(--seed-color-bg-overlay);
+  z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+  position: fixed;
+  inset: 0;
+}
+
+.seed-menu-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d2);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 0;
+  --seed-exit-opacity: 0;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-menu-sheet__backdrop:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter);
+  animation-duration: var(--seed-duration-d2);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 0;
+  --seed-enter-opacity: 0;
+  --seed-enter-scale: 1;
+}
+
+.seed-menu-sheet__content {
+  box-sizing: border-box;
+  word-break: break-all;
+  z-index: calc(var(--sheet-z-index)  + var(--layer-index, 0));
+  background: var(--seed-color-bg-layer-floating);
+  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
+  padding-block: var(--seed-dimension-x4);
+  border-top-left-radius: var(--seed-radius-r5);
+  border-top-right-radius: var(--seed-radius-r5);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.seed-menu-sheet__content:not(:is([data-state="open"], [data-open])) {
+  animation: seed-exit;
+  animation-timing-function: var(--seed-timing-function-exit);
+  animation-duration: var(--seed-duration-d4);
+  --seed-exit-translate-x: 0;
+  --seed-exit-translate-y: 100%;
+  --seed-exit-opacity: 1;
+  --seed-exit-scale: 1;
+  animation-fill-mode: forwards;
+}
+
+.seed-menu-sheet__content:is([data-state="open"], [data-open]) {
+  animation: seed-enter;
+  animation-timing-function: var(--seed-timing-function-enter-expressive);
+  animation-duration: var(--seed-duration-d6);
+  --seed-enter-translate-x: 0;
+  --seed-enter-translate-y: 100%;
+  --seed-enter-opacity: 1;
+  --seed-enter-scale: 1;
+}
+
+.seed-menu-sheet__header {
+  align-items: center;
+  gap: var(--seed-dimension-x1);
+  padding-bottom: var(--seed-dimension-x4);
+  flex-direction: column;
+  display: flex;
+}
+
+.seed-menu-sheet__title {
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t6);
+  line-height: var(--seed-line-height-t6);
+  font-weight: var(--seed-font-weight-bold);
+}
+
+.seed-menu-sheet__list {
+  align-items: stretch;
+  gap: var(--seed-dimension-x2_5);
+  flex-direction: column;
+  display: flex;
+}
+
+.seed-menu-sheet__group {
+  border-radius: var(--seed-radius-r4);
+  flex-direction: column;
+  align-items: stretch;
+  display: flex;
+  overflow: hidden;
+}
+
+.seed-menu-sheet__footer {
+  padding-top: var(--seed-dimension-x2_5);
+  flex-direction: column;
+  align-items: stretch;
+  display: flex;
+}
+
+.seed-menu-sheet__closeButton {
+  background-color: var(--seed-color-bg-neutral-weak);
+  min-height: 52px;
+  padding-inline: var(--seed-dimension-x5);
+  padding-block: var(--seed-dimension-x3_5);
+  border-radius: var(--seed-radius-r3);
+  color: var(--seed-color-fg-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-medium);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.seed-menu-sheet__closeButton:is(:active, [data-active]) {
+  background-color: var(--seed-color-bg-neutral-weak-pressed);
+}
+
+.seed-menu-sheet-item {
+  background-color: var(--seed-color-bg-neutral-weak);
+  min-height: 52px;
+  padding-inline: var(--seed-dimension-x4);
+  padding-block: var(--seed-dimension-x3_5);
+  align-items: center;
+  gap: var(--seed-dimension-x3_5);
+  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral);
+  font-size: var(--seed-font-size-t5);
+  line-height: var(--seed-line-height-t5);
+  font-weight: var(--seed-font-weight-regular);
+  display: flex;
+}
+
+.seed-menu-sheet-item:is(:active, [data-active]) {
+  background-color: var(--seed-color-bg-neutral-weak-pressed);
+}
+
+.seed-menu-sheet-item:last-child {
+  box-shadow: none;
+}
+
+.seed-menu-sheet-item {
+  --seed-prefix-icon-size: 22px;
+}
+
+.seed-menu-sheet-item--tone_neutral {
+  color: var(--seed-color-fg-neutral);
+  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+}
+
+.seed-menu-sheet-item--tone_critical {
+  color: var(--seed-color-fg-critical);
+  --seed-prefix-icon-color: var(--seed-color-fg-critical);
+}
+
+.seed-menu-sheet-item--labelAlign_left {
+  justify-content: flex-start;
+}
+
+.seed-menu-sheet-item--labelAlign_center {
+  justify-content: center;
+}
+
 .seed-segmented-control__root {
   box-sizing: border-box;
   min-width: fit-content;
@@ -3569,6 +3973,7 @@
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-align: start;
   width: 100%;
   min-height: var(--seed-dimension-x10);
   padding-inline: var(--seed-dimension-x4);
@@ -3578,7 +3983,8 @@
   --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
   --seed-suffix-icon-size: var(--seed-dimension-x4);
   --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
-  --seed-suffix-icon-margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
+  --seed-suffix-icon-margin-top: auto;
+  --seed-suffix-icon-margin-bottom: auto;
   border: none;
   align-items: flex-start;
   font-family: inherit;
@@ -3590,10 +3996,7 @@
 }
 
 .seed-inline-banner__content {
-  box-sizing: border-box;
-  text-align: start;
   margin-inline-end: auto;
-  display: inline-flex;
 }
 
 .seed-inline-banner__title {
@@ -3601,7 +4004,11 @@
   line-height: var(--seed-line-height-t4);
   font-weight: var(--seed-font-weight-bold);
   flex-shrink: 0;
-  margin-inline-end: 1ch;
+}
+
+.seed-inline-banner__title:after {
+  content: "  ";
+  white-space: pre;
 }
 
 .seed-inline-banner__description {
@@ -3612,6 +4019,7 @@
 
 .seed-inline-banner__link {
   cursor: pointer;
+  margin-block: auto;
   margin-left: var(--seed-dimension-x4);
   font-family: inherit;
   font-size: var(--seed-font-size-t2);
@@ -3631,9 +4039,7 @@
   width: var(--seed-dimension-x10);
   height: var(--seed-dimension-x10);
   margin: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5);
-  margin-top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5 + (var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
   margin-left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
-  --seed-suffix-icon-margin-top: initial;
   --seed-suffix-icon-margin-left: initial;
   cursor: pointer;
   background-color: #0000;
@@ -3641,6 +4047,7 @@
   flex-grow: 0;
   flex-shrink: 0;
   justify-content: center;
+  align-self: center;
   align-items: center;
   padding: 0;
   display: flex;