@indico-data/design-system 3.4.0 → 3.6.0

package/src/styles/_spacing-utilities.scss

@@ -0,0 +1,185 @@
+$sizes: auto, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
+$negativeSizes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
+$spacingNames: (
+  0: 'none',
+  1: 'xxs',
+  2: 'sm',
+  3: 'lg',
+  4: '2xl',
+  5: '3xl',
+  6: '4xl',
+  7: '5xl',
+  8: '6xl',
+  9: '7xl',
+  10: '8xl',
+  11: '9xl',
+  12: '10xl',
+  13: '11xl',
+  14: '12xl',
+  15: '13xl',
+  16: '14xl',
+);
+
+// Gap utilities
+@each $size in $sizes {
+  @if $size == auto {
+    // Gap doesn't support auto, so skip
+  } @else {
+    .gap-#{$size} {
+      gap: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+// Padding utilities - generate all sizes for each utility type
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .pa-#{$size} {
+      padding: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .px-#{$size} {
+      padding-left: var(--pf-spacing-#{map-get($spacingNames, $size)});
+      padding-right: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .py-#{$size} {
+      padding-top: var(--pf-spacing-#{map-get($spacingNames, $size)});
+      padding-bottom: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .pl-#{$size} {
+      padding-left: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .pr-#{$size} {
+      padding-right: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .pb-#{$size} {
+      padding-bottom: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+@each $size in $sizes {
+  @if $size == auto {
+    // Padding doesn't support auto, so skip
+  } @else {
+    .pt-#{$size} {
+      padding-top: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+// Margin utilities (positive)
+@each $size in $sizes {
+  @if $size == auto {
+    .ma-#{$size} {
+      margin: auto;
+    }
+    .mx-#{$size} {
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .my-#{$size} {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+    .ml-#{$size} {
+      margin-left: auto;
+    }
+    .mr-#{$size} {
+      margin-right: auto;
+    }
+    .mb-#{$size} {
+      margin-bottom: auto;
+    }
+    .mt-#{$size} {
+      margin-top: auto;
+    }
+  } @else {
+    .ma-#{$size} {
+      margin: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+    .mx-#{$size} {
+      margin-left: var(--pf-spacing-#{map-get($spacingNames, $size)});
+      margin-right: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+    .my-#{$size} {
+      margin-top: var(--pf-spacing-#{map-get($spacingNames, $size)});
+      margin-bottom: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+    .ml-#{$size} {
+      margin-left: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+    .mr-#{$size} {
+      margin-right: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+    .mb-#{$size} {
+      margin-bottom: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+    .mt-#{$size} {
+      margin-top: var(--pf-spacing-#{map-get($spacingNames, $size)});
+    }
+  }
+}
+
+// Margin utilities (negative)
+@each $size in $negativeSizes {
+  .ma-n#{$size} {
+    margin: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+  .mx-n#{$size} {
+    margin-left: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+    margin-right: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+  .my-n#{$size} {
+    margin-top: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+    margin-bottom: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+  .ml-n#{$size} {
+    margin-left: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+  .mr-n#{$size} {
+    margin-right: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+  .mb-n#{$size} {
+    margin-bottom: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+  .mt-n#{$size} {
+    margin-top: var(--pf-spacing-negative-#{map-get($spacingNames, $size)});
+  }
+}

package/src/styles/_typography.scss

@@ -118,19 +118,19 @@ html {
 
 // Text Colors
 .text-error {
-  color: var(--pf-error-color);
+  color: var(--pf-semantic-utility-error-default);
 }
 
 .text-warning {
-  color: var(--pf-warning-color);
+  color: var(--pf-semantic-utility-warning-default);
 }
 
 .text-success {
-  color: var(--pf-success-color);
+  color: var(--pf-semantic-utility-success-default);
 }
 
 .text-info {
-  color: var(--pf-info-color);
+  color: var(--pf-semantic-utility-info-default);
 }
 
 // Label Sizes

package/src/styles/globals.scss

@@ -5,21 +5,6 @@
   --pf-shadow-elevated: var(--pf-shadow-2);
   --pf-shadow-floating: var(--pf-shadow-3);
 
-  // Static Colors
-  --pf-white-color: #ffffff;
-  --pf-black-color: #000000;
-
-  --pf-font-color-error: var(--pf-error-color);
-  --pf-font-color-warning: var(--pf-warning-color);
-  --pf-font-color-info: var(--pf-info-color);
-  --pf-font-color-success: var(--pf-success-color);
-  --pf-font-color-neutral: var(--pf-neutral-color);
-  --pf-font-color-pending: var(--pf-pending-color);
-  --pf-font-color-brand: var(--pf-brand-color);
-
-  // TODO: this needs resolved?
-  --pf-font-color-light: var(--pf-gray-color-50);
-
   // Item Colors
   --pf-item-blue-color: var(--pf-blue-color-550);
   --pf-item-red-color: var(--pf-red-color-500);
@@ -39,34 +24,6 @@
 }
 
 :root [data-theme='light'] {
-  // Background Colors
-  --pf-page-background-color: var(--pf-gray-color-100);
-  --pf-background-color-primary: var(--pf-gray-color-150);
-  --pf-background-color-secondary: var(--pf-gray-color-50);
-  --pf-background-color-tertiary: var(--pf-gray-color-200);
-  --pf-background-color-quaternary: var(--pf-gray-color-250);
-  --pf-background-color-accent: var(--pf-secondary-color-200);
-  --pf-background-color-highlight: var(--pf-blue-color-250);
-  --pf-background-brand-solid: var(--pf-blue-color-500);
-  --pf-background-brand-hover: var(--pf-blue-color-600);
-  --pf-background-color-inverted: var(--pf-tertiary-color-900);
-
-  // Fonts
-  --pf-font-color: var(--pf-gray-color-900);
-  --pf-font-color-inverted: var(--pf-gray-color-50);
-  --pf-font-color-soft: var(--pf-gray-color-700);
-  --pf-font-color-muted: var(--pf-gray-color-800);
-  --pf-font-color-placeholder: var(--pf-gray-color-450);
-  --pf-font-color-accent: var(--pf-blue-color-500);
-  --pf-font-color-disabled: var(--pf-gray-color-400);
-
-  // Links
-  --pf-link-color: var(--pf-blue-color-500);
-  --pf-link-hover-color: var(--pf-blue-color-600);
-  --pf-secondary-link-color: var(--pf-tertiary-color-700);
-  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
-  --pf-active-link-color: var(--pf-blue-color-500);
-
   // Chart Colors
   --pf-line-chart-color-one: #2b97af;
   --pf-line-chart-color-two: #3ca7bd;
@@ -80,33 +37,6 @@
 
 :root [data-theme='dark'],
 :root {
-  --pf-page-background-color: var(--pf-primary-color-700);
-  --pf-background-color-primary: var(--pf-primary-color-900);
-  --pf-background-color-secondary: var(--pf-primary-color-800);
-  --pf-background-color-tertiary: var(--pf-primary-color-600);
-  --pf-background-color-quaternary: var(--pf-primary-color-500);
-  --pf-background-color-accent: var(--pf-blue-color-800);
-  --pf-background-color-highlight: var(--pf-blue-color-700);
-  --pf-background-brand-solid: var(--pf-secondary-color-450);
-  --pf-background-brand-hover: var(--pf-secondary-color-600);
-  --pf-background-color-inverted: var(--pf-tertiary-color-50);
-
-  // Fonts
-  --pf-font-color: var(--pf-gray-color-50);
-  --pf-font-color-inverted: var(--pf-gray-color-900);
-  --pf-font-color-soft: var(--pf-tertiary-color-300);
-  // pf-font-color-muted: todo;
-  --pf-font-color-placeholder: var(--pf-tertiary-color-500);
-  --pf-font-color-accent: var(--pf-secondary-color-400);
-  --pf-font-color-disabled: var(--pf-primary-color-500);
-
-  // Links
-  --pf-link-color: var(--pf-secondary-color-400);
-  --pf-link-hover-color: var(--pf-secondary-color-400);
-  --pf-secondary-link-color: var(--pf-tertiary-color-450);
-  --pf-secondary-link-hover-color: var(--pf-tertiary-color-400);
-  --pf-active-link-color: var(--pf-secondary-color-400);
-
   // Chart Colors
   --pf-line-chart-color-one: #256579;
   --pf-line-chart-color-two: #266f86;
@@ -124,31 +54,31 @@ html,
 body {
   padding: 0;
   margin: 0;
-  color: var(--pf-font-color);
+  color: var(--pf-semantic-font-regular);
   font-size: var(--pf-font-size-base);
-  font-family: var(--pf-font-family-base);
+  font-family: var(--pf-font-family);
   font-weight: var(--pf-font-weight-regular);
 }
 
 a,
 .link {
-  color: var(--pf-link-color);
+  color: var(--pf-semantic-font-link);
   transition: color 0.3s ease-in-out;
 
   &:hover {
-    color: var(--pf-active-link-color);
+    color: var(--pf-semantic-font-link);
   }
 }
 
 .theme {
-  background-color: var(--pf-background-color);
+  background-color: var(--pf-semantic-background-primary);
 }
 
 // Tooltip
 .react-tooltip {
   z-index: 5;
-  background-color: var(--pf-tooltip-background-color);
-  color: var(--pf-tooltip-font-color);
+  background-color: var(--pf-semantic-background-inverted);
+  color: var(--pf-semantic-font-inverted);
   opacity: 1 !important;
   text-wrap: wrap;
 }

package/src/styles/index.scss

@@ -1,14 +1,12 @@
 // Globals
 @import './assets/fonts/noto/notosans.css';
 @import 'variables/index.scss';
+@import 'primitives/index.scss';
+@import 'tokens/semantic-tokens';
 @import 'utilities';
-@import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';
 @import 'borders';
-@import 'padding';
-@import 'margin';
-@import 'gap';
 @import 'animations';
 @import './globals.scss';
 
@@ -36,9 +34,11 @@
 @import '../components/pagination/styles/Pagination.scss';
 @import '../components/tanstackTable/styles/table.scss';
 @import '../components/pill/styles/Pill.scss';
-@import '../components/tooltip/styles/Tooltip.scss';
 @import '../components/loading-indicators/BarSpinner/styles/BarSpinner.scss';
 @import '../components/loading-indicators/CirclePulse/CirclePulse.scss';
 @import '../components/truncate/styles/Truncate.scss';
 @import '../components/toast/styles/Toast.scss';
 @import '../components/stepper/styles/Stepper.scss';
+
+// Utility classes should come last to override component styles
+@import 'spacing-utilities';

package/src/styles/primitives/_borders.scss

@@ -0,0 +1,27 @@
+:root {
+  // Border Width [Not in Figma]
+  --pf-border-sm: 1px;
+  --pf-border-md: 2px;
+  --pf-border-lg: 4px;
+  --pf-border-xl: 8px;
+
+  // Border Radius
+  --pf-border-radius-0: 0;
+  --pf-border-radius-xxs: 2px;
+  --pf-border-radius-xs: 4px;
+  --pf-border-radius-sm: 6px;
+  --pf-border-radius-md: 8px;
+  --pf-border-radius-lg: 10px;
+  --pf-border-radius-xl: 12px;
+  --pf-border-radius-2xl: 16px;
+  --pf-border-radius-3xl: 24px;
+  --pf-border-radius-4xl: 32px;
+  --pf-border-radius-5xl: 40px;
+  --pf-border-radius-6xl: 48px;
+  --pf-border-radius-7xl: 56px;
+  --pf-border-radius-8xl: 64px;
+  --pf-border-radius-9xl: 72px;
+  --pf-border-radius-10xl: 80px;
+  --pf-border-radius-full: 999px;
+  --pf-border-radius-circle: 50%;
+}

package/src/styles/primitives/_breakpoints.scss

@@ -0,0 +1,9 @@
+:root {
+  /** BREAKPOINT PRIMITIVES **/
+  --pf-breakpoint-xs: 480px;
+  --pf-breakpoint-sm: 600px;
+  --pf-breakpoint-md: 768px;
+  --pf-breakpoint-lg: 1280px;
+  --pf-breakpoint-xl: 1440px;
+  --pf-breakpoint-2xl: 1920px;
+}

package/src/styles/{variables → primitives}/_colors.scss

@@ -145,36 +145,34 @@
   --pf-purple-color-900: #130e1b;
 
   --pf-white-color: #ffffff;
-  --pf-white-color-1: rgba(255, 255, 255, 0.01);
-  --pf-white-color-3: rgba(255, 255, 255, 0.03);
-  --pf-white-color-5: rgba(255, 255, 255, 0.05);
-  --pf-white-color-10: rgba(255, 255, 255, 0.1);
-  --pf-white-color-15: rgba(255, 255, 255, 0.15);
-  --pf-white-color-20: rgba(255, 255, 255, 0.2);
-  --pf-white-color-30: rgba(255, 255, 255, 0.3);
-  --pf-white-color-40: rgba(255, 255, 255, 0.4);
-  --pf-white-color-50: rgba(255, 255, 255, 0.5);
-  --pf-white-color-60: rgba(255, 255, 255, 0.6);
-  --pf-white-color-70: rgba(255, 255, 255, 0.7);
-  --pf-white-color-80: rgba(255, 255, 255, 0.8);
-  --pf-white-color-90: rgba(255, 255, 255, 0.9);
-  --pf-white-color-100: rgba(255, 255, 255, 1);
+  --pf-opacity-white-50: rgba(255, 255, 255, 0.01);
+  --pf-opacity-white-100: rgba(255, 255, 255, 0.03);
+  --pf-opacity-white-150: rgba(255, 255, 255, 0.05);
+  --pf-opacity-white-200: rgba(255, 255, 255, 0.1);
+  --pf-opacity-white-250: rgba(255, 255, 255, 0.15);
+  --pf-opacity-white-300: rgba(255, 255, 255, 0.2);
+  --pf-opacity-white-400: rgba(255, 255, 255, 0.3);
+  --pf-opacity-white-450: rgba(255, 255, 255, 0.4);
+  --pf-opacity-white-500: rgba(255, 255, 255, 0.5);
+  --pf-opacity-white-600: rgba(255, 255, 255, 0.6);
+  --pf-opacity-white-700: rgba(255, 255, 255, 0.7);
+  --pf-opacity-white-800: rgba(255, 255, 255, 0.8);
+  --pf-opacity-white-900: rgba(255, 255, 255, 0.9);
 
   --pf-black-color: #000000;
-  --pf-black-color-1: rgba(0, 0, 0, 0.01);
-  --pf-black-color-3: rgba(0, 0, 0, 0.03);
-  --pf-black-color-5: rgba(0, 0, 0, 0.05);
-  --pf-black-color-10: rgba(0, 0, 0, 0.1);
-  --pf-black-color-15: rgba(0, 0, 0, 0.15);
-  --pf-black-color-20: rgba(0, 0, 0, 0.2);
-  --pf-black-color-30: rgba(0, 0, 0, 0.3);
-  --pf-black-color-40: rgba(0, 0, 0, 0.4);
-  --pf-black-color-50: rgba(0, 0, 0, 0.5);
-  --pf-black-color-60: rgba(0, 0, 0, 0.6);
-  --pf-black-color-70: rgba(0, 0, 0, 0.7);
-  --pf-black-color-80: rgba(0, 0, 0, 0.8);
-  --pf-black-color-90: rgba(0, 0, 0, 0.9);
-  --pf-black-color-100: rgba(0, 0, 0, 1);
+  --pf-opacity-black-50: rgba(0, 0, 0, 0.01);
+  --pf-opacity-black-100: rgba(0, 0, 0, 0.03);
+  --pf-opacity-black-150: rgba(0, 0, 0, 0.05);
+  --pf-opacity-black-200: rgba(0, 0, 0, 0.1);
+  --pf-opacity-black-250: rgba(0, 0, 0, 0.15);
+  --pf-opacity-black-300: rgba(0, 0, 0, 0.2);
+  --pf-opacity-black-400: rgba(0, 0, 0, 0.3);
+  --pf-opacity-black-450: rgba(0, 0, 0, 0.4);
+  --pf-opacity-black-500: rgba(0, 0, 0, 0.5);
+  --pf-opacity-black-600: rgba(0, 0, 0, 0.6);
+  --pf-opacity-black-700: rgba(0, 0, 0, 0.7);
+  --pf-opacity-black-800: rgba(0, 0, 0, 0.8);
+  --pf-opacity-black-900: rgba(0, 0, 0, 0.9);
 
   /** COLOR FAMILIES **/
 
@@ -225,28 +223,4 @@
   --pf-tertiary-color-700: #4b5364;
   --pf-tertiary-color-800: #2c303a;
   --pf-tertiary-color-900: #111317;
-
-  /** UTILITY COLORS **/
-
-  --pf-error-color: var(--pf-red-color-450);
-  --pf-error-color-dark: var(--pf-red-color-500);
-  --pf-error-color-light: var(--pf-red-color-300);
-  --pf-success-color: var(--pf-green-color-500);
-  --pf-success-color-dark: var(--pf-green-color-600);
-  --pf-success-color-light: var(--pf-green-color-400);
-  --pf-warning-color: var(--pf-yellow-color-400);
-  --pf-warning-color-dark: var(--pf-yellow-color-550);
-  --pf-warning-color-light: var(--pf-yellow-color-300);
-  --pf-neutral-color: var(--pf-gray-color-500);
-  --pf-neutral-color-dark: var(--pf-gray-color-600);
-  --pf-neutral-color-light: var(--pf-gray-color-400);
-  --pf-info-color: var(--pf-secondary-color-450);
-  --pf-info-color-dark: var(--pf-secondary-color-550);
-  --pf-info-color-light: var(--pf-secondary-color-400);
-  --pf-brand-color: var(--pf-blue-color-450);
-  --pf-brand-color-dark: var(--pf-blue-color-550);
-  --pf-brand-color-light: var(--pf-blue-color-300);
-  --pf-pending-color: var(--pf-pink-color-500);
-  --pf-pending-color-dark: var(--pf-pink-color-600);
-  --pf-pending-color-light: var(--pf-pink-color-300);
 }

package/src/styles/primitives/_iconSizes.scss

@@ -0,0 +1,10 @@
+:root {
+  --pf-icon-size-xs: 10px;
+  --pf-icon-size-sm: 12px;
+  --pf-icon-size-md: 16px;
+  // Figma has a 20
+  --pf-icon-size-lg: 24px;
+  --pf-icon-size-xl: 32px;
+  --pf-icon-size-2xl: 48px;
+  --pf-icon-size-3xl: 64px;
+}

package/src/styles/primitives/_shadows.scss

@@ -0,0 +1,9 @@
+:root {
+  --pf-shadow-xs: rgba(0, 0, 0, 0.1);
+  --pf-shadow-sm: rgba(0, 0, 0, 0.15);
+  --pf-shadow-md: rgba(0, 0, 0, 0.2);
+  --pf-shadow-lg: rgba(0, 0, 0, 0.25);
+  --pf-shadow-xl: rgba(0, 0, 0, 0.3);
+  --pf-shadow-2xl: rgba(0, 0, 0, 0.35);
+  --pf-shadow-inner: rgba(0, 0, 0, 0.2);
+}

package/src/styles/primitives/_spacing.scss

@@ -0,0 +1,68 @@
+:root {
+  --pf-spacing-negative-27xl: -384px;
+  --pf-spacing-negative-26xl: -320px;
+  --pf-spacing-negative-25xl: -288px;
+  --pf-spacing-negative-24xl: -256px;
+  --pf-spacing-negative-23xl: -240px;
+  --pf-spacing-negative-22xl: -224px;
+  --pf-spacing-negative-21xl: -208px;
+  --pf-spacing-negative-20xl: -192px;
+  --pf-spacing-negative-19xl: -176px;
+  --pf-spacing-negative-18xl: -160px;
+  --pf-spacing-negative-17xl: -144px;
+  --pf-spacing-negative-16xl: -128px;
+  --pf-spacing-negative-15xl: -112px;
+  --pf-spacing-negative-14xl: -96px;
+  --pf-spacing-negative-13xl: -80px;
+  --pf-spacing-negative-12xl: -64px;
+  --pf-spacing-negative-11xl: -56px;
+  --pf-spacing-negative-10xl: -48px;
+  --pf-spacing-negative-9xl: -44px;
+  --pf-spacing-negative-8xl: -40px;
+  --pf-spacing-negative-7xl: -36px;
+  --pf-spacing-negative-6xl: -32px;
+  --pf-spacing-negative-5xl: -28px;
+  --pf-spacing-negative-4xl: -24px;
+  --pf-spacing-negative-3xl: -20px;
+  --pf-spacing-negative-2xl: -16px;
+  --pf-spacing-negative-xl: -14px;
+  --pf-spacing-negative-lg: -12px;
+  --pf-spacing-negative-sm: -8px;
+  --pf-spacing-negative-xs: -6px;
+  --pf-spacing-negative-xxs: -4px;
+  --pf-spacing-negative-micro: -2px;
+  --pf-spacing-none: 0;
+  --pf-spacing-micro: 2px;
+  --pf-spacing-xxs: 4px;
+  --pf-spacing-xs: 6px;
+  --pf-spacing-sm: 8px;
+  --pf-spacing-md: 10px;
+  --pf-spacing-lg: 12px;
+  --pf-spacing-xl: 14px;
+  --pf-spacing-2xl: 16px;
+  --pf-spacing-3xl: 20px;
+  --pf-spacing-4xl: 24px;
+  --pf-spacing-5xl: 28px;
+  --pf-spacing-6xl: 32px;
+  --pf-spacing-7xl: 36px;
+  --pf-spacing-8xl: 40px;
+  --pf-spacing-9xl: 44px;
+  --pf-spacing-10xl: 48px;
+  --pf-spacing-11xl: 56px;
+  --pf-spacing-12xl: 64px;
+  --pf-spacing-13xl: 80px;
+  --pf-spacing-14xl: 96px;
+  --pf-spacing-15xl: 112px;
+  --pf-spacing-16xl: 128px;
+  --pf-spacing-17xl: 144px;
+  --pf-spacing-18xl: 160px;
+  --pf-spacing-19xl: 176px;
+  --pf-spacing-20xl: 192px;
+  --pf-spacing-21xl: 208px;
+  --pf-spacing-22xl: 224px;
+  --pf-spacing-23xl: 240px;
+  --pf-spacing-24xl: 256px;
+  --pf-spacing-25xl: 288px;
+  --pf-spacing-26xl: 320px;
+  --pf-spacing-27xl: 384px;
+}

package/src/styles/primitives/_typography.scss

@@ -0,0 +1,28 @@
+:root {
+  /** Font Family **/
+  --pf-font-family: Noto Sans;
+
+  /** Font Weights **/
+  --pf-font-weight-light: 300;
+  --pf-font-weight-regular: 400;
+  --pf-font-weight-medium: 500;
+  --pf-font-weight-semibold: 600;
+  --pf-font-weight-bold: 700;
+
+  /** Font Sizes **/
+  --pf-font-size-xs: 0.625rem; /* 10px */
+  --pf-font-size-sm: 0.75rem; /* 12px */
+  --pf-font-size-base: 0.8125rem; /* 13px */
+  --pf-font-size-md: 0.875rem; /* 14px */
+  --pf-font-size-lg: 0.9375rem; /* 15px */
+  --pf-font-size-xl: 1rem; /* 16px */
+  --pf-font-size-2xl: 1.125rem; /* 18px */
+  --pf-font-size-3xl: 1.25rem; /* 20px */
+  --pf-font-size-4xl: 1.5rem; /* 24px */
+  --pf-font-size-5xl: 1.875rem; /* 30px */
+  --pf-font-size-6xl: 2.125rem; /* 34px */
+  --pf-font-size-7xl: 2.25rem; /* 36px */
+  --pf-font-size-8xl: 3rem; /* 48px */
+  --pf-font-size-9xl: 3.75rem; /* 60px */
+  --pf-font-size-10xl: 6rem; /* 96px */
+}

package/src/styles/primitives/index.scss

@@ -0,0 +1,7 @@
+@import 'colors';
+@import 'borders';
+@import 'breakpoints';
+@import 'iconSizes';
+@import 'shadows';
+@import 'spacing';
+@import 'typography';

package/src/styles/storybook.scss

@@ -1,13 +1,13 @@
 :root [data-theme='light'],
 :root [data-theme='dark'],
 :root {
-  --storybook-bg-color: var(--pf-background-color-tertiary);
-  --storybook-font-color: var(--pf-font-color);
+  --storybook-bg-color: var(--pf-semantic-background-tertiary);
+  --storybook-font-color: var(--pf-semantic-font-regular);
 }
 
 .sbdocs.sbdocs-wrapper {
-  background-color: var(--pf-page-background-color) !important;
-  color: var(--pf-font-color) !important;
+  background-color: var(--pf-semantic-background-primary) !important;
+  color: var(--pf-semantic-font-regular) !important;
 }
 .sbdocs.sbdocs-content {
   h1,
@@ -19,21 +19,21 @@
   p,
   th,
   li {
-    color: var(--pf-font-color) !important;
+    color: var(--pf-semantic-font-regular) !important;
   }
 }
 
 .sb__story {
-  background-color: var(--storybook-bg-color);
+  background-color: var(--pf-semantic-page-background);
   color: var(--storybook-font-color);
 }
 .sbdocs.sbdocs-preview {
-  border-color: var(--pf-border-color-primary);
+  border-color: var(--pf-semantic-border-primary);
 }
 
 .sb__mock-card {
-  border-radius: var(--pf-rounded-lg);
-  box-shadow: 0 0 0 1px var(--pf-border-color-primary);
+  border-radius: var(--pf-border-radius-md);
+  box-shadow: 0 0 0 1px var(--pf-semantic-border-primary);
   margin: 1rem;
   padding: 1rem;
   .sb__mock-card-title {