@vygruppen/spor-react 13.0.2 → 13.1.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 (75) hide show
  1. package/.turbo/turbo-build.log +25 -25
  2. package/.turbo/turbo-postinstall.log +4 -4
  3. package/CHANGELOG.md +21 -0
  4. package/dist/index.cjs +554 -397
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +194 -181
  7. package/dist/index.d.ts +194 -181
  8. package/dist/index.mjs +556 -399
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +4 -8
  11. package/src/alert/AlertIcon.tsx +2 -2
  12. package/src/alert/ServiceAlert.tsx +2 -1
  13. package/src/calendar/CalendarCell.tsx +4 -4
  14. package/src/datepicker/CalendarHeader.tsx +1 -1
  15. package/src/dialog/Drawer.tsx +1 -1
  16. package/src/input/CardSelect.tsx +4 -4
  17. package/src/input/Combobox.tsx +1 -1
  18. package/src/input/Field.tsx +1 -1
  19. package/src/input/InputChip.tsx +33 -0
  20. package/src/input/PasswordInput.tsx +2 -1
  21. package/src/input/Popover.tsx +9 -7
  22. package/src/input/Select.tsx +44 -7
  23. package/src/input/index.ts +1 -0
  24. package/src/linjetag/LineIcon.tsx +1 -1
  25. package/src/loader/ColorInlineLoader.tsx +2 -1
  26. package/src/loader/ColorSpinner.tsx +2 -1
  27. package/src/loader/ContentLoader.tsx +2 -1
  28. package/src/loader/DarkFullScreenLoader.tsx +2 -1
  29. package/src/loader/DarkInlineLoader.tsx +2 -1
  30. package/src/loader/DarkSpinner.tsx +2 -1
  31. package/src/loader/LightFullScreenLoader.tsx +2 -1
  32. package/src/loader/LightInlineLoader.tsx +2 -1
  33. package/src/loader/LightSpinner.tsx +2 -1
  34. package/src/loader/Lottie.tsx +3 -2
  35. package/src/loader/text.ts +15 -0
  36. package/src/stepper/StepperStep.tsx +2 -2
  37. package/src/theme/recipes/badge.ts +24 -24
  38. package/src/theme/recipes/button.ts +22 -22
  39. package/src/theme/recipes/close-button.ts +2 -2
  40. package/src/theme/recipes/input.ts +9 -9
  41. package/src/theme/recipes/link.ts +1 -1
  42. package/src/theme/recipes/pressable-card.ts +12 -12
  43. package/src/theme/recipes/skeleton.ts +1 -1
  44. package/src/theme/recipes/static-card.ts +8 -8
  45. package/src/theme/semantic-tokens/colors.ts +1 -1
  46. package/src/theme/slot-recipes/accordion.ts +10 -10
  47. package/src/theme/slot-recipes/alert-expandable.ts +35 -35
  48. package/src/theme/slot-recipes/alert-service.ts +10 -10
  49. package/src/theme/slot-recipes/alert.ts +11 -11
  50. package/src/theme/slot-recipes/anatomy.ts +2 -0
  51. package/src/theme/slot-recipes/autocomplete.ts +5 -5
  52. package/src/theme/slot-recipes/breadcrumb.ts +4 -4
  53. package/src/theme/slot-recipes/checkbox.ts +11 -17
  54. package/src/theme/slot-recipes/choice-chip.ts +21 -21
  55. package/src/theme/slot-recipes/datepicker.ts +29 -29
  56. package/src/theme/slot-recipes/field.ts +3 -3
  57. package/src/theme/slot-recipes/floating-action-button.ts +14 -14
  58. package/src/theme/slot-recipes/index.ts +2 -0
  59. package/src/theme/slot-recipes/input-chip.ts +118 -0
  60. package/src/theme/slot-recipes/listbox.ts +9 -9
  61. package/src/theme/slot-recipes/media-controller-button.ts +9 -9
  62. package/src/theme/slot-recipes/menu.ts +7 -7
  63. package/src/theme/slot-recipes/numeric-stepper.ts +4 -4
  64. package/src/theme/slot-recipes/pagination.ts +4 -4
  65. package/src/theme/slot-recipes/popover.ts +4 -4
  66. package/src/theme/slot-recipes/progress-bar.ts +2 -2
  67. package/src/theme/slot-recipes/progress-indicator.ts +1 -1
  68. package/src/theme/slot-recipes/radio-card.ts +11 -11
  69. package/src/theme/slot-recipes/radio.ts +5 -5
  70. package/src/theme/slot-recipes/select.ts +16 -16
  71. package/src/theme/slot-recipes/stepper.ts +5 -5
  72. package/src/theme/slot-recipes/switch.ts +6 -6
  73. package/src/theme/slot-recipes/table.ts +2 -2
  74. package/src/theme/slot-recipes/tabs.ts +18 -18
  75. package/src/theme/slot-recipes/toast.ts +3 -3
