@impulse-ui-native/theme 3.0.0 → 4.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 (117) hide show
  1. package/dist/hooks/index.d.mts +1 -1
  2. package/dist/hooks/use-colors.hook.d.mts +1 -1
  3. package/dist/hooks/use-components-tokens.hook.d.mts +1 -1
  4. package/dist/hooks/use-theme.hook.d.mts +1 -1
  5. package/dist/hooks/use-themed-styles.d.mts +1 -1
  6. package/dist/index.d.mts +20 -13
  7. package/dist/providers/index.d.mts +1 -1
  8. package/dist/providers/theme.provider.d.mts +1 -1
  9. package/dist/theme/create-accordion-tokens.d.mts +1 -1
  10. package/dist/theme/create-accordion-tokens.js +24 -7
  11. package/dist/theme/create-accordion-tokens.js.map +1 -1
  12. package/dist/theme/create-avatar-tokens.d.mts +1 -1
  13. package/dist/theme/create-avatar-tokens.js +0 -10
  14. package/dist/theme/create-avatar-tokens.js.map +1 -1
  15. package/dist/theme/create-badge-tokens.d.mts +1 -1
  16. package/dist/theme/create-badge-tokens.js +0 -10
  17. package/dist/theme/create-badge-tokens.js.map +1 -1
  18. package/dist/theme/create-button-tokens.d.mts +1 -1
  19. package/dist/theme/create-button-tokens.js +60 -32
  20. package/dist/theme/create-button-tokens.js.map +1 -1
  21. package/dist/theme/create-card-tokens.d.mts +1 -1
  22. package/dist/theme/create-checkbox-tokens.d.mts +1 -1
  23. package/dist/theme/create-checkbox-tokens.js +60 -24
  24. package/dist/theme/create-checkbox-tokens.js.map +1 -1
  25. package/dist/theme/create-control-tokens.d.mts +1 -1
  26. package/dist/theme/create-control-tokens.js +86 -97
  27. package/dist/theme/create-control-tokens.js.map +1 -1
  28. package/dist/theme/create-data-state-tokens.d.mts +1 -1
  29. package/dist/theme/create-data-state-tokens.js.map +1 -1
  30. package/dist/theme/create-datetime-picker.d.mts +1 -1
  31. package/dist/theme/create-datetime-picker.js +18 -6
  32. package/dist/theme/create-datetime-picker.js.map +1 -1
  33. package/dist/theme/create-divider-tokens.d.mts +1 -1
  34. package/dist/theme/create-flyout-tokens.d.mts +1 -1
  35. package/dist/theme/create-flyout-tokens.js.map +1 -1
  36. package/dist/theme/create-icon-button-tokens.d.mts +1 -1
  37. package/dist/theme/create-icon-button-tokens.js +60 -32
  38. package/dist/theme/create-icon-button-tokens.js.map +1 -1
  39. package/dist/theme/create-progress-tokens.d.mts +1 -1
  40. package/dist/theme/create-radio-tokens.d.mts +1 -1
  41. package/dist/theme/create-radio-tokens.js +60 -24
  42. package/dist/theme/create-radio-tokens.js.map +1 -1
  43. package/dist/theme/create-select-tokens.d.mts +1 -1
  44. package/dist/theme/create-select-tokens.js +10 -3
  45. package/dist/theme/create-select-tokens.js.map +1 -1
  46. package/dist/theme/create-skeleton-tokens.d.mts +1 -1
  47. package/dist/theme/create-skeleton-tokens.js.map +1 -1
  48. package/dist/theme/create-slider-tokens.d.mts +1 -1
  49. package/dist/theme/create-slider-tokens.js +135 -32
  50. package/dist/theme/create-slider-tokens.js.map +1 -1
  51. package/dist/theme/create-spinner-tokens.d.mts +1 -1
  52. package/dist/theme/create-stepper-tokens.d.mts +1 -1
  53. package/dist/theme/create-switch-tokens.d.mts +1 -1
  54. package/dist/theme/create-switch-tokens.js +48 -25
  55. package/dist/theme/create-switch-tokens.js.map +1 -1
  56. package/dist/theme/create-tag-tokens.d.mts +1 -1
  57. package/dist/theme/create-tag-tokens.js +228 -68
  58. package/dist/theme/create-tag-tokens.js.map +1 -1
  59. package/dist/theme/create-textarea-tokens.d.mts +1 -1
  60. package/dist/theme/create-textarea-tokens.js +6 -3
  61. package/dist/theme/create-textarea-tokens.js.map +1 -1
  62. package/dist/theme/create-time-picker-tokens.d.mts +1 -1
  63. package/dist/theme/create-time-picker-tokens.js +10 -4
  64. package/dist/theme/create-time-picker-tokens.js.map +1 -1
  65. package/dist/theme/dark.theme.d.mts +1 -1
  66. package/dist/theme/index.d.mts +1 -1
  67. package/dist/theme/light.theme.d.mts +1 -1
  68. package/dist/theme/tokens.theme.d.mts +1 -1
  69. package/dist/types/accordion-tokens.types.d.mts +11 -7
  70. package/dist/types/avatar-tokens.types.d.mts +2 -2
  71. package/dist/types/badge-tokens.types.d.mts +2 -2
  72. package/dist/types/buttons-tokens.types.d.mts +6 -15
  73. package/dist/types/checkbox-tokens.types.d.mts +5 -9
  74. package/dist/types/components.types.d.mts +36 -2
  75. package/dist/types/control-tokens.types.d.mts +57 -0
  76. package/dist/types/control-tokens.types.js +1 -0
  77. package/dist/types/datetime-picker-tokens.types.d.mts +14 -7
  78. package/dist/types/index.d.mts +13 -13
  79. package/dist/types/index.js +1 -1
  80. package/dist/types/index.js.map +1 -1
  81. package/dist/types/radio-tokens.types.d.mts +5 -9
  82. package/dist/types/select-tokens.types.d.mts +8 -4
  83. package/dist/types/slider-tokens.types.d.mts +12 -13
  84. package/dist/types/switch-tokens.types.d.mts +11 -13
  85. package/dist/types/tag-tokens.types.d.mts +5 -7
  86. package/dist/types/textarea-tokens.types.d.mts +6 -5
  87. package/dist/types/theme-provider.types.d.mts +1 -1
  88. package/dist/types/time-picker-token.types.d.mts +8 -5
  89. package/dist/utils/action-state.utils.d.mts +5 -0
  90. package/dist/utils/action-state.utils.js +9 -0
  91. package/dist/utils/action-state.utils.js.map +1 -0
  92. package/dist/utils/availability-state.utils.d.mts +5 -0
  93. package/dist/utils/availability-state.utils.js +8 -0
  94. package/dist/utils/availability-state.utils.js.map +1 -0
  95. package/dist/utils/control-state.utils.d.mts +5 -0
  96. package/dist/utils/control-state.utils.js +9 -0
  97. package/dist/utils/control-state.utils.js.map +1 -0
  98. package/dist/utils/datetime-picker-state.utils.d.mts +6 -0
  99. package/dist/utils/datetime-picker-state.utils.js +10 -0
  100. package/dist/utils/datetime-picker-state.utils.js.map +1 -0
  101. package/dist/utils/field-state.utils.d.mts +5 -0
  102. package/dist/utils/field-state.utils.js +9 -0
  103. package/dist/utils/field-state.utils.js.map +1 -0
  104. package/dist/utils/index.d.mts +10 -3
  105. package/dist/utils/index.js +7 -0
  106. package/dist/utils/index.js.map +1 -1
  107. package/dist/utils/selection-item-state.utils.d.mts +5 -0
  108. package/dist/utils/selection-item-state.utils.js +8 -0
  109. package/dist/utils/selection-item-state.utils.js.map +1 -0
  110. package/dist/utils/selection-state.utils.d.mts +5 -0
  111. package/dist/utils/selection-state.utils.js +11 -0
  112. package/dist/utils/selection-state.utils.js.map +1 -0
  113. package/dist/utils/style.utils.d.mts +1 -1
  114. package/package.json +2 -2
  115. package/dist/types/control-tokes.types.d.mts +0 -62
  116. package/dist/types/control-tokes.types.js +0 -1
  117. /package/dist/types/{control-tokes.types.js.map → control-tokens.types.js.map} +0 -0
