feat(components/atom/checkbox): Add scss parameters to atom checkbox …

…components
SUI-Components · Feb 8, 2024 · 6df6356 · 6df6356
1 parent cebcf85
commit 6df6356
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/components/atom/checkbox/src/styles/index.scss b/components/atom/checkbox/src/styles/index.scss
@@ -9,19 +9,19 @@ $class-icon: '#{$base-class}--Icon';
 
   &#{$base-class}--native-disabled {
     #{$class-icon} {
-      padding: 0;
-      cursor: default;
       align-items: center;
-      border-width: 1.5px;
+      border-radius: 0.15em;
       border-style: solid;
+      border-width: 1.5px;
+      cursor: $cur-atom-checkbox;
       display: inline-flex;
+      height: 100%;
       justify-content: center;
+      outline-offset: 2px;
+      padding: 0;
       text-align: center;
       vertical-align: top;
       width: 100%;
-      height: 100%;
-      border-radius: 0.15em;
-      outline-offset: 2px;
 
       &:focus {
         outline: none;
@@ -74,18 +74,19 @@ $class-icon: '#{$base-class}--Icon';
     &.is-indeterminate,
     &:checked,
     &:indeterminate {
-      border-color: $c-primary;
-      color: $c-atom-checkbox;
-      background-color: $c-primary;
+      border-color: $bdc-atom-checkbox--checked;
+      color: $c-atom-checkbox--checked;
+      background-color: $bgc-atom-checkbox--checked;
       &::before {
         box-shadow: inset 1em 1em $c-atom-checkbox;
       }
     }
 
     &:disabled {
-      color: $bdc-atom-checkbox-is-disabled;
       background-color: $bgc-checked-atom-checkbox-is-disabled;
       border-color: $bdc-atom-checkbox-is-disabled;
+      color: $bdc-atom-checkbox-is-disabled;
+      cursor: $cur-atom-checkbox--disabled;
       &::before {
         background-color: $bdc-atom-checkbox-is-disabled;
         box-shadow: none;

diff --git a/components/atom/checkbox/src/styles/settings.scss b/components/atom/checkbox/src/styles/settings.scss
@@ -34,6 +34,12 @@ $c-atom-checkbox--success: $c-success !default;
 $c-atom-checkbox--error: $c-error !default;
 $c-atom-checkbox--alert: $c-alert !default;
 
+$c-atom-checkbox--checked: $c-atom-checkbox !default;
+$bgc-atom-checkbox--checked: $c-white !default;
+$cur-atom-checkbox: default !default;
+$cur-atom-checkbox--disabled: default !default;
+$bdc-atom-checkbox--checked: $c-primary !default;
+
 $status-atom-checkbox: success $c-atom-checkbox--success, error $c-atom-checkbox--error, alert $c-atom-checkbox--alert !default;
 
 $sz-icon: (