@pareto-engineering/design-system 4.0.0-alpha.18 → 4.0.0-alpha.21

package/src/ui/b/Button/styles.scss

@@ -20,7 +20,8 @@ $default-animation-time: .31s;
   font-weight: 400;
   justify-content: space-between;
   padding: $default-padding;
-  transition: all .25s;//var(--theme-default-paragraph);
+  transition: all .25s;
+  white-space: nowrap;//var(--theme-default-paragraph);
 
   &.arrow-right {
     &::after {
@@ -57,7 +58,10 @@ $default-animation-time: .31s;
   &:not(:disabled) {
     cursor: pointer;
 
-    &:hover {
+    &:hover
+      :not(.#{bem.$modifier-gradient})
+      :not(.#{bem.$modifier-ghost})
+      :not(.#{bem.$modifier-simple}) {
       background: var(--soft-x, var(--soft-#{$default-color}));
     }
 
@@ -67,8 +71,18 @@ $default-animation-time: .31s;
   }
 
   &.#{bem.$modifier-gradient} {
-    background: linear-gradient(to left, var(--soft-x), var(--hard-x) 60%);
-    transition: unset;
+    background-image: linear-gradient(
+      to right,
+      var(--hard-x) 30%,
+      var(--x) 50%,
+      var(--hard-x) 100%
+    );
+    background-position: left;
+    background-size: 200% auto;
+
+    &:not(:disabled):hover {
+      background-position: right center;
+    }
   }
 
   &.#{bem.$modifier-compact} {
@@ -115,6 +129,10 @@ $default-animation-time: .31s;
     color: var(--x, var(--#{$default-color}));
     padding: 0;
 
+    > .#{bem.$modifier-underlined} {
+      text-decoration: underline;
+    }
+
     &:disabled,
     &:hover,
     &:focus {

package/src/ui/b/ThemeSelector/ThemeSelector.jsx

@@ -20,7 +20,6 @@ const ThemeSelector = ({
   className:userClassName,
   style,
   themes,
-  iconMap,
 }) => {
   const {
     userTheme,
@@ -37,9 +36,11 @@ const ThemeSelector = ({
   },
   [userTheme])
 
+  const themeText = userTheme && userTheme.charAt(0).toUpperCase() + userTheme.slice(1)
+
   return (
-    <button
-      type="button"
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/no-static-element-interactions
+    <a
       className={[
         baseClassName,
         componentClassName,
@@ -50,14 +51,10 @@ const ThemeSelector = ({
       id={id}
       style={style}
       onClick={loopThemes}
+      onKeyDown={loopThemes}
     >
-      <span className="icon">
-        { iconMap[userTheme] }
-      </span>
-      <span>
-        { userTheme }
-      </span>
-    </button>
+      {themeText}
+    </a>
   )
 }
 
@@ -81,20 +78,10 @@ ThemeSelector.propTypes = {
    * The themes and the order in which they appear
    */
   themes:PropTypes.arrayOf(PropTypes.string),
-
-  /**
-   * A map of the theme names with the icons that represent them. Uses the default font icon.
-   */
-  iconMap:PropTypes.objectOf(PropTypes.string),
-
 }
 
 ThemeSelector.defaultProps = {
-  themes :['light', 'dark'],
-  iconMap:{
-    dark :'d', // sun,
-    light:'T', // moon,
-  },
+  themes:['light', 'dark'],
 }
 
 export default ThemeSelector

package/src/ui/b/ThemeSelector/styles.scss

@@ -2,14 +2,8 @@
 
 @use "@pareto-engineering/bem";
 
-$default-color:var(--x, var(--contrast));
-
 .#{bem.$base}.theme-selector {
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: $default-color;
   cursor: pointer;
-  display: flex;
-  gap: var(--gap);
+  display: block;
+  text-decoration: none;
 }