first pass updating variant selectors to custom props only

rei · Dec 7, 2023 · 2e31852 · 2e31852
1 parent f138237
commit 2e31852
Show file tree

Hide file tree

Showing 2 changed files with 214 additions and 246 deletions.
diff --git a/src/components/button/styles/CdrButton.module.scss b/src/components/button/styles/CdrButton.module.scss
@@ -1,10 +1,75 @@
 @import '../../../styles/settings/_index.scss';
 @import './vars/CdrButton.vars.scss';
 .cdr-button {
-  @include cdr-button-base-mixin;
+
+  //ITEM_DOC:  button's background color
+  background-color: var(--cdr-button-background-color,  #{$cdr-color-background-button-secondary-rest});
+  border: none;
+  border-radius: var(--cdr-button-radius, #{$cdr-radius-softer});
+  //ITEM_DOC:  button's box shadow which serves as a border
+  box-shadow: inset 0 0 0 var(--cdr-button-box-shadow-offset-x, 0) var(--cdr-button-box-shadow-color,  #{$cdr-color-border-button-secondary-rest});
+  //ITEM_DOC:  button's text color
+  color: var(--cdr-button-text-color, #{$cdr-color-text-button-secondary});
+  cursor: pointer;
+  display: var(--cdr-button-display, inline-flex);
+  //ITEM_DOC:  button's fill color
+  fill: var(--cdr-button-fill-color,  #{$cdr-color-icon-default});
+  font-family: var(--cdr-button-font-family, #{$cdr-font-family-sans});
+  font-size: var(--cdr-button-text, 1.6rem);
+  font-style: normal;
+  font-weight: 500;
+  justify-content: var(--cdr-button-justify, normal);
+  letter-spacing: -.008rem;
+  line-height: var(--cdr-button-line-height, 2.2rem);
+  outline: none;
+  overflow: visible;
+  margin: 0;
+  padding: var(--cdr-button-padding, #{$cdr-space-inset-one-x-squish});
+  text-align: left;
+  text-decoration: var(--cdr-button-text-decoration, none);
+  text-transform: none;
+  vertical-align: middle;
+  transition: box-shadow $cdr-duration-2-x $cdr-timing-function-ease, background-color $cdr-duration-2-x $cdr-timing-function-ease, color $cdr-duration-2-x $cdr-timing-function-ease, fill $cdr-duration-2-x $cdr-timing-function-ease;
+  width: var(--cdr-button-width, auto);
+  &:hover, &:active, &:focus {
+    background-color: var(--cdr-button-background-color);
+    box-shadow: inset 0 0 0 var(--cdr-button-box-shadow-offset-x, 0) var(--cdr-button-box-shadow-color), $cdr-prominence-raised;
+    color: var(--cdr-button-text-color);
+    fill: var(--cdr-button-fill-color);
+    outline: var(--cdr-button-outline, none);
+    outline-color: var(--cdr-button-outline-color, -webkit-focus-ring-color);
+    outline-offset: var(--cdr-button-outline-color, 0);
+    text-decoration: var(--cdr-button-text-decoration);
+  }
+  &:active {
+    //ITEM_DOC: Secondary button's text color when active
+    color: var(--cdr-button-text-color);
+    //ITEM_DOC: Secondary button's fill color when active
+    fill: var(--cdr-button-fill-color);
+    //ITEM_DOC: Secondary button's background color when active
+    background-color: var(--cdr-button-background-color);
+    //ITEM_DOC: Secondary button's box shadow when active. //ITEM_DOC: Secondary button's inset box shadow when active
+    box-shadow: inset 0 0 0 var(--cdr-button-box-shadow-offset-x, 0) var(--cdr-button-box-shadow-color), inset 0 0 0 var(--cdr-button-box-shadow-inset-x, 0)  var(--cdr-button-box-shadow-color-active-inset);
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+     //ITEM_DOC: Primary button's background color when disabled
+     background-color: var(--cdr-button-background-color);
+     //ITEM_DOC: Primary button's border color when disabled
+     box-shadow: inset 0 0 0 1px var(--cdr-button-box-shadow-color);
+     //ITEM_DOC: Primary button's text color when disabled
+     color: var(--cdr-button-text-color);     
+     //ITEM_DOC: Primary button's fill color when disabled
+     fill: var(--cdr-button-fill-color);
+    }
 
   svg {
-    @include cdr-button-base-icon-mixin;
+    align-self: center;
+    height: var(--cdr-button-icon-size, #{$cdr-icon-size}); 
+    fill: inherit;
+    width: var(--cdr-button-icon-size, #{$cdr-icon-size}); 
+
   }
 
   &.cdr-button--has-icon-left svg {