@@ -16,7 +16,7 @@ import '../types/accordion-tokens.types.mjs';
16
16
  import '../types/avatar-tokens.types.mjs';
17
17
  import '../types/buttons-tokens.types.mjs';
18
18
  import '../types/card-tokens.types.mjs';
19
- import '../types/control-tokes.types.mjs';
19
+ import '../types/control-tokens.types.mjs';
20
20
  import '../types/data-state-tokens.types.mjs';
21
21
  import '../types/datetime-picker-tokens.types.mjs';
22
22
  import '../types/divider-tokens.types.mjs';
@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
7
7
  import '../types/avatar-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
7
7
  import '../types/avatar-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
7
7
  import '../types/avatar-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -8,7 +8,7 @@ import '../types/accordion-tokens.types.mjs';
8
8
  import '../types/avatar-tokens.types.mjs';
9
9
  import '../types/buttons-tokens.types.mjs';
10
10
  import '../types/card-tokens.types.mjs';
11
- import '../types/control-tokes.types.mjs';
11
+ import '../types/control-tokens.types.mjs';
12
12
  import '../types/data-state-tokens.types.mjs';
13
13
  import '../types/datetime-picker-tokens.types.mjs';
14
14
  import '../types/divider-tokens.types.mjs';
package/dist/index.d.mts CHANGED
@@ -15,7 +15,7 @@ export { createSliderTokens } from './theme/create-slider-tokens.mjs';
15
15
  export { BorderProps } from './types/border.types.mjs';
16
16
  export { ColorProps } from './types/color.types.mjs';
17
17
  export { ChartColorPalette } from './types/chart.types.mjs';
18
- export { ComponentSize, ComponentVariant } from './types/components.types.mjs';
18
+ export { ActionState, ActionVariant, ActionVisualState, AvailabilityState, AvailabilityVisualState, ComponentSize, ComponentVariant, ControlState, ControlVisualState, DisplayVariant, FieldState, FieldVariant, FieldVisualState, SelectionItemState, SelectionItemVisualState, SelectionState, SelectionVariant, SelectionVisualState, VisualStateTokens } from './types/components.types.mjs';
19
19
  export { DimensionProps } from './types/dimension.types.mjs';
20
20
  export { FlexProps } from './types/flex.types.mjs';
21
21
  export { ShadowIntensity, ShadowLevel, ShadowPosition, ShadowProps } from './types/shadow.types.mjs';
@@ -24,30 +24,37 @@ export { StylePropKey, StyleProps } from './types/style.types.mjs';
24
24
  export { AppTheme, ColorPair, ColorScheme, ComponentsThemes, ComponentsTokens, ExtendedThemeColors, PrimitiveThemeTokens, ThemeColors, ThemeContextData } from './types/theme-provider.types.mjs';
25
25
  export { BorderSize, BorderSizeKey, FontFamily, FontSize, FontWeight, FontWeightItalic, FontWeightKeys, FontWeightNormal, FontWeightValue, LetterSpacingKey, LetterSpacings, LineHeight, NeutralColor, NeutralColorKey, Radii, RadiiBlob, RadiiConditional, RadiiDrawn, RadiusBlobKey, RadiusConditionalKey, RadiusDrawnKey, RadiusKey, Space, SpaceSizesKey, TypographyKey } from './types/tokens.types.mjs';
26
26
  export { TypographyPresetKey, TypographyProps } from './types/typography.types.mjs';
27
- export { ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens } from './types/buttons-tokens.types.mjs';
28
- export { AccordionTokens } from './types/accordion-tokens.types.mjs';
27
+ export { ActionAppearanceTokens, ButtonSizeTokens, ButtonTokens, ButtonVariantTokens, IconButtonSizeTokens, IconButtonTokens, IconButtonVariantTokens } from './types/buttons-tokens.types.mjs';
28
+ export { AccordionTokens, AccordionTriggerAppearanceTokens } from './types/accordion-tokens.types.mjs';
29
29
  export { AvatarSizeTokens, AvatarStatus, AvatarTokens, AvatarVariantTokens } from './types/avatar-tokens.types.mjs';
30
30
  export { BadgeColorTokens, BadgeSizeTokens, BadgeTokens, BadgeTone, BadgeVariantTokens } from './types/badge-tokens.types.mjs';
31
31
  export { CardSectionTokens, CardTokens } from './types/card-tokens.types.mjs';
