@windstream/react-shared-components 0.0.87 → 0.0.88

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 (141) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +9 -5
  3. package/dist/contentful/index.esm.js +1 -1
  4. package/dist/contentful/index.esm.js.map +1 -1
  5. package/dist/contentful/index.js +1 -1
  6. package/dist/contentful/index.js.map +1 -1
  7. package/dist/core.d.ts +3 -3
  8. package/dist/index.d.ts +4 -4
  9. package/dist/index.js.map +1 -1
  10. package/package.json +177 -177
  11. package/src/components/accordion/Accordion.stories.tsx +230 -230
  12. package/src/components/accordion/types.ts +10 -10
  13. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  14. package/src/components/alert-card/index.tsx +32 -32
  15. package/src/components/alert-card/types.ts +9 -9
  16. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  17. package/src/components/brand-button/helpers.ts +35 -35
  18. package/src/components/brand-button/index.tsx +115 -115
  19. package/src/components/brand-button/types.ts +37 -37
  20. package/src/components/button/Button.stories.tsx +108 -108
  21. package/src/components/button/index.tsx +27 -27
  22. package/src/components/button/types.ts +14 -14
  23. package/src/components/call-button/CallButton.stories.tsx +324 -324
  24. package/src/components/call-button/index.tsx +86 -86
  25. package/src/components/call-button/types.ts +11 -11
  26. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  27. package/src/components/checkbox/index.tsx +197 -197
  28. package/src/components/checkbox/types.ts +27 -27
  29. package/src/components/checklist/Checklist.stories.tsx +150 -150
  30. package/src/components/checklist/index.tsx +54 -54
  31. package/src/components/checklist/types.ts +9 -9
  32. package/src/components/collapse/Collapse.stories.tsx +255 -255
  33. package/src/components/collapse/index.tsx +46 -46
  34. package/src/components/collapse/types.ts +6 -6
  35. package/src/components/divider/Divider.stories.tsx +205 -205
  36. package/src/components/divider/index.tsx +22 -22
  37. package/src/components/divider/type.ts +3 -3
  38. package/src/components/image/Image.stories.tsx +113 -113
  39. package/src/components/image/index.tsx +25 -25
  40. package/src/components/image/types.ts +40 -40
  41. package/src/components/input/Input.stories.tsx +325 -325
  42. package/src/components/input/index.tsx +177 -177
  43. package/src/components/input/types.ts +37 -37
  44. package/src/components/link/Link.stories.tsx +163 -163
  45. package/src/components/link/types.ts +25 -25
  46. package/src/components/list/List.stories.tsx +272 -272
  47. package/src/components/list/index.tsx +88 -88
  48. package/src/components/list/list-item/index.tsx +38 -38
  49. package/src/components/list/list-item/types.ts +13 -13
  50. package/src/components/list/types.ts +29 -29
  51. package/src/components/material-icon/MaterialIcon.stories.tsx +330 -330
  52. package/src/components/material-icon/constants.ts +97 -97
  53. package/src/components/material-icon/index.tsx +44 -44
  54. package/src/components/material-icon/types.ts +31 -31
  55. package/src/components/modal/Modal.stories.tsx +171 -171
  56. package/src/components/modal/index.tsx +164 -164
  57. package/src/components/modal/types.ts +24 -24
  58. package/src/components/next-image/index.tsx +32 -32
  59. package/src/components/next-image/types.ts +1 -1
  60. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  61. package/src/components/radio-button/index.tsx +75 -75
  62. package/src/components/radio-button/types.ts +21 -21
  63. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  64. package/src/components/see-more/index.tsx +44 -44
  65. package/src/components/see-more/types.ts +4 -4
  66. package/src/components/select/Select.stories.tsx +411 -411
  67. package/src/components/select/index.tsx +150 -150
  68. package/src/components/select/types.ts +35 -35
  69. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  70. package/src/components/select-plan-button/index.tsx +31 -31
  71. package/src/components/select-plan-button/types.ts +5 -5
  72. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  73. package/src/components/skeleton/index.tsx +61 -61
  74. package/src/components/skeleton/types.ts +4 -4
  75. package/src/components/spinner/Spinner.stories.tsx +335 -335
  76. package/src/components/spinner/index.tsx +44 -44
  77. package/src/components/spinner/types.ts +5 -5
  78. package/src/components/text/Text.stories.tsx +321 -321
  79. package/src/components/text/index.tsx +25 -25
  80. package/src/components/text/types.ts +45 -45
  81. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  82. package/src/components/tooltip/index.tsx +74 -74
  83. package/src/components/tooltip/types.ts +7 -7
  84. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  85. package/src/components/view-cart-button/index.tsx +44 -44
  86. package/src/components/view-cart-button/types.ts +5 -5
  87. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  88. package/src/contentful/blocks/button/index.tsx +99 -85
  89. package/src/contentful/blocks/button/types.ts +31 -26
  90. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  91. package/src/contentful/blocks/callout/index.tsx +66 -66
  92. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  93. package/src/contentful/blocks/cards/index.tsx +13 -13
  94. package/src/contentful/blocks/cards/product-card/index.tsx +199 -199
  95. package/src/contentful/blocks/cards/product-card/types.ts +20 -20
  96. package/src/contentful/blocks/cards/simple-card/index.tsx +77 -77
  97. package/src/contentful/blocks/cards/simple-card/types.ts +31 -31
  98. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  99. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  100. package/src/contentful/blocks/cards/types.ts +1 -1
  101. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  102. package/src/contentful/blocks/carousel/helper.tsx +314 -314
  103. package/src/contentful/blocks/carousel/index.tsx +52 -52
  104. package/src/contentful/blocks/carousel/types.ts +126 -126
  105. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  106. package/src/contentful/blocks/cta-callout/index.tsx +54 -54
  107. package/src/contentful/blocks/cta-callout/types.ts +22 -22
  108. package/src/contentful/blocks/find-kinetic/index.tsx +124 -124
  109. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  110. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  111. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  112. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  113. package/src/contentful/blocks/image-promo-bar/index.tsx +11 -2
  114. package/src/contentful/blocks/image-promo-bar/types.ts +31 -27
  115. package/src/contentful/blocks/modal/constants.ts +53 -53
  116. package/src/contentful/blocks/modal/index.tsx +91 -91
  117. package/src/contentful/blocks/modal/types.ts +12 -12
  118. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  119. package/src/contentful/blocks/navigation/index.tsx +385 -385
  120. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  121. package/src/contentful/blocks/navigation/types.ts +41 -41
  122. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  123. package/src/contentful/blocks/primary-hero/index.tsx +228 -212
  124. package/src/contentful/blocks/primary-hero/types.ts +35 -30
  125. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  126. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  127. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  128. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  129. package/src/contentful/blocks/text/index.tsx +12 -12
  130. package/src/contentful/blocks/text/types.ts +1 -1
  131. package/src/contentful/index.ts +57 -57
  132. package/src/hooks/use-body-scroll-lock.ts +34 -34
  133. package/src/hooks/use-outside-click.ts +17 -17
  134. package/src/index.ts +96 -96
  135. package/src/next/index.ts +5 -5
  136. package/src/setupTests.ts +46 -46
  137. package/src/stories/DocsTemplate.tsx +24 -24
  138. package/src/styles/globals.css +307 -307
  139. package/src/types/global.d.ts +9 -9
  140. package/src/types/micro-components.ts +89 -80
  141. package/src/utils/index.ts +49 -49
