feat(admin-ui): Style improvements to table and form input borders

vendure-ecommerce · Sep 7, 2023 · 5287287 · 5287287
1 parent 57f47df
commit 5287287
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 35 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss b/packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss
@@ -48,15 +48,6 @@ table.no-select {
     width: 24px;
 }
 
-//.heading-row th {
-//    border-bottom: 1px solid var(--color-weight-200);
-//    font-size: var(--font-size-xs);
-//    font-weight: 600;
-//    text-transform: uppercase;
-//    position: relative;
-//    white-space: nowrap;
-//}
-
 .sort-toggle {
     display: flex;
     align-items: center;
@@ -115,7 +106,7 @@ th.filter-row {
     }
 
     &.active {
-        border-bottom: 1px solid var(--color-weight-200);
+        border-bottom: 1px solid var(--color-table-header-border);
     }
 
     .filters {

diff --git a/...in-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.scss b/...in-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.scss
@@ -19,7 +19,7 @@ label.rich-text-label {
 
 ::ng-deep .ProseMirror-menubar {
     position: sticky;
-    border: 1px solid var(--color-component-border-200);
+    border: 1px solid var(--color-weight-200);
     border-bottom: none;
     background-color: var(--color-component-bg-200);
     color: var(--color-icon-button);
@@ -35,7 +35,7 @@ label.rich-text-label {
     min-height: 128px;
     max-height: 600px;
     min-width: 200px;
-    border: 1px solid var(--color-component-border-200);
+    border: 1px solid var(--color-weight-200);
     border-radius: 0 0 var(--border-radius-input) var(--border-radius-input);
     transition: border-color 0.2s;
     overflow: auto;

diff --git a/packages/admin-ui/src/lib/static/styles/_mixins.scss b/packages/admin-ui/src/lib/static/styles/_mixins.scss
@@ -13,7 +13,7 @@
 }
 @mixin table-base-styles {
     th {
-        border-bottom: 1px solid var(--color-weight-200);
+        border-bottom: 1px solid var(--color-table-header-border);
         font-size: var(--font-size-xs);
         font-weight: 600;
         text-transform: uppercase;
@@ -37,14 +37,14 @@
 
     th:last-of-type,
     td:last-of-type {
-        border-inline-end: 1px solid var(--color-weight-200);
+        border-inline-end: 1px solid var(--color-table-header-border);
     }
 
     tr:first-of-type th:last-of-type {
-        border-image: linear-gradient(0deg, var(--color-weight-200), transparent) 1;
+        border-image: linear-gradient(0deg, var(--color-table-header-border), transparent) 1;
     }
     tr:last-of-type td:last-of-type {
-        border-image: linear-gradient(180deg, var(--color-weight-200), transparent) 1;
+        border-image: linear-gradient(180deg, var(--color-table-header-border), transparent) 1;
     }
 
     tbody td {

diff --git a/packages/admin-ui/src/lib/static/styles/global/_forms.scss b/packages/admin-ui/src/lib/static/styles/global/_forms.scss
@@ -65,7 +65,7 @@ input:not([type='checkbox']):not([type='radio']),
 textarea,
 select {
     border-radius: var(--border-radius-input) !important;
-    border: 1px solid var(--color-weight-300);
+    border: 1px solid var(--color-weight-200);
     padding: 5px !important;
     transition: background-color 0.2s, box-shadow 0.2s !important;
     &:focus {
@@ -149,7 +149,7 @@ select {
     color: var(--color-text-100);
     line-height: initial;
     position: initial !important;
-    border: 1px solid var(--color-weight-300);
+    border: 1px solid var(--color-weight-200);
 }
 .ng-select .ng-select-container .ng-value-container {
     //padding-top: 0;

diff --git a/packages/admin-ui/src/lib/static/styles/rtl.scss b/packages/admin-ui/src/lib/static/styles/rtl.scss
@@ -114,7 +114,7 @@
     }
 
     .calendar-button {
-        border: 1px solid var(--color-weight-300) !important;
+        border: 1px solid var(--color-weight-200) !important;
     }
 
     .selected-datetime {

diff --git a/packages/admin-ui/src/lib/static/styles/theme/dark.scss b/packages/admin-ui/src/lib/static/styles/theme/dark.scss
@@ -24,22 +24,6 @@
     --color-text-inverse: var(--clr-global-font-color);
     --color-text-active: var(--color-primary-600);
 
-    --color-weight-100: hsl(0 0% 95%);
-    --color-weight-125: hsl(0 0% 93%);
-    --color-weight-150: hsl(0 0% 90%);
-    --color-weight-200: hsl(0 0% 85%);
-    --color-weight-300: hsl(0 0% 75%);
-    --color-weight-400: hsl(0 0% 65%);
-    --color-weight-500: hsl(0 0% 55%);
-    --color-weight-600: hsl(0 0% 45%);
-    --color-weight-700: hsl(0 0% 35%);
-    --color-weight-800: hsl(0 0% 25%);
-    --color-weight-900: hsl(0 0% 15%);
-    --color-weight-950: hsl(0 0% 10%);
-    --color-weight-975: hsl(0 0% 7%);
-    --color-weight-1000: hsl(0 0% 5%);
-
-
     --color-weight-100: hsl(201 30% 15%);
     --color-weight-125: hsl(201 30% 17%);
     --color-weight-150: hsl(201 30% 20%);
@@ -490,6 +474,7 @@
     --clr-table-border-color: var(--clr-datagrid-default-border-color);
     --clr-table-bordercolor: var(--clr-datagrid-default-border-color);
     --clr-table-borderstyle: 0.05rem solid var(--clr-datagrid-default-border-color);
+    --color-table-header-border: var(--color-weight-150);
     --color-table-row-hover-bg: var(--color-weight-125);
     --color-table-row-active-bg: var(--color-primary-900);
     --color-table-row-separator: var(--color-weight-150);

diff --git a/packages/admin-ui/src/lib/static/styles/theme/default.scss b/packages/admin-ui/src/lib/static/styles/theme/default.scss
@@ -176,6 +176,7 @@
     --color-json-editor-key: var(--color-success-800);
     --color-json-editor-error: var(--color-error-700);
 
+    --color-table-header-border: var(--color-weight-200);
     --color-table-row-hover-bg: var(--color-weight-100);
     --color-table-row-active-bg: var(--color-primary-100);
     --color-table-row-separator: var(--color-weight-100);