@wavemaker/foundation-css 12.0.0-next.45089 → 12.0.0-next.45091

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 (3) hide show
  1. foundation-css/foundation/foundation.css +183 -180
  2. foundation-css/foundation/foundation.min.css +1 -1
  3. foundation-css/package.json +1 -1
foundation-css/foundation/foundation.css CHANGED
@@ -4,137 +4,194 @@
4
4
  */
5
5
  @import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
6
6
  :root {
7
- --wm-border-color: var(--wm-color-outline-variant);
8
- --wm-border-color-translucent: rgba(0, 0, 0, 0.175);
9
- --wm-border-width: 1px;
7
+ --wm-spacer: 1rem;
8
+ --wm-space-rule: 0.25rem;
9
+ /* 4px */
10
+ --wm-radius-circle: 50%;
11
+ --wm-radius-pill: 1000px;
12
+ --wm-radius-xxl: 32px;
13
+ --wm-radius-xl: 28px;
14
+ --wm-radius-lg: 16px;
15
+ --wm-radius-md: 12px;
16
+ --wm-radius-sm: 8px;
17
+ --wm-radius-xs: 4px;
18
+ --wm-radius-xxs: 2px;
19
+ --wm-radius-none: 0px;
20
+ --wm-font-family-backup: Arial, Helvetica, sans-serif;
21
+ --wm-font-weight-black: 900;
22
+ --wm-font-weight-extrabold: 800;
23
+ --wm-font-weight-bold: 700;
24
+ --wm-font-weight-semibold: 600;
25
+ --wm-font-weight-medium: 500;
26
+ --wm-font-weight-regular: 400;
27
+ --wm-font-weight-light: 300;
28
+ --wm-font-weight-extralight: 200;
29
+ --wm-font-weight-thin: 100;
10
30
  --wm-border-style: solid;
11
- --wm-color-primary: #65558F;
12
- --wm-color-primary-container: #EADDFF;
13
- --wm-color-primary-fixed: #EADDFF;
14
- --wm-color-primary-fixed-dim: #D0BCFF;
15
- --wm-color-primary-fixed-variant: #4F378B;
16
- --wm-color-on-primary: #FFFFFF;
17
- --wm-color-on-primary-container: #21005D;
18
- --wm-color-on-primary-fixed: #E8DEF8;
19
- --wm-color-on-primary-fixed-dim: #CCC2DC;
20
- --wm-color-on-primary-fixed-variant: #4A4458;
21
- --wm-color-secondary: #625B71;
22
- --wm-color-secondary-container: #E8DEF8;
23
- --wm-color-secondary-fixed: #E8DEF8;
24
- --wm-color-secondary-fixed-dim: #CCC2DC;
25
- --wm-color-secondary-fixed-variant: #4A4458;
26
- --wm-color-on-secondary: #FFFFFF;
27
- --wm-color-on-secondary-container: #1D192B;
28
- --wm-color-on-secondary-fixed: #1D192B;
29
- --wm-color-on-secondary-fixed-variant: #4A4458;
30
- --wm-color-tertiary: #7D5260;
31
- --wm-color-tertiary-container: #FFD8E4;
32
- --wm-color-tertiary-fixed: #FFD8E4;
33
- --wm-color-tertiary-fixed-dim: #EFB8C8;
34
- --wm-color-on-tertiary: #FFFFFF;
35
- --wm-color-on-tertiary-container: #31111D;
36
- --wm-color-on-tertiary-fixed: #31111D;
37
- --wm-color-on-tertiary-fixed-variant: #633B48;
38
- --wm-color-success: #0abf00;
39
- --wm-color-success-container: #9fffb2;
40
- --wm-color-on-success: #ffffff;
41
- --wm-color-on-success-container: #1d1d1d;
42
- --wm-color-info: #00c8ff;
43
- --wm-color-info-container: #a5eaff;
44
- --wm-color-on-info: #232323;
45
- --wm-color-on-info-container: #191919;
46
- --wm-color-warning: #ffae00;
47
- --wm-color-warning-container: #ffe495;
48
- --wm-color-on-warning: #2c2c2c;
49
- --wm-color-on-warning-container: #1b1b1b;
50
- --wm-color-error: #B3261E;
51
- --wm-color-error-container: #F9DEDC;
52
- --wm-color-on-error: #FFFFFF;
53
- --wm-color-on-error-container: #410E0B;
54
- --wm-color-background: #FEF7FF;
55
- --wm-color-on-background: #1D1B20;
56
- --wm-color-surface: #FEF7FF;
57
- --wm-color-surface-variant: #E7E0EC;
58
- --wm-color-surface-bright: #FEF7FF;
59
- --wm-color-surface-dim: #DED8E1;
60
- --wm-color-surface-tint: #6750A4;
61
- --wm-color-surface-container: #FFFFFF;
62
- --wm-color-surface-container-low: #F7F2FA;
63
- --wm-color-surface-container-lowest: #FFFFFF;
64
- --wm-color-surface-container-high: #ECE6F0;
65
- --wm-color-surface-container-highest: #E6E0E9;
66
- --wm-color-on-surface: #1D1B20;
67
- --wm-color-on-surface-variant: #49454F;
68
- --wm-color-inverse-surface: #322F35;
69
- --wm-color-inverse-on-surface: #F5EFF7;
70
- --wm-color-inverse-primary: #D0BCFF;
71
- --wm-color-outline: #79747E;
72
- --wm-color-outline-variant: #CAC4D0;
73
- --wm-color-shadow: #000000;
74
- --wm-color-scrim: #000000;
75
- --wm-color-white: #FFFFFF;
31
+ --wm-border-width: 1px;
32
+ --wm-border-color-translucent: rgba(0, 0, 0, 0.175);
76
33
  --wm-color-black: #000000;
77
- --wm-font-weight-thin: 100;
78
- --wm-font-weight-extralight: 200;
79
- --wm-font-weight-light: 300;
80
- --wm-font-weight-regular: 400;
81
- --wm-font-weight-medium: 500;
82
- --wm-font-weight-semibold: 600;
83
- --wm-font-weight-bold: 700;
84
- --wm-font-weight-extrabold: 800;
85
- --wm-font-weight-black: 900;
86
- --wm-font-family-brand: Roboto, var(--wm-font-family-backup);
87
- --wm-font-family-plain: Roboto, var(--wm-font-family-backup);
88
- --wm-font-family-backup: Arial, Helvetica, sans-serif;
89
- --wm-radius-none: 0px;
90
- --wm-radius-xxs: 2px;
91
- --wm-radius-xs: 4px;
92
- --wm-radius-sm: 8px;
93
- --wm-radius-md: 12px;
94
- --wm-radius-lg: 16px;
95
- --wm-radius-xl: 28px;
96
- --wm-radius-xxl: 32px;
97
- --wm-radius-pill: 1000px;
98
- --wm-radius-circle: 50%;
99
- --wm-space-0: calc(var(--wm-space-rule) * 0);
100
- /* 0px */
101
- --wm-space-1: calc(var(--wm-space-rule) * 1);
102
- /* 4px */
103
- --wm-space-2: calc(var(--wm-space-rule) * 2);
104
- /* 8px */
105
- --wm-space-3: calc(var(--wm-space-rule) * 3);
106
- /* 12px */
107
- --wm-space-4: calc(var(--wm-space-rule) * 4);
108
- /* 16px */
109
- --wm-space-5: calc(var(--wm-space-rule) * 5);
110
- /* 20px */
111
- --wm-space-6: calc(var(--wm-space-rule) * 6);
112
- /* 24px */
113
- --wm-space-7: calc(var(--wm-space-rule) * 7);
114
- /* 28px */
115
- --wm-space-8: calc(var(--wm-space-rule) * 8);
116
- /* 32px */
117
- --wm-space-9: calc(var(--wm-space-rule) * 9);
118
- /* 36px */
119
- --wm-space-10: calc(var(--wm-space-rule) * 10);
120
- /* 40px */
121
- --wm-space-11: calc(var(--wm-space-rule) * 11);
122
- /* 44px */
34
+ --wm-color-white: #FFFFFF;
35
+ --wm-color-scrim: #000000;
36
+ --wm-color-shadow: #000000;
37
+ --wm-color-outline-variant: #CAC4D0;
38
+ --wm-color-outline: #79747E;
39
+ --wm-color-inverse-primary: #D0BCFF;
40
+ --wm-color-inverse-on-surface: #F5EFF7;
41
+ --wm-color-inverse-surface: #322F35;
42
+ --wm-color-on-surface-variant: #49454F;
43
+ --wm-color-on-surface: #1D1B20;
44
+ --wm-color-surface-container-highest: #E6E0E9;
45
+ --wm-color-surface-container-high: #ECE6F0;
46
+ --wm-color-surface-container-lowest: #FFFFFF;
47
+ --wm-color-surface-container-low: #F7F2FA;
48
+ --wm-color-surface-container: #FFFFFF;
49
+ --wm-color-surface-tint: #6750A4;
50
+ --wm-color-surface-dim: #DED8E1;
51
+ --wm-color-surface-bright: #FEF7FF;
52
+ --wm-color-surface-variant: #E7E0EC;
53
+ --wm-color-surface: #FEF7FF;
54
+ --wm-color-on-background: #1D1B20;
55
+ --wm-color-background: #FEF7FF;
56
+ --wm-color-on-error-container: #410E0B;
57
+ --wm-color-on-error: #FFFFFF;
58
+ --wm-color-error-container: #F9DEDC;
59
+ --wm-color-error: #B3261E;
60
+ --wm-color-on-warning-container: #1b1b1b;
61
+ --wm-color-on-warning: #2c2c2c;
62
+ --wm-color-warning-container: #ffe495;
63
+ --wm-color-warning: #ffae00;
64
+ --wm-color-on-info-container: #191919;
65
+ --wm-color-on-info: #232323;
66
+ --wm-color-info-container: #a5eaff;
67
+ --wm-color-info: #00c8ff;
68
+ --wm-color-on-success-container: #1d1d1d;
69
+ --wm-color-on-success: #ffffff;
70
+ --wm-color-success-container: #9fffb2;
71
+ --wm-color-success: #0abf00;
72
+ --wm-color-on-tertiary-fixed-variant: #633B48;
73
+ --wm-color-on-tertiary-fixed: #31111D;
74
+ --wm-color-on-tertiary-container: #31111D;
75
+ --wm-color-on-tertiary: #FFFFFF;
76
+ --wm-color-tertiary-fixed-dim: #EFB8C8;
77
+ --wm-color-tertiary-fixed: #FFD8E4;
78
+ --wm-color-tertiary-container: #FFD8E4;
79
+ --wm-color-tertiary: #7D5260;
80
+ --wm-color-on-secondary-fixed-variant: #4A4458;
81
+ --wm-color-on-secondary-fixed: #1D192B;
82
+ --wm-color-on-secondary-container: #1D192B;
83
+ --wm-color-on-secondary: #FFFFFF;
84
+ --wm-color-secondary-fixed-variant: #4A4458;
85
+ --wm-color-secondary-fixed-dim: #CCC2DC;
86
+ --wm-color-secondary-fixed: #E8DEF8;
87
+ --wm-color-secondary-container: #E8DEF8;
88
+ --wm-color-secondary: #625B71;
89
+ --wm-color-on-primary-fixed-variant: #4A4458;
90
+ --wm-color-on-primary-fixed-dim: #CCC2DC;
91
+ --wm-color-on-primary-fixed: #E8DEF8;
92
+ --wm-color-on-primary-container: #21005D;
93
+ --wm-color-on-primary: #FFFFFF;
94
+ --wm-color-primary-fixed-variant: #4F378B;
95
+ --wm-color-primary-fixed-dim: #D0BCFF;
96
+ --wm-color-primary-fixed: #EADDFF;
97
+ --wm-color-primary-container: #EADDFF;
98
+ --wm-color-primary: #65558F;
99
+ --wm-spacer-9: calc(var(--wm-spacer) * 11);
100
+ --wm-spacer-8: calc(var(--wm-spacer) * 8);
101
+ --wm-spacer-7: calc(var(--wm-spacer) * 4);
102
+ --wm-spacer-6: calc(var(--wm-spacer) * 3.5);
103
+ --wm-spacer-5: calc(var(--wm-spacer) * 2.5);
104
+ --wm-spacer-4: calc(var(--wm-spacer) * 1.6);
105
+ --wm-spacer-3: calc(var(--wm-spacer) * 1);
106
+ --wm-spacer-2: calc(var(--wm-spacer) * 0.5);
107
+ --wm-spacer-1: calc(var(--wm-spacer) * 0.25);
108
+ --wm-spacer-0: calc(var(--wm-spacer) * 0);
123
109
  --wm-space-12: calc(var(--wm-space-rule) * 12);
124
110
  /* 48px */
125
- --wm-space-rule: 0.25rem;
111
+ --wm-space-11: calc(var(--wm-space-rule) * 11);
112
+ /* 44px */
113
+ --wm-space-10: calc(var(--wm-space-rule) * 10);
114
+ /* 40px */
115
+ --wm-space-9: calc(var(--wm-space-rule) * 9);
116
+ /* 36px */
117
+ --wm-space-8: calc(var(--wm-space-rule) * 8);
118
+ /* 32px */
119
+ --wm-space-7: calc(var(--wm-space-rule) * 7);
120
+ /* 28px */
121
+ --wm-space-6: calc(var(--wm-space-rule) * 6);
122
+ /* 24px */
123
+ --wm-space-5: calc(var(--wm-space-rule) * 5);
124
+ /* 20px */
125
+ --wm-space-4: calc(var(--wm-space-rule) * 4);
126
+ /* 16px */
127
+ --wm-space-3: calc(var(--wm-space-rule) * 3);
128
+ /* 12px */
129
+ --wm-space-2: calc(var(--wm-space-rule) * 2);
130
+ /* 8px */
131
+ --wm-space-1: calc(var(--wm-space-rule) * 1);
126
132
  /* 4px */
127
- --wm-spacer-0: calc(var(--wm-spacer) * 0);
128
- --wm-spacer-1: calc(var(--wm-spacer) * 0.25);
129
- --wm-spacer-2: calc(var(--wm-spacer) * 0.5);
130
- --wm-spacer-3: calc(var(--wm-spacer) * 1);
131
- --wm-spacer-4: calc(var(--wm-spacer) * 1.6);
132
- --wm-spacer-5: calc(var(--wm-spacer) * 2.5);
133
- --wm-spacer-6: calc(var(--wm-spacer) * 3.5);
134
- --wm-spacer-7: calc(var(--wm-spacer) * 4);
135
- --wm-spacer-8: calc(var(--wm-spacer) * 8);
136
- --wm-spacer-9: calc(var(--wm-spacer) * 11);
137
- --wm-spacer: 1rem;
133
+ --wm-space-0: calc(var(--wm-space-rule) * 0);
134
+ /* 0px */
135
+ --wm-font-family-plain: Roboto, var(--wm-font-family-backup);
136
+ --wm-font-family-brand: Roboto, var(--wm-font-family-backup);
137
+ --wm-border-color: var(--wm-color-outline-variant);
138
+ }
139
+ @media (prefers-color-scheme: dark) {
140
+ :root:not(:has(.wm-studio)) {
141
+ /**
142
+ * Do not edit directly, this file was auto-generated.
143
+ */
144
+ --wm-color-on-success: #1d192b;
145
+ --wm-color-scrim: #000000;
146
+ --wm-color-shadow: #ffffff;
147
+ --wm-color-outline-variant: #49454f;
148
+ --wm-color-outline: #938f99;
149
+ --wm-color-inverse-primary: #6750a4;
150
+ --wm-color-inverse-on-surface: #322f35;
151
+ --wm-color-inverse-surface: #e6e0e9;
152
+ --wm-color-on-surface-variant: #cac4d0;
153
+ --wm-color-on-surface: #e6e0e9;
154
+ --wm-color-surface-container-highest: #36343b;
155
+ --wm-color-surface-container-high: #2b2930;
156
+ --wm-color-surface-container-lowest: #0f0d13;
157
+ --wm-color-surface-container-low: #1d1b20;
158
+ --wm-color-surface-container: #211f26;
159
+ --wm-color-surface-tint: #d0bcff;
160
+ --wm-color-surface-dim: #141218;
161
+ --wm-color-surface-bright: #3b383e;
162
+ --wm-color-surface-variant: #49454f;
163
+ --wm-color-surface: #141218;
164
+ --wm-color-on-background: #e6e0e9;
165
+ --wm-color-background: #141218;
166
+ --wm-color-on-error-container: #f9dedc;
167
+ --wm-color-on-error: #601410;
168
+ --wm-color-error-container: #8c1d18;
169
+ --wm-color-error: #f2b8b5;
170
+ --wm-color-on-tertiary-fixed-variant: #633b48;
171
+ --wm-color-on-tertiary-fixed: #31111d;
172
+ --wm-color-on-tertiary-container: #ffd8e4;
173
+ --wm-color-on-tertiary: #492532;
174
+ --wm-color-tertiary-fixed-dim: #efb8c8;
175
+ --wm-color-tertiary-fixed: #ffd8e4;
176
+ --wm-color-tertiary-container: #633b48;
177
+ --wm-color-tertiary: #efb8c8;
178
+ --wm-color-on-secondary-fixed-variant: #4a4458;
179
+ --wm-color-on-secondary-fixed: #1d192b;
180
+ --wm-color-on-secondary-container: #e8def8;
181
+ --wm-color-on-secondary: #332d41;
182
+ --wm-color-secondary-fixed-dim: #ccc2dc;
183
+ --wm-color-secondary-fixed: #e8def8;
184
+ --wm-color-secondary-container: #4a4458;
185
+ --wm-color-secondary: #ccc2dc;
186
+ --wm-color-on-primary-fixed-variant: #4f378b;
187
+ --wm-color-on-primary-fixed: #21005d;
188
+ --wm-color-on-primary-container: #eaddff;
189
+ --wm-color-on-primary: #381e72;
190
+ --wm-color-primary-fixed-dim: #d0bcff;
191
+ --wm-color-primary-fixed: #eaddff;
192
+ --wm-color-primary-container: #4f378b;
193
+ --wm-color-primary: #d0bcfe;
194
+ }
138
195
  }
