feat(ghost-solid-button): add styling

momentum-design · Jul 27, 2023 · 6113c06 · 6113c06
1 parent 3f269ee
commit 6113c06
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/src/components/ButtonCircle/ButtonCircle.style.scss b/src/components/ButtonCircle/ButtonCircle.style.scss
@@ -111,6 +111,35 @@
     }
   }
 
+  // PRIMARY SOLID GHOST
+  &[data-ghost='true'],
+  &[data-solid='true'] {
+    &[data-outline='false'] {
+      background-color: var(--mds-color-theme-button-inverted-normal);
+      color: var(--mds-color-theme-text-primary-normal);
+
+      &:hover,
+      &.hover {
+        background-color: var(--mds-color-theme-button-inverted-hover);
+        color: var(--mds-color-theme-text-primary-normal);
+      }
+
+      &:active,
+      &.active {
+        background-color: var(--mds-color-theme-button-inverted-pressed);
+        color: var(--mds-color-theme-text-primary-normal);
+      }
+
+      &[data-disabled='true'],
+      &.disable,
+      &[data-shallow-disabled='true'] {
+        background-color: var(--mds-color-theme-button-secondary-normal);
+        color: var(--mds-color-theme-text-primary-disabled);
+        cursor: auto;
+      }
+    }
+  }
+
   // JOIN
   &[data-color='join'] {
     background-color: var(--mds-color-theme-button-join-normal);

diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -107,10 +107,10 @@ const callControlsCommonChildren = [
 ];
 
 const paginationCommonChildren = [
-  <ButtonCircle solid disabled key="0" size={28}>
+  <ButtonCircle solid ghost disabled key="0" size={28}>
     <Icon name="arrow-up" autoScale={150} />
   </ButtonCircle>,
-  <ButtonCircle solid key="1" size={28}>
+  <ButtonCircle solid ghost key="1" size={28}>
     <Icon name="arrow-down" autoScale={150} />
   </ButtonCircle>,
 ];

diff --git a/src/components/ButtonPill/ButtonPill.style.scss b/src/components/ButtonPill/ButtonPill.style.scss
@@ -113,6 +113,35 @@
     }
   }
 
+  // PRIMARY SOLID GHOST
+  &[data-ghost='true'],
+  &[data-solid='true'] {
+    &[data-outline='false'] {
+      background-color: var(--mds-color-theme-button-inverted-normal);
+      color: var(--mds-color-theme-text-primary-normal);
+
+      &:hover,
+      &.hover {
+        background-color: var(--mds-color-theme-button-inverted-hover);
+        color: var(--mds-color-theme-text-primary-normal);
+      }
+
+      &:active,
+      &.active {
+        background-color: var(--mds-color-theme-button-inverted-pressed);
+        color: var(--mds-color-theme-text-primary-normal);
+      }
+
+      &[data-disabled='true'],
+      &.disable,
+      &[data-shallow-disabled='true'] {
+        background-color: var(--mds-color-theme-button-secondary-normal);
+        color: var(--mds-color-theme-text-primary-disabled);
+        cursor: auto;
+      }
+    }
+  }
+
   // JOIN
   &[data-color='join'] {
     background-color: var(--mds-color-theme-button-join-normal);