@impulse-ui-native/theme 12.0.0 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/theme/create-avatar-tokens.js +54 -13
  3. package/dist/theme/create-avatar-tokens.js.map +1 -1
  4. package/dist/theme/create-button-tokens.js +206 -56
  5. package/dist/theme/create-button-tokens.js.map +1 -1
  6. package/dist/theme/create-checkbox-tokens.js +198 -55
  7. package/dist/theme/create-checkbox-tokens.js.map +1 -1
  8. package/dist/theme/create-control-tokens.js +1 -1
  9. package/dist/theme/create-control-tokens.js.map +1 -1
  10. package/dist/theme/create-icon-button-tokens.js +206 -56
  11. package/dist/theme/create-icon-button-tokens.js.map +1 -1
  12. package/dist/theme/create-radio-tokens.js +198 -55
  13. package/dist/theme/create-radio-tokens.js.map +1 -1
  14. package/dist/theme/create-segmented-control-tokens.js +219 -64
  15. package/dist/theme/create-segmented-control-tokens.js.map +1 -1
  16. package/dist/theme/create-slider-tokens.js +391 -121
  17. package/dist/theme/create-slider-tokens.js.map +1 -1
  18. package/dist/theme/create-switch-tokens.js +165 -46
  19. package/dist/theme/create-switch-tokens.js.map +1 -1
  20. package/dist/theme/create-tag-tokens.js +38 -0
  21. package/dist/theme/create-tag-tokens.js.map +1 -1
  22. package/dist/types/avatar-tokens.types.d.mts +2 -2
  23. package/dist/types/buttons-tokens.types.d.mts +3 -3
  24. package/dist/types/checkbox-tokens.types.d.mts +2 -2
  25. package/dist/types/components.types.d.mts +4 -2
  26. package/dist/types/index.d.mts +2 -2
  27. package/dist/types/radio-tokens.types.d.mts +2 -2
  28. package/dist/types/segmented-control-tokens.types.d.mts +3 -2
  29. package/dist/types/slider-tokens.types.d.mts +3 -2
  30. package/dist/types/switch-tokens.types.d.mts +2 -2
  31. package/dist/types/tag-tokens.types.d.mts +4 -4
  32. package/dist/utils/segmented-control-state.utils.js +2 -2
  33. package/dist/utils/segmented-control-state.utils.js.map +1 -1
  34. package/dist/utils/slider-tokens.utils.js +1 -1
  35. package/dist/utils/slider-tokens.utils.js.map +1 -1
  36. package/package.json +2 -2
@@ -1,4 +1,4 @@
1
- import { ComponentSize, SelectionVariant, VisualStateTokens, SelectionVisualState, SelectionState } from './components.types.mjs';
1
+ import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, SelectionVisualState, SelectionState } from './components.types.mjs';
2
2
 
3
3
  type SegmentedControlItemLayout = "inline" | "stacked";
