@redsift/design-system 10.3.1 → 10.4.0-alpha.0

package/index.d.ts

@@ -2585,6 +2585,8 @@ declare const Button: Comp<ButtonProps, HTMLButtonElement>;
 interface LinkProps extends ComponentProps<'a'>, StylingProps {
     /** Prop to pass a custom react component instead of a simple HTML anchor (useful for Nextjs or React Router Link component). */
     as?: 'a' | ElementType;
+    /** Color variant. Either from color palette or hex or rgb strings. */
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Theme. */
@@ -2592,6 +2594,7 @@ interface LinkProps extends ComponentProps<'a'>, StylingProps {
 }
 type StyledLinkProps = Omit<LinkProps, 'isDisabled'> & {
     $isDisabled: LinkProps['isDisabled'];
+    $color: LinkProps['color'];
     $theme: LinkProps['theme'];
 };
 
@@ -2600,6 +2603,7 @@ type StyledLinkProps = Omit<LinkProps, 'isDisabled'> & {
  */
 declare const StyledLink: styled_components.StyledComponent<"a", any, Omit<LinkProps, "isDisabled"> & {
     $isDisabled: boolean | undefined;
+    $color: (string & {}) | "radar" | NotificationsColorPalette | NeutralColorPalette | undefined;
     $theme: Theme | undefined;
 }, never>;
 
@@ -2708,7 +2712,7 @@ interface HeadingProps extends ComponentProps<'span'>, StylingProps {
     /** The actual component rendered in the DOM. */
     as: HeadingComponent;
     /** Color variant. Either from color palette or hex or rgb strings. */
-    color?: NotificationsColorPalette | NeutralColorPalette | (string & {});
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
     /** Font family. */
     fontFamily?: FontFamily;
     /** Font size. */
@@ -3083,7 +3087,7 @@ interface TextProps extends ComponentProps<'span'>, StylingProps {
     /** Override component. */
     as?: TextComponent;
     /** Color variant. Either from color palette or hex or rgb strings. */
-    color?: NotificationsColorPalette | NeutralColorPalette | (string & {});
+    color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
     /** Font family. */
     fontFamily?: FontFamily;
     /** Font size. */

package/index.js

@@ -5535,7 +5535,11 @@ const StyledText = styled.span`
   let {
     $color
   } = _ref;
-  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+  return $color && $color === 'radar' ? css`
+          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+          background-clip: text;
+          color: transparent;
+        ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-notifications-${$color}-primary);
         ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-neutral-${$color});
@@ -6033,7 +6037,11 @@ const StyledHeading = styled.span`
     $color,
     $theme
   } = _ref;
-  return $color && Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+  return $color && $color === 'radar' ? css`
+          background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+          background-clip: text;
+          color: transparent;
+        ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-notifications-${$color}-primary);
         ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
           color: var(--redsift-color-neutral-${$color});
@@ -17476,11 +17484,13 @@ Item.displayName = COMPONENT_NAME$b;
  * Component style.
  */
 const StyledLink = styled.a`
+  width: fit-content;
+  height: var(--redsift-typography-link-line-height);
   ${baseStyling}
 
   background: none;
   border: none;
-  color: inherit;
+  color: unset;
   cursor: text !important;
   font-family: var(--redsift-typography-link-font-family);
   font-size: var(--redsift-typography-link-font-size);
@@ -17491,19 +17501,62 @@ const StyledLink = styled.a`
 
   ${_ref => {
   let {
-    $isDisabled
+    $isDisabled,
+    $color,
+    $theme
   } = _ref;
   return !$isDisabled ? css`
-          color: var(--redsift-color-primary-n);
-          text-decoration: underline;
-          text-decoration-color: transparent;
-          text-underline-offset: 2px;
-
-          &:hover,
-          &:focus-visible {
-            cursor: pointer !important;
-            text-decoration-color: var(--redsift-color-primary-n);
-          }
+          ${$color && $color === 'radar' ? css`
+                  background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+                  background-clip: text;
+                  color: transparent;
+                ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+                  color: var(--redsift-color-notifications-${$color}-primary);
+                ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+                  color: var(--redsift-color-neutral-${$color});
+                ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+                  color: var(--redsift-color-product-${$color});
+                ` : css`
+                  color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
+                `}}
+
+          ${$color && $color === 'radar' ? css`
+                  position: relative;
+
+                  &:hover,
+                  &:focus-visible {
+                    cursor: pointer !important;
+                  }
+
+                  &:hover::before,
+                  &:focus-visible::before {
+                    content: '';
+                    position: absolute;
+                    bottom: 3px;
+                    width: 100%;
+                    left: 0;
+                    height: 1px;
+                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+                  }
+                ` : css`
+                  text-decoration: underline;
+                  text-decoration-color: transparent;
+                  text-underline-offset: 2px;
+
+                  &:hover,
+                  &:focus-visible {
+                    cursor: pointer !important;
+                    ${Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
+                          text-decoration-color: var(--redsift-color-notifications-${$color}-primary);
+                        ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
+                          text-decoration-color: var(--redsift-color-neutral-${$color});
+                        ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
+                          text-decoration-color: var(--redsift-color-product-${$color});
+                        ` : css`
+                          text-decoration-color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
+                        `}
+                  }
+                `}
         ` : '';
 }}
 
@@ -17512,7 +17565,7 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$e = ["as", "children", "className", "href", "isDisabled", "theme"];
+const _excluded$e = ["as", "children", "className", "color", "href", "isDisabled", "theme"];
 const COMPONENT_NAME$a = 'Link';
 const CLASSNAME$a = 'redsift-link';
 
@@ -17529,6 +17582,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       as,
       children,
       className,
+      color = 'primary',
       href,
       isDisabled,
       theme: propsTheme
@@ -17541,6 +17595,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     role: "link",
     tabIndex: !isDisabled ? 0 : undefined
   }, forwardedProps, {
+    $color: color,
     $isDisabled: isDisabled,
     $theme: theme,
     className: classNames(Link.className, className),