32
- export { CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens } from './types/checkbox-tokens.types.mjs';
33
- export { TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens } from './types/tag-tokens.types.mjs';
34
- export { ControlAddonTokens, ControlAddonVariantTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelTokens } from './types/control-tokes.types.mjs';
35
- export { SelectOptionTokens, SelectTokens } from './types/select-tokens.types.mjs';
36
- export { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayTokens, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens } from './types/datetime-picker-tokens.types.mjs';
32
+ export { CheckboxAppearanceTokens, CheckboxSizeTokens, CheckboxTokens, CheckboxVariantTokens } from './types/checkbox-tokens.types.mjs';
33
+ export { TagAppearanceTokens, TagColor, TagColorTokens, TagSizeTokens, TagTokens, TagVariantTokens } from './types/tag-tokens.types.mjs';
34
+ export { ControlAddonAppearanceTokens, ControlAddonTokens, ControlAddonVariantTokens, ControlContainerAppearanceTokens, ControlContainerSizeTokens, ControlContainerTokens, ControlContainerVariantTokens, ControlErrorTokens, ControlInputAppearanceTokens, ControlInputSizeTokens, ControlInputTokens, ControlInputVariantTokens, ControlLabelAppearanceTokens, ControlLabelTokens } from './types/control-tokens.types.mjs';
35
+ export { SelectOptionAppearanceTokens, SelectOptionTokens, SelectTokens } from './types/select-tokens.types.mjs';
36
+ export { DatePickerFlyoutTokens, DatetimePickerCalendarTokens, DatetimePickerDayAppearanceTokens, DatetimePickerDayState, DatetimePickerDayTokens, DatetimePickerDayVisualState, DatetimePickerFlyoutActionsTokens, DatetimePickerFlyoutTokens, DatetimePickerQuickDateOptionsTokens, DatetimePickerTokens, DatetimePickerVisibleDateSelectTokens, DatetimeRangePickerFlyoutTokens } from './types/datetime-picker-tokens.types.mjs';
37
37
  export { DividerTokens, DividerTone } from './types/divider-tokens.types.mjs';
38
- export { TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens } from './types/time-picker-token.types.mjs';
38
+ export { TimePickerColumnAppearanceTokens, TimePickerColumnTokens, TimePickerColumnsTokens, TimePickerFlyoutTokens, TimePickerTokens } from './types/time-picker-token.types.mjs';
39
39
  export { FlyoutHandleTokens, FlyoutTitleTokens, FlyoutTokens } from './types/flyout-tokens.types.mjs';
40
40
  export { IconTokens } from './types/icon-tokens.types.mjs';
41
41
  export { PressableTokens } from './types/pressable-tokens.types.mjs';
42
42
  export { ProgressColorTokens, ProgressSizeTokens, ProgressTokens, ProgressTone, ProgressVariant } from './types/progress-tokens.types.mjs';
43
- export { RadioSizeTokens, RadioTokens, RadioVariantTokens } from './types/radio-tokens.types.mjs';
43
+ export { RadioAppearanceTokens, RadioSizeTokens, RadioTokens, RadioVariantTokens } from './types/radio-tokens.types.mjs';
44
44
  export { SkeletonBoneTokens, SkeletonTextTokens, SkeletonTokens } from './types/skeleton-tokens.types.mjs';
45
- export { SliderSizeTokens, SliderTokens, SliderVariant, SliderVariantTokens } from './types/slider-tokens.types.mjs';
45
+ export { SliderAppearanceTokens, SliderSizeTokens, SliderTokens, SliderVariant, SliderVariantTokens } from './types/slider-tokens.types.mjs';
46
46
  export { SpinnerTokens, SpinnerTone } from './types/spinner-tokens.types.mjs';
47
47
  export { StepperNavigationTokens, StepperTokens } from './types/stepper-tokens.types.mjs';
48
- export { SwitchSizeTokens, SwitchTokens, SwitchVariantTokens } from './types/switch-tokens.types.mjs';
49
- export { TextareaSizeTokens, TextareaTokens } from './types/textarea-tokens.types.mjs';
48
+ export { SwitchAppearanceTokens, SwitchSizeTokens, SwitchTokens, SwitchVariantTokens } from './types/switch-tokens.types.mjs';
49
+ export { TextareaAppearanceTokens, TextareaSizeTokens, TextareaTokens } from './types/textarea-tokens.types.mjs';
50
50
  export { DataStateActionsFooterTokens, DataStateContentTokens, DataStateDetailsTokens, DataStateLoadingTokens, DataStateTokens } from './types/data-state-tokens.types.mjs';
51
+ export { getActionStateTokens } from './utils/action-state.utils.mjs';
52
+ export { getAvailabilityStateTokens } from './utils/availability-state.utils.mjs';
53
+ export { getControlStateTokens } from './utils/control-state.utils.mjs';
54
+ export { getDatetimePickerDayStateTokens } from './utils/datetime-picker-state.utils.mjs';
55
+ export { getFieldStateTokens } from './utils/field-state.utils.mjs';
56
+ export { getSelectionItemStateTokens } from './utils/selection-item-state.utils.mjs';
57
+ export { getSelectionStateTokens } from './utils/selection-state.utils.mjs';
51
58
  export { createStyleKey, extractStyleProps, getShadowStyle } from './utils/style.utils.mjs';
52
59
  import 'react-native';
53
60
  import 'react';
@@ -11,7 +11,7 @@ import '../types/accordion-tokens.types.mjs';
11
11
  import '../types/avatar-tokens.types.mjs';
12
12
  import '../types/buttons-tokens.types.mjs';
13
13
  import '../types/card-tokens.types.mjs';
14
- import '../types/control-tokes.types.mjs';
14
+ import '../types/control-tokens.types.mjs';
15
15
  import '../types/data-state-tokens.types.mjs';
16
16
  import '../types/datetime-picker-tokens.types.mjs';
17
17
  import '../types/divider-tokens.types.mjs';
@@ -11,7 +11,7 @@ import '../types/accordion-tokens.types.mjs';
11
11
  import '../types/avatar-tokens.types.mjs';
12
12
  import '../types/buttons-tokens.types.mjs';
13
13
  import '../types/card-tokens.types.mjs';
14
- import '../types/control-tokes.types.mjs';
14
+ import '../types/control-tokens.types.mjs';
15
15
  import '../types/data-state-tokens.types.mjs';
16
16
  import '../types/datetime-picker-tokens.types.mjs';
17
17
  import '../types/divider-tokens.types.mjs';
@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
7
7
  import '../types/avatar-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -9,20 +9,37 @@ function createAccordionTokens(tokens) {
9
9
  paddingBottom: tokens.space.sm,
10
10
  paddingHorizontal: tokens.space.sm
11
11
  },
12
- disabledColor: tokens.colors.text.disabled,
13
- disabledOpacity: 0.5,
14
12
  dividerColor: tokens.colors.border.subtle.value,
15
13
  dividerWidth: tokens.borderSize.sm,
