feat(Theme): add component tokens (#710)

kronostechnologies · Jan 30, 2024 · c4d3118 · c4d3118
1 parent b2ef0df
commit c4d3118
Show file tree

Hide file tree

Showing 89 changed files with 1,570 additions and 508 deletions.
diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
@@ -11,5 +11,5 @@ module.exports = {
         'react/jsx-no-bind': 'off',
         'react/jsx-uses-react': 'off',
         'react/react-in-jsx-scope': 'off',
-    }
+    },
 };
diff --git a/packages/react/src/components/accordion/accordion-item.tsx b/packages/react/src/components/accordion/accordion-item.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { Button } from '../buttons/button';
 import { Icon } from '../icon/icon';
 import { Heading, Type, Tag } from '../heading/heading';
@@ -18,7 +18,7 @@ export interface AccordionItemProps {
     buttonRef?: React.RefObject<HTMLButtonElement> | undefined;
 }
 
-const AccordionSection = styled.section<{ theme: Theme }>`
+const AccordionSection = styled.section<{ theme: ResolvedTheme }>`
     background: ${({ theme }) => theme.greys['colored-white']};
     border-color: ${({ theme }) => theme.greys.grey};
     border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
@@ -38,7 +38,7 @@ const AccordionSection = styled.section<{ theme: Theme }>`
     }
 `;
 
-const AccordionBody = styled.div<{ theme: Theme }>`
+const AccordionBody = styled.div<{ theme: ResolvedTheme }>`
     background: ${({ theme }) => theme.greys['colored-white']};
     color: ${({ theme }) => theme.greys['neutral-90']};
     font-size: 0.75rem;
@@ -60,7 +60,7 @@ const HeadingStyled = styled(Heading)`
     position: relative;
 `;
 
-const ButtonStyled = styled(Button)<{ theme: Theme }>`
+const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     align-items: flex-start;
     border: 1px solid ${({ theme }) => theme.greys.grey};
     border-radius: var(--border-radius-2x);

diff --git a/packages/react/src/components/avatar/avatar.tsx b/packages/react/src/components/avatar/avatar.tsx
@@ -1,7 +1,7 @@
 import { useMemo, VoidFunctionComponent } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { getInitialsFromUsername } from '../../utils/user';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon } from '../icon/icon';
@@ -21,7 +21,7 @@ interface SizeStyleProps {
     isMobile: boolean;
 }
 
-function getSpecificSizeStyle({ size, isMobile }: SizeStyleProps): FlattenInterpolation<ThemeProps<Theme>> {
+function getSpecificSizeStyle({ size, isMobile }: SizeStyleProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     switch (size) {
         case 'xsmall':
             return css`

