Feature/pxweb2 149 common text styling

libs/pxweb2-ui/src/lib/components/Button/Button.module.scss

@@ -1,18 +1,16 @@
+@use '../../text-styles.scss';
+
 .button {
+  align-items: center;
   text-align: center;
-
-  /* Label/Medium */
-  font-family: PxWeb-font-500;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.5rem; /* 150% */
   border: none;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
 
   &:disabled {
     cursor: not-allowed;
     opacity: 0.4;
-
     &:hover,
     &:focus {
       border-radius: var(--px-border-radius-full);
@@ -21,6 +19,30 @@
   }
 }
 
+.small {
+  height: 2rem;
+  padding: 0.375rem 0.75rem;
+  gap: 6px;
+  &:hover {
+    border-radius: var(--px-border-radius-small);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-small);
+  }
+}
+
+.medium {
+  height: 3rem;
+  padding: 0.75rem 1.25rem;
+  gap: 8px;
+  &:hover {
+    border-radius: var(--px-border-radius-medium);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-medium);
+  }
+}
+
 .primary {
   color: var(--px-color-text-on-action);
   border-radius: var(--px-border-radius-full);
@@ -76,39 +98,6 @@
   }
 }
 
-.small {
-  display: inline-flex;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  height: 2rem;
-  padding: 0.375rem 0.75rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-  &:hover {
-    border-radius: var(--px-border-radius-small);
-  }
-  &:active {
-    border-radius: var(--px-border-radius-small);
-  }
-}
-
-.medium {
-  /* Layout */
-  display: inline-flex;
-  padding: 0.75rem 1.25rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  &:hover {
-    border-radius: var(--px-border-radius-medium);
-  }
-  &:active {
-    border-radius: var(--px-border-radius-medium);
-  }
-}
-
 .iconOnlyMedium {
   padding: 0.75rem;
 }

libs/pxweb2-ui/src/lib/components/Button/Button.tsx

@@ -1,4 +1,5 @@
 import cl from 'clsx';
+
 import classes from './Button.module.scss';
 import { Icon, IconProps } from '../Icon/Icon';
 
