@sats-group/ui-lib 76.0.0 → 77.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 (6) hide show
  1. package/package.json +1 -1
  2. package/react/banner/banner.scss +18 -4
  3. package/react/banner/banner.tsx +1 -0
  4. package/react/banner/banner.types.ts +1 -1
  5. package/tokens/darkmode.scss +0 -131
  6. package/tokens/lightmode.scss +0 -131
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sats-group/ui-lib",
3
- "version": "76.0.0",
3
+ "version": "77.1.0",
4
4
  "description": "SATS web user interface library",
5
5
  "engines": {
6
6
  "node": "^18 || ^20",
package/react/banner/banner.scss CHANGED
@@ -37,7 +37,7 @@
37
37
  border-color: light.$on-signal-surface-error-alternate;
38
38
 
39
39
  .banner__anchor,
40
- .banner__disimsser,
40
+ .banner__dismisser,
41
41
  .banner__icon {
42
42
  color: light.$on-signal-surface-error-alternate;
43
43
  }
@@ -48,18 +48,32 @@
48
48
  border-color: light.$on-signal-surface-information-alternate;
49
49
 
50
50
  .banner__anchor,
51
- .banner__disimsser,
51
+ .banner__dismisser,
52
52
  .banner__icon {
53
53
  color: light.$on-signal-surface-information-alternate;
54
54
  }
55
55
  }
56
56
 
