@brandup/ui-kit 1.0.9 → 1.0.11

package/README.md

@@ -2,7 +2,7 @@
 
 ## Installation and use
 
-Install NPM package [@brandup/ui](https://www.npmjs.com/package/@brandup/ui-kit).
+Install NPM package [@brandup/ui-kit](https://www.npmjs.com/package/@brandup/ui-kit).
 
 ```
 npm i @brandup/ui-kit@latest
@@ -147,3 +147,54 @@ PopupManager.open(DOM.getById("popup3"));
 ```
 
 If the initiator is specified, then when the popup is opened again, it will be closed.
+
+### Style variables
+
+Сreate uikit.vars.less in the root of the project.
+
+Connecting script to webpack:
+
+```JS
+const parseLessVars = require("@brandup/ui-kit/build/parse-less-vars.cjs");
+```
+
+Getting variables from a Less file.
+
+The function takes the path to the Less file (string) and returns an object with variables in the format:
+
+The key is the name of a variable with the @ symbol (for example, @MainColor).
+Value — a string with the value of a variable from a file (for example, #ff0000).
+
+Example of a Less file:
+
+```Less
+@main-color: #ff0000;
+@secondary-color: rgba(0, 0, 0, 0.5);
+@font-size: 16px;
+```
+
+Result of parseLessVars:
+
+```JS
+{
+	'@main-color': '#ff0000',
+	'@secondary-color': 'rgba(0,0,0,0.5)',
+	'@font-size': '16px'
+}
+```
+
+```JS
+const variables = parseLessVars('path/to/your/variables.less');
+```
+
+if no parameter has been set, the function will refer to the uikit.vars.less into root directory.
+
+Usage in the less-loader configuration.
+
+```JS
+{
+	lessOption: {
+		modifyVars: parseLessVars()
+	}
+}
+```

package/build/parse-less-vars.cjs

@@ -0,0 +1,18 @@
+const fs = require("fs");
+
+function parseLessVars(filePath) {
+    if (!filePath) {
+        filePath = 'uikit.vars.less';
+    }
+
+    const content = fs.readFileSync(filePath, 'utf-8');
+
+    let variables = {};
+
+    content.split('\n').forEach(line => {
+        const match = line.match(/@([\w-]+)\s*:\s*(.+);/);
+        if (match) variables[`@${match[1]}`] = match[2].trim();
+    });
+    return variables;
+}
+module.exports = parseLessVars;

package/package.json

@@ -22,7 +22,7 @@
   },
   "type": "module",
   "license": "Apache-2.0",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
@@ -30,6 +30,8 @@
   },
   "files": [
     "source",
+    "build",
+    "vars.less",
     "README.md"
   ]
 }

package/source/adaptive.less

