Added guardian theme, made buttonv2 compatible with gradient colors

Author: damiengillesscality

.storybook/preview.js

@@ -18,6 +18,7 @@ export const globalTypes = {
         { value: 'darkRebrand', title: ' A-Dark', icon: 'moon' },
         { value: 'artescaLight', title: 'A-Light', icon: 'sun' },
         { value: 'ring9dark', title: 'R-Dark', icon: 'moon' },
+        { value: 'G-Dark', title: 'G-Dark', icon: 'moon' },
       ],
     },
   },

src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -51,8 +51,10 @@ export const ButtonStyled = styled.button<Props>`
     switch (props.variant) {
       case 'primary':
         return css`
-          background-color: ${brand.buttonPrimary};
-          border: ${spacing.r1} solid ${brand.buttonPrimary};
+          background: ${brand.buttonPrimary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonPrimary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -73,8 +75,10 @@ export const ButtonStyled = styled.button<Props>`
 
       case 'secondary':
         return css`
-          background-color: ${brand.buttonSecondary};
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          background: ${brand.buttonSecondary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -88,7 +92,8 @@ export const ButtonStyled = styled.button<Props>`
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textPrimary};
-            border: ${spacing.r1} solid ${brand.buttonSecondary};
+            border: ${spacing.r1} solid transparent;
+            border-color: ${brand.buttonSecondary};
           }
         `;
 
@@ -112,13 +117,18 @@ export const ButtonStyled = styled.button<Props>`
 
       case 'outline':
         return css`
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border-color: ${brand.infoPrimary};
             color: ${brand.textPrimary};
+
+            &::before {
+              background-image: ${brand.buttonPrimary};
+            }
           }
           &:focus-visible:enabled {
             ${FocusVisibleStyle}
@@ -129,6 +139,17 @@ export const ButtonStyled = styled.button<Props>`
             border: ${spacing.r1} solid ${brand.infoSecondary};
             color: ${brand.textPrimary};
           }
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            padding: ${spacing.r1};
+            background-image: ${brand.buttonSecondary};
+            border-radius: inherit;
+            mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
+            mask-composite: exclude;
+            pointer-events: none;
+          }
         `;
 
       default:

src/lib/style/theme.ts

@@ -60,6 +60,7 @@ export const coreUIAvailableThemesNames = [
   'darkRebrand',
   'artescaLight',
   'ring9dark',
+  'G-Dark'
 ] as const;
 export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
 
@@ -139,6 +140,31 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     textReverse: '#000000',
     textLink: '#71AEFF',
   },
+  'G-Dark': {
+    statusHealthy: '#0AADA6',
+    statusHealthyRGB: '10,173,166',
+    statusWarning: '#F8F32B',
+    statusWarningRGB: '248,243,43',
+    statusCritical: '#E84855',
+    statusCriticalRGB: '232,72,85',
+    selectedActive: '#037AFF',
+    highlight: '#1A3C75',
+    border: '#4A4A4A',
+    buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+    buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
+    buttonDelete: '#3D0808',
+    infoPrimary: '#8E8EAC',
+    infoSecondary: '#333366',
+    backgroundLevel1: '#121219',
+    backgroundLevel2: '#323245',
+    backgroundLevel3: '#232331',
+    backgroundLevel4: '#1B1B27',
+    textPrimary: '#EAEAEA',
+    textSecondary: '#B5B5B5',
+    textTertiary: '#DFDFDF',
+    textReverse: '#000000',
+    textLink: '#71AEFF',
+  },
 };
 
 /**

stories/color.mdx

@@ -41,3 +41,15 @@ import { coreUIAvailableThemes } from '../src/lib/style/theme';
 }
 
 </ColorPalette>
+
+## G-Dark
+
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes['G-Dark']).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
+
+}
+
+</ColorPalette>