npm - @foi/design-system - Versions diffs - 0.0.18 → 0.0.20 - Mend

@foi/design-system 0.0.18 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/dist/theme/dark/index.d.ts CHANGED Viewed

@@ -1,44 +1,6 @@
 export declare const darkTheme: {
     readonly name: "dark";
     readonly components: {
-        PAGINATIONMENU: {
-            readonly DEFAULT: {
-                readonly ROOT: {
-                    readonly 'background-color': string;
-                    readonly 'border-radius': "4px";
-                    readonly bottom: "8px";
-                };
-                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;
-                    };
-                };
-            };
-        };
-        PAGINATION: {
-            readonly DEFAULT: {
-                readonly EVENTS: {
-                    readonly ENABLED: {
-                        readonly 'color-secondary': string;
-                    };
-                };
-            };
-        };
         DATAGRIDMENU: {
             readonly DEFAULT: {
                 readonly ROOT: {
@@ -79,108 +41,68 @@ export declare const darkTheme: {
                 };
             };
         };
-        MODAL: {
+        TOAST: {
             readonly DEFAULT: {
                 readonly ROOT: {
-                    readonly 'background-color': string;
-                    readonly 'border-radius': "8px";
+                    readonly 'border-radius': "4px";
                 };
                 readonly EVENTS: {
                     readonly ENABLED: {
+                        readonly 'background-color': string;
                         readonly 'color-primary': string;
-                        readonly 'color-secondary': string;
+                        readonly 'icon-color': string;
                     };
                 };
             };
         };
-        DATEPICKERMENU: {
+        RADIOGROUP: {
             readonly DEFAULT: {
-                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 ERROR: {
+                        readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
                     };
-                    readonly FOCUS: {
-                        readonly 'outline-color': string;
-                        readonly 'outline-width': "1px";
-                        readonly 'outline-style': "solid";
-                        readonly 'outline-offset': "2px";
+                    readonly DISABLED: {
+                        readonly 'color-secondary': string;
                     };
                 };
             };
         };
-        DATEPICKER: {
+        MODAL: {
             readonly DEFAULT: {
                 readonly ROOT: {
-                    readonly 'border-radius': "4px";
+                    readonly 'background-color': string;
+                    readonly 'border-radius': "8px";
                 };
                 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";
+                };
+            };
+        };
+        CHECKBOXTREE: {
+            readonly DEFAULT: {
+                readonly EVENTS: {
+                    readonly ENABLED: {
                         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 ERROR: {
+                        readonly 'color-secondary': 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: {};
                 };
             };
         };
-        RADIOGROUP: {
+        CHECKBOXGROUP: {
             readonly DEFAULT: {
                 readonly EVENTS: {
                     readonly ENABLED: {
@@ -197,85 +119,90 @@ export declare const darkTheme: {
                 };
             };
         };
-        RADIO: {
+        TEXTFIELD: {
             readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";
                 };
                 readonly EVENTS: {
                     readonly ENABLED: {
+                        readonly 'background-color': "transparent";
                         readonly 'color-primary': string;
                         readonly 'color-secondary': string;
-                        readonly 'icon-color': string;
-                        readonly 'background-color': "transparent";
+                        readonly 'color-tertiary': string;
                         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 'border-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'shadow-color': string;
+                        readonly 'border-color': string;
                     };
                     readonly FOCUS: {
-                        readonly 'outline-color': string;
-                        readonly 'outline-width': "1px";
-                        readonly 'outline-style': "solid";
-                        readonly 'outline-offset': "2px";
+                        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 'icon-color': string;
-                        readonly 'background-color': string;
+                        readonly 'border-color': string;
                     };
                     readonly ERROR_HOVER: {
-                        readonly 'shadow-color': string;
+                        readonly 'border-color': string;
                     };
                     readonly ERROR_ACTIVE: {
-                        readonly 'shadow-color': string;
+                        readonly 'border-color': string;
                     };
                     readonly ERROR_FOCUS: {
-                        readonly 'outline-color': string;
+                        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: {
-                        readonly 'icon-color': string;
-                    };
+                    readonly DISABLED_VALUE: {};
                 };
             };
         };
-        SLIDER: {
+        SWITCH: {
             readonly DEFAULT: {
+                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': 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 'background-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'background-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly FOCUS: {
                         readonly 'outline-color': string;
@@ -286,7 +213,8 @@ export declare const darkTheme: {
                     readonly DISABLED: {
                         readonly 'icon-color': string;
                         readonly 'icon-background-color': string;
-                        readonly 'background-color': string;
+                        readonly 'background-color': "transparent";
+                        readonly 'color-secondary': string;
                         readonly 'border-color': string;
                         readonly 'border-width': "2px";
                         readonly 'border-style': "solid";
@@ -302,33 +230,25 @@ export declare const darkTheme: {
                 };
             };
         };
-        SWITCH: {
+        SLIDER: {
             readonly DEFAULT: {
-                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 'background-color': string;
                         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 'background-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'shadow-color': string;
+                        readonly 'background-color': string;
                     };
                     readonly FOCUS: {
                         readonly 'outline-color': string;
@@ -339,8 +259,7 @@ export declare const darkTheme: {
                     readonly DISABLED: {
                         readonly 'icon-color': string;
                         readonly 'icon-background-color': string;
-                        readonly 'background-color': "transparent";
-                        readonly 'color-secondary': string;
+                        readonly 'background-color': string;
                         readonly 'border-color': string;
                         readonly 'border-width': "2px";
                         readonly 'border-style': "solid";
@@ -442,40 +361,7 @@ export declare const darkTheme: {
                 };
             };
         };
-        CHECKBOXTREE: {
-            readonly DEFAULT: {
-                readonly EVENTS: {
-                    readonly ENABLED: {
-                        readonly 'color-primary': string;
-                        readonly 'color-secondary': string;
-                    };
-                    readonly ERROR: {
-                        readonly 'color-secondary': string;
-                    };
-                    readonly DISABLED: {
-                        readonly 'color-secondary': string;
-                    };
-                };
-            };
-        };
-        CHECKBOXGROUP: {
-            readonly DEFAULT: {
-                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;
-                    };
-                };
-            };
-        };
-        CHECKBOX: {
+        RADIO: {
             readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";
@@ -492,7 +378,6 @@ export declare const darkTheme: {
                     };
                     readonly VALUE: {
                         readonly 'icon-color': string;
-                        readonly 'background-color': string;
                         readonly 'border-color': string;
                     };
                     readonly HOVER: {
@@ -515,7 +400,6 @@ export declare const darkTheme: {
                     readonly ERROR_VALUE: {
                         readonly 'icon-color': string;
                         readonly 'background-color': string;
-                        readonly 'border-color': string;
                     };
                     readonly ERROR_HOVER: {
                         readonly 'shadow-color': string;
@@ -533,88 +417,121 @@ export declare const darkTheme: {
                     };
                     readonly DISABLED_VALUE: {
                         readonly 'icon-color': string;
-                        readonly 'background-color': string;
                     };
                 };
             };
-            readonly PRUEBA: {
+        };
+        PAGINATIONMENU: {
+            readonly DEFAULT: {
                 readonly ROOT: {
+                    readonly 'background-color': string;
                     readonly 'border-radius': "4px";
+                    readonly bottom: "8px";
                 };
                 readonly EVENTS: {
                     readonly ENABLED: {
+                        readonly 'background-color': "transparent";
                         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 'color-tertiary': string;
                     };
                     readonly VALUE: {
-                        readonly 'icon-color': string;
                         readonly 'background-color': string;
-                        readonly 'border-color': string;
                     };
                     readonly HOVER: {
-                        readonly 'shadow-color': string;
+                        readonly 'background-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'shadow-color': string;
+                        readonly 'background-color': string;
                     };
                     readonly FOCUS: {
-                        readonly 'outline-color': string;
-                        readonly 'outline-width': "1px";
-                        readonly 'outline-style': "solid";
-                        readonly 'outline-offset': "2px";
+                        readonly 'background-color': string;
+                    };
+                };
+            };
+        };
+        PAGINATION: {
+            readonly DEFAULT: {
+                readonly EVENTS: {
+                    readonly ENABLED: {
+                        readonly 'color-secondary': string;
+                    };
+                };
+            };
+        };
+        NUMBERFIELD: {
+            readonly DEFAULT: {
+                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 'icon-color': string;
-                        readonly 'background-color': string;
                         readonly 'border-color': string;
                     };
                     readonly ERROR_HOVER: {
-                        readonly 'shadow-color': string;
+                        readonly 'border-color': string;
                     };
                     readonly ERROR_ACTIVE: {
-                        readonly 'shadow-color': string;
+                        readonly 'border-color': string;
                     };
                     readonly ERROR_FOCUS: {
-                        readonly 'outline-color': string;
+                        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: {
-                        readonly 'icon-color': string;
-                        readonly 'background-color': string;
-                    };
+                    readonly DISABLED_VALUE: {};
                 };
             };
         };
-        BUTTON: {
+        ICONBUTTON: {
             readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";
                 };
                 readonly EVENTS: {
                     readonly ENABLED: {
-                        readonly 'background-color': string;
-                        readonly 'color-primary': string;
+                        readonly 'icon-color': string;
+                        readonly 'background-color': "transparent";
                         readonly 'border-style': "none";
                     };
                     readonly HOVER: {
-                        readonly 'background-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'background-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly FOCUS: {
                         readonly 'outline-color': string;
@@ -623,16 +540,43 @@ export declare const darkTheme: {
                         readonly 'outline-offset': "2px";
                     };
                     readonly DISABLED: {
-                        readonly 'background-color': string;
+                        readonly 'icon-color': string;
+                    };
+                };
+            };
+        };
+        DATEPICKERMENU: {
+            readonly DEFAULT: {
+                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 LOADING: {
+                    readonly VALUE: {
+                        readonly 'background-color': string;
+                    };
+                    readonly HOVER: {
                         readonly 'background-color': string;
-                        readonly 'color-primary': 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 GHOST: {
+        };
+        DATEPICKER: {
+            readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";
                 };
@@ -640,46 +584,83 @@ export declare const darkTheme: {
                     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 'background-color': "rgba(255, 255, 255, 0.04)";
+                        readonly 'border-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'background-color': "rgba(255, 255, 255, 0.08)";
+                        readonly 'border-color': string;
                     };
                     readonly FOCUS: {
-                        readonly 'outline-color': string;
-                        readonly 'outline-width': "1px";
-                        readonly 'outline-style': "solid";
-                        readonly 'outline-offset': "2px";
+                        readonly 'border-color': string;
                     };
-                    readonly DISABLED: {
+                    readonly ERROR: {
                         readonly 'background-color': "transparent";
                         readonly 'color-primary': string;
+                        readonly 'color-secondary': string;
+                        readonly 'color-tertiary': string;
                         readonly 'border-color': string;
-                        readonly 'border-width': "1px";
-                        readonly 'border-style': "solid";
                     };
-                    readonly LOADING: {
+                    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: {};
                 };
             };
         };
-        ICONBUTTON: {
+        CHIP: {
+            readonly DEFAULT: {
+                readonly EVENTS: {
+                    readonly ENABLED: {
+                        readonly 'background-color': string;
+                        readonly 'color-primary': string;
+                    };
+                };
+            };
+        };
+        CHECKBOX: {
             readonly DEFAULT: {
                 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-style': "none";
+                        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;
@@ -693,123 +674,166 @@ export declare const darkTheme: {
                         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;
                     };
                 };
             };
-        };
-        NUMBERFIELD: {
-            readonly DEFAULT: {
+            readonly PRUEBA: {
                 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 '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 'border-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'border-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly FOCUS: {
-                        readonly 'border-color': string;
+                        readonly 'outline-color': string;
+                        readonly 'outline-width': "1px";
+                        readonly 'outline-style': "solid";
+                        readonly 'outline-offset': "2px";
                     };
                     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 'icon-color': string;
+                        readonly 'background-color': string;
                         readonly 'border-color': string;
                     };
                     readonly ERROR_HOVER: {
-                        readonly 'border-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly ERROR_ACTIVE: {
-                        readonly 'border-color': string;
+                        readonly 'shadow-color': string;
                     };
                     readonly ERROR_FOCUS: {
-                        readonly 'border-color': string;
+                        readonly 'outline-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: {};
+                    readonly DISABLED_VALUE: {
+                        readonly 'icon-color': string;
+                        readonly 'background-color': string;
+                    };
                 };
             };
         };
-        TEXTFIELD: {
+        BUTTON: {
             readonly DEFAULT: {
                 readonly ROOT: {
                     readonly 'border-radius': "4px";
                 };
                 readonly EVENTS: {
                     readonly ENABLED: {
-                        readonly 'background-color': "transparent";
+                        readonly 'background-color': string;
                         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 'border-style': "none";
                     };
                     readonly HOVER: {
-                        readonly 'border-color': string;
+                        readonly 'background-color': string;
                     };
                     readonly ACTIVE: {
-                        readonly 'border-color': string;
+                        readonly 'background-color': string;
                     };
                     readonly FOCUS: {
-                        readonly 'border-color': string;
+                        readonly 'outline-color': string;
+                        readonly 'outline-width': "1px";
+                        readonly 'outline-style': "solid";
+                        readonly 'outline-offset': "2px";
                     };
-                    readonly ERROR: {
-                        readonly 'background-color': "transparent";
+                    readonly DISABLED: {
+                        readonly 'background-color': string;
                         readonly 'color-primary': string;
-                        readonly 'color-secondary': string;
-                        readonly 'color-tertiary': string;
-                        readonly 'border-color': string;
                     };
-                    readonly ERROR_VALUE: {
-                        readonly 'border-color': string;
+                    readonly LOADING: {
+                        readonly 'background-color': string;
+                        readonly 'color-primary': string;
                     };
-                    readonly ERROR_HOVER: {
+                };
+            };
+            readonly GHOST: {
+                readonly ROOT: {
+                    readonly 'border-radius': "4px";
+                };
+                readonly EVENTS: {
+                    readonly ENABLED: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
                         readonly 'border-color': string;
+                        readonly 'border-width': "2px";
+                        readonly 'border-style': "solid";
                     };
-                    readonly ERROR_ACTIVE: {
-                        readonly 'border-color': string;
+                    readonly HOVER: {
+                        readonly 'background-color': "rgba(255, 255, 255, 0.04)";
                     };
-                    readonly ERROR_FOCUS: {
-                        readonly 'border-color': string;
+                    readonly ACTIVE: {
+                        readonly 'background-color': "rgba(255, 255, 255, 0.08)";
+                    };
+                    readonly FOCUS: {
+                        readonly 'outline-color': string;
+                        readonly 'outline-width': "1px";
+                        readonly 'outline-style': "solid";
+                        readonly 'outline-offset': "2px";
                     };
                     readonly DISABLED: {
                         readonly 'background-color': "transparent";
                         readonly 'color-primary': string;
-                        readonly 'color-secondary': string;
-                        readonly 'color-tertiary': string;
                         readonly 'border-color': string;
+                        readonly 'border-width': "1px";
+                        readonly 'border-style': "solid";
+                    };
+                    readonly LOADING: {
+                        readonly 'background-color': "transparent";
+                        readonly 'color-primary': string;
                     };
-                    readonly DISABLED_VALUE: {};
                 };
             };
         };