remove defaultTheme from components

scality · Dec 12, 2023 · 21fe8b5 · 21fe8b5
1 parent ca9e103
commit 21fe8b5
Show file tree

Hide file tree

Showing 34 changed files with 421 additions and 304 deletions.
diff --git a/src/lib/components/banner/Banner.component.tsx b/src/lib/components/banner/Banner.component.tsx
@@ -1,6 +1,7 @@
-import styled from 'styled-components';
-import * as defaultTheme from '../../style/theme';
-import { getThemePropSelector, getThemeVariantSelector } from '../../utils';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { getThemeVariantSelector } from '../../utils';
 import { Variant } from '../constants';
 
 export type Props = {
@@ -11,35 +12,36 @@ export type Props = {
 };
 
 const BannerContainer = styled.div<{ variant: Variant }>`
-  display: flex;
-  padding: ${defaultTheme.padding.small};
-  font-size: ${defaultTheme.fontSize.small};
-  color: ${getThemePropSelector('textPrimary')};
-  align-items: center;
-
-  border: 1px solid;
-  border-left: 5px solid;
-  border-radius: 3px;
-  border-color: ${getThemeVariantSelector()};
-  background-color: ${getThemePropSelector('backgroundLevel1')};
-  i {
+  ${(props) => css`
+    color: ${props.theme.textPrimary};
+    background-color: ${props.theme.backgroundLevel1};
     display: flex;
+    padding: ${spacing.r8};
     align-items: center;
-    margin-left: ${defaultTheme.padding.small};
-    color: ${getThemeVariantSelector()};
-  }
+    font-size: ${fontSize.small};
+    border: 1px solid;
+    border-left: 5px solid;
+    border-radius: 3px;
+    border-color: ${getThemeVariantSelector()};
+    i {
+      display: flex;
+      align-items: center;
+      margin-left: ${spacing.r8};
+      color: ${getThemeVariantSelector()};
+    }
+  `}
 `;
 
 const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
 const Text = styled.span`
-  margin-left: ${defaultTheme.padding.base};
+  margin-left: ${spacing.r16};
 `;
 const Title = styled.div`
-  margin-left: ${defaultTheme.padding.base};
-  font-weight: ${defaultTheme.fontWeight.bold};
+  margin-left: ${spacing.r16};
+  font-weight: ${fontWeight.bold};
 `;
 
 function Banner({ icon, title, children, variant, ...rest }: Props) {

diff --git a/src/lib/components/breadcrumb/Breadcrumb.component.tsx b/src/lib/components/breadcrumb/Breadcrumb.component.tsx
@@ -1,6 +1,7 @@
-import styled, { css } from 'styled-components';
 import { ellipsis } from 'polished';
-import * as defaultTheme from '../../style/theme';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize } from '../../style/theme';
 import { Icon } from '../icon/Icon.component';
 type Props = {
   paths: Array<JSX.Element>;
@@ -15,7 +16,7 @@ const BreadcrumbContainer = styled.ol`
 const BreadcrumbItem = styled.li<{ active: boolean }>`
   box-sizing: border-box;
   height: 100%;
-  font-size: ${defaultTheme.fontSize.larger};
+  font-size: ${fontSize.larger};
   ${ellipsis('250px')}
   min-width: 3rem;
 
@@ -50,11 +51,13 @@ const BreadcrumbItem = styled.li<{ active: boolean }>`
   }}
 `;
 const BreadcrumbSeparator = styled.li`
-  padding: ${defaultTheme.padding.smaller} ${defaultTheme.padding.small};
-  color: ${defaultTheme.brand.textTertiary};
-  display: flex;
-  align-items: center;
-  font-size: ${defaultTheme.fontSize.small};
+  ${(props) => css`
+    color: ${props.theme.textTertiary};
+    padding: ${spacing.r4} ${spacing.r8};
+    display: flex;
+    align-items: center;
+    font-size: ${fontSize.small};
+  `}
 `;
 
 const withBreadcrumbSeparator = (lastIndex) => (acc, item, index) => {

diff --git a/src/lib/components/button/Button.component.tsx b/src/lib/components/button/Button.component.tsx
@@ -1,10 +1,11 @@
 // @ts-nocheck
 // Legacy Button should not be use anymore
-import styled, { css } from 'styled-components';
 import { lighten } from 'polished';
-import * as defaultTheme from '../../style/theme';
-import { Loader } from '../loader/Loader.component';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight, white } from '../../style/theme';
 import { Size } from '../constants';
+import { Loader } from '../loader/Loader.component';
 type Props = {
   text?: string;
   size?: Size;
@@ -40,7 +41,7 @@ export const ButtonStyled = styled.button`
   text-decoration: none;
   border: none;
   text-decoration: none;
-  font-weight: ${defaultTheme.fontWeight.base};
+  font-weight: ${fontWeight.base};
 
   &:hover,
   &:focus,
@@ -54,31 +55,31 @@ export const ButtonStyled = styled.button`
       case 'smaller':
         return css`
           padding: 7px 14px;
-          font-size: ${defaultTheme.fontSize.smaller};
+          font-size: ${fontSize.smaller};
           border-radius: 4px;
           height: 27px;
         `;
 
       case 'small':
         return css`
           padding: 8px 16px;
-          font-size: ${defaultTheme.fontSize.small};
+          font-size: ${fontSize.small};
           border-radius: 5px;
           height: 30px;
         `;
 
       case 'large':
         return css`
           padding: 10px 20px;
-          font-size: ${defaultTheme.fontSize.large};
+          font-size: ${fontSize.large};
           border-radius: 7px;
           height: 40px;
         `;
 
       case 'larger':
         return css`
           padding: 11px 22px;
-          font-size: ${defaultTheme.fontSize.larger};
+          font-size: ${fontSize.larger};
           border-radius: 8px;
           height: 48px;
         `;
@@ -87,7 +88,7 @@ export const ButtonStyled = styled.button`
       default:
         return css`
           padding: 12px 16px;
-          font-size: ${defaultTheme.fontSize.base};
+          font-size: ${fontSize.base};
           border-radius: 6px;
           height: 32px;
         `;
@@ -100,7 +101,7 @@ export const ButtonStyled = styled.button`
         > span {
           display: flex;
           .sc-loader {
-            margin: 0px ${defaultTheme.padding.smaller};
+            margin: 0px ${spacing.r4};
             svg {
               fill: ${props.theme.textPrimary} !important;
             }
@@ -186,7 +187,7 @@ ${(props) => {
           pointer-events: none;
           opacity: 0.3;
           border-color: ${brandLighter};
-          color: ${defaultTheme.white};
+          color: ${white};
         `
         : null}
     `;

diff --git a/src/lib/components/buttonv2/Buttonv2.component.tsx b/src/lib/components/buttonv2/Buttonv2.component.tsx
@@ -1,11 +1,8 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
-import { Tooltip } from '../tooltip/Tooltip.component';
-import { Props as TooltipProps } from '../tooltip/Tooltip.component';
-
-import * as defaultTheme from '../../style/theme';
-import { spacing } from '../../style/theme';
-import { spacing as newSpacing } from '../../spacing';
+import { Tooltip, Props as TooltipProps } from '../tooltip/Tooltip.component';
+import { fontSize, fontWeight } from '../../style/theme';
+import { spacing } from '../../spacing';
 export type Props = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'size' | 'label'
@@ -32,13 +29,12 @@ export const ButtonStyled = styled.button<Props>`
   border: none;
   text-decoration: none;
   font-family: 'Lato';
-  font-weight: ${defaultTheme.fontWeight.base};
+  font-weight: ${fontWeight.base};
 
-  padding: ${spacing.sp4} ${spacing.sp8};
-  font-size: ${defaultTheme.fontSize.base};
-  border-radius: ${spacing.sp4};
-  height: ${(props) =>
-    props.size === 'inline' ? newSpacing.r24 : newSpacing.r32};
+  padding: ${spacing.r4} ${spacing.r8};
+  font-size: ${fontSize.base};
+  border-radius: ${spacing.r4};
+  height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
 
   ${(props) => {
     const brand = props.theme;
@@ -47,70 +43,70 @@ export const ButtonStyled = styled.button<Props>`
       case 'primary':
         return css`
           background-color: ${brand.buttonPrimary};
-          border: ${spacing.sp1} solid ${brand.buttonPrimary};
+          border: ${spacing.r1} solid ${brand.buttonPrimary};
           color: ${brand.textSecondary};
           &:hover:enabled {
             cursor: pointer;
-            border: ${spacing.sp1} solid ${brand.infoPrimary};
+            border: ${spacing.r1} solid ${brand.infoPrimary};
             color: ${brand.textPrimary};
           }
           // :focus-visible is the keyboard-only version of :focus
           &:focus-visible:enabled {
-            outline: dashed ${spacing.sp2} ${brand.selectedActive};
-            outline-offset: ${spacing.sp2};
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
             color: ${brand.textPrimary};
           }
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textTertiary};
-            border: ${spacing.sp1} solid ${brand.infoSecondary};
+            border: ${spacing.r1} solid ${brand.infoSecondary};
           }
         `;
 
       case 'secondary':
         return css`
           background-color: ${brand.buttonSecondary};
-          border: ${spacing.sp1} solid ${brand.buttonSecondary};
+          border: ${spacing.r1} solid ${brand.buttonSecondary};
           color: ${brand.textSecondary};
           &:hover:enabled {
             cursor: pointer;
-            border: ${spacing.sp1} solid ${brand.infoPrimary};
+            border: ${spacing.r1} solid ${brand.infoPrimary};
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.sp2} ${brand.selectedActive};
-            outline-offset: ${spacing.sp2};
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
             color: ${brand.textPrimary};
           }
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textTertiary};
-            border: ${spacing.sp1} solid ${brand.buttonSecondary};
+            border: ${spacing.r1} solid ${brand.buttonSecondary};
           }
         `;
 
       case 'danger':
         return css`
           background-color: ${brand.buttonDelete};
-          border: ${spacing.sp1} solid ${brand.buttonDelete};
+          border: ${spacing.r1} solid ${brand.buttonDelete};
           color: ${brand.statusCritical};
           &:hover:enabled {
             cursor: pointer;
-            border: ${spacing.sp1} solid ${brand.infoPrimary};
+            border: ${spacing.r1} solid ${brand.infoPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.sp2} ${brand.selectedActive};
-            outline-offset: ${spacing.sp2};
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
           }
           &:active:enabled {
             cursor: pointer;
-            border: ${spacing.sp1} solid ${brand.infoSecondary};
+            border: ${spacing.r1} solid ${brand.infoSecondary};
           }
         `;
 
       case 'outline':
         return css`
-          border: ${spacing.sp1} solid ${brand.buttonSecondary};
+          border: ${spacing.r1} solid ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textTertiary};
           &:hover:enabled {
@@ -119,13 +115,13 @@ export const ButtonStyled = styled.button<Props>`
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.sp2} ${brand.selectedActive};
-            outline-offset: ${spacing.sp2};
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
             border-color: ${brand.buttonSecondary};
           }
           &:active:enabled {
             cursor: pointer;
-            border: ${spacing.sp1} solid ${brand.infoSecondary};
+            border: ${spacing.r1} solid ${brand.infoSecondary};
             color: ${brand.textTertiary};
           }
         `;
@@ -162,7 +158,7 @@ export const ButtonStyled = styled.button<Props>`
           color: ${brand.textPrimary};
         }
         &:focus-visible:enabled {
-          outline: dashed ${spacing.sp2} ${brand.selectedActive};
+          outline: dashed ${spacing.r2} ${brand.selectedActive};
         }
         &:active {
           cursor: pointer;
@@ -182,7 +178,7 @@ export const ButtonIcon = styled.span<{ label: React.ReactNode }>`
   ${(props) =>
     props.label &&
     css`
-      padding-right: ${spacing.sp8};
+      padding-right: ${spacing.r8};
       display: inline-flex;
       justify-content: center;
       align-items: center;

diff --git a/src/lib/components/chips/Chips.component.tsx b/src/lib/components/chips/Chips.component.tsx
@@ -1,9 +1,8 @@
-// @ts-check
-import * as defaultTheme from '../../style/theme';
-import { Size } from '../constants';
+import { lighten } from 'polished';
 import styled, { css } from 'styled-components';
+import { fontSize, grayLight, white } from '../../style/theme';
 import { Button } from '../button/Button.component';
-import { lighten } from 'polished';
+import { Size } from '../constants';
 
 import { Icon } from '../icon/Icon.component';
 type Props = {
@@ -27,9 +26,9 @@ const ChipsContainer = styled.div<{
   display: inline-flex;
   .sc-chips-remove {
     padding-right: 10px;
-    color: ${defaultTheme.white};
+    color: ${white};
     &:hover {
-      color: ${defaultTheme.grayLight};
+      color: ${grayLight};
     }
   }
   ${(props) => {
@@ -93,7 +92,7 @@ const ChipsContainer = styled.div<{
     return props.onClick
       ? css`
           background-color: ${brand[props.variant]};
-          font-size: ${defaultTheme.fontSize[props.size || 'base']};
+          font-size: ${fontSize[props.size || 'base']};
           &:hover {
             cursor: pointer;
             background-color: ${brandLight};
@@ -104,7 +103,7 @@ const ChipsContainer = styled.div<{
         `
       : css`
           background-color: ${brand[props.variant]};
-          font-size: ${defaultTheme.fontSize[props.size || 'base']};
+          font-size: ${fontSize[props.size || 'base']};
         `;
   }}
 `;