improve focus & use button elements

fold-dev · Jun 12, 2024 · 16ded18 · 16ded18
1 parent b114432
commit 16ded18
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/packages/core/src/color/color.css b/packages/core/src/color/color.css
@@ -1,7 +1,7 @@
 :root {
-    --f-color-palette-size: var(--f-size-6);
+    --f-color-palette-size: 20px;
     --f-color-palette-radius: var(--f-radius);
-    --f-color-palette-margin: var(--f-size-1);
+    --f-color-palette-spacing: var(--f-size-2);
     --f-color-palette-border-size: 0.3rem;
     --f-color-palette-selected: 2px solid var(--f-color-surface);
     --f-color-picker-width: 250px;
@@ -13,21 +13,29 @@
 .f-color-palette {
     flex-wrap: wrap;
     justify-content: flex-start;
+    gap: var(--f-color-palette-spacing);
 }
 
 .f-color-palette__color {
     border-radius: var(--f-color-palette-radius);
-    display: inline-block;
-    width: var(--f-color-palette-size);
-    height: var(--f-color-palette-size);
-    margin: var(--f-color-palette-margin);
+    display: block !important;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: var(--f-color-palette-size) !important;
+    height: var(--f-color-palette-size) !important;
+    font-size: 0px;
     border-width: var(--f-color-palette-border-size);
     border-style: solid;
     position: relative;
     transform: (0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
     transform-style: preserve-3d;
 }
 
+.f-color-palette__color:focus {
+    outline-width: 2px;
+    outline-style: solid; 
+}
+
 .f-color-palette__color.is-current::before {
     content: " ";
     display: block;

diff --git a/packages/core/src/color/color.tsx b/packages/core/src/color/color.tsx
@@ -25,11 +25,12 @@ export const Palette = (props: PaletteProps) => {
             {...rest}
             className={className}>
             {colors.map((c: string, index: number) => (
-                <span
+                <button
                     key={index}
                     style={{
                         backgroundColor: c,
                         borderColor: c,
+                        outlineColor: c,
                     }}
                     onClick={() => onChange(c)}
                     className={classNames({