package/src/theme/recipes/badge.ts CHANGED
@@ -11,59 +11,59 @@ export const badgeRecipie = defineRecipe({
11
11
  variants: {
12
12
  colorPalette: {
13
13
  neutral: {
14
- backgroundColor: "badge.surface",
15
- color: "badge.text",
14
+ backgroundColor: "surface",
15
+ color: "text",
16
16
  "& svg": {
17
- color: "badge.icon",
17
+ color: "icon",
18
18
  },
19
19
  },
20
20
  grey: {
21
- backgroundColor: "badge.grey.surface",
22
- color: "badge.grey.text",
21
+ backgroundColor: "surface.neutral",
22
+ color: "text.neutral",
23
23
  "& svg": {
24
- color: "badge.grey.icon",
24
+ color: "icon.neutral",
25
25
  },
26
26
  },
27
27
  green: {
28
- backgroundColor: "badge.green.surface",
29
- color: "badge.green.text",
28
+ backgroundColor: "surface.subtle",
29
+ color: "text.success",
30
30
  "& svg": {
31
- color: "badge.green.icon",
31
+ color: "icon.success",
32
32
  },
33
33
  },
34
34
  blue: {
35
- backgroundColor: "badge.blue.surface",
36
- color: "badge.blue.text",
35
+ backgroundColor: "surface.info",
36
+ color: "text.info",
37
37
  "& svg": {
38
- color: "badge.blue.icon",
38
+ color: "icon.info",
39
39
  },
40
40
  },
41
41
  cream: {
42
- backgroundColor: "badge.cream.surface",
43
- color: "badge.cream.text",
42
+ backgroundColor: "surface.warning",
43
+ color: "text.warning",
44
44
  "& svg": {
45
- color: "badge.cream.icon",
45
+ color: "icon.warning",
46
46
  },
47
47
  },
48
48
  yellow: {
49
- backgroundColor: "badge.yellow.surface",
50
- color: "badge.yellow.text",
49
+ backgroundColor: "surface.notice",
50
+ color: "text.notice",
51
51
  "& svg": {
52
- color: "badge.yellow.icon",
52
+ color: "icon.notice",
53
53
  },
54
54
  },
55
55
  orange: {
56
- backgroundColor: "badge.orange.surface",
57
- color: "badge.orange.text",
56
+ backgroundColor: "surface.caution",
57
+ color: "text.caution",
58
58
  "& svg": {
59
- color: "badge.orange.icon",
59
+ color: "icon.caution",
60
60
  },
61
61
  },
62
62
  red: {
63
- backgroundColor: "badge.red.surface",
64
- color: "badge.red.text",
63
+ backgroundColor: "surface.critical",
64
+ color: "text.critical",
65
65
  "& svg": {
66
- color: "badge.red.icon",
66
+ color: "icon.critical",
67
67
  },
68
68
  },
69
69
  },
package/src/theme/recipes/button.ts CHANGED
@@ -29,40 +29,40 @@ export const buttonRecipe = defineRecipe({
29
29
  variants: {
30
30
  variant: {
31
31
  primary: {
32
- background: "brand.surface",
33
- color: "brand.text",
32
+ background: "surface.brand",
33
+ color: "text.brand",
34
34
  fontWeight: "bold",
35
35
  _hover: {
36
- background: "brand.surface.hover",
36
+ background: "surface.brand.hover",
37
37
  _active: {
38
- background: "brand.surface.active",
38
+ background: "surface.brand.active",
39
39
  },
40
40
  },
41
41
  },
42
42
  secondary: {
43
- background: "accent.surface",
44
- color: "accent.text",
43
+ background: "surface.accent",
44
+ color: "text.accent",
45
45
  fontWeight: "bold",
46
46
  _hover: {
47
- background: "accent.surface.hover",
47
+ background: "surface.accent.hover",
48
48
  _active: {
49
- background: "accent.surface.active",
49
+ background: "surface.accent.active",
50
50
  },
51
51
  },
52
52
  },
53
53
  tertiary: {
54
- color: "core.text",
54
+ color: "text.core",
55
55
  outline: "solid",
56
56
  fontWeight: "normal",
57
57
  outlineWidth: tokens.size.stroke.sm,
58
- outlineColor: "core.outline",
58
+ outlineColor: "outline.core",
59
59
  _hover: {
60
60
  outlineWidth: tokens.size.stroke.md,
61
- outlineColor: "core.outline.hover",
61
+ outlineColor: "outline.core.hover",
62
62
  _active: {
63
- background: "core.surface.active",
63
+ background: "surface.core.active",
64
64
  outlineWidth: tokens.size.stroke.sm,
65
- outlineColor: "core.outline",
65
+ outlineColor: "outline.core",
66
66
  },
67
67
  },
68
68
  _focus: {
@@ -70,30 +70,30 @@ export const buttonRecipe = defineRecipe({
70
70
  },
71
71
  },
72
72
  ghost: {
73
- color: "ghost.text",
73
+ color: "text.ghost",
74
74
  fontWeight: "bold",
75
75
  _hover: {
76
- background: "ghost.surface.hover",
76
+ background: "surface.ghost.hover",
77
77
  _active: {
78
- background: "ghost.surface.active",
78
+ background: "surface.ghost.active",
79
79
  },
80
80
  },
81
81
  },
82
82
  floating: {
83
- color: "floating.text",
84
- background: "floating.surface",
83
+ color: "text.floating",
84
+ background: "surface.floating",
85
85
  fontWeight: "bold",
86
86
  border: "sm",
87
- borderColor: "floating.outline",
87
+ borderColor: "outline.floating",
88
88
  boxShadow:
89
89
  "0px 1px 3px 0px var(--spor-colors-surface-disabled, rgba(0, 0, 0, 0.10))",
90
90
  _hover: {
91
- borderColor: "floating.outline.hover",
91
+ borderColor: "outline.floating.hover",
92
92
 
93
93
  _active: {
94
- background: "core.surface.active",
94
+ background: "surface.core.active",
95
95
  boxShadow: "none",
96
- borderColor: "floating.outline",
96
+ borderColor: "outline.floating",
97
97
  },
98
98
  },
99
99
  },
package/src/theme/recipes/close-button.ts CHANGED
@@ -9,12 +9,12 @@ export const closeButtonRecipe = defineRecipe({
9
9
  color: "text",
10
10
  fontWeight: "normal",
11
11
  _hover: {
12
- background: "ghost.surface.hover",
12
+ background: "surface.ghost.hover",
13
13
  _disabled: {
14
14
  color: "icon.disabled",
15
15
  },
16
16
  _active: {
17
- background: "ghost.surface.active",
17
+ background: "surface.ghost.active",
18
18
  },
19
19
  },
20
20
  },
package/src/theme/recipes/input.ts CHANGED
@@ -37,7 +37,7 @@ export const inputRecipe = defineRecipe({
37
37
  },
38
38
  _hover: {
39
39
  outline: "2px solid",
40
- outlineColor: "core.outline",
40
+ outlineColor: "outline.core",
41
41
  },
42
42
  },
43
43
  },
@@ -46,14 +46,14 @@ export const inputRecipe = defineRecipe({
46
46
  core: {
47
47
  backgroundColor: "transparent",
48
48
  outline: "1px solid",
49
- outlineColor: "core.outline",
49
+ outlineColor: "outline.core",
50
50
  _hover: {
51
51
  outline: "2px solid",
52
- outlineColor: "core.outline.hover",
52
+ outlineColor: "outline.core.hover",
53
53
  _active: {
54
54
  outline: "1px solid",
55
55
  outlineColor: "outline.disabled",
56
- backgroundColor: "core.surface.active",
56
+ backgroundColor: "surface.core.active",
57
57
  },
58
58
  },
59
59
  _focus: {
@@ -63,18 +63,18 @@ export const inputRecipe = defineRecipe({
63
63
  },
64
64
  floating: {
65
65
  boxShadow: "sm",
66
- bg: "floating.surface",
66
+ bg: "surface.floating",
67
67
  outline: "1px solid",
68
- outlineColor: "floating.outline",
68
+ outlineColor: "outline.floating",
69
69
 
70
70
  _hover: {
71
71
  outline: "1px solid",
72
- outlineColor: "floating.outline.hover",
72
+ outlineColor: "outline.floating.hover",
73
73
  },
74
74
  _active: {
75
75
  outline: "1px solid",
76
- outlineColor: "floating.outline.active",
77
- backgroundColor: "floating.surface.active",
76
+ outlineColor: "outline.neutral",
77
+ backgroundColor: "surface.floating.active",
78
78
  },
79
79
 
80
80
  focus: {
package/src/theme/recipes/link.ts CHANGED
@@ -33,7 +33,7 @@ export const linkRecipe = defineRecipe({
33
33
  variants: {
34
34
  variant: {
35
35
  primary: {
36
- color: "core.text",
36
+ color: "text.core",
37
37
  _hover: {
38
38
  color: "text",
39
39
  _active: {
package/src/theme/recipes/pressable-card.ts CHANGED
@@ -30,33 +30,33 @@ export const pressableCardRecipe = defineRecipe({
30
30
  shadowColor: "surface.disabled",
31
31
 
32
32
  border: "sm",
33
- borderColor: "floating.outline",
33
+ borderColor: "outline.floating",
34
34
 
35
- backgroundColor: "floating.surface",
35
+ backgroundColor: "surface.floating",
36
36
  _hover: {
37
37
  boxShadow: "0px 2px 6px 0px var(--shadow-color)",
38
- backgroundColor: "floating.surface.hover",
38
+ backgroundColor: "surface.floating.hover",
39
39
 
40
- borderColor: "floating.outline.hover",
40
+ borderColor: "outline.floating.hover",
41
41
 
42
42
  _active: {
43
43
  boxShadow: "none",
44
- backgroundColor: "floating.surface.active",
45
- borderColor: "floating.outline.active",
44
+ backgroundColor: "surface.floating.active",
45
+ borderColor: "outline.neutral",
46
46
  },
47
47
  },
48
48
  },
49
49
  core: {
50
- outlineColor: "core.outline",
50
+ outlineColor: "outline.core",
51
51
  outlineWidth: tokens.size.stroke.sm,
52
52
  outlineStyle: "solid",
53
53
 
54
54
  _hover: {
55
- outlineColor: "core.outline.hover",
55
+ outlineColor: "outline.core.hover",
56
56
  outlineWidth: tokens.size.stroke.md,
57
57
  outlineStyle: "solid",
58
58
  _active: {
59
- backgroundColor: "core.surface.active",
59
+ backgroundColor: "surface.core.active",
60
60
  outlineWidth: tokens.size.stroke.sm,
61
61
  },
62
62
  },
@@ -64,13 +64,13 @@ export const pressableCardRecipe = defineRecipe({
64
64
  accent: {
65
65
  boxShadow: "0px 1px 3px 0px var(--shadow-color)",
66
66
  shadowColor: "surface.disabled",
67
- background: "alert.success.surface",
67
+ background: "surface.success",
68
68
  _hover: {
69
- background: "alert.success.surface.hover",
69
+ background: "surface.success.hover",
70
70
 
71
71
  boxShadow: "0px 2px 6px 0px var(--shadow-color)",
72
72
  _active: {
73
- background: "alert.success.surface.active",
73
+ background: "surface.success.active",
74
74
  boxShadow: "none",
75
75
  },
76
76
  },
package/src/theme/recipes/skeleton.ts CHANGED
@@ -50,7 +50,7 @@ export const skeletonRecipe = defineRecipe({
50
50
  },
51
51
  none: {
52
52
  animation: "none",
53
- background: "surface.color.grey",
53
+ background: "surface.neutral",
54
54
  },
55
55
  },
56
56
  },
package/src/theme/recipes/static-card.ts CHANGED
@@ -7,29 +7,29 @@ export const staticCardRecipe = defineRecipe({
7
7
  variants: {
8
8
  colorPalette: {
9
9
  white: {
10
- backgroundColor: "surface.color.neutral",
10
+ backgroundColor: "surface",
11
11
  color: "text",
12
12
  },
13
13
  grey: {
14
- backgroundColor: "surface.color.grey",
14
+ backgroundColor: "surface.neutral",
15
15
  },
16
16
  yellow: {
17
- backgroundColor: "surface.color.cream",
17
+ backgroundColor: "surface.warning",
18
18
  },
19
19
  darkYellow: {
20
- backgroundColor: "surface.color.yellow",
20
+ backgroundColor: "surface.notice",
21
21
  },
22
22
  red: {
23
- backgroundColor: "surface.color.red",
23
+ backgroundColor: "surface.critical",
24
24
  },
25
25
  green: {
26
- backgroundColor: "surface.color.green",
26
+ backgroundColor: "surface.success",
27
27
  },
28
28
  blue: {
29
- backgroundColor: "surface.color.blue",
29
+ backgroundColor: "surface.info",
30
30
  },
31
31
  orange: {
32
- backgroundColor: "surface.color.orange",
32
+ backgroundColor: "surface.caution",
33
33
  },
34
34
  },
35
35
  },
package/src/theme/semantic-tokens/colors.ts CHANGED
@@ -16,5 +16,5 @@ export const vyUtviklingColors = defineSemanticTokens.colors({
16
16
  });
17
17
 
18
18
  export const cargonetColors = defineSemanticTokens.colors({
19
- ...tokens.color.cargonet.color.cargonet,
19
+ ...tokens.color["cargonet"].color.cargonet,
20
20
  });
package/src/theme/slot-recipes/accordion.ts CHANGED
@@ -18,7 +18,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
18
18
  borderRadius: "sm",
19
19
  display: "flex",
20
20
  justifyContent: "space-between",
21
- color: "core.text",
21
+ color: "text.core",
22
22
  textAlign: "left",
23
23
  width: "full",
24
24
  alignItems: "center",
@@ -75,10 +75,10 @@ export const accordionSlotRecipe = defineSlotRecipe({
75
75
  },
76
76
  itemTrigger: {
77
77
  "&:hover": {
78
- background: "ghost.surface.hover",
78
+ background: "surface.ghost.hover",
79
79
  },
80
80
  "&:active": {
81
- backgroundColor: "ghost.surface.active",
81
+ backgroundColor: "surface.ghost.active",
82
82
  },
83
83
  },
84
84
  },
@@ -86,7 +86,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
86
86
  item: {
87
87
  outline: "solid",
88
88
  outlineWidth: tokens.size.stroke.sm,
89
- outlineColor: "core.outline",
89
+ outlineColor: "outline.core",
90
90
  },
91
91
  itemTrigger: {
92
92
  _expanded: {
@@ -94,13 +94,13 @@ export const accordionSlotRecipe = defineSlotRecipe({
94
94
  },
95
95
  "&:hover": {
96
96
  outlineWidth: tokens.size.stroke.md,
97
- outlineColor: "core.outline",
97
+ outlineColor: "outline.core",
98
98
  outline: "2px solid",
99
99
 
100
100
  outlineOffset: 0,
101
101
  },
102
102
  "&:active": {
103
- backgroundColor: "core.surface.active",
103
+ backgroundColor: "surface.core.active",
104
104
  outlineWidth: tokens.size.stroke.sm,
105
105
  outline: "none",
106
106
  },
@@ -113,7 +113,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
113
113
  item: {
114
114
  borderRadius: "none",
115
115
  borderBottom: "1px solid",
116
- borderBottomColor: "floating.outline.active",
116
+ borderBottomColor: "outline.neutral",
117
117
  },
118
118
  },
119
119
  floating: {
@@ -121,7 +121,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
121
121
  outline: "1px solid",
122
122
  outlineWidth: tokens.size.stroke.sm,
123
123
  boxShadow: "sm",
124
- outlineColor: "floating.outline",
124
+ outlineColor: "outline.floating",
125
125
  },
126
126
  itemTrigger: {
127
127
  _expanded: {
@@ -130,12 +130,12 @@ export const accordionSlotRecipe = defineSlotRecipe({
130
130
  "&:hover": {
131
131
  outlineWidth: tokens.size.stroke.md,
132
132
  outline: "1px solid",
133
- outlineColor: "floating.outline.hover",
133
+ outlineColor: "outline.floating.hover",
134
134
 
135
135
  outlineOffset: 1,
136
136
  },
137
137
  "&:active": {
138
- backgroundColor: "floating.surface.active",
138
+ backgroundColor: "surface.floating.active",
139
139
  outlineWidth: tokens.size.stroke.sm,
140
140
  outline: "none",
141
141
  },
package/src/theme/slot-recipes/alert-expandable.ts CHANGED
@@ -24,117 +24,117 @@ export const alertExpandableSlotRecipe = defineSlotRecipe({
24
24
  variant: {
25
25
  important: {
26
26
  itemContent: {
27
- color: "alert.important.text.secondary",
27
+ color: "text.warning.subtle",
28
28
  },
29
29
  itemTrigger: {
30
30
  "&:hover": {
31
- bg: "alert.important.surface.hover",
31
+ bg: "surface.warning.hover",
32
32
  outline: "1px solid",
33
- outlineColor: "alert.important.outline.hover",
33
+ outlineColor: "outline.warning.hover",
34
34
  outlineOffset: "0px",
35
35
  },
36
36
  "&:active": {
37
- bg: "alert.important.surface.active",
37
+ bg: "surface.warning.active",
38
38
  },
39
39
  },
40
40
  root: {
41
- borderColor: "alert.important.outline",
42
- bg: "alert.important.surface",
41
+ borderColor: "outline.warning",
42
+ bg: "surface.warning",
43
43
  },
44
44
  title: {
45
- color: "alert.important.text",
45
+ color: "text.warning",
46
46
  },
47
47
  },
48
48
  success: {
49
49
  itemContent: {
50
- color: "alert.success.text.secondary",
50
+ color: "text.success.subtle",
51
51
  },
52
52
  itemTrigger: {
53
53
  "&:hover": {
54
- bg: "alert.success.surface.hover",
54
+ bg: "surface.success.hover",
55
55
  outline: "1px solid",
56
56
  outlineOffset: "0px",
57
- outlineColor: "alert.success.outline.hover",
57
+ outlineColor: "outline.success.hover",
58
58
  "&:active": {
59
- bg: "alert.success.surface.active",
59
+ bg: "surface.success.active",
60
60
  },
61
61
  },
62
62
  },
63
63
  root: {
64
- borderColor: "alert.success.outline",
65
- bg: "alert.success.surface",
64
+ borderColor: "outline.success",
65
+ bg: "surface.success",
66
66
  },
67
67
  title: {
68
- color: "alert.success.text",
68
+ color: "text.success",
69
69
  },
70
70
  },
71
71
  alt: {
72
72
  itemContent: {
73
- color: "alert.alt.text.secondary",
73
+ color: "text.notice.subtle",
74
74
  },
75
75
  itemTrigger: {
76
76
  "&:hover": {
77
- bg: "alert.alt.surface.hover",
77
+ bg: "surface.notice.hover",
78
78
  outlineOffset: "0px",
79
79
  outline: "1px solid",
80
- outlineColor: "alert.alt.outline.hover",
80
+ outlineColor: "outline.notice.hover",
81
81
  "&:active": {
82
- bg: "alert.alt.surface.active",
82
+ bg: "surface.notice.active",
83
83
  },
84
84
  },
85
85
  },
86
86
  root: {
87
- borderColor: "alert.alt.outline",
88
- bg: "alert.alt.surface",
87
+ borderColor: "outline.notice",
88
+ bg: "surface.notice",
89
89
  },
90
90
  title: {
91
- color: "alert.alt.text",
91
+ color: "text.notice",
92
92
  },
93
93
  },
94
94
  info: {
95
95
  itemContent: {
96
- color: "alert.info.text.secondary",
96
+ color: "text.info.subtle",
97
97
  },
98
98
  itemTrigger: {
99
99
  "&:hover": {
100
- bg: "alert.info.surface.hover",
100
+ bg: "surface.info.hover",
101
101
  outlineOffset: "0px",
102
102
  outline: "1px solid",
103
- outlineColor: "alert.info.outline.hover",
103
+ outlineColor: "outline.info.hover",
104
104
  "&:active": {
105
- bg: "alert.info.surface.active",
105
+ bg: "surface.info.active",
106
106
  },
107
107
  },
108
108
  },
109
109
  root: {
110
- borderColor: "alert.info.outline",
111
- bg: "alert.info.surface",
110
+ borderColor: "outline.info",
111
+ bg: "surface.info",
112
112
  },
113
113
  title: {
114
- color: "alert.info.text",
114
+ color: "text.info",
115
115
  },
116
116
  },
117
117
  error: {
118
118
  itemContent: {
119
- color: "alert.error.text.secondary",
119
+ color: "text.critical.subtle",
120
120
  },
121
121
  itemTrigger: {
122
122
  "&:hover": {
123
- bg: "alert.error.surface.hover",
123
+ bg: "surface.critical.hover",
124
124
  outlineOffset: "0px",
125
125
  outline: "1px solid",
126
- outlineColor: "alert.error.outline.hover",
126
+ outlineColor: "outline.critical.hover",
127
127
  "&:active": {
128
- bg: "alert.error.surface.active",
128
+ bg: "surface.critical.active",
129
129
  },
130
130
  },
131
131
  },
132
132
  root: {
133
- borderColor: "alert.error.outline",
134
- bg: "alert.error.surface",
133
+ borderColor: "outline.critical",
134
+ bg: "surface.critical",
135
135
  },
136
136
  title: {
137
- color: "alert.error.text",
137
+ color: "text.critical",
138
138
  },
139
139
  },
140
140
  },
package/src/theme/slot-recipes/alert-service.ts CHANGED
@@ -12,10 +12,10 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
12
12
  transitionDuration: "fast",
13
13
  borderTopRadius: "none",
14
14
  borderBottomRadius: "md",
15
- backgroundColor: "alert.service.surface",
15
+ backgroundColor: "surface.service",
16
16
  outline: "1px solid",
17
- outlineColor: "alert.service.outline",
18
- color: "text.inverted",
17
+ outlineColor: "outline.service",
18
+ color: "text.brand",
19
19
  boxShadow: "sm",
20
20
  },
21
21
  itemTrigger: {
@@ -27,16 +27,16 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
27
27
  borderBottomRadius: "md",
28
28
  borderTopRadius: "none",
29
29
  width: "full",
30
- color: "text.inverted",
30
+ color: "text.brand",
31
31
  "&:hover": {
32
- backgroundColor: "alert.service.surface.hover",
32
+ backgroundColor: "surface.service.hover",
33
33
  },
34
34
  "&:active": {
35
- backgroundColor: "alert.service.surface.active",
35
+ backgroundColor: "surface.service.active",
36
36
  },
37
37
 
38
38
  _icon: {
39
- color: "text",
39
+ color: "icon.brand",
40
40
  },
41
41
  },
42
42
  itemTriggerTitle: {
@@ -46,7 +46,7 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
46
46
  fontWeight: "400",
47
47
  fontSize: ["mobile.xs", "desktop.xs"],
48
48
  textWrap: "nowrap",
49
- color: "alert.service.text.secondary",
49
+ color: "text.service.subtle",
50
50
  },
51
51
 
52
52
  itemContent: {
@@ -58,14 +58,14 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
58
58
  itemBody: {
59
59
  marginX: "auto",
60
60
  padding: "0 !important",
61
- color: "alert.service.text.secondary",
61
+ color: "text.service.subtle",
62
62
  gap: 0,
63
63
  flexDirection: "column",
64
64
  display: "flex",
65
65
  "& > p": {
66
66
  width: "full",
67
67
  borderBottom: "1px dashed",
68
- borderColor: "outline.inverted",
68
+ borderColor: "outline.neutral",
69
69
 
70
70
  paddingY: ["1", "1.5"],
71
71