feat: icon sizes (#238)

mParticle · May 20, 2024 · e093faa · e093faa
1 parent 45a7229
commit e093faa
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 61 deletions.
diff --git a/src/components/data-entry/QueryItem/Action.tsx b/src/components/data-entry/QueryItem/Action.tsx
@@ -1,4 +1,4 @@
-import { Icon, Button, IButtonProps } from 'src/components'
+import { Button, type IButtonProps, Icon } from 'src/components'
 import './query-item.css'
 
 export interface IActionProps {
@@ -20,8 +20,8 @@ export const Action = (props: IActionProps) => {
   }
 
   let iconColor: 'primary' | 'default' = 'primary'
-  if (props.type == 'default') iconColor = 'default'
-  if (props.type == 'disabled') iconColor = 'default'
+  if (props.type === 'default') iconColor = 'default'
+  if (props.type === 'disabled') iconColor = 'default'
 
   return (
     <>
@@ -31,4 +31,4 @@ export const Action = (props: IActionProps) => {
       </Button>
     </>
   )
-}
+}
diff --git a/src/components/data-entry/QueryItem/Cascader.tsx b/src/components/data-entry/QueryItem/Cascader.tsx
@@ -174,10 +174,6 @@ export const Cascader = (props: ICascaderProps) => {
   }
 
   function getIcon() {
-    return props.icon ? (
-      <Icon name={props.icon} size="ms" color="primary" />
-    ) : (
-      <Icon name="empty" size="ms" color="primary" />
-    )
+    return <Icon name={props.icon ?? 'empty'} size="sm" color="primary" />
   }
-}
+}
diff --git a/src/components/feedback/Skeleton/Skeleton.stories.tsx b/src/components/feedback/Skeleton/Skeleton.stories.tsx
@@ -136,7 +136,7 @@ export const ExampleConfigs: Story = {
         <Space>
           <Skeleton.Image active={active} />
           <Skeleton.Node active={active}>
-            <Icon name="mpLogo" size="xxl" color="success" />
+            <Icon name="mpLogo" size="xxxxl" color="success" />
           </Skeleton.Node>
         </Space>
         <Divider />
@@ -276,4 +276,4 @@ export const ExampleList: Story = {
       </ExampleStory>
     )
   },
-}
+}
diff --git a/src/components/general/Icon/Icon.stories.tsx b/src/components/general/Icon/Icon.stories.tsx
@@ -27,13 +27,25 @@ const meta: Meta = {
   argTypes: {
     size: {
       control: 'select',
-      options: ['xxl', 'xl', 'lg', 'md', 'ms', 'sm', 'xs', 'xxs'],
+      options: ['xxxxl', 'xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'],
     },
     color: {
       control: 'select',
-      options: ['default', 'primary', 'success', 'warning', 'error', 'info', 'white', 'black', 'text'],
+      options: [
+        'default',
+        'primary',
+        'success',
+        'warning',
+        'error',
+        'info',
+        'white',
+        'black',
+        'text',
+        'strong',
+        'brand',
+      ],
     },
   },
 }
 
-export default meta
+export default meta
diff --git a/src/components/general/Icon/Icon.tsx b/src/components/general/Icon/Icon.tsx
@@ -1,8 +1,19 @@
 import { Icons } from 'src/constants/Icons'
 import './icon.css'
 
