fix: stuff

Author: yyyyaaa

src/ui/text-field-addon/text-field-addon.css.ts

@@ -1,19 +1,20 @@
-import { style, styleVariants } from "@vanilla-extract/css";
+import { style, styleVariants, createVar } from "@vanilla-extract/css";
 import {
   inputBgVar,
-  inputBorderColorVar,
   inputBorderRadiusVar,
-  inputBorderWidthVar,
   inputPaddingXVar,
   inputPaddingYVar,
   inputHeightVar,
+  inputDividerColorVar,
   zIndexConfig,
   rootInput,
   input,
   borderFocusedLight,
   borderFocusedDark,
 } from "../text-field/text-field.css";
 
+const borderWidthVar = createVar();
+
 export const textFieldAddon = style({
   display: "flex",
   color: "inherit",
@@ -30,6 +31,9 @@ export const textFieldAddon = style({
   borderColor: "transparent",
   borderWidth: "1px",
   borderStyle: "solid",
+  vars: {
+    [borderWidthVar]: "1px",
+  },
   selectors: {
     [`${rootInput}[data-element-type='textarea'] &`]: {
       display: "none",
@@ -64,25 +68,6 @@ export const textFieldAddonPositions = styleVariants({
   ],
 });
 
-// export const textFieldAddonSizes = styleVariants({
-//   sm: [
-//     style({
-//       paddingLeft: themeVars.space[6],
-//       paddingRight: themeVars.space[6],
-//       paddingTop: themeVars.space[4],
-//       paddingBottom: themeVars.space[4],
-//     }),
-//   ],
-//   md: [
-//     style({
-//       paddingLeft: themeVars.space[8],
-//       paddingRight: themeVars.space[8],
-//       paddingTop: themeVars.space[4],
-//       paddingBottom: themeVars.space[4],
-//     }),
-//   ],
-// });
-
 export const textFieldAddonDivider = styleVariants({
   end: [
     style({
@@ -96,11 +81,11 @@ export const textFieldAddonDivider = styleVariants({
         "&:before": {
           content: '""',
           position: "absolute",
-          top: `calc(-1 * ${inputBorderWidthVar})`,
-          bottom: `calc(-1 * ${inputBorderWidthVar})`,
+          top: `calc(-1 * ${borderWidthVar})`,
+          bottom: `calc(-1 * ${borderWidthVar})`,
           left: 0,
-          width: inputBorderWidthVar,
-          background: inputBorderColorVar,
+          width: borderWidthVar,
+          background: inputDividerColorVar,
           transition: "all 200ms",
         },
       },
@@ -118,11 +103,11 @@ export const textFieldAddonDivider = styleVariants({
         "&:before": {
           content: '""',
           position: "absolute",
-          top: `calc(-1 * ${inputBorderWidthVar})`,
-          bottom: `calc(-1 * ${inputBorderWidthVar})`,
+          top: `calc(-1 * ${borderWidthVar})`,
+          bottom: `calc(-1 * ${borderWidthVar})`,
           right: 0,
-          width: inputBorderWidthVar,
-          background: inputBorderColorVar,
+          width: borderWidthVar,
+          background: inputDividerColorVar,
           transition: "all 200ms",
         },
       },

src/ui/text-field/text-field.css.ts

@@ -17,7 +17,6 @@ import {
   TextFieldSizeProperty,
   TextFieldVarKeys,
 } from "./text-field.vars.css";
-import { textFieldAddon } from "../text-field-addon/text-field-addon.css";
 import { slotVars } from "../../styles/theme-builder/slot-vars.css";
 
 import { unstyledButton } from "../button/button.css";
@@ -34,6 +33,7 @@ export const inputOpacityVar = createVar();
 export const inputHeightVar = createVar();
 export const inputPaddingXVar = createVar();
 export const inputPaddingYVar = createVar();
+export const inputDividerColorVar = createVar();
 
 // Manage z-index values
 export const zIndexConfig = {
@@ -421,6 +421,7 @@ function genCompoundVariants({
         }),
         [inputBoxShadowVar]: varGetter({ intent, property: "boxShadow" }),
         [inputOpacityVar]: varGetter({ intent, property: "opacity" }),
+        [inputDividerColorVar]: varGetter({ intent, property: "borderColor" }),
       },
       selectors: {
         "&:hover": {