@@ -1,10 +1,4 @@
-@adaptive-desktop-small: 1650px;
-@adaptive-notebook: 1550px;
-@adaptive-notebook-small: 1370px;
-@adaptive-tablet: 1030px;
-@adaptive-tablet-small: 850px;
-@adaptive-mobile: 500px;
-@adaptive-mobile-small: 370px;
+@import "../vars.less";
 
 .adaptive-desktop-small(@rules) {
 	@media all and (max-width: @adaptive-desktop-small) {
@@ -55,7 +49,7 @@
 }
 
 .adaptive-mobile-small(@rules) {
-	@media all and (max-width: var(-adaptive-mobile-small)) {
+	@media all and (max-width: @adaptive-mobile-small) {
 		@rules();
 	}
 }

package/source/common.less

@@ -1,43 +1,43 @@
 :root {
 	// body
-	--main-background: #fff;
-	--font-size: 14px;
-	--font-family: system-ui, 'Segoe UI', Helvetica, 'Gill Sans', 'Verdana', 'Arial', sans-serif;
-	--font-weight: 400;
-	--line-height: 130%;
-	--text-color: #222;
+	--main-background: @main-background;
+	--font-size: @font-size;
+	--font-family:@font-family;
+	--font-weight: @font-weight;
+	--line-height: @line-height;
+	--text-color: @text-color;
 
 	// headers
-	--h-line-height: 130%;
-	--h1-font-size: 56px;
-	--h1-font-weight: 600;
-	--h2-font-size: 50px;
-	--h2-font-weight: 600;
-	--h3-font-size: 28px;
-	--h3-font-weight: 600;
-	--h4-font-size: 22px;
-	--h4-font-weight: 600;
-	--h5-font-size: 18px;
-	--h5-font-weight: 600;
+	--h-line-height: @h-line-height;
+	--h1-font-size: @h1-font-size;
+	--h1-font-weight: @h1-font-weight;
+	--h2-font-size: @h2-font-size;
+	--h2-font-weight: @h2-font-weight;
+	--h3-font-size: @h3-font-size;
+	--h3-font-weight: @h3-font-weight;
+	--h4-font-size: @h4-font-size;
+	--h4-font-weight: @h4-font-weight;
+	--h5-font-size: @h5-font-size;
+	--h5-font-weight: @h5-font-weight;
 
 	// content-width
-	--content-max-width: 1280px; // максимальная ширина контентной области
-	--content-min-width: 320px; // минимальная ширина контентной области
-	--content-padding-lr: 40px; // отступы контентной области слева и справа до краёв браузера
+	--content-max-width: @content-max-width; // максимальная ширина контентной области
+	--content-min-width: @content-min-width; // минимальная ширина контентной области
+	--content-padding-lr: @content-padding-lr; // отступы контентной области слева и справа до краёв браузера
 
 	// svg
-	--svg-size: 20px;
-	--svg-fill: var(--text-color);
-	--svg-stroke: none;
+	--svg-size: @svg-size;
+	--svg-fill: @svg-fill;
+	--svg-stroke: @svg-stroke;
 
 	// popup
 
-	--popup-fill: var(--main-background);
-	--popup-border-style: solid;
-	--popup-border-width: 1px;
-	--popup-border-color: #aaa;
-	--popup-border-radius: 5px;
-	--popup-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
+	--popup-fill: @popup-fill;
+	--popup-border-style: @popup-border-style;
+	--popup-border-width: @popup-border-width;
+	--popup-border-color: @popup-border-color;
+	--popup-border-radius: @popup-border-radius;
+	--popup-box-shadow: @popup-box-shadow;
 }
 
 // Body styles
@@ -98,7 +98,7 @@ h5 {
 svg {
 	display: block;
 	width: var(--svg-size);
-	height: var(---svg-size);
+	height: var(--svg-size);
 	fill: var(--svg-fill);
 	stroke: var(--svg-stroke);
 }

package/source/index.ts

@@ -1,5 +1,6 @@
 import { UiKitMiddleware } from "./middleware";
 export * from "./popup"
+export { IS_TOUCH_DEVICE } from "./utils/compatibility";
 import "./styles.less";
 
 export const uiKitMiddlewareFactory = () => new UiKitMiddleware();

package/source/inputs.less

@@ -7,49 +7,56 @@
 
 :root {
 	// placeholder
-	--placeholder-font-weight: inherit;
-	--placeholder-font-style: inherit;
-	--placeholder-color: inherit;
+	--placeholder-font-weight: @placeholder-font-weight;
+	--placeholder-font-style: @placeholder-font-style;
+	--placeholder-color: @placeholder-color;
 
 	// border
-	--input-border-width: 1px;
-	--input-border-color: #aaa;
-	--input-border-type: solid;
-	--input-border-radius: 0;
-	--input-fill: #fff;
+	--input-border-width: @input-border-width;
+	--input-border-color: @input-border-color;
+	--input-border-type: @input-border-type;
+	--input-border-radius: @input-border-radius;
+	--input-fill: @input-fill;
 
 	// size
-	--input-width: auto;
-	--input-height: 42px;
-	--input-padding-lr: 13px;
-	--textarea-size: 100px;
+	--input-width: @input-width;
+	--input-height: @input-height;
+	--input-padding-lr: @input-padding-lr;
+	--textarea-size: @textarea-size;
 
 	// font
-	--input-color: var(--text-color);
-	--input-font-size: inherit;
-	--input-font-weight: inherit;
-	--input-font-style: inherit;
+	--input-color: @input-color;
+	--input-font-size: @input-font-size;
+	--input-font-weight: @input-font-weight;
+	--input-font-style: @input-font-style;
+	--input-line-height: @input-line-height;
 
-	--hover--input-border-color: #666;
-	--hover--input-fill: var(--input-fill);
-	--hover--input-color: var(--input-color);
+	--hover--input-border-color: @hover--input-border-color;
+	--hover--input-fill: @hover--input-fill;
+	--hover--input-color: @hover--input-color;
 
-	--focus--input-border-color: #222;
-	--focus--input-fill: var(--hover--input-fill);
-	--focus--input-color: var(--hover--input-color);
+	--focus--input-border-color: @focus--input-border-color;
+	--focus--input-fill: @focus--input-fill;
+	--focus--input-color: @focus--input-color;
 
-	--disabled--input-border-color: #aaa;
-	--disabled--input-fill: #eee;
-	--disabled--input-color: var(--input-color);
+	--readonly--input-fill: @readonly--input-fill;
+	--readonly--input-color: @readonly--input-color;
 
-	--invalid--input-border-color: red;
-	--invalid--input-fill: var(--input-fill);
-	--invalid--input-color: var(--input-color);
+	--disabled--input-border-color: @disabled--input-border-color;
+	--disabled--input-fill: @disabled--input-fill;
+	--disabled--input-color: @disabled--input-color;
+
+	--invalid--input-border-color: @invalid--input-border-color;
+	--invalid--input-fill: @invalid--input-fill;
+	--invalid--input-color: @invalid--input-color;
+
+	--incorrect--input-fill: @incorrect--input-fill;
+	--incorrect--input-color: @input-color;
 
 	// toggler
-	--toggler-height: 30px;
-	--toggler-padding: 3px;
-	--toggler-round-fill: var(--focus--input-border-color); // цвет круглешка
+	--toggler-height: @toggler-height;
+	--toggler-padding: @toggler-padding;
+	--toggler-round-fill: @toggler-round-fill; // цвет круглешка
 }
 
 input,
@@ -62,7 +69,7 @@ select {
 	font-weight: var(--input-font-weight);
 	font-style: var(--input-font-style);
 	color: var(--input-color);
-	line-height: unset;
+	line-height: var(--input-line-height);
 	box-sizing: border-box;
 	padding: 0;
 	margin: 0;
@@ -116,6 +123,8 @@ select {
 
 	&:read-only {
 		cursor: default;
+		background: var(--readonly--input-fill);
+		color: var(--readonly--input-color);
 	}
 
 	&:disabled {
@@ -188,18 +197,20 @@ input[type=checkbox] {
 
 	&:hover {
 		border-color: var(--hover--input-border-color);
-		background: var(--hover--input-fill);
+		background-color: var(--hover--input-fill);
 		color: var(--hover--input-color);
 	}
 
 	&:focus {
 		border-color: var(--focus--input-border-color);
-		background: var(--focus--input-fill);
+		background-color: var(--focus--input-fill);
 		color: var(--focus--input-color);
 	}
 
 	&[readonly] {
 		pointer-events: none;
+		touch-action: none;
+		background-color: var(--readonly--input-fill);
 	}
 
 	&:checked {
@@ -214,7 +225,7 @@ input[type=checkbox] {
 
 	&:disabled {
 		border-color: var(--disabled--input-border-color);
-		background: var(--disabled--input-fill);
+		background-color: var(--disabled--input-fill);
 		color: var(--disabled--input-color);
 		cursor: default;
 
@@ -226,7 +237,7 @@ input[type=checkbox] {
 
 	&:user-invalid {
 		border-color: var(--invalid--input-border-color);
-		background: var(--invalid--input-fill);
+		background-color: var(--invalid--input-fill);
 		color: var(--invalid--input-color);
 	}
 }

package/source/styles.less

@@ -1,3 +1,4 @@
 @import "reset.less";
 @import "common.less";
-@import "inputs.less";
+@import "inputs.less";
+@import "../vars.less";

package/source/utils/compatibility.ts

@@ -0,0 +1 @@
+export const IS_TOUCH_DEVICE = window.document.documentElement ? "ontouchstart" in window.document.documentElement : false;

package/vars.less

@@ -0,0 +1,95 @@
+// adaptive
+
+@adaptive-desktop-small: 1650px;
+@adaptive-notebook: 1550px;
+@adaptive-notebook-small: 1370px;
+@adaptive-tablet: 1030px;
+@adaptive-tablet-small: 850px;
+@adaptive-mobile: 500px;
+@adaptive-mobile-small: 370px;
+
+// common 
+
+@main-background: #fff;
+
+@font-size: 14px;
+@font-family: system-ui, 'Segoe UI', Helvetica, 'Gill Sans', 'Verdana', 'Arial', sans-serif;
+@font-weight: 400;
+@line-height: 130%;
+@text-color: #222;
+
+@h-line-height: 130%;
+@h1-font-size: 56px;
+@h1-font-weight: 600;
+@h2-font-size: 50px;
+@h2-font-weight: 600;
+@h3-font-size: 28px;
+@h3-font-weight: 600;
+@h4-font-size: 22px;
+@h4-font-weight: 600;
+@h5-font-size: 18px;
+@h5-font-weight: 600;
+
+@content-max-width: 1280px;
+@content-min-width: 320px;
+@content-padding-lr: 40px;
+
+@svg-size: 20px;
+@svg-fill: @text-color;
+@svg-stroke: none;
+
+@popup-fill: @main-background;
+@popup-border-style: solid;
+@popup-border-width: 1px;
+@popup-border-color: #aaa;
+@popup-border-radius: 5px;
+@popup-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
+
+// inputs
+
+@placeholder-font-weight: inherit;
+@placeholder-font-style: inherit;
+@placeholder-color: inherit;
+
+@input-border-width: 1px;
+@input-border-color: #aaa;
+@input-border-type: solid;
+@input-border-radius: 0;
+@input-fill: #fff;
+
+@input-width: auto;
+@input-height: 42px;
+@input-padding-lr: 13px;
+@textarea-size: 100px;
+
+@input-color: @text-color;
+@input-font-size: 14px;
+@input-line-height: 1.2rem;
+@input-font-weight: inherit;
+@input-font-style: inherit;
+
+@hover--input-border-color: #666;
+@hover--input-fill: @input-fill;
+@hover--input-color: @input-color;
+
+@focus--input-border-color: #222;
+@focus--input-fill: @input-fill;
+@focus--input-color: @input-color;
+
+@readonly--input-fill: #f7f7f7;
+@readonly--input-color: @input-color;
+
+@disabled--input-border-color: #aaa;
+@disabled--input-fill: #eee;
+@disabled--input-color: @input-color;
+
+@invalid--input-border-color: red;
+@invalid--input-fill: rgb(255, 220, 220);
+@invalid--input-color: @input-color;
+
+@incorrect--input-fill: rgb(255, 220, 220);
+@incorrect--input-color: inherit;
+
+@toggler-height: 30px;
+@toggler-padding: 3px;
+@toggler-round-fill: @focus--input-border-color;