@impulse-ui-native/theme 3.0.0 → 4.0.0

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

@@ -1,48 +1,4 @@
 function createTagTokens(tokens) {
-  const neutral = tokens.colors.neutral;
-  const disabledColor = tokens.colors.text.disabled;
-  const createVariants = (value, contrast) => ({
-    filled: {
-      backgroundColor: value,
-      borderColor: value,
-      color: contrast,
-      disabledBackgroundColor: neutral["4"],
-      disabledBorderColor: neutral["6"],
-      disabledColor
-    },
-    outlined: {
-      backgroundColor: "transparent",
-      borderColor: value,
-      color: value,
-      disabledBackgroundColor: "transparent",
-      disabledBorderColor: neutral["6"],
-      disabledColor
-    },
-    soft: {
-      backgroundColor: contrast,
-      borderColor: contrast,
-      color: value,
-      disabledBackgroundColor: neutral["3"],
-      disabledBorderColor: neutral["3"],
-      disabledColor
-    },
-    ghost: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      color: value,
-      disabledBackgroundColor: "transparent",
-      disabledBorderColor: "transparent",
-      disabledColor
-    },
-    plain: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      color: value,
-      disabledBackgroundColor: "transparent",
-      disabledBorderColor: "transparent",
-      disabledColor
-    }
-  });
   return {
     borderWidth: tokens.borderSize.sm,
     borderRadius: tokens.radii.round,
@@ -70,30 +26,234 @@ function createTagTokens(tokens) {
       }
     },
     colors: {
-      primary: createVariants(
-        tokens.colors.primary.value,
-        tokens.colors.primary.contrast
-      ),
-      secondary: createVariants(
-        tokens.colors.secondary.value,
-        tokens.colors.secondary.contrast
-      ),
-      error: createVariants(
-        tokens.colors.feedback.error.value,
-        tokens.colors.feedback.error.contrast
-      ),
-      warning: createVariants(
-        tokens.colors.feedback.warning.value,
-        tokens.colors.feedback.warning.contrast
-      ),
-      success: createVariants(
-        tokens.colors.feedback.success.value,
-        tokens.colors.feedback.success.contrast
-      ),
-      info: createVariants(
-        tokens.colors.feedback.info.value,
-        tokens.colors.feedback.info.contrast
-      )
+      primary: {
+        filled: {
+          default: {
+            backgroundColor: tokens.colors.primary.value,
+            borderColor: tokens.colors.primary.value,
+            color: tokens.colors.primary.contrast
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["4"],
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.primary.value,
+            color: tokens.colors.primary.value
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        soft: {
+          default: {
+            backgroundColor: tokens.colors.primary.contrast,
+            borderColor: tokens.colors.primary.contrast,
+            color: tokens.colors.primary.value
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["3"],
+            borderColor: tokens.colors.neutral["3"],
+            color: tokens.colors.text.disabled
+          }
+        }
+      },
+      secondary: {
+        filled: {
+          default: {
+            backgroundColor: tokens.colors.secondary.value,
+            borderColor: tokens.colors.secondary.value,
+            color: tokens.colors.secondary.contrast
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["4"],
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.secondary.value,
+            color: tokens.colors.secondary.value
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        soft: {
+          default: {
+            backgroundColor: tokens.colors.secondary.contrast,
+            borderColor: tokens.colors.secondary.contrast,
+            color: tokens.colors.secondary.value
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["3"],
+            borderColor: tokens.colors.neutral["3"],
+            color: tokens.colors.text.disabled
+          }
+        }
+      },
+      error: {
+        filled: {
+          default: {
+            backgroundColor: tokens.colors.feedback.error.value,
+            borderColor: tokens.colors.feedback.error.value,
+            color: tokens.colors.feedback.error.contrast
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["4"],
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.feedback.error.value,
+            color: tokens.colors.feedback.error.value
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        soft: {
+          default: {
+            backgroundColor: tokens.colors.feedback.error.contrast,
+            borderColor: tokens.colors.feedback.error.contrast,
+            color: tokens.colors.feedback.error.value
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["3"],
+            borderColor: tokens.colors.neutral["3"],
+            color: tokens.colors.text.disabled
+          }
+        }
+      },
+      warning: {
+        filled: {
+          default: {
+            backgroundColor: tokens.colors.feedback.warning.value,
+            borderColor: tokens.colors.feedback.warning.value,
+            color: tokens.colors.feedback.warning.contrast
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["4"],
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.feedback.warning.value,
+            color: tokens.colors.feedback.warning.value
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        soft: {
+          default: {
+            backgroundColor: tokens.colors.feedback.warning.contrast,
+            borderColor: tokens.colors.feedback.warning.contrast,
+            color: tokens.colors.feedback.warning.value
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["3"],
+            borderColor: tokens.colors.neutral["3"],
+            color: tokens.colors.text.disabled
+          }
+        }
+      },
+      success: {
+        filled: {
+          default: {
+            backgroundColor: tokens.colors.feedback.success.value,
+            borderColor: tokens.colors.feedback.success.value,
+            color: tokens.colors.feedback.success.contrast
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["4"],
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.feedback.success.value,
+            color: tokens.colors.feedback.success.value
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        soft: {
+          default: {
+            backgroundColor: tokens.colors.feedback.success.contrast,
+            borderColor: tokens.colors.feedback.success.contrast,
+            color: tokens.colors.feedback.success.value
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["3"],
+            borderColor: tokens.colors.neutral["3"],
+            color: tokens.colors.text.disabled
+          }
+        }
+      },
+      info: {
+        filled: {
+          default: {
+            backgroundColor: tokens.colors.feedback.info.value,
+            borderColor: tokens.colors.feedback.info.value,
+            color: tokens.colors.feedback.info.contrast
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["4"],
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        outlined: {
+          default: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.feedback.info.value,
+            color: tokens.colors.feedback.info.value
+          },
+          disabled: {
+            backgroundColor: "transparent",
+            borderColor: tokens.colors.neutral["6"],
+            color: tokens.colors.text.disabled
+          }
+        },
+        soft: {
+          default: {
+            backgroundColor: tokens.colors.feedback.info.contrast,
+            borderColor: tokens.colors.feedback.info.contrast,
+            color: tokens.colors.feedback.info.value
+          },
+          disabled: {
+            backgroundColor: tokens.colors.neutral["3"],
+            borderColor: tokens.colors.neutral["3"],
+            color: tokens.colors.text.disabled
+          }
+        }
+      }
     }
   };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-tag-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TagTokens } from \"../types\";\n\nexport function createTagTokens(tokens: PrimitiveThemeTokens): TagTokens {\n  const neutral = tokens.colors.neutral;\n  const disabledColor = tokens.colors.text.disabled;\n\n  const createVariants = (value: string, contrast: string) => ({\n    filled: {\n      backgroundColor: value,\n      borderColor: value,\n      color: contrast,\n\n      disabledBackgroundColor: neutral[\"4\"],\n      disabledBorderColor: neutral[\"6\"],\n      disabledColor,\n    },\n\n    outlined: {\n      backgroundColor: \"transparent\",\n      borderColor: value,\n      color: value,\n\n      disabledBackgroundColor: \"transparent\",\n      disabledBorderColor: neutral[\"6\"],\n      disabledColor,\n    },\n\n    soft: {\n      backgroundColor: contrast,\n      borderColor: contrast,\n      color: value,\n\n      disabledBackgroundColor: neutral[\"3\"],\n      disabledBorderColor: neutral[\"3\"],\n      disabledColor,\n    },\n\n    ghost: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: value,\n\n      disabledBackgroundColor: \"transparent\",\n      disabledBorderColor: \"transparent\",\n      disabledColor,\n    },\n\n    plain: {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n      color: value,\n\n      disabledBackgroundColor: \"transparent\",\n      disabledBorderColor: \"transparent\",\n      disabledColor,\n    },\n  });\n\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.round,\n    gap: tokens.space.xxs,\n    closeHitSlop: 10,\n    iconMarginLeft: tokens.borderSize.md,\n\n    sizes: {\n      small: {\n        height: 24,\n        paddingHorizontal: tokens.space.xs,\n        minWidth: tokens.space.xl,\n        fontSize: tokens.fontSize.xs,\n      },\n\n      medium: {\n        height: 28,\n        paddingHorizontal: tokens.space.xs,\n        minWidth: tokens.space.xxl,\n        fontSize: tokens.fontSize.xsm,\n      },\n\n      large: {\n        height: 32,\n        paddingHorizontal: tokens.space.mxs,\n        minWidth: tokens.space.xxl,\n        fontSize: tokens.fontSize.xsm,\n      },\n    },\n\n    colors: {\n      primary: createVariants(\n        tokens.colors.primary.value,\n        tokens.colors.primary.contrast,\n      ),\n\n      secondary: createVariants(\n        tokens.colors.secondary.value,\n        tokens.colors.secondary.contrast,\n      ),\n\n      error: createVariants(\n        tokens.colors.feedback.error.value,\n        tokens.colors.feedback.error.contrast,\n      ),\n\n      warning: createVariants(\n        tokens.colors.feedback.warning.value,\n        tokens.colors.feedback.warning.contrast,\n      ),\n\n      success: createVariants(\n        tokens.colors.feedback.success.value,\n        tokens.colors.feedback.success.contrast,\n      ),\n\n      info: createVariants(\n        tokens.colors.feedback.info.value,\n        tokens.colors.feedback.info.contrast,\n      ),\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,gBAAgB,QAAyC;AACvE,QAAM,UAAU,OAAO,OAAO;AAC9B,QAAM,gBAAgB,OAAO,OAAO,KAAK;AAEzC,QAAM,iBAAiB,CAAC,OAAe,cAAsB;AAAA,IAC3D,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB,QAAQ,GAAG;AAAA,MACpC,qBAAqB,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB;AAAA,MACzB,qBAAqB,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB,QAAQ,GAAG;AAAA,MACpC,qBAAqB,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB;AAAA,MACzB,qBAAqB;AAAA,MACrB;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,MAEP,yBAAyB;AAAA,MACzB,qBAAqB;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAC3B,KAAK,OAAO,MAAM;AAAA,IAClB,cAAc;AAAA,IACd,gBAAgB,OAAO,WAAW;AAAA,IAElC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,QAAQ;AAAA,MACxB;AAAA,MAEA,WAAW;AAAA,QACT,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MAEA,OAAO;AAAA,QACL,OAAO,OAAO,SAAS,MAAM;AAAA,QAC7B,OAAO,OAAO,SAAS,MAAM;AAAA,MAC/B;AAAA,MAEA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MAEA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MAEA,MAAM;AAAA,QACJ,OAAO,OAAO,SAAS,KAAK;AAAA,QAC5B,OAAO,OAAO,SAAS,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-tag-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TagTokens } from \"../types\";\n\nexport function createTagTokens(tokens: PrimitiveThemeTokens): TagTokens {\n  return {\n    borderWidth: tokens.borderSize.sm,\n    borderRadius: tokens.radii.round,\n    gap: tokens.space.xxs,\n    closeHitSlop: 10,\n    iconMarginLeft: tokens.borderSize.md,\n\n    sizes: {\n      small: {\n        height: 24,\n        paddingHorizontal: tokens.space.xs,\n        minWidth: tokens.space.xl,\n        fontSize: tokens.fontSize.xs,\n      },\n\n      medium: {\n        height: 28,\n        paddingHorizontal: tokens.space.xs,\n        minWidth: tokens.space.xxl,\n        fontSize: tokens.fontSize.xsm,\n      },\n\n      large: {\n        height: 32,\n        paddingHorizontal: tokens.space.mxs,\n        minWidth: tokens.space.xxl,\n        fontSize: tokens.fontSize.xsm,\n      },\n    },\n\n    colors: {\n      primary: {\n        filled: {\n          default: {\n            backgroundColor: tokens.colors.primary.value,\n            borderColor: tokens.colors.primary.value,\n            color: tokens.colors.primary.contrast,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"4\"],\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.primary.value,\n            color: tokens.colors.primary.value,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: tokens.colors.primary.contrast,\n            borderColor: tokens.colors.primary.contrast,\n            color: tokens.colors.primary.value,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"3\"],\n            borderColor: tokens.colors.neutral[\"3\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n      },\n      secondary: {\n        filled: {\n          default: {\n            backgroundColor: tokens.colors.secondary.value,\n            borderColor: tokens.colors.secondary.value,\n            color: tokens.colors.secondary.contrast,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"4\"],\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.secondary.value,\n            color: tokens.colors.secondary.value,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: tokens.colors.secondary.contrast,\n            borderColor: tokens.colors.secondary.contrast,\n            color: tokens.colors.secondary.value,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"3\"],\n            borderColor: tokens.colors.neutral[\"3\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n      },\n      error: {\n        filled: {\n          default: {\n            backgroundColor: tokens.colors.feedback.error.value,\n            borderColor: tokens.colors.feedback.error.value,\n            color: tokens.colors.feedback.error.contrast,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"4\"],\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.feedback.error.value,\n            color: tokens.colors.feedback.error.value,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: tokens.colors.feedback.error.contrast,\n            borderColor: tokens.colors.feedback.error.contrast,\n            color: tokens.colors.feedback.error.value,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"3\"],\n            borderColor: tokens.colors.neutral[\"3\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n      },\n      warning: {\n        filled: {\n          default: {\n            backgroundColor: tokens.colors.feedback.warning.value,\n            borderColor: tokens.colors.feedback.warning.value,\n            color: tokens.colors.feedback.warning.contrast,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"4\"],\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.feedback.warning.value,\n            color: tokens.colors.feedback.warning.value,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: tokens.colors.feedback.warning.contrast,\n            borderColor: tokens.colors.feedback.warning.contrast,\n            color: tokens.colors.feedback.warning.value,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"3\"],\n            borderColor: tokens.colors.neutral[\"3\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n      },\n      success: {\n        filled: {\n          default: {\n            backgroundColor: tokens.colors.feedback.success.value,\n            borderColor: tokens.colors.feedback.success.value,\n            color: tokens.colors.feedback.success.contrast,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"4\"],\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.feedback.success.value,\n            color: tokens.colors.feedback.success.value,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: tokens.colors.feedback.success.contrast,\n            borderColor: tokens.colors.feedback.success.contrast,\n            color: tokens.colors.feedback.success.value,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"3\"],\n            borderColor: tokens.colors.neutral[\"3\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n      },\n      info: {\n        filled: {\n          default: {\n            backgroundColor: tokens.colors.feedback.info.value,\n            borderColor: tokens.colors.feedback.info.value,\n            color: tokens.colors.feedback.info.contrast,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"4\"],\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        outlined: {\n          default: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.feedback.info.value,\n            color: tokens.colors.feedback.info.value,\n          },\n          disabled: {\n            backgroundColor: \"transparent\",\n            borderColor: tokens.colors.neutral[\"6\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n        soft: {\n          default: {\n            backgroundColor: tokens.colors.feedback.info.contrast,\n            borderColor: tokens.colors.feedback.info.contrast,\n            color: tokens.colors.feedback.info.value,\n          },\n          disabled: {\n            backgroundColor: tokens.colors.neutral[\"3\"],\n            borderColor: tokens.colors.neutral[\"3\"],\n            color: tokens.colors.text.disabled,\n          },\n        },\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,gBAAgB,QAAyC;AACvE,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAC3B,KAAK,OAAO,MAAM;AAAA,IAClB,cAAc;AAAA,IACd,gBAAgB,OAAO,WAAW;AAAA,IAElC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MAEA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,mBAAmB,OAAO,MAAM;AAAA,QAChC,UAAU,OAAO,MAAM;AAAA,QACvB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,QAAQ;AAAA,YACvC,aAAa,OAAO,OAAO,QAAQ;AAAA,YACnC,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC/B;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ;AAAA,YACnC,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC/B;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,QAAQ;AAAA,YACvC,aAAa,OAAO,OAAO,QAAQ;AAAA,YACnC,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC/B;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,UAAU;AAAA,YACzC,aAAa,OAAO,OAAO,UAAU;AAAA,YACrC,OAAO,OAAO,OAAO,UAAU;AAAA,UACjC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,UAAU;AAAA,YACrC,OAAO,OAAO,OAAO,UAAU;AAAA,UACjC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,UAAU;AAAA,YACzC,aAAa,OAAO,OAAO,UAAU;AAAA,YACrC,OAAO,OAAO,OAAO,UAAU;AAAA,UACjC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,MAAM;AAAA,YAC9C,aAAa,OAAO,OAAO,SAAS,MAAM;AAAA,YAC1C,OAAO,OAAO,OAAO,SAAS,MAAM;AAAA,UACtC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,SAAS,MAAM;AAAA,YAC1C,OAAO,OAAO,OAAO,SAAS,MAAM;AAAA,UACtC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,MAAM;AAAA,YAC9C,aAAa,OAAO,OAAO,SAAS,MAAM;AAAA,YAC1C,OAAO,OAAO,OAAO,SAAS,MAAM;AAAA,UACtC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,QAAQ;AAAA,YAChD,aAAa,OAAO,OAAO,SAAS,QAAQ;AAAA,YAC5C,OAAO,OAAO,OAAO,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,SAAS,QAAQ;AAAA,YAC5C,OAAO,OAAO,OAAO,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,QAAQ;AAAA,YAChD,aAAa,OAAO,OAAO,SAAS,QAAQ;AAAA,YAC5C,OAAO,OAAO,OAAO,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,QAAQ;AAAA,YAChD,aAAa,OAAO,OAAO,SAAS,QAAQ;AAAA,YAC5C,OAAO,OAAO,OAAO,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,SAAS,QAAQ;AAAA,YAC5C,OAAO,OAAO,OAAO,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,QAAQ;AAAA,YAChD,aAAa,OAAO,OAAO,SAAS,QAAQ;AAAA,YAC5C,OAAO,OAAO,OAAO,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,QAAQ;AAAA,UACN,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,KAAK;AAAA,YAC7C,aAAa,OAAO,OAAO,SAAS,KAAK;AAAA,YACzC,OAAO,OAAO,OAAO,SAAS,KAAK;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,SAAS;AAAA,YACP,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,SAAS,KAAK;AAAA,YACzC,OAAO,OAAO,OAAO,SAAS,KAAK;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB;AAAA,YACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,QACA,MAAM;AAAA,UACJ,SAAS;AAAA,YACP,iBAAiB,OAAO,OAAO,SAAS,KAAK;AAAA,YAC7C,aAAa,OAAO,OAAO,SAAS,KAAK;AAAA,YACzC,OAAO,OAAO,OAAO,SAAS,KAAK;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,YACR,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,YAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,YACtC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-textarea-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-textarea-tokens.js

@@ -1,9 +1,6 @@
 function createTextareaTokens(tokens) {
   return {
-    counterColor: tokens.colors.text.tertiary,
     counterFontSize: tokens.fontSize.xs,
-    disabledCounterColor: tokens.colors.text.disabled,
-    errorCounterColor: tokens.colors.feedback.error.value,
     footerGap: tokens.space.xs,
     footerMarginTop: tokens.space.xxs,
     sizes: {
@@ -19,6 +16,12 @@ function createTextareaTokens(tokens) {
         lineHeight: tokens.lineHeight.sm,
         paddingVertical: tokens.space.xs
       }
+    },
+    states: {
+      default: { counterColor: tokens.colors.text.tertiary },
+      error: { counterColor: tokens.colors.feedback.error.value },
+      disabled: { counterColor: tokens.colors.text.disabled },
+      disabledError: { counterColor: tokens.colors.text.disabled }
     }
   };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-textarea-tokens.ts"],"sourcesContent":["import type { PrimitiveThemeTokens, TextareaTokens } from \"../types\";\n\nexport function createTextareaTokens(\n  tokens: PrimitiveThemeTokens,\n): TextareaTokens {\n  return {\n    counterColor: tokens.colors.text.tertiary,\n    counterFontSize: tokens.fontSize.xs,\n    disabledCounterColor: tokens.colors.text.disabled,\n    errorCounterColor: tokens.colors.feedback.error.value,\n    footerGap: tokens.space.xs,\n    footerMarginTop: tokens.space.xxs,\n    sizes: {\n      small: {\n        lineHeight: tokens.lineHeight.xs,\n        paddingVertical: tokens.space.xs,\n      },\n      medium: {\n        lineHeight: tokens.lineHeight.xsm,\n        paddingVertical: tokens.space.xs,\n      },\n      large: {\n        lineHeight: tokens.lineHeight.sm,\n        paddingVertical: tokens.space.xs,\n      },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,SAAO;AAAA,IACL,cAAc,OAAO,OAAO,KAAK;AAAA,IACjC,iBAAiB,OAAO,SAAS;AAAA,IACjC,sBAAsB,OAAO,OAAO,KAAK;AAAA,IACzC,mBAAmB,OAAO,OAAO,SAAS,MAAM;AAAA,IAChD,WAAW,OAAO,MAAM;AAAA,IACxB,iBAAiB,OAAO,MAAM;AAAA,IAC9B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,YAAY,OAAO,WAAW;AAAA,QAC9B,iBAAiB,OAAO,MAAM;AAAA,MAChC;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,WAAW;AAAA,QAC9B,iBAAiB,OAAO,MAAM;AAAA,MAChC;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,WAAW;AAAA,QAC9B,iBAAiB,OAAO,MAAM;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-textarea-tokens.ts"],"sourcesContent":["import type { PrimitiveThemeTokens, TextareaTokens } from \"../types\";\n\nexport function createTextareaTokens(\n  tokens: PrimitiveThemeTokens,\n): TextareaTokens {\n  return {\n    counterFontSize: tokens.fontSize.xs,\n    footerGap: tokens.space.xs,\n    footerMarginTop: tokens.space.xxs,\n    sizes: {\n      small: {\n        lineHeight: tokens.lineHeight.xs,\n        paddingVertical: tokens.space.xs,\n      },\n      medium: {\n        lineHeight: tokens.lineHeight.xsm,\n        paddingVertical: tokens.space.xs,\n      },\n      large: {\n        lineHeight: tokens.lineHeight.sm,\n        paddingVertical: tokens.space.xs,\n      },\n    },\n    states: {\n      default: { counterColor: tokens.colors.text.tertiary },\n      error: { counterColor: tokens.colors.feedback.error.value },\n      disabled: { counterColor: tokens.colors.text.disabled },\n      disabledError: { counterColor: tokens.colors.text.disabled },\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,SAAO;AAAA,IACL,iBAAiB,OAAO,SAAS;AAAA,IACjC,WAAW,OAAO,MAAM;AAAA,IACxB,iBAAiB,OAAO,MAAM;AAAA,IAC9B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,YAAY,OAAO,WAAW;AAAA,QAC9B,iBAAiB,OAAO,MAAM;AAAA,MAChC;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,WAAW;AAAA,QAC9B,iBAAiB,OAAO,MAAM;AAAA,MAChC;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,WAAW;AAAA,QAC9B,iBAAiB,OAAO,MAAM;AAAA,MAChC;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,SAAS,EAAE,cAAc,OAAO,OAAO,KAAK,SAAS;AAAA,MACrD,OAAO,EAAE,cAAc,OAAO,OAAO,SAAS,MAAM,MAAM;AAAA,MAC1D,UAAU,EAAE,cAAc,OAAO,OAAO,KAAK,SAAS;AAAA,MACtD,eAAe,EAAE,cAAc,OAAO,OAAO,KAAK,SAAS;AAAA,IAC7D;AAAA,EACF;AACF;","names":[]}

package/dist/theme/create-time-picker-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-time-picker-tokens.js

@@ -15,10 +15,16 @@ function createTimePickerTokens(tokens) {
       verticalPadding: VerticalPadding,
       initialScrollIndexViewOffset: -VerticalPadding,
       fontSize: tokens.fontSize.xl,
-      selectedColor: tokens.colors.primary.value,
-      color: tokens.colors.text.primary,
-      selectedFontWeight: tokens.fontWeight.semiBold,
-      fontWeight: tokens.fontWeight.regular
+      states: {
+        default: {
+          color: tokens.colors.text.primary,
+          fontWeight: tokens.fontWeight.regular
+        },
+        selected: {
+          color: tokens.colors.primary.value,
+          fontWeight: tokens.fontWeight.semiBold
+        }
+      }
     },
     flyout: {
       gap: tokens.space.msm

package/dist/theme/create-time-picker-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/create-time-picker-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TimePickerTokens } from \"../types\";\r\n\r\nexport function createTimePickerTokens(\r\n  tokens: PrimitiveThemeTokens,\r\n): TimePickerTokens {\r\n  const ItemHeight = 50;\r\n  const VisibleItems = 5;\r\n  const ContainerHeight = ItemHeight * VisibleItems;\r\n  const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;\r\n  const ColumnWidth = 70;\r\n\r\n  return {\r\n    column: {\r\n      width: ColumnWidth,\r\n      height: ContainerHeight,\r\n      gap: tokens.space.xxs,\r\n\r\n      listWidth: 30,\r\n      itemHeight: ItemHeight,\r\n      visibleItems: VisibleItems,\r\n      verticalPadding: VerticalPadding,\r\n      initialScrollIndexViewOffset: -VerticalPadding,\r\n\r\n      fontSize: tokens.fontSize.xl,\r\n      selectedColor: tokens.colors.primary.value,\r\n      color: tokens.colors.text.primary,\r\n      selectedFontWeight: tokens.fontWeight.semiBold,\r\n      fontWeight: tokens.fontWeight.regular,\r\n    },\r\n\r\n    flyout: {\r\n      gap: tokens.space.msm,\r\n    },\r\n\r\n    columns: {\r\n      height: ContainerHeight,\r\n      gap: tokens.space.xs,\r\n      indicatorHeight: ItemHeight,\r\n      indicatorWidth: ColumnWidth * 3 + 70,\r\n      indicatorTop: VerticalPadding,\r\n      indicatorBorderRadius: tokens.radii.round,\r\n      indicatorBackgroundColor: tokens.colors.surface.primary.value,\r\n    },\r\n  };\r\n}\r\n"],"mappings":"AAEO,SAAS,uBACd,QACkB;AAClB,QAAM,aAAa;AACnB,QAAM,eAAe;AACrB,QAAM,kBAAkB,aAAa;AACrC,QAAM,kBAAkB,kBAAkB,IAAI,aAAa;AAC3D,QAAM,cAAc;AAEpB,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK,OAAO,MAAM;AAAA,MAElB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,8BAA8B,CAAC;AAAA,MAE/B,UAAU,OAAO,SAAS;AAAA,MAC1B,eAAe,OAAO,OAAO,QAAQ;AAAA,MACrC,OAAO,OAAO,OAAO,KAAK;AAAA,MAC1B,oBAAoB,OAAO,WAAW;AAAA,MACtC,YAAY,OAAO,WAAW;AAAA,IAChC;AAAA,IAEA,QAAQ;AAAA,MACN,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IAEA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,KAAK,OAAO,MAAM;AAAA,MAClB,iBAAiB;AAAA,MACjB,gBAAgB,cAAc,IAAI;AAAA,MAClC,cAAc;AAAA,MACd,uBAAuB,OAAO,MAAM;AAAA,MACpC,0BAA0B,OAAO,OAAO,QAAQ,QAAQ;AAAA,IAC1D;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/theme/create-time-picker-tokens.ts"],"sourcesContent":["import { PrimitiveThemeTokens, TimePickerTokens } from \"../types\";\n\nexport function createTimePickerTokens(\n  tokens: PrimitiveThemeTokens,\n): TimePickerTokens {\n  const ItemHeight = 50;\n  const VisibleItems = 5;\n  const ContainerHeight = ItemHeight * VisibleItems;\n  const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;\n  const ColumnWidth = 70;\n\n  return {\n    column: {\n      width: ColumnWidth,\n      height: ContainerHeight,\n      gap: tokens.space.xxs,\n\n      listWidth: 30,\n      itemHeight: ItemHeight,\n      visibleItems: VisibleItems,\n      verticalPadding: VerticalPadding,\n      initialScrollIndexViewOffset: -VerticalPadding,\n\n      fontSize: tokens.fontSize.xl,\n      states: {\n        default: {\n          color: tokens.colors.text.primary,\n          fontWeight: tokens.fontWeight.regular,\n        },\n        selected: {\n          color: tokens.colors.primary.value,\n          fontWeight: tokens.fontWeight.semiBold,\n        },\n      },\n    },\n\n    flyout: {\n      gap: tokens.space.msm,\n    },\n\n    columns: {\n      height: ContainerHeight,\n      gap: tokens.space.xs,\n      indicatorHeight: ItemHeight,\n      indicatorWidth: ColumnWidth * 3 + 70,\n      indicatorTop: VerticalPadding,\n      indicatorBorderRadius: tokens.radii.round,\n      indicatorBackgroundColor: tokens.colors.surface.primary.value,\n    },\n  };\n}\n"],"mappings":"AAEO,SAAS,uBACd,QACkB;AAClB,QAAM,aAAa;AACnB,QAAM,eAAe;AACrB,QAAM,kBAAkB,aAAa;AACrC,QAAM,kBAAkB,kBAAkB,IAAI,aAAa;AAC3D,QAAM,cAAc;AAEpB,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK,OAAO,MAAM;AAAA,MAElB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,8BAA8B,CAAC;AAAA,MAE/B,UAAU,OAAO,SAAS;AAAA,MAC1B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,OAAO,OAAO,OAAO,KAAK;AAAA,UAC1B,YAAY,OAAO,WAAW;AAAA,QAChC;AAAA,QACA,UAAU;AAAA,UACR,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC7B,YAAY,OAAO,WAAW;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ;AAAA,MACN,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,IAEA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,KAAK,OAAO,MAAM;AAAA,MAClB,iBAAiB;AAAA,MACjB,gBAAgB,cAAc,IAAI;AAAA,MAClC,cAAc;AAAA,MACd,uBAAuB,OAAO,MAAM;AAAA,MACpC,0BAA0B,OAAO,OAAO,QAAQ,QAAQ;AAAA,IAC1D;AAAA,EACF;AACF;","names":[]}

package/dist/theme/dark.theme.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';

package/dist/theme/index.d.mts

@@ -11,7 +11,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/light.theme.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';

package/dist/theme/tokens.theme.d.mts

@@ -9,7 +9,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/types/accordion-tokens.types.d.mts

@@ -1,3 +1,12 @@
+import { VisualStateTokens, ControlVisualState } from './components.types.mjs';
+
+interface AccordionTriggerAppearanceTokens {
+    backgroundColor: string;
+    iconColor: string;
+    opacity: number;
+    pressedOpacity: number;
+    titleColor: string;
+}
 interface AccordionTokens {
     animationDuration: number;
     backgroundColor: string;
@@ -8,21 +17,16 @@ interface AccordionTokens {
         paddingBottom: number;
         paddingHorizontal: number;
     };
-    disabledColor: string;
-    disabledOpacity: number;
     dividerColor: string;
     dividerWidth: number;
-    focusBackgroundColor: string;
-    iconColor: string;
     iconSize: number;
-    pressedOpacity: number;
-    titleColor: string;
     trigger: {
         gap: number;
         minHeight: number;
         paddingHorizontal: number;
         paddingVertical: number;
+        states: VisualStateTokens<ControlVisualState, AccordionTriggerAppearanceTokens>;
     };
 }
 
-export type { AccordionTokens };
+export type { AccordionTokens, AccordionTriggerAppearanceTokens };

package/dist/types/avatar-tokens.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, DisplayVariant } from './components.types.mjs';
 
 type AvatarStatus = "online" | "offline" | "away" | "busy";
 interface AvatarSizeTokens {
@@ -18,7 +18,7 @@ interface AvatarTokens {
     sizes: Record<ComponentSize, AvatarSizeTokens>;
     statusBorderColor: string;
     statusColors: Record<AvatarStatus, string>;
-    variants: Record<ComponentVariant, AvatarVariantTokens>;
+    variants: Record<DisplayVariant, AvatarVariantTokens>;
 }
 
 export type { AvatarSizeTokens, AvatarStatus, AvatarTokens, AvatarVariantTokens };

package/dist/types/badge-tokens.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, DisplayVariant } from './components.types.mjs';
 
 type BadgeTone = "primary" | "secondary" | "neutral" | "error" | "warning" | "success" | "info";
 interface BadgeSizeTokens {
@@ -14,7 +14,7 @@ interface BadgeVariantTokens {
     borderColor: string;
     color: string;
 }
-type BadgeColorTokens = Record<ComponentVariant, BadgeVariantTokens>;
+type BadgeColorTokens = Record<DisplayVariant, BadgeVariantTokens>;
 interface BadgeTokens {
     addonHitSlop: number;
     borderRadius: number;

package/dist/types/buttons-tokens.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, ActionVariant, VisualStateTokens, ActionVisualState } from './components.types.mjs';
 
 type ButtonSizeTokens = Record<ComponentSize, {
     height: number;
@@ -10,22 +10,13 @@ type IconButtonSizeTokens = Record<ComponentSize, {
     size: number;
     padding: number;
 }>;
-type ButtonVariantTokens = Record<ComponentVariant, {
+interface ActionAppearanceTokens {
     backgroundColor: string;
     borderColor: string;
     color: string;
-    disabledBackgroundColor: string;
-    disabledBorderColor: string;
-    disabledColor: string;
-}>;
-type IconButtonVariantTokens = Record<ComponentVariant, {
-    backgroundColor: string;
-    borderColor: string;
-    color: string;
-    disabledBackgroundColor: string;
-    disabledBorderColor: string;
-    disabledColor: string;
-}>;
+}
+type ButtonVariantTokens = Record<ActionVariant, VisualStateTokens<ActionVisualState, ActionAppearanceTokens>>;
+type IconButtonVariantTokens = Record<ActionVariant, VisualStateTokens<ActionVisualState, ActionAppearanceTokens>>;
 interface ButtonTokens {
     borderWidth: number;
     borderRadius: number;
@@ -39,4 +30,4 @@ interface IconButtonTokens {
     variants: IconButtonVariantTokens;
 }
 
-export type { ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens };
+export type { ActionAppearanceTokens, ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens };

package/dist/types/checkbox-tokens.types.d.mts

@@ -1,25 +1,21 @@
-import { ComponentSize, ComponentVariant } from './components.types.mjs';
+import { ComponentSize, SelectionVariant, VisualStateTokens, SelectionVisualState } from './components.types.mjs';
 
 type CheckboxSizeTokens = Record<ComponentSize, {
     size: number;
     iconSize: number;
     hitSlop: number;
 }>;
-type CheckboxVariantTokens = Record<ComponentVariant, {
+interface CheckboxAppearanceTokens {
     backgroundColor: string;
     borderColor: string;
     color: string;
-}>;
+}
+type CheckboxVariantTokens = Record<SelectionVariant, VisualStateTokens<SelectionVisualState, CheckboxAppearanceTokens>>;
 interface CheckboxTokens {
     borderWidth: number;
     borderRadius: number;
-    uncheckedBackgroundColor: string;
-    uncheckedBorderColor: string;
-    disabledBackgroundColor: string;
-    disabledBorderColor: string;
-    disabledColor: string;
     sizes: CheckboxSizeTokens;
     variants: CheckboxVariantTokens;
 }
 
-export type { CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens };
+export type { CheckboxAppearanceTokens, CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens };