@seed-design/css 1.0.7 → 1.1.0

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

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

@@ -1,294 +0,0 @@
-export declare const vars: {
-  "base": {
-    "enabled": {
-      "label": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-bold)"
-      },
-      "indicator": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      },
-      "field": {
-        "strokeWidth": "1px",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
-      },
-      "value": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "placeholder": {
-        "color": "var(--seed-color-fg-placeholder)"
-      },
-      "prefixText": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixText": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-neutral)"
-      },
-      "description": {
-        "color": "var(--seed-color-fg-neutral-subtle)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      },
-      "errorMessage": {
-        "color": "var(--seed-color-fg-critical)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      },
-      "characterCount": {
-        "color": "var(--seed-color-fg-neutral)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      },
-      "maxCharacterCount": {
-        "color": "var(--seed-color-fg-neutral-subtle)",
-        "fontWeight": "var(--seed-font-weight-regular)"
-      }
-    },
-    "focused": {
-      "field": {
-        "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
-      }
-    },
-    "invalid": {
-      "field": {
-        "color": "var(--seed-color-bg-critical-weak)",
-        "strokeColor": "var(--seed-color-stroke-critical-weak)"
-      }
-    },
-    "invalidFocused": {
-      "field": {
-        "color": "#00000000",
-        "strokeColor": "var(--seed-color-stroke-neutral-weak)"
-      }
-    },
-    "readonly": {
-      "field": {
-        "color": "var(--seed-color-bg-disabled)"
-      }
-    },
-    "disabled": {
-      "field": {
-        "color": "var(--seed-color-bg-disabled)"
-      },
-      "value": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "placeholder": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "prefixText": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "prefixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "suffixText": {
-        "color": "var(--seed-color-fg-disabled)"
-      },
-      "suffixIcon": {
-        "color": "var(--seed-color-fg-disabled)"
-      }
-    }
-  },
-  "sizeXlarge": {
-    "enabled": {
-      "header": {
-        "paddingBottom": "var(--seed-dimension-x3)",
-        "gap": "var(--seed-dimension-x1_5)"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "indicator": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "field": {
-        "minHeight": "56px",
-        "cornerRadius": "var(--seed-radius-r2_5)",
-        "gap": "var(--seed-dimension-x2)",
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x3)"
-      },
-      "value": {
-        "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-x5)"
-      },
-      "suffixText": {
-        "fontSize": "var(--seed-font-size-t6)",
-        "lineHeight": "var(--seed-line-height-t6)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x5)"
-      },
-      "footer": {
-        "gap": "var(--seed-dimension-x3_5)",
-        "paddingTop": "var(--seed-dimension-x2)",
-        "minHeight": "20px"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "errorMessage": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "errorIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "marginRight": "var(--seed-dimension-x1)"
-      },
-      "characterCount": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      },
-      "maxCharacterCount": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      }
-    }
-  },
-  "sizeLarge": {
-    "enabled": {
-      "header": {
-        "paddingBottom": "var(--seed-dimension-x3)",
-        "gap": "var(--seed-dimension-x1_5)"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "indicator": {
-        "fontSize": "var(--seed-font-size-t5)",
-        "lineHeight": "var(--seed-line-height-t5)"
-      },
-      "field": {
-        "minHeight": "52px",
-        "cornerRadius": "var(--seed-radius-r2_5)",
-        "gap": "var(--seed-dimension-x2)",
-        "paddingX": "var(--seed-dimension-x4)",
-        "paddingY": "var(--seed-dimension-x3)"
-      },
-      "value": {
-        "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)"
-      },
-      "footer": {
-        "gap": "var(--seed-dimension-x3_5)",
-        "paddingTop": "var(--seed-dimension-x2)",
-        "minHeight": "20px"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "errorMessage": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "errorIcon": {
-        "size": "var(--seed-dimension-x4)",
-        "marginRight": "var(--seed-dimension-x1)"
-      },
-      "characterCount": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      },
-      "maxCharacterCount": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      }
-    }
-  },
-  "sizeMedium": {
-    "enabled": {
-      "header": {
-        "paddingBottom": "var(--seed-dimension-x3)"
-      },
-      "label": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "indicator": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "field": {
-        "minHeight": "40px",
-        "cornerRadius": "var(--seed-radius-r2)",
-        "gap": "var(--seed-dimension-x1_5)",
-        "paddingX": "var(--seed-dimension-x3_5)",
-        "paddingY": "var(--seed-dimension-x2_5)"
-      },
-      "value": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "prefixText": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "prefixIcon": {
-        "size": "var(--seed-dimension-x4)"
-      },
-      "suffixText": {
-        "fontSize": "var(--seed-font-size-t4)",
-        "lineHeight": "var(--seed-line-height-t4)"
-      },
-      "suffixIcon": {
-        "size": "var(--seed-dimension-x4)"
-      },
-      "footer": {
-        "gap": "var(--seed-dimension-x3_5)",
-        "paddingTop": "var(--seed-dimension-x2)",
-        "minHeight": "var(--seed-dimension-x4)"
-      },
-      "description": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      },
-      "errorMessage": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      },
-      "errorIcon": {
-        "size": "var(--seed-dimension-x3_5)",
-        "marginRight": "var(--seed-dimension-x1)"
-      },
-      "characterCount": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      },
-      "maxCharacterCount": {
-        "fontSize": "var(--seed-font-size-t2)",
-        "lineHeight": "var(--seed-line-height-t2)"
-      }
-    }
-  }
-}