-type IconColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'white' | 'black' | 'text'
-type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'ms' | 'sm' | 'xs' | 'xxs'
+type IconSize = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+type IconColor =
+  | 'default'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+  | 'white'
+  | 'black'
+  | 'text'
+  | 'strong'
+  | 'brand'
 
 export interface IIconProps {
   name: keyof typeof Icons
@@ -21,4 +32,4 @@ export const Icon = (props: IIconProps) => {
 Icon.defaultProps = {
   color: 'default',
   size: 'lg',
-} satisfies Partial<IIconProps>
+} satisfies Partial<IIconProps>
diff --git a/src/components/general/Icon/icon.css b/src/components/general/Icon/icon.css
@@ -1,49 +1,49 @@
+.icon-size-xxxxl {
+  width: var(--mp-icon-size-xxxxl);
+  min-width: var(--mp-icon-size-xxxxl);
+  height: var(--mp-icon-size-xxxxl);
+}
+
+.icon-size-xxxl {
+  width: var(--mp-icon-size-xxxl);
+  min-width: var(--mp-icon-size-xxxl);
+  height: var(--mp-icon-size-xxxl);
+}
+
 .icon-size-xxl {
-  width: var(--size-xxl);
-  min-width: var(--size-xxl);
-  height: var(--size-xxl);
+  width: var(--mp-icon-size-xxl);
+  min-width: var(--mp-icon-size-xxl);
+  height: var(--mp-icon-size-xxl);
 }
 
 .icon-size-xl {
-  width: var(--size-xl);
-  min-width: var(--size-xl);
-  height: var(--size-xl);
+  width: var(--mp-icon-size-xl);
+  min-width: var(--mp-icon-size-xl);
+  height: var(--mp-icon-size-xl);
 }
 
 .icon-size-lg {
-  width: var(--size-lg);
-  min-width: var(--size-lg);
-  height: var(--size-lg);
+  width: var(--mp-icon-size-lg);
+  min-width: var(--mp-icon-size-lg);
+  height: var(--mp-icon-size-lg);
 }
 
 .icon-size-md {
-  width: var(--size-md);
-  min-width: var(--size-md);
-  height: var(--size-md);
-}
-
-.icon-size-ms {
-  width: var(--size-ms);
-  min-width: var(--size-ms);
-  height: var(--size-ms);
+  width: var(--mp-icon-size-md);
+  min-width: var(--mp-icon-size-md);
+  height: var(--mp-icon-size-md);
 }
 
 .icon-size-sm {
-  width: var(--size-sm);
-  min-width: var(--size-sm);
-  height: var(--size-sm);
+  width: var(--mp-icon-size-sm);
+  min-width: var(--mp-icon-size-sm);
+  height: var(--mp-icon-size-sm);
 }
 
 .icon-size-xs {
-  width: var(--size-xs);
-  min-width: var(--size-xs);
-  height: var(--size-xs);
-}
-
-.icon-size-xxs {
-  width: var(--size-xxs);
-  min-width: var(--size-xxs);
-  height: var(--size-xxs);
+  width: var(--mp-icon-size-xs);
+  min-width: var(--mp-icon-size-xs);
+  height: var(--mp-icon-size-xs);
 }
 
 .icon-color-primary {
@@ -74,6 +74,14 @@
   color: var(--color-icon);
 }
 
+.icon-color-brand {
+  color: var(--mp-color-icon-brand);
+}
+
+.icon-color-strong {
+  color: var(--mp-color-icon-strong);
+}
+
 .icon-color-white {
   color: white;
 }

diff --git a/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx b/src/components/navigation/Breadcrumb/Breadcrumb.stories.tsx
@@ -89,7 +89,7 @@ export const ExampleIcon: Story = {
               href: '',
               title: (
                 <Center>
-                  <Icon name="mpLogo" size="ms" />
+                  <Icon name="mpLogo" size="sm" />
                   <span style={{ paddingLeft: PaddingXs }}>Application List</span>
                 </Center>
               ),
@@ -221,4 +221,4 @@ export const ExampleIndependentSeparators: Story = {
       </ExampleStory>
     )
   },
-}
+}
diff --git a/src/components/navigation/GlobalNavigation/NavigationCreate.tsx b/src/components/navigation/GlobalNavigation/NavigationCreate.tsx
@@ -59,7 +59,7 @@ export function NavigationCreate(props: INavigationCreateProps) {
             <span className="navigationCreate__itemTitle">
               {item.title}
               {item.isLoading && <Spin className="navigationCreate__itemLoading" size="small" />}
-              {isLocked && <Icon name="lock" size="sm" />}
+              {isLocked && <Icon name="lock" size="xs" />}
             </span>
 
             <span className="navigationCreate__itemDescription">{item.description}</span>

diff --git a/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx b/src/components/navigation/GlobalNavigation/WorkspaceSelector/WorkspaceSelector.tsx
@@ -196,7 +196,7 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
             label: (
               <Flex justify="space-between" align="center" gap="small">
                 {workspace.label}
-                {workspace.isActive && <Icon name="check" size="sm" color="text" />}
+                {workspace.isActive && <Icon name="check" size="xs" color="text" />}
               </Flex>
             ),
             id: workspace.id,
@@ -262,4 +262,4 @@ export function WorkspaceSelector(props: IWorkspaceSelectorProps) {
       }
     }
   }
-}
+}
diff --git a/src/components/navigation/Steps/Steps.stories.tsx b/src/components/navigation/Steps/Steps.stories.tsx
@@ -195,7 +195,7 @@ export const ExampleIcon: Story = {
             {
               title: 'Done',
               status: 'wait',
-              icon: <Icon name="check" size="ms" />,
+              icon: <Icon name="check" size="sm" />,
             },
           ]}
         />
@@ -737,4 +737,4 @@ export const ExampleInline: Story = {
       </ExampleStory>
     )
   },
-}
+}
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
@@ -47,7 +47,7 @@
   --wireframe: false;
   --motion: true;
   --color-link-hover: #ab8eff;
-  --control-outline: rgba(0.21176470816135406, 0, 0.8196078538894653, 0.1);
+  --control-outline: rgba(54, 0, 209, 0.1);
   --color-warning-outline: #fffbe6;
   --color-error-outline: #fff1f0;
   --control-item-bg-hover: #f8f6fb;
