💄 Add common styles to components

src/assets/style/global.css

@@ -0,0 +1,44 @@
+:root{
+    /* border */
+    --border-width: 1px;
+    --large-border-width: 2px;
+    /* transition duration */
+    --transition-duration: 0.2s;
+    /* shadow */
+    --shadow: 0 4px 6px -1px var(--background-overlay-grey), 0 2px 4px -2px var(--background-overlay-grey);
+    /* focus */
+    --focus-color: var(--system-focus-default);
+    --focus-width: 2px;
+    --focus-style: solid;
+    --focus-offset: 2px;
+    /* input */
+    --input-background: var(--background-default-grey);
+    --input-disabled-background: var(--background-disabled-grey);
+    --input-border-color: var(--border-plain-grey);
+    --input-disabled-border-color: var(--border-disabled-grey);
+    --input-color: var(--text-default-grey);
+    --input-disabled-color: var(--text-disabled-grey);
+    --input-padding-x: 1rem;
+    --input-padding-y: 0.5rem;
+    --input-border-raduis: 0.25rem 0.25rem 0px 0px;
+    /* datatable */
+    --datatable-background: var(--background-contrast-grey);
+    --datatable-alt-background: var(--background-alt-grey);
+    --datatable-hover-background: var(--background-alt-grey-hover);
+    --datatable-active-background: var(--background-alt-grey-active);
+    --datatable-row-color: var(--text-default-grey);
+    --datatable-header-cell-color: var(--text-title-grey);
+    /* menu */
+    --menu-container-border-color: var(--border-default-grey);
+    --menu-border-width: 0px 0px 0px var(--large-border-width);
+    --menu-default-background: var(--background-transparent);
+    --menu-default-color: var(--text-default-grey);
+    --menu-active-color: var(--text-active-blue-france);
+    --menu-hover-background: var(--background-transparent-active);
+    --menu-padding: 0.25rem;
+    --menu-item-gap: 0.25rem;
+    --menu-gap: 0px;
+    --menu-indent: 1rem;
+    --menu-border-color: transparent;
+    --menu-border-color-active: var(--border-active-blue-france);
+}