@modul/mbui 0.0.12-beta-pv-53036-82db3f95 → 0.0.12-beta-pv-53036-f7dccc0b

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.12-beta-pv-53036-82db3f95",
3
+ "version": "0.0.12-beta-pv-53036-f7dccc0b",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -3,157 +3,166 @@
3
3
  @tailwind utilities;
4
4
 
5
5
  @layer base {
6
-
7
- @font-face {
8
- font-weight: 100 900;
9
- font-family: "Roboto";
10
- font-style: normal;
11
- font-stretch: 75% 100%;
12
- src: url("../fonts/Roboto.woff2") format("woff2");
13
- font-display: swap;
14
- }
6
+ @font-face {
7
+ font-weight: 100 900;
8
+ font-family: 'Roboto';
9
+ font-style: normal;
10
+ font-stretch: 75% 100%;
11
+ src: url('../fonts/Roboto.woff2') format('woff2');
12
+ font-display: swap;
13
+ }
14
+
15
+ @font-face {
16
+ font-weight: 100 900;
17
+ font-family: 'Roboto';
18
+ font-style: italic;
19
+ font-stretch: 75% 100%;
20
+ src: url('../fonts/Roboto-Italic.woff2') format('woff2');
21
+ font-display: swap;
22
+ }
23
+
24
+ body {
25
+ min-height: 100vh;
26
+ /* mobile viewport bug fix */
27
+ @supports (-webkit-touch-callout: none) {
28
+ min-height: -webkit-fill-available;
29
+ }
30
+ }
15
31
 
16
- @font-face {
17
- font-weight: 100 900;
18
- font-family: "Roboto";
19
- font-style: italic;
20
- font-stretch: 75% 100%;
21
- src: url("../fonts/Roboto-Italic.woff2") format("woff2");
22
- font-display: swap;
23
- }
24
-
25
- :root {
26
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
27
-
28
- --cl-white: #ffffff;
29
- --cl-dark: #000000;
30
-
31
- /* Синий */
32
- --cl-blue-1: #253c77;
33
- --cl-blue-2: #4971d0;
34
- --cl-blue-3: #6b91eb;
35
- --cl-blue-4: #81a5f9;
36
- --cl-blue-5: #a7c0fb;
37
- --cl-blue-6: #d2ddfa;
38
- --cl-blue-7: #f2f6ff;
39
-
40
- /* Серый */
41
- --cl-graphite-1: #222733;
42
- --cl-graphite-2: #464c59;
43
- --cl-graphite-3: #777c87;
44
- --cl-graphite-4: #9b9fa8;
45
- --cl-graphite-5: #cbcdd1;
46
- --cl-graphite-6: #e6e7e9;
47
- --cl-graphite-7: #f5f5f6;
48
-
49
- /* Зеленый */
50
- --cl-green-1: #5e8c00;
51
- --cl-green-2: #6ca300;
52
- --cl-green-3: #88bd1f;
53
- --cl-green-4: #a4d73e;
54
- --cl-green-5: #c0eb69;
55
- --cl-green-6: #d4f296;
56
- --cl-green-7: #eefad4;
57
-
58
- /* Желтый */
59
- --cl-yellow-1: #b79310;
60
- --cl-yellow-2: #d2aa0f;
61
- --cl-yellow-3: #e8c113;
62
- --cl-yellow-4: #efd04e;
63
- --cl-yellow-5: #f5de88;
64
- --cl-yellow-6: #fae6aa;
65
- --cl-yellow-7: #fcf2ce;
66
-
67
- /* Красный */
68
- --cl-red-1: #a61d1d;
69
- --cl-red-2: #bd2c2c;
70
- --cl-red-3: #d43d3d;
71
- --cl-red-4: #e36868;
72
- --cl-red-5: #f19494;
73
- --cl-red-6: #f9c1bd;
74
- --cl-red-7: #ffe9e9;
75
-
76
- --base: var(--cl-graphite-1);
77
- --primary: var(--cl-blue-2);
78
- --primary-light: var(--cl-blue-7);
79
- --success: var(--cl-green-3);
80
- --success-light: var(--cl-green-7);
81
- --light: var(--cl-graphite-3);
82
- --dark: var(--cl-graphite-2);
83
- --disabled: var(--cl-graphite-4);
84
- --bg-light: var(--cl-graphite-7);
85
- --warning: var(--cl-yellow-2);
86
- --warning-light: var(--cl-yellow-7);
87
- --critical: var(--cl-red-4);
88
- --critical-light: var(--cl-red-7);
89
- /* --text-quaternary:; */
90
-
91
- --page-bg: var(--cl-white);
92
-
93
-
94
- /* ЦВЕТ КНОПОК */
95
- /* =========================================== */
96
- --btn-primary: var(--cl-white);
97
- --btn-primary-bg: var(--cl-blue-2);
98
- --btn-primary-hover-bg: var(--cl-blue-3);
99
- --btn-primary-focus-bg: var(--cl-blue-1);
100
- --btn-primary-active-bg: var(--cl-blue-1);
101
-
102
- --btn-success: var(--cl-white);
103
- --btn-success-bg: var(--cl-green-3);
104
- --btn-success-hover-bg: var(--cl-green-4);
105
- --btn-success-focus-bg: var(--cl-green-1);
106
- --btn-success-active-bg: var(--cl-green-1);
107
-
108
- --btn-secondary: var(--cl-graphite-2);
109
- --btn-secondary-bg: #EDEEEF;
110
- --btn-secondary-hover-bg: #E4E5E7;
111
- --btn-secondary-focus-bg: #E4E5E7;
112
- --btn-secondary-active-bg: #DCDCDE;
113
-
114
- --btn-ghost: var(--cl-graphite-2);
115
- --btn-ghost-bg: var(--cl-white);
116
- --btn-ghost-hover-bg: #F6F6F7;
117
- --btn-ghost-focus-bg: #F6F6F7;
118
- --btn-ghost-active-bg: #EDEEEF;
119
- --btn-primary-outline: var(--cl-blue-2);
120
- --btn-primary-outline-bg: var(--cl-white);
121
- --btn-primary-outline-hover-bg: var(--cl-blue-3);
122
- --btn-primary-outline-focus-bg: var(--cl-blue-3);
123
- --btn-primary-outline-active-bg: var(--cl-blue-1);
124
-
125
- --btn-txt-primary: var(--cl-blue-2);
126
- --btn-txt-primary-hover: var(--cl-blue-3);
127
- --btn-txt-primary-focus: var(--cl-blue-3);
128
- --btn-txt-primary-active: var(--cl-blue-1);
129
- /* =========================================== */
130
- /* ЦВЕТ КНОПОК */
131
-
132
-
133
- /* ЦВЕТ ПОЛЯ ВВОДА */
134
- /* =========================================== */
135
-
136
-
137
- /* =========================================== */
138
- /* ЦВЕТ ПОЛЯ ВВОДА */
139
-
140
-
141
- /* BORDER */
142
- /* =========================================== */
143
- --border-color: var(--cl-graphite-5);
144
- --border-radius-sm: 4px;
145
- --border-radius-md: 8px;
146
- /* =========================================== */
147
- /* BORDER */
148
-
149
- /* SHADOWS */
150
- /* =========================================== */
151
- --shadow-1: 0px 4px 16px rgba(36, 48, 54, 0.08);
152
- --shadow-2: 0 2px 10px rgba(36, 48, 54, 0.12);
153
- /* =========================================== */
154
- /* SHADOWS */
155
- }
156
-
157
-
158
- .dark {}
159
- }
32
+ html {
33
+ @supports (-webkit-touch-callout: none) {
34
+ min-height: -webkit-fill-available;
35
+ }
36
+ }
37
+ :root {
38
+ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans',
39
+ sans-serif;
40
+
41
+ --cl-white: #ffffff;
42
+ --cl-dark: #000000;
43
+
44
+ /* Синий */
45
+ --cl-blue-1: #253c77;
46
+ --cl-blue-2: #4971d0;
47
+ --cl-blue-3: #6b91eb;
48
+ --cl-blue-4: #81a5f9;
49
+ --cl-blue-5: #a7c0fb;
50
+ --cl-blue-6: #d2ddfa;
51
+ --cl-blue-7: #f2f6ff;
52
+
53
+ /* Серый */
54
+ --cl-graphite-1: #222733;
55
+ --cl-graphite-2: #464c59;
56
+ --cl-graphite-3: #777c87;
57
+ --cl-graphite-4: #9b9fa8;
58
+ --cl-graphite-5: #cbcdd1;
59
+ --cl-graphite-6: #e6e7e9;
60
+ --cl-graphite-7: #f5f5f6;
61
+
62
+ /* Зеленый */
63
+ --cl-green-1: #5e8c00;
64
+ --cl-green-2: #6ca300;
65
+ --cl-green-3: #88bd1f;
66
+ --cl-green-4: #a4d73e;
67
+ --cl-green-5: #c0eb69;
68
+ --cl-green-6: #d4f296;
69
+ --cl-green-7: #eefad4;
70
+
71
+ /* Желтый */
72
+ --cl-yellow-1: #b79310;
73
+ --cl-yellow-2: #d2aa0f;
74
+ --cl-yellow-3: #e8c113;
75
+ --cl-yellow-4: #efd04e;
76
+ --cl-yellow-5: #f5de88;
77
+ --cl-yellow-6: #fae6aa;
78
+ --cl-yellow-7: #fcf2ce;
79
+
80
+ /* Красный */
81
+ --cl-red-1: #a61d1d;
82
+ --cl-red-2: #bd2c2c;
83
+ --cl-red-3: #d43d3d;
84
+ --cl-red-4: #e36868;
85
+ --cl-red-5: #f19494;
86
+ --cl-red-6: #f9c1bd;
87
+ --cl-red-7: #ffe9e9;
88
+
89
+ --base: var(--cl-graphite-1);
90
+ --primary: var(--cl-blue-2);
91
+ --primary-light: var(--cl-blue-7);
92
+ --success: var(--cl-green-3);
93
+ --success-light: var(--cl-green-7);
94
+ --light: var(--cl-graphite-3);
95
+ --dark: var(--cl-graphite-2);
96
+ --disabled: var(--cl-graphite-4);
97
+ --bg-light: var(--cl-graphite-7);
98
+ --warning: var(--cl-yellow-2);
99
+ --warning-light: var(--cl-yellow-7);
100
+ --critical: var(--cl-red-4);
101
+ --critical-light: var(--cl-red-7);
102
+ /* --text-quaternary:; */
103
+
104
+ --page-bg: var(--cl-white);
105
+
106
+ /* ЦВЕТ КНОПОК */
107
+ /* =========================================== */
108
+ --btn-primary: var(--cl-white);
109
+ --btn-primary-bg: var(--cl-blue-2);
110
+ --btn-primary-hover-bg: var(--cl-blue-3);
111
+ --btn-primary-focus-bg: var(--cl-blue-1);
112
+ --btn-primary-active-bg: var(--cl-blue-1);
113
+
114
+ --btn-success: var(--cl-white);
115
+ --btn-success-bg: var(--cl-green-3);
116
+ --btn-success-hover-bg: var(--cl-green-4);
117
+ --btn-success-focus-bg: var(--cl-green-1);
118
+ --btn-success-active-bg: var(--cl-green-1);
119
+
120
+ --btn-secondary: var(--cl-graphite-2);
121
+ --btn-secondary-bg: #edeeef;
122
+ --btn-secondary-hover-bg: #e4e5e7;
123
+ --btn-secondary-focus-bg: #e4e5e7;
124
+ --btn-secondary-active-bg: #dcdcde;
125
+
126
+ --btn-ghost: var(--cl-graphite-2);
127
+ --btn-ghost-bg: var(--cl-white);
128
+ --btn-ghost-hover-bg: #f6f6f7;
129
+ --btn-ghost-focus-bg: #f6f6f7;
130
+ --btn-ghost-active-bg: #edeeef;
131
+ --btn-primary-outline: var(--cl-blue-2);
132
+ --btn-primary-outline-bg: var(--cl-white);
133
+ --btn-primary-outline-hover-bg: var(--cl-blue-3);
134
+ --btn-primary-outline-focus-bg: var(--cl-blue-3);
135
+ --btn-primary-outline-active-bg: var(--cl-blue-1);
136
+
137
+ --btn-txt-primary: var(--cl-blue-2);
138
+ --btn-txt-primary-hover: var(--cl-blue-3);
139
+ --btn-txt-primary-focus: var(--cl-blue-3);
140
+ --btn-txt-primary-active: var(--cl-blue-1);
141
+ /* =========================================== */
142
+ /* ЦВЕТ КНОПОК */
143
+
144
+ /* ЦВЕТ ПОЛЯ ВВОДА */
145
+ /* =========================================== */
146
+
147
+ /* =========================================== */
148
+ /* ЦВЕТ ПОЛЯ ВВОДА */
149
+
150
+ /* BORDER */
151
+ /* =========================================== */
152
+ --border-color: var(--cl-graphite-5);
153
+ --border-radius-sm: 4px;
154
+ --border-radius-md: 8px;
155
+ /* =========================================== */
156
+ /* BORDER */
157
+
158
+ /* SHADOWS */
159
+ /* =========================================== */
160
+ --shadow-1: 0px 4px 16px rgba(36, 48, 54, 0.08);
161
+ --shadow-2: 0 2px 10px rgba(36, 48, 54, 0.12);
162
+ /* =========================================== */
163
+ /* SHADOWS */
164
+ }
165
+
166
+ .dark {
167
+ }
168
+ }