@brandup/ui-kit 1.0.8 → 1.0.10

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 (8) hide show
  1. package/README.md +51 -2
  2. package/build/parse-less-vars.cjs +18 -0
  3. package/package.json +3 -1
  4. package/source/adaptive.less +2 -8
  5. package/source/common.less +31 -33
  6. package/source/inputs.less +31 -31
  7. package/source/styles.less +2 -1
  8. package/vars.less +88 -0
package/README.md CHANGED
@@ -78,8 +78,6 @@ Default root styles for `<svg>` tag.
78
78
 
79
79
  ```
80
80
  --svg-size: 20px;
81
- --svg-width: var(--svg-size);
82
- --svg-height: var(--svg-size);
83
81
  --svg-fill: var(--text-color);
84
82
  --svg-stroke: none;
85
83
  ```
@@ -149,3 +147,54 @@ PopupManager.open(DOM.getById("popup3"));
149
147
  ```
150
148
 
151
149
  If the initiator is specified, then when the popup is opened again, it will be closed.
150
+
151
+ ### Style variables
152
+
153
+ Сreate uikit.vars.less in the root of the project.
154
+
155
+ Connecting script to webpack:
156
+
157
+ ```JS
158
+ const parseLessVars = require("@brandup/ui-kit/build/parse-less-vars.cjs");
159
+ ```
160
+
161
+ Getting variables from a Less file.
162
+
163
+ The function takes the path to the Less file (string) and returns an object with variables in the format:
164
+
165
+ The key is the name of a variable with the @ symbol (for example, @MainColor).
166
+ Value — a string with the value of a variable from a file (for example, #ff0000).
167
+
168
+ Example of a Less file:
169
+
170
+ ```Less
171
+ @main-color: #ff0000;
172
+ @secondary-color: rgba(0, 0, 0, 0.5);
173
+ @font-size: 16px;
174
+ ```
175
+
176
+ Result of parseLessVars:
177
+
178
+ ```JS
179
+ {
180
+ '@main-color': '#ff0000',
181
+ '@secondary-color': 'rgba(0,0,0,0.5)',
182
+ '@font-size': '16px'
183
+ }
184
+ ```
185
+
186
+ ```JS
187
+ const variables = parseLessVars('path/to/your/variables.less');
188
+ ```
189
+
190
+ if no parameter has been set, the function will refer to the uikit.vars.less into root directory.
191
+
192
+ Usage in the less-loader configuration.
193
+
194
+ ```JS
195
+ {
196
+ lessOption: {
197
+ modifyVars: parseLessVars()
198
+ }
199
+ }
200
+ ```
package/build/parse-less-vars.cjs ADDED
@@ -0,0 +1,18 @@
1
+ const fs = require("fs");
2
+
3
+ function parseLessVars(filePath) {
4
+ if (!filePath) {
5
+ filePath = 'uikit.vars.less';
6
+ }
7
+
8
+ const content = fs.readFileSync(filePath, 'utf-8');
9
+
10
+ let variables = {};
11
+
12
+ content.split('\n').forEach(line => {
13
+ const match = line.match(/@([\w-]+)\s*:\s*(.+);/);
14
+ if (match) variables[`@${match[1]}`] = match[2].trim();
15
+ });
16
+ return variables;
17
+ }
18
+ module.exports = parseLessVars;
package/package.json CHANGED
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "type": "module",
24
24
  "license": "Apache-2.0",
25
- "version": "1.0.8",
25
+ "version": "1.0.10",
26
26
  "main": "source/index.ts",
27
27
  "types": "source/index.ts",
28
28
  "dependencies": {
@@ -30,6 +30,8 @@
30
30
  },
31
31
  "files": [
32
32
  "source",
33
+ "build",
34
+ "vars.less",
33
35
  "README.md"
34
36
  ]
35
37
  }
package/source/adaptive.less CHANGED
@@ -1,10 +1,4 @@
1
- @adaptive-desktop-small: 1650px;
2
- @adaptive-notebook: 1550px;
3
- @adaptive-notebook-small: 1370px;
4
- @adaptive-tablet: 1030px;
5
- @adaptive-tablet-small: 850px;
6
- @adaptive-mobile: 500px;
7
- @adaptive-mobile-small: 370px;
1
+ @import "../vars.less";
8
2
 
9
3
  .adaptive-desktop-small(@rules) {
10
4
  @media all and (max-width: @adaptive-desktop-small) {
@@ -55,7 +49,7 @@
55
49
  }
56
50
 
57
51
  .adaptive-mobile-small(@rules) {
58
- @media all and (max-width: var(-adaptive-mobile-small)) {
52
+ @media all and (max-width: @adaptive-mobile-small) {
59
53
  @rules();
60
54
  }
61
55
  }
package/source/common.less CHANGED
@@ -1,45 +1,43 @@
1
1
  :root {
2
2
  // body
3
- --main-background: #fff;
4
- --font-size: 14px;
5
- --font-family: system-ui, 'Segoe UI', Helvetica, 'Gill Sans', 'Verdana', 'Arial', sans-serif;
6
- --font-weight: 400;
7
- --line-height: 130%;
8
- --text-color: #222;
3
+ --main-background: @main-background;
4
+ --font-size: @font-size;
5
+ --font-family:@font-family;
6
+ --font-weight: @font-weight;
7
+ --line-height: @line-height;
8
+ --text-color: @text-color;
9
9
 
10
10
  // headers
11
- --h-line-height: 130%;
12
- --h1-font-size: 56px;
13
- --h1-font-weight: 600;
14
- --h2-font-size: 50px;
15
- --h2-font-weight: 600;
16
- --h3-font-size: 28px;
17
- --h3-font-weight: 600;
18
- --h4-font-size: 22px;
19
- --h4-font-weight: 600;
20
- --h5-font-size: 18px;
21
- --h5-font-weight: 600;
11
+ --h-line-height: @h-line-height;
12
+ --h1-font-size: @h1-font-size;
13
+ --h1-font-weight: @h1-font-weight;
14
+ --h2-font-size: @h2-font-size;
15
+ --h2-font-weight: @h2-font-weight;
16
+ --h3-font-size: @h3-font-size;
17
+ --h3-font-weight: @h3-font-weight;
18
+ --h4-font-size: @h4-font-size;
19
+ --h4-font-weight: @h4-font-weight;
20
+ --h5-font-size: @h5-font-size;
21
+ --h5-font-weight: @h5-font-weight;
22
22
 
23
23
  // content-width
24
- --content-max-width: 1280px; // максимальная ширина контентной области
25
- --content-min-width: 320px; // минимальная ширина контентной области
26
- --content-padding-lr: 40px; // отступы контентной области слева и справа до краёв браузера
24
+ --content-max-width: @content-max-width; // максимальная ширина контентной области
25
+ --content-min-width: @content-min-width; // минимальная ширина контентной области
26
+ --content-padding-lr: @content-padding-lr; // отступы контентной области слева и справа до краёв браузера
27
27
 
28
28
  // svg
29
- --svg-size: 20px;
30
- --svg-width: var(--svg-size);
31
- --svg-height: var(--svg-size);
32
- --svg-fill: var(--text-color);
33
- --svg-stroke: none;
29
+ --svg-size: @svg-size;
30
+ --svg-fill: @svg-fill;
31
+ --svg-stroke: @svg-stroke;
34
32
 
35
33
  // popup
36
34
 
37
- --popup-fill: var(--main-background);
38
- --popup-border-style: solid;
39
- --popup-border-width: 1px;
40
- --popup-border-color: #aaa;
41
- --popup-border-radius: 5px;
42
- --popup-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
35
+ --popup-fill: @popup-fill;
36
+ --popup-border-style: @popup-border-style;
37
+ --popup-border-width: @popup-border-width;
38
+ --popup-border-color: @popup-border-color;
39
+ --popup-border-radius: @popup-border-radius;
40
+ --popup-box-shadow: @popup-box-shadow;
43
41
  }
44
42
 
45
43
  // Body styles
@@ -99,8 +97,8 @@ h5 {
99
97
 
100
98
  svg {
101
99
  display: block;
102
- width: var(--svg-width);
103
- height: var(--svg-height);
100
+ width: var(--svg-size);
101
+ height: var(--svg-size);
104
102
  fill: var(--svg-fill);
105
103
  stroke: var(--svg-stroke);
106
104
  }
package/source/inputs.less CHANGED
@@ -7,49 +7,49 @@
7
7
 
8
8
  :root {
9
9
  // placeholder
10
- --placeholder-font-weight: inherit;
11
- --placeholder-font-style: inherit;
12
- --placeholder-color: inherit;
10
+ --placeholder-font-weight: @placeholder-font-weight;
11
+ --placeholder-font-style: @placeholder-font-style;
12
+ --placeholder-color: @placeholder-color;
13
13
 
14
14
  // border
15
- --input-border-width: 1px;
16
- --input-border-color: #aaa;
17
- --input-border-type: solid;
18
- --input-border-radius: 0;
19
- --input-fill: #fff;
15
+ --input-border-width: @input-border-width;
16
+ --input-border-color: @input-border-color;
17
+ --input-border-type: @input-border-type;
18
+ --input-border-radius: @input-border-radius;
19
+ --input-fill: @input-fill;
20
20
 
21
21
  // size
22
- --input-width: auto;
23
- --input-height: 42px;
24
- --input-padding-lr: 13px;
25
- --textarea-size: 100px;
22
+ --input-width: @input-width;
23
+ --input-height: @input-height;
24
+ --input-padding-lr: @input-padding-lr;
25
+ --textarea-size: @textarea-size;
26
26
 
27
27
  // font
28
- --input-color: var(--text-color);
29
- --input-font-size: inherit;
30
- --input-font-weight: inherit;
31
- --input-font-style: inherit;
28
+ --input-color: @input-color;
29
+ --input-font-size: @input-font-size;
30
+ --input-font-weight: @input-font-weight;
31
+ --input-font-style: @input-font-style;
32
32
 
33
- --hover--input-border-color: #666;
34
- --hover--input-fill: var(--input-fill);
35
- --hover--input-color: var(--input-color);
33
+ --hover--input-border-color: @hover-input-border-color;
34
+ --hover--input-fill: @hover-input-fill;
35
+ --hover--input-color: @hover-input-color;
36
36
 
37
- --focus--input-border-color: #222;
38
- --focus--input-fill: var(--hover--input-fill);
39
- --focus--input-color: var(--hover--input-color);
37
+ --focus--input-border-color: @focus-input-border-color;
38
+ --focus--input-fill: @focus-input-fill;
39
+ --focus--input-color: @focus-input-color;
40
40
 
41
- --disabled--input-border-color: #aaa;
42
- --disabled--input-fill: #eee;
43
- --disabled--input-color: var(--input-color);
41
+ --disabled--input-border-color: @disabled-input-border-color;
42
+ --disabled--input-fill: @disabled-input-fill;
43
+ --disabled--input-color: @disabled-input-color;
44
44
 
45
- --invalid--input-border-color: red;
46
- --invalid--input-fill: var(--input-fill);
47
- --invalid--input-color: var(--input-color);
45
+ --invalid--input-border-color: @invalid-input-border-color;
46
+ --invalid--input-fill: @invalid-input-fill;
47
+ --invalid--input-color: @invalid-input-color;
48
48
 
49
49
  // toggler
50
- --toggler-height: 30px;
51
- --toggler-padding: 3px;
52
- --toggler-round-fill: var(--focus--input-border-color); // цвет круглешка
50
+ --toggler-height: @toggler-height;
51
+ --toggler-padding: @toggler-padding;
52
+ --toggler-round-fill: @toggler-round-fill; // цвет круглешка
53
53
  }
54
54
 
55
55
  input,
package/source/styles.less CHANGED
@@ -1,3 +1,4 @@
1
1
  @import "reset.less";
2
2
  @import "common.less";
3
- @import "inputs.less";
3
+ @import "inputs.less";
4
+ @import "../vars.less";
package/vars.less ADDED
@@ -0,0 +1,88 @@
1
+ // adaptive
2
+
3
+ @adaptive-desktop-small: 1650px;
4
+ @adaptive-notebook: 1550px;
5
+ @adaptive-notebook-small: 1370px;
6
+ @adaptive-tablet: 1030px;
7
+ @adaptive-tablet-small: 850px;
8
+ @adaptive-mobile: 500px;
9
+ @adaptive-mobile-small: 370px;
10
+
11
+ // common
12
+
13
+ @main-background: #fff;
14
+
15
+ @font-size: 14px;
16
+ @font-family: system-ui, 'Segoe UI', Helvetica, 'Gill Sans', 'Verdana', 'Arial', sans-serif;
17
+ @font-weight: 400;
18
+ @line-height: 130%;
19
+ @text-color: #222;
20
+
21
+ @h-line-height: 130%;
22
+ @h1-font-size: 56px;
23
+ @h1-font-weight: 600;
24
+ @h2-font-size: 50px;
25
+ @h2-font-weight: 600;
26
+ @h3-font-size: 28px;
27
+ @h3-font-weight: 600;
28
+ @h4-font-size: 22px;
29
+ @h4-font-weight: 600;
30
+ @h5-font-size: 18px;
31
+ @h5-font-weight: 600;
32
+
33
+ @content-max-width: 1280px;
34
+ @content-min-width: 320px;
35
+ @content-padding-lr: 40px;
36
+
37
+ @svg-size: 20px;
38
+ @svg-fill: @text-color;
39
+ @svg-stroke: none;
40
+
41
+ @popup-fill: @main-background;
42
+ @popup-border-style: solid;
43
+ @popup-border-width: 1px;
44
+ @popup-border-color: #aaa;
45
+ @popup-border-radius: 5px;
46
+ @popup-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
47
+
48
+ // inputs
49
+
50
+ @placeholder-font-weight: inherit;
51
+ @placeholder-font-style: inherit;
52
+ @placeholder-color: inherit;
53
+
54
+ @input-border-width: 1px;
55
+ @input-border-color: #aaa;
56
+ @input-border-type: solid;
57
+ @input-border-radius: 0;
58
+ @input-fill: #fff;
59
+
60
+ @input-width: auto;
61
+ @input-height: 42px;
62
+ @input-padding-lr: 13px;
63
+ @textarea-size: 100px;
64
+
65
+ @input-color: @text-color;
66
+ @input-font-size: inherit;
67
+ @input-font-weight: inherit;
68
+ @input-font-style: inherit;
69
+
70
+ @hover-input-border-color: #666;
71
+ @hover-input-fill: @input-fill;
72
+ @hover-input-color: @input-color;
73
+
74
+ @focus-input-border-color: #222;
75
+ @focus-input-fill: @input-fill;
76
+ @focus-input-color: @input-color;
77
+
78
+ @disabled-input-border-color: #aaa;
79
+ @disabled-input-fill: #eee;
80
+ @disabled-input-color: @input-color;
81
+
82
+ @invalid-input-border-color: red;
83
+ @invalid-input-fill: @input-fill;
84
+ @invalid-input-color: @input-color;
85
+
86
+ @toggler-height: 30px;
87
+ @toggler-padding: 3px;
88
+ @toggler-round-fill: @focus-input-border-color;