@seed-design/css 1.0.6 → 1.1.0

package/recipes/text-field.css

@@ -1,379 +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);
-}
-.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;
-}
-.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);
-}
-.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;
-}
-.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);
-}
-.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);
-}
-.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);
-}

package/recipes/text-field.d.ts

@@ -1,24 +0,0 @@
-declare interface TextFieldVariant {
-  /**
-  * @default "medium"
-  */
-  size: "xlarge" | "large" | "medium";
-}
-
-declare type TextFieldVariantMap = {
-  [key in keyof TextFieldVariant]: Array<TextFieldVariant[key]>;
-};
-
-export declare type TextFieldVariantProps = Partial<TextFieldVariant>;
-
-export declare type TextFieldSlotName = "root" | "header" | "label" | "indicator" | "field" | "value" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "footer" | "description" | "errorMessage" | "errorIcon" | "characterCountArea" | "characterCount" | "maxCharacterCount";
-
-export declare const textFieldVariantMap: TextFieldVariantMap;
-
-export declare const textField: ((
-  props?: TextFieldVariantProps,
-) => Record<TextFieldSlotName, string>) & {
-  splitVariantProps: <T extends TextFieldVariantProps>(
-    props: T,
-  ) => [TextFieldVariantProps, Omit<T, keyof TextFieldVariantProps>];
-}

package/recipes/text-field.mjs

@@ -1,104 +0,0 @@
-import './text-field.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const textFieldSlotNames = [
-  [
-    "root",
-    "seed-text-field__root"
-  ],
-  [
-    "header",
-    "seed-text-field__header"
-  ],
-  [
-    "label",
-    "seed-text-field__label"
-  ],
-  [
-    "indicator",
-    "seed-text-field__indicator"
-  ],
-  [
-    "field",
-    "seed-text-field__field"
-  ],
-  [
-    "value",
-    "seed-text-field__value"
-  ],
-  [
-    "prefixText",
-    "seed-text-field__prefixText"
-  ],
-  [
-    "prefixIcon",
-    "seed-text-field__prefixIcon"
-  ],
-  [
-    "suffixText",
-    "seed-text-field__suffixText"
-  ],
-  [
-    "suffixIcon",
-    "seed-text-field__suffixIcon"
-  ],
-  [
-    "footer",
-    "seed-text-field__footer"
-  ],
-  [
-    "description",
-    "seed-text-field__description"
-  ],
-  [
-    "errorMessage",
-    "seed-text-field__errorMessage"
-  ],
-  [
-    "errorIcon",
-    "seed-text-field__errorIcon"
-  ],
-  [
-    "characterCountArea",
-    "seed-text-field__characterCountArea"
-  ],
-  [
-    "characterCount",
-    "seed-text-field__characterCount"
-  ],
-  [
-    "maxCharacterCount",
-    "seed-text-field__maxCharacterCount"
-  ]
-];
-
-const defaultVariant = {
-  "size": "medium"
-};
-
-const compoundVariants = [];
-
-export const textFieldVariantMap = {
-  "size": [
-    "xlarge",
-    "large",
-    "medium"
-  ]
-};
-
-export const textFieldVariantKeys = Object.keys(textFieldVariantMap);
-
-export function textField(props) {
-  return Object.fromEntries(
-    textFieldSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(textField, { splitVariantProps: (props) => splitVariantProps(props, textFieldVariantMap) });
-
-// @recipe(seed): text-field