139
196
  /*=========
140
197
  css variables doesn't support by less functions to generate lighten, darken, fade, etc.
@@ -427,60 +484,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
427
484
  --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
428
485
  --wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
429
486
  }
430
- @media (prefers-color-scheme: dark) {
431
- :root {
432
- --wm-color-background: #141218;
433
- --wm-color-error: #f2b8b5;
434
- --wm-color-error-container: #8c1d18;
435
- --wm-color-inverse-on-surface: #322f35;
436
- --wm-color-inverse-primary: #6750a4;
437
- --wm-color-inverse-surface: #e6e0e9;
438
- --wm-color-on-background: #e6e0e9;
439
- --wm-color-on-error: #601410;
440
- --wm-color-on-error-container: #f9dedc;
441
- --wm-color-on-primary: #381e72;
442
- --wm-color-on-primary-container: #eaddff;
443
- --wm-color-on-primary-fixed: #21005d;
444
- --wm-color-on-primary-fixed-variant: #4f378b;
445
- --wm-color-on-secondary: #332d41;
446
- --wm-color-on-secondary-container: #e8def8;
447
- --wm-color-on-secondary-fixed: #1d192b;
448
- --wm-color-on-secondary-fixed-variant: #4a4458;
449
- --wm-color-on-surface: #e6e0e9;
450
- --wm-color-on-surface-variant: #cac4d0;
451
- --wm-color-on-tertiary: #492532;
452
- --wm-color-on-tertiary-container: #ffd8e4;
453
- --wm-color-on-tertiary-fixed: #31111d;
454
- --wm-color-on-tertiary-fixed-variant: #633b48;
455
- --wm-color-on-success: #1d192b;
456
- --wm-color-outline: #938f99;
457
- --wm-color-outline-variant: #49454f;
458
- --wm-color-primary: #d0bcfe;
459
- --wm-color-primary-container: #4f378b;
460
- --wm-color-primary-fixed: #eaddff;
461
- --wm-color-primary-fixed-dim: #d0bcff;
462
- --wm-color-scrim: #000000;
463
- --wm-color-secondary: #ccc2dc;
464
- --wm-color-secondary-container: #4a4458;
465
- --wm-color-secondary-fixed: #e8def8;
466
- --wm-color-secondary-fixed-dim: #ccc2dc;
467
- --wm-color-shadow: #ffffff;
468
- --wm-color-surface: #141218;
469
- --wm-color-surface-bright: #3b383e;
470
- --wm-color-surface-container: #211f26;
471
- --wm-color-surface-container-high: #2b2930;
472
- --wm-color-surface-container-highest: #36343b;
473
- --wm-color-surface-container-low: #1d1b20;
474
- --wm-color-surface-container-lowest: #0f0d13;
475
- --wm-color-surface-dim: #141218;
476
- --wm-color-surface-tint: #d0bcff;
477
- --wm-color-surface-variant: #49454f;
478
- --wm-color-tertiary: #efb8c8;
479
- --wm-color-tertiary-container: #633b48;
480
- --wm-color-tertiary-fixed: #ffd8e4;
481
- --wm-color-tertiary-fixed-dim: #efb8c8;
482
- }
483
- }
484
487
  /*=========
485
488
  css variables doesn't support by less functions to generate lighten, darken, fade, etc.
486
489
  We are using color-mix function of css variables.