@fvc/utils 1.1.1 → 1.1.2

package/dist/lib/index.js

@@ -1 +1 @@
-var t=function(t){return"number"==typeof t||n(t)?"".concat(t,"px"):t},n=function(t){return/^[0-9]+$/.test(t)};export{t as cssVarResolver,n as isNumeric};
+var t=function(t){return/^[0-9]+$/.test(t)},n=function(n){return"number"==typeof n||t(n)?"".concat(n,"px"):n};export{n as cssVarResolver,t as isNumeric};

package/dist/lib/utils/src/assets/css/global.css

@@ -120,6 +120,7 @@ input[type='text'],
 input[type='password'],
 input[type='number'],
 textarea {
+  appearance: none;
   -webkit-appearance: none;
 }
 
@@ -273,6 +274,7 @@ button,
 html [type='button'],
 [type='reset'],
 [type='submit'] {
+  appearance: button;
   -webkit-appearance: button;
 }
 
@@ -295,6 +297,7 @@ input[type='time'],
 input[type='datetime-local'],
 input[type='month'] {
   -webkit-appearance: listbox;
+  appearance: listbox;
 }
 
 textarea {
@@ -333,16 +336,19 @@ progress {
 [type='search'] {
   outline-offset: -2px;
   -webkit-appearance: none;
+  appearance: none;
 }
 
 [type='search']::-webkit-search-cancel-button,
 [type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
+  appearance: none;
 }
 
 ::-webkit-file-upload-button {
   font: inherit;
   -webkit-appearance: button;
+  appearance: button;
 }
 
 output {

package/dist/lib/utils/src/assets/css/variables.css

@@ -1,123 +1,144 @@
 :root {
   /* Blue */
-  --blue-20: #eeeff6;
-  --blue-50: #e8edf6;
-  --blue-100: #e4e6f4;
-  --blue-150: #e5e9fc;
-  --blue-200: #daddec;
-  --blue-250: #d9deef;
-  --blue-300: #cdd1e4;
-  --blue-400: #4271a5;
-  --blue-500: #395ca6;
-  --blue-600: #4054b2;
-  --blue-700: #303f9f;
+  --blue-20: #EEEFF6;
+  --blue-50: #EBEDF6;
+  --blue-100: #E4E6F4;
+  --blue-150: #E5E9FC;
+  --blue-200: #DADDEC;
+  --blue-250: #D9DEEF;
+  --blue-300: #CDD1E4;
+  --blue-400: #4271A5;
+  --blue-500: #395CA6;
+  --blue-600: #4054B2;
+  --blue-700: #303F9F;
 
   /* Gray */
-  --gray-50: #f2f2f2;
-  --gray-100: #fafafa;
-  --gray-150: #ececec;
-  --gray-200: #dfdfdf;
-  --gray-250: #ebebeb;
-  --gray-300: #dadada;
-  --gray-400: #bbbbbb;
+  --gray-50: #F2F2F2;
+  --gray-100: #FAFAFA;
+  --gray-150: #ECECEC;
+  --gray-200: #DFDFDF;
+  --gray-250: #EBEBEB;
+  --gray-300: #DADADA;
+  --gray-400: #BBBBBB;
   --gray-500: #787878;
   --gray-600: #949494;
-  --gray-700: #7b7b7b;
-  --gray-800: #6d6d6d;
-  --gray-900: #4a4a4a;
+  --gray-700: #7B7B7B;
+  --gray-800: #6D6D6D;
+  --gray-900: #4A4A4A;
 
   /* Blue-gray */
-  --blue-gray-200: #d9deef;
-  --blue-gray-250: #dddaec;
-  --blue-gray-300: #cdd1e4;
-  --blue-gray-400: #75849a;
-  --blue-gray-500: #69778c;
-  --blue-gray-600: #696b78;
-  --blue-gray-700: #4d5868;
-  --blue-gray-800: #3d4655;
-  --blue-gray-900: #2e3848;
+  --blue-gray-200: #D9DEEF;
+  --blue-gray-250: #DDDAEC;
+  --blue-gray-300: #CDD1E4;
+  --blue-gray-400: #75849A;
+  --blue-gray-500: #69778C;
+  --blue-gray-600: #696878;
+  --blue-gray-700: #4D5868;
+  --blue-gray-800: #3D4655;
+  --blue-gray-900: #2E3848;
 
   /* Green */
-  --green-100: #d8fcd2;
-  --green-300-30: #93c3b0;
-  --green-300-50: #93c3b0;
-  --green-300: #93c3b0;
-  --green-400: #40dfa2;
+  --green-100: #D8FCD2;
+  --green-200: #DEEDEX;
+  --green-250: #C9E1D7;
+  --green-300: #93C3B0;
+  --green-400: #40DFA2;
   --green-600: #268661;
-  --green-700: #268661;
-  --green-800: #396f65;
+  --green-700: #176647;
+  --green-800: #396F65;
 
   /* Yellow-green */
-  --yellow-green-400: #cddc39;
-  --yellow-green-500: #afb42b;
+  --yellow-green-400: #CDDC39;
+  --yellow-green-500: #AFB42B;
 
   /* Red */
-  --red-100: #f5ece6;
-  --red-300-40: #f9cbd1;
-  --red-300-60: #f9cbd1;
-  --red-300: #f9cbd1;
-  --red-400: #ff9da9;
-  --red-600: #ff1f48;
-  --red-800: #b00020;
+  --red-100: #F5ECE6;
+  --red-200: #FDEAED;
+  --red-250: #FBE0E3;
+  --red-300: #F9CBD1;
+  --red-400: #FF9DA9;
+  --red-600: #FF1F48;
+  --red-800: #B00020;
 
   /* Orange */
-  --orange-100: #f5ece6;
-  --orange-200: #fff59b;
-  --orange-600: #dd9323;
+  --orange-100: #F5ECE6;
+  --orange-200: #FFF59B;
+  --orange-600: #DD9323;
 
   /* Neutrals */
-  --neutral-0: #ffffff;
+  --neutral-0: #FFFFFF; 
+  --neutral-0-20: #FFFFFF33;
+  --neutral-0-40: #FFFFFF66;
   --neutral-1000: #000000;
-
+      
   /* Black */
-  --black-1000: #2a2d37;
+  --black-1000: #2A2D37; 
 
   /* Text */
-  --body-text-color-1000: #2a2d37;
-  --secondary-text-color-600: #696878;
-  --support-text-color-300: #cdd1e4;
-  --white-text-color-0: #ffffff;
-  --link-on-dark-bg-color-400: #40dfa2;
-  --link-on-light-bg-color-500: #395ca6;
-  --menu-2nd-level-color-200: hsl(230, 32%, 89%);
-  --warning-text-color-800: #b00020;
-  --warning-text-on-dark-bg-color-400: #ff9da9;
-  --button-text-color-500: #268661;
+  --body-text-color-1000: #2A2D37; /* Used for body text and headlines on a light background */
+  --secondary-text-color-600: #696878; /* Used in labels and headings in tables */
+  --support-text-color-300: #CDD1E4; /* Used as a label color on a dark background and into Default UI elements */
+  --white-text-color-0: #FFFFFF; /* Used for body texts and headlines on a light background on a dark background */
+  --link-on-dark-bg-color-400: #40DFA2; /* Used on a dark background */
+  --link-on-light-bg-color-500: #395CA6; /* Used on a light background */
+  --menu-2nd-level-color-200: #DADDEC; /* Used in a default secondary menu */
+  --warning-text-color-800: #B00020; /* Used to draw attention to the text most often in a negative aspect (on a white bg) */
+  --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) */
+  --button-text-color-600: #268661; /* Used for the text in the secondary button */
 
   /* Background */
-  --card-bg-color-20: #eeeff6;
-  --main-content-bg-color-0: #ffffff;
-  --header-bg-color-700: #405868;
-  --task-overview-bg-color-800: #3d4655;
-  --primary-bg-color-900: #2e3848;
+  --card-bg-color-20: #EEEFF6; /* The primary color is text, which is used in many situations */
+  --main-content-bg-color-0: #FFFFFF; /* Used in labels and headings in tables on dark background */
+  --header-bg-color-700: #405868; /* More often used as a label color on a dark background and into Default UI elements */
+  --task-overview-bg-color-800: #3D4655; /* Used on a dark background */
+  --primary-bg-color-900: #2E3848; /* Used on a dark background */
+  --alert-bg-color-50: #F2F2F2; /* Alert message default background. */
 
   /* Overlay */
-  --tooltip-bg-color-900: #4a4a4a;
-  --popup-bg-color-20: #eeeff6;
+  --tooltip-bg-color-900: #4A4A4A; /* The primary color is text, which is used in many situations. */
+  --popup-bg-color-20: #EEEFF6;
 
   /* Border-line */
-  --element-b-line-color-400: #2a2d37;
-  --element-selected-b-line-color-400: #4271a5;
-  --frame-b-line-color-250: #d0deef;
-  --warning-b-line-on-light-bg-color-800: #b00020;
-  --warning-b-line-on-dark-bg-color-400: #ff9da9;
+  --element-b-line-color-400: #2A2D37; /* Border-line for default state of Text field. */
+  --element-selected-b-line-color-400: #4271A5; /* Border-line for selected state of Text field, Text area, Dropdown, Datetimepicker, Field range */
+  --frame-b-line-color-250: #D9DEEF; /* Border-line for Cards, Tables and Sections */
+  --warning-b-line-on-light-bg-color-800: #800020; /* Warning border-line for all elements on light background */
+  --warning-b-line-on-dark-bg-color-400: #FF9DA9; /* Warning border line for all elements on dark background */
 
   /* Icon */
-  --white-icon-color-0: #ffffff;
-  --warning-icon-color-800: #b00020;
-  --warning-icon-on-dark-bg-color-400: #ff9da9;
-  --primary-icon-color-1000: #2a2d37;
-  --link-icon-color-500: #395ca6;
-  --secondary-icon-on-dark-bg-color-500: #696878;
-  --secondary-icon-on-light-bg-color-500: #787878;
+  --white-icon-color-0: #FFFFFF; /* The primary color is text, which is used in many situations. */
+  --warning-icon-color-800: #800020; /* Most often used in labels and headings in tables */
+  --warning-icon-on-dark-bg-color-400: #FF9DA9; /* More often used as a label color on a dark background and into Default UI elements */
+  --primary-icon-color-1000: #2A2D37; /* Used on a dark background */
+  --link-icon-color-500: #395CA6; /* Used on a dark background */
+  --secondary-icon-on-dark-bg-color-600: #696878; /* Used for text and icon on dark backgrounds */
+  --secondary-icon-on-light-bg-color-500: #787878; /* Used for text and icon on light backgrounds */
 
   /* Badge (for Task overview, Cards & Table) */
-  --badge-card-table-0: #2a2d37;
-  --badge-success-color-600: #268661;
-  --badge-active-color-100: #2a2d37;
-  --badge-cancel-color-900: #4a4a4a;
-  --badge-in-progress-color-500: #949494;
-  --badge-warning-color-800: #b00020;
-  --badge-basic-color-400: #4271a5;
-  --badge-paused-color-100: #fff598;
+  --badge-success-color-600: #268661; /* The primary color is text, which is used in many situations */
+  --badge-active-color-100: #2A2D37; /* Used in labels and headings in tables. */
+  --badge-cancel-color-900: #4A4A4A; /* Used as a label color on a stark background and into Default UI elements */
+  --badge-in-progress-color-600: #949494; /* Used for states with "in progress" state. */
+  --badge-warning-color-800: #800020; /* used for warned states */
+  --badge-basic-color-400: #4271A5; /* Used for regular states */
+  --badge-paused-color-100: #FFF59B; /* Used for suspended or paused states */
+
+  /* Button Background */
+  --button-disabled-secondary-color-300: #93C3B04D; /* Used as a stroke color for Secondary button. */
+  --button-hover-secondary-color-300: #93C3B080; /* Used as a background color for Secondary button. */
+  --button-pressed-secondary-color-300: #93C3B0; /* Used as a background color for Secondary button */
+  --button-enable-color-600: #268661; /* Used as a background color for Primary button */
+  --button-hover-color-700: #176647; /* Used as a background color for Primary button */
+  --button-disabled-color-800: #396F65; /* Used as a background color for Primary button */
+  --button-enable-second-on-dark-bg-color-0: #FFFFFF; /* Used as a stroke color for Secondary button. (on Dark bg) */
+  --button-hover-second-on-dark-bg-color-20: #FFFFFF33; /* Used as a background color for Secondary button. (on Dark bg) */
+  --button-pressed-second-on-dark-bg-color-40: #FFFFFF66; /* Used as a background color for Secondary button. (on Dark bg) */
+  --button-disabled-second-on-dark-bg-color-50: #F2F2F2; /* Used as a stroke color for Secondary button. (on Dark bg) */
+  --button-enable-second-error-color-800: #800020; /* Used as a stroke color for Secondary button */
+  --button-hover-second-error-color-300: #F9C801; /* Used as a background color for Secondary button */
+  --button-pressed-second-error-color-400: #FF9DA9; /* Used as a background color for Secondary button */
+  --button-disabled-second-error-color-400: #FF9D49; /* Used as a stroke color for Secondary button. */
+  --button-hover-second-error-on-dark-bg-color-300-40: #F9C80166; /* Used as a background color for Secondary button, (on Dark bg) */
+  --button-pressed-second-error-on-dark-bg-color-300-60: #F9CBD199; /* Used as a background color for Secondary button, (on Dark bg) */
+  --button-disabled-second-error-on-dark-bg-color-300: #F9C801; /* Used as a stroke color for Secondary button. (on Dark bg) */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fvc/utils",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/utils/src/index.d.ts",
   "exports": {
@@ -21,4 +21,4 @@
   "dependencies": {
     "react": "^18.0.0"
   }
-}
+}