package/src/styles/globals.css CHANGED
@@ -1,307 +1,307 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- /* Material Symbols Font */
6
- @font-face {
7
- font-family: "Material Symbols Rounded";
8
- src: url("/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
9
- format("woff2");
10
- font-weight: 100 700;
11
- font-style: normal;
12
- font-display: swap;
13
- }
14
-
15
- /* Custom CSS variables for fonts */
16
- /* default theme Residential */
17
- :root {
18
- --win-site-font:
19
- -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
20
- "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
21
-
22
- /* Color tokens - Border */
23
- --color-border: #e6e6e6;
24
- --color-border-brand: #24a76a;
25
- --color-border-critical: #d40000;
26
- --color-border-critical-secondary: #f0a7a7;
27
- --color-border-disabled: #f2f2f4;
28
- --color-border-focus: #24a76a;
29
- --color-border-focus-inverse: #00002d;
30
- --color-border-focus-secondary: #00002d;
31
- --color-border-hover: #cecece;
32
- --color-border-info: #cecece;
33
- --color-border-inverse: #ffffff;
34
- --color-border-secondary: #f2f2f4;
35
- --color-border-secondary-on-bg-fill: #949494;
36
- --color-border-success: #24a76a;
37
- --color-border-tertiary: #cecece;
38
- --color-border-accent: #f5ff1e;
39
-
40
- /* Color tokens - Icon */
41
- --color-icon-brand: #24a76a;
42
- --color-icon-brand-accent: #f5ff1e;
43
- --color-icon-critical: #d40000;
44
- --color-icon: #00002d;
45
- --color-icon-info: #757575;
46
- --color-icon-inverse: #ffffff;
47
- --color-icon-inverse-secondary: #e6e6e6;
48
- --color-icon-secondary: #757575;
49
- --color-icon-success: #24a76a;
50
- --color-icon-disabled: #cecece;
51
-
52
- /* Color tokens - Checkbox */
53
- --color-checkbox-bg-surface-disabled: #f7f7f8;
54
- --color-checkbox-bg-surface-selected-disabled: #e6e6e6;
55
- --color-checkbox-icon-disabled: #ffffff;
56
-
57
- /* Color tokens - Input */
58
- --color-input-bg-surface: #ffffff;
59
- --color-input-bg-surface-active: #f2f2f4;
60
- --color-input-bg-surface-disabled: #f7f7f8;
61
- --color-input-bg-surface-hover: #f7f7f8;
62
- --color-input-border: #cecece;
63
- --color-input-border-critical: #d40000;
64
- --color-input-border-hover: #00002d;
65
- --color-input-border-selected: #24a76a;
66
- --color-input-icon-placeholder: #757575;
67
- --color-input-text-placeholder: #5e5e5e;
68
-
69
- /* Color tokens - Nav */
70
- --color-nav-bg: #ffffff;
71
- --color-nav-bg-surface: #fbfbfc;
72
- --color-nav-bg-surface-active: #f2f2f4;
73
- --color-nav-bg-surface-hover: #f7f7f8;
74
- --color-nav-bg-surface-selected: #f2f2f4;
75
-
76
- /* Color tokens - Radio */
77
- --color-radio-button-bg-surface-disabled: #f7f7f8;
78
- --color-radio-button-bg-surface-selected-disabled: #e6e6e6;
79
- --color-radio-button-icon-disabled: #f7f7f8;
80
-
81
- /* Color tokens - Scrim */
82
- --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
83
- --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
84
-
85
- /* Color tokens - Skeleton */
86
- --color-skeleton-bg-start: #cecece;
87
- --color-skeleton-bg-end: #e6e6e6;
88
-
89
- /* Color tokens - Toggle */
90
- --color-toggle-bg-fill: #ffffff;
91
- --color-toggle-bg-surface-active: #24a76a;
92
- --color-toggle-bg-surface-inactive: #949494;
93
- --color-toggle-bg-surface-disabled: #e6e6e6;
94
-
95
- /* Color tokens - Tooltip */
96
- --color-tooltip-bg: #757575;
97
-
98
- /* Color tokens - Background */
99
- --color-bg: #ffffff;
100
- --color-bg-fill-brand: #24a76a;
101
- --color-bg-fill-brand-accent: #f5ff1e;
102
- --color-bg-fill-brand-active: #209a61;
103
- --color-bg-fill-brand-disabled: #cecece;
104
- --color-bg-fill-brand-hover: #45c187;
105
- --color-bg-fill-brand-selected: #24a76a;
106
- --color-bg-fill-brand-supporting: #07b2e2;
107
- --color-bg-fill-brand-tertiary: #931d69;
108
- --color-bg-fill-translucent: rgba(255, 255, 255, 0.5);
109
- --color-bg-fill-critical: #d40000;
110
- --color-bg-fill-critical-secondary: #fdf5f5;
111
- --color-bg-fill-info: #f2f2f4;
112
- --color-bg-fill-inverse: #00002d;
113
- --color-bg-fill-inverse-active: #00002d;
114
- --color-bg-fill-inverse-disabled: #cecece;
115
- --color-bg-fill-inverse-hover: #191a54;
116
- --color-bg-fill-inverse-selected: #00002d;
117
- --color-bg-fill-secondary: #ffffff;
118
- --color-bg-fill-secondary-active: #f2f2f4;
119
- --color-bg-fill-secondary-hover: #fbfbfc;
120
- --color-bg-fill-success: #24a76a;
121
- --color-bg-fill-success-secondary: #f4fbf8;
122
- --color-bg-fill-surface-brand: #f4fbf8;
123
- --color-bg-fill-surface-inverse: #00002d;
124
- --color-bg-fill-surface-success: #d3f2e3;
125
- --color-bg-inverse: #00002d;
126
- --color-bg-surface: #ffffff;
127
- --color-bg-surface-active: #f2f2f4;
128
- --color-bg-surface-brand: #f4fbf8;
129
- --color-bg-surface-disabled: #f2f2f4;
130
- --color-bg-surface-hover: #f7f7f8;
131
- --color-bg-surface-info: #f7f7f8;
132
- --color-bg-surface-inverse: #191a54;
133
- --color-bg-surface-secondary: #fbfbfc;
134
- --color-bg-surface-secondary-active: #e6e6e6;
135
- --color-bg-surface-secondary-hover: #f2f2f4;
136
- --color-bg-surface-secondary-selected: #e6e6e6;
137
- --color-bg-surface-selected: #f7f7f8;
138
- --color-bg-surface-success: #d3f2e3;
139
- --color-bg-surface-tertiary: #f7f7f8;
140
- --color-bg-surface-tertiary-active: #e6e6e6;
141
- --color-bg-surface-tertiary-hover: #f2f2f4;
142
- --color-bg-surface-transparent: rgba(0, 0, 0, 0);
143
-
144
- /* Color tokens - Text */
145
- --color-text: #00002d;
146
- --color-text-brand: #24a76a;
147
- --color-text-brand-accent-on-bg-fill: #00002d;
148
- --color-text-brand-hover: #1b8352;
149
- --color-text-brand-on-bg-fill: #ffffff;
150
- --color-text-brand-supporting-on-bg-fill: #00002d;
151
- --color-text-brand-tertiary-on-bg-fill: #ffffff;
152
- --color-text-critical: #d40000;
153
- --color-text-critical-on-bg-inverse: #fdf5f5;
154
- --color-text-disabled: #757575;
155
- --color-text-info: #757575;
156
- --color-text-inverse: #ffffff;
157
- --color-text-link: #00002d;
158
- --color-text-link-active: #00002d;
159
- --color-text-link-hover: #00002d;
160
- --color-text-link-inverse: #ffffff;
161
- --color-text-secondary: #464646;
162
- --color-text-success: #1b8352;
163
- --color-text-accent-on-bg-inverse: #f5ff1e;
164
-
165
- /* Border radius tokens - Default (Residential) */
166
- --border-radius-2-5: 10px;
167
- --border-radius-3-5: 14px;
168
- --border-radius-lg: 0.5rem;
169
- --border-radius-xl: 0.75rem;
170
- --border-radius-2xl: 1rem;
171
- --border-radius-2-5xl: 1.25rem;
172
- --border-radius-4xl: 2rem;
173
- --border-radius-5xl: 2.5rem;
174
- }
175
-
176
- /* smb theme */
177
-
178
- [data-theme="business"] {
179
- /* Border colors */
180
- --color-border-brand: #007c93;
181
- --color-border-critical: #d40000;
182
- --color-border-focus: #007c93;
183
- --color-border-focus-inverse: #231f20;
184
- --color-border-focus-secondary: #231f20;
185
- --color-border-success: #24a76a;
186
-
187
- /* Icon colors */
188
- --color-icon-brand: #009bb8;
189
- --color-icon-brand-accent: #22a881;
190
- --color-icon-default: #231f20;
191
- --color-icon-secondary: #a33895;
192
- --color-icon-success: #22a881;
193
-
194
- /* Input colors */
195
- --color-input-border-hover: #231f20;
196
- --color-input-border-selected: #009bb8;
197
- --color-input-icon-placeholder: #949494;
198
- --color-input-text-placeholder: #949494;
199
-
200
- /* Toggle colors */
201
- --color-toggle-bg-surface-active: #009bb8;
202
-
203
- /* Background fill colors */
204
- --color-bg-fill-brand: #007c93;
205
- --color-bg-fill-brand-accent: #22a881;
206
- --color-bg-fill-brand-active: #005d6e;
207
- --color-bg-fill-brand-hover: #30aec5;
208
- --color-bg-fill-brand-selected: #007c93;
209
- --color-bg-fill-brand-supporting: #40afc9;
210
- --color-bg-fill-brand-tertiary: #a33895;
211
- --color-bg-fill-inverse: #231f20;
212
- --color-bg-fill-inverse-active: #231f20;
213
- --color-bg-fill-inverse-hover: #4d4a4a;
214
- --color-bg-fill-inverse-selected: #231f20;
215
- --color-bg-fill-success: #1b8667;
216
- --color-bg-fill-success-secondary: #c8e9e0;
217
- --color-bg-fill-surface-brand: #bfe6ed;
218
- --color-bg-fill-surface-inverse: #231f20;
219
- --color-bg-fill-surface-success: #a0dac9;
220
-
221
- /* Text colors */
222
- --color-text: #231f20;
223
- --color-text-brand: #009bb8;
224
- --color-text-brand-accent-on-bg-fill: #22a881;
225
- --color-text-brand-hover: #003e4a;
226
- --color-text-brand-supporting-on-bg-fill: #40afc9;
227
- --color-text-brand-tertiary-on-bg-fill: #a33895;
228
- --color-text-info: #5a5a5a;
229
- --color-text-link: #009bb8;
230
- --color-text-link-active: #009bb8;
231
- --color-text-link-hover: #003e4a;
232
- --color-text-secondary: #5a5a5a;
233
- --color-text-success: #1b8667;
234
-
235
- /* Border radius tokens - Business theme */
236
- --border-radius-2-5: 0px;
237
- --border-radius-3-5: 3px;
238
- --border-radius-lg: 2px;
239
- --border-radius-xl: 2px;
240
- --border-radius-2xl: 0rem;
241
- --border-radius-2-5xl: 0rem;
242
- --border-radius-4xl: 0rem;
243
- --border-radius-5xl: 2.5rem;
244
- }
245
-
246
- [data-theme="business-rebrand"] {
247
- /* Border colors */
248
- --color-border-brand: #0393ba;
249
- --color-border-focus: #0393ba;
250
-
251
- /* Icon colors */
252
- --color-icon-brand: #0393ba;
253
-
254
- /* Input colors */
255
- --color-input-border-selected: #07b2e2;
256
-
257
- /* Toggle colors */
258
- --color-toggle-bg-surface-active: #0393ba;
259
-
260
- /* Background fill colors */
261
- --color-bg-fill-brand: #0393ba;
262
- --color-bg-fill-brand-hover: #07b2e2;
263
- --color-bg-fill-brand-active: #027693;
264
- --color-bg-fill-brand-selected: #0393ba;
265
-
266
- --color-bg-fill-brand-supporting: #26b170;
267
-
268
- /* Text colors */
269
- --color-text-brand: #0393ba;
270
- --color-text-hover: #027693;
271
- }
272
-
273
- /* Base styles for components */
274
- @layer base {
275
- * {
276
- box-sizing: border-box;
277
- }
278
-
279
- html {
280
- font-family: var(--win-site-font);
281
- }
282
- }
283
-
284
- /* Component-specific styles */
285
- @layer components {
286
- /* Blinking dot animation */
287
- @keyframes blink {
288
- 0%,
289
- 50% {
290
- opacity: 1;
291
- }
292
- 51%,
293
- 100% {
294
- opacity: 0.3;
295
- }
296
- }
297
-
298
- .animate-blink {
299
- animation: blink 1.5s ease-in-out infinite;
300
- }
301
- }
302
-
303
- /* Hide shape background SVGs inside content */
304
-
305
- .shape-bg-content .shape-bg svg {
306
- display: none;
307
- }
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ /* Material Symbols Font */
6
+ @font-face {
7
+ font-family: "Material Symbols Rounded";
8
+ src: url("/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
9
+ format("woff2");
10
+ font-weight: 100 700;
11
+ font-style: normal;
12
+ font-display: swap;
13
+ }
14
+
15
+ /* Custom CSS variables for fonts */
16
+ /* default theme Residential */
17
+ :root {
18
+ --win-site-font:
19
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
20
+ "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
21
+
22
+ /* Color tokens - Border */
23
+ --color-border: #e6e6e6;
24
+ --color-border-brand: #24a76a;
25
+ --color-border-critical: #d40000;
26
+ --color-border-critical-secondary: #f0a7a7;
27
+ --color-border-disabled: #f2f2f4;
28
+ --color-border-focus: #24a76a;
29
+ --color-border-focus-inverse: #00002d;
30
+ --color-border-focus-secondary: #00002d;
31
+ --color-border-hover: #cecece;
32
+ --color-border-info: #cecece;
33
+ --color-border-inverse: #ffffff;
34
+ --color-border-secondary: #f2f2f4;
35
+ --color-border-secondary-on-bg-fill: #949494;
36
+ --color-border-success: #24a76a;
37
+ --color-border-tertiary: #cecece;
38
+ --color-border-accent: #f5ff1e;
39
+
40
+ /* Color tokens - Icon */
41
+ --color-icon-brand: #24a76a;
42
+ --color-icon-brand-accent: #f5ff1e;
43
+ --color-icon-critical: #d40000;
44
+ --color-icon: #00002d;
45
+ --color-icon-info: #757575;
46
+ --color-icon-inverse: #ffffff;
47
+ --color-icon-inverse-secondary: #e6e6e6;
48
+ --color-icon-secondary: #757575;
49
+ --color-icon-success: #24a76a;
50
+ --color-icon-disabled: #cecece;
51
+
52
+ /* Color tokens - Checkbox */
53
+ --color-checkbox-bg-surface-disabled: #f7f7f8;
54
+ --color-checkbox-bg-surface-selected-disabled: #e6e6e6;
55
+ --color-checkbox-icon-disabled: #ffffff;
56
+
57
+ /* Color tokens - Input */
58
+ --color-input-bg-surface: #ffffff;
59
+ --color-input-bg-surface-active: #f2f2f4;
60
+ --color-input-bg-surface-disabled: #f7f7f8;
61
+ --color-input-bg-surface-hover: #f7f7f8;
62
+ --color-input-border: #cecece;
63
+ --color-input-border-critical: #d40000;
64
+ --color-input-border-hover: #00002d;
65
+ --color-input-border-selected: #24a76a;
66
+ --color-input-icon-placeholder: #757575;
67
+ --color-input-text-placeholder: #5e5e5e;
68
+
69
+ /* Color tokens - Nav */
70
+ --color-nav-bg: #ffffff;
71
+ --color-nav-bg-surface: #fbfbfc;
72
+ --color-nav-bg-surface-active: #f2f2f4;
73
+ --color-nav-bg-surface-hover: #f7f7f8;
74
+ --color-nav-bg-surface-selected: #f2f2f4;
75
+
76
+ /* Color tokens - Radio */
77
+ --color-radio-button-bg-surface-disabled: #f7f7f8;
78
+ --color-radio-button-bg-surface-selected-disabled: #e6e6e6;
79
+ --color-radio-button-icon-disabled: #f7f7f8;
80
+
81
+ /* Color tokens - Scrim */
82
+ --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
83
+ --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
84
+
85
+ /* Color tokens - Skeleton */
86
+ --color-skeleton-bg-start: #cecece;
87
+ --color-skeleton-bg-end: #e6e6e6;
88
+
89
+ /* Color tokens - Toggle */
90
+ --color-toggle-bg-fill: #ffffff;
91
+ --color-toggle-bg-surface-active: #24a76a;
92
+ --color-toggle-bg-surface-inactive: #949494;
93
+ --color-toggle-bg-surface-disabled: #e6e6e6;
94
+
95
+ /* Color tokens - Tooltip */
96
+ --color-tooltip-bg: #757575;
97
+
98
+ /* Color tokens - Background */
99
+ --color-bg: #ffffff;
100
+ --color-bg-fill-brand: #24a76a;
101
+ --color-bg-fill-brand-accent: #f5ff1e;
102
+ --color-bg-fill-brand-active: #209a61;
103
+ --color-bg-fill-brand-disabled: #cecece;
104
+ --color-bg-fill-brand-hover: #45c187;
105
+ --color-bg-fill-brand-selected: #24a76a;
106
+ --color-bg-fill-brand-supporting: #07b2e2;
107
+ --color-bg-fill-brand-tertiary: #931d69;
108
+ --color-bg-fill-translucent: rgba(255, 255, 255, 0.5);
109
+ --color-bg-fill-critical: #d40000;
110
+ --color-bg-fill-critical-secondary: #fdf5f5;
111
+ --color-bg-fill-info: #f2f2f4;
112
+ --color-bg-fill-inverse: #00002d;
113
+ --color-bg-fill-inverse-active: #00002d;
114
+ --color-bg-fill-inverse-disabled: #cecece;
115
+ --color-bg-fill-inverse-hover: #191a54;
116
+ --color-bg-fill-inverse-selected: #00002d;
117
+ --color-bg-fill-secondary: #ffffff;
118
+ --color-bg-fill-secondary-active: #f2f2f4;
119
+ --color-bg-fill-secondary-hover: #fbfbfc;
120
+ --color-bg-fill-success: #24a76a;
121
+ --color-bg-fill-success-secondary: #f4fbf8;
122
+ --color-bg-fill-surface-brand: #f4fbf8;
123
+ --color-bg-fill-surface-inverse: #00002d;
124
+ --color-bg-fill-surface-success: #d3f2e3;
125
+ --color-bg-inverse: #00002d;
126
+ --color-bg-surface: #ffffff;
127
+ --color-bg-surface-active: #f2f2f4;
128
+ --color-bg-surface-brand: #f4fbf8;
129
+ --color-bg-surface-disabled: #f2f2f4;
130
+ --color-bg-surface-hover: #f7f7f8;
131
+ --color-bg-surface-info: #f7f7f8;
132
+ --color-bg-surface-inverse: #191a54;
133
+ --color-bg-surface-secondary: #fbfbfc;
134
+ --color-bg-surface-secondary-active: #e6e6e6;
135
+ --color-bg-surface-secondary-hover: #f2f2f4;
136
+ --color-bg-surface-secondary-selected: #e6e6e6;
137
+ --color-bg-surface-selected: #f7f7f8;
138
+ --color-bg-surface-success: #d3f2e3;
139
+ --color-bg-surface-tertiary: #f7f7f8;
140
+ --color-bg-surface-tertiary-active: #e6e6e6;
141
+ --color-bg-surface-tertiary-hover: #f2f2f4;
142
+ --color-bg-surface-transparent: rgba(0, 0, 0, 0);
143
+
144
+ /* Color tokens - Text */
145
+ --color-text: #00002d;
146
+ --color-text-brand: #24a76a;
147
+ --color-text-brand-accent-on-bg-fill: #00002d;
148
+ --color-text-brand-hover: #1b8352;
149
+ --color-text-brand-on-bg-fill: #ffffff;
150
+ --color-text-brand-supporting-on-bg-fill: #00002d;
151
+ --color-text-brand-tertiary-on-bg-fill: #ffffff;
152
+ --color-text-critical: #d40000;
153
+ --color-text-critical-on-bg-inverse: #fdf5f5;
154
+ --color-text-disabled: #757575;
155
+ --color-text-info: #757575;
156
+ --color-text-inverse: #ffffff;
157
+ --color-text-link: #00002d;
158
+ --color-text-link-active: #00002d;
159
+ --color-text-link-hover: #00002d;
160
+ --color-text-link-inverse: #ffffff;
161
+ --color-text-secondary: #464646;
162
+ --color-text-success: #1b8352;
163
+ --color-text-accent-on-bg-inverse: #f5ff1e;
164
+
165
+ /* Border radius tokens - Default (Residential) */
166
+ --border-radius-2-5: 10px;
167
+ --border-radius-3-5: 14px;
168
+ --border-radius-lg: 0.5rem;
169
+ --border-radius-xl: 0.75rem;
170
+ --border-radius-2xl: 1rem;
171
+ --border-radius-2-5xl: 1.25rem;
172
+ --border-radius-4xl: 2rem;
173
+ --border-radius-5xl: 2.5rem;
174
+ }
175
+
176
+ /* smb theme */
177
+
178
+ [data-theme="business"] {
179
+ /* Border colors */
180
+ --color-border-brand: #007c93;
181
+ --color-border-critical: #d40000;
182
+ --color-border-focus: #007c93;
183
+ --color-border-focus-inverse: #231f20;
184
+ --color-border-focus-secondary: #231f20;
185
+ --color-border-success: #24a76a;
186
+
187
+ /* Icon colors */
188
+ --color-icon-brand: #009bb8;
189
+ --color-icon-brand-accent: #22a881;
190
+ --color-icon-default: #231f20;
191
+ --color-icon-secondary: #a33895;
192
+ --color-icon-success: #22a881;
193
+
194
+ /* Input colors */
195
+ --color-input-border-hover: #231f20;
196
+ --color-input-border-selected: #009bb8;
197
+ --color-input-icon-placeholder: #949494;
198
+ --color-input-text-placeholder: #949494;
199
+
200
+ /* Toggle colors */
201
+ --color-toggle-bg-surface-active: #009bb8;
202
+
203
+ /* Background fill colors */
204
+ --color-bg-fill-brand: #007c93;
205
+ --color-bg-fill-brand-accent: #22a881;
206
+ --color-bg-fill-brand-active: #005d6e;
207
+ --color-bg-fill-brand-hover: #30aec5;
208
+ --color-bg-fill-brand-selected: #007c93;
209
+ --color-bg-fill-brand-supporting: #40afc9;
210
+ --color-bg-fill-brand-tertiary: #a33895;
211
+ --color-bg-fill-inverse: #231f20;
212
+ --color-bg-fill-inverse-active: #231f20;
213
+ --color-bg-fill-inverse-hover: #4d4a4a;
214
+ --color-bg-fill-inverse-selected: #231f20;
215
+ --color-bg-fill-success: #1b8667;
216
+ --color-bg-fill-success-secondary: #c8e9e0;
217
+ --color-bg-fill-surface-brand: #bfe6ed;
218
+ --color-bg-fill-surface-inverse: #231f20;
219
+ --color-bg-fill-surface-success: #a0dac9;
220
+
221
+ /* Text colors */
222
+ --color-text: #231f20;
223
+ --color-text-brand: #009bb8;
224
+ --color-text-brand-accent-on-bg-fill: #22a881;
225
+ --color-text-brand-hover: #003e4a;
226
+ --color-text-brand-supporting-on-bg-fill: #40afc9;
227
+ --color-text-brand-tertiary-on-bg-fill: #a33895;
228
+ --color-text-info: #5a5a5a;
229
+ --color-text-link: #009bb8;
230
+ --color-text-link-active: #009bb8;
231
+ --color-text-link-hover: #003e4a;
232
+ --color-text-secondary: #5a5a5a;
233
+ --color-text-success: #1b8667;
234
+
235
+ /* Border radius tokens - Business theme */
236
+ --border-radius-2-5: 0px;
237
+ --border-radius-3-5: 3px;
238
+ --border-radius-lg: 2px;
239
+ --border-radius-xl: 2px;
240
+ --border-radius-2xl: 0rem;
241
+ --border-radius-2-5xl: 0rem;
242
+ --border-radius-4xl: 0rem;
243
+ --border-radius-5xl: 2.5rem;
244
+ }
245
+
246
+ [data-theme="business-rebrand"] {
247
+ /* Border colors */
248
+ --color-border-brand: #0393ba;
249
+ --color-border-focus: #0393ba;
250
+
251
+ /* Icon colors */
252
+ --color-icon-brand: #0393ba;
253
+
254
+ /* Input colors */
255
+ --color-input-border-selected: #07b2e2;
256
+
257
+ /* Toggle colors */
258
+ --color-toggle-bg-surface-active: #0393ba;
259
+
260
+ /* Background fill colors */
261
+ --color-bg-fill-brand: #0393ba;
262
+ --color-bg-fill-brand-hover: #07b2e2;
263
+ --color-bg-fill-brand-active: #027693;
264
+ --color-bg-fill-brand-selected: #0393ba;
265
+
266
+ --color-bg-fill-brand-supporting: #26b170;
267
+
268
+ /* Text colors */
269
+ --color-text-brand: #0393ba;
270
+ --color-text-hover: #027693;
271
+ }
272
+
273
+ /* Base styles for components */
274
+ @layer base {
275
+ * {
276
+ box-sizing: border-box;
277
+ }
278
+
279
+ html {
280
+ font-family: var(--win-site-font);
281
+ }
282
+ }
283
+
284
+ /* Component-specific styles */
285
+ @layer components {
286
+ /* Blinking dot animation */
287
+ @keyframes blink {
288
+ 0%,
289
+ 50% {
290
+ opacity: 1;
291
+ }
292
+ 51%,
293
+ 100% {
294
+ opacity: 0.3;
295
+ }
296
+ }
297
+
298
+ .animate-blink {
299
+ animation: blink 1.5s ease-in-out infinite;
300
+ }
301
+ }
302
+
303
+ /* Hide shape background SVGs inside content */
304
+
305
+ .shape-bg-content .shape-bg svg {
306
+ display: none;
307
+ }
package/src/types/global.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- declare module "*.module.css" {
2
- const classes: { [key: string]: string };
3
- export default classes;
4
- }
5
-
6
- declare module "*.css" {
7
- const content: string;
8
- export default content;
9
- }
1
+ declare module "*.module.css" {
2
+ const classes: { [key: string]: string };
3
+ export default classes;
4
+ }
5
+
6
+ declare module "*.css" {
7
+ const content: string;
8
+ export default content;
9
+ }