@wavemaker/foundation-css 12.0.0-next.45021 → 12.0.0-next.45027

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.
@@ -1,74 +1,79 @@
1
1
  /**--import css variables file--**/
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
2
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");
3
6
  :root {
4
- /**--Colors--**/
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;
10
+ --wm-border-style: solid;
5
11
  --wm-color-primary: #65558F;
6
- --wm-color-on-primary: #FFFFFF;
7
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;
8
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;
9
21
  --wm-color-secondary: #625B71;
10
- --wm-color-on-secondary: #FFFFFF;
11
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;
12
27
  --wm-color-on-secondary-container: #1D192B;
28
+ --wm-color-on-secondary-fixed: #1D192B;
29
+ --wm-color-on-secondary-fixed-variant: #4A4458;
13
30
  --wm-color-tertiary: #7D5260;
14
- --wm-color-on-tertiary: #FFFFFF;
15
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;
16
35
  --wm-color-on-tertiary-container: #31111D;
36
+ --wm-color-on-tertiary-fixed: #31111D;
37
+ --wm-color-on-tertiary-fixed-variant: #633B48;
17
38
  --wm-color-success: #0abf00;
18
- --wm-color-on-success: #ffffff;
19
39
  --wm-color-success-container: #9fffb2;
40
+ --wm-color-on-success: #ffffff;
20
41
  --wm-color-on-success-container: #1d1d1d;
21
42
  --wm-color-info: #00c8ff;
22
- --wm-color-on-info: #232323;
23
43
  --wm-color-info-container: #a5eaff;
44
+ --wm-color-on-info: #232323;
24
45
  --wm-color-on-info-container: #191919;
25
46
  --wm-color-warning: #ffae00;
26
- --wm-color-on-warning: #2c2c2c;
27
47
  --wm-color-warning-container: #ffe495;
48
+ --wm-color-on-warning: #2c2c2c;
28
49
  --wm-color-on-warning-container: #1b1b1b;
29
50
  --wm-color-error: #B3261E;
30
- --wm-color-on-error: #FFFFFF;
31
51
  --wm-color-error-container: #F9DEDC;
52
+ --wm-color-on-error: #FFFFFF;
32
53
  --wm-color-on-error-container: #410E0B;
33
54
  --wm-color-background: #FEF7FF;
34
55
  --wm-color-on-background: #1D1B20;
35
56
  --wm-color-surface: #FEF7FF;
36
- --wm-color-on-surface: #1D1B20;
37
57
  --wm-color-surface-variant: #E7E0EC;
38
- --wm-color-on-surface-variant: #49454F;
39
- --wm-color-inverse-surface: #322F35;
40
- --wm-color-inverse-on-surface: #F5EFF7;
41
- --wm-color-inverse-primary: #D0BCFF;
42
- --wm-color-primary-fixed: #EADDFF;
43
- --wm-color-on-primary-fixed: #21005D;
44
- --wm-color-primary-fixed-dim: #D0BCFF;
45
- --wm-color-on-primary-fixed-variant: #4F378B;
46
- --wm-color-secondary-fixed: #E8DEF8;
47
- --wm-color-on-secondary-fixed: #1D192B;
48
- --wm-color-secondary-fixed-dim: #CCC2DC;
49
- --wm-color-on-secondary-fixed-variant: #4A4458;
50
- --wm-color-tertiary-fixed: #FFD8E4;
51
- --wm-color-on-tertiary-fixed: #31111D;
52
- --wm-color-tertiary-fixed-dim: #EFB8C8;
53
- --wm-color-on-tertiary-fixed-variant: #633B48;
54
- --wm-color-surface-tint: #6750A4;
55
- --wm-color-surface-dim: #DED8E1;
56
58
  --wm-color-surface-bright: #FEF7FF;
57
- --wm-color-surface-container-lowest: #FFFFFF;
59
+ --wm-color-surface-dim: #DED8E1;
60
+ --wm-color-surface-tint: #6750A4;
61
+ --wm-color-surface-container: #FFFFFF;
58
62
  --wm-color-surface-container-low: #F7F2FA;
59
- --wm-color-surface-container: #F3EDF7;
63
+ --wm-color-surface-container-lowest: #FFFFFF;
60
64
  --wm-color-surface-container-high: #ECE6F0;
61
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;
62
71
  --wm-color-outline: #79747E;
63
72
  --wm-color-outline-variant: #CAC4D0;
64
73
  --wm-color-shadow: #000000;
65
74
  --wm-color-scrim: #000000;
66
75
  --wm-color-white: #FFFFFF;
67
76
  --wm-color-black: #000000;
68
- /**--font--**/
69
- --wm-font-family-brand: Roboto, var(--wm-font-family-backup);
70
- --wm-font-family-plain: Roboto, var(--wm-font-family-backup);
71
- --wm-font-family-backup: Arial, Helvetica, sans-serif;
72
77
  --wm-font-weight-thin: 100;
73
78
  --wm-font-weight-extralight: 200;
74
79
  --wm-font-weight-light: 300;
@@ -78,7 +83,9 @@
78
83
  --wm-font-weight-bold: 700;
79
84
  --wm-font-weight-extrabold: 800;
80
85
  --wm-font-weight-black: 900;
81
- /**--border radius--**/
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;
82
89
  --wm-radius-none: 0px;
83
90
  --wm-radius-xxs: 2px;
84
91
  --wm-radius-xs: 4px;
@@ -89,36 +96,45 @@
89
96
  --wm-radius-xxl: 32px;
90
97
  --wm-radius-pill: 1000px;
91
98
  --wm-radius-circle: 50%;
92
- /*border*/
93
- --wm-border-width: 1px;
94
- --wm-border-style: solid;
95
- --wm-border-color: var(--wm-color-outline-variant);
96
- --wm-border-color-translucent: rgba(0, 0, 0, 0.175);
97
- --wm-rule-space: 0.25rem;
98
- --wm-space-0: calc(var(--wm-rule-space) * 0);
99
- --wm-space-1: calc(var(--wm-rule-space) * 1);
100
- --wm-space-2: calc(var(--wm-rule-space) * 2);
101
- --wm-space-3: calc(var(--wm-rule-space) * 3);
102
- --wm-space-4: calc(var(--wm-rule-space) * 4);
103
- --wm-space-5: calc(var(--wm-rule-space) * 5);
104
- --wm-space-6: calc(var(--wm-rule-space) * 6);
105
- --wm-space-7: calc(var(--wm-rule-space) * 7);
106
- --wm-space-8: calc(var(--wm-rule-space) * 8);
107
- --wm-space-9: calc(var(--wm-rule-space) * 9);
108
- --wm-space-10: calc(var(--wm-rule-space) * 10);
109
- --wm-space-11: calc(var(--wm-rule-space) * 11);
110
- --wm-space-12: calc(var(--wm-rule-space) * 12);
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 */
123
+ --wm-space-12: calc(var(--wm-space-rule) * 12);
124
+ /* 48px */
125
+ --wm-space-rule: 0.25rem;
126
+ /* 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);
111
137
  --wm-spacer: 1rem;
112
- --wm-spacer-0: calc(var(--wm-spacer)*0);
113
- --wm-spacer-1: calc(var(--wm-spacer)*0.25);
114
- --wm-spacer-2: calc(var(--wm-spacer)*0.5);
115
- --wm-spacer-3: calc(var(--wm-spacer)*1);
116
- --wm-spacer-4: calc(var(--wm-spacer)*1.6);
117
- --wm-spacer-5: calc(var(--wm-spacer)*2.5);
118
- --wm-spacer-6: calc(var(--wm-spacer)*3.5);
119
- --wm-spacer-7: calc(var(--wm-spacer)*4);
120
- --wm-spacer-8: calc(var(--wm-spacer)*8);
121
- --wm-spacer-9: calc(var(--wm-spacer)*11);
122
138
  }
123
139
  /*=========
124
140
  css variables doesn't support by less functions to generate lighten, darken, fade, etc.