@seed-design/css 1.0.7 → 1.1.0

package/vars/component/text-input.d.ts

@@ -0,0 +1,162 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2_5)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "strokeColorDuration": "var(--seed-duration-d3)",
+        "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
+        "strokeWidthDuration": "var(--seed-duration-d3)",
+        "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "value": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-placeholder)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefixText": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "invalidFocused": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "readonly": {
+      "value": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    },
+    "disabled": {
+      "value": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantOutline": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "strokeWidth": "1px"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      }
+    }
+  },
+  "variantUnderline": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x10)",
+        "strokeBottomWidth": "1px"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    }
+  },
+  "typeMultiline": {
+    "enabled": {
+      "root": {
+        "minHeight": "95px",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      }
+    }
+  }
+}

package/vars/component/text-input.mjs

@@ -0,0 +1,162 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "gap": "var(--seed-dimension-x2_5)",
+        "strokeColor": "var(--seed-color-stroke-neutral-weak)",
+        "strokeColorDuration": "var(--seed-duration-d3)",
+        "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
+        "strokeWidthDuration": "var(--seed-duration-d3)",
+        "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
+      },
+      "value": {
+        "color": "var(--seed-color-fg-neutral)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-placeholder)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefixText": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "suffixText": {
+        "color": "var(--seed-color-fg-neutral-muted)",
+        "fontWeight": "var(--seed-font-weight-regular)"
+      },
+      "suffixIcon": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "invalidFocused": {
+      "root": {
+        "strokeColor": "var(--seed-color-stroke-critical-solid)"
+      }
+    },
+    "readonly": {
+      "value": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-neutral-muted)"
+      }
+    },
+    "disabled": {
+      "value": {
+        "color": "var(--seed-color-fg-disabled)"
+      },
+      "placeholder": {
+        "color": "var(--seed-color-fg-disabled)"
+      }
+    }
+  },
+  "variantOutline": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x13)",
+        "cornerRadius": "var(--seed-radius-r3)",
+        "paddingX": "var(--seed-dimension-x4)",
+        "strokeWidth": "1px"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t5)",
+        "lineHeight": "var(--seed-line-height-t5)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x5)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeWidth": "2px"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-color-bg-disabled)"
+      }
+    }
+  },
+  "variantUnderline": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-dimension-x10)",
+        "strokeBottomWidth": "1px"
+      },
+      "value": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "placeholder": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "prefixText": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "prefixIcon": {
+        "size": "var(--seed-dimension-x6)"
+      },
+      "suffixText": {
+        "fontSize": "var(--seed-font-size-t6)",
+        "lineHeight": "var(--seed-line-height-t6)"
+      },
+      "suffixIcon": {
+        "size": "var(--seed-dimension-x6)"
+      }
+    },
+    "focused": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    },
+    "invalid": {
+      "root": {
+        "strokeBottomWidth": "2px"
+      }
+    }
+  },
+  "typeMultiline": {
+    "enabled": {
+      "root": {
+        "minHeight": "95px",
+        "paddingY": "var(--seed-dimension-x3_5)"
+      }
+    }
+  }
+}

package/recipes/text-field.css