@@ -25,6 +26,7 @@ export function Button({
       className={cl(
         classes.button,
         classes[size],
+        classes[`label-${size}`],
         classes[variant],
         {
           [classes.iconOnlyMedium]: !children && icon && size === 'medium',

libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss

@@ -1,79 +1,72 @@
 @use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+@use '../../text-styles.scss';
 
 .tag {
-    display: inline-flex;
-    font-family: PxWeb-font-500;
-    font-weight: 500;
-    color: var(--px-color-text-default);
-    align-items: center;
+  display: inline-flex;
+  color: var(--px-color-text-default);
+  align-items: center;
 }
 
 .medium {
-    padding: 4px 8px;
-    border-radius: var(--px-border-radius-small);
-    font-size: 16px;
-    line-height: 24px;
+  padding: 4px 8px;
+  border-radius: var(--px-border-radius-small);
 }
 
 .small {
-    padding: 1px 6px 2px 6px;
-    border-radius: var(--px-border-radius-xsmall);
-    font-size: 14px;
-    line-height: 20px;
+  padding: 1px 6px 2px 6px;
+  border-radius: var(--px-border-radius-xsmall);
 }
 
 .xsmall {
-    padding: 0px 4px;
-    border-radius:  var(--px-border-radius-xsmall);
-    font-size: 14px;
-    line-height: 20px;
+  padding: 0px 4px;
+  border-radius: var(--px-border-radius-xsmall);
 }
 
 .neutral {
-    background-color: var(--px-color-surface-moderate);
-    &.border {
-        background-color: var(--px-color-surface-subtle);
-        outline: 1px solid var(--px-color-border-moderate);
-        outline-offset: -1px;
-    }
+  background-color: var(--px-color-surface-moderate);
+  &.border {
+    background-color: var(--px-color-surface-subtle);
+    outline: 1px solid var(--px-color-border-moderate);
+    outline-offset: -1px;
+  }
 }
 
 .info {
-    background-color: var(--px-color-surface-info-moderate);
-    &.border {
-        background-color: var(--px-color-surface-info-subtle);
-        outline: 1px solid var(--px-color-border-info);
-        outline-offset: -1px;
-    }
+  background-color: var(--px-color-surface-info-moderate);
+  &.border {
+    background-color: var(--px-color-surface-info-subtle);
+    outline: 1px solid var(--px-color-border-info);
+    outline-offset: -1px;
+  }
 }
 
 .success {
-    background-color: var(--px-color-surface-success-moderate);
-    &.border {
-        background-color: var(--px-color-surface-success-subtle);
-        outline: 1px solid var(--px-color-border-success);
-        outline-offset: -1px;
-    }
+  background-color: var(--px-color-surface-success-moderate);
+  &.border {
+    background-color: var(--px-color-surface-success-subtle);
+    outline: 1px solid var(--px-color-border-success);
+    outline-offset: -1px;
+  }
 }
 
 .warning {
-    background-color: var(--px-color-surface-warning-moderate);
-    &.border {
-        background-color: var(--px-color-surface-warning-subtle);
-        outline: 1px solid var(--px-color-border-warning);
-        outline-offset: -1px;
-    }
+  background-color: var(--px-color-surface-warning-moderate);
+  &.border {
+    background-color: var(--px-color-surface-warning-subtle);
+    outline: 1px solid var(--px-color-border-warning);
+    outline-offset: -1px;
+  }
 }
 
 .error {
-    background-color: var(--px-color-surface-error-moderate);
-    &.border {
-        background-color: var(--px-color-surface-error-subtle);
-        outline: 1px solid var(--px-color-border-error);
-        outline-offset: -1px;
-    }
+  background-color: var(--px-color-surface-error-moderate);
+  &.border {
+    background-color: var(--px-color-surface-error-subtle);
+    outline: 1px solid var(--px-color-border-error);
+    outline-offset: -1px;
+  }
 }
 
 .default {
-    border: none;
+  border: none;
 }

libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx

@@ -1,9 +1,10 @@
 import cl from 'clsx';
+
 import classes from './Tag.module.scss';
 
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: 'medium' | 'small' | 'xsmall';
-  variant?: 'neutral' | 'info' | 'success'| 'warning'| 'error';
+  variant?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
   type?: 'default' | 'border';
   children?: React.ReactNode;
 }
@@ -15,15 +16,20 @@ export function Tag({
   children,
   ...rest
 }: TagProps) {
+  let textStyle = 'label-small';
+  if (size === 'medium') {
+    textStyle = 'label-medium';
+  }
   return (
-    <span 
-    className={cl(
-      classes.tag,
-      classes[size],
-      classes[variant],
-      classes[type] 
-      )}      
-      >
+    <span
+      className={cl(
+        classes.tag,
+        classes[size],
+        classes[textStyle],
+        classes[variant],
+        classes[type]
+      )}
+    >
       {children}
     </span>
   );

libs/pxweb2-ui/src/lib/components/Typography/Label/Label.module.scss

@@ -1,38 +1,27 @@
 @use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+@use '../../../text-styles.scss';
 
 .label {
-    font-family: PxWeb-font-500;
-    font-weight: 500;
-    letter-spacing: 0em;
+  letter-spacing: 0em;
 }
 
-.small {
-    font-size: 14px;
-    line-height: 20px;
+.textcolor-default {
+  color: var(--px-color-text-default);
 }
 
-.medium {
-    font-size: 16px;
-    line-height: 24px;
-}
-
-.textcolor-default{
-    color: var(--px-color-text-default);
-}
-
-.textcolor-subtle{
-    color: var(--px-color-text-subtle);
+.textcolor-subtle {
+  color: var(--px-color-text-subtle);
 }
 
 .visually-hidden {
-    border: 0 !important;
-    clip: rect(0, 0, 0, 0) !important;
-    height: 1px !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    padding: 0 !important;
-    top: 0 !important;
-    position: absolute !important;
-    white-space: nowrap !important;
-    width: 1px !important;
-  }
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  top: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}

libs/pxweb2-ui/src/lib/components/Typography/Label/Label.tsx

@@ -1,31 +1,34 @@
 import cl from 'clsx';
+
 import classes from './Label.module.scss';
 
-export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement | HTMLLegendElement>, React.HTMLAttributes<HTMLLabelElement | HTMLLegendElement> {
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement | HTMLLegendElement>,
+    React.HTMLAttributes<HTMLLabelElement | HTMLLegendElement> {
   size?: 'medium' | 'small';
   textcolor?: 'default' | 'subtle';
   visuallyHidden?: boolean;
   children?: React.ReactNode;
 }
 
 export function Label({
-  size = 'medium', 
+  size = 'medium',
   textcolor = 'default',
   visuallyHidden = false,
   children,
   ...rest
 }: LabelProps) {
   return (
-    <label 
+    <label
       className={cl(
         classes.label,
-        classes[size],
-        cl({[classes[`textcolor-${textcolor}`]]: textcolor}),
-        cl({[classes['visually-hidden']]: visuallyHidden})
-        )}
-        {...rest}
-        >
-        {children}
+        classes[`label-${size}`],
+        cl({ [classes[`textcolor-${textcolor}`]]: textcolor }),
+        cl({ [classes['visually-hidden']]: visuallyHidden })
+      )}
+      {...rest}
+    >
+      {children}
     </label>
   );
 }

libs/pxweb2-ui/src/lib/text-styles.scss

@@ -0,0 +1,16 @@
+.label-small {
+  font-family: PxWeb-font-500;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem; /* 125% */
+}
+
+.label-medium {
+  font-family: PxWeb-font-500;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem; /* 150% */
+}
+