@nu-art/ts-styles 0.300.8 → 0.400.0

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 (23) hide show
  1. package/icons/icons.d.ts +23 -40
  2. package/icons/icons.js +52 -81
  3. package/icons/icons.js.map +1 -0
  4. package/icons/index.d.ts +1 -1
  5. package/icons/index.js +2 -17
  6. package/icons/index.js.map +1 -0
  7. package/icons/svgs/icon__user.svg +14 -0
  8. package/index.d.ts +1 -1
  9. package/index.js +2 -17
  10. package/index.js.map +1 -0
  11. package/package.json +22 -7
  12. package/styles/colors/index.scss +0 -1
  13. package/styles/colors/svgs.scss +1 -23
  14. package/styles/index.scss +1 -0
  15. package/styles/mixin/index.scss +2 -1
  16. package/styles/mixin/mouse.scss +100 -0
  17. package/styles/palette/_palette.scss +2 -1
  18. package/styles/responsive/_breakpoints.scss +8 -0
  19. package/styles/responsive/_mixins.scss +49 -0
  20. package/styles/scroll-bar/custom-scroll-bar.scss +2 -0
  21. package/styles/transitioning/color-transitions.scss +1 -1
  22. package/styles/colors/elements.scss +0 -29
  23. package/tsconfig.json +0 -23
package/icons/icons.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as React from 'react';
2
1
  import { HTMLAttributes } from 'react';