@@ -92,7 +92,7 @@
   --color-error-text-hover: #a8071a;
   --color-error-text: #820014;
   --color-error-text-active: #5c0011;
-  --color-bg-mask: #babbb5;
+  --color-bg-mask: rgba(0, 0, 0, 0.45);
   --border-radius-lg: 16px;
   --mp-brand-primary-1: #f8f6fb;
   --mp-brand-primary-2: #ebe8f8;
@@ -115,6 +115,16 @@
   --mp-brand-secondary-9: #212020;
   --mp-brand-secondary-10: #0f0e0e;
   --mp-color-border-disabled: #dcdcd8;
+  --mp-color-icon-strong: #0f0e0e;
+  --mp-color-icon-brand: #20007a;
+  --mp-icon-size-xs: 12px;
+  --mp-icon-size-sm: 16px;
+  --mp-icon-size-md: 20px;
+  --mp-icon-size-lg: 24px;
+  --mp-icon-size-xl: 28px;
+  --mp-icon-size-xxl: 32px;
+  --mp-icon-size-xxxl: 40px;
+  --mp-icon-size-xxxxl: 48px;
   --mp-query-item-border-width: 0 0 1px 0;
   --mp-query-item-border-color: #c3aeff;
   --mp-query-item-border-color-active: #3600d1;

diff --git a/src/styles/style.ts b/src/styles/style.ts
@@ -46,7 +46,7 @@ export const OpacityImage = 1
 export const Wireframe = false
 export const Motion = true
 export const ColorLinkHover = '#ab8eff'
-export const ControlOutline = 'rgba(0.21176470816135406, 0, 0.8196078538894653, 0.1)'
+export const ControlOutline = 'rgba(54, 0, 209, 0.1)'
 export const ColorWarningOutline = '#fffbe6'
 export const ColorErrorOutline = '#fff1f0'
 export const ControlItemBgHover = '#f8f6fb'
@@ -91,7 +91,7 @@ export const ColorErrorActive = '#cf1322'
 export const ColorErrorTextHover = '#a8071a'
 export const ColorErrorText = '#820014'
 export const ColorErrorTextActive = '#5c0011'
-export const ColorBgMask = '#babbb5'
+export const ColorBgMask = 'rgba(0, 0, 0, 0.45)'
 export const BorderRadiusLg = '16px'
 export const MpBrandPrimary1 = '#f8f6fb'
 export const MpBrandPrimary2 = '#ebe8f8'
@@ -103,7 +103,7 @@ export const MpBrandPrimary7 = '#5f29f8'
 export const MpBrandPrimary8 = '#3600d1'
 export const MpBrandPrimary9 = '#2c00aa'
 export const MpBrandPrimary10 = '#20007a'
-export const MpBrandSecondary1 = '#fff'
+export const MpBrandSecondary1 = '#ffffff'
 export const MpBrandSecondary2 = '#faf9f8'
 export const MpBrandSecondary3 = '#eceae9'
 export const MpBrandSecondary4 = '#dcdcd8'
@@ -114,6 +114,16 @@ export const MpBrandSecondary8 = '#2c2d2b'
 export const MpBrandSecondary9 = '#212020'
 export const MpBrandSecondary10 = '#0f0e0e'
 export const MpColorBorderDisabled = '#dcdcd8'
+export const MpColorIconStrong = '#0f0e0e'
+export const MpColorIconBrand = '#20007a'
+export const MpIconSizeXs = '12px'
+export const MpIconSizeSm = '16px'
+export const MpIconSizeMd = '20px'
+export const MpIconSizeLg = '24px'
+export const MpIconSizeXl = '28px'
+export const MpIconSizeXxl = '32px'
+export const MpIconSizeXxxl = '40px'
+export const MpIconSizeXxxxl = '48px'
 export const MpQueryItemBorderWidth = '0 0 1px 0'
 export const MpQueryItemBorderColor = '#c3aeff'
 export const MpQueryItemBorderColorActive = '#3600d1'
@@ -126,7 +136,7 @@ export const MpQueryItemBgColorDisabled = '#faf9f8'
 export const MpQueryItemBorderWidthActive = '0 0 2px 0'
 export const MpQueryItemShadowFocus = '0 0 0 2px rgba(54, 0, 209, 0.1)'
 export const MpQueryItemColorDisabled = '#505249'
-export const MpQueryItemValueSelectorFontWeight = '600'
+export const MpQueryItemValueSelectorFontWeight = '500'
 export const MpQueryItemValueSelectorColor = '#20007a'
 export const MpQueryItemPadding = '4px'
 export const MpQueryItemGap = '4px'