new design SA v2

package.json

@@ -77,6 +77,7 @@
     "jsxBracketSameLine": true,
     "arrowParens": "avoid",
     "trailingComma": "all",
+    "xmlWhitespaceSensitivity": "ignore",
     "endOfLine": "lf"
   },
   "stylelint": {
@@ -157,6 +158,7 @@
     "wolfy87-eventemitter": "5.2.9"
   },
   "devDependencies": {
+    "@prettier/plugin-xml": "1.2.0",
     "@storybook/addon-actions": "6.3.7",
     "@storybook/addon-essentials": "6.3.7",
     "@storybook/addon-links": "6.3.7",

src/components/alert/index.tsx

@@ -1,40 +1,15 @@
 import { ReactElement } from 'react';
 import classNames from 'classnames';
 
-import { ExternalLink, Link } from 'components/button';
 import { Text } from 'components/custom/typography';
 import { Icon, IconNames } from 'components/icon';
 
 import s from './s.module.scss';
 
-type RenderLinkProps = {
-  type?: 'link' | 'external';
-  href: string;
-  children: string;
-};
-
-const RenderLink: React.FC<RenderLinkProps> = ({ type = 'link', href, children }) => {
-  // TODO: switch to raw Link and 'a', style locally link color and hover
-  if (type === 'link') {
-    return (
-      <Link variation="link" to={href}>
-        {children}
-      </Link>
-    );
-  }
-
-  return (
-    <ExternalLink variation="link" href={href}>
-      {children}
-    </ExternalLink>
-  );
-};
-
 interface AlertPropsType {
   type: 'info' | 'warning' | 'error';
   className?: string;
   title?: ReactElement;
-  link?: RenderLinkProps;
 }
 
 function getIconName(type: AlertPropsType['type']): IconNames {
@@ -48,22 +23,21 @@ function getIconName(type: AlertPropsType['type']): IconNames {
   }
 }
 
-export const Alert: React.FC<AlertPropsType> = ({ type, className, children, title, link }) => {
+export const Alert: React.FC<AlertPropsType> = ({ type, className, children, title }) => {
   return (
     <div className={classNames(s.alert, s[type], className)}>
       <Icon name={getIconName(type)} size={24} className="mr-16" />
       <div>
         {title ? (
-          <Text type="p2" weight="bold" className="mb-4">
+          <Text type="body1" weight="semibold" className="mb-4">
             {title}
           </Text>
         ) : null}
         {children ? (
-          <Text type="p2" weight="semibold">
+          <Text type="body2" weight="medium">
             {children}
           </Text>
         ) : null}
-        {link ? <RenderLink {...link} /> : null}
       </div>
     </div>
   );

src/components/alert/s.module.scss

@@ -1,9 +1,8 @@
 .alert {
-  font: var(--font-p2);
-  font-weight: 600;
+  font: var(--font-body2-medium);
   padding: 16px 24px;
   display: flex;
-  border-radius: 4px;
+  border-radius: 8px;
 
   a {
     color: inherit;
@@ -12,19 +11,16 @@
 }
 
 .info {
-  background: rgba(79, 106, 229, 0.04);
-  border: 1px solid rgba(79, 106, 229, 0.32);
+  background: rgba(68, 139, 244, 0.08);
   color: var(--theme-blue-color);
 }
 
 .warning {
-  background: rgba(var(--theme-yellow-color-rgb), 0.04);
-  border: 1px solid rgba(var(--theme-yellow-color-rgb), 0.32);
+  background: rgba(255, 167, 64, 0.08);
   color: var(--theme-yellow-color);
 }
 
 .error {
-  background: rgba(var(--theme-red-color-rgb), 0.04);
-  border: 1px solid rgba(204, 167, 77, 0.32);
+  background: rgba(255, 67, 57, 0.08);
   color: var(--theme-red-color);
 }

src/components/antd/alert/s.module.scss

@@ -17,7 +17,7 @@
   }
 
   > :global(.ant-alert-content) {
-    font: var(--font-p2);
+    font: var(--font-body2);
     font-weight: 600;
   }
 

src/components/antd/button/s.module.scss

@@ -120,7 +120,7 @@
 }
 
 .component:global(.ant-btn) {
-  font: var(--font-p2);
+  font: var(--font-body2);
   font-weight: bold;
   display: flex;
   align-items: center;
@@ -132,14 +132,14 @@
   text-align: center;
 
   &:global(.ant-btn-lg) {
-    font: var(--font-p1);
+    font: var(--font-body1);
     font-weight: bold;
     height: 64px;
     padding: 20px;
   }
 
   &:global(.ant-btn-sm) {
-    font: var(--font-sm);
+    font: var(--font-caption);
     font-weight: bold;
     height: 34px;
     padding: 9px;

src/components/antd/datepicker/s.module.scss

@@ -31,7 +31,7 @@
 
   :global(.ant-picker-input) {
     input {
-      font: var(--font-p1);
+      font: var(--font-body1);
       font-weight: 600;
       color: var(--theme-primary-color);
 

src/components/antd/field-label/index.tsx

@@ -19,7 +19,7 @@ const FieldLabel: FCx<FieldLabelProps> = props => {
         <div className="flex flow-col col-gap-4 align-center">
           <Hint text={hint}>
             {typeof label === 'string' ? (
-              <Text type="small" weight="semibold" color="secondary">
+              <Text type="caption" weight="semibold" color="secondary">
                 {label}
               </Text>
             ) : (

src/components/antd/form/s.module.scss

@@ -6,7 +6,7 @@
   margin-bottom: 0;
 
   :global(.ant-form-item-label) label {
-    font: var(--font-sm);
+    font: var(--font-caption);
     font-weight: 600;
     display: inline-grid;
     grid-template-columns: repeat(2, max-content);