diff --git a/packages/react/src/components/bar/bar.tsx b/packages/react/src/components/bar/bar.tsx
@@ -1,10 +1,10 @@
 import { ReactText, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 
 const Container = styled.div`
     p {
-        color: ${(props: { theme: Theme }) => props.theme.greys.black};
+        color: ${(props: { theme: ResolvedTheme }) => props.theme.greys.black};
         letter-spacing: 0.02875rem;
         line-height: 1.5rem;
         margin: 0;

diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
@@ -78,12 +78,14 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -287,6 +289,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c7 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   line-height: 1.5rem;
@@ -906,12 +909,14 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -1115,6 +1120,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c7 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   line-height: 1.5rem;
@@ -1646,12 +1652,14 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -1855,6 +1863,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c7 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   line-height: 1.5rem;

diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, forwardRef, PropsWithChildren, Ref } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 
 type Size = 'small' | 'medium';
@@ -80,149 +80,46 @@ export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' |
 export interface ButtonTypeStyles {
     buttonType: ButtonType;
     inverted?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
-const getPrimaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
+const getButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>> = ({
     inverted,
+    buttonType,
     theme,
-}) => css`
-    background-color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-    border-color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-    color: ${inverted ? theme.main['primary-1.1'] : theme.greys.white};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        background-color: ${inverted ? theme.greys.white : theme.main['primary-1.3']};
-        border-color: ${inverted ? theme.greys.white : theme.main['primary-1.3']};
-        ${inverted && `color: ${theme.main['primary-1.3']}`}
-    }
-
-    &:disabled {
-        background-color: ${inverted ? theme.greys.white : theme.main['primary-1.2']};
-        border-color: ${inverted ? theme.greys.white : theme.main['primary-1.2']};
-        ${inverted && `color: ${theme.main['primary-1.2']}`}
-    }
-`;
-
-const getSecondaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: ${inverted ? 'transparent' : theme.greys.white};
-    border-color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-    color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        border-color: ${inverted ? theme.main['primary-1.2'] : theme.main['primary-1.3']};
-        color: ${inverted ? theme.main['primary-1.2'] : theme.main['primary-1.3']};
-    }
-
-    &:disabled {
-        border-color: ${inverted ? theme.main['primary-1.3'] : theme.main['primary-1.2']};
-        color: ${inverted ? theme.main['primary-1.3'] : theme.main['primary-1.2']};
-    }
-
-    ${inverted && `&:focus {
-        background-color: ${theme.main['primary-2']};
-        border-color: ${theme.main['primary-1.1']}
-        color: ${theme.greys.white};
-    }`}
-`;
-
-const getTertiaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: transparent;
-    border-color: transparent;
-    color: ${inverted ? theme.greys.white : theme.greys['dark-grey']};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        background-color: ${inverted ? theme.main['primary-1.3'] : theme.greys.grey};
-        color: ${inverted ? theme.greys.white : theme.greys['neutral-90']};
-    }
-
-    &:disabled {
-        background-color: transparent;
-        color: ${inverted ? theme.main['primary-1.3'] : theme.greys['mid-grey']};
-    }
-`;
-
-const getDestructiveButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-    border-color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-    color: ${inverted ? theme.notifications['alert-2.1'] : theme.greys.white};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        /* TODO change colors when updating thematization */
-        background-color: ${inverted ? theme.greys.white : '#7B1A15'};
-        border-color: ${inverted ? theme.greys.white : '#7B1A15'};
-        color: ${inverted ? '#7B1A15' : theme.greys.white};
-    }
-
-    &:disabled {
-        &,
-        &:focus,
-        &:hover {
-            /* TODO change colors when updating thematization */
-            background-color: ${inverted ? theme.greys.white : '#F99D99'};
-            border-color: ${inverted ? theme.greys.white : '#F99D99'};
-            color: ${inverted ? '#F99D99' : theme.greys.white};
+}) => {
+    const inversionSuffix = inverted ? '-inverted' : '';
+
+    return css`
+        background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-background-color`]};
+        border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-border-color`]};
+        color: ${theme.component[`button-${buttonType}${inversionSuffix}-text-color`]};
+
+        &:hover,
+        &[aria-expanded='true'] {
+            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-background-color`]};
+            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-border-color`]};
+            color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-text-color`]};
         }
-    }
-`;
 
-const getDestructiveSecondaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: ${inverted ? 'transparent' : theme.greys.white};
-    border-color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-    color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        /* TODO change colors when updating thematization */
-        background-color: ${inverted ? '#7B1A15' : theme.greys.white};
-        border-color: ${inverted ? theme.greys.white : '#7B1A15'};
-        color: ${inverted ? theme.greys.white : '#7B1A15'};
-    }
-
-    &:disabled {
-        color: ${inverted ? theme.greys.white : '#F99D99'};
-
-        &,
-        &:focus,
-        &:hover {
-            /* TODO change colors when updating thematization */
-            background-color: ${inverted ? '#F99D99' : theme.greys.white};
-            border-color: ${inverted ? theme.greys.white : '#F99D99'};
-            color: ${inverted ? theme.greys.white : '#F99D99'};
+        &:disabled {
+            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
+            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
+            color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
+            ${buttonType === 'destructive' ? css`
+                &,
+                &:focus,
+                &:hover {
+                    background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
+                    border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
+                    color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
+                }
+` : ''}
         }
-    }
 `;
+};
 
-export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = (props) => css`
+export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>> = (props) => css`
     ${focus(props, true)};
-    ${() => {
-        switch (props.buttonType) {
-            case 'primary':
-                return getPrimaryButtonStyles(props);
-            case 'secondary':
-                return getSecondaryButtonStyles(props);
-            case 'tertiary':
-                return getTertiaryButtonStyles(props);
-            case 'destructive':
-                return getDestructiveButtonStyles(props);
-            case 'destructive-secondary':
-                return getDestructiveSecondaryButtonStyles(props);
-        }
-    }}
+    ${getButtonStyles(props)};
 `;
diff --git a/packages/react/src/components/buttons/button.test.tsx b/packages/react/src/components/buttons/button.test.tsx
@@ -28,7 +28,7 @@ describe('Button', () => {
         expect(callback).toHaveBeenCalledTimes(0);
     });
 
-    test('has disabled styles', () => {
+    test('has primary disabled styles', () => {
         const tree = renderWithProviders(
             <Button onClick={doNothing} buttonType="primary" disabled label="Primary Button" />,
         );