fix: contrast in surface button and table (#75)

whopio · Feb 14, 2024 · 5a7d71d · 5a7d71d
1 parent 3abd1af
commit 5a7d71d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/packages/frosted-ui/src/components/base-button.css b/packages/frosted-ui/src/components/base-button.css
@@ -224,7 +224,7 @@
   @media (hover: hover) {
     &:where(:hover) {
       box-shadow:
-        inset 0 0 0 1px var(--accent-a6),
+        inset 0 0 0 1px var(--accent-a7),
         0px 2px 2px 0px var(--black-a1);
     }
   }

diff --git a/packages/frosted-ui/src/components/drawer.css b/packages/frosted-ui/src/components/drawer.css
@@ -3,7 +3,6 @@
   top: 0;
   right: 0;
   bottom: 0;
-  z-index: 1;
 
   display: flex;
   flex-direction: column;
@@ -19,7 +18,6 @@
   content: '';
   position: absolute;
   inset: 0;
-  z-index: -1;
   box-shadow: var(--shadow-5);
 }
 

diff --git a/packages/frosted-ui/src/components/table.css b/packages/frosted-ui/src/components/table.css
@@ -42,7 +42,7 @@
 
   /* Applying borders (via box shadow) to table cells instead of rows: */
   /* Box-shadow applied to table rows doesn't work in Safari */
-  box-shadow: inset 0 -1px var(--gray-a5);
+  box-shadow: inset 0 -1px var(--data-table-border-color);
   /* Remove box-shadow from the last row if TableBottomBar is not used */
   &:where(
       .fui-TableRoot:not(:has(.fui-TableBottomBar))
@@ -119,13 +119,6 @@
 
 @breakpoints {
   .fui-TableRoot-vars {
-    /* When possible, use half-transparent gray for nicer border blending with the background */
-    --data-table-border-color: color-mix(
-      in oklab,
-      var(--gray-a5),
-      var(--gray-6)
-    );
-
     &:where(.fui-r-size-1) {
       --table-border-radius: var(--radius-3);
       --table-column-header-cell-padding: var(--space-2) var(--space-3);
@@ -158,6 +151,15 @@
 
 /* surface */
 
+/* When possible, use half-transparent gray for nicer border blending with the background */
+:where(.frosted-ui) {
+  --data-table-border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.frosted-ui:not(.light, .light-theme)) {
+  --data-table-border-color: color-mix(in oklab, var(--gray-a3), var(--gray-4));
+}
+
 .fui-TableRoot:where(.fui-variant-surface) {
   border: 1px solid var(--gray-a5);
   border-radius: var(--table-border-radius);
@@ -189,9 +191,3 @@
     overflow: hidden;
   }
 }
-
-.fui-TableRoot {
-  & :where(.fui-TableHeader .fui-TableRow:first-child) {
-    --data-table-border-color: transparent;
-  }
-}