@fvc/utils 1.1.2 → 1.2.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.
package/dist/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
const e=e=>/^[0-9]+$/.test(e),r=r=>"number"==typeof r||e(r)?`${r}px`:r,o="az",t={i:"İ","ı":"I","ç":"Ç","ş":"Ş","ü":"Ü","ö":"Ö","ğ":"Ğ","ə":"Ə"},a={"İ":"i",I:"ı","Ç":"ç","Ş":"ş","Ü":"ü","Ö":"ö","Ğ":"ğ","Ə":"ə"},p=/\p{L}/gu,l=(e,r,o)=>e.replace(p,(e=>{var t;return null!==(t=r[e])&&void 0!==t?t:o(e)})),n=(e,r=o)=>r!==o?e.toLowerCase():l(e,a,(e=>e.toLowerCase())),i=(e,r=o)=>r!==o?e.toUpperCase():l(e,t,(e=>e.toUpperCase())),s=(e,r,t=o)=>{var a,p;const l={lowercase:()=>n(e,t),uppercase:()=>i(e,t),capitalize:()=>((e,r=o)=>e.split(" ").map((e=>{const[o="",...t]=e;return i(o,r)+n(t.join(""),r)})).join(" "))(e,t),integer:()=>e.replace(/\D/g,"")};return null!==(p=null===(a=l[r])||void 0===a?void 0:a.call(l))&&void 0!==p?p:e};export{r as cssVarResolver,e as isNumeric,s as transformText};
|
|
@@ -1,144 +1,144 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* Blue */
|
|
3
|
-
--blue-20: #
|
|
4
|
-
--blue-50: #
|
|
5
|
-
--blue-100: #
|
|
6
|
-
--blue-150: #
|
|
7
|
-
--blue-200: #
|
|
8
|
-
--blue-250: #
|
|
9
|
-
--blue-300: #
|
|
10
|
-
--blue-400: #
|
|
11
|
-
--blue-500: #
|
|
12
|
-
--blue-600: #
|
|
13
|
-
--blue-700: #
|
|
3
|
+
--blue-20: #eeeff6;
|
|
4
|
+
--blue-50: #ebedf6;
|
|
5
|
+
--blue-100: #e4e6f4;
|
|
6
|
+
--blue-150: #e5e9fc;
|
|
7
|
+
--blue-200: #daddec;
|
|
8
|
+
--blue-250: #d9deef;
|
|
9
|
+
--blue-300: #cdd1e4;
|
|
10
|
+
--blue-400: #4271a5;
|
|
11
|
+
--blue-500: #395ca6;
|
|
12
|
+
--blue-600: #4054b2;
|
|
13
|
+
--blue-700: #303f9f;
|
|
14
14
|
|
|
15
15
|
/* Gray */
|
|
16
|
-
--gray-50: #
|
|
17
|
-
--gray-100: #
|
|
18
|
-
--gray-150: #
|
|
19
|
-
--gray-200: #
|
|
20
|
-
--gray-250: #
|
|
21
|
-
--gray-300: #
|
|
22
|
-
--gray-400: #
|
|
16
|
+
--gray-50: #f2f2f2;
|
|
17
|
+
--gray-100: #fafafa;
|
|
18
|
+
--gray-150: #ececec;
|
|
19
|
+
--gray-200: #dfdfdf;
|
|
20
|
+
--gray-250: #ebebeb;
|
|
21
|
+
--gray-300: #dadada;
|
|
22
|
+
--gray-400: #bbbbbb;
|
|
23
23
|
--gray-500: #787878;
|
|
24
24
|
--gray-600: #949494;
|
|
25
|
-
--gray-700: #
|
|
26
|
-
--gray-800: #
|
|
27
|
-
--gray-900: #
|
|
25
|
+
--gray-700: #7b7b7b;
|
|
26
|
+
--gray-800: #6d6d6d;
|
|
27
|
+
--gray-900: #4a4a4a;
|
|
28
28
|
|
|
29
29
|
/* Blue-gray */
|
|
30
|
-
--blue-gray-200: #
|
|
31
|
-
--blue-gray-250: #
|
|
32
|
-
--blue-gray-300: #
|
|
33
|
-
--blue-gray-400: #
|
|
34
|
-
--blue-gray-500: #
|
|
35
|
-
--blue-gray-600: #
|
|
36
|
-
--blue-gray-700: #
|
|
37
|
-
--blue-gray-800: #
|
|
38
|
-
--blue-gray-900: #
|
|
30
|
+
--blue-gray-200: #d9deef;
|
|
31
|
+
--blue-gray-250: #dddaec;
|
|
32
|
+
--blue-gray-300: #cdd1e4;
|
|
33
|
+
--blue-gray-400: #75849a;
|
|
34
|
+
--blue-gray-500: #69778c;
|
|
35
|
+
--blue-gray-600: #696b78;
|
|
36
|
+
--blue-gray-700: #4d5868;
|
|
37
|
+
--blue-gray-800: #3d4655;
|
|
38
|
+
--blue-gray-900: #2e3848;
|
|
39
39
|
|
|
40
40
|
/* Green */
|
|
41
|
-
--green-100: #
|
|
41
|
+
--green-100: #d8fcd2;
|
|
42
42
|
--green-200: #DEEDEX;
|
|
43
|
-
--green-250: #
|
|
44
|
-
--green-300: #
|
|
45
|
-
--green-400: #
|
|
43
|
+
--green-250: #c9e1d7;
|
|
44
|
+
--green-300: #93c3b0;
|
|
45
|
+
--green-400: #40dfa2;
|
|
46
46
|
--green-600: #268661;
|
|
47
47
|
--green-700: #176647;
|
|
48
|
-
--green-800: #
|
|
48
|
+
--green-800: #396f65;
|
|
49
49
|
|
|
50
50
|
/* Yellow-green */
|
|
51
|
-
--yellow-green-400: #
|
|
52
|
-
--yellow-green-500: #
|
|
51
|
+
--yellow-green-400: #cddc39;
|
|
52
|
+
--yellow-green-500: #afb42b;
|
|
53
53
|
|
|
54
54
|
/* Red */
|
|
55
|
-
--red-100: #
|
|
56
|
-
--red-200: #
|
|
57
|
-
--red-250: #
|
|
58
|
-
--red-300: #
|
|
59
|
-
--red-400: #
|
|
60
|
-
--red-600: #
|
|
61
|
-
--red-800: #
|
|
55
|
+
--red-100: #f5ece6;
|
|
56
|
+
--red-200: #fdeaed;
|
|
57
|
+
--red-250: #fbe0e3;
|
|
58
|
+
--red-300: #f9cbd1;
|
|
59
|
+
--red-400: #ff9da9;
|
|
60
|
+
--red-600: #ff1f48;
|
|
61
|
+
--red-800: #b00020;
|
|
62
62
|
|
|
63
63
|
/* Orange */
|
|
64
|
-
--orange-100: #
|
|
65
|
-
--orange-200: #
|
|
66
|
-
--orange-600: #
|
|
64
|
+
--orange-100: #f5ece6;
|
|
65
|
+
--orange-200: #fff59b;
|
|
66
|
+
--orange-600: #dd9323;
|
|
67
67
|
|
|
68
68
|
/* Neutrals */
|
|
69
|
-
--neutral-0: #
|
|
70
|
-
--neutral-0-20: #
|
|
71
|
-
--neutral-0-40: #
|
|
69
|
+
--neutral-0: #ffffff;
|
|
70
|
+
--neutral-0-20: #ffffff33;
|
|
71
|
+
--neutral-0-40: #ffffff66;
|
|
72
72
|
--neutral-1000: #000000;
|
|
73
|
-
|
|
73
|
+
|
|
74
74
|
/* Black */
|
|
75
|
-
--black-1000: #
|
|
75
|
+
--black-1000: #2a2d37;
|
|
76
76
|
|
|
77
77
|
/* Text */
|
|
78
|
-
--body-text-color-1000: #
|
|
79
|
-
--secondary-text-color-600: #
|
|
80
|
-
--support-text-color-300: #
|
|
81
|
-
--white-text-color-0: #
|
|
82
|
-
--link-on-dark-bg-color-400: #
|
|
83
|
-
--link-on-light-bg-color-500: #
|
|
84
|
-
--menu-2nd-level-color-200: #
|
|
85
|
-
--warning-text-color-800: #
|
|
86
|
-
--warning-text-on-dark-bg-color-400: #
|
|
78
|
+
--body-text-color-1000: #2a2d37; /* Used for body text and headlines on a light background */
|
|
79
|
+
--secondary-text-color-600: #696b78; /* Used in labels and headings in tables */
|
|
80
|
+
--support-text-color-300: #cdd1e4; /* Used as a label color on a dark background and into Default UI elements */
|
|
81
|
+
--white-text-color-0: #ffffff; /* Used for body texts and headlines on a light background on a dark background */
|
|
82
|
+
--link-on-dark-bg-color-400: #40dfa2; /* Used on a dark background */
|
|
83
|
+
--link-on-light-bg-color-500: #395ca6; /* Used on a light background */
|
|
84
|
+
--menu-2nd-level-color-200: #daddec; /* Used in a default secondary menu */
|
|
85
|
+
--warning-text-color-800: #b00020; /* Used to draw attention to the text most often in a negative aspect (on a white bg) */
|
|
86
|
+
--warning-text-on-dark-bg-color-400: #ff9da9; /* Used to draw attention to the text most often in a negative aspect (on a dark bg) */
|
|
87
87
|
--button-text-color-600: #268661; /* Used for the text in the secondary button */
|
|
88
88
|
|
|
89
89
|
/* Background */
|
|
90
|
-
--card-bg-color-20: #
|
|
91
|
-
--main-content-bg-color-0: #
|
|
90
|
+
--card-bg-color-20: #eeeff6; /* The primary color is text, which is used in many situations */
|
|
91
|
+
--main-content-bg-color-0: #ffffff; /* Used in labels and headings in tables on dark background */
|
|
92
92
|
--header-bg-color-700: #405868; /* More often used as a label color on a dark background and into Default UI elements */
|
|
93
|
-
--task-overview-bg-color-800: #
|
|
94
|
-
--primary-bg-color-900: #
|
|
95
|
-
--alert-bg-color-50: #
|
|
93
|
+
--task-overview-bg-color-800: #3d4655; /* Used on a dark background */
|
|
94
|
+
--primary-bg-color-900: #2e3848; /* Used on a dark background */
|
|
95
|
+
--alert-bg-color-50: #f2f2f2; /* Alert message default background. */
|
|
96
96
|
|
|
97
97
|
/* Overlay */
|
|
98
|
-
--tooltip-bg-color-900: #
|
|
99
|
-
--popup-bg-color-20: #
|
|
98
|
+
--tooltip-bg-color-900: #4a4a4a; /* The primary color is text, which is used in many situations. */
|
|
99
|
+
--popup-bg-color-20: #eeeff6;
|
|
100
100
|
|
|
101
101
|
/* Border-line */
|
|
102
|
-
--element-b-line-color-400: #
|
|
103
|
-
--element-selected-b-line-color-400: #
|
|
104
|
-
--frame-b-line-color-250: #
|
|
102
|
+
--element-b-line-color-400: #2a2d37; /* Border-line for default state of Text field. */
|
|
103
|
+
--element-selected-b-line-color-400: #4271a5; /* Border-line for selected state of Text field, Text area, Dropdown, Datetimepicker, Field range */
|
|
104
|
+
--frame-b-line-color-250: #d9deef; /* Border-line for Cards, Tables and Sections */
|
|
105
105
|
--warning-b-line-on-light-bg-color-800: #800020; /* Warning border-line for all elements on light background */
|
|
106
|
-
--warning-b-line-on-dark-bg-color-400: #
|
|
106
|
+
--warning-b-line-on-dark-bg-color-400: #ff9da9; /* Warning border line for all elements on dark background */
|
|
107
107
|
|
|
108
108
|
/* Icon */
|
|
109
|
-
--white-icon-color-0: #
|
|
109
|
+
--white-icon-color-0: #ffffff; /* The primary color is text, which is used in many situations. */
|
|
110
110
|
--warning-icon-color-800: #800020; /* Most often used in labels and headings in tables */
|
|
111
|
-
--warning-icon-on-dark-bg-color-400: #
|
|
112
|
-
--primary-icon-color-1000: #
|
|
113
|
-
--link-icon-color-500: #
|
|
114
|
-
--secondary-icon-on-dark-bg-color-600: #
|
|
111
|
+
--warning-icon-on-dark-bg-color-400: #ff9da9; /* More often used as a label color on a dark background and into Default UI elements */
|
|
112
|
+
--primary-icon-color-1000: #2a2d37; /* Used on a dark background */
|
|
113
|
+
--link-icon-color-500: #395ca6; /* Used on a dark background */
|
|
114
|
+
--secondary-icon-on-dark-bg-color-600: #696b78; /* Used for text and icon on dark backgrounds */
|
|
115
115
|
--secondary-icon-on-light-bg-color-500: #787878; /* Used for text and icon on light backgrounds */
|
|
116
116
|
|
|
117
117
|
/* Badge (for Task overview, Cards & Table) */
|
|
118
118
|
--badge-success-color-600: #268661; /* The primary color is text, which is used in many situations */
|
|
119
|
-
--badge-active-color-100: #
|
|
120
|
-
--badge-cancel-color-900: #
|
|
119
|
+
--badge-active-color-100: #2a2d37; /* Used in labels and headings in tables. */
|
|
120
|
+
--badge-cancel-color-900: #4a4a4a; /* Used as a label color on a stark background and into Default UI elements */
|
|
121
121
|
--badge-in-progress-color-600: #949494; /* Used for states with "in progress" state. */
|
|
122
122
|
--badge-warning-color-800: #800020; /* used for warned states */
|
|
123
|
-
--badge-basic-color-400: #
|
|
124
|
-
--badge-paused-color-100: #
|
|
123
|
+
--badge-basic-color-400: #4271a5; /* Used for regular states */
|
|
124
|
+
--badge-paused-color-100: #fff59b; /* Used for suspended or paused states */
|
|
125
125
|
|
|
126
126
|
/* Button Background */
|
|
127
|
-
--button-disabled-secondary-color-300: #
|
|
128
|
-
--button-hover-secondary-color-300: #
|
|
129
|
-
--button-pressed-secondary-color-300: #
|
|
127
|
+
--button-disabled-secondary-color-300: #93c3b04d; /* Used as a stroke color for Secondary button. */
|
|
128
|
+
--button-hover-secondary-color-300: #93c3b080; /* Used as a background color for Secondary button. */
|
|
129
|
+
--button-pressed-secondary-color-300: #93c3b0; /* Used as a background color for Secondary button */
|
|
130
130
|
--button-enable-color-600: #268661; /* Used as a background color for Primary button */
|
|
131
131
|
--button-hover-color-700: #176647; /* Used as a background color for Primary button */
|
|
132
|
-
--button-disabled-color-800: #
|
|
133
|
-
--button-enable-second-on-dark-bg-color-0: #
|
|
134
|
-
--button-hover-second-on-dark-bg-color-20: #
|
|
135
|
-
--button-pressed-second-on-dark-bg-color-40: #
|
|
136
|
-
--button-disabled-second-on-dark-bg-color-50: #
|
|
132
|
+
--button-disabled-color-800: #396f65; /* Used as a background color for Primary button */
|
|
133
|
+
--button-enable-second-on-dark-bg-color-0: #ffffff; /* Used as a stroke color for Secondary button. (on Dark bg) */
|
|
134
|
+
--button-hover-second-on-dark-bg-color-20: #ffffff33; /* Used as a background color for Secondary button. (on Dark bg) */
|
|
135
|
+
--button-pressed-second-on-dark-bg-color-40: #ffffff66; /* Used as a background color for Secondary button. (on Dark bg) */
|
|
136
|
+
--button-disabled-second-on-dark-bg-color-50: #f2f2f2; /* Used as a stroke color for Secondary button. (on Dark bg) */
|
|
137
137
|
--button-enable-second-error-color-800: #800020; /* Used as a stroke color for Secondary button */
|
|
138
|
-
--button-hover-second-error-color-300: #
|
|
139
|
-
--button-pressed-second-error-color-400: #
|
|
140
|
-
--button-disabled-second-error-color-400: #
|
|
141
|
-
--button-hover-second-error-on-dark-bg-color-300-40: #
|
|
142
|
-
--button-pressed-second-error-on-dark-bg-color-300-60: #
|
|
143
|
-
--button-disabled-second-error-on-dark-bg-color-300: #
|
|
138
|
+
--button-hover-second-error-color-300: #f9c801; /* Used as a background color for Secondary button */
|
|
139
|
+
--button-pressed-second-error-color-400: #ff9da9; /* Used as a background color for Secondary button */
|
|
140
|
+
--button-disabled-second-error-color-400: #ff9d49; /* Used as a stroke color for Secondary button. */
|
|
141
|
+
--button-hover-second-error-on-dark-bg-color-300-40: #f9c80166; /* Used as a background color for Secondary button, (on Dark bg) */
|
|
142
|
+
--button-pressed-second-error-on-dark-bg-color-300-60: #f9cbd199; /* Used as a background color for Secondary button, (on Dark bg) */
|
|
143
|
+
--button-disabled-second-error-on-dark-bg-color-300: #f9c801; /* Used as a stroke color for Secondary button. (on Dark bg) */
|
|
144
144
|
}
|
package/package.json
CHANGED