@transferwise/components 0.0.0-experimental-6fd476f → 0.0.0-experimental-2dad06c

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 (14) hide show
  1. package/build/main.css +28 -2
  2. package/build/styles/item/Item.css +28 -2
  3. package/build/styles/main.css +28 -2
  4. package/build/types/item/Item.d.ts +1 -1
  5. package/build/types/item/Item.d.ts.map +1 -1
  6. package/build/types/item/Item.types.d.ts +1 -1
  7. package/build/types/item/Item.types.d.ts.map +1 -1
  8. package/package.json +3 -3
  9. package/src/item/Item.css +28 -2
  10. package/src/item/Item.less +24 -2
  11. package/src/item/Item.story.tsx +53 -14
  12. package/src/item/Item.tsx +6 -5
  13. package/src/item/Item.types.ts +1 -2
  14. package/src/main.css +28 -2
package/build/main.css CHANGED
@@ -2628,8 +2628,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2628
2628
  }
2629
2629
  .item {
2630
2630
  padding: 16px;
2631
- border-radius: 16px;
2632
- border-radius: var(--radius-medium);
2631
+ border-radius: 24px;
2632
+ border-radius: var(--radius-large);
2633
2633
  background-color: #ffffff;
2634
2634
  background-color: var(--color-background-screen);
2635
2635
  display: flex;
@@ -2647,6 +2647,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2647
2647
  .item:active {
2648
2648
  background-color: var(--color-background-screen-active);
2649
2649
  }
2650
+ .item.active {
2651
+ background-color: rgba(134,167,189,0.10196);
2652
+ background-color: var(--color-background-neutral);
2653
+ }
2654
+ .item.active:hover {
2655
+ background-color: var(--color-background-neutral-hover);
2656
+ }
2657
+ .item.active:active {
2658
+ background-color: var(--color-background-neutral-active);
2659
+ }
2660
+ .item.inactive {
2661
+ background-color: rgba(134, 167, 189, 0.025);
2662
+ border: 1px dashed rgba(0,0,0,0.10196);
2663
+ border: 1px dashed var(--color-border-neutral);
2664
+ }
2665
+ @supports (color: color-mix(in lch, red, blue)) {
2666
+ .item.inactive {
2667
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2668
+ }
2669
+ }
2670
+ .item.inactive:hover {
2671
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2672
+ }
2673
+ .item.inactive:active {
2674
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2675
+ }
2650
2676
  .item-media {
2651
2677
  flex: 0 0 auto;
2652
2678
  align-items: flex-start;
package/build/styles/item/Item.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .item {
2
2
  padding: 16px;
3
- border-radius: 16px;
4
- border-radius: var(--radius-medium);
3
+ border-radius: 24px;
4
+ border-radius: var(--radius-large);
5
5
  background-color: #ffffff;
6
6
  background-color: var(--color-background-screen);
7
7
  display: flex;
@@ -19,6 +19,32 @@
19
19
  .item:active {
20
20
  background-color: var(--color-background-screen-active);
21
21
  }
22
+ .item.active {
23
+ background-color: rgba(134,167,189,0.10196);
24
+ background-color: var(--color-background-neutral);
25
+ }
26
+ .item.active:hover {
27
+ background-color: var(--color-background-neutral-hover);
28
+ }
29
+ .item.active:active {
30
+ background-color: var(--color-background-neutral-active);
31
+ }
32
+ .item.inactive {
33
+ background-color: rgba(134, 167, 189, 0.025);
34
+ border: 1px dashed rgba(0,0,0,0.10196);
35
+ border: 1px dashed var(--color-border-neutral);
36
+ }
37
+ @supports (color: color-mix(in lch, red, blue)) {
38
+ .item.inactive {
39
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
40
+ }
41
+ }
42
+ .item.inactive:hover {
43
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
44
+ }
45
+ .item.inactive:active {
46
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
47
+ }
22
48
  .item-media {
23
49
  flex: 0 0 auto;
24
50
  align-items: flex-start;
package/build/styles/main.css CHANGED
@@ -2628,8 +2628,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2628
2628
  }
2629
2629
  .item {
2630
2630
  padding: 16px;
2631
- border-radius: 16px;
2632
- border-radius: var(--radius-medium);
2631
+ border-radius: 24px;
2632
+ border-radius: var(--radius-large);
2633
2633
  background-color: #ffffff;
2634
2634
  background-color: var(--color-background-screen);
2635
2635
  display: flex;
@@ -2647,6 +2647,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2647
2647
  .item:active {
2648
2648
  background-color: var(--color-background-screen-active);
2649
2649
  }
2650
+ .item.active {
2651
+ background-color: rgba(134,167,189,0.10196);
2652
+ background-color: var(--color-background-neutral);
2653
+ }
2654
+ .item.active:hover {
2655
+ background-color: var(--color-background-neutral-hover);
2656
+ }
2657
+ .item.active:active {
2658
+ background-color: var(--color-background-neutral-active);
2659
+ }
2660
+ .item.inactive {
2661
+ background-color: rgba(134, 167, 189, 0.025);
2662
+ border: 1px dashed rgba(0,0,0,0.10196);
2663
+ border: 1px dashed var(--color-border-neutral);
2664
+ }
2665
+ @supports (color: color-mix(in lch, red, blue)) {
2666
+ .item.inactive {
2667
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2668
+ }
2669
+ }
2670
+ .item.inactive:hover {
2671
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2672
+ }
2673
+ .item.inactive:active {
2674
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2675
+ }
2650
2676
  .item-media {
2651
2677
  flex: 0 0 auto;
2652
2678
  align-items: flex-start;
package/build/types/item/Item.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ItemProps } from './Item.types';
2
- export declare const Item: ({ type, title, subtitle, additionalInfo, inverted, media, endValue, }: ItemProps) => import("react").JSX.Element;
2
+ export declare const Item: ({ type, title, subtitle, additionalInfo, inverted, media, spotlight, endValue, }: ItemProps) => import("react").JSX.Element;
3
3
  //# sourceMappingURL=Item.d.ts.map
package/build/types/item/Item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,IAAI,0EAQd,SAAS,gCAmEX,CAAC"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/item/Item.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,IAAI,qFASd,SAAS,gCAmEX,CAAC"}
package/build/types/item/Item.types.d.ts CHANGED
@@ -4,7 +4,6 @@ export type ItemTypes = 'NonInteractive' | 'Navigation' | 'Radio' | 'Checkbox' |
4
4
  export type EndValueProps = {
5
5
  title?: string;
6
6
  subtitle?: string;
7
- inverted?: boolean;
8
7
  sentiment?: Sentiment.POSITIVE | Sentiment.NEGATIVE;
9
8
  strikethrough?: boolean;
10
9
  bold?: boolean;
@@ -19,5 +18,6 @@ export interface ItemProps {
19
18
  additionalInfo?: string;
20
19
  inverted?: boolean;
21
20
  endValue?: EndValueProps;
21
+ spotlight?: 'active' | 'inactive';
22
22
  }
23
23
  //# sourceMappingURL=Item.types.d.ts.map
package/build/types/item/Item.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../src/item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,SAAS,GACjB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAEhB,KAAK,CAAC,EAAE;QAEN,KAAK,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAI1B"}
1
+ {"version":3,"file":"Item.types.d.ts","sourceRoot":"","sources":["../../../src/item/Item.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,MAAM,SAAS,GACjB,gBAAgB,GAChB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAEhB,KAAK,CAAC,EAAE;QAEN,KAAK,EAAE,SAAS,CAAC;KAClB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;CAGnC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-6fd476f",
3
+ "version": "0.0.0-experimental-2dad06c",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -91,9 +91,9 @@
91
91
  "rollup": "^4.18.1",
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
+ "@transferwise/less-config": "3.1.0",
94
95
  "@transferwise/neptune-css": "14.22.0",
95
- "@wise/components-theming": "1.6.1",
96
- "@transferwise/less-config": "3.1.0"
96
+ "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
package/src/item/Item.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .item {
2
2
  padding: 16px;
3
- border-radius: 16px;
4
- border-radius: var(--radius-medium);
3
+ border-radius: 24px;
4
+ border-radius: var(--radius-large);
5
5
  background-color: #ffffff;
6
6
  background-color: var(--color-background-screen);
7
7
  display: flex;
@@ -19,6 +19,32 @@
19
19
  .item:active {
20
20
  background-color: var(--color-background-screen-active);
21
21
  }
22
+ .item.active {
23
+ background-color: rgba(134,167,189,0.10196);
24
+ background-color: var(--color-background-neutral);
25
+ }
26
+ .item.active:hover {
27
+ background-color: var(--color-background-neutral-hover);
28
+ }
29
+ .item.active:active {
30
+ background-color: var(--color-background-neutral-active);
31
+ }
32
+ .item.inactive {
33
+ background-color: rgba(134, 167, 189, 0.025);
34
+ border: 1px dashed rgba(0,0,0,0.10196);
35
+ border: 1px dashed var(--color-border-neutral);
36
+ }
37
+ @supports (color: color-mix(in lch, red, blue)) {
38
+ .item.inactive {
39
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
40
+ }
41
+ }
42
+ .item.inactive:hover {
43
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
44
+ }
45
+ .item.inactive:active {
46
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
47
+ }
22
48
  .item-media {
23
49
  flex: 0 0 auto;
24
50
  align-items: flex-start;
package/src/item/Item.less CHANGED
@@ -1,6 +1,6 @@
1
1
  .item {
2
2
  padding: 16px;
3
- border-radius: var(--radius-medium);
3
+ border-radius: var(--radius-large);
4
4
  background-color: var(--color-background-screen);
5
5
  display: flex;
6
6
  gap: 16px;
@@ -19,8 +19,30 @@
19
19
  &:active {
20
20
  background-color: var(--color-background-screen-active);
21
21
  }
22
- }
22
+ // spotlight - improve naming
23
+ &.active {
24
+ background-color: var(--color-background-neutral);
23
25
 
26
+ &:hover {
27
+ background-color: var(--color-background-neutral-hover);
28
+ }
29
+ &:active {
30
+ background-color: var(--color-background-neutral-active);
31
+ }
32
+ }
33
+ &.inactive {
34
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
35
+ border: 1px dashed var(--color-border-neutral);
36
+
37
+ &:hover {
38
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
39
+ }
40
+ &:active {
41
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
42
+ }
43
+ }
44
+ }
45
+ // all inverted logic can be way simpler
24
46
  .item-media {
25
47
  flex: 0 0 auto;
26
48
  align-items: flex-start;
package/src/item/Item.story.tsx CHANGED
@@ -26,13 +26,13 @@ export default {
26
26
  subtitle: 'Subtitle',
27
27
  additionalInfo: 'Additional Info',
28
28
  inverted: false,
29
+ spotlight: undefined,
29
30
  media: {
30
31
  value: <AvatarView profileName="H D" />,
31
32
  },
32
33
  mediaSize: 48,
33
34
  endValueTitle: '427,386.39 JPY',
34
35
  endValueSubtitle: '2197.06 GBP',
35
- endValueInverted: false,
36
36
  endValueStrikethrough: false,
37
37
  endValueSentiment: undefined,
38
38
  },
@@ -80,24 +80,30 @@ export const Playground: Story = {
80
80
  inverted: {
81
81
  control: 'boolean',
82
82
  table: {
83
- category: 'Start Value Controls',
83
+ category: 'Global Control',
84
84
  },
85
85
  },
86
-
87
- endValueTitle: {
88
- control: 'text',
86
+ spotlight: {
87
+ control: 'radio',
88
+ options: ['ACTIVE', 'INACTIVE', 'none'],
89
+ defaultValue: 'none',
90
+ mapping: {
91
+ ACTIVE: 'active',
92
+ INACTIVE: 'inactive',
93
+ none: undefined,
94
+ },
89
95
  table: {
90
- category: 'End Value Controls',
96
+ category: 'Global Control',
91
97
  },
92
98
  },
93
- endValueSubtitle: {
99
+ endValueTitle: {
94
100
  control: 'text',
95
101
  table: {
96
102
  category: 'End Value Controls',
97
103
  },
98
104
  },
99
- endValueInverted: {
100
- control: 'boolean',
105
+ endValueSubtitle: {
106
+ control: 'text',
101
107
  table: {
102
108
  category: 'End Value Controls',
103
109
  },
@@ -128,7 +134,6 @@ export const Playground: Story = {
128
134
  media,
129
135
  endValueTitle,
130
136
  endValueSubtitle,
131
- endValueInverted,
132
137
  endValueStrikethrough,
133
138
  endValueSentiment,
134
139
  ...restProps
@@ -144,10 +149,10 @@ export const Playground: Story = {
144
149
  value: React.cloneElement(media.value, { size: mediaSize }),
145
150
  }
146
151
  }
152
+ spotlight={restProps.spotlight}
147
153
  endValue={{
148
154
  title: endValueTitle,
149
155
  subtitle: endValueSubtitle,
150
- inverted: endValueInverted,
151
156
  strikethrough: endValueStrikethrough,
152
157
  sentiment: endValueSentiment,
153
158
  }}
@@ -190,7 +195,7 @@ export const Variants: Story = {
190
195
  additionalInfo="Additional Info"
191
196
  inverted
192
197
  media={{ value: <AvatarView size={48} profileName="H D" /> }}
193
- endValue={{ title: 'Title Inverted', subtitle: 'Subtitle', inverted: true }}
198
+ endValue={{ title: 'Title Inverted', subtitle: 'Subtitle' }}
194
199
  />
195
200
  <Item
196
201
  type="Radio"
@@ -198,15 +203,49 @@ export const Variants: Story = {
198
203
  subtitle="Subtitle"
199
204
  inverted
200
205
  media={{ value: <AvatarView size={56} profileName="H D" /> }}
201
- endValue={{ title: 'Title Inverted', inverted: true }}
206
+ endValue={{ title: 'Title Inverted' }}
202
207
  />
203
208
  <Item
204
209
  type="IconButton"
205
210
  title="Title Inverted"
206
211
  inverted
207
212
  media={{ value: <AvatarView size={72} profileName="H D" /> }}
208
- endValue={{ subtitle: 'Subtitle Inverted', inverted: true }}
213
+ endValue={{ subtitle: 'Subtitle Inverted' }}
209
214
  />
215
+ <br />
216
+ <div className="p-b-1">
217
+ <Item
218
+ type="Navigation"
219
+ spotlight="active"
220
+ title="Title Inverted"
221
+ subtitle="Subtitle"
222
+ additionalInfo="Additional Info"
223
+ media={{ value: <AvatarView size={48} profileName="H D" /> }}
224
+ endValue={{ title: 'Title', subtitle: 'Subtitle' }}
225
+ />
226
+ </div>
227
+ <div className="p-b-1">
228
+ <Item
229
+ type="Navigation"
230
+ spotlight="inactive"
231
+ title="Title Inverted"
232
+ subtitle="Subtitle"
233
+ additionalInfo="Additional Info"
234
+ media={{ value: <AvatarView size={48} profileName="H D" /> }}
235
+ endValue={{ title: 'Title', subtitle: 'Subtitle' }}
236
+ />
237
+ </div>
238
+ <div className="p-b-1">
239
+ <Item
240
+ type="Navigation"
241
+ spotlight="inactive"
242
+ title="Title Inverted"
243
+ subtitle="Subtitle"
244
+ additionalInfo="Additional Info"
245
+ media={{ value: <AvatarView size={48} profileName="H D" /> }}
246
+ endValue={{ title: 'Title', subtitle: 'Subtitle' }}
247
+ />
248
+ </div>
210
249
  </>
211
250
  ),
212
251
  };
package/src/item/Item.tsx CHANGED
@@ -17,6 +17,7 @@ export const Item = ({
17
17
  additionalInfo,
18
18
  inverted,
19
19
  media,
20
+ spotlight,
20
21
  endValue,
21
22
  }: ItemProps) => {
22
23
  const returnType = (): ReactNode => {
@@ -45,7 +46,7 @@ export const Item = ({
45
46
 
46
47
  // clean up how classes are applied
47
48
  return (
48
- <div className="item">
49
+ <div className={`item ${inverted ? 'inverted' : ''} ${spotlight}`}>
49
50
  {media && <div className="item-media">{media?.value}</div>}
50
51
  <div className="startValue">
51
52
  <Body
@@ -69,14 +70,14 @@ export const Item = ({
69
70
  className={`endValue ${endValue.sentiment} ${endValue.strikethrough ? 'strikethrough' : ''}`}
70
71
  >
71
72
  <Body
72
- className={!endValue.inverted ? 'item-title' : endValue.sentiment}
73
- type={!endValue.inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}
73
+ className={!inverted ? 'item-title' : endValue.sentiment}
74
+ type={!inverted ? Typography.BODY_LARGE_BOLD : Typography.BODY_DEFAULT}
74
75
  >
75
76
  {endValue.title}
76
77
  </Body>
77
78
  <Body
78
- className={endValue.inverted ? 'item-title' : endValue.sentiment}
79
- type={!endValue.inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}
79
+ className={inverted ? 'item-title' : endValue.sentiment}
80
+ type={!inverted ? Typography.BODY_DEFAULT : Typography.BODY_LARGE_BOLD}
80
81
  >
81
82
  {endValue.subtitle}
82
83
  </Body>
package/src/item/Item.types.ts CHANGED
@@ -13,7 +13,6 @@ export type ItemTypes =
13
13
  export type EndValueProps = {
14
14
  title?: string;
15
15
  subtitle?: string;
16
- inverted?: boolean;
17
16
  sentiment?: Sentiment.POSITIVE | Sentiment.NEGATIVE;
18
17
  strikethrough?: boolean;
19
18
  bold?: boolean;
@@ -31,8 +30,8 @@ export interface ItemProps {
31
30
  additionalInfo?: string;
32
31
  inverted?: boolean;
33
32
  endValue?: EndValueProps;
33
+ spotlight?: 'active' | 'inactive';
34
34
  // prompt?: any; // a lot of work to do here. start with this?
35
- // spotlight?: 'Active' | 'Inactive';
36
35
  // children?: ReactNode;
37
36
  }
38
37
 
package/src/main.css CHANGED
@@ -2628,8 +2628,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2628
2628
  }
2629
2629
  .item {
2630
2630
  padding: 16px;
2631
- border-radius: 16px;
2632
- border-radius: var(--radius-medium);
2631
+ border-radius: 24px;
2632
+ border-radius: var(--radius-large);
2633
2633
  background-color: #ffffff;
2634
2634
  background-color: var(--color-background-screen);
2635
2635
  display: flex;
@@ -2647,6 +2647,32 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2647
2647
  .item:active {
2648
2648
  background-color: var(--color-background-screen-active);
2649
2649
  }
2650
+ .item.active {
2651
+ background-color: rgba(134,167,189,0.10196);
2652
+ background-color: var(--color-background-neutral);
2653
+ }
2654
+ .item.active:hover {
2655
+ background-color: var(--color-background-neutral-hover);
2656
+ }
2657
+ .item.active:active {
2658
+ background-color: var(--color-background-neutral-active);
2659
+ }
2660
+ .item.inactive {
2661
+ background-color: rgba(134, 167, 189, 0.025);
2662
+ border: 1px dashed rgba(0,0,0,0.10196);
2663
+ border: 1px dashed var(--color-border-neutral);
2664
+ }
2665
+ @supports (color: color-mix(in lch, red, blue)) {
2666
+ .item.inactive {
2667
+ background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2668
+ }
2669
+ }
2670
+ .item.inactive:hover {
2671
+ background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2672
+ }
2673
+ .item.inactive:active {
2674
+ background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2675
+ }
2650
2676
  .item-media {
2651
2677
  flex: 0 0 auto;
2652
2678
  align-items: flex-start;