From cc1aab6b5039c645c50b1ebc960b4d6519a60f7a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 10 Dec 2024 14:10:08 +0000 Subject: [PATCH] Fix Checkbox Signed-off-by: Charles de Dreuille --- packages/canon/src/components/Checkbox/styles.css | 7 +++++++ packages/canon/src/theme/theme.css | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css index fb7e0d0ab7..0ef0834a56 100644 --- a/packages/canon/src/components/Checkbox/styles.css +++ b/packages/canon/src/components/Checkbox/styles.css @@ -18,6 +18,7 @@ box-shadow: inset 0 0 0 1px var(--canon-outline); cursor: pointer; border-radius: 2px; + transition: all 0.2s ease-in-out; &[data-state='unchecked'] { & .checkbox-indicator { @@ -36,4 +37,10 @@ justify-content: center; color: var(--canon-text-primary-on-accent); } + + &:hover { + & .checkbox { + box-shadow: inset 0 0 0 1px var(--canon-outline-hover); + } + } } diff --git a/packages/canon/src/theme/theme.css b/packages/canon/src/theme/theme.css index ef78b2221a..a105694cac 100644 --- a/packages/canon/src/theme/theme.css +++ b/packages/canon/src/theme/theme.css @@ -89,8 +89,8 @@ --canon-surface-2: #1a1a1a; /* Outlines */ - --canon-outline: rgba(255, 255, 255, 0.1); - --canon-outline-hover: rgba(255, 255, 255, 0.2); + --canon-outline: rgba(255, 255, 255, 0.2); + --canon-outline-hover: rgba(255, 255, 255, 0.4); --canon-outline-focus: #fff; /* States - Add more states */