feat(layout): revamp default layout ui

apps/demo/src/assets/css/demo.css

@@ -25,11 +25,6 @@
   margin-bottom: 0.3rem;
 }
 
-.demo .demo-aside ul > li > a {
-  color: var(--color);
-  text-decoration: none;
-}
-
 .demo-section {
   margin-bottom: 3rem;
 }
@@ -96,7 +91,7 @@
 
 @media screen and (min-width: 576px) {
   .demo > .demo-aside {
-    border-right: 1px solid #ccc;
+    border-right: 1px solid var(--border-color, #e5e7eb);
     height: 100%;
     overflow-y: auto;
     padding: 1rem 2rem;

apps/demo/src/assets/css/index.css

@@ -1,14 +1,15 @@
-@import "./demo.css";
-@import "./editable-title.css";
-@import "./home.css";
-@import "./style.css";
 @import "./vars.css";
-@import "./table-border.css";
+@import "./style.css";
 @import "./code-block.css";
+@import "./demo.css";
+
+@import "./data.css";
+@import "./editable-title.css";
 @import "./header-addon.css";
-@import "./table.css";
-@import "./sticky-collapsible-footer.css";
+@import "./home.css";
 @import "./inline-link.css";
-@import "./tab-view.css";
-@import "./data.css";
 @import "./select.css";
+@import "./sticky-collapsible-footer.css";
+@import "./tab-view.css";
+@import "./table-border.css";
+@import "./table.css";

apps/demo/src/assets/css/vars.css

@@ -1,38 +1,3 @@
 :root {
-  --color: #2c2c2c;
-
-  --dz-layout-header-bg: transparent;
-  --dz-layout-header-border: 1px solid #dbdbdb;
-  --dz-layout-header-color: var(--color);
-  --dz-layout-header-gap: 1.5rem;
-  --dz-layout-header-logo-max-width: 150px;
-  --dz-layout-header-max-width: 1920px;
-  --dz-layout-header-padding-h: var(--dz-layout-main-padding-h, 1rem);
-  --dz-layout-header-padding-v: 1rem;
-
-  --dz-layout-logo-max-height: 40px;
-
-  --dz-nav-item-padding-h: 1.5rem;
-  --dz-nav-item-padding-v: 0.625rem;
-  --dz-nav-menu-padding-h: 0;
-  --dz-nav-menu-padding-v: 1rem;
-  --dz-nav-menu-separator-color: #dbdbdb;
-  --dz-nav-item-active-bg: rgba(45, 45, 45, 0.125);
-  --dz-nav-item-hover-bg: rgba(45, 45, 45, 0.125);
-  --dz-nav-item-color: var(--dz-layout-header-color);
-  --dz-nav-item-border-radius: 0.312rem;
-  /* --dz-layout-nav-item-hover-color: var(--dz-layout-header-color);
-  --dz-layout-nav-item-active-color: var(--dz-layout-header-color);
-  --dz-layout-nav-menu-label-color: var(--dz-layout-header-color); */
-
-  --dz-layout-main-bg: #ffffff;
-  --dz-layout-main-padding-h: 1rem;
-  --dz-layout-main-padding-v: 1.5rem;
-}
-
-@media screen and (min-width: 576px) {
-  :root {
-    --dz-layout-main-padding-h: 2rem;
-    --dz-layout-main-padding-v: 2.5rem;
-  }
+  --dz-nav-item-border-radius: 0.25rem;
 }

packages/form/src/assets/css/date-input.css

@@ -34,7 +34,7 @@ input[type="date"][aria-invalid="false"] {
 }
 
 input[type="date"]:focus-within {
-  outline: 2px solid var(--dz-primary-color);
+  outline: 1px solid var(--dz-primary-color);
 }
 
 input[type="date"]:disabled {

packages/form/src/assets/css/password.css

@@ -10,7 +10,7 @@
 }
 
 .input-field-password:focus-within {
-  outline: 2px solid var(--dz-primary-color);
+  outline: 1px solid var(--dz-primary-color);
 }
 
 .input-field-password[aria-invalid="true"] {