4
4
  interface SegmentedControlItemLayoutTokens {
@@ -34,12 +34,13 @@ interface SegmentedControlTokens {
34
34
  rootGap: number;
35
35
  rootPadding: number;
36
36
  sizes: SegmentedControlSizeTokens;
37
- variants: Record<SelectionVariant, SegmentedControlVariantTokens>;
37
+ colors: Record<ComponentTone, Record<SelectionVariant, SegmentedControlVariantTokens>>;
38
38
  }
39
39
  interface SegmentedControlItemTokenState extends SelectionState {
40
40
  layout: SegmentedControlItemLayout;
41
41
  size: ComponentSize;
42
42
  variant: SelectionVariant;
43
+ tone: ComponentTone;
43
44
  }
44
45
  type ResolvedSegmentedControlItemTokens = Omit<SegmentedControlSizeToken, "layouts"> & SegmentedControlItemLayoutTokens & SegmentedControlAppearanceTokens & {
45
46
  borderRadius: number;
@@ -1,4 +1,4 @@
1
- import { ComponentSize, SelectionVariant, VisualStateTokens, ControlVisualState } from './components.types.mjs';
1
+ import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, ControlVisualState } from './components.types.mjs';
2
2
 
3
3
  /** @deprecated Use SelectionVariant. */
4
4
  type SliderVariant = SelectionVariant;
@@ -41,13 +41,14 @@ interface SliderTokens {
41
41
  valueBubbleMinWidth: number;
42
42
  layouts: Record<SliderTrackLayout, SliderTrackLayoutTokens>;
43
43
  sizes: SliderSizeTokens;
44
- variants: SliderVariantTokens;
44
+ colors: Record<ComponentTone, SliderVariantTokens>;
45
45
  }
46
46
  interface SliderTrackTokenState {
47
47
  disabled: boolean;
48
48
  layout: SliderTrackLayout;
49
49
  size: ComponentSize;
50
50
  variant: SelectionVariant;
51
+ tone: ComponentTone;
51
52
  }
52
53
  type ResolvedSliderTrackTokens = SliderTrackLayoutTokens & SliderSizeTokens[ComponentSize] & SliderAppearanceTokens & {
53
54
  trackBorderRadius: number;
@@ -1,4 +1,4 @@
1
- import { ComponentSize, SelectionVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
1
+ import { ComponentSize, ComponentTone, SelectionVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
2
2
 
3
3
  type SwitchSizeTokens = Record<ComponentSize, {
4
4
  width: number;
@@ -24,7 +24,7 @@ interface SwitchTokens {
24
24
  thumbBorderRadius: number;
25
25
  loadingIndicatorColor: string;
26
26
  sizes: SwitchSizeTokens;
27
- variants: SwitchVariantTokens;
27
+ colors: Record<ComponentTone, SwitchVariantTokens>;
28
28
  }
29
29
 
30
30
  export type { SwitchAppearanceTokens, SwitchSizeTokens, SwitchTokens, SwitchVariantTokens };
@@ -1,6 +1,6 @@
1
1
  import { ComponentSize, DisplayVariant, VisualStateTokens, AvailabilityVisualState } from './components.types.mjs';
2
2
 
3
- type TagColor = "primary" | "secondary" | "error" | "warning" | "success" | "info";
3
+ type TagTone = "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
4
4
  type TagSizeTokens = Record<ComponentSize, {
5
5
  height: number;
6
6
  paddingHorizontal: number;
@@ -13,7 +13,7 @@ interface TagAppearanceTokens {
13
13
  color: string;
14
14
  }
15
15
  type TagVariantTokens = Record<DisplayVariant, VisualStateTokens<AvailabilityVisualState, TagAppearanceTokens>>;
16
- type TagColorTokens = Record<TagColor, TagVariantTokens>;
16
+ type TagToneTokens = Record<TagTone, TagVariantTokens>;
17
17
  interface TagTokens {
18
18
  borderWidth: number;
19
19
  borderRadius: number;
@@ -21,7 +21,7 @@ interface TagTokens {
21
21
  closeHitSlop: number;
22
22
  iconMarginLeft: number;
23
23
  sizes: TagSizeTokens;
24
- colors: TagColorTokens;
24
+ colors: TagToneTokens;
25
25
  }
26
26
 
27
- export type { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens };
27
+ export type { TagAppearanceTokens, TagSizeTokens, TagTokens, TagTone, TagToneTokens, TagVariantTokens };
@@ -1,9 +1,9 @@
1
1
  import { getSelectionStateTokens } from "./selection-state.utils";
2
2
  function getSegmentedControlItemTokens(tokens, state) {
3
- const { disabled, layout, selected, size, variant } = state;
3
+ const { disabled, layout, selected, size, variant, tone } = state;
4
4
  const { layouts, ...sizeTokens } = tokens.sizes[size];
5
5
  const appearanceTokens = getSelectionStateTokens(
6
- tokens.variants[variant].states,
6
+ tokens.colors[tone][variant].states,
7
7
  { disabled, selected }
8
8
  );
9
9
  return {
@@ -1 +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":[]}
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, 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":[]}
@@ -3,7 +3,7 @@ function getSliderTrackTokens(tokens, state) {
3
3
  return {
4
4
  ...tokens.sizes[state.size],
5
5
  ...tokens.layouts[state.layout],
6
- ...getControlStateTokens(tokens.variants[state.variant], {
6
+ ...getControlStateTokens(tokens.colors[state.tone][state.variant], {
7
7
  disabled: state.disabled
8
8
  }),
9
9
  trackBorderRadius: tokens.trackBorderRadius
@@ -1 +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":[]}
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.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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@impulse-ui-native/theme",
3
- "version": "12.0.0",
3
+ "version": "14.0.0",
4
4
  "description": "Theme tokens, providers, and styling utilities for ImpulseUI Native.",
5
5
  "keywords": [
6
6
  "react-native",
@@ -28,7 +28,7 @@
28
28
  ],
29
29
  "sideEffects": false,
30
30
  "dependencies": {
31
- "@impulse-ui-native/core": "12.0.0"
31
+ "@impulse-ui-native/core": "14.0.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@impulse-ui-native/eslint-config": "1.0.0",