From 43fc15352e3a466fdba30a6837e9a9c6117ddf02 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Thu, 11 Dec 2025 14:42:51 +0000 Subject: [PATCH] . --- src/atoms/button/styles.scss | 41 +++++++++------------- src/atoms/inputWrapper/styles.scss | 41 +++++++--------------- src/atoms/link/styles.scss | 15 ++++---- src/atoms/linkBase/styles.scss | 30 ++++++++-------- src/atoms/listItem/styles.scss | 3 -- src/atoms/selectableView/styles.scss | 3 -- src/atoms/switch/styles.scss | 14 ++++---- src/atoms/titledCollapsibleBox/styles.scss | 3 -- src/particles/box/styles.scss | 10 +----- 9 files changed, 63 insertions(+), 97 deletions(-) diff --git a/src/atoms/button/styles.scss b/src/atoms/button/styles.scss index 739f52f1..4ef9632d 100644 --- a/src/atoms/button/styles.scss +++ b/src/atoms/button/styles.scss @@ -2,6 +2,15 @@ @use '../../particles/text/styles' as text; @use '../../particles/box/styles' as box; +@mixin default-hover-states { + &:hover { + background-color: $color-brand-primary-clear90; + } + &:active { + background-color: $color-brand-primary-clear80; + } +} + @layer kiba-structure { .KibaButton { display: inline-flex; @@ -41,14 +50,7 @@ color: $color-brand-primary; font-weight: 600; text-align: center; - - &:hover { - background-color: $color-brand-primary-clear90; - } - - &:active { - background-color: $color-brand-primary-clear80; - } + @include default-hover-states; &:focus-visible { border-color: $color-background-dark50; @@ -76,34 +78,25 @@ background-color: $color-brand-primary; border-color: $color-brand-primary; color: $color-text-on-brand; + &:hover { + background-color: $color-brand-secondary; + } + &:active { + background-color: var(--kiba-color-brand-secondary-dark10, #158040); + } } - - &.primary:hover { - background-color: $color-brand-secondary; - } - - &.primary:active { - background-color: var(--kiba-color-brand-secondary-dark10, #158040); - } - - // Secondary variant &.secondary { border-color: $color-brand-primary; + @include default-hover-states; } - - // Large variant &.large { padding: $padding-wide $padding-wide2; font-size: 1.2em; } - - // Small variant &.small { padding: $padding-narrow $padding; font-size: 0.8em; } - - // Card variant &.card { box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15); margin: 0px 4px 12px 4px; diff --git a/src/atoms/inputWrapper/styles.scss b/src/atoms/inputWrapper/styles.scss index ad10f7cf..0259bd17 100644 --- a/src/atoms/inputWrapper/styles.scss +++ b/src/atoms/inputWrapper/styles.scss @@ -2,6 +2,16 @@ @use '../../particles/text/styles' as text; @use '../../particles/box/styles' as box; +@mixin input-states($hover-color, $focus-color) { + &:hover .KibaInputWrapperInner { + border-color: $hover-color; + } + &.focus .KibaInputWrapperInner, + &:focus-within .KibaInputWrapperInner { + border-color: $focus-color; + } +} + @layer kiba-structure { .KibaInputWrapper { display: flex; @@ -42,6 +52,7 @@ @layer kiba-theme { .KibaInputWrapper { transition-duration: 0.3s; + @include input-states(var(--kiba-color-brand-primary-light10), $color-brand-primary); & * { transition-duration: 0.3s; @@ -65,16 +76,6 @@ } } - .KibaInputWrapper:hover .KibaInputWrapperInner { - border-color: var(--kiba-color-brand-primary-light10); - box-shadow: none; - } - - .KibaInputWrapper.focus .KibaInputWrapperInner, - .KibaInputWrapper:focus-within .KibaInputWrapperInner { - border-color: $color-brand-primary; - } - .KibaInputWrapper.disabled .KibaInputWrapperInner { background-color: var(--kiba-color-disabled-light90); border-color: var(--kiba-color-disabled-light20); @@ -96,20 +97,12 @@ // Error variant .KibaInputWrapper.error { + @include input-states(var(--kiba-color-error-light10), $color-error); .KibaInputWrapperInner { background-color: var(--kiba-color-error-light90); border-color: var(--kiba-color-error-light20); } - &:hover .KibaInputWrapperInner { - border-color: var(--kiba-color-error-light10); - } - - &.focus .KibaInputWrapperInner, - &:focus-within .KibaInputWrapperInner { - border-color: $color-error; - } - .KibaInputWrapperMessage { color: $color-error; } @@ -117,20 +110,12 @@ // Success variant .KibaInputWrapper.success { + @include input-states(var(--kiba-color-success-light10), $color-success); .KibaInputWrapperInner { background-color: var(--kiba-color-success-light90); border-color: var(--kiba-color-success-light20); } - &:hover .KibaInputWrapperInner { - border-color: var(--kiba-color-success-light10); - } - - &.focus .KibaInputWrapperInner, - &:focus-within .KibaInputWrapperInner { - border-color: $color-success; - } - .KibaInputWrapperMessage { color: $color-success; } diff --git a/src/atoms/link/styles.scss b/src/atoms/link/styles.scss index 094a9b2c..93a55b32 100644 --- a/src/atoms/link/styles.scss +++ b/src/atoms/link/styles.scss @@ -2,6 +2,12 @@ @use '../../particles/text/styles' as text; @use '../../particles/box/styles' as box; +@mixin default-link-hover { + &:hover { + color: $color-brand-secondary; + } +} + @layer kiba-structure { .KibaLink { cursor: pointer; @@ -18,10 +24,7 @@ @include box.focusable; color: $color-brand-primary; text-decoration: underline; - - &:hover { - color: $color-brand-secondary; - } + @include default-link-hover; &:focus-visible { @include box.focussed; @@ -36,9 +39,7 @@ &:visited { color: $color-brand-primary; - &:hover { - color: $color-brand-secondary; - } + @include default-link-hover; } } } diff --git a/src/atoms/linkBase/styles.scss b/src/atoms/linkBase/styles.scss index edc4be65..1777e1b0 100644 --- a/src/atoms/linkBase/styles.scss +++ b/src/atoms/linkBase/styles.scss @@ -1,6 +1,15 @@ @use '../../styles/variables' as *; @use '../../particles/box/styles' as box; +@mixin hover-states { + &:hover { + background-color: var(--kiba-color-brand-primary-clear90); + } + &:active { + background-color: var(--kiba-color-brand-primary-clear75); + } +} + @layer kiba-structure { .KibaLinkBase { cursor: pointer; @@ -28,13 +37,7 @@ .KibaLinkBase { @include box.default; @include box.focusable; - opacity: 1; - &:hover { - background-color: var(--kiba-color-brand-primary-clear80); - } - &:active { - background-color: var(--kiba-color-brand-primary-clear50); - } + @include hover-states; &:focus-visible { @include box.focussed; } @@ -43,21 +46,20 @@ &:hover { background-color: $color-disabled-text; } + &:active { + background-color: $color-disabled-text; + } } - - // Translucent variant &.translucent { background-color: transparent; + @include hover-states; } - - // Card variant &.card { @include box.card; - margin: 0; + @include hover-states; } - - // Image variant &.image { + @include hover-states; &:hover { opacity: 0.8; } diff --git a/src/atoms/listItem/styles.scss b/src/atoms/listItem/styles.scss index f7266b49..f4801f68 100644 --- a/src/atoms/listItem/styles.scss +++ b/src/atoms/listItem/styles.scss @@ -23,9 +23,6 @@ @include box.default; @include box.focusable; padding: $padding-wide $padding-wide; - background-color: transparent; - border-radius: $border-radius $border-radius; - border-width: $border-width; &.clickable { &:hover { background-color: var(--kiba-color-brand-primary-clear90); diff --git a/src/atoms/selectableView/styles.scss b/src/atoms/selectableView/styles.scss index 4a50f692..2e4a2d21 100644 --- a/src/atoms/selectableView/styles.scss +++ b/src/atoms/selectableView/styles.scss @@ -34,9 +34,6 @@ > .KibaSelectableView-overlay { @include box.default; @include box.focusable; - background-color: transparent; - border-color: transparent; - padding: 0; } &:hover > .KibaSelectableView-overlay { background-color: var(--kiba-color-brand-primary-clear80); diff --git a/src/atoms/switch/styles.scss b/src/atoms/switch/styles.scss index d9f1989a..881a28f2 100644 --- a/src/atoms/switch/styles.scss +++ b/src/atoms/switch/styles.scss @@ -1,5 +1,11 @@ @use '../../styles/variables' as *; +@mixin active-hover-state { + &:hover { + background-color: $color-brand-secondary; + } +} + @layer kiba-structure { .KibaSwitch { cursor: pointer; @@ -26,6 +32,7 @@ background-color: $color-background-dark50; border-radius: 1em; padding: 0.15em; + @include active-hover-state; & > .KibaSwitchInner { width: 1em; height: 1em; @@ -33,14 +40,9 @@ border-radius: 50%; transition: 300ms; } - &:hover { - background-color: $color-brand-secondary; - } &.checked { background-color: $color-brand-primary; - &:hover { - background-color: $color-brand-secondary; - } + @include active-hover-state; } &.disabled { background-color: $color-disabled-light50; diff --git a/src/atoms/titledCollapsibleBox/styles.scss b/src/atoms/titledCollapsibleBox/styles.scss index 70c503d8..2b703787 100644 --- a/src/atoms/titledCollapsibleBox/styles.scss +++ b/src/atoms/titledCollapsibleBox/styles.scss @@ -27,15 +27,12 @@ @include box.default; @include box.focusable; border-color: var(--kiba-color-background-dark10); - border-style: solid; .KibaTitledCollapsibleBoxHeader { @include text.default; @include text.bold; @include box.focusable; padding: $padding $padding-wide; background-color: var(--kiba-color-background-dark01); - border: none; - border-radius: 0; &:hover { background-color: var(--kiba-color-neutral); } diff --git a/src/particles/box/styles.scss b/src/particles/box/styles.scss index d33b8c7a..f9193301 100644 --- a/src/particles/box/styles.scss +++ b/src/particles/box/styles.scss @@ -130,19 +130,11 @@ @layer kiba-theme { .KibaBox { @include default; - box-shadow: none; - padding: 0; - margin: 0; - outline-style: solid; - outline-color: transparent; - outline-width: 0; - outline-offset: 0; - opacity: 1; &.transparent { @include transparent; } &.padded { @include padded; } &.card { @include card; } &.bordered { @include bordered; } - &.focusable { @include focusable; border-width: 2px; } + &.focusable { @include focusable; } &.focussed { @include focussed; } &.rounded { @include rounded; } &.unpadded { @include unpadded; }