@epilot/base-elements 3.3.5 → 3.4.0-rc1

package/dist/ThemeProvider/DefaultEpilotTheme.d.ts

@@ -1,3 +1,3 @@
 import type { EpilotTheme, WithRequiredProperty } from './types';
 export declare type DefaultEpilotThemeValue = WithRequiredProperty<EpilotTheme, 'prefix' | 'typography' | 'palette' | 'spacing' | 'shape' | 'props' | 'shadows'>;
-export declare const DefaultEpilotTheme: DefaultEpilotThemeValue;
+export declare const DefaultEpilotTheme: EpilotTheme;

package/dist/ThemeProvider/DefaultEpilotTheme.js

@@ -1,13 +1,17 @@
 "use strict";
 exports.__esModule = true;
 exports.DefaultEpilotTheme = void 0;
+var getCSSVariableValue = function (varName) {
+    var computedStyle = getComputedStyle(document.documentElement);
+    return computedStyle.getPropertyValue(varName).trim();
+};
 exports.DefaultEpilotTheme = {
     prefix: '',
     typography: {
         fontWeightRegular: 400,
         fontWeightBold: 600,
         fontSize: 14,
-        fontFamily: 'ProximaNova, Open Sans, Helvetica, Arial, sans-serif',
+        fontFamily: getCSSVariableValue('--font-family'),
         h1: {
             fontSize: 96
         },
@@ -62,144 +66,144 @@ exports.DefaultEpilotTheme = {
     },
     palette: {
         primary: {
-            main: '#005EB4',
-            contrastText: '#FFFFFF',
+            main: getCSSVariableValue('--primary-40'),
+            contrastText: getCSSVariableValue('--primary-100'),
             // New syntax as proposed by Material 3
-            '90': '#D5E3FF',
-            '80': '#A8C8FF',
-            '70': '#77ACFF',
-            '60': '#4691F4',
-            '50': '#2177D8',
-            '40': '#005EB4',
-            '30': '#00468A',
-            '20': '#003062',
-            '10': '#001B3C',
+            '90': getCSSVariableValue('--primary-90'),
+            '80': getCSSVariableValue('--primary-80'),
+            '70': getCSSVariableValue('--primary-70'),
+            '60': getCSSVariableValue('--primary-60'),
+            '50': getCSSVariableValue('--primary-50'),
+            '40': getCSSVariableValue('--primary-40'),
+            '30': getCSSVariableValue('--primary-30'),
+            '20': getCSSVariableValue('--primary-20'),
+            '10': getCSSVariableValue('--primary-10'),
             // Legacy syntax
-            '900': '#001B3C',
-            '800': '#003062',
-            '700': '#00468A',
-            '600': '#005EB4',
-            '500': '#2177D8',
-            '400': '#4691F4',
-            '300': '#77ACFF',
-            '200': '#A8C8FF',
-            '100': '#D5E3FF'
+            '900': getCSSVariableValue('--primary-10'),
+            '800': getCSSVariableValue('--primary-20'),
+            '700': getCSSVariableValue('--primary-30'),
+            '600': getCSSVariableValue('--primary-40'),
+            '500': getCSSVariableValue('--primary-50'),
+            '400': getCSSVariableValue('--primary-60'),
+            '300': getCSSVariableValue('--primary-70'),
+            '200': getCSSVariableValue('--primary-80'),
+            '100': getCSSVariableValue('--primary-90')
         },
         secondary: {
-            main: '#913997',
-            contrastText: '#FFFFFF',
+            main: getCSSVariableValue('--secondary-40'),
+            contrastText: getCSSVariableValue('--secondary-100'),
             // New syntax as proposed by Material 3
-            '90': '#FFD6FA',
-            '80': '#FFA9FE',
-            '70': '#E987EB',
-            '60': '#CB6DCE',
-            '50': '#AE53B2',
-            '40': '#913997',
-            '30': '#761E71',
-            '20': '#590062',
-            '10': '#36003C',
+            '90': getCSSVariableValue('--secondary-90'),
+            '80': getCSSVariableValue('--secondary-80'),
+            '70': getCSSVariableValue('--secondary-70'),
+            '60': getCSSVariableValue('--secondary-60'),
+            '50': getCSSVariableValue('--secondary-50'),
+            '40': getCSSVariableValue('--secondary-40'),
+            '30': getCSSVariableValue('--secondary-30'),
+            '20': getCSSVariableValue('--secondary-20'),
+            '10': getCSSVariableValue('--secondary-10'),
             // Legacy syntax
-            '600': '#913997',
-            '500': '#AE53B2',
-            '300': '#E987EB',
-            '200': '#FFA9FE',
-            '100': '#FFD6FA'
+            '600': getCSSVariableValue('--secondary-40'),
+            '500': getCSSVariableValue('--secondary-50'),
+            '300': getCSSVariableValue('--secondary-70'),
+            '200': getCSSVariableValue('--secondary-80'),
+            '100': getCSSVariableValue('--secondary-90')
         },
         surface: {
-            main: '#F5F6FF',
-            containerHighest: '#D1D8FA',
-            containerHigh: '#DAE0FB',
-            container: '#E3E7FD',
-            containerLow: '#ECEFFE',
-            containerLowest: '#FFFFFF'
+            main: getCSSVariableValue('--surface'),
+            containerHighest: getCSSVariableValue('--surface-container-highest'),
+            containerHigh: getCSSVariableValue('--surface-container-high'),
+            container: getCSSVariableValue('--surface-container'),
+            containerLow: getCSSVariableValue('--surface-container-low'),
+            containerLowest: getCSSVariableValue('--surface-container-lowest')
         },
         neutral: {
-            '100': '#FFFFFF',
-            '90': '#D1D8FA',
-            '80': '#B3C5FF',
-            '70': '#8CA8FC',
-            '60': '#718EE0',
-            '50': '#5674C4',
-            '40': '#3C5BA9',
-            '30': '#21428F',
-            '20': '#002B75',
-            '10': '#001849'
+            '100': getCSSVariableValue('--neutral-100'),
+            '90': getCSSVariableValue('--neutral-90'),
+            '80': getCSSVariableValue('--neutral-80'),
+            '70': getCSSVariableValue('--neutral-70'),
+            '60': getCSSVariableValue('--neutral-60'),
+            '50': getCSSVariableValue('--neutral-50'),
+            '40': getCSSVariableValue('--neutral-40'),
+            '30': getCSSVariableValue('--neutral-30'),
+            '20': getCSSVariableValue('--neutral-20'),
+            '10': getCSSVariableValue('--neutral-10')
         },
         neutralVariant: {
-            '90': '#E0E2EC',
-            '80': '#C4C6CF',
-            '70': '#A8ABB4',
-            '60': '#8E9099',
-            '50': '#74777F',
-            '40': '#5B5E66',
-            '30': '#43474E',
-            '20': '#2D3038',
-            '10': '#181C22'
+            '90': getCSSVariableValue('--neutral-variant-90'),
+            '80': getCSSVariableValue('--neutral-variant-80'),
+            '70': getCSSVariableValue('--neutral-variant-70'),
+            '60': getCSSVariableValue('--neutral-variant-60'),
+            '50': getCSSVariableValue('--neutral-variant-50'),
+            '40': getCSSVariableValue('--neutral-variant-40'),
+            '30': getCSSVariableValue('--neutral-variant-30'),
+            '20': getCSSVariableValue('--neutral-variant-20'),
+            '10': getCSSVariableValue('--neutral-variant-10')
         },
         success: {
-            main: '#286C2A',
-            contrastText: '#FFFFFF',
-            '90': '#DAF1DA',
-            '80': '#B5E3B6',
-            '70': '#8FD691',
-            '60': '#6AC86D',
-            '50': '#428540',
-            '40': '#286C2A',
-            '30': '#29702B',
-            '20': '#1C4A1D',
-            '10': '#0E250E',
+            main: getCSSVariableValue('--success-40'),
+            contrastText: getCSSVariableValue('--success-100'),
+            '90': getCSSVariableValue('--success-90'),
+            '80': getCSSVariableValue('--success-80'),
+            '70': getCSSVariableValue('--success-70'),
+            '60': getCSSVariableValue('--success-60'),
+            '50': getCSSVariableValue('--success-50'),
+            '40': getCSSVariableValue('--success-40'),
+            '30': getCSSVariableValue('--success-30'),
+            '20': getCSSVariableValue('--success-20'),
+            '10': getCSSVariableValue('--success-10'),
             // Legacy
-            '500': '#45BA48',
-            '200': '#B5E3B6',
-            '100': '#DAF1DA'
+            '500': getCSSVariableValue('--success-50'),
+            '200': getCSSVariableValue('--success-80'),
+            '100': getCSSVariableValue('--success-90')
         },
         warning: {
-            main: '#CC9600',
-            contrastText: '#FFFFFF',
-            '90': '#FFF2CC',
-            '80': '#FFE499',
-            '70': '#FFD766',
-            '60': '#FFC933',
-            '50': '#FFBC00',
-            '40': '#CC9600',
-            '30': '#997100',
-            '20': '#664B00',
-            '10': '#332600',
+            main: getCSSVariableValue('--warning-40'),
+            contrastText: getCSSVariableValue('--warning-100'),
+            '90': getCSSVariableValue('--warning-90'),
+            '80': getCSSVariableValue('--warning-80'),
+            '70': getCSSVariableValue('--warning-70'),
+            '60': getCSSVariableValue('--warning-60'),
+            '50': getCSSVariableValue('--warning-50'),
+            '40': getCSSVariableValue('--warning-40'),
+            '30': getCSSVariableValue('--warning-30'),
+            '20': getCSSVariableValue('--warning-20'),
+            '10': getCSSVariableValue('--warning-10'),
             // Legacy
-            '500': '#FFBC00',
-            '200': '#FFE499',
-            '100': '#FFF2CC'
+            '500': getCSSVariableValue('--warning-50'),
+            '200': getCSSVariableValue('--warning-80'),
+            '100': getCSSVariableValue('--warning-90')
         },
         error: {
-            main: '#CC0013',
-            contrastText: '#FFFFFF',
-            '90': '#FFCCD1',
-            '80': '#FF99A3',
-            '70': '#FF6674',
-            '60': '#FF3346',
-            '50': '#FF0018',
-            '40': '#CC0013',
-            '30': '#99000E',
-            '20': '#66000A',
-            '10': '#330005',
+            main: getCSSVariableValue('--error-40'),
+            contrastText: getCSSVariableValue('--error-100'),
+            '90': getCSSVariableValue('--error-90'),
+            '80': getCSSVariableValue('--error-80'),
+            '70': getCSSVariableValue('--error-70'),
+            '60': getCSSVariableValue('--error-60'),
+            '50': getCSSVariableValue('--error-50'),
+            '40': getCSSVariableValue('--error-40'),
+            '30': getCSSVariableValue('--error-30'),
+            '20': getCSSVariableValue('--error-20'),
+            '10': getCSSVariableValue('--error-10'),
             // Legacy
-            '500': '#FF0018',
-            '300': '#FF6674',
-            '200': '#FF99A3',
-            '100': '#FFCCD1'
+            '500': getCSSVariableValue('--error-50'),
+            '300': getCSSVariableValue('--error-70'),
+            '200': getCSSVariableValue('--error-80'),
+            '100': getCSSVariableValue('--error-90')
         },
         info: {
-            main: '#3C5BA9',
-            '100': '#FFFFFF',
-            '90': '#D1D8FA',
-            '80': '#B3C5FF',
-            '70': '#8CA8FC',
-            '60': '#718EE0',
-            '50': '#5674C4',
-            '40': '#3C5BA9',
-            '30': '#21428F',
-            '20': '#002B75',
-            '10': '#001849'
+            main: getCSSVariableValue('--neutral-40'),
+            '100': getCSSVariableValue('--neutral-100'),
+            '90': getCSSVariableValue('--neutral-90'),
+            '80': getCSSVariableValue('--neutral-80'),
+            '70': getCSSVariableValue('--neutral-70'),
+            '60': getCSSVariableValue('--neutral-60'),
+            '50': getCSSVariableValue('--neutral-50'),
+            '40': getCSSVariableValue('--neutral-40'),
+            '30': getCSSVariableValue('--neutral-30'),
+            '20': getCSSVariableValue('--neutral-20'),
+            '10': getCSSVariableValue('--neutral-10')
         },
         focus: {
             main: '#5B4CEC',
@@ -265,68 +269,68 @@ exports.DefaultEpilotTheme = {
             A700: '#303030'
         },
         action: {
-            active: '#324C66',
-            hover: '#EFF5FA',
-            selected: '#324C66',
-            selectedText: '#ffffff',
-            disabled: '#E6EEF7',
-            focus: '#324C66'
+            active: getCSSVariableValue('--action-active'),
+            hover: getCSSVariableValue('--action-hover'),
+            selected: getCSSVariableValue('--action-selected'),
+            selectedText: getCSSVariableValue('--action-selected-text'),
+            disabled: getCSSVariableValue('--action-disabled'),
+            focus: getCSSVariableValue('--action-focus')
         },
         background: {
-            "default": '#ffffff'
+            "default": getCSSVariableValue('--surface-container-lowest')
         },
         text: {
-            primary: '#001849',
-            secondary: '#43474e'
+            primary: getCSSVariableValue('--text-primary'),
+            secondary: getCSSVariableValue('--text-secondary')
         },
-        divider: '#C4C6CF',
+        divider: getCSSVariableValue('--divider'),
         green: {
-            main: '#2FBC8A',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--green'),
+            contrastText: getCSSVariableValue('--green-contrast-text')
         },
         darkgrey: {
-            main: '#1B3855',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--darkgrey'),
+            contrastText: getCSSVariableValue('--darkgrey-contrast-text')
         },
         bostonblue: {
-            main: '#349BBC',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--bostonblue'),
+            contrastText: getCSSVariableValue('--bostonblue-contrast-text')
         },
         darkgreen: {
-            main: '#165D37',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--darkgreen'),
+            contrastText: getCSSVariableValue('--darkgreen-contrast-text')
         },
         purple: {
-            main: '#9A79F8',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--purple'),
+            contrastText: getCSSVariableValue('--purple-contrast-text')
         },
         pink: {
-            main: '#F09DDE',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--pink'),
+            contrastText: getCSSVariableValue('--pink-contrast-text')
         },
         lightblue: {
-            main: '#6299F8',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--lightblue'),
+            contrastText: getCSSVariableValue('--lightblue-contrast-text')
         },
         blue: {
-            main: '#0A69F7',
-            contrastText: '#FFFFFF'
+            main: getCSSVariableValue('--blue'),
+            contrastText: getCSSVariableValue('--blue-contrast-text')
         },
         lavender: {
-            main: '#CDD6F8',
-            contrastText: '#172B4D'
+            main: getCSSVariableValue('--lavender'),
+            contrastText: getCSSVariableValue('--lavender-contrast-text')
         },
         red: {
-            main: '#F9747C',
-            contrastText: '#172B4D'
+            main: getCSSVariableValue('--red'),
+            contrastText: getCSSVariableValue('--red-contrast-text')
         },
         cyan: {
-            main: '#B6EFF3',
-            contrastText: '#172B4D'
+            main: getCSSVariableValue('--cyan'),
+            contrastText: getCSSVariableValue('--cyan-contrast-text')
         },
         orange: {
-            main: '#FFC65C',
-            contrastText: '#172B4D'
+            main: getCSSVariableValue('--orange'),
+            contrastText: getCSSVariableValue('--orange-contrast-text')
         }
     },
     spacing: 8,
@@ -334,62 +338,61 @@ exports.DefaultEpilotTheme = {
         borderRadius: 16
     },
     props: {
-        client_logo_url: 'https://go.epilot.cloud/ivy/faces/javax.faces.resource/assets/img/e.pilot.logo.svg?ln=xpertivy-406-webContent&xv=121482251178',
         enable_ripple: false,
         content_max_width: 1128
     },
     shadows: [
         // 0
-        'none',
+        getCSSVariableValue('--shadow-0'),
         // 1
-        '0px 1px 4px rgba(21, 43, 66, 0.16)',
+        getCSSVariableValue('--shadow-1'),
         // 2
-        '0px 0px 8px rgba(21, 43, 66, 0.24)',
+        getCSSVariableValue('--shadow-2'),
         // 3
-        '0px 0px 24px rgba(21, 43, 66, 0.12)',
+        getCSSVariableValue('--shadow-3'),
         // 4
-        '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-4'),
         // 5
-        '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-5'),
         // 6
-        '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-6'),
         // 7
-        '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-7'),
         // Elevation8 affects Popover default boxShadow
         // 8
-        '0px 0px 8px rgba(21, 43, 66, 0.24)',
+        getCSSVariableValue('--shadow-8'),
         // 9
-        '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-9'),
         // 10
-        '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-10'),
         // 11
-        '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-11'),
         // 12
-        '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-12'),
         // 13
-        '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-13'),
         // 14
-        '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-14'),
         // 15
-        '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-15'),
         // 16
-        '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-16'),
         // 17
-        '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-17'),
         // 18
-        '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-18'),
         // 19
-        '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-19'),
         // 20
-        '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-20'),
         // 21
-        '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-21'),
         // 22
-        '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-22'),
         // 23
-        '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
+        getCSSVariableValue('--shadow-23'),
         // 24
-        '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)'
+        getCSSVariableValue('--shadow-24')
     ]
 };
 //# sourceMappingURL=DefaultEpilotTheme.js.map