3
2
  export type IconStyle = {
4
3
  color: string;
@@ -10,83 +9,67 @@ export type IconData = {
10
9
  ratio: number;
11
10
  value: string;
12
11
  };
13
- export declare const iconsRenderer: (key: IconData, props: IconAttributes) => React.JSX.Element;
12
+ export declare const iconsRenderer: (key: IconData, props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
14
13
  export declare const TS_Icons: {
15
14
  Filter: {
16
- component: (props: IconAttributes) => React.JSX.Element;
17
- url: any;
15
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
18
16
  };
19
17
  Search: {
20
- component: (props: IconAttributes) => React.JSX.Element;
21
- url: any;
18
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
22
19
  };
23
20
  attention: {
24
- component: (props: IconAttributes) => React.JSX.Element;
25
- url: any;
21
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
26
22
  };
27
23
  bell: {
28
- component: (props: IconAttributes) => React.JSX.Element;
29
- url: any;
24
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
30
25
  };
31
26
  bin: {
32
- component: (props: IconAttributes) => React.JSX.Element;
33
- url: any;
27
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
34
28
  };
35
29
  more: {
36
- component: (props: IconAttributes) => React.JSX.Element;
37
- url: any;
30
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
38
31
  };
39
32
  treeCollapse: {
40
- component: (props: IconAttributes) => React.JSX.Element;
41
- url: any;
33
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
42
34
  };
43
35
  v: {
44
- component: (props: IconAttributes) => React.JSX.Element;
45
- url: any;
36
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
46
37
  };
47
38
  x: {
48
- component: (props: IconAttributes) => React.JSX.Element;
49
- url: any;
39
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
50
40
  };
51
41
  gear: {
52
- component: (props: IconAttributes) => React.JSX.Element;
53
- url: any;
42
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
54
43
  };
55
44
  information: {
56
- component: (props: IconAttributes) => React.JSX.Element;
57
- url: any;
45
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
58
46
  };
59
47
  filterStop: {
60
- component: (props: IconAttributes) => React.JSX.Element;
61
- url: any;
48
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
62
49
  };
63
50
  clear: {
64
- component: (props: IconAttributes) => React.JSX.Element;
65
- url: any;
51
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
66
52
  };
67
53
  save: {
68
- component: (props: IconAttributes) => React.JSX.Element;
69
- url: any;
54
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
70
55
  };
71
56
  menu: {
72
- component: (props: IconAttributes) => React.JSX.Element;
73
- url: any;
57
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
74
58
  };
75
59
  google: {
76
- component: (props: IconAttributes) => React.JSX.Element;
77
- url: any;
60
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
78
61
  };
79
62
  download: {
80
- component: (props: IconAttributes) => React.JSX.Element;
81
- url: any;
63
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
82
64
  };
83
65
  copy: {
84
- component: (props: IconAttributes) => React.JSX.Element;
85
- url: any;
66
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
86
67
  };
87
68
  addImage: {
88
- component: (props: IconAttributes) => React.JSX.Element;
89
- url: any;
69
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
70
+ };
71
+ user: {
72
+ component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
90
73
  };
91
74
  };
92
75
  export declare const tsIconKeys: () => TSIcons[];
package/icons/icons.js CHANGED
@@ -1,90 +1,61 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.tsIconKeys = exports.TS_Icons = exports.iconsRenderer = void 0;
27
- const React = __importStar(require("react"));
28
- const ts_common_1 = require("@nu-art/ts-common");
29
- const icon__filter_svg_1 = __importStar(require("./svgs/icon__filter.svg"));
30
- const icon__search_svg_1 = __importStar(require("./svgs/icon__search.svg"));
31
- const icon__attention_svg_1 = __importStar(require("./svgs/icon__attention.svg"));
32
- const icon__bell_svg_1 = __importStar(require("./svgs/icon__bell.svg"));
33
- const icon__bin_svg_1 = __importStar(require("./svgs/icon__bin.svg"));
34
- const icon__x_svg_1 = __importStar(require("./svgs/icon__x.svg"));
35
- const icon__v_svg_1 = __importStar(require("./svgs/icon__v.svg"));
36
- const icon__more_svg_1 = __importStar(require("./svgs/icon__more.svg"));
37
- const icon__treeCollapse_svg_1 = __importStar(require("./svgs/icon__treeCollapse.svg"));
38
- const icon__gear_svg_1 = __importStar(require("./svgs/icon__gear.svg"));
39
- const icon__information_svg_1 = __importStar(require("./svgs/icon__information.svg"));
40
- const icon__filter_stop_svg_1 = __importStar(require("./svgs/icon__filter-stop.svg"));
41
- const icon__clear_svg_1 = __importStar(require("./svgs/icon__clear.svg"));
42
- const icon__save_svg_1 = __importStar(require("./svgs/icon__save.svg"));
43
- const icon__menu_svg_1 = __importStar(require("./svgs/icon__menu.svg"));
44
- const icon__google_svg_1 = __importStar(require("./svgs/icon__google.svg"));
45
- const icon__download_svg_1 = __importStar(require("./svgs/icon__download.svg"));
46
- const icon__copy_svg_1 = __importStar(require("./svgs/icon__copy.svg"));
47
- const icon__add_image_svg_1 = __importStar(require("./svgs/icon__add-image.svg"));
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from 'react';
3
+ import { _keys } from '@nu-art/ts-common';
4
+ import { ReactComponent as Filter } from './svgs/icon__filter.svg';
5
+ import { ReactComponent as Search } from './svgs/icon__search.svg';
6
+ import { ReactComponent as Attention } from './svgs/icon__attention.svg';
7
+ import { ReactComponent as Bell } from './svgs/icon__bell.svg';
8
+ import { ReactComponent as Bin } from './svgs/icon__bin.svg';
9
+ import { ReactComponent as X } from './svgs/icon__x.svg';
10
+ import { ReactComponent as V } from './svgs/icon__v.svg';
11
+ import { ReactComponent as More } from './svgs/icon__more.svg';
12
+ import { ReactComponent as Collapse } from './svgs/icon__treeCollapse.svg';
13
+ import { ReactComponent as Gear } from './svgs/icon__gear.svg';
14
+ import { ReactComponent as Information } from './svgs/icon__information.svg';
15
+ import { ReactComponent as FilterStop } from './svgs/icon__filter-stop.svg';
16
+ import { ReactComponent as Clear } from './svgs/icon__clear.svg';
17
+ import { ReactComponent as Save } from './svgs/icon__save.svg';
18
+ import { ReactComponent as Menu } from './svgs/icon__menu.svg';
19
+ import { ReactComponent as Google } from './svgs/icon__google.svg';
20
+ import { ReactComponent as Download } from './svgs/icon__download.svg';
21
+ import { ReactComponent as Copy } from './svgs/icon__copy.svg';
22
+ import { ReactComponent as AddImage } from './svgs/icon__add-image.svg';
23
+ import { ReactComponent as User } from './svgs/icon__user.svg';
48
24
  class RenderIcon extends React.Component {
49
25
  render() {
50
- var _a;
51
- const className = 'icon--wrapper ' + ((_a = this.props.className) !== null && _a !== void 0 ? _a : '');
52
- return React.createElement("div", Object.assign({}, this.props, { className: className, style: { WebkitMaskImage: `url(${this.props.icon})`, maskImage: `url(${this.props.icon})` } }));
26
+ const className = 'icon--wrapper ' + (this.props.className ?? '');
27
+ return _jsx("div", { ...this.props, className: className, style: { WebkitMaskImage: `url(${this.props.icon})`, maskImage: `url(${this.props.icon})` } });
53
28
  }
54
29
  }
55
- const iconsRenderer = (key, props) => {
56
- return React.createElement(RenderIcon, Object.assign({}, props, { icon: key.value }));
30
+ export const iconsRenderer = (key, props) => {
31
+ return _jsx(RenderIcon, { ...props, icon: key.value });
57
32
  };
58
- exports.iconsRenderer = iconsRenderer;
59
33
  const genIcon = (Icon) => {
60
- return (props) => {
61
- var _a;
62
- return React.createElement("div", Object.assign({}, props, { className: 'icon--wrapper ' + ((_a = props.className) !== null && _a !== void 0 ? _a : '') }),
63
- React.createElement(Icon, null));
64
- };
34
+ return (props) => _jsx("div", { ...props, className: 'icon--wrapper ' + (props.className ?? ''), children: _jsx(Icon, {}) });
65
35
  };
66
- exports.TS_Icons = {
67
- Filter: { component: genIcon(icon__filter_svg_1.ReactComponent), url: icon__filter_svg_1.default },
68
- Search: { component: genIcon(icon__search_svg_1.ReactComponent), url: icon__search_svg_1.default },
69
- attention: { component: genIcon(icon__attention_svg_1.ReactComponent), url: icon__attention_svg_1.default },
70
- bell: { component: genIcon(icon__bell_svg_1.ReactComponent), url: icon__bell_svg_1.default },
71
- bin: { component: genIcon(icon__bin_svg_1.ReactComponent), url: icon__bin_svg_1.default },
72
- more: { component: genIcon(icon__more_svg_1.ReactComponent), url: icon__more_svg_1.default },
73
- treeCollapse: { component: genIcon(icon__treeCollapse_svg_1.ReactComponent), url: icon__treeCollapse_svg_1.default },
74
- v: { component: genIcon(icon__v_svg_1.ReactComponent), url: icon__v_svg_1.default },
75
- x: { component: genIcon(icon__x_svg_1.ReactComponent), url: icon__x_svg_1.default },
76
- gear: { component: genIcon(icon__gear_svg_1.ReactComponent), url: icon__gear_svg_1.default },
77
- information: { component: genIcon(icon__information_svg_1.ReactComponent), url: icon__information_svg_1.default },
78
- filterStop: { component: genIcon(icon__filter_stop_svg_1.ReactComponent), url: icon__filter_stop_svg_1.default },
79
- clear: { component: genIcon(icon__clear_svg_1.ReactComponent), url: icon__clear_svg_1.default },
80
- save: { component: genIcon(icon__save_svg_1.ReactComponent), url: icon__save_svg_1.default },
81
- menu: { component: genIcon(icon__menu_svg_1.ReactComponent), url: icon__menu_svg_1.default },
82
- google: { component: genIcon(icon__google_svg_1.ReactComponent), url: icon__google_svg_1.default },
83
- download: { component: genIcon(icon__download_svg_1.ReactComponent), url: icon__download_svg_1.default },
84
- copy: { component: genIcon(icon__copy_svg_1.ReactComponent), url: icon__copy_svg_1.default },
85
- addImage: { component: genIcon(icon__add_image_svg_1.ReactComponent), url: icon__add_image_svg_1.default },
36
+ export const TS_Icons = {
37
+ Filter: { component: genIcon(Filter) },
38
+ Search: { component: genIcon(Search) },
39
+ attention: { component: genIcon(Attention) },
40
+ bell: { component: genIcon(Bell) },
41
+ bin: { component: genIcon(Bin) },
42
+ more: { component: genIcon(More) },
43
+ treeCollapse: { component: genIcon(Collapse) },
44
+ v: { component: genIcon(V) },
45
+ x: { component: genIcon(X) },
46
+ gear: { component: genIcon(Gear) },
47
+ information: { component: genIcon(Information) },
48
+ filterStop: { component: genIcon(FilterStop) },
49
+ clear: { component: genIcon(Clear) },
50
+ save: { component: genIcon(Save) },
51
+ menu: { component: genIcon(Menu) },
52
+ google: { component: genIcon(Google) },
53
+ download: { component: genIcon(Download) },
54
+ copy: { component: genIcon(Copy) },
55
+ addImage: { component: genIcon(AddImage) },
56
+ user: { component: genIcon(User) },
86
57
  };
87
- const tsIconKeys = () => {
88
- return (0, ts_common_1._keys)(exports.TS_Icons);
58
+ export const tsIconKeys = () => {
59
+ return _keys(TS_Icons);
89
60
  };
90
- exports.tsIconKeys = tsIconKeys;
61
+ //# sourceMappingURL=icons.js.map
package/icons/icons.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icons.js","sourceRoot":"/Users/tacb0ss/dev/nu-art/beamz/_thunderstorm/ts-styles/src/main/","sources":["icons/icons.tsx"],"names":[],"mappings":"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"}
package/icons/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from './icons';
1
+ export * from './icons.js';
package/icons/index.js CHANGED
@@ -1,17 +1,2 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./icons"), exports);
1
+ export * from './icons.js';
2
+ //# sourceMappingURL=index.js.map
package/icons/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"/Users/tacb0ss/dev/nu-art/beamz/_thunderstorm/ts-styles/src/main/","sources":["icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
package/icons/svgs/icon__user.svg ADDED
@@ -0,0 +1,14 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
+ <g transform="translate(0,512) scale(0.1,-0.1)">
3
+ <path
4
+ d="M2335 5105 c-273 -42 -517 -172 -708 -375 -210 -223 -319 -481 -334 -790 -21 -432 191 -845 557 -1084 180 -118 353 -178 563 -195 389 -30 721 92 989 365 213 216 321 452 347 753 36 402 -116 776 -419 1038 -196 168 -376 252 -625 288 -120 17 -260 18 -370 0z"
5
+ fill="#000"
6
+ data-no-stroke="true"
7
+ />
8
+ <path
9
+ d="M1427 2639 c-452 -48 -766 -372 -912 -944 -97 -381 -122 -839 -60 -1090 51 -201 218 -405 411 -503 87 -44 212 -80 317 -92 62 -8 534 -10 1437 -8 l1345 3 85 24 c316 86 532 298 611 596 41 155 36 525 -12 817 -105 650 -371 1040 -792 1162 -96 28 -268 49 -319 39 -49 -9 -117 -45 -271 -144 -164 -106 -187 -118 -310 -164 -142 -53 -259 -76 -396 -76 -140 0 -248 20 -390 70 -134 48 -140 51 -350 184 -110 70 -192 115 -224 124 -56 14 -56 14 -170 2z"
10
+ fill="#000"
11
+ data-no-stroke="true"
12
+ />
13
+ </g>
14
+ </svg>
package/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from './icons';
1
+ export * from './icons/index.js';
package/index.js CHANGED
@@ -1,17 +1,2 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- __exportStar(require("./icons"), exports);
1
+ export * from './icons/index.js';
2
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"/Users/tacb0ss/dev/nu-art/beamz/_thunderstorm/ts-styles/src/main/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@nu-art/ts-styles",
3
- "version": "0.300.8",
3
+ "version": "0.400.0",
4
4
  "author": "nu-art",
5
5
  "description": "Styles by Cipher",
6
- "main": "dist/index.js",
6
+ "type": "module",
7
7
  "scripts": {
8
8
  "build": "tsc"
9
9
  },
@@ -13,16 +13,31 @@
13
13
  "linkDirectory": true
14
14
  },
15
15
  "dependencies": {
16
- "@nu-art/ts-common": "~0.300.0",
17
- "react": "^18.2.0"
16
+ "@nu-art/ts-common": "workspace:*",
17
+ "react": "^18.0.0"
18
18
  },
19
19
  "devDependencies": {
20
- "@types/react": "^18.0.29"
20
+ "@types/react": "^18.0.0"
21
+ },
22
+ "unitConfig": {
23
+ "type": "typescript-lib"
21
24
  },
22
25
  "contributors": [
23
26
  {
24
27
  "name": "cipher_il",
25
28
  "url": "https://www.npmjs.com/~cipher_il"
26
29
  }
27
- ]
28
- }
30
+ ],
31
+ "exports": {
32
+ ".": {
33
+ "types": "./index.d.ts",
34
+ "import": "./index.js",
35
+ "sass": "./index.scss"
36
+ },
37
+ "./*": {
38
+ "types": "./*.d.ts",
39
+ "import": "./*.js",
40
+ "sass": "./*.scss"
41
+ }
42
+ }
43
+ }
package/styles/colors/index.scss CHANGED
@@ -1,2 +1 @@
1
- @forward "elements";
2
1
  @forward "svgs";
package/styles/colors/svgs.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use '../consts' as consts;
2
2
 
3
3
  @mixin setIconProp($prop,$value) {
4
- *:not([data-no-#{$prop}="true"]):not(g):not(svg) {
4
+ *:not(svg):not(g):not([data-no-#{$prop}="true"]) {
5
5
  #{$prop}: $value;
6
6
  }
7
7
  }
@@ -11,25 +11,3 @@
11
11
  @include setIconProp($rule, $color);
12
12
  }
13
13
  }
14
-
15
- /// Sets color for vector elements based on mouse interaction
16
- ///
17
- /// Will work on any vector element that doesn't have a corresponding "data-no-{rule}" attribute.
18
- /// To avoid coloring the fill of the element set data-no-fill=true attribute
19
- /// To avoid coloring the stroke of the element set data-no-stroke=true attribute
20
- ///
21
- /// @param $bg - base background
22
- /// @param $bgh - background when mouse hover
23
- /// @param $bga - background when mouse click
24
- ///
25
- @mixin mouse-interactive-icon($color, $color-h: $color, $color-a: $color-h) {
26
- @each $rule in consts.$svg-prop-rules {
27
- @include setIconProp($rule, $color);
28
- &:hover {
29
- @include setIconProp($rule, $color-h);
30
- }
31
- &:active {
32
- @include setIconProp($rule, $color-a);
33
- }
34
- }
35
- }
package/styles/index.scss CHANGED
@@ -5,3 +5,4 @@
5
5
  @forward "shapes";
6
6
  @forward "text";
7
7
  @forward "transitioning";
8
+ @forward "responsive/mixins";
package/styles/mixin/index.scss CHANGED
@@ -1 +1,2 @@
1
- @forward "grid";
1
+ @forward "grid";
2
+ @forward "mouse";
package/styles/mixin/mouse.scss ADDED
@@ -0,0 +1,100 @@
1
+ @use "../colors" as colors;
2
+
3
+ @mixin mouseInteractiveBackground($background, $hoverBackground: $background, $activeBackground: $hoverBackground) {
4
+ & {
5
+ background: $background;
6
+ cursor: pointer;
7
+ }
8
+
9
+ &:hover {
10
+ background: $hoverBackground;
11
+ }
12
+
13
+ &:active {
14
+ background: $activeBackground;
15
+ }
16
+ }
17
+
18
+ @mixin mouseInteractiveBorder($border, $hoverBorder: $border, $activeBorder: $hoverBorder) {
19
+ & {
20
+ border: $border;
21
+ cursor: pointer;
22
+ }
23
+
24
+ &:hover {
25
+ border: $hoverBorder;
26
+ }
27
+
28
+ &:active {
29
+ border: $activeBorder;
30
+ }
31
+ }
32
+
33
+ @mixin mouseInteractiveColor($color, $hoverColor:$color,$activeColor:$hoverColor) {
34
+ & {
35
+ color: $color;
36
+ cursor: pointer;
37
+ }
38
+
39
+ &:hover {
40
+ color: $hoverColor;
41
+ }
42
+ &:active {
43
+ color: $activeColor
44
+ }
45
+ }
46
+
47
+ // Sets color for vector elements based on mouse interaction
48
+ //
49
+ // Will work on any vector element that doesn't have a corresponding "data-no-{rule}" attribute.
50
+ // To avoid coloring the fill of the element set data-no-fill=true attribute
51
+ // To avoid coloring the stroke of the element set data-no-stroke=true attribute
52
+ //
53
+ // @param $color - base background
54
+ // @param $hoverColor - background when mouse hover
55
+ // @param $activeColor - background when mouse click
56
+ //
57
+ @mixin mouseInteractiveIcon($color,$hoverColor:$color,$activeColor:$hoverColor,$transition: 0) {
58
+ $rules: fill, stroke;
59
+
60
+ @if $transition != 0 {
61
+ $transitionRules: '';
62
+ @each $rule in $rules {
63
+ $i: index($rules, $rule);
64
+ $transitionRules: $transitionRules + #{$rule $transition};
65
+ @if $i != length($rules) {
66
+ $transitionRules: $transitionRules + ', ';
67
+ }
68
+ }
69
+ *:not(g) {
70
+ transition: #{$transitionRules};
71
+ }
72
+ }
73
+
74
+ & {
75
+ cursor: pointer;
76
+ }
77
+
78
+ @each $rule in $rules {
79
+ @include colors.setIconProp($rule, $color);
80
+ &:hover {
81
+ @include colors.setIconProp($rule, $hoverColor)
82
+ }
83
+ &:active {
84
+ @include colors.setIconProp($rule, $activeColor)
85
+ }
86
+ }
87
+ }
88
+
89
+ @mixin mouseInteractiveText($color, $hoverColor:$color, $activeColor:$hoverColor) {
90
+ & {
91
+ color: $color;
92
+ }
93
+
94
+ &:hover {
95
+ color: $hoverColor;
96
+ }
97
+ &:active {
98
+ color: $activeColor;
99
+ }
100
+ }
package/styles/palette/_palette.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  @use 'sass:math';
2
+ @use 'sass:color';
2
3
  @use 'sass:list';
3
4
 
4
5
  @function paletteBuilder($baseColor, $steps) {
5
6
  $colorsList: ();
6
7
  @for $i from 0 to $steps {
7
8
  $lightness: math.percentage(math.div($i, $steps));
8
- $newColor: scale-color($baseColor, $lightness: $lightness);
9
+ $newColor: color.scale($baseColor, $lightness: $lightness);
9
10
  $colorsList: list.append($colorsList, #{$newColor});
10
11
  }
11
12
  @return $colorsList
package/styles/responsive/_breakpoints.scss ADDED
@@ -0,0 +1,8 @@
1
+ $breakpoints: (
2
+ xs: 0,
3
+ sm: 480px,
4
+ md: 768px,
5
+ lg: 1024px,
6
+ xl: 1280px,
7
+ xxl: 1536px
8
+ )
package/styles/responsive/_mixins.scss ADDED
@@ -0,0 +1,49 @@
1
+ @use 'breakpoints' as *;
2
+ @use 'sass:map';
3
+
4
+ @mixin responsive($breakpoint) {
5
+ $value: map.get($breakpoints, $breakpoint);
6
+ @if $value != null {
7
+ @media (min-width: $value) {
8
+ @content;
9
+ }
10
+ } @else {
11
+ @warn "No value found for `#{$breakpoint}` in $breakpoints map.";
12
+ }
13
+ }
14
+
15
+ @mixin responsive-max($breakpoint) {
16
+ $value: map.get($breakpoints, $breakpoint);
17
+ @if $value != null {
18
+ @media (max-width: $value) {
19
+ @content;
20
+ }
21
+ } @else {
22
+ @warn "No value found for `#{$breakpoint}` in $breakpoints map.";
23
+ }
24
+ }
25
+
26
+ @mixin show-breakpoints {
27
+ position: relative;
28
+
29
+ &::after {
30
+ position: absolute;
31
+ bottom: 0;
32
+ left: 0;
33
+ background: rgba(0, 0, 0, 0.8);
34
+ color: white;
35
+ font-size: 12px;
36
+ padding: 2px 6px;
37
+ z-index: 9999;
38
+ font-family: monospace;
39
+ pointer-events: none;
40
+ }
41
+
42
+ @each $key, $value in $breakpoints {
43
+ @include responsive($key) {
44
+ &::after {
45
+ content: "Breakpoint: #{$key} (#{$value})";
46
+ }
47
+ }
48
+ }
49
+ }
package/styles/scroll-bar/custom-scroll-bar.scss CHANGED
@@ -31,6 +31,7 @@
31
31
  }
32
32
  }
33
33
 
34
+ & {
34
35
  @if $direction == 'vertical' {
35
36
  & {
36
37
  overflow-y: auto;
@@ -43,6 +44,7 @@
43
44
  width: 9px;
44
45
  }
45
46
  }
47
+ }
46
48
 
47
49
  @if $direction == 'both' {
48
50
  & {
package/styles/transitioning/color-transitions.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  @function svg-color-transition($time:200 , $style: ease-out) {
10
10
  $transitions: ();
11
11
  @each $rule in consts.$svg-prop-rules {
12
- $transitions: append($transitions, $rule #{$time}ms $style, comma);
12
+ $transitions: list.append($transitions, $rule #{$time}ms $style, comma);
13
13
  }
14
14
 
15
15
  @return $transitions;
package/styles/colors/elements.scss DELETED
@@ -1,29 +0,0 @@
1
- /// Sets backgrounds for element based on mouse interaction
2
- ///
3
- /// @param $bg - base background
4
- /// @param $bgh - background when mouse hover
5
- /// @param $bga - background when mouse click
6
- ///
7
- @mixin mouse-interactive-background($bg, $bg-h: $bg ,$bg-a: $bg-h) {
8
- & {
9
- background: $bg;
10
- }
11
- &:hover {
12
- background: $bg-h;
13
- }
14
- &:active {
15
- background: $bg-a;
16
- }
17
- }
18
-
19
- @mixin mouse-interactive-text($c,$c-h: $c,$c-a:$c-h) {
20
- & {
21
- color: $c;
22
- }
23
- &:hover {
24
- color: $c-h;
25
- }
26
- &:active {
27
- color: $c-a;
28
- }
29
- }
package/tsconfig.json DELETED
@@ -1,23 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "target": "es2017",
4
- "jsx": "react",
5
- "lib": [
6
- "es5",
7
- "es6",
8
- "es7",
9
- "dom"
10
- ],
11
- "declaration": true,
12
- "resolveJsonModule": true,
13
- "esModuleInterop": true,
14
- "experimentalDecorators": true,
15
- "moduleResolution": "node",
16
- "noUnusedLocals": true,
17
- "module": "commonjs",
18
- "sourceMap": true,
19
- "strict": true
20
- },
21
- "esModuleInterop": true,
22
- "module": "ES2020"
23
- }