16
- focusBackgroundColor: tokens.colors.surface.secondary.value,
17
- iconColor: tokens.colors.text.secondary,
18
14
  iconSize: 18,
19
- pressedOpacity: 0.72,
20
- titleColor: tokens.colors.text.primary,
21
15
  trigger: {
22
16
  gap: tokens.space.xs,
23
17
  minHeight: 48,
24
18
  paddingHorizontal: tokens.space.sm,
25
- paddingVertical: tokens.space.xs
19
+ paddingVertical: tokens.space.xs,
20
+ states: {
21
+ default: {
22
+ backgroundColor: "transparent",
23
+ iconColor: tokens.colors.text.secondary,
24
+ opacity: 1,
25
+ pressedOpacity: 0.72,
26
+ titleColor: tokens.colors.text.primary
27
+ },
28
+ focused: {
29
+ backgroundColor: tokens.colors.surface.secondary.value,
30
+ iconColor: tokens.colors.text.secondary,
31
+ opacity: 1,
32
+ pressedOpacity: 0.72,
33
+ titleColor: tokens.colors.text.primary
34
+ },
35
+ disabled: {
36
+ backgroundColor: "transparent",
37
+ iconColor: tokens.colors.text.disabled,
38
+ opacity: 0.5,
39
+ pressedOpacity: 0.5,
40
+ titleColor: tokens.colors.text.disabled
41
+ }
42
+ }
26
43
  }
27
44
  };
