@laerdal/life-react-components 3.6.0 → 3.6.1

package/dist/styles/colors.cjs

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var COLORS = {
+  //do not use these constants to get colors, use 'getColor' function instead
   black: '#1F1F1F',
   // Neutrals / Black
   white: '#FFFFFF',
@@ -110,8 +111,12 @@ var COLORS = {
   toast_info: '#2E7FA1',
   toast_success: '#37A851',
   toast_warning: '#E97116',
-  toast_error: '#DC3449'
+  toast_error: '#DC3449',
+  getColor: function getColor(name, theme) {
+    if (theme && theme.colors && theme.colors[name]) return theme.colors[name];
+    return COLORS[name];
+  }
 };
 var _default = COLORS;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=colors.cjs.map

package/dist/styles/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["const COLORS = {\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n};\r\n\r\nexport default COLORS;\r\n"],"mappings":"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"}
+{"version":3,"file":"colors.cjs","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","getColor","name","theme","colors","_default","exports"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  //do not use these constants to get colors, use 'getColor' function instead\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n\r\n\r\n  getColor: (name: string, theme: any): string => {\r\n    if (theme && theme.colors && theme.colors[name])\r\n      return theme.colors[name];\r\n    return COLORS[name as keyof typeof COLORS] as string;\r\n  }\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/styles/colors.d.ts

@@ -85,5 +85,6 @@ declare const COLORS: {
     toast_success: string;
     toast_warning: string;
     toast_error: string;
+    getColor: (name: string, theme: any) => string;
 };
 export default COLORS;

package/dist/styles/colors.js

@@ -1,4 +1,5 @@
 var COLORS = {
+  //do not use these constants to get colors, use 'getColor' function instead
   black: '#1F1F1F',
   // Neutrals / Black
   white: '#FFFFFF',
@@ -104,7 +105,11 @@ var COLORS = {
   toast_info: '#2E7FA1',
   toast_success: '#37A851',
   toast_warning: '#E97116',
-  toast_error: '#DC3449'
+  toast_error: '#DC3449',
+  getColor: function getColor(name, theme) {
+    if (theme && theme.colors && theme.colors[name]) return theme.colors[name];
+    return COLORS[name];
+  }
 };
 export default COLORS;
 //# sourceMappingURL=colors.js.map

package/dist/styles/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["const COLORS = {\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n};\r\n\r\nexport default COLORS;\r\n"],"mappings":"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"}
+{"version":3,"file":"colors.js","names":["COLORS","black","white","grey","primary","accent1","accent2","correct","warning","critical","primary_20","primary_50","primary_100","primary_200","primary_300","primary_400","primary_500","primary_600","primary_700","primary_800","accent1_20","accent1_50","accent1_100","accent1_200","accent1_300","accent1_400","accent1_500","accent1_600","accent1_700","accent1_800","accent2_20","accent2_50","accent2_100","accent2_200","accent2_300","accent2_400","accent2_500","accent2_600","accent2_700","accent2_800","correct_20","correct_50","correct_100","correct_200","correct_300","correct_400","correct_500","correct_600","correct_700","correct_800","warning_20","warning_50","warning_100","warning_200","warning_300","warning_400","warning_500","warning_600","warning_700","warning_800","critical_20","critical_50","critical_100","critical_200","critical_300","critical_400","critical_500","critical_600","critical_700","critical_800","neutral_20","neutral_50","neutral_100","neutral_200","neutral_300","neutral_400","neutral_500","neutral_600","neutral_700","neutral_800","focus","focus_25","white_gradient","toast_info","toast_success","toast_warning","toast_error","getColor","name","theme","colors"],"sources":["../../src/styles/colors.ts"],"sourcesContent":["import { useContext } from 'react';\r\nimport { ThemeContext } from 'styled-components';\r\n\r\nconst COLORS = {\r\n  //do not use these constants to get colors, use 'getColor' function instead\r\n  black: '#1F1F1F', // Neutrals / Black\r\n  white: '#FFFFFF', // Neutrals / White\r\n  grey: '#949494', // Neutrals / grey\r\n  primary: '#2E7FA1', // Brand / Primary - Core 500\r\n  accent1: '#25837E', // Brand / Accent 1 - Core 500\r\n  accent2: '#EAC785', // Brand / Accent 2 - Core 200\r\n  correct: '#37A851', // Semantic / Correct - Core 400\r\n  warning: '#E97116', // Semantic / Warning  - Core 400\r\n  critical: '#DC3449', // Semantic / Critical - Core 500\r\n\r\n  primary_20: '#F1FBFE',\r\n  primary_50: '#E3F5FC',\r\n  primary_100: '#D4E9F2',\r\n  primary_200: '#A9D3E5',\r\n  primary_300: '#7FBCD7',\r\n  primary_400: '#519DBD',\r\n  primary_500: '#2E7FA1', // 500 Core\r\n  primary_600: '#276D8B',\r\n  primary_700: '#215369',\r\n  primary_800: '#163746',\r\n\r\n  accent1_20: '#EDFCFB',\r\n  accent1_50: '#E4F6F6',\r\n  accent1_100: '#C8EEEC',\r\n  accent1_200: '#98D8D5',\r\n  accent1_300: '#6BC2BE',\r\n  accent1_400: '#3EA39E',\r\n  accent1_500: '#25837E', // 500 Core\r\n  accent1_600: '#23716D',\r\n  accent1_700: '#145653',\r\n  accent1_800: '#0F3937',\r\n\r\n  accent2_20: '#FFFAEE',\r\n  accent2_50: '#FDF0DE',\r\n  accent2_100: '#F8E2BF',\r\n  accent2_200: '#EAC785', // 200 Core\r\n  accent2_300: '#D6AD61',\r\n  accent2_400: '#B58E45',\r\n  accent2_500: '#92702F',\r\n  accent2_600: '#806128',\r\n  accent2_700: '#604920',\r\n  accent2_800: '#42300F',\r\n\r\n  correct_20: '#ECFEF1',\r\n  correct_50: '#E2F8E4',\r\n  correct_100: '#CCEED2',\r\n  correct_200: '#A0D9AD',\r\n  correct_300: '#77C589',\r\n  correct_400: '#37A851', // 400 Core\r\n  correct_500: '#14892F',\r\n  correct_600: '#13772A',\r\n  correct_700: '#025A15',\r\n  correct_800: '#003D0E',\r\n\r\n  warning_20: '#FEF7F1',\r\n  warning_50: '#FDF0E7',\r\n  warning_100: '#FCDDC5',\r\n  warning_200: '#F8C096',\r\n  warning_300: '#F4A162',\r\n  warning_400: '#E97116', // 400 Core\r\n  warning_500: '#C45402',\r\n  warning_600: '#AD4B00',\r\n  warning_700: '#803700',\r\n  warning_800: '#572600',\r\n\r\n  critical_20: '#FEF5F7',\r\n  critical_50: '#FEECF1',\r\n  critical_100: '#FDDEE2',\r\n  critical_200: '#FDBAC2',\r\n  critical_300: '#FD96A4',\r\n  critical_400: '#FC5A6F',\r\n  critical_500: '#DC3449', // 500 Core\r\n  critical_600: '#C32238',\r\n  critical_700: '#9C0D1D',\r\n  critical_800: '#6B0613',\r\n\r\n  neutral_20: '#FAFAFA', // 020 Core\r\n  neutral_50: '#F2F2F2',\r\n  neutral_100: '#E5E5E5',\r\n  neutral_200: '#CCCCCC',\r\n  neutral_300: '#B3B3B3',\r\n  neutral_400: '#949494',\r\n  neutral_500: '#767676',\r\n  neutral_600: '#666666',\r\n  neutral_700: '#4D4D4D',\r\n  neutral_800: '#333333',\r\n\r\n  focus: 'rgba(46, 127, 161, 1)', // Semantic / Focus 100%\r\n  focus_25: 'rgba(46, 127, 161, 0.25)', // Semantic / Focus 25%\r\n\r\n  white_gradient: 'linear-gradient(255deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%)',\r\n\r\n  toast_info: '#2E7FA1',\r\n  toast_success: '#37A851',\r\n  toast_warning: '#E97116',\r\n  toast_error: '#DC3449',\r\n\r\n\r\n  getColor: (name: string, theme: any): string => {\r\n    if (theme && theme.colors && theme.colors[name])\r\n      return theme.colors[name];\r\n    return COLORS[name as keyof typeof COLORS] as string;\r\n  }\r\n};\r\n\r\nexport default COLORS;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/styles/design-tokens/dark/tokens.css

@@ -0,0 +1,481 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --life-color-bg-fill-accent1: #25837e; /* Use for fill backgrounds on elements that need accentuation. */
+  --life-color-bg-fill-accent1-active: #0f3937; /* The active state fill background color for elements that need accentuation. */
+  --life-color-bg-fill-accent1-hover: #145653; /* The hover state fill background color for elements that need accentuation. */
+  --life-color-bg-fill-accent2: #eac785; /* Use for fill backgrounds on elements that need accentuation and differentiation from the Accent 1 color. */
+  --life-color-bg-fill-accent2-active: #d6ad61; /* The active state fill background color for elements that need accentuation and differentiation from the Accent 1 color. */
+  --life-color-bg-fill-accent2-hover: #f8e2bf; /* The hover state fill background color for elements that need accentuation and differentiation from the Accent 1 color. */
+  --life-color-bg-fill-active: #163746; /* The default pressed state fill background color. */
+  --life-color-bg-fill-critical: #dc3449; /* Use for fill backgrounds communicating critical information, like destructive actions. */
+  --life-color-bg-fill-critical-active: #6b0613; /* The active state fill background color for critical information. */
+  --life-color-bg-fill-critical-hover: #9c0d1d; /* The hover state fill background color for critical information. */
+  --life-color-bg-fill-default: #e3f5fc; /* The default background color for elements in the foreground of the UI with a small surface area. */
+  --life-color-bg-fill-disabled: #4d4d4d; /* The disabled state fill background color for elements with a small surface area, like buttons. */
+  --life-color-bg-fill-hover: #276d8b; /* The default hover state fill background color. */
+  --life-color-bg-fill-inverse: #f2f2f2; /* The default fill background color for components on a dark background. */
+  --life-color-bg-fill-inverse-active: #7fbcd7; /* The inverse pressed state color for background fills. */
+  --life-color-bg-fill-inverse-disabled: #4d4d4d; /* The disabled state fill background color for components on a dark background. */
+  --life-color-bg-fill-inverse-hover: #a9d3e5; /* The inverse hover state color for background fills. */
+  --life-color-bg-fill-positive: #14892f; /* Use for fill backgrounds communicating positive information. */
+  --life-color-bg-fill-positive-active: #003d0e; /* The active state fill background color for positive information. */
+  --life-color-bg-fill-positive-hover: #025a15; /* The hover state fill background color for positive information. */
+  --life-color-bg-fill-primary: #2e7fa1; /* The fill background color for elements with the highest level of importance, like primary buttons. */
+  --life-color-bg-fill-primary-active: #163746; /* The active state fill background color for elements with the highest level of importance. */
+  --life-color-bg-fill-primary-hover: #215369; /* The hover state fill background color for elements with the highest level of importance. */
+  --life-color-bg-fill-samaritan-gradient-0: #cc75cc; /* Use for fill backgrounds on elements related to AI. */
+  --life-color-bg-fill-samaritan-gradient-100: #8091d1; /* Use for fill backgrounds on elements related to AI. */
+  --life-color-bg-fill-selected: #2e7fa1; /* Use for fill backgrounds on selected elements. */
+  --life-color-bg-fill-warning: #e97116; /* Use for fill backgrounds communicating caution. */
+  --life-color-bg-fill-warning-active: #f4a162; /* The active state fill background color for warnings. */
+  --life-color-bg-fill-warning-hover: #f8c096; /* The hover state fill background color for warnings. */
+  --life-color-bg-overlay: rgba(26, 26, 26, 0.25); /* Use for overlays, for example behind modals. */
+  --life-color-bg-overlay-dark: rgba(26, 26, 26, 0.5); /* Use for overlays, for example behind modals. */
+  --life-color-bg-overlay-darker: rgba(26, 26, 26, 0.75); /* Use for overlays, for example behind modals. */
+  --life-color-bg-surface-accent1: #0f3937; /* Use for surfaces that need accentuation. */
+  --life-color-bg-surface-accent1-active: #0c2a28; /* The active state color for surfaces that need accentuation. */
+  --life-color-bg-surface-accent1-hover: #145653; /* The hover state color for surfaces that need accentuation. */
+  --life-color-bg-surface-accent2: #42300f; /* Use for surfaces that need accentuation and differentiation from the Accent 1 color. */
+  --life-color-bg-surface-accent2-active: #2f240f; /* The active state color for surfaces that need accentuation. */
+  --life-color-bg-surface-accent2-hover: #604920; /* The hover state color for surfaces that need accentuation. */
+  --life-color-bg-surface-active: #0f2934; /* The active state color for surfaces. */
+  --life-color-bg-surface-critical: #6b0613; /* Use for backgrounds communicating critical information, like banners. */
+  --life-color-bg-surface-critical-active: #461117; /* The active state color for surfaces communicating critical information. */
+  --life-color-bg-surface-critical-hover: #6b0613; /* The hover state color for surfaces communicating critical information. */
+  --life-color-bg-surface-default: #262626; /* The default background color for UI elements. */
+  --life-color-bg-surface-disabled: #333333; /* The disabled state surface color. */
+  --life-color-bg-surface-high: #333333; /* The default background color for high-level surfaces (visible in Dark mode). */
+  --life-color-bg-surface-hover: #163746; /* The hover state color for surfaces. */
+  --life-color-bg-surface-inverse: #333333; /* The background color for inversed components, like the footer. */
+  --life-color-bg-surface-inverse-active: #0f2934; /* The active state color for surfaces on a dark background. */
+  --life-color-bg-surface-inverse-hover: #163746; /* The hover state color for surfaces on a dark background. */
+  --life-color-bg-surface-inverse-selected: #4d4d4d; /* The selected state color for surfaces on a dark background. */
+  --life-color-bg-surface-low: #1a1a1a; /* The background color used for the base canvas. */
+  --life-color-bg-surface-low-opacity-0: rgba(26, 26, 26, 0);
+  --life-color-bg-surface-low-opacity-50: rgba(26, 26, 26, 0.5);
+  --life-color-bg-surface-low-opacity-75: rgba(26, 26, 26, 0.75);
+  --life-color-bg-surface-low-subtle: #1a1a1a; /* Used as a dimmed down background color for the base canvas, like behind dashboards (visible in Light mode). */
+  --life-color-bg-surface-low-subtle-opacity-0: rgba(38, 38, 38, 0);
+  --life-color-bg-surface-low-subtle-opacity-50: rgba(38, 38, 38, 0.5);
+  --life-color-bg-surface-low-subtle-opacity-75: rgba(38, 38, 38, 0.75);
+  --life-color-bg-surface-low-subtle-opacity-100: #1a1a1a;
+  --life-color-bg-surface-neutral: #4d4d4d; /* The surface background color for elements with a neutral message. */
+  --life-color-bg-surface-opacity-0: rgba(38, 38, 38, 0);
+  --life-color-bg-surface-opacity-50: rgba(38, 38, 38, 0.5);
+  --life-color-bg-surface-opacity-75: rgba(38, 38, 38, 0.75);
+  --life-color-bg-surface-positive: #003d0e; /* Use for backgrounds communicating positive information, like banners. */
+  --life-color-bg-surface-positive-active: #062c0f; /* The active state color for surfaces communicating positive information. */
+  --life-color-bg-surface-positive-hover: #003d0e; /* The hover state color for surfaces communicating positive information. */
+  --life-color-bg-surface-primary: #163746; /* The surface background color for elements with the highest level of importance. */
+  --life-color-bg-surface-primary-active: #0f2934; /* The active state color for surfaces with the highest level of importance. */
+  --life-color-bg-surface-primary-hover: #215369; /* The hover state color for surfaces with the highest level of importance. */
+  --life-color-bg-surface-samaritan-gradient-0: #521e52;
+  --life-color-bg-surface-samaritan-gradient-100: #24315b;
+  --life-color-bg-surface-selected: #4d4d4d; /* The selected state color for surfaces. */
+  --life-color-bg-surface-subtle: #333333; /* The background color for UI elements that need a subtle emphasis. */
+  --life-color-bg-surface-warning: #572600; /* Use for backgrounds communicating caution, like banners. */
+  --life-color-bg-surface-warning-active: #3f1b01; /* The active state color for surfaces communicating caution. */
+  --life-color-bg-surface-warning-hover: #572600; /* The hover state color for surfaces communicating caution. */
+  --life-color-border-accent1: #6bc2be; /* Use for borders on elements that need accentuation. */
+  --life-color-border-accent2: #eac785; /* Use for borders on elements that need a distinct accentuation. */
+  --life-color-border-active: #7fbcd7; /* The default active state border color. */
+  --life-color-border-critical: #fd96a4; /* Use for borders communicating critical information. */
+  --life-color-border-critical-active: #dc3449; /* The pressed state color for borders communicating critical information. */
+  --life-color-border-critical-hover: #fc5a6f; /* The hover state color for borders communicating critical information. */
+  --life-color-border-default: #949494; /* The default border color. */
+  --life-color-border-disabled: #4d4d4d; /* Border color for elements in disabled state. */
+  --life-color-border-focus: #f2f2f2; /* Color for the focus ring on any element in focused state. */
+  --life-color-border-hover: #a9d3e5; /* The default hover state border color. */
+  --life-color-border-inverse: #e5e5e5; /* Use for borders on a dark background. */
+  --life-color-border-inverse-active: #7fbcd7; /* The active state color for borders on a dark background. */
+  --life-color-border-inverse-disabled: #666666; /* Border color for elements in disabled state on a dark background. */
+  --life-color-border-inverse-hover: #a9d3e5; /* The hover state color for borders on a dark background. */
+  --life-color-border-positive: #77c589; /* Use for borders communicating positive information. */
+  --life-color-border-positive-active: #13772a; /* The pressed state color for borders on elements communicating positive information. */
+  --life-color-border-positive-hover: #14892f; /* The hover state color for borders on elements communicating positive information. */
+  --life-color-border-primary: #7fbcd7; /* Use for borders on important components. */
+  --life-color-border-primary-active: #519dbd; /* The pressed state color for borders on important components. */
+  --life-color-border-primary-hover: #7fbcd7; /* The hover state color for borders on important components. */
+  --life-color-border-samaritan-gradient-0: #cc75cc; /* Use for fill backgrounds on elements related to AI. */
+  --life-color-border-samaritan-gradient-100: #8091d1; /* Use for fill backgrounds on elements related to AI. */
+  --life-color-border-selected: #2e7fa1; /* Use for borders on selected elements. */
+  --life-color-border-subtle: #4d4d4d; /* The border color for elements that need a subtle emphasis. */
+  --life-color-border-warning: #f4a162; /* Use for borders communicating caution. */
+  --life-color-border-warning-active: #ad4b00; /* The pressed state color for borders on elements communicating caution. */
+  --life-color-border-warning-hover: #c45402; /* The hover state color for borders on elements communicating caution. */
+  --life-color-category-1: #5f73ba;
+  --life-color-category-2: #b58e45;
+  --life-color-category-3: #25837e;
+  --life-color-category-4: #d87a63;
+  --life-color-category-5: #8969a5;
+  --life-color-category-6: #7d9e5c;
+  --life-color-category-7: #af5a85;
+  --life-color-category-8: #519dbd;
+  --life-color-category-als: #bf5641;
+  --life-color-category-heartsaver: #697899;
+  --life-color-category-nrp-indigo: #676fa3;
+  --life-color-category-nrp-teal: #237e74;
+  --life-color-category-pals: #7d6cb1;
+  --life-color-category-provider: #447fc1;
+  --life-color-category-responder: #0f7f93;
+  --life-color-category-rqi-nrp: #547e7e;
+  --life-color-category-rqi-t: #ffc72c;
+  --life-color-cpr-critical: #fc5a6f;
+  --life-color-cpr-inactive: #2e7fa1;
+  --life-color-cpr-indicator: #e5e5e5;
+  --life-color-cpr-positive: #37a851;
+  --life-color-cpr-warning: #e97116;
+  --life-color-icon-accent1: #6bc2be; /* Use for standalone icons that needs accentuation. */
+  --life-color-icon-accent2: #d6ad61; /* Use for standalone icons that needs a distinct accentuation. */
+  --life-color-icon-active: #f1fbfe; /* The default pressed state color for standalone icons on interactive elements. */
+  --life-color-icon-critical: #fd96a4; /* Use for standalone icons communicating critical information. */
+  --life-color-icon-critical-active: #fc5a6f; /* The pressed state color for standalone icons communicating critical information. */
+  --life-color-icon-critical-hover: #fdbac2; /* The hover state standalone icons color for critical information. */
+  --life-color-icon-default: #f2f2f2; /* The default icon color. Use for standalone icons and icon-only buttons. */
+  --life-color-icon-disabled: #767676; /* Use for standalone icons in disabled state. */
+  --life-color-icon-hover: #d4e9f2; /* The default hover state color for standalone icons on interactive elements. */
+  --life-color-icon-inverse: #e5e5e5; /* Use for standalone icons on an inverse surface background. */
+  --life-color-icon-inverse-active: #7fbcd7; /* The active state color for standalone icons on a dark background. */
+  --life-color-icon-inverse-disabled: #666666; /* Use for standalone icons in disabled state on an inverse background. */
+  --life-color-icon-inverse-hover: #a9d3e5; /* The hover state color for standalone icons on a dark background. */
+  --life-color-icon-on-fill-accent1: #ffffff; /* Use for text on a fill-accent1 background. */
+  --life-color-icon-on-fill-accent2: #604920; /* Use for standalone icons on a fill-accent2 background. */
+  --life-color-icon-on-fill-critical: #feecf1; /* Use for standalone icons on a fill-critical background. */
+  --life-color-icon-on-fill-default: #4d4d4d; /* Use for standalone icons on a default fill background. */
+  --life-color-icon-on-fill-disabled: #767676; /* Use for standalone icons in disabled state on fill backgrounds. */
+  --life-color-icon-on-fill-inverse: #333333; /* Use for standalone icons on a fill-inverse background. */
+  --life-color-icon-on-fill-inverse-disabled: #767676; /* Use for standalone icons on a fill-inverse-disabled background. */
+  --life-color-icon-on-fill-positive: #ffffff; /* Use for standalone icons on a fill-positive background. */
+  --life-color-icon-on-fill-primary: #ffffff; /* Use for standalone icons on a fill-primary background. */
+  --life-color-icon-on-fill-samaritan: #ffffff; /* Use for icons on a fill-samaritan background. */
+  --life-color-icon-on-fill-warning: #ffffff; /* Use for standalone icons on a fill-warning background. */
+  --life-color-icon-positive: #77c589; /* Use for standalone icons communicating positive information. */
+  --life-color-icon-positive-active: #37a851; /* The pressed state color for standalone icons communicating positive information. */
+  --life-color-icon-positive-hover: #a0d9ad; /* The hover state color for standalone icons communicating positive information. */
+  --life-color-icon-primary: #7fbcd7; /* Use for standalone icons on prominent components. */
+  --life-color-icon-primary-active: #519dbd; /* The pressed state color for standalone icons on prominent components. */
+  --life-color-icon-primary-hover: #a9d3e5; /* The hover state color for standalone icons on prominent components. */
+  --life-color-icon-samaritan: #ffebff; /* Use for icons related to AI. */
+  --life-color-icon-selected: #2e7fa1; /* The color for selected state for standalone icons */
+  --life-color-icon-subtle: #e5e5e5; /* The subtle color for standalone icons. */
+  --life-color-icon-warning: #f4a162; /* Use for standalone icons communicating caution. */
+  --life-color-icon-warning-active: #e97116; /* The pressed state color for standalone icons communicating caution. */
+  --life-color-icon-warning-hover: #f8c096; /* The hover state color for standalone icons communicating caution. */
+  --life-color-quiz-button-bg-fill-active: #23716d; /* The active state color for the Quiz button fill area. */
+  --life-color-quiz-button-bg-fill-default: #145653; /* The color for the Quiz button fill area. */
+  --life-color-quiz-button-bg-fill-hover: #25837e; /* The hover state color for the Quiz button fill area. */
+  --life-color-quiz-button-bg-fill-selected: #23716d; /* The selected state color for the Quiz button fill area. */
+  --life-color-quiz-button-bg-surface-active: #0f3937; /* The active state color for the Quiz button surface. */
+  --life-color-quiz-button-bg-surface-default: #0f3937; /* The surface color for the Quiz button. */
+  --life-color-quiz-button-bg-surface-hover: #145653; /* The hover state color for the Quiz button surface. */
+  --life-color-quiz-button-bg-surface-selected: #145653; /* The selected state color for the Quiz button surface. */
+  --life-color-quiz-button-icon-on-fill: #f2f2f2; /* The color for the icon used in the Quiz button. */
+  --life-color-text-accent1: #98d8d5; /* Use for text that needs accentuation. */
+  --life-color-text-accent2: #eac785; /* Use for text that needs a distinct accentuation. */
+  --life-color-text-active: #a9d3e5; /* The default pressed state color for text on interactive elements. */
+  --life-color-text-critical: #fdbac2; /* Use for text communicating critical information, like input errors or destructive actions. */
+  --life-color-text-critical-active: #fc5a6f; /* The pressed state text color for critical information. */
+  --life-color-text-critical-hover: #fd96a4; /* The hover state text color for critical information. */
+  --life-color-text-default: #f2f2f2; /* The default text color. */
+  --life-color-text-disabled: #666666; /* Use for text in disabled state. */
+  --life-color-text-hover: #d4e9f2; /* The default hover state color for text on interactive elements. */
+  --life-color-text-inverse: #fafafa; /* Use for text on an inverse surface background. */
+  --life-color-text-inverse-active: #7fbcd7; /* The active state color for text on a dark background. */
+  --life-color-text-inverse-disabled: #666666; /* Use for text in disabled state on an inverse background. */
+  --life-color-text-inverse-hover: #a9d3e5; /* The hover state color for text on a dark background. */
+  --life-color-text-link: #fafafa; /* The default color for links. */
+  --life-color-text-link-accent1: #c8eeec; /* The color for links on elements that need accentuation. */
+  --life-color-text-link-accent1-active: #3ea39e; /* The pressed state color for links on elements that need accentuation. */
+  --life-color-text-link-accent1-hover: #6bc2be; /* The hover state color for links on elements that need accentuation. */
+  --life-color-text-link-accent2: #f8e2bf; /* The color for links on elements that need a distinct accentuation. */
+  --life-color-text-link-accent2-active: #b58e45; /* The pressed state link color for elements that need a distinct accentuation. */
+  --life-color-text-link-accent2-hover: #d6ad61; /* The hover state link color for elements that need a distinct accentuation. */
+  --life-color-text-link-active: #949494; /* The pressed state color for links. */
+  --life-color-text-link-critical: #fddee2; /* The color for links on elements that communicate critical information. */
+  --life-color-text-link-critical-active: #fc5a6f; /* The pressed state link color for critical information. */
+  --life-color-text-link-critical-hover: #fd96a4; /* The hover state link color for critical information. */
+  --life-color-text-link-hover: #b3b3b3; /* The hover state color for links. */
+  --life-color-text-link-inverse: #ffffff; /* The color for links on an inverse surface background. */
+  --life-color-text-link-positive: #cceed2; /* The color for links on elements that communicate positive information. */
+  --life-color-text-link-positive-active: #37a851; /* The pressed state link color for positive information. */
+  --life-color-text-link-positive-hover: #77c589; /* The hover state link color for positive information. */
+  --life-color-text-link-primary: #d4e9f2; /* The color for links on elements with a high level of importance. */
+  --life-color-text-link-primary-active: #519dbd; /* The pressed state color for links with a high level of importance. */
+  --life-color-text-link-primary-hover: #7fbcd7; /* The hover state color for links with a high level of importance. */
+  --life-color-text-link-samaritan: #fbdbfb; /* The color for links on elements related to AI. */
+  --life-color-text-link-samaritan-active: #cc75cc; /* The pressed state link color for elements related to AI. */
+  --life-color-text-link-samaritan-hover: #e29ce2; /* The hover state link color for elements related to AI. */
+  --life-color-text-link-warning: #fce3cf; /* The color for links on elements that communicate caution. */
+  --life-color-text-link-warning-active: #e97116; /* The pressed state link color for information communicating caution. */
+  --life-color-text-link-warning-hover: #f4a162; /* The hover state link color for information communicating caution. */
+  --life-color-text-on-fill-accent1: #ffffff; /* Use for text on a fill-accent1 background. */
+  --life-color-text-on-fill-accent2: #42300f; /* Use for text on a fill-accent2 background. */
+  --life-color-text-on-fill-critical: #ffffff; /* Use for text on a fill-critical background. */
+  --life-color-text-on-fill-default: #333333; /* Use for text on default fill background. */
+  --life-color-text-on-fill-disabled: #767676; /* Use for text in disabled state on fill backgrounds. */
+  --life-color-text-on-fill-inverse: #262626; /* Use for text on a fill-inverse background. */
+  --life-color-text-on-fill-inverse-disabled: #767676; /* Use for text on a fill-inverse-disabled background. */
+  --life-color-text-on-fill-positive: #ffffff; /* Use for text on a fill-positive background. */
+  --life-color-text-on-fill-primary: #ffffff; /* Use for text on a fill-primary background. */
+  --life-color-text-on-fill-samaritan: #1a1a1a; /* Use for text on a fill-samaritan background. */
+  --life-color-text-on-fill-warning: #3f1b01; /* Use for text on a fill-warning background. */
+  --life-color-text-positive: #a0d9ad; /* Use for text communicating positive information. */
+  --life-color-text-primary: #d4e9f2; /* Use for prominent text. */
+  --life-color-text-primary-active: #519dbd; /* The pressed state color for prominent text. */
+  --life-color-text-primary-hover: #7fbcd7; /* The hover state color for prominent text. */
+  --life-color-text-samaritan: #ffebff; /* Use for text related to AI. */
+  --life-color-text-subtle: #cccccc; /* Use for less prominent text, such as navigation, subtle buttons, and input field labels. */
+  --life-color-text-warning: #f8c096; /* Use for text communicating caution. */
+  --life-color-accent1-100: #c8eeec;
+  --life-color-accent1-200: #98d8d5;
+  --life-color-accent1-300: #6bc2be;
+  --life-color-accent1-400: #3ea39e;
+  --life-color-accent1-500: #25837e;
+  --life-color-accent1-600: #23716d;
+  --life-color-accent1-700: #145653;
+  --life-color-accent1-800: #0f3937;
+  --life-color-accent1-850: #0c2a28;
+  --life-color-accent1-020: #edfcfb;
+  --life-color-accent1-050: #e4f6f6;
+  --life-color-accent2-100: #f8e2bf;
+  --life-color-accent2-200: #eac785;
+  --life-color-accent2-300: #d6ad61;
+  --life-color-accent2-400: #b58e45;
+  --life-color-accent2-500: #92702f;
+  --life-color-accent2-600: #806128;
+  --life-color-accent2-700: #604920;
+  --life-color-accent2-800: #42300f;
+  --life-color-accent2-850: #2f240f;
+  --life-color-accent2-020: #fffaee;
+  --life-color-accent2-050: #fdf0de;
+  --life-color-alpha-black-0: rgba(26, 26, 26, 0);
+  --life-color-alpha-black-25: rgba(26, 26, 26, 0.25);
+  --life-color-alpha-black-50: rgba(26, 26, 26, 0.5);
+  --life-color-alpha-black-75: rgba(26, 26, 26, 0.75);
+  --life-color-alpha-primary500-75: rgba(46, 127, 161, 0.75);
+  --life-color-alpha-primary700-75: rgba(33, 83, 105, 0.75);
+  --life-color-alpha-white-0: rgba(255, 255, 255, 0);
+  --life-color-alpha-white-25: rgba(255, 255, 255, 0.2);
+  --life-color-alpha-white-50: rgba(255, 255, 255, 0.5);
+  --life-color-alpha-white-75: rgba(255, 255, 255, 0.75);
+  --life-color-base-black: #1a1a1a;
+  --life-color-base-white: #ffffff;
+  --life-color-critical-100: #fddee2;
+  --life-color-critical-200: #fdbac2;
+  --life-color-critical-300: #fd96a4;
+  --life-color-critical-400: #fc5a6f;
+  --life-color-critical-500: #dc3449;
+  --life-color-critical-600: #c32238;
+  --life-color-critical-700: #9c0d1d;
+  --life-color-critical-800: #6b0613;
+  --life-color-critical-850: #461117;
+  --life-color-critical-020: #fef5f7;
+  --life-color-critical-050: #feecf1;
+  --life-color-neutral-100: #e5e5e5;
+  --life-color-neutral-200: #cccccc;
+  --life-color-neutral-300: #b3b3b3;
+  --life-color-neutral-400: #949494;
+  --life-color-neutral-500: #767676;
+  --life-color-neutral-600: #666666;
+  --life-color-neutral-700: #4d4d4d;
+  --life-color-neutral-800: #333333;
+  --life-color-neutral-850: #262626;
+  --life-color-neutral-020: #fafafa;
+  --life-color-neutral-050: #f2f2f2;
+  --life-color-positive-100: #cceed2;
+  --life-color-positive-200: #a0d9ad;
+  --life-color-positive-300: #77c589;
+  --life-color-positive-400: #37a851;
+  --life-color-positive-500: #14892f;
+  --life-color-positive-600: #13772a;
+  --life-color-positive-700: #025a15;
+  --life-color-positive-800: #003d0e;
+  --life-color-positive-850: #062c0f;
+  --life-color-positive-020: #ecfef1;
+  --life-color-positive-050: #e2f8e4;
+  --life-color-primary-100: #d4e9f2;
+  --life-color-primary-200: #a9d3e5;
+  --life-color-primary-300: #7fbcd7;
+  --life-color-primary-400: #519dbd;
+  --life-color-primary-500: #2e7fa1;
+  --life-color-primary-600: #276d8b;
+  --life-color-primary-700: #215369;
+  --life-color-primary-800: #163746;
+  --life-color-primary-850: #0f2934;
+  --life-color-primary-020: #f1fbfe;
+  --life-color-primary-050: #e3f5fc;
+  --life-color-restricted-indigo-100: #e0e6fa;
+  --life-color-restricted-indigo-200: #c1cbec;
+  --life-color-restricted-indigo-300: #a5b2e4;
+  --life-color-restricted-indigo-400: #8091d1;
+  --life-color-restricted-indigo-500: #5f73ba;
+  --life-color-restricted-indigo-600: #5062a5;
+  --life-color-restricted-indigo-700: #384a85;
+  --life-color-restricted-indigo-800: #24315b;
+  --life-color-restricted-indigo-020: #f5f7ff;
+  --life-color-restricted-indigo-050: #f0f3ff;
+  --life-color-restricted-lilac-100: #efdffc;
+  --life-color-restricted-lilac-200: #dbc6ec;
+  --life-color-restricted-lilac-300: #c3aada;
+  --life-color-restricted-lilac-400: #a787c0;
+  --life-color-restricted-lilac-500: #8969a5;
+  --life-color-restricted-lilac-600: #795993;
+  --life-color-restricted-lilac-700: #5b4370;
+  --life-color-restricted-lilac-800: #3e2b4f;
+  --life-color-restricted-lilac-850: #2e203a;
+  --life-color-restricted-lilac-020: #faf4ff;
+  --life-color-restricted-lilac-050: #f8eeff;
+  --life-color-restricted-olive-100: #d9ebc7;
+  --life-color-restricted-olive-200: #bbd5a2;
+  --life-color-restricted-olive-300: #9ebe7e;
+  --life-color-restricted-olive-400: #7d9e5c;
+  --life-color-restricted-olive-500: #5e803c;
+  --life-color-restricted-olive-600: #526f34;
+  --life-color-restricted-olive-700: #3c5423;
+  --life-color-restricted-olive-800: #23390e;
+  --life-color-restricted-olive-020: #f2fde8;
+  --life-color-restricted-olive-050: #e9f7d9;
+  --life-color-restricted-port-100: #f5e0ec;
+  --life-color-restricted-port-200: #ecc1d4;
+  --life-color-restricted-port-300: #e0a3c1;
+  --life-color-restricted-port-400: #c97ca3;
+  --life-color-restricted-port-500: #af5a85;
+  --life-color-restricted-port-600: #9b4b73;
+  --life-color-restricted-port-700: #7a3658;
+  --life-color-restricted-port-800: #53223a;
+  --life-color-restricted-port-020: #fef5fa;
+  --life-color-restricted-port-050: #feeff8;
+  --life-color-restricted-sienna-100: #fbe1db;
+  --life-color-restricted-sienna-200: #f3c2b6;
+  --life-color-restricted-sienna-300: #eaa18f;
+  --life-color-restricted-sienna-400: #d87a63;
+  --life-color-restricted-sienna-500: #bc583f;
+  --life-color-restricted-sienna-600: #a64a33;
+  --life-color-restricted-sienna-700: #803624;
+  --life-color-restricted-sienna-800: #572414;
+  --life-color-restricted-sienna-020: #fff3f0;
+  --life-color-restricted-sienna-050: #ffeeea;
+  --life-color-rqi-blue-100: #daeaf6;
+  --life-color-rqi-blue-200: #aed0ea;
+  --life-color-rqi-blue-300: #85b9e0;
+  --life-color-rqi-blue-400: #509ad3;
+  --life-color-rqi-blue-500: #3682bd;
+  --life-color-rqi-blue-600: #286b9f;
+  --life-color-rqi-blue-700: #1e5076;
+  --life-color-rqi-blue-800: #14354d;
+  --life-color-rqi-blue-850: #0c283c;
+  --life-color-rqi-blue-020: #f7fafd;
+  --life-color-rqi-blue-050: #ebf3fa;
+  --life-color-rqi-red-100: #f4ded6;
+  --life-color-rqi-red-200: #e9bbac;
+  --life-color-rqi-red-300: #df9b88;
+  --life-color-rqi-red-400: #d17965;
+  --life-color-rqi-red-500: #c35443;
+  --life-color-rqi-red-600: #ac3225;
+  --life-color-rqi-red-700: #990000;
+  --life-color-rqi-red-800: #680101;
+  --life-color-rqi-red-850: #540101;
+  --life-color-rqi-red-020: #fdf7f4;
+  --life-color-rqi-red-050: #f9ede7;
+  --life-color-samaritan-100: #fbdbfb;
+  --life-color-samaritan-200: #efbdef;
+  --life-color-samaritan-300: #e29ce2;
+  --life-color-samaritan-400: #cc75cc;
+  --life-color-samaritan-500: #af50af;
+  --life-color-samaritan-600: #9a429a;
+  --life-color-samaritan-700: #773177;
+  --life-color-samaritan-800: #521e52;
+  --life-color-samaritan-850: #401240;
+  --life-color-samaritan-020: #fff5ff;
+  --life-color-samaritan-050: #ffebff;
+  --life-color-warning-100: #fce3cf;
+  --life-color-warning-200: #f8c096;
+  --life-color-warning-300: #f4a162;
+  --life-color-warning-400: #e97116;
+  --life-color-warning-500: #c45402;
+  --life-color-warning-600: #ad4b00;
+  --life-color-warning-700: #803700;
+  --life-color-warning-800: #572600;
+  --life-color-warning-850: #3f1b01;
+  --life-color-warning-020: #fef7f1;
+  --life-color-warning-050: #fdf0e7;
+  --life-mode: dark;
+  --life-shadow: rgba(0, 0, 0, 0.3);
+  --life-z-index-1: 1;
+  --life-z-index-2: 2;
+  --life-z-index-3: 3;
+  --life-z-index-4: 4;
+  --life-z-index-5: 5;
+  --life-z-index-10: 1000;
+  --life-z-index-20: 1020;
+  --life-z-index-30: 1030;
+  --life-z-index-40: 1040;
+  --life-z-index-50: 1050;
+  --life-z-index-60: 1060;
+  --life-z-index-70: 1070;
+  --life-z-index-80: 1080;
+  --life-z-index-active: 4; /* Used when a component is changed to active or selected state. */
+  --life-z-index-dropdown: 1000; /* Used by UI components that are revealed when another component is selected, e.g. Dropdown menu. */
+  --life-z-index-fixed: 1030; /* Used to keep an object from moving. */
+  --life-z-index-focus: 5; /* Used when keyboard focus is placed on an object. */
+  --life-z-index-hover: 2; /* Used when hovering a mouse cursor over interactive components. */
+  --life-z-index-modal: 1060; /* Used for content and dialog modals that display in front of everything on a page when opened. */
+  --life-z-index-modal-backdrop: 1040; /* Used behind objects that are opened in front of everything else on a page. */
+  --life-z-index-normal: 1; /* The standard level for most text, images, and UI components on a page. */
+  --life-z-index-offcanvas: 1050; /* Used for objects that move into the view from outside the page, e.g. Side menus. */
+  --life-z-index-popover: 1070; /* Used for any object that provides important feedback to the user, such as Popover and Toast. */
+  --life-z-index-pressed: 3; /* Used when long-pressing on a component. */
+  --life-z-index-sticky: 1020; /* Used to keep an object in view when scrolling on a page. */
+  --life-z-index-tooltip: 1080; /* Used exclusively by the Tooltip component. */
+  --life-border-lg: 3;
+  --life-border-md: 2;
+  --life-border-sm: 1;
+  --life-font-family: Lato;
+  --life-font-weight-bold: Bold;
+  --life-font-weight-italic: Italic;
+  --life-font-weight-regular: Regular;
+  --life-font-weight-semibold: SemiBold;
+  --life-radius-full: 9999;
+  --life-radius-lg: 12;
+  --life-radius-md: 8;
+  --life-radius-none: 0;
+  --life-radius-sm: 4;
+  --life-radius-xl: 16;
+  --life-radius-xs: 2;
+  --life-size-100: 8;
+  --life-size-150: 12;
+  --life-size-200: 16;
+  --life-size-250: 20;
+  --life-size-300: 24;
+  --life-size-350: 28;
+  --life-size-400: 32;
+  --life-size-500: 40;
+  --life-size-600: 48;
+  --life-size-700: 56;
+  --life-size-800: 64;
+  --life-size-900: 72;
+  --life-size-1000: 80;
+  --life-size-1200: 96;
+  --life-size-1400: 112;
+  --life-size-1600: 128;
+  --life-size-025: 2;
+  --life-size-050: 4;
+  --life-space-100: 8;
+  --life-space-150: 12;
+  --life-space-175: 14;
+  --life-space-200: 16;
+  --life-space-250: 20;
+  --life-space-300: 24;
+  --life-space-400: 32;
+  --life-space-500: 40;
+  --life-space-600: 48;
+  --life-space-700: 56;
+  --life-space-800: 64;
+  --life-space-1600: 128;
+  --life-space-025: 2;
+  --life-space-050: 4;
+  --life-space-075: 6;
+}