From 8ab5de7a2f0c55f0a9b58a85cbf5f0f9359f695d Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 11 Jan 2025 08:14:01 +0000
Subject: [PATCH] Styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/public/components.css | 63 ++++++++++++++++++++++++++++++++
 canon-docs/public/core.css       |  5 ++-
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/canon-docs/public/components.css b/canon-docs/public/components.css
index a3f3899cd8..8889d8c978 100644
--- a/canon-docs/public/components.css
+++ b/canon-docs/public/components.css
@@ -277,3 +277,66 @@
     font-weight: var(--canon-font-weight-bold);
   }
 }
+
+.canon-input-root {
+  font-family: var(--canon-font-regular);
+  flex-direction: column;
+  display: flex;
+}
+
+.canon-input-label {
+  font-size: var(--canon-font-size-caption);
+  font-weight: var(--canon-font-weight-regular);
+  color: var(--canon-text-primary);
+  margin-bottom: var(--canon-spacing-3xs);
+}
+
+.canon-input-control {
+  border-radius: var(--canon-border-radius-sm);
+  border: 1px solid var(--canon-border-base);
+  padding: var(--canon-spacing-sm);
+  background-color: var(--canon-surface-1);
+  font-size: var(--canon-font-size-body);
+  font-weight: var(--canon-font-weight-regular);
+  color: var(--canon-text-primary);
+  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
+}
+
+.canon-input-control::placeholder {
+  color: var(--canon-text-secondary);
+}
+
+.canon-input-control:hover {
+  border-color: var(--canon-border-hover);
+}
+
+.canon-input-control:focus-visible {
+  outline-color: var(--canon-border-selected);
+  border-color: var(--canon-border-selected);
+  outline-width: 0;
+}
+
+.canon-input-control[data-invalid] {
+  border-color: var(--canon-error);
+}
+
+.canon-input-control-sm {
+  height: 2rem;
+}
+
+.canon-input-control-md {
+  height: 2.5rem;
+}
+
+.canon-input-description {
+  font-size: var(--canon-font-size-caption);
+  font-weight: var(--canon-font-weight-regular);
+  color: var(--canon-text-secondary);
+  margin-top: var(--canon-spacing-3xs);
+}
+
+.canon-input-error {
+  font-size: var(--canon-font-size-caption);
+  color: var(--canon-error);
+  margin-top: var(--canon-spacing-3xs);
+}
diff --git a/canon-docs/public/core.css b/canon-docs/public/core.css
index 62865e3c0b..3b5f341298 100644
--- a/canon-docs/public/core.css
+++ b/canon-docs/public/core.css
@@ -5700,7 +5700,7 @@
   --canon-border-hover: #0003;
   --canon-border-warning: #e36d05;
   --canon-border-error: #e22b2b;
-  --canon-border-selected: #1db954;
+  --canon-border-selected: #0006;
   --canon-error: #f50000;
   --canon-text-primary: #000;
   --canon-text-primary-on-accent: #fff;
@@ -5747,9 +5747,10 @@
   --canon-surface-1: #121212;
   --canon-surface-2: #1a1a1a;
   --canon-border-base: #fff3;
+  --canon-border-hover: #ffffff4d;
   --canon-border-warning: #f50000;
   --canon-border-error: #f87503;
-  --canon-border-selected: #25d262;
+  --canon-border-selected: #fff6;
   --canon-error: #f50000;
   --canon-text-primary: #fff;
   --canon-text-primary-on-accent: #000;