@impulse-ui-native/theme 11.4.0 → 14.0.0

package/dist/types/index.d.mts

@@ -2,7 +2,7 @@ export { BorderProps } from './border.types.mjs';
 export { ColorProps } from './color.types.mjs';
 export { ChartColorPalette } from './chart.types.mjs';
 export { ChartsLabelTokens, ChartsTokens } from './charts-tokens.types.mjs';
-export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './components.types.mjs';
+export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ButtonTone, ComponentSize, ComponentTone, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldTone, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './components.types.mjs';
 export { DimensionProps } from './dimension.types.mjs';
 export { FlexProps } from './flex.types.mjs';
 export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps, ShadowScaleTokens } from './shadow.types.mjs';
@@ -17,7 +17,7 @@ export { AvatarSizeTokens, AvatarStatus, AvatarTokens, AvatarVariantTokens } fro
 export { BadgeColorTokens, BadgeSizeTokens, BadgeTokens, BadgeTone, BadgeVariantTokens } from './badge-tokens.types.mjs';
 export { CardSectionTokens, CardTokens } from './card-tokens.types.mjs';
 export { CheckboxAppearanceTokens, CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens } from './checkbox-tokens.types.mjs';
-export { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens } from './tag-tokens.types.mjs';
+export { TagAppearanceTokens, TagSizeTokens, TagTokens, TagTone, TagToneTokens, TagVariantTokens } from './tag-tokens.types.mjs';
 export { ControlAddonAppearanceTokens, ControlAddonTokens, ControlAddonVariantTokens, ControlContainerAppearanceTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputAppearanceTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelAppearanceTokens, ControlLabelTokens } from './control-tokens.types.mjs';
 export { SelectOptionAppearanceTokens, SelectOptionTokens, SelectTokens } from './select-tokens.types.mjs';
 export { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayAppearanceTokens, DatetimePickerDayState, DatetimePickerDayTokens, DatetimePickerDayVisualState, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens } from './datetime-picker-tokens.types.mjs';

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