@@ -1,385 +0,0 @@
-.seed-text-field__root {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-.seed-text-field__header {}
-.seed-text-field__label {
-    color: var(--seed-color-fg-neutral);
-    font-weight: var(--seed-font-weight-bold);
-}
-.seed-text-field__indicator {
-    color: var(--seed-color-fg-neutral);
-    font-weight: var(--seed-font-weight-regular);
-}
-.seed-text-field__field {
-    display: flex;
-    align-items: center;
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--seed-color-stroke-neutral-weak);
-    overflow: hidden;
-}
-.seed-text-field__field:not(:is([data-readonly])):is(:focus, [data-focus]) {
-    border-color: var(--seed-color-stroke-neutral-contrast);
-}
-.seed-text-field__field:is(:invalid, [data-invalid]) {
-    background-color: var(--seed-color-bg-critical-weak);
-    border-color: var(--seed-color-stroke-critical-weak);
-}
-.seed-text-field__field:is(:invalid, [data-invalid]):is(:focus, [data-focus]) {
-    background-color: #00000000;
-}
-.seed-text-field__field:is(:disabled, [disabled], [data-disabled]) {
-    background-color: var(--seed-color-bg-disabled);
-}
-.seed-text-field__field:is([data-readonly]) {
-    background-color: var(--seed-color-bg-disabled);
-}
-.seed-text-field__prefixText {
-    color: var(--seed-color-fg-neutral);
-}
-.seed-text-field__prefixText:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-text-field__prefixIcon {
-    color: var(--seed-color-fg-neutral);
-    flex-shrink: 0;
-}
-.seed-text-field__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-text-field__suffixText {
-    color: var(--seed-color-fg-neutral);
-}
-.seed-text-field__suffixText:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-text-field__suffixIcon {
-    color: var(--seed-color-fg-neutral);
-    flex-shrink: 0;
-}
-.seed-text-field__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-text-field__value {
-    box-sizing: border-box;
-    font: inherit;
-    background: none;
-    border: none;
-    outline: none;
-    resize: none;
-    height: 100%;
-    flex-grow: 1;
-    color: var(--seed-color-fg-neutral);
-}
-.seed-text-field__value:is(input) {
-    padding-inline: 0;
-    width: 0;
-}
-.seed-text-field__value:is(textarea) {
-    padding-inline: 0;
-    min-height: 90px;
-    width: 100%;
-}
-.seed-text-field__value::placeholder {
-    color: var(--seed-color-fg-placeholder);
-}
-.seed-text-field__value:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-text-field__value:is(:disabled, [disabled], [data-disabled])::placeholder {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-text-field__footer {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-}
-.seed-text-field__description {
-    font-weight: var(--seed-font-weight-regular);
-    color: var(--seed-color-fg-neutral-subtle);
-}
-.seed-text-field__errorMessage {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: var(--seed-color-fg-critical);
-}
-.seed-text-field__errorIcon {
-    flex: none;
-    flex-shrink: 0;
-}
-.seed-text-field__characterCountArea {
-    display: flex;
-    flex: none;
-    margin-inline-start: auto;
-}
-.seed-text-field__characterCount {
-    color: var(--seed-color-fg-neutral);
-    font-weight: var(--seed-font-weight-regular);
-}
-.seed-text-field__characterCount[data-empty] {
-    color: var(--seed-color-fg-neutral-subtle);
-}
-.seed-text-field__maxCharacterCount {
-    color: var(--seed-color-fg-neutral-subtle);
-    font-weight: var(--seed-font-weight-regular);
-}
-.seed-text-field__header--size_xlarge {
-    padding-bottom: var(--seed-dimension-x3);
-    gap: var(--seed-dimension-x1_5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__label--size_xlarge {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__indicator--size_xlarge {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__field--size_xlarge {
-    min-height: 56px;
-    border-radius: var(--seed-radius-r2_5);
-    gap: var(--seed-dimension-x2);
-}
-.seed-text-field__value--size_xlarge {
-    padding-block: var(--seed-dimension-x3);
-}
-.seed-text-field__value--size_xlarge:first-child {
-    padding-inline-start: var(--seed-dimension-x4);
-}
-.seed-text-field__value--size_xlarge:last-child {
-    padding-inline-end: var(--seed-dimension-x4);
-}
-.seed-text-field__value--size_xlarge {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
-.seed-text-field__prefixText--size_xlarge {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
-.seed-text-field__prefixText--size_xlarge:first-child {
-    margin-inline-start: var(--seed-dimension-x4);
-}
-.seed-text-field__prefixIcon--size_xlarge {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-}
-.seed-text-field__prefixIcon--size_xlarge:first-child {
-    margin-inline-start: var(--seed-dimension-x4);
-}
-.seed-text-field__suffixText--size_xlarge {
-    font-size: var(--seed-font-size-t6);
-    line-height: var(--seed-line-height-t6);
-}
-.seed-text-field__suffixText--size_xlarge:last-child {
-    margin-inline-end: var(--seed-dimension-x4);
-}
-.seed-text-field__suffixIcon--size_xlarge {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-}
-.seed-text-field__suffixIcon--size_xlarge:last-child {
-    margin-inline-end: var(--seed-dimension-x4);
-}
-.seed-text-field__footer--size_xlarge {
-    gap: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    min-height: 20px;
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__description--size_xlarge {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__errorMessage--size_xlarge {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__errorIcon--size_xlarge {
-    width: var(--seed-dimension-x4);
-    height: var(--seed-dimension-x4);
-    margin-right: var(--seed-dimension-x1);
-}
-.seed-text-field__characterCount--size_xlarge {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__maxCharacterCount--size_xlarge {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__header--size_large {
-    padding-bottom: var(--seed-dimension-x3);
-    gap: var(--seed-dimension-x1_5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__label--size_large {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__indicator--size_large {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__field--size_large {
-    min-height: 52px;
-    border-radius: var(--seed-radius-r2_5);
-    gap: var(--seed-dimension-x2);
-}
-.seed-text-field__value--size_large {
-    padding-block: var(--seed-dimension-x3);
-}
-.seed-text-field__value--size_large:first-child {
-    padding-inline-start: var(--seed-dimension-x4);
-}
-.seed-text-field__value--size_large:last-child {
-    padding-inline-end: var(--seed-dimension-x4);
-}
-.seed-text-field__value--size_large {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__prefixText--size_large {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__prefixText--size_large:first-child {
-    margin-inline-start: var(--seed-dimension-x4);
-}
-.seed-text-field__prefixIcon--size_large {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-}
-.seed-text-field__prefixIcon--size_large:first-child {
-    margin-inline-start: var(--seed-dimension-x4);
-}
-.seed-text-field__suffixText--size_large {
-    font-size: var(--seed-font-size-t5);
-    line-height: var(--seed-line-height-t5);
-}
-.seed-text-field__suffixText--size_large:last-child {
-    margin-inline-end: var(--seed-dimension-x4);
-}
-.seed-text-field__suffixIcon--size_large {
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-}
-.seed-text-field__suffixIcon--size_large:last-child {
-    margin-inline-end: var(--seed-dimension-x4);
-}
-.seed-text-field__footer--size_large {
-    gap: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    min-height: 20px;
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__description--size_large {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__errorMessage--size_large {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__errorIcon--size_large {
-    width: var(--seed-dimension-x4);
-    height: var(--seed-dimension-x4);
-    margin-right: var(--seed-dimension-x1);
-}
-.seed-text-field__characterCount--size_large {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__maxCharacterCount--size_large {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__header--size_medium {
-    padding-bottom: var(--seed-dimension-x3);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__label--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__indicator--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__field--size_medium {
-    min-height: 40px;
-    border-radius: var(--seed-radius-r2);
-    gap: var(--seed-dimension-x1_5);
-}
-.seed-text-field__value--size_medium {
-    padding-block: var(--seed-dimension-x2_5);
-}
-.seed-text-field__value--size_medium:first-child {
-    padding-inline-start: var(--seed-dimension-x3_5);
-}
-.seed-text-field__value--size_medium:last-child {
-    padding-inline-end: var(--seed-dimension-x3_5);
-}
-.seed-text-field__value--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__prefixText--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__prefixText--size_medium:first-child {
-    margin-inline-start: var(--seed-dimension-x3_5);
-}
-.seed-text-field__prefixIcon--size_medium {
-    width: var(--seed-dimension-x4);
-    height: var(--seed-dimension-x4);
-}
-.seed-text-field__prefixIcon--size_medium:first-child {
-    margin-inline-start: var(--seed-dimension-x3_5);
-}
-.seed-text-field__suffixText--size_medium {
-    font-size: var(--seed-font-size-t4);
-    line-height: var(--seed-line-height-t4);
-}
-.seed-text-field__suffixText--size_medium:last-child {
-    margin-inline-end: var(--seed-dimension-x3_5);
-}
-.seed-text-field__suffixIcon--size_medium {
-    width: var(--seed-dimension-x4);
-    height: var(--seed-dimension-x4);
-}
-.seed-text-field__suffixIcon--size_medium:last-child {
-    margin-inline-end: var(--seed-dimension-x3_5);
-}
-.seed-text-field__footer--size_medium {
-    gap: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    min-height: var(--seed-dimension-x4);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__description--size_medium {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__errorMessage--size_medium {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__errorIcon--size_medium {
-    width: var(--seed-dimension-x3_5);
-    height: var(--seed-dimension-x3_5);
-    margin-right: var(--seed-dimension-x1);
-}
-.seed-text-field__characterCount--size_medium {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}
-.seed-text-field__maxCharacterCount--size_medium {
-    font-size: var(--seed-font-size-t2);
-    line-height: var(--seed-line-height-t2);
-}