28
45
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theme/create-accordion-tokens.ts"],"sourcesContent":["import type { AccordionTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAccordionTokens(\n tokens: PrimitiveThemeTokens,\n): AccordionTokens {\n return {\n animationDuration: 220,\n backgroundColor: tokens.colors.surface.elevated.value,\n borderColor: tokens.colors.border.subtle.value,\n borderRadius: tokens.radii.lg,\n borderWidth: tokens.borderSize.sm,\n content: {\n paddingBottom: tokens.space.sm,\n paddingHorizontal: tokens.space.sm,\n },\n disabledColor: tokens.colors.text.disabled,\n disabledOpacity: 0.5,\n dividerColor: tokens.colors.border.subtle.value,\n dividerWidth: tokens.borderSize.sm,\n focusBackgroundColor: tokens.colors.surface.secondary.value,\n iconColor: tokens.colors.text.secondary,\n iconSize: 18,\n pressedOpacity: 0.72,\n titleColor: tokens.colors.text.primary,\n trigger: {\n gap: tokens.space.xs,\n minHeight: 48,\n paddingHorizontal: tokens.space.sm,\n paddingVertical: tokens.space.xs,\n },\n };\n}\n"],"mappings":"AAEO,SAAS,sBACd,QACiB;AACjB,SAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,iBAAiB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAChD,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,IACzC,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,SAAS;AAAA,MACP,eAAe,OAAO,MAAM;AAAA,MAC5B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IACA,eAAe,OAAO,OAAO,KAAK;AAAA,IAClC,iBAAiB;AAAA,IACjB,cAAc,OAAO,OAAO,OAAO,OAAO;AAAA,IAC1C,cAAc,OAAO,WAAW;AAAA,IAChC,sBAAsB,OAAO,OAAO,QAAQ,UAAU;AAAA,IACtD,WAAW,OAAO,OAAO,KAAK;AAAA,IAC9B,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY,OAAO,OAAO,KAAK;AAAA,IAC/B,SAAS;AAAA,MACP,KAAK,OAAO,MAAM;AAAA,MAClB,WAAW;AAAA,MACX,mBAAmB,OAAO,MAAM;AAAA,MAChC,iBAAiB,OAAO,MAAM;AAAA,IAChC;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../src/theme/create-accordion-tokens.ts"],"sourcesContent":["import type { AccordionTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAccordionTokens(\n tokens: PrimitiveThemeTokens,\n): AccordionTokens {\n return {\n animationDuration: 220,\n backgroundColor: tokens.colors.surface.elevated.value,\n borderColor: tokens.colors.border.subtle.value,\n borderRadius: tokens.radii.lg,\n borderWidth: tokens.borderSize.sm,\n content: {\n paddingBottom: tokens.space.sm,\n paddingHorizontal: tokens.space.sm,\n },\n dividerColor: tokens.colors.border.subtle.value,\n dividerWidth: tokens.borderSize.sm,\n iconSize: 18,\n trigger: {\n gap: tokens.space.xs,\n minHeight: 48,\n paddingHorizontal: tokens.space.sm,\n paddingVertical: tokens.space.xs,\n states: {\n default: {\n backgroundColor: \"transparent\",\n iconColor: tokens.colors.text.secondary,\n opacity: 1,\n pressedOpacity: 0.72,\n titleColor: tokens.colors.text.primary,\n },\n focused: {\n backgroundColor: tokens.colors.surface.secondary.value,\n iconColor: tokens.colors.text.secondary,\n opacity: 1,\n pressedOpacity: 0.72,\n titleColor: tokens.colors.text.primary,\n },\n disabled: {\n backgroundColor: \"transparent\",\n iconColor: tokens.colors.text.disabled,\n opacity: 0.5,\n pressedOpacity: 0.5,\n titleColor: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,sBACd,QACiB;AACjB,SAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,iBAAiB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAChD,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,IACzC,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,SAAS;AAAA,MACP,eAAe,OAAO,MAAM;AAAA,MAC5B,mBAAmB,OAAO,MAAM;AAAA,IAClC;AAAA,IACA,cAAc,OAAO,OAAO,OAAO,OAAO;AAAA,IAC1C,cAAc,OAAO,WAAW;AAAA,IAChC,UAAU;AAAA,IACV,SAAS;AAAA,MACP,KAAK,OAAO,MAAM;AAAA,MAClB,WAAW;AAAA,MACX,mBAAmB,OAAO,MAAM;AAAA,MAChC,iBAAiB,OAAO,MAAM;AAAA,MAC9B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,iBAAiB;AAAA,UACjB,WAAW,OAAO,OAAO,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,OAAO,OAAO,KAAK;AAAA,QACjC;AAAA,QACA,SAAS;AAAA,UACP,iBAAiB,OAAO,OAAO,QAAQ,UAAU;AAAA,UACjD,WAAW,OAAO,OAAO,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,OAAO,OAAO,KAAK;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,WAAW,OAAO,OAAO,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY,OAAO,OAAO,KAAK;AAAA,QACjC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
7
7
  import '../types/accordion-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -48,16 +48,6 @@ function createAvatarTokens(tokens) {
48
48
  backgroundColor: secondary,
49
49
  borderColor: secondary,
50
50
  color: secondaryContrast
51
- },
52
- ghost: {
53
- backgroundColor: "transparent",
54
- borderColor: "transparent",
55
- color: primary
56
- },
57
- plain: {
58
- backgroundColor: "transparent",
59
- borderColor: "transparent",
60
- color: primary
61
51
  }
62
52
  }
63
53
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theme/create-avatar-tokens.ts"],"sourcesContent":["import type { AvatarTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAvatarTokens(tokens: PrimitiveThemeTokens): AvatarTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.sm,\n fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n sizes: {\n small: {\n fontSize: tokens.fontSize.xs,\n size: 32,\n statusBorderWidth: tokens.borderSize.sm,\n statusSize: 8,\n },\n medium: {\n fontSize: tokens.fontSize.xsm,\n size: 40,\n statusBorderWidth: tokens.borderSize.md,\n statusSize: 10,\n },\n large: {\n fontSize: tokens.fontSize.sm,\n size: 48,\n statusBorderWidth: tokens.borderSize.md,\n statusSize: 12,\n },\n },\n statusBorderColor: tokens.colors.surface.elevated.value,\n statusColors: {\n online: tokens.colors.feedback.success.value,\n offline: tokens.colors.neutral[\"6\"],\n away: tokens.colors.feedback.warning.value,\n busy: tokens.colors.feedback.error.value,\n },\n variants: {\n filled: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n soft: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n ghost: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n plain: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,mBAAmB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAClD,cAAc;AAAA,MACZ,QAAQ,OAAO,OAAO,SAAS,QAAQ;AAAA,MACvC,SAAS,OAAO,OAAO,QAAQ,GAAG;AAAA,MAClC,MAAM,OAAO,OAAO,SAAS,QAAQ;AAAA,MACrC,MAAM,OAAO,OAAO,SAAS,MAAM;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../src/theme/create-avatar-tokens.ts"],"sourcesContent":["import type { AvatarTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createAvatarTokens(tokens: PrimitiveThemeTokens): AvatarTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.sm,\n fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n sizes: {\n small: {\n fontSize: tokens.fontSize.xs,\n size: 32,\n statusBorderWidth: tokens.borderSize.sm,\n statusSize: 8,\n },\n medium: {\n fontSize: tokens.fontSize.xsm,\n size: 40,\n statusBorderWidth: tokens.borderSize.md,\n statusSize: 10,\n },\n large: {\n fontSize: tokens.fontSize.sm,\n size: 48,\n statusBorderWidth: tokens.borderSize.md,\n statusSize: 12,\n },\n },\n statusBorderColor: tokens.colors.surface.elevated.value,\n statusColors: {\n online: tokens.colors.feedback.success.value,\n offline: tokens.colors.neutral[\"6\"],\n away: tokens.colors.feedback.warning.value,\n busy: tokens.colors.feedback.error.value,\n },\n variants: {\n filled: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n soft: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,mBAAmB,QAA4C;AAC7E,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,MAAM;AAAA,QACN,mBAAmB,OAAO,WAAW;AAAA,QACrC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,mBAAmB,OAAO,OAAO,QAAQ,SAAS;AAAA,IAClD,cAAc;AAAA,MACZ,QAAQ,OAAO,OAAO,SAAS,QAAQ;AAAA,MACvC,SAAS,OAAO,OAAO,QAAQ,GAAG;AAAA,MAClC,MAAM,OAAO,OAAO,SAAS,QAAQ;AAAA,MACrC,MAAM,OAAO,OAAO,SAAS,MAAM;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
7
7
  import '../types/avatar-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -14,16 +14,6 @@ function createBadgeTokens(tokens) {
14
14
  backgroundColor: softBackgroundColor,
15
15
  borderColor: softBackgroundColor,
16
16
  color: softColor
17
- },
18
- ghost: {
19
- backgroundColor: "transparent",
20
- borderColor: "transparent",
21
- color: value
22
- },
23
- plain: {
24
- backgroundColor: "transparent",
25
- borderColor: "transparent",
26
- color: value
27
17
  }
28
18
  });
29
19
  return {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theme/create-badge-tokens.ts"],"sourcesContent":["import type { BadgeTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createBadgeTokens(tokens: PrimitiveThemeTokens): BadgeTokens {\n const createVariants = (\n value: string,\n contrast: string,\n softBackgroundColor = contrast,\n softColor = value,\n ) => ({\n filled: {\n backgroundColor: value,\n borderColor: value,\n color: contrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: value,\n color: value,\n },\n soft: {\n backgroundColor: softBackgroundColor,\n borderColor: softBackgroundColor,\n color: softColor,\n },\n ghost: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: value,\n },\n plain: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: value,\n },\n });\n\n return {\n addonHitSlop: tokens.space.xs,\n borderRadius: tokens.radii.round,\n borderWidth: tokens.borderSize.sm,\n fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n gap: tokens.space.xxs,\n sizes: {\n small: {\n fontSize: tokens.fontSize.xxs,\n height: 20,\n iconSize: 12,\n lineHeight: tokens.lineHeight.xxs,\n minWidth: 20,\n paddingHorizontal: tokens.space.xxs,\n },\n medium: {\n fontSize: tokens.fontSize.xs,\n height: 24,\n iconSize: 14,\n lineHeight: tokens.lineHeight.xs,\n minWidth: 24,\n paddingHorizontal: tokens.space.xs,\n },\n large: {\n fontSize: tokens.fontSize.xsm,\n height: 28,\n iconSize: 16,\n lineHeight: tokens.lineHeight.xsm,\n minWidth: 28,\n paddingHorizontal: tokens.space.mxs,\n },\n },\n colors: {\n primary: createVariants(\n tokens.colors.primary.value,\n tokens.colors.primary.contrast,\n tokens.colors.secondary.value,\n ),\n secondary: createVariants(\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n ),\n neutral: createVariants(\n tokens.colors.neutral[\"8\"],\n tokens.colors.white,\n tokens.colors.neutral[\"2\"],\n tokens.colors.text.primary,\n ),\n error: createVariants(\n tokens.colors.feedback.error.value,\n tokens.colors.feedback.error.contrast,\n ),\n warning: createVariants(\n tokens.colors.feedback.warning.value,\n tokens.colors.feedback.warning.contrast,\n ),\n success: createVariants(\n tokens.colors.feedback.success.value,\n tokens.colors.feedback.success.contrast,\n ),\n info: createVariants(\n tokens.colors.feedback.info.value,\n tokens.colors.feedback.info.contrast,\n ),\n },\n };\n}\n"],"mappings":"AAEO,SAAS,kBAAkB,QAA2C;AAC3E,QAAM,iBAAiB,CACrB,OACA,UACA,sBAAsB,UACtB,YAAY,WACR;AAAA,IACJ,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AAAA,IACL,cAAc,OAAO,MAAM;AAAA,IAC3B,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,KAAK,OAAO,MAAM;AAAA,IAClB,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,QACT,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ,GAAG;AAAA,QACzB,OAAO,OAAO;AAAA,QACd,OAAO,OAAO,QAAQ,GAAG;AAAA,QACzB,OAAO,OAAO,KAAK;AAAA,MACrB;AAAA,MACA,OAAO;AAAA,QACL,OAAO,OAAO,SAAS,MAAM;AAAA,QAC7B,OAAO,OAAO,SAAS,MAAM;AAAA,MAC/B;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO,SAAS,KAAK;AAAA,QAC5B,OAAO,OAAO,SAAS,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../src/theme/create-badge-tokens.ts"],"sourcesContent":["import type { BadgeTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createBadgeTokens(tokens: PrimitiveThemeTokens): BadgeTokens {\n const createVariants = (\n value: string,\n contrast: string,\n softBackgroundColor = contrast,\n softColor = value,\n ) => ({\n filled: {\n backgroundColor: value,\n borderColor: value,\n color: contrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: value,\n color: value,\n },\n soft: {\n backgroundColor: softBackgroundColor,\n borderColor: softBackgroundColor,\n color: softColor,\n },\n });\n\n return {\n addonHitSlop: tokens.space.xs,\n borderRadius: tokens.radii.round,\n borderWidth: tokens.borderSize.sm,\n fontFamily: tokens.fontFamily.normal[tokens.fontWeight.semiBold],\n gap: tokens.space.xxs,\n sizes: {\n small: {\n fontSize: tokens.fontSize.xxs,\n height: 20,\n iconSize: 12,\n lineHeight: tokens.lineHeight.xxs,\n minWidth: 20,\n paddingHorizontal: tokens.space.xxs,\n },\n medium: {\n fontSize: tokens.fontSize.xs,\n height: 24,\n iconSize: 14,\n lineHeight: tokens.lineHeight.xs,\n minWidth: 24,\n paddingHorizontal: tokens.space.xs,\n },\n large: {\n fontSize: tokens.fontSize.xsm,\n height: 28,\n iconSize: 16,\n lineHeight: tokens.lineHeight.xsm,\n minWidth: 28,\n paddingHorizontal: tokens.space.mxs,\n },\n },\n colors: {\n primary: createVariants(\n tokens.colors.primary.value,\n tokens.colors.primary.contrast,\n tokens.colors.secondary.value,\n ),\n secondary: createVariants(\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n tokens.colors.secondary.value,\n tokens.colors.secondary.contrast,\n ),\n neutral: createVariants(\n tokens.colors.neutral[\"8\"],\n tokens.colors.white,\n tokens.colors.neutral[\"2\"],\n tokens.colors.text.primary,\n ),\n error: createVariants(\n tokens.colors.feedback.error.value,\n tokens.colors.feedback.error.contrast,\n ),\n warning: createVariants(\n tokens.colors.feedback.warning.value,\n tokens.colors.feedback.warning.contrast,\n ),\n success: createVariants(\n tokens.colors.feedback.success.value,\n tokens.colors.feedback.success.contrast,\n ),\n info: createVariants(\n tokens.colors.feedback.info.value,\n tokens.colors.feedback.info.contrast,\n ),\n },\n };\n}\n"],"mappings":"AAEO,SAAS,kBAAkB,QAA2C;AAC3E,QAAM,iBAAiB,CACrB,OACA,UACA,sBAAsB,UACtB,YAAY,WACR;AAAA,IACJ,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,IACA,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,aAAa;AAAA,MACb,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AAAA,IACL,cAAc,OAAO,MAAM;AAAA,IAC3B,cAAc,OAAO,MAAM;AAAA,IAC3B,aAAa,OAAO,WAAW;AAAA,IAC/B,YAAY,OAAO,WAAW,OAAO,OAAO,WAAW,QAAQ;AAAA,IAC/D,KAAK,OAAO,MAAM;AAAA,IAClB,OAAO;AAAA,MACL,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,QAAQ;AAAA,QACN,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,MACA,OAAO;AAAA,QACL,UAAU,OAAO,SAAS;AAAA,QAC1B,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY,OAAO,WAAW;AAAA,QAC9B,UAAU;AAAA,QACV,mBAAmB,OAAO,MAAM;AAAA,MAClC;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,QAAQ;AAAA,QACtB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,QACT,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,OAAO,UAAU;AAAA,MAC1B;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,QAAQ,GAAG;AAAA,QACzB,OAAO,OAAO;AAAA,QACd,OAAO,OAAO,QAAQ,GAAG;AAAA,QACzB,OAAO,OAAO,KAAK;AAAA,MACrB;AAAA,MACA,OAAO;AAAA,QACL,OAAO,OAAO,SAAS,MAAM;AAAA,QAC7B,OAAO,OAAO,SAAS,MAAM;AAAA,MAC/B;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,QACP,OAAO,OAAO,SAAS,QAAQ;AAAA,QAC/B,OAAO,OAAO,SAAS,QAAQ;AAAA,MACjC;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO,SAAS,KAAK;AAAA,QAC5B,OAAO,OAAO,SAAS,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
7
7
  import '../types/accordion-tokens.types.mjs';
8
8
  import '../types/avatar-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -30,44 +30,72 @@ function createButtonTokens(tokens) {
30
30
  },
31
31
  variants: {
32
32
  filled: {
33
- backgroundColor: primary,
34
- borderColor: primary,
35
- color: primaryContrast,
36
- disabledBackgroundColor: neutral["5"],
37
- disabledBorderColor: neutral["5"],
38
- disabledColor
33
+ default: {
34
+ backgroundColor: primary,
35
+ borderColor: primary,
36
+ color: primaryContrast
37
+ },
38
+ loading: {
39
+ backgroundColor: primary,
40
+ borderColor: primary,
41
+ color: primaryContrast
42
+ },
43
+ disabled: {
44
+ backgroundColor: neutral["5"],
45
+ borderColor: neutral["5"],
46
+ color: disabledColor
47
+ }
39
48
  },
40
49
  outlined: {
41
- backgroundColor: "transparent",
42
- borderColor: primary,
43
- color: primary,
44
- disabledBackgroundColor: "transparent",
45
- disabledBorderColor: neutral["5"],
46
- disabledColor
50
+ default: {
51
+ backgroundColor: "transparent",
52
+ borderColor: primary,
53
+ color: primary
54
+ },
55
+ loading: {
56
+ backgroundColor: "transparent",
57
+ borderColor: primary,
58
+ color: primary
59
+ },
60
+ disabled: {
61
+ backgroundColor: "transparent",
62
+ borderColor: neutral["5"],
63
+ color: disabledColor
64
+ }
47
65
  },
48
66
  soft: {
49
- backgroundColor: secondary,
50
- borderColor: secondary,
51
- color: secondaryContrast,
52
- disabledBackgroundColor: neutral["3"],
53
- disabledBorderColor: neutral["3"],
54
- disabledColor
67
+ default: {
68
+ backgroundColor: secondary,
69
+ borderColor: secondary,
70
+ color: secondaryContrast
71
+ },
72
+ loading: {
73
+ backgroundColor: secondary,
74
+ borderColor: secondary,
75
+ color: secondaryContrast
76
+ },
77
+ disabled: {
78
+ backgroundColor: neutral["3"],
79
+ borderColor: neutral["3"],
80
+ color: disabledColor
81
+ }
55
82
  },
56
83
  ghost: {
57
- backgroundColor: "transparent",
58
- borderColor: "transparent",
59
- color: primary,
60
- disabledBackgroundColor: "transparent",
61
- disabledBorderColor: "transparent",
62
- disabledColor
63
- },
64
- plain: {
65
- backgroundColor: "transparent",
66
- borderColor: "transparent",
67
- color: primary,
68
- disabledBackgroundColor: "transparent",
69
- disabledBorderColor: "transparent",
70
- disabledColor
84
+ default: {
85
+ backgroundColor: "transparent",
86
+ borderColor: "transparent",
87
+ color: primary
88
+ },
89
+ loading: {
90
+ backgroundColor: "transparent",
91
+ borderColor: "transparent",
92
+ color: primary
93
+ },
94
+ disabled: {
95
+ backgroundColor: "transparent",
96
+ borderColor: "transparent",
97
+ color: disabledColor
98
+ }
71
99
  }
72
100
  }
73
101
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theme/create-button-tokens.ts"],"sourcesContent":["import { ButtonTokens, PrimitiveThemeTokens } from \"../types\";\r\n\r\nexport function createButtonTokens(tokens: PrimitiveThemeTokens): ButtonTokens {\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 height: 32,\r\n paddingVertical: 6,\r\n paddingHorizontal: 12,\r\n fontSize: tokens.fontSize.xsm,\r\n },\r\n medium: {\r\n height: 40,\r\n paddingVertical: 8,\r\n paddingHorizontal: 16,\r\n fontSize: tokens.fontSize.sm,\r\n },\r\n large: {\r\n height: 48,\r\n paddingVertical: 10,\r\n paddingHorizontal: 20,\r\n fontSize: tokens.fontSize.sm,\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,mBAAmB,QAA4C;AAC7E,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,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;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":[]}
1
+ {"version":3,"sources":["../../src/theme/create-button-tokens.ts"],"sourcesContent":["import { ButtonTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createButtonTokens(tokens: PrimitiveThemeTokens): ButtonTokens {\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 height: 32,\n paddingVertical: 6,\n paddingHorizontal: 12,\n fontSize: tokens.fontSize.xsm,\n },\n medium: {\n height: 40,\n paddingVertical: 8,\n paddingHorizontal: 16,\n fontSize: tokens.fontSize.sm,\n },\n large: {\n height: 48,\n paddingVertical: 10,\n paddingHorizontal: 20,\n fontSize: tokens.fontSize.sm,\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,mBAAmB,QAA4C;AAC7E,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,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,UAAU,OAAO,SAAS;AAAA,MAC5B;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":[]}
@@ -7,7 +7,7 @@ import '../types/radio-tokens.types.mjs';
7
7
  import '../types/accordion-tokens.types.mjs';
8
8
  import '../types/avatar-tokens.types.mjs';
9
9
  import '../types/buttons-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -7,7 +7,7 @@ import '../types/accordion-tokens.types.mjs';
7
7
  import '../types/avatar-tokens.types.mjs';
8
8
  import '../types/buttons-tokens.types.mjs';
9
9
  import '../types/card-tokens.types.mjs';
10
- import '../types/control-tokes.types.mjs';
10
+ import '../types/control-tokens.types.mjs';
11
11
  import '../types/data-state-tokens.types.mjs';
12
12
  import '../types/datetime-picker-tokens.types.mjs';
13
13
  import '../types/divider-tokens.types.mjs';
@@ -6,11 +6,6 @@ function createCheckboxTokens(tokens) {
6
6
  return {
7
7
  borderWidth: tokens.borderSize.md,
8
8
  borderRadius: tokens.radii.sm,
9
- uncheckedBackgroundColor: "transparent",
10
- uncheckedBorderColor: tokens.colors.border.strong.value,
11
- disabledBackgroundColor: tokens.colors.neutral["3"],
12
- disabledBorderColor: tokens.colors.neutral["5"],
13
- disabledColor: tokens.colors.text.disabled,
14
9
  sizes: {
15
10
  small: {
16
11
  size: 20,
@@ -30,29 +25,70 @@ function createCheckboxTokens(tokens) {
30
25
  },
31
26
  variants: {
32
27
  filled: {
33
- backgroundColor: primary,
34
- borderColor: primary,
35
- color: primaryContrast
28
+ unselected: {
29
+ backgroundColor: "transparent",
30
+ borderColor: tokens.colors.border.strong.value,
31
+ color: primaryContrast
32
+ },
33
+ selected: {
34
+ backgroundColor: primary,
35
+ borderColor: primary,
36
+ color: primaryContrast
37
+ },
38
+ disabledUnselected: {
39
+ backgroundColor: "transparent",
40
+ borderColor: tokens.colors.neutral["5"],
41
+ color: tokens.colors.text.disabled
42
+ },
43
+ disabledSelected: {
44
+ backgroundColor: tokens.colors.neutral["3"],
45
+ borderColor: tokens.colors.neutral["5"],
46
+ color: tokens.colors.text.disabled
47
+ }
36
48
  },
37
49
  outlined: {
38
- backgroundColor: "transparent",
39
- borderColor: primary,
40
- color: primary
50
+ unselected: {
51
+ backgroundColor: "transparent",
52
+ borderColor: tokens.colors.border.strong.value,
53
+ color: primary
54
+ },
55
+ selected: {
56
+ backgroundColor: "transparent",
57
+ borderColor: primary,
58
+ color: primary
59
+ },
60
+ disabledUnselected: {
61
+ backgroundColor: "transparent",
62
+ borderColor: tokens.colors.neutral["5"],
63
+ color: tokens.colors.text.disabled
64
+ },
65
+ disabledSelected: {
66
+ backgroundColor: tokens.colors.neutral["3"],
67
+ borderColor: tokens.colors.neutral["5"],
68
+ color: tokens.colors.text.disabled
69
+ }
41
70
  },
42
71
  soft: {
43
- backgroundColor: secondary,
44
- borderColor: secondary,
45
- color: secondaryContrast
46
- },
47
- ghost: {
48
- backgroundColor: "transparent",
49
- borderColor: "transparent",
50
- color: primary
51
- },
52
- plain: {
53
- backgroundColor: "transparent",
54
- borderColor: "transparent",
55
- color: primary
72
+ unselected: {
73
+ backgroundColor: "transparent",
74
+ borderColor: tokens.colors.border.strong.value,
75
+ color: secondaryContrast
76
+ },
77
+ selected: {
78
+ backgroundColor: secondary,
79
+ borderColor: secondary,
80
+ color: secondaryContrast
81
+ },
82
+ disabledUnselected: {
83
+ backgroundColor: "transparent",
84
+ borderColor: tokens.colors.neutral["5"],
85
+ color: tokens.colors.text.disabled
86
+ },
87
+ disabledSelected: {
88
+ backgroundColor: tokens.colors.neutral["3"],
89
+ borderColor: tokens.colors.neutral["5"],
90
+ color: tokens.colors.text.disabled
91
+ }
56
92
  }
57
93
  }
58
94
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/theme/create-checkbox-tokens.ts"],"sourcesContent":["import type { CheckboxTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCheckboxTokens(\n tokens: PrimitiveThemeTokens,\n): CheckboxTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.sm,\n uncheckedBackgroundColor: \"transparent\",\n uncheckedBorderColor: tokens.colors.border.strong.value,\n disabledBackgroundColor: tokens.colors.neutral[\"3\"],\n disabledBorderColor: tokens.colors.neutral[\"5\"],\n disabledColor: tokens.colors.text.disabled,\n\n sizes: {\n small: {\n size: 20,\n iconSize: 14,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n iconSize: 18,\n hitSlop: 10,\n },\n large: {\n size: 28,\n iconSize: 22,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n outlined: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n soft: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n ghost: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n plain: {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n color: primary,\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAC3B,0BAA0B;AAAA,IAC1B,sBAAsB,OAAO,OAAO,OAAO,OAAO;AAAA,IAClD,yBAAyB,OAAO,OAAO,QAAQ,GAAG;AAAA,IAClD,qBAAqB,OAAO,OAAO,QAAQ,GAAG;AAAA,IAC9C,eAAe,OAAO,OAAO,KAAK;AAAA,IAElC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../src/theme/create-checkbox-tokens.ts"],"sourcesContent":["import type { CheckboxTokens, PrimitiveThemeTokens } from \"../types\";\n\nexport function createCheckboxTokens(\n tokens: PrimitiveThemeTokens,\n): CheckboxTokens {\n const primary = tokens.colors.primary.value;\n const primaryContrast = tokens.colors.primary.contrast;\n const secondary = tokens.colors.secondary.value;\n const secondaryContrast = tokens.colors.secondary.contrast;\n\n return {\n borderWidth: tokens.borderSize.md,\n borderRadius: tokens.radii.sm,\n\n sizes: {\n small: {\n size: 20,\n iconSize: 14,\n hitSlop: 12,\n },\n medium: {\n size: 24,\n iconSize: 18,\n hitSlop: 10,\n },\n large: {\n size: 28,\n iconSize: 22,\n hitSlop: 8,\n },\n },\n\n variants: {\n filled: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primaryContrast,\n },\n selected: {\n backgroundColor: primary,\n borderColor: primary,\n color: primaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.neutral[\"3\"],\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n },\n outlined: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: primary,\n },\n selected: {\n backgroundColor: \"transparent\",\n borderColor: primary,\n color: primary,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.neutral[\"3\"],\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n },\n soft: {\n unselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.border.strong.value,\n color: secondaryContrast,\n },\n selected: {\n backgroundColor: secondary,\n borderColor: secondary,\n color: secondaryContrast,\n },\n disabledUnselected: {\n backgroundColor: \"transparent\",\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n disabledSelected: {\n backgroundColor: tokens.colors.neutral[\"3\"],\n borderColor: tokens.colors.neutral[\"5\"],\n color: tokens.colors.text.disabled,\n },\n },\n },\n };\n}\n"],"mappings":"AAEO,SAAS,qBACd,QACgB;AAChB,QAAM,UAAU,OAAO,OAAO,QAAQ;AACtC,QAAM,kBAAkB,OAAO,OAAO,QAAQ;AAC9C,QAAM,YAAY,OAAO,OAAO,UAAU;AAC1C,QAAM,oBAAoB,OAAO,OAAO,UAAU;AAElD,SAAO;AAAA,IACL,aAAa,OAAO,WAAW;AAAA,IAC/B,cAAc,OAAO,MAAM;AAAA,IAE3B,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,UAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,UAAU;AAAA,QACR,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,UAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,YAAY;AAAA,UACV,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,OAAO,OAAO;AAAA,UACzC,OAAO;AAAA,QACT;AAAA,QACA,UAAU;AAAA,UACR,iBAAiB;AAAA,UACjB,aAAa;AAAA,UACb,OAAO;AAAA,QACT;AAAA,QACA,oBAAoB;AAAA,UAClB,iBAAiB;AAAA,UACjB,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,OAAO,OAAO,QAAQ,GAAG;AAAA,UAC1C,aAAa,OAAO,OAAO,QAAQ,GAAG;AAAA,UACtC,OAAO,OAAO,OAAO,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
@@ -1,5 +1,5 @@
1
1
  import { PrimitiveThemeTokens } from '../types/theme-provider.types.mjs';
2
- import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from '../types/control-tokes.types.mjs';
2
+ import { ControlAddonTokens, ControlContainerTokens, ControlErrorTokens, ControlInputTokens, ControlLabelTokens } from '../types/control-tokens.types.mjs';
3
3
  import '../types/badge-tokens.types.mjs';
4
4
  import '../types/components.types.mjs';
5
5
  import '../types/checkbox-tokens.types.mjs';