@foi/design-system 0.0.0 → 0.0.2

package/dist/interfaces/Option.d.ts

@@ -0,0 +1,10 @@
+export interface OptionProp {
+    /** Use label to display a text for a Select row */
+    label: string;
+    /** Use value to give an internal ID to the label prop */
+    value: string;
+}
+export interface MenuOption extends OptionProp {
+    /** Use description to explain the label prop */
+    description?: string;
+}

package/dist/interfaces/index.d.ts

@@ -0,0 +1 @@
+export * from './Option';

package/dist/theme/dark/colors.d.ts

@@ -0,0 +1,31 @@
+export declare const blueChill = "#188aa2";
+export declare const blueDeepAqua = "#0c748a";
+export declare const blueEigengrau = "#0e1621";
+export declare const graySeashell = "#f1f1f1";
+export declare const grayAsh = "#b2bac2";
+export declare const grayGrass = "#989a9b";
+export declare const grayGunmetal = "#495057";
+export declare const darkRed = "#f44336";
+declare const _default: {
+    white400: string;
+    white500: string;
+    white600: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    darkBlue300: string;
+    darkBlue400: string;
+};
+export default _default;

package/dist/theme/dark/components/Button.d.ts

@@ -0,0 +1,35 @@
+declare const component: {
+    readonly BUTTON: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': string;
+                readonly 'color-primary': string;
+                readonly 'border-style': "none";
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly DISABLED: {
+                readonly 'background-color': string;
+                readonly 'color-primary': string;
+            };
+            readonly LOADING: {
+                readonly 'background-color': string;
+                readonly 'color-primary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Checkbox.d.ts

@@ -0,0 +1,64 @@
+declare const component: {
+    readonly CHECKBOX: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'icon-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'outline-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/CheckboxGroup.d.ts

@@ -0,0 +1,18 @@
+declare const component: {
+    readonly CHECKBOXGROUP: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly ERROR: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly DISABLED: {
+                readonly 'color-secondary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/CheckboxTree.d.ts

@@ -0,0 +1,17 @@
+declare const component: {
+    readonly CHECKBOXTREE: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly ERROR: {
+                readonly 'color-secondary': string;
+            };
+            readonly DISABLED: {
+                readonly 'color-secondary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/DatePicker.d.ts

@@ -0,0 +1,58 @@
+declare const component: {
+    readonly DATEPICKER: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {};
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/DatePickerMenu.d.ts

@@ -0,0 +1,31 @@
+declare const component: {
+    readonly DATEPICKERMENU: {
+        readonly ROOT: {
+            readonly 'background-color': string;
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'background-color': string;
+            };
+            readonly VALUE: {
+                readonly 'background-color': string;
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/IconButton.d.ts

@@ -0,0 +1,30 @@
+declare const component: {
+    readonly ICONBUTTON: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'icon-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-style': "none";
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly DISABLED: {
+                readonly 'icon-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Input.d.ts

@@ -0,0 +1,58 @@
+declare const component: {
+    readonly INPUT: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {};
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Radio.d.ts

@@ -0,0 +1,61 @@
+declare const component: {
+    readonly RADIO: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'icon-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'icon-color': string;
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'background-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'outline-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {
+                readonly 'icon-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+declare const component: {
+    readonly RADIOGROUP: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly ERROR: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+            };
+            readonly DISABLED: {
+                readonly 'color-secondary': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Select.d.ts

@@ -0,0 +1,58 @@
+declare const component: {
+    readonly SELECT: {
+        readonly ROOT: {
+            readonly 'border-radius': "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly ERROR_VALUE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_HOVER: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_ACTIVE: {
+                readonly 'border-color': string;
+            };
+            readonly ERROR_FOCUS: {
+                readonly 'border-color': string;
+            };
+            readonly DISABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+                readonly 'border-color': string;
+            };
+            readonly DISABLED_VALUE: {};
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/SelectMenu.d.ts

@@ -0,0 +1,30 @@
+declare const component: {
+    readonly SELECTMENU: {
+        readonly ROOT: {
+            readonly 'background-color': string;
+            readonly 'border-radius': "4px";
+            readonly top: "4px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'background-color': "transparent";
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'color-tertiary': string;
+            };
+            readonly VALUE: {
+                readonly 'background-color': string;
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'background-color': string;
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Slider.d.ts

@@ -0,0 +1,46 @@
+declare const component: {
+    readonly SLIDER: {
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'background-color': string;
+            };
+            readonly HOVER: {
+                readonly 'background-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'background-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly DISABLED: {
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly DISABLED_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+        };
+    };
+};
+export default component;

package/dist/theme/dark/components/Switch.d.ts

@@ -0,0 +1,55 @@
+declare const component: {
+    readonly SWITCH: {
+        readonly ROOT: {
+            readonly 'border-radius': "12px";
+        };
+        readonly EVENTS: {
+            readonly ENABLED: {
+                readonly 'color-primary': string;
+                readonly 'color-secondary': string;
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly VALUE: {
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+            };
+            readonly HOVER: {
+                readonly 'shadow-color': string;
+            };
+            readonly ACTIVE: {
+                readonly 'shadow-color': string;
+            };
+            readonly FOCUS: {
+                readonly 'outline-color': string;
+                readonly 'outline-width': "1px";
+                readonly 'outline-style': "solid";
+                readonly 'outline-offset': "2px";
+            };
+            readonly DISABLED: {
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': "transparent";
+                readonly 'color-secondary': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+            readonly DISABLED_VALUE: {
+                readonly 'icon-color': string;
+                readonly 'icon-background-color': string;
+                readonly 'background-color': string;
+                readonly 'border-color': string;
+                readonly 'border-width': "2px";
+                readonly 'border-style': "solid";
+            };
+        };
+    };
+};
+export default component;