From 16ded185fd9fbce3721688d73655da41aeb4de13 Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Wed, 12 Jun 2024 15:24:50 +0200
Subject: [PATCH] improve focus & use button elements

---
 packages/core/src/color/color.css | 20 ++++++++++++++------
 packages/core/src/color/color.tsx |  3 ++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/color/color.css b/packages/core/src/color/color.css
index 60c1f345..f660b09a 100644
--- 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,14 +13,17 @@
 .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;
@@ -28,6 +31,11 @@
     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
index 8c48ce4d..0b466a30 100644
--- 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({