Просмотр исходного кода

Added border as shadow and updated button

David Hill 3 месяцев назад
Родитель
Сommit
a5bcb76bbf
2 измененных файлов с 7 добавлено и 2 удалено
  1. 2 2
      packages/ui/src/components/button.css
  2. 5 0
      packages/ui/src/styles/theme.css

+ 2 - 2
packages/ui/src/components/button.css

@@ -28,10 +28,10 @@
   }
 
   &[data-variant="secondary"] {
-    border-color: var(--border-weak-base);
+    border-color: transparent;
     background-color: var(--button-secondary-base);
     color: var(--text-strong);
-    box-shadow: var(--shadow-xs);
+    box-shadow: var(--shadow-xs-border);
 
     &:hover:not(:disabled) {
       border-color: var(--border-hover);

+ 5 - 0
packages/ui/src/styles/theme.css

@@ -55,6 +55,11 @@
   --shadow-md:
     0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12),
     0 1px 2px -1px rgba(19, 16, 16, 0.12);
+  --shadow-xs-border:
+    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.20)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.04),
+    0 1px 2px 0 rgba(19, 16, 16, 0.06),
+    0 1px 3px 0 rgba(19, 16, 16, 0.08);
   --shadow-xs-border-selected:
     0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
     0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),