57
+ &-neutral {
58
+ background-color: light.$signal-surface-neutral;
59
+ border-color: light.$on-signal-surface-neutral-alternate;
60
+
61
+ .banner__anchor,
62
+ .banner__dismisser {
63
+ color: light.$on-signal-surface-neutral-alternate;
64
+ }
65
+
66
+ .banner__icon {
67
+ color: light.$on-surface-neutral;
68
+ }
69
+ }
70
+
57
71
  &-success {
58
72
  background-color: light.$signal-surface-success;
59
73
  border-color: light.$on-signal-surface-success-alternate;
60
74
 
61
75
  .banner__anchor,
62
- .banner__disimsser,
76
+ .banner__dismisser,
63
77
  .banner__icon {
64
78
  color: light.$on-signal-surface-success-alternate;
65
79
  }
@@ -70,7 +84,7 @@
70
84
  border-color: light.$on-signal-surface-warning-alternate;
71
85
 
72
86
  .banner__anchor,
73
- .banner__disimsser,
87
+ .banner__dismisser,
74
88
  .banner__icon {
75
89
  color: light.$on-signal-surface-warning-alternate;
76
90
  }
package/react/banner/banner.tsx CHANGED
@@ -14,6 +14,7 @@ import type { Banner as Props } from './banner.types';
14
14
  const typeIcon = {
15
15
  error: <Error />,
16
16
  information: <Info />,
17
+ neutral: <Info />,
17
18
  success: <Confirm />,
18
19
  warning: <WarningSign />,
19
20
  };
package/react/banner/banner.types.ts CHANGED
@@ -6,5 +6,5 @@ export type Banner = {
6
6
  nested?: boolean;
7
7
  text: string;
8
8
  title?: string;
9
- type: 'error' | 'information' | 'success' | 'warning';
9
+ type: 'error' | 'information' | 'neutral' | 'success' | 'warning';
10
10
  };
package/tokens/darkmode.scss DELETED
@@ -1,131 +0,0 @@
1
- @use 'sass:color';
2
-
3
- $primary: #2676b0;
4
- $primary-hover: #308acc;
5
- $primary-disabled: #272729;
6
-
7
- $primary-silver: #87878a;
8
- $primary-silver-hover: #939396;
9
- $primary-silver-disabled: #272729;
10
-
11
- $primary-gold: #d4a852;
12
- $primary-gold-hover: #d8b163;
13
- $primary-gold-disabled: #272729;
14
-
15
- $primary-platinum: #87878a;
16
- $primary-platinum-hover: #939396;
17
- $primary-platinum-disabled: #272729;
18
-
19
- $secondary: #3c3c41;
20
- $secondary-hover: #47474d;
21
- $secondary-disabled: #272729;
22
-
23
- $clean: #fff;
24
- $clean-hover: color.adjust(#fff, $alpha: -0.1);
25
- $clean-disabled: color.adjust(#fff, $alpha: -0.9);
26
-
27
- $clean-secondary: color.adjust(#fff, $alpha: -0.85);
28
- $clean-secondary-hover: color.adjust(#fff, $alpha: -0.9);
29
- $clean-secondary-disabled: color.adjust(#fff, $alpha: -0.95);
30
-
31
- $cta: #e16259;
32
- $cta-hover: #cd6354;
33
- $cta-disabled: #353535;
34
- $cta-non-text: #fd7459;
35
-
36
- $selection-blue: #9ec3ff;
37
- $selection-silver: #cad1d8;
38
- $selection-gold: #d4a852;
39
- $selection-platinum: #929aa1;
40
-
41
- $action: #549bde;
42
- $action-hover: #75b5f2;
43
- $action-disabled: #272729;
44
-
45
- $navigation-blue: #549bde;
46
- $navigation-silver: #f0f4f9;
47
- $navigation-gold: #d4a852;
48
- $navigation-platinum: #f2f9ff;
49
-
50
- $waitlist: #686db9;
51
- $waitlist-hover: #484ba2;
52
- $waitlist-text: #a0a5f1;
53
- $waitlist-disabled: #686db9;
54
- $waitlist-background: #2e2f46;
55
-
56
- $signal-success: #8bbf9b;
57
- $signal-success-text: #8bbf9b;
58
- $signal-success-background: #424846;
59
- $signal-warning: #fcd36c;
60
- $signal-warning-text: #fcd36c;
61
- $signal-warning-background: #484641;
62
- $signal-error: #e9698b;
63
- $signal-error-text: #e9698b;
64
- $signal-error-background: #4a4444;
65
- $signal-delete: #e5766e;
66
- $signal-delete-text: #e5766e;
67
- $signal-delete-background: #4b4343;
68
-
69
- $workout-pt: #6fc2ff;
70
- $workout-gx: #ee90f0;
71
- $workout-gymfloor: #e9698b;
72
- $workout-other: #56c09d;
73
-
74
- $ui-pressed: fuchsia; // NOTE: This is missing from Figma
75
- $ui-tabs: #191c1e;
76
- $ui-shimmer: #333438;
77
- $ui-border: color.adjust(#fff, $alpha: -0.91);
78
- $ui-shadow: #000000;
79
- $ui-graphical-elements-1: #ffffff;
80
- $ui-graphical-elements-2: color.adjust(#fff, $alpha: -0.1);
81
- $ui-graphical-elements-3: color.adjust(#fff, $alpha: -0.3);
82
- $ui-graphical-elements-4: #191c1e;
83
- $ui-graphical-elements-5: #fd7459;
84
- $ui-graphical-elements-6: #8bbf9b;
85
- $ui-graphical-elements-7: #686db9;
86
-
87
- $background-primary: #000;
88
- $background-secondary: #000;
89
- $background-surface-primary: #282e34;
90
- $background-surface-secondary: #282e34;
91
-
92
- $on-primary: #fff;
93
- $on-primary-disabled: color.adjust(#fff, $alpha: -0.32);
94
-
95
- $on-secondary: #fff;
96
- $on-secondary-disabled: color.adjust(#fff, $alpha: -0.32);
97
-
98
- $on-clean: #0e2133;
99
- $on-clean-disabled: #9fa6ad;
100
-
101
- $on-clean-secondary: #fff;
102
- $on-clean-secondary-disabled: color.adjust(#fff, $alpha: -0.32);
103
-
104
- $on-cta: #fff;
105
- $on-cta-disabled: color.adjust(#fff, $alpha: -0.32);
106
- $on-cta-non-text: #fff;
107
-
108
- $on-signal: #fff;
109
-
110
- $on-waitlist: #fff;
111
- $on-waitlist-disabled: color.adjust(#fff, $alpha: -0.32);
112
-
113
- $on-background-primary: #fff;
114
- $on-background-secondary: color.adjust(#fff, $alpha: -0.32);
115
- $on-background-disabled: color.adjust(#fff, $alpha: -0.6);
116
- $on-background-enabled-on: #fd7459;
117
- $on-background-enabled-off: #fff;
118
- $on-background-disabled-on: color.adjust(#fd7459, $alpha: -0.3);
119
- $on-background-disabled-off: color.adjust(#fff, $alpha: -0.6);
120
- $on-background-element-on: fuchsia; // NOTE: This is missing from Figma
121
- $on-background-element-off: fuchsia; // NOTE: This is missing from Figma
122
-
123
- $on-surface-primary: #fff;
124
- $on-surface-secondary: color.adjust(#fff, $alpha: -0.32);
125
- $on-surface-disabled: color.adjust(#fff, $alpha: -0.6);
126
- $on-surface-enabled-on: #fd7459;
127
- $on-surface-enabled-off: #fff;
128
- $on-surface-disabled-on: color.adjust(#fd7459, $alpha: -0.3);
129
- $on-surface-disabled-off: color.adjust(#fff, $alpha: -0.6);
130
- $on-surface-element-on: fuchsia; // NOTE: This is missing from Figma
131
- $on-surface-element-off: fuchsia; // NOTE: This is missing from Figma
package/tokens/lightmode.scss DELETED
@@ -1,131 +0,0 @@
1
- @use 'sass:color';
2
-
3
- $primary: #0d2134;
4
- $primary-hover: #092a48;
5
- $primary-disabled: #e8e9ec;
6
-
7
- $primary-silver: #454d56;
8
- $primary-silver-hover: #606a74;
9
- $primary-silver-disabled: #e8e9ec;
10
-
11
- $primary-gold: #262624;
12
- $primary-gold-hover: #393834;
13
- $primary-gold-disabled: #e8e9ec;
14
-
15
- $primary-platinum: #161718;
16
- $primary-platinum-hover: #313336;
17
- $primary-platinum-disabled: #e8e9ec;
18
-
19
- $secondary: #edf0f3;
20
- $secondary-hover: #e6eef9;
21
- $secondary-disabled: #e8e9ec;
22
-
23
- $clean: #fff;
24
- $clean-hover: #eceef0;
25
- $clean-disabled: color.adjust(#fff, $alpha: -0.5);
26
-
27
- $clean-secondary: color.adjust(#fff, $alpha: -0.85);
28
- $clean-secondary-hover: color.adjust(#fff, $alpha: -0.9);
29
- $clean-secondary-disabled: color.adjust(#fff, $alpha: -0.95);
30
-
31
- $cta: #d93226;
32
- $cta-hover: #c13c29;
33
- $cta-disabled: #e8e9ec;
34
- $cta-non-text: #fa5333;
35
-
36
- $selection-blue: #fa5333;
37
- $selection-silver: #cad1d8;
38
- $selection-gold: #d4a852;
39
- $selection-platinum: #929aa1;
40
-
41
- $action: #026ac2;
42
- $action-hover: #2580cd;
43
- $action-disabled: #9fa6ad;
44
-
45
- $navigation-blue: #0e2133;
46
- $navigation-silver: #454d56;
47
- $navigation-gold: #262624;
48
- $navigation-platinum: #161718;
49
-
50
- $waitlist: #484ba2;
51
- $waitlist-hover: #37378b;
52
- $waitlist-text: #484ba2;
53
- $waitlist-disabled: #686db9;
54
- $waitlist-background: #efeff7;
55
-
56
- $signal-success: #19976d;
57
- $signal-success-text: #097f58;
58
- $signal-success-background: #eaf6f2;
59
- $signal-warning: #eca720;
60
- $signal-warning-text: #925707;
61
- $signal-warning-background: #f0e8da;
62
- $signal-error: #bf3f4d;
63
- $signal-error-text: #b93947;
64
- $signal-error-background: #f5e2e4;
65
- $signal-delete: #da3b30;
66
- $signal-delete-text: #d93226;
67
- $signal-delete-background: #f9e0de;
68
-
69
- $workout-pt: #428bbf;
70
- $workout-gx: #db70dd;
71
- $workout-gymfloor: #d6bc38;
72
- $workout-other: #42ae8a;
73
-
74
- $ui-pressed: #eceef0;
75
- $ui-tabs: #f7f7f7;
76
- $ui-shimmer: #eaeaea;
77
- $ui-border: #dbdee0;
78
- $ui-shadow: #000000;
79
- $ui-graphical-elements-1: #7d92ad;
80
- $ui-graphical-elements-2: #9fb1c9;
81
- $ui-graphical-elements-3: #cfd8e4;
82
- $ui-graphical-elements-4: #7d92ad;
83
- $ui-graphical-elements-5: #fa5333;
84
- $ui-graphical-elements-6: #19976d;
85
- $ui-graphical-elements-7: #484ba2;
86
-
87
- $background-primary: #fafafa;
88
- $background-secondary: #fff;
89
- $background-surface-primary: #fff;
90
- $background-surface-secondary: #eaebed;
91
-
92
- $on-primary: #fff;
93
- $on-primary-disabled: #878f97;
94
-
95
- $on-secondary: #0e2133;
96
- $on-secondary-disabled: #878f97;
97
-
98
- $on-clean: #0e2133;
99
- $on-clean-disabled: #878f97;
100
-
101
- $on-clean-secondary: #fff;
102
- $on-clean-secondary-disabled: color.adjust(#fff, $alpha: -0.4);
103
-
104
- $on-cta: #fff;
105
- $on-cta-disabled: #5d6976;
106
- $on-cta-non-text: #fff;
107
-
108
- $on-signal: #fff;
109
-
110
- $on-waitlist: #fff;
111
- $on-waitlist-disabled: #e8e9ec;
112
-
113
- $on-background-primary: #0e2133;
114
- $on-background-secondary: #65717d;
115
- $on-background-disabled: #9fa6ad;
116
- $on-background-enabled-on: #fa5333;
117
- $on-background-enabled-off: #7d92ad;
118
- $on-background-disabled-on: #fd7459;
119
- $on-background-disabled-off: #9fb1c9;
120
- $on-background-element-on: #fca291;
121
- $on-background-element-off: #9fa6ad;
122
-
123
- $on-surface-primary: #0e2133;
124
- $on-surface-secondary: #65717d;
125
- $on-surface-disabled: #9fa6ad;
126
- $on-surface-enabled-on: #fa5333;
127
- $on-surface-enabled-off: #7d92ad;
128
- $on-surface-disabled-on: #fd7459;
129
- $on-surface-disabled-off: #9fb1c9;
130
- $on-surface-element-on: #fca291;
131
- $on-surface-element-off: #9fa6ad;