@impulse-ui-native/theme 3.0.0 → 4.0.0

package/dist/theme/create-control-tokens.js

@@ -1,46 +1,27 @@
 function createControlAddonTokens(tokens) {
-  const DefaultIconColor = tokens.colors.text.primary;
-  const DisabledIconColor = tokens.colors.text.disabled;
-  const SoftIconColor = tokens.colors.accent.contrast;
   return {
     marginHorizontal: tokens.space.xxs,
     hitSlop: tokens.space.sm,
     variants: {
       filled: {
-        iconColor: DefaultIconColor,
-        errorIconColor: DefaultIconColor,
-        disabledIconColor: DisabledIconColor
+        default: { iconColor: tokens.colors.text.primary },
+        error: { iconColor: tokens.colors.text.primary },
+        disabled: { iconColor: tokens.colors.text.disabled },
+        disabledError: { iconColor: tokens.colors.text.disabled }
       },
       outlined: {
-        iconColor: DefaultIconColor,
-        errorIconColor: DefaultIconColor,
-        disabledIconColor: DisabledIconColor
-      },
-      soft: {
-        iconColor: SoftIconColor,
-        errorIconColor: SoftIconColor,
-        disabledIconColor: DisabledIconColor
-      },
-      ghost: {
-        iconColor: DefaultIconColor,
-        errorIconColor: DefaultIconColor,
-        disabledIconColor: DisabledIconColor
-      },
-      plain: {
-        iconColor: DefaultIconColor,
-        errorIconColor: DefaultIconColor,
-        disabledIconColor: DisabledIconColor
+        default: { iconColor: tokens.colors.text.primary },
+        error: { iconColor: tokens.colors.text.primary },
+        disabled: { iconColor: tokens.colors.text.disabled },
+        disabledError: { iconColor: tokens.colors.text.disabled }
       }
     }
   };
 }
 function createControlContainerTokens(tokens) {
-  const ErrorColor = tokens.colors.feedback.error.value;
-  const TransparentColor = "transparent";
   return {
     borderWidth: tokens.borderSize.sm,
     borderRadius: tokens.radii.sm,
-    disabledOpacity: 0.7,
     sizes: {
       small: {
         height: 32,
@@ -57,39 +38,48 @@ function createControlContainerTokens(tokens) {
     },
     variants: {
       filled: {
-        backgroundColor: tokens.colors.surface.secondary.value,
-        borderColor: TransparentColor,
-        errorBorderColor: ErrorColor,
-        disabledBackgroundColor: tokens.colors.neutral["2"],
-        disabledBorderColor: TransparentColor
+        default: {
+          backgroundColor: tokens.colors.surface.secondary.value,
+          borderColor: "transparent",
+          opacity: 1
+        },
+        error: {
+          backgroundColor: tokens.colors.surface.secondary.value,
+          borderColor: tokens.colors.feedback.error.value,
+          opacity: 1
+        },
+        disabled: {
+          backgroundColor: tokens.colors.neutral["2"],
+          borderColor: "transparent",
+          opacity: 0.7
+        },
+        disabledError: {
+          backgroundColor: tokens.colors.neutral["2"],
+          borderColor: tokens.colors.feedback.error.value,
+          opacity: 0.7
+        }
       },
       outlined: {
-        backgroundColor: TransparentColor,
-        borderColor: tokens.colors.neutral["5"],
-        errorBorderColor: ErrorColor,
-        disabledBackgroundColor: TransparentColor,
-        disabledBorderColor: tokens.colors.neutral["5"]
-      },
-      soft: {
-        backgroundColor: tokens.colors.accent.value,
-        borderColor: TransparentColor,
-        errorBorderColor: ErrorColor,
-        disabledBackgroundColor: tokens.colors.neutral["2"],
-        disabledBorderColor: TransparentColor
-      },
-      ghost: {
-        backgroundColor: TransparentColor,
-        borderColor: TransparentColor,
-        errorBorderColor: ErrorColor,
-        disabledBackgroundColor: TransparentColor,
-        disabledBorderColor: TransparentColor
-      },
-      plain: {
-        backgroundColor: TransparentColor,
-        borderColor: TransparentColor,
-        errorBorderColor: ErrorColor,
-        disabledBackgroundColor: TransparentColor,
-        disabledBorderColor: TransparentColor
+        default: {
+          backgroundColor: "transparent",
+          borderColor: tokens.colors.neutral["5"],
+          opacity: 1
+        },
+        error: {
+          backgroundColor: "transparent",
+          borderColor: tokens.colors.feedback.error.value,
+          opacity: 1
+        },
+        disabled: {
+          backgroundColor: "transparent",
+          borderColor: tokens.colors.neutral["5"],
+          opacity: 0.7
+        },
+        disabledError: {
+          backgroundColor: "transparent",
+          borderColor: tokens.colors.feedback.error.value,
+          opacity: 0.7
+        }
       }
     }
   };
@@ -119,44 +109,40 @@ function createControlInputTokens(tokens) {
     },
     variants: {
       filled: {
-        color: tokens.colors.text.primary,
-        placeholderColor: tokens.colors.text.disabled,
-        disabledColor: tokens.colors.text.disabled,
-        disabledPlaceholderColor: tokens.colors.text.disabled,
-        errorColor: tokens.colors.text.primary,
-        errorPlaceholderColor: tokens.colors.feedback.error.value
+        default: {
+          color: tokens.colors.text.primary,
+          placeholderColor: tokens.colors.text.disabled
+        },
+        error: {
+          color: tokens.colors.text.primary,
+          placeholderColor: tokens.colors.feedback.error.value
+        },
+        disabled: {
+          color: tokens.colors.text.disabled,
+          placeholderColor: tokens.colors.text.disabled
+        },
+        disabledError: {
+          color: tokens.colors.text.disabled,
+          placeholderColor: tokens.colors.text.disabled
+        }
       },
       outlined: {
-        color: tokens.colors.text.primary,
-        placeholderColor: tokens.colors.text.disabled,
-        disabledColor: tokens.colors.text.disabled,
-        disabledPlaceholderColor: tokens.colors.text.disabled,
-        errorColor: tokens.colors.text.primary,
-        errorPlaceholderColor: tokens.colors.feedback.error.value
-      },
-      soft: {
-        color: tokens.colors.accent.contrast,
-        placeholderColor: tokens.colors.accent.contrast,
-        disabledColor: tokens.colors.text.disabled,
-        disabledPlaceholderColor: tokens.colors.text.disabled,
-        errorColor: tokens.colors.accent.contrast,
-        errorPlaceholderColor: tokens.colors.feedback.error.value
-      },
-      ghost: {
-        color: tokens.colors.text.primary,
-        placeholderColor: tokens.colors.text.disabled,
-        disabledColor: tokens.colors.text.disabled,
-        disabledPlaceholderColor: tokens.colors.text.disabled,
-        errorColor: tokens.colors.text.primary,
-        errorPlaceholderColor: tokens.colors.feedback.error.value
-      },
-      plain: {
-        color: tokens.colors.text.primary,
-        placeholderColor: tokens.colors.text.disabled,
-        disabledColor: tokens.colors.text.disabled,
-        disabledPlaceholderColor: tokens.colors.text.disabled,
-        errorColor: tokens.colors.text.primary,
-        errorPlaceholderColor: tokens.colors.feedback.error.value
+        default: {
+          color: tokens.colors.text.primary,
+          placeholderColor: tokens.colors.text.disabled
+        },
+        error: {
+          color: tokens.colors.text.primary,
+          placeholderColor: tokens.colors.feedback.error.value
+        },
+        disabled: {
+          color: tokens.colors.text.disabled,
+          placeholderColor: tokens.colors.text.disabled
+        },
+        disabledError: {
+          color: tokens.colors.text.disabled,
+          placeholderColor: tokens.colors.text.disabled
+        }
       }
     }
   };
@@ -165,9 +151,12 @@ function createControlLabelTokens(tokens) {
   return {
     marginBottom: tokens.space.xxs,
     fontSize: tokens.fontSize.xsm,
-    color: tokens.colors.text.secondary,
-    disabledColor: tokens.colors.text.disabled,
-    errorColor: tokens.colors.feedback.error.value
+    states: {
+      default: { color: tokens.colors.text.secondary },
+      error: { color: tokens.colors.feedback.error.value },
+      disabled: { color: tokens.colors.text.disabled },
+      disabledError: { color: tokens.colors.text.disabled }
+    }
   };
 }
 export {

package/dist/theme/create-control-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-control-tokens.ts"],"sourcesContent":["import {\n  ControlAddonTokens,\n  ControlContainerTokens,\n  ControlErrorTokens,\n  ControlInputTokens,\n  ControlLabelTokens,\n  PrimitiveThemeTokens,\n} from \"../types\";\n\nexport function createControlAddonTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlAddonTokens {\n  const DefaultIconColor = tokens.colors.text.primary;\n  const DisabledIconColor = tokens.colors.text.disabled;\n  const SoftIconColor = tokens.colors.accent.contrast;\n\n  return {\n    marginHorizontal: tokens.space.xxs,\n    hitSlop: tokens.space.sm,\n    variants: {\n      filled: {\n        iconColor: DefaultIconColor,\n        errorIconColor: DefaultIconColor,\n        disabledIconColor: DisabledIconColor,\n      },\n      outlined: {\n        iconColor: DefaultIconColor,\n        errorIconColor: DefaultIconColor,\n        disabledIconColor: DisabledIconColor,\n      },\n      soft: {\n        iconColor: SoftIconColor,\n        errorIconColor: SoftIconColor,\n        disabledIconColor: DisabledIconColor,\n      },\n      ghost: {\n        iconColor: DefaultIconColor,\n        errorIconColor: DefaultIconColor,\n        disabledIconColor: DisabledIconColor,\n      },\n      plain: {\n        iconColor: DefaultIconColor,\n        errorIconColor: DefaultIconColor,\n        disabledIconColor: DisabledIconColor,\n      },\n    },\n  };\n}\n\nexport function createControlContainerTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlContainerTokens {\n  const ErrorColor = tokens.colors.feedback.error.value;\n  const TransparentColor = \"transparent\";\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.sm,\n    disabledOpacity: 0.7,\n\n    sizes: {\n      small: {\n        height: 32,\n        paddingHorizontal: tokens.space.xs,\n      },\n      medium: {\n        height: 40,\n        paddingHorizontal: tokens.space.xs,\n      },\n      large: {\n        height: 48,\n        paddingHorizontal: tokens.space.xs,\n      },\n    },\n\n    variants: {\n      filled: {\n        backgroundColor: tokens.colors.surface.secondary.value,\n        borderColor: TransparentColor,\n\n        errorBorderColor: ErrorColor,\n\n        disabledBackgroundColor: tokens.colors.neutral[\"2\"],\n        disabledBorderColor: TransparentColor,\n      },\n\n      outlined: {\n        backgroundColor: TransparentColor,\n        borderColor: tokens.colors.neutral[\"5\"],\n\n        errorBorderColor: ErrorColor,\n\n        disabledBackgroundColor: TransparentColor,\n        disabledBorderColor: tokens.colors.neutral[\"5\"],\n      },\n\n      soft: {\n        backgroundColor: tokens.colors.accent.value,\n        borderColor: TransparentColor,\n\n        errorBorderColor: ErrorColor,\n\n        disabledBackgroundColor: tokens.colors.neutral[\"2\"],\n        disabledBorderColor: TransparentColor,\n      },\n\n      ghost: {\n        backgroundColor: TransparentColor,\n        borderColor: TransparentColor,\n\n        errorBorderColor: ErrorColor,\n\n        disabledBackgroundColor: TransparentColor,\n        disabledBorderColor: TransparentColor,\n      },\n\n      plain: {\n        backgroundColor: TransparentColor,\n        borderColor: TransparentColor,\n\n        errorBorderColor: ErrorColor,\n\n        disabledBackgroundColor: TransparentColor,\n        disabledBorderColor: TransparentColor,\n      },\n    },\n  };\n}\n\nexport function createControlErrorTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlErrorTokens {\n  return {\n    marginTop: tokens.space.xxs,\n    color: tokens.colors.feedback.error.value,\n    fontSize: tokens.fontSize.xs,\n  };\n}\n\nexport function createControlInputTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlInputTokens {\n  return {\n    flex: 1,\n    fontFamily: tokens.fontFamily.normal[400],\n    paddingHorizontal: tokens.space.xxs,\n\n    sizes: {\n      small: {\n        fontSize: tokens.fontSize.xs,\n      },\n      medium: {\n        fontSize: tokens.fontSize.xsm,\n      },\n      large: {\n        fontSize: tokens.fontSize.sm,\n      },\n    },\n\n    variants: {\n      filled: {\n        color: tokens.colors.text.primary,\n        placeholderColor: tokens.colors.text.disabled,\n\n        disabledColor: tokens.colors.text.disabled,\n        disabledPlaceholderColor: tokens.colors.text.disabled,\n\n        errorColor: tokens.colors.text.primary,\n        errorPlaceholderColor: tokens.colors.feedback.error.value,\n      },\n\n      outlined: {\n        color: tokens.colors.text.primary,\n        placeholderColor: tokens.colors.text.disabled,\n\n        disabledColor: tokens.colors.text.disabled,\n        disabledPlaceholderColor: tokens.colors.text.disabled,\n\n        errorColor: tokens.colors.text.primary,\n        errorPlaceholderColor: tokens.colors.feedback.error.value,\n      },\n\n      soft: {\n        color: tokens.colors.accent.contrast,\n        placeholderColor: tokens.colors.accent.contrast,\n\n        disabledColor: tokens.colors.text.disabled,\n        disabledPlaceholderColor: tokens.colors.text.disabled,\n\n        errorColor: tokens.colors.accent.contrast,\n        errorPlaceholderColor: tokens.colors.feedback.error.value,\n      },\n\n      ghost: {\n        color: tokens.colors.text.primary,\n        placeholderColor: tokens.colors.text.disabled,\n\n        disabledColor: tokens.colors.text.disabled,\n        disabledPlaceholderColor: tokens.colors.text.disabled,\n\n        errorColor: tokens.colors.text.primary,\n        errorPlaceholderColor: tokens.colors.feedback.error.value,\n      },\n\n      plain: {\n        color: tokens.colors.text.primary,\n        placeholderColor: tokens.colors.text.disabled,\n\n        disabledColor: tokens.colors.text.disabled,\n        disabledPlaceholderColor: tokens.colors.text.disabled,\n\n        errorColor: tokens.colors.text.primary,\n        errorPlaceholderColor: tokens.colors.feedback.error.value,\n      },\n    },\n  };\n}\n\nexport function createControlLabelTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlLabelTokens {\n  return {\n    marginBottom: tokens.space.xxs,\n    fontSize: tokens.fontSize.xsm,\n\n    color: tokens.colors.text.secondary,\n    disabledColor: tokens.colors.text.disabled,\n    errorColor: tokens.colors.feedback.error.value,\n  };\n}\n"],"mappings":"AASO,SAAS,yBACd,QACoB;AACpB,QAAM,mBAAmB,OAAO,OAAO,KAAK;AAC5C,QAAM,oBAAoB,OAAO,OAAO,KAAK;AAC7C,QAAM,gBAAgB,OAAO,OAAO,OAAO;AAE3C,SAAO;AAAA,IACL,kBAAkB,OAAO,MAAM;AAAA,IAC/B,SAAS,OAAO,MAAM;AAAA,IACtB,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,QACR,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,MACrB;AAAA,MACA,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,MACrB;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,MACrB;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,6BACd,QACwB;AACxB,QAAM,aAAa,OAAO,OAAO,SAAS,MAAM;AAChD,QAAM,mBAAmB;AAEzB,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAC3B,iBAAiB;AAAA,IAEjB,OAAO;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB,OAAO,OAAO,QAAQ,UAAU;AAAA,QACjD,aAAa;AAAA,QAEb,kBAAkB;AAAA,QAElB,yBAAyB,OAAO,OAAO,QAAQ,GAAG;AAAA,QAClD,qBAAqB;AAAA,MACvB;AAAA,MAEA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,QAEtC,kBAAkB;AAAA,QAElB,yBAAyB;AAAA,QACzB,qBAAqB,OAAO,OAAO,QAAQ,GAAG;AAAA,MAChD;AAAA,MAEA,MAAM;AAAA,QACJ,iBAAiB,OAAO,OAAO,OAAO;AAAA,QACtC,aAAa;AAAA,QAEb,kBAAkB;AAAA,QAElB,yBAAyB,OAAO,OAAO,QAAQ,GAAG;AAAA,QAClD,qBAAqB;AAAA,MACvB;AAAA,MAEA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QAEb,kBAAkB;AAAA,QAElB,yBAAyB;AAAA,QACzB,qBAAqB;AAAA,MACvB;AAAA,MAEA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QAEb,kBAAkB;AAAA,QAElB,yBAAyB;AAAA,QACzB,qBAAqB;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,yBACd,QACoB;AACpB,SAAO;AAAA,IACL,WAAW,OAAO,MAAM;AAAA,IACxB,OAAO,OAAO,OAAO,SAAS,MAAM;AAAA,IACpC,UAAU,OAAO,SAAS;AAAA,EAC5B;AACF;AAEO,SAAS,yBACd,QACoB;AACpB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,YAAY,OAAO,WAAW,OAAO,GAAG;AAAA,IACxC,mBAAmB,OAAO,MAAM;AAAA,IAEhC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,kBAAkB,OAAO,OAAO,KAAK;AAAA,QAErC,eAAe,OAAO,OAAO,KAAK;AAAA,QAClC,0BAA0B,OAAO,OAAO,KAAK;AAAA,QAE7C,YAAY,OAAO,OAAO,KAAK;AAAA,QAC/B,uBAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,MACtD;AAAA,MAEA,UAAU;AAAA,QACR,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,kBAAkB,OAAO,OAAO,KAAK;AAAA,QAErC,eAAe,OAAO,OAAO,KAAK;AAAA,QAClC,0BAA0B,OAAO,OAAO,KAAK;AAAA,QAE7C,YAAY,OAAO,OAAO,KAAK;AAAA,QAC/B,uBAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,MACtD;AAAA,MAEA,MAAM;AAAA,QACJ,OAAO,OAAO,OAAO,OAAO;AAAA,QAC5B,kBAAkB,OAAO,OAAO,OAAO;AAAA,QAEvC,eAAe,OAAO,OAAO,KAAK;AAAA,QAClC,0BAA0B,OAAO,OAAO,KAAK;AAAA,QAE7C,YAAY,OAAO,OAAO,OAAO;AAAA,QACjC,uBAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,MACtD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,kBAAkB,OAAO,OAAO,KAAK;AAAA,QAErC,eAAe,OAAO,OAAO,KAAK;AAAA,QAClC,0BAA0B,OAAO,OAAO,KAAK;AAAA,QAE7C,YAAY,OAAO,OAAO,KAAK;AAAA,QAC/B,uBAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,MACtD;AAAA,MAEA,OAAO;AAAA,QACL,OAAO,OAAO,OAAO,KAAK;AAAA,QAC1B,kBAAkB,OAAO,OAAO,KAAK;AAAA,QAErC,eAAe,OAAO,OAAO,KAAK;AAAA,QAClC,0BAA0B,OAAO,OAAO,KAAK;AAAA,QAE7C,YAAY,OAAO,OAAO,KAAK;AAAA,QAC/B,uBAAuB,OAAO,OAAO,SAAS,MAAM;AAAA,MACtD;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,yBACd,QACoB;AACpB,SAAO;AAAA,IACL,cAAc,OAAO,MAAM;AAAA,IAC3B,UAAU,OAAO,SAAS;AAAA,IAE1B,OAAO,OAAO,OAAO,KAAK;AAAA,IAC1B,eAAe,OAAO,OAAO,KAAK;AAAA,IAClC,YAAY,OAAO,OAAO,SAAS,MAAM;AAAA,EAC3C;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-control-tokens.ts"],"sourcesContent":["import {\n  ControlAddonTokens,\n  ControlContainerTokens,\n  ControlErrorTokens,\n  ControlInputTokens,\n  ControlLabelTokens,\n  PrimitiveThemeTokens,\n} from \"../types\";\n\nexport function createControlAddonTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlAddonTokens {\n  return {\n    marginHorizontal: tokens.space.xxs,\n    hitSlop: tokens.space.sm,\n    variants: {\n      filled: {\n        default: { iconColor: tokens.colors.text.primary },\n        error: { iconColor: tokens.colors.text.primary },\n        disabled: { iconColor: tokens.colors.text.disabled },\n        disabledError: { iconColor: tokens.colors.text.disabled },\n      },\n      outlined: {\n        default: { iconColor: tokens.colors.text.primary },\n        error: { iconColor: tokens.colors.text.primary },\n        disabled: { iconColor: tokens.colors.text.disabled },\n        disabledError: { iconColor: tokens.colors.text.disabled },\n      },\n    },\n  };\n}\n\nexport function createControlContainerTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlContainerTokens {\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.sm,\n\n    sizes: {\n      small: {\n        height: 32,\n        paddingHorizontal: tokens.space.xs,\n      },\n      medium: {\n        height: 40,\n        paddingHorizontal: tokens.space.xs,\n      },\n      large: {\n        height: 48,\n        paddingHorizontal: tokens.space.xs,\n      },\n    },\n\n    variants: {\n      filled: {\n        default: {\n          backgroundColor: tokens.colors.surface.secondary.value,\n          borderColor: \"transparent\",\n          opacity: 1,\n        },\n        error: {\n          backgroundColor: tokens.colors.surface.secondary.value,\n          borderColor: tokens.colors.feedback.error.value,\n          opacity: 1,\n        },\n        disabled: {\n          backgroundColor: tokens.colors.neutral[\"2\"],\n          borderColor: \"transparent\",\n          opacity: 0.7,\n        },\n        disabledError: {\n          backgroundColor: tokens.colors.neutral[\"2\"],\n          borderColor: tokens.colors.feedback.error.value,\n          opacity: 0.7,\n        },\n      },\n\n      outlined: {\n        default: {\n          backgroundColor: \"transparent\",\n          borderColor: tokens.colors.neutral[\"5\"],\n          opacity: 1,\n        },\n        error: {\n          backgroundColor: \"transparent\",\n          borderColor: tokens.colors.feedback.error.value,\n          opacity: 1,\n        },\n        disabled: {\n          backgroundColor: \"transparent\",\n          borderColor: tokens.colors.neutral[\"5\"],\n          opacity: 0.7,\n        },\n        disabledError: {\n          backgroundColor: \"transparent\",\n          borderColor: tokens.colors.feedback.error.value,\n          opacity: 0.7,\n        },\n      },\n    },\n  };\n}\n\nexport function createControlErrorTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlErrorTokens {\n  return {\n    marginTop: tokens.space.xxs,\n    color: tokens.colors.feedback.error.value,\n    fontSize: tokens.fontSize.xs,\n  };\n}\n\nexport function createControlInputTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlInputTokens {\n  return {\n    flex: 1,\n    fontFamily: tokens.fontFamily.normal[400],\n    paddingHorizontal: tokens.space.xxs,\n\n    sizes: {\n      small: {\n        fontSize: tokens.fontSize.xs,\n      },\n      medium: {\n        fontSize: tokens.fontSize.xsm,\n      },\n      large: {\n        fontSize: tokens.fontSize.sm,\n      },\n    },\n\n    variants: {\n      filled: {\n        default: {\n          color: tokens.colors.text.primary,\n          placeholderColor: tokens.colors.text.disabled,\n        },\n        error: {\n          color: tokens.colors.text.primary,\n          placeholderColor: tokens.colors.feedback.error.value,\n        },\n        disabled: {\n          color: tokens.colors.text.disabled,\n          placeholderColor: tokens.colors.text.disabled,\n        },\n        disabledError: {\n          color: tokens.colors.text.disabled,\n          placeholderColor: tokens.colors.text.disabled,\n        },\n      },\n\n      outlined: {\n        default: {\n          color: tokens.colors.text.primary,\n          placeholderColor: tokens.colors.text.disabled,\n        },\n        error: {\n          color: tokens.colors.text.primary,\n          placeholderColor: tokens.colors.feedback.error.value,\n        },\n        disabled: {\n          color: tokens.colors.text.disabled,\n          placeholderColor: tokens.colors.text.disabled,\n        },\n        disabledError: {\n          color: tokens.colors.text.disabled,\n          placeholderColor: tokens.colors.text.disabled,\n        },\n      },\n    },\n  };\n}\n\nexport function createControlLabelTokens(\n  tokens: PrimitiveThemeTokens,\n): ControlLabelTokens {\n  return {\n    marginBottom: tokens.space.xxs,\n    fontSize: tokens.fontSize.xsm,\n    states: {\n      default: { color: tokens.colors.text.secondary },\n      error: { color: tokens.colors.feedback.error.value },\n      disabled: { color: tokens.colors.text.disabled },\n      disabledError: { color: tokens.colors.text.disabled },\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/theme/create-data-state-tokens.d.mts

@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/datetime-picker-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';
 import '../types/flyout-tokens.types.mjs';

package/dist/theme/create-data-state-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-data-state-tokens.ts"],"sourcesContent":["import { DataStateTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createDataStateTokens(\r\n  tokens: PrimitiveThemeTokens,\r\n): DataStateTokens {\r\n  return {\r\n    details: {\r\n      gap: 10,\r\n      iconSize: 150,\r\n      iconColor: tokens.colors.primary.value,\r\n    },\r\n\r\n    actionsFooter: {\r\n      gap: 10,\r\n    },\r\n\r\n    content: {\r\n      zIndex: 1,\r\n    },\r\n\r\n    loading: {\r\n      transitionDuration: 250,\r\n      loaderZIndex: 1,\r\n    },\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,sBACd,QACiB;AACjB,SAAO;AAAA,IACL,SAAS;AAAA,MACP,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,OAAO,OAAO,QAAQ;AAAA,IACnC;AAAA,IAEA,eAAe;AAAA,MACb,KAAK;AAAA,IACP;AAAA,IAEA,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-data-state-tokens.ts"],"sourcesContent":["import { DataStateTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createDataStateTokens(\n  tokens: PrimitiveThemeTokens,\n): DataStateTokens {\n  return {\n    details: {\n      gap: 10,\n      iconSize: 150,\n      iconColor: tokens.colors.primary.value,\n    },\n\n    actionsFooter: {\n      gap: 10,\n    },\n\n    content: {\n      zIndex: 1,\n    },\n\n    loading: {\n      transitionDuration: 250,\n      loaderZIndex: 1,\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,sBACd,QACiB;AACjB,SAAO;AAAA,IACL,SAAS;AAAA,MACP,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,OAAO,OAAO,QAAQ;AAAA,IACnC;AAAA,IAEA,eAAe;AAAA,MACb,KAAK;AAAA,IACP;AAAA,IAEA,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-datetime-picker.d.mts

@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';
 import '../types/flyout-tokens.types.mjs';

package/dist/theme/create-datetime-picker.js

@@ -7,12 +7,24 @@ function createDatetimePickerTokens(tokens) {
     day: {
       size: 40,
       borderRadius: tokens.radii.sm,
-      color: tokens.colors.text.primary,
-      outsideMonthColor: tokens.colors.neutral["5"],
-      selectedBackgroundColor: tokens.colors.primary.value,
-      selectedColor: tokens.colors.primary.contrast,
-      rangeBackgroundColor: tokens.colors.secondary.value,
-      rangeColor: tokens.colors.secondary.contrast
+      states: {
+        default: {
+          backgroundColor: "transparent",
+          color: tokens.colors.text.primary
+        },
+        outsideMonth: {
+          backgroundColor: "transparent",
+          color: tokens.colors.neutral["5"]
+        },
+        range: {
+          backgroundColor: tokens.colors.secondary.value,
+          color: tokens.colors.secondary.contrast
+        },
+        selected: {
+          backgroundColor: tokens.colors.primary.value,
+          color: tokens.colors.primary.contrast
+        }
+      }
     },
     datePickerFlyout: {
       gap: tokens.space.msm

package/dist/theme/create-datetime-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-datetime-picker.ts"],"sourcesContent":["import { DatetimePickerTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createDatetimePickerTokens(\r\n  tokens: PrimitiveThemeTokens,\r\n): DatetimePickerTokens {\r\n  return {\r\n    calendar: {\r\n      dayNamesMarginBottom: tokens.space.msm,\r\n      weeksGap: tokens.space.xxs,\r\n    },\r\n    day: {\r\n      size: 40,\r\n      borderRadius: tokens.radii.sm,\r\n\r\n      color: tokens.colors.text.primary,\r\n      outsideMonthColor: tokens.colors.neutral[\"5\"],\r\n\r\n      selectedBackgroundColor: tokens.colors.primary.value,\r\n      selectedColor: tokens.colors.primary.contrast,\r\n\r\n      rangeBackgroundColor: tokens.colors.secondary.value,\r\n      rangeColor: tokens.colors.secondary.contrast,\r\n    },\r\n    datePickerFlyout: {\r\n      gap: tokens.space.msm,\r\n    },\r\n    datetimePickerFlyout: {\r\n      gap: tokens.space.msm,\r\n    },\r\n    datetimeRangePickerFlyout: {\r\n      gap: tokens.space.msm,\r\n      timeInputsGap: tokens.space.xs,\r\n    },\r\n    flyoutActions: {\r\n      gap: tokens.space.msm,\r\n      buttonsGap: tokens.space.xs,\r\n      clearColor: tokens.colors.primary.value,\r\n    },\r\n    quickDateOptions: {\r\n      gap: tokens.space.xs,\r\n    },\r\n    visibleDateSelect: {\r\n      gap: tokens.space.xs,\r\n    },\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,2BACd,QACsB;AACtB,SAAO;AAAA,IACL,UAAU;AAAA,MACR,sBAAsB,OAAO,MAAM;AAAA,MACnC,UAAU,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,cAAc,OAAO,MAAM;AAAA,MAE3B,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,mBAAmB,OAAO,OAAO,QAAQ,GAAG;AAAA,MAE5C,yBAAyB,OAAO,OAAO,QAAQ;AAAA,MAC/C,eAAe,OAAO,OAAO,QAAQ;AAAA,MAErC,sBAAsB,OAAO,OAAO,UAAU;AAAA,MAC9C,YAAY,OAAO,OAAO,UAAU;AAAA,IACtC;AAAA,IACA,kBAAkB;AAAA,MAChB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,sBAAsB;AAAA,MACpB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,2BAA2B;AAAA,MACzB,KAAK,OAAO,MAAM;AAAA,MAClB,eAAe,OAAO,MAAM;AAAA,IAC9B;AAAA,IACA,eAAe;AAAA,MACb,KAAK,OAAO,MAAM;AAAA,MAClB,YAAY,OAAO,MAAM;AAAA,MACzB,YAAY,OAAO,OAAO,QAAQ;AAAA,IACpC;AAAA,IACA,kBAAkB;AAAA,MAChB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,mBAAmB;AAAA,MACjB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-datetime-picker.ts"],"sourcesContent":["import { DatetimePickerTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createDatetimePickerTokens(\n  tokens: PrimitiveThemeTokens,\n): DatetimePickerTokens {\n  return {\n    calendar: {\n      dayNamesMarginBottom: tokens.space.msm,\n      weeksGap: tokens.space.xxs,\n    },\n    day: {\n      size: 40,\n      borderRadius: tokens.radii.sm,\n      states: {\n        default: {\n          backgroundColor: \"transparent\",\n          color: tokens.colors.text.primary,\n        },\n        outsideMonth: {\n          backgroundColor: \"transparent\",\n          color: tokens.colors.neutral[\"5\"],\n        },\n        range: {\n          backgroundColor: tokens.colors.secondary.value,\n          color: tokens.colors.secondary.contrast,\n        },\n        selected: {\n          backgroundColor: tokens.colors.primary.value,\n          color: tokens.colors.primary.contrast,\n        },\n      },\n    },\n    datePickerFlyout: {\n      gap: tokens.space.msm,\n    },\n    datetimePickerFlyout: {\n      gap: tokens.space.msm,\n    },\n    datetimeRangePickerFlyout: {\n      gap: tokens.space.msm,\n      timeInputsGap: tokens.space.xs,\n    },\n    flyoutActions: {\n      gap: tokens.space.msm,\n      buttonsGap: tokens.space.xs,\n      clearColor: tokens.colors.primary.value,\n    },\n    quickDateOptions: {\n      gap: tokens.space.xs,\n    },\n    visibleDateSelect: {\n      gap: tokens.space.xs,\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,2BACd,QACsB;AACtB,SAAO;AAAA,IACL,UAAU;AAAA,MACR,sBAAsB,OAAO,MAAM;AAAA,MACnC,UAAU,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,cAAc,OAAO,MAAM;AAAA,MAC3B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,cAAc;AAAA,UACZ,iBAAiB;AAAA,UACjB,OAAO,OAAO,OAAO,QAAQ,GAAG;AAAA,QAClC;AAAA,QACA,OAAO;AAAA,UACL,iBAAiB,OAAO,OAAO,UAAU;AAAA,UACzC,OAAO,OAAO,OAAO,UAAU;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,OAAO,OAAO,QAAQ;AAAA,UACvC,OAAO,OAAO,OAAO,QAAQ;AAAA,QAC/B;AAAA,MACF;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,sBAAsB;AAAA,MACpB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,2BAA2B;AAAA,MACzB,KAAK,OAAO,MAAM;AAAA,MAClB,eAAe,OAAO,MAAM;AAAA,IAC9B;AAAA,IACA,eAAe;AAAA,MACb,KAAK,OAAO,MAAM;AAAA,MAClB,YAAY,OAAO,MAAM;AAAA,MACzB,YAAY,OAAO,OAAO,QAAQ;AAAA,IACpC;AAAA,IACA,kBAAkB;AAAA,MAChB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IACA,mBAAmB;AAAA,MACjB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-divider-tokens.d.mts

@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
 import '../types/datetime-picker-tokens.types.mjs';
 import '../types/flyout-tokens.types.mjs';

package/dist/theme/create-flyout-tokens.d.mts

@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
 import '../types/datetime-picker-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';

package/dist/theme/create-flyout-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens {\r\n  return {\r\n    zIndexBase: 100,\r\n\r\n    maxHeightRatio: 0.7,\r\n\r\n    overlayColor: tokens.colors.black,\r\n    overlayVisibleOpacity: 0.4,\r\n\r\n    backgroundColor: tokens.colors.surface.secondary.value,\r\n    contentPaddingHorizontal: tokens.space.md,\r\n\r\n    borderRadius: tokens.radii.xl,\r\n\r\n    hiddenOpacity: 0,\r\n\r\n    title: {\r\n      paddingVertical: tokens.space.msm,\r\n      paddingHorizontal: tokens.space.md,\r\n    },\r\n\r\n    handle: {\r\n      containerHeight: 32,\r\n      width: \"25%\",\r\n      height: 6,\r\n      borderRadius: tokens.radii.round,\r\n      backgroundColor: tokens.colors.surface.primary.value,\r\n    },\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,SAAO;AAAA,IACL,YAAY;AAAA,IAEZ,gBAAgB;AAAA,IAEhB,cAAc,OAAO,OAAO;AAAA,IAC5B,uBAAuB;AAAA,IAEvB,iBAAiB,OAAO,OAAO,QAAQ,UAAU;AAAA,IACjD,0BAA0B,OAAO,MAAM;AAAA,IAEvC,cAAc,OAAO,MAAM;AAAA,IAE3B,eAAe;AAAA,IAEf,OAAO;AAAA,MACL,iBAAiB,OAAO,MAAM;AAAA,MAC9B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IAEA,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,OAAO,MAAM;AAAA,MAC3B,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,IACjD;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-flyout-tokens.ts"],"sourcesContent":["import { FlyoutTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createFlyoutTokens(tokens: PrimitiveThemeTokens): FlyoutTokens {\n  return {\n    zIndexBase: 100,\n\n    maxHeightRatio: 0.7,\n\n    overlayColor: tokens.colors.black,\n    overlayVisibleOpacity: 0.4,\n\n    backgroundColor: tokens.colors.surface.secondary.value,\n    contentPaddingHorizontal: tokens.space.md,\n\n    borderRadius: tokens.radii.xl,\n\n    hiddenOpacity: 0,\n\n    title: {\n      paddingVertical: tokens.space.msm,\n      paddingHorizontal: tokens.space.md,\n    },\n\n    handle: {\n      containerHeight: 32,\n      width: \"25%\",\n      height: 6,\n      borderRadius: tokens.radii.round,\n      backgroundColor: tokens.colors.surface.primary.value,\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,SAAO;AAAA,IACL,YAAY;AAAA,IAEZ,gBAAgB;AAAA,IAEhB,cAAc,OAAO,OAAO;AAAA,IAC5B,uBAAuB;AAAA,IAEvB,iBAAiB,OAAO,OAAO,QAAQ,UAAU;AAAA,IACjD,0BAA0B,OAAO,MAAM;AAAA,IAEvC,cAAc,OAAO,MAAM;AAAA,IAE3B,eAAe;AAAA,IAEf,OAAO;AAAA,MACL,iBAAiB,OAAO,MAAM;AAAA,MAC9B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IAEA,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,OAAO,MAAM;AAAA,MAC3B,iBAAiB,OAAO,OAAO,QAAQ,QAAQ;AAAA,IACjD;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-icon-button-tokens.d.mts

@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
 import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
 import '../types/datetime-picker-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';

package/dist/theme/create-icon-button-tokens.js

@@ -24,44 +24,72 @@ function createIconButtonTokens(tokens) {
     },
     variants: {
       filled: {
-        backgroundColor: primary,
-        borderColor: primary,
-        color: primaryContrast,
-        disabledBackgroundColor: neutral["5"],
-        disabledBorderColor: neutral["5"],
-        disabledColor
+        default: {
+          backgroundColor: primary,
+          borderColor: primary,
+          color: primaryContrast
+        },
+        loading: {
+          backgroundColor: primary,
+          borderColor: primary,
+          color: primaryContrast
+        },
+        disabled: {
+          backgroundColor: neutral["5"],
+          borderColor: neutral["5"],
+          color: disabledColor
+        }
       },
       outlined: {
-        backgroundColor: "transparent",
-        borderColor: primary,
-        color: primary,
-        disabledBackgroundColor: "transparent",
-        disabledBorderColor: neutral["5"],
-        disabledColor
+        default: {
+          backgroundColor: "transparent",
+          borderColor: primary,
+          color: primary
+        },
+        loading: {
+          backgroundColor: "transparent",
+          borderColor: primary,
+          color: primary
+        },
+        disabled: {
+          backgroundColor: "transparent",
+          borderColor: neutral["5"],
+          color: disabledColor
+        }
       },
       soft: {
-        backgroundColor: secondary,
-        borderColor: secondary,
-        color: secondaryContrast,
-        disabledBackgroundColor: neutral["3"],
-        disabledBorderColor: neutral["3"],
-        disabledColor
+        default: {
+          backgroundColor: secondary,
+          borderColor: secondary,
+          color: secondaryContrast
+        },
+        loading: {
+          backgroundColor: secondary,
+          borderColor: secondary,
+          color: secondaryContrast
+        },
+        disabled: {
+          backgroundColor: neutral["3"],
+          borderColor: neutral["3"],
+          color: disabledColor
+        }
       },
       ghost: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        color: primary,
-        disabledBackgroundColor: "transparent",
-        disabledBorderColor: "transparent",
-        disabledColor
-      },
-      plain: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        color: primary,
-        disabledBackgroundColor: "transparent",
-        disabledBorderColor: "transparent",
-        disabledColor
+        default: {
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          color: primary
+        },
+        loading: {
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          color: primary
+        },
+        disabled: {
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          color: disabledColor
+        }
       }
     }
   };

package/dist/theme/create-icon-button-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-icon-button-tokens.ts"],"sourcesContent":["import { IconButtonTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createIconButtonTokens(\r\n  tokens: PrimitiveThemeTokens,\r\n): IconButtonTokens {\r\n  const primary = tokens.colors.primary.value;\r\n  const primaryContrast = tokens.colors.primary.contrast;\r\n\r\n  const secondary = tokens.colors.secondary.value;\r\n  const secondaryContrast = tokens.colors.secondary.contrast;\r\n\r\n  const neutral = tokens.colors.neutral;\r\n  const disabledColor = tokens.colors.text.disabled;\r\n\r\n  return {\r\n    borderWidth: tokens.borderSize.sm,\r\n    borderRadius: tokens.radii.md,\r\n\r\n    sizes: {\r\n      small: {\r\n        size: 32,\r\n        padding: 6,\r\n      },\r\n      medium: {\r\n        size: 40,\r\n        padding: 8,\r\n      },\r\n      large: {\r\n        size: 48,\r\n        padding: 10,\r\n      },\r\n    },\r\n\r\n    variants: {\r\n      filled: {\r\n        backgroundColor: primary,\r\n        borderColor: primary,\r\n        color: primaryContrast,\r\n\r\n        disabledBackgroundColor: neutral[\"5\"],\r\n        disabledBorderColor: neutral[\"5\"],\r\n        disabledColor,\r\n      },\r\n\r\n      outlined: {\r\n        backgroundColor: \"transparent\",\r\n        borderColor: primary,\r\n        color: primary,\r\n\r\n        disabledBackgroundColor: \"transparent\",\r\n        disabledBorderColor: neutral[\"5\"],\r\n        disabledColor,\r\n      },\r\n\r\n      soft: {\r\n        backgroundColor: secondary,\r\n        borderColor: secondary,\r\n        color: secondaryContrast,\r\n\r\n        disabledBackgroundColor: neutral[\"3\"],\r\n        disabledBorderColor: neutral[\"3\"],\r\n        disabledColor,\r\n      },\r\n\r\n      ghost: {\r\n        backgroundColor: \"transparent\",\r\n        borderColor: \"transparent\",\r\n        color: primary,\r\n\r\n        disabledBackgroundColor: \"transparent\",\r\n        disabledBorderColor: \"transparent\",\r\n        disabledColor,\r\n      },\r\n\r\n      plain: {\r\n        backgroundColor: \"transparent\",\r\n        borderColor: \"transparent\",\r\n        color: primary,\r\n\r\n        disabledBackgroundColor: \"transparent\",\r\n        disabledBorderColor: \"transparent\",\r\n        disabledColor,\r\n      },\r\n    },\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,uBACd,QACkB;AAClB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAE9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,QAAM,UAAU,OAAO,OAAO;AAC9B,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB,QAAQ,GAAG;AAAA,QACpC,qBAAqB,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB;AAAA,QACzB,qBAAqB,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB,QAAQ,GAAG;AAAA,QACpC,qBAAqB,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB;AAAA,QACzB,qBAAqB;AAAA,QACrB;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,QAEP,yBAAyB;AAAA,QACzB,qBAAqB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-icon-button-tokens.ts"],"sourcesContent":["import { IconButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createIconButtonTokens(\n  tokens: PrimitiveThemeTokens,\n): IconButtonTokens {\n  const primary = tokens.colors.primary.value;\n  const primaryContrast = tokens.colors.primary.contrast;\n\n  const secondary = tokens.colors.secondary.value;\n  const secondaryContrast = tokens.colors.secondary.contrast;\n\n  const neutral = tokens.colors.neutral;\n  const disabledColor = tokens.colors.text.disabled;\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.md,\n\n    sizes: {\n      small: {\n        size: 32,\n        padding: 6,\n      },\n      medium: {\n        size: 40,\n        padding: 8,\n      },\n      large: {\n        size: 48,\n        padding: 10,\n      },\n    },\n\n    variants: {\n      filled: {\n        default: {\n          backgroundColor: primary,\n          borderColor: primary,\n          color: primaryContrast,\n        },\n        loading: {\n          backgroundColor: primary,\n          borderColor: primary,\n          color: primaryContrast,\n        },\n        disabled: {\n          backgroundColor: neutral[\"5\"],\n          borderColor: neutral[\"5\"],\n          color: disabledColor,\n        },\n      },\n\n      outlined: {\n        default: {\n          backgroundColor: \"transparent\",\n          borderColor: primary,\n          color: primary,\n        },\n        loading: {\n          backgroundColor: \"transparent\",\n          borderColor: primary,\n          color: primary,\n        },\n        disabled: {\n          backgroundColor: \"transparent\",\n          borderColor: neutral[\"5\"],\n          color: disabledColor,\n        },\n      },\n\n      soft: {\n        default: {\n          backgroundColor: secondary,\n          borderColor: secondary,\n          color: secondaryContrast,\n        },\n        loading: {\n          backgroundColor: secondary,\n          borderColor: secondary,\n          color: secondaryContrast,\n        },\n        disabled: {\n          backgroundColor: neutral[\"3\"],\n          borderColor: neutral[\"3\"],\n          color: disabledColor,\n        },\n      },\n\n      ghost: {\n        default: {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n          color: primary,\n        },\n        loading: {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n          color: primary,\n        },\n        disabled: {\n          backgroundColor: \"transparent\",\n          borderColor: \"transparent\",\n          color: disabledColor,\n        },\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,uBACd,QACkB;AAClB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAE9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,QAAM,UAAU,OAAO,OAAO;AAC9B,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,QAAQ,GAAG;AAAA,UAC5B,aAAa,QAAQ,GAAG;AAAA,UACxB,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa,QAAQ,GAAG;AAAA,UACxB,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,MAAM;AAAA,QACJ,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB,QAAQ,GAAG;AAAA,UAC5B,aAAa,QAAQ,GAAG;AAAA,UACxB,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-progress-tokens.d.mts

@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
 import '../types/datetime-picker-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';

package/dist/theme/create-radio-tokens.d.mts

@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
 import '../types/avatar-tokens.types.mjs';
 import '../types/buttons-tokens.types.mjs';
 import '../types/card-tokens.types.mjs';
-import '../types/control-tokes.types.mjs';
+import '../types/control-tokens.types.mjs';
 import '../types/data-state-tokens.types.mjs';
 import '../types/datetime-picker-tokens.types.mjs';
 import '../types/divider-tokens.types.mjs';