@@ -1,4 +1,4 @@
-import { ComponentSize, SelectionVariant, VisualStateTokens, SelectionVisualState } from './components.types.mjs';
+import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, SelectionVisualState } from './components.types.mjs';
 
 type RadioSizeTokens = Record<ComponentSize, {
     size: number;
@@ -15,7 +15,7 @@ interface RadioTokens {
     borderWidth: number;
     borderRadius: number;
     sizes: RadioSizeTokens;
-    variants: RadioVariantTokens;
+    colors: Record<ComponentTone, RadioVariantTokens>;
 }
 
 export type { RadioAppearanceTokens, RadioSizeTokens, RadioTokens, RadioVariantTokens };

package/dist/types/segmented-control-tokens.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, SelectionVariant, VisualStateTokens, SelectionVisualState, SelectionState } from './components.types.mjs';
+import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, SelectionVisualState, SelectionState } from './components.types.mjs';
 
 type SegmentedControlItemLayout = "inline" | "stacked";
 interface SegmentedControlItemLayoutTokens {
@@ -34,12 +34,13 @@ interface SegmentedControlTokens {
     rootGap: number;
     rootPadding: number;
     sizes: SegmentedControlSizeTokens;
-    variants: Record<SelectionVariant, SegmentedControlVariantTokens>;
+    colors: Record<ComponentTone, Record<SelectionVariant, SegmentedControlVariantTokens>>;
 }
 interface SegmentedControlItemTokenState extends SelectionState {
     layout: SegmentedControlItemLayout;
     size: ComponentSize;
     variant: SelectionVariant;
+    tone: ComponentTone;
 }
 type ResolvedSegmentedControlItemTokens = Omit<SegmentedControlSizeToken, "layouts"> & SegmentedControlItemLayoutTokens & SegmentedControlAppearanceTokens & {
     borderRadius: number;

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

@@ -1,4 +1,4 @@
-import { ComponentSize, SelectionVariant, VisualStateTokens, ControlVisualState } from './components.types.mjs';
+import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, ControlVisualState } from './components.types.mjs';
 
 /** @deprecated Use SelectionVariant. */
 type SliderVariant = SelectionVariant;
@@ -41,13 +41,14 @@ interface SliderTokens {
     valueBubbleMinWidth: number;
     layouts: Record<SliderTrackLayout, SliderTrackLayoutTokens>;
     sizes: SliderSizeTokens;
-    variants: SliderVariantTokens;
+    colors: Record<ComponentTone, SliderVariantTokens>;
 }
 interface SliderTrackTokenState {
     disabled: boolean;
     layout: SliderTrackLayout;
     size: ComponentSize;
     variant: SelectionVariant;
+    tone: ComponentTone;
 }
 type ResolvedSliderTrackTokens = SliderTrackLayoutTokens & SliderSizeTokens[ComponentSize] & SliderAppearanceTokens & {
     trackBorderRadius: number;

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

@@ -1,4 +1,4 @@
-import { ComponentSize, SelectionVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
+import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
 
 type SwitchSizeTokens = Record<ComponentSize, {
     width: number;
@@ -24,7 +24,7 @@ interface SwitchTokens {
     thumbBorderRadius: number;
     loadingIndicatorColor: string;
     sizes: SwitchSizeTokens;
-    variants: SwitchVariantTokens;
+    colors: Record<ComponentTone, SwitchVariantTokens>;
 }
 
 export type { SwitchAppearanceTokens, SwitchSizeTokens, SwitchTokens, SwitchVariantTokens };

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

@@ -1,6 +1,6 @@
 import { ComponentSize, DisplayVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
 
-type TagColor = "primary" | "secondary" | "error" | "warning" | "success" | "info";
+type TagTone = "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
 type TagSizeTokens = Record<ComponentSize, {
     height: number;
     paddingHorizontal: number;
@@ -13,7 +13,7 @@ interface TagAppearanceTokens {
     color: string;
 }
 type TagVariantTokens = Record<DisplayVariant, VisualStateTokens<AvailabilityVisualState, TagAppearanceTokens>>;
-type TagColorTokens = Record<TagColor, TagVariantTokens>;
+type TagToneTokens = Record<TagTone, TagVariantTokens>;
 interface TagTokens {
     borderWidth: number;
     borderRadius: number;
@@ -21,7 +21,7 @@ interface TagTokens {
     closeHitSlop: number;
     iconMarginLeft: number;
     sizes: TagSizeTokens;
-    colors: TagColorTokens;
+    colors: TagToneTokens;
 }
 
-export type { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens };
+export type { TagAppearanceTokens, TagSizeTokens, TagTokens, TagTone, TagToneTokens, TagVariantTokens };

package/dist/utils/segmented-control-state.utils.js

@@ -1,9 +1,9 @@
 import { getSelectionStateTokens } from "./selection-state.utils";
 function getSegmentedControlItemTokens(tokens, state) {
-  const { disabled, layout, selected, size, variant } = state;
+  const { disabled, layout, selected, size, variant, tone } = state;
   const { layouts, ...sizeTokens } = tokens.sizes[size];
   const appearanceTokens = getSelectionStateTokens(
-    tokens.variants[variant].states,
+    tokens.colors[tone][variant].states,
     { disabled, selected }
   );
   return {

package/dist/utils/segmented-control-state.utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/segmented-control-state.utils.ts"],"sourcesContent":["import type {\n  ResolvedSegmentedControlItemTokens,\n  SegmentedControlItemTokenState,\n  SegmentedControlTokens,\n} from \"../types\";\nimport { getSelectionStateTokens } from \"./selection-state.utils\";\n\nexport function getSegmentedControlItemTokens(\n  tokens: SegmentedControlTokens,\n  state: SegmentedControlItemTokenState,\n): ResolvedSegmentedControlItemTokens {\n  const { disabled, layout, selected, size, variant } = state;\n  const { layouts, ...sizeTokens } = tokens.sizes[size];\n  const appearanceTokens = getSelectionStateTokens(\n    tokens.variants[variant].states,\n    { disabled, selected },\n  );\n\n  return {\n    ...sizeTokens,\n    ...layouts[layout],\n    ...appearanceTokens,\n    borderRadius: tokens.itemBorderRadius,\n    borderWidth: tokens.itemBorderWidth,\n  };\n}\n"],"mappings":"AAKA,SAAS,+BAA+B;AAEjC,SAAS,8BACd,QACA,OACoC;AACpC,QAAM,EAAE,UAAU,QAAQ,UAAU,MAAM,QAAQ,IAAI;AACtD,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,OAAO,MAAM,IAAI;AACpD,QAAM,mBAAmB;AAAA,IACvB,OAAO,SAAS,OAAO,EAAE;AAAA,IACzB,EAAE,UAAU,SAAS;AAAA,EACvB;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,QAAQ,MAAM;AAAA,IACjB,GAAG;AAAA,IACH,cAAc,OAAO;AAAA,IACrB,aAAa,OAAO;AAAA,EACtB;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/segmented-control-state.utils.ts"],"sourcesContent":["import type {\n  ResolvedSegmentedControlItemTokens,\n  SegmentedControlItemTokenState,\n  SegmentedControlTokens,\n} from \"../types\";\nimport { getSelectionStateTokens } from \"./selection-state.utils\";\n\nexport function getSegmentedControlItemTokens(\n  tokens: SegmentedControlTokens,\n  state: SegmentedControlItemTokenState,\n): ResolvedSegmentedControlItemTokens {\n  const { disabled, layout, selected, size, variant, tone } = state;\n  const { layouts, ...sizeTokens } = tokens.sizes[size];\n  const appearanceTokens = getSelectionStateTokens(\n    tokens.colors[tone][variant].states,\n    { disabled, selected },\n  );\n\n  return {\n    ...sizeTokens,\n    ...layouts[layout],\n    ...appearanceTokens,\n    borderRadius: tokens.itemBorderRadius,\n    borderWidth: tokens.itemBorderWidth,\n  };\n}\n"],"mappings":"AAKA,SAAS,+BAA+B;AAEjC,SAAS,8BACd,QACA,OACoC;AACpC,QAAM,EAAE,UAAU,QAAQ,UAAU,MAAM,SAAS,KAAK,IAAI;AAC5D,QAAM,EAAE,SAAS,GAAG,WAAW,IAAI,OAAO,MAAM,IAAI;AACpD,QAAM,mBAAmB;AAAA,IACvB,OAAO,OAAO,IAAI,EAAE,OAAO,EAAE;AAAA,IAC7B,EAAE,UAAU,SAAS;AAAA,EACvB;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,QAAQ,MAAM;AAAA,IACjB,GAAG;AAAA,IACH,cAAc,OAAO;AAAA,IACrB,aAAa,OAAO;AAAA,EACtB;AACF;","names":[]}

package/dist/utils/slider-tokens.utils.js

@@ -3,7 +3,7 @@ function getSliderTrackTokens(tokens, state) {
   return {
     ...tokens.sizes[state.size],
     ...tokens.layouts[state.layout],
-    ...getControlStateTokens(tokens.variants[state.variant], {
+    ...getControlStateTokens(tokens.colors[state.tone][state.variant], {
       disabled: state.disabled
     }),
     trackBorderRadius: tokens.trackBorderRadius

package/dist/utils/slider-tokens.utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/slider-tokens.utils.ts"],"sourcesContent":["import type {\n  ResolvedSliderTrackTokens,\n  SliderTokens,\n  SliderTrackTokenState,\n} from \"../types\";\nimport { getControlStateTokens } from \"./control-state.utils\";\n\nexport function getSliderTrackTokens(\n  tokens: SliderTokens,\n  state: SliderTrackTokenState,\n): ResolvedSliderTrackTokens {\n  return {\n    ...tokens.sizes[state.size],\n    ...tokens.layouts[state.layout],\n    ...getControlStateTokens(tokens.variants[state.variant], {\n      disabled: state.disabled,\n    }),\n    trackBorderRadius: tokens.trackBorderRadius,\n  };\n}\n"],"mappings":"AAKA,SAAS,6BAA6B;AAE/B,SAAS,qBACd,QACA,OAC2B;AAC3B,SAAO;AAAA,IACL,GAAG,OAAO,MAAM,MAAM,IAAI;AAAA,IAC1B,GAAG,OAAO,QAAQ,MAAM,MAAM;AAAA,IAC9B,GAAG,sBAAsB,OAAO,SAAS,MAAM,OAAO,GAAG;AAAA,MACvD,UAAU,MAAM;AAAA,IAClB,CAAC;AAAA,IACD,mBAAmB,OAAO;AAAA,EAC5B;AACF;","names":[]}
+{"version":3,"sources":["../../src/utils/slider-tokens.utils.ts"],"sourcesContent":["import type {\n  ResolvedSliderTrackTokens,\n  SliderTokens,\n  SliderTrackTokenState,\n} from \"../types\";\nimport { getControlStateTokens } from \"./control-state.utils\";\n\nexport function getSliderTrackTokens(\n  tokens: SliderTokens,\n  state: SliderTrackTokenState,\n): ResolvedSliderTrackTokens {\n  return {\n    ...tokens.sizes[state.size],\n    ...tokens.layouts[state.layout],\n    ...getControlStateTokens(tokens.colors[state.tone][state.variant], {\n      disabled: state.disabled,\n    }),\n    trackBorderRadius: tokens.trackBorderRadius,\n  };\n}\n"],"mappings":"AAKA,SAAS,6BAA6B;AAE/B,SAAS,qBACd,QACA,OAC2B;AAC3B,SAAO;AAAA,IACL,GAAG,OAAO,MAAM,MAAM,IAAI;AAAA,IAC1B,GAAG,OAAO,QAAQ,MAAM,MAAM;AAAA,IAC9B,GAAG,sBAAsB,OAAO,OAAO,MAAM,IAAI,EAAE,MAAM,OAAO,GAAG;AAAA,MACjE,UAAU,MAAM;AAAA,IAClB,CAAC;AAAA,IACD,mBAAmB,OAAO;AAAA,EAC5B;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/theme",
-  "version": "11.4.0",
+  "version": "14.0.0",
   "description": "Theme tokens, providers, and styling utilities for ImpulseUI Native.",
   "keywords": [
     "react-native",
@@ -28,7 +28,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/core": "11.4.0"
+    "@impulse-ui-native/core": "14.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",