@indico-data/design-system 3.3.0 → 3.5.0

package/lib/stylesAndAnimations/colors/constants.d.ts

@@ -1,4 +1,34 @@
-export declare const colorList: string[];
-export declare const utilityColorList: string[];
-export declare const lightThemeColors: Record<string, any>;
-export declare const darkThemeColors: Record<string, any>;
+interface ColorPalette {
+    base: string;
+    50: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    450: string;
+    500: string;
+    550?: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+interface UtilityColors {
+    success: string;
+    info: string;
+    neutral: string;
+    warning: string;
+    error: string;
+    brand: string;
+}
+interface ThemeColors {
+    [key: string]: ColorPalette | UtilityColors;
+    utilityDark: UtilityColors;
+    utilityLight: UtilityColors;
+}
+export declare const colorList: readonly ["primary", "secondary", "tertiary", "blue", "gray", "green", "orange", "pink", "purple", "red", "teal", "yellow"];
+export declare const utilityColorList: readonly ["success", "info", "neutral", "warning", "error", "brand"];
+export declare const themeColors: ThemeColors;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/styles/_variables.scss

@@ -31,18 +31,18 @@
 // Light Theme Specific Variableso
 :root [data-theme='light'] {
   // solid colors
-  --pf-button-solid-background-color: var(--pf-brand-color-500);
+  --pf-button-solid-background-color: var(--pf-blue-color-500);
   --pf-button-solid-color: var(--pf-white-color);
-  --pf-button-solid-hover-background-color: var(--pf-brand-color-600);
-  --pf-button-solid-focus-background-color: var(--pf-brand-color-600);
+  --pf-button-solid-hover-background-color: var(--pf-blue-color-600);
+  --pf-button-solid-focus-background-color: var(--pf-blue-color-600);
   --pf-button-solid-disabled-background-color: var(--pf-gray-color-250);
   --pf-button-solid-disabled-color: var(--pf-gray-color-500);
 
   // outline colors
-  --pf-button-outline-color: var(--pf-brand-color-500);
-  --pf-button-outline-border-color: var(--pf-brand-color-500);
-  --pf-button-outline-hover-color: var(--pf-brand-color-500);
-  --pf-button-outline-hover-background-color: var(--pf-brand-color-100);
+  --pf-button-outline-color: var(--pf-blue-color-500);
+  --pf-button-outline-border-color: var(--pf-blue-color-500);
+  --pf-button-outline-hover-color: var(--pf-blue-color-500);
+  --pf-button-outline-hover-background-color: var(--pf-blue-color-100);
   --pf-button-outline-disabled-color: var(--pf-gray-color-250);
 
   // link
@@ -70,11 +70,11 @@
   --pf-button-destructive-disabled-color: var(--pf-white-color);
 
   // soft
-  --pf-button-soft-color: var(--pf-brand-color-500);
+  --pf-button-soft-color: var(--pf-blue-color-500);
   --pf-button-soft-border-color: transparent;
-  --pf-button-soft-hover-color: var(--pf-brand-color-500);
-  --pf-button-soft-hover-background-color: var(--pf-brand-color-150);
-  --pf-button-soft-focus-color: var(--pf-brand-color-500);
+  --pf-button-soft-hover-color: var(--pf-blue-color-500);
+  --pf-button-soft-hover-background-color: var(--pf-blue-color-150);
+  --pf-button-soft-focus-color: var(--pf-blue-color-500);
   --pf-button-soft-focus-border-color: transparent;
   --pf-button-soft-disabled-color: var(--pf-gray-color-500);
   --pf-button-soft-disabled-border-color: transparent;

package/src/styles/_colors.scss

@@ -1,5 +1,5 @@
 $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
-  'purple', 'pink', 'teal', 'brand';
+  'purple', 'pink', 'teal', 'blue';
 $chromatic-color-names: 'blue', 'purple', 'red', 'yellow', 'gray', 'green', 'pink', 'orange', 'teal';
 $color-grades: ();
 @for $i from 1 through 20 {

package/src/styles/globals.scss

@@ -46,9 +46,9 @@
   --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-brand-color-250);
-  --pf-background-brand-solid: var(--pf-brand-color-500);
-  --pf-background-brand-hover: var(--pf-brand-color-600);
+  --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
@@ -57,15 +57,15 @@
   --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-brand-color-500);
+  --pf-font-color-accent: var(--pf-blue-color-500);
   --pf-font-color-disabled: var(--pf-gray-color-400);
 
   // Links
-  --pf-link-color: var(--pf-brand-color-500);
-  --pf-link-hover-color: var(--pf-brand-color-600);
+  --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-brand-color-500);
+  --pf-active-link-color: var(--pf-blue-color-500);
 
   // Chart Colors
   --pf-line-chart-color-one: #2b97af;
@@ -85,8 +85,8 @@
   --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-brand-color-800);
-  --pf-background-color-highlight: var(--pf-brand-color-700);
+  --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);

package/src/styles/index.scss

@@ -1,6 +1,8 @@
 // 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';

package/src/styles/primitives/_borderRadius.scss

@@ -0,0 +1,20 @@
+:root {
+  --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

@@ -1,21 +1,20 @@
 :root {
   /** BASE COLORS **/
-
-  --pf-blue-color: #1474b8;
-  --pf-blue-color-50: #f8fafc;
-  --pf-blue-color-100: #f1f5f9;
-  --pf-blue-color-150: #e8f1f7;
-  --pf-blue-color-200: #deedf7;
-  --pf-blue-color-250: #c6dff1;
-  --pf-blue-color-300: #add1eb;
-  --pf-blue-color-400: #3ea2ea;
-  --pf-blue-color-450: #188bdc;
-  --pf-blue-color-500: #1474b8;
-  --pf-blue-color-550: #1268a5;
-  --pf-blue-color-600: #0f578a;
-  --pf-blue-color-700: #1d4058;
-  --pf-blue-color-800: #132939;
-  --pf-blue-color-900: #0e151b;
+  --pf-blue-color: #2989ff;
+  --pf-blue-color-50: #f6fafd;
+  --pf-blue-color-100: #eef4fc;
+  --pf-blue-color-150: #e5effa;
+  --pf-blue-color-200: #d8e9fd;
+  --pf-blue-color-250: #bbd8fb;
+  --pf-blue-color-300: #9ec7fa;
+  --pf-blue-color-400: #2989ff;
+  --pf-blue-color-450: #0070f5;
+  --pf-blue-color-500: #005ccc;
+  --pf-blue-color-550: #0054b8;
+  --pf-blue-color-600: #004599;
+  --pf-blue-color-700: #06356f;
+  --pf-blue-color-800: #082345;
+  --pf-blue-color-900: #061323;
 
   --pf-gray-color: #808080;
   --pf-gray-color-50: #ffffff;
@@ -65,36 +64,36 @@
   --pf-pink-color-800: #321b23;
   --pf-pink-color-900: #1b0e13;
 
-  --pf-orange-color: #994b33;
-  --pf-orange-color-50: #fcf9f7;
+  --pf-orange-color: #994733;
+  --pf-orange-color-50: #fffbfa;
   --pf-orange-color-100: #faf2f0;
-  --pf-orange-color-150: #f7ece8;
-  --pf-orange-color-200: #f7e4de;
-  --pf-orange-color-250: #f4cec2;
-  --pf-orange-color-300: #f5b6a3;
-  --pf-orange-color-400: #ea673e;
-  --pf-orange-color-450: #c45331;
-  --pf-orange-color-500: #994b33;
+  --pf-orange-color-150: #f7ebe8;
+  --pf-orange-color-200: #f7e3de;
+  --pf-orange-color-250: #f4ccc2;
+  --pf-orange-color-300: #f5b4a3;
+  --pf-orange-color-400: #ea603e;
+  --pf-orange-color-450: #c44e31;
+  --pf-orange-color-500: #994733;
   --pf-orange-color-550: #863f2a;
-  --pf-orange-color-600: #6b3c2e;
-  --pf-orange-color-700: #522e23;
-  --pf-orange-color-800: #32201b;
+  --pf-orange-color-600: #6b3a2e;
+  --pf-orange-color-700: #522d23;
+  --pf-orange-color-800: #321f1b;
   --pf-orange-color-900: #1b110e;
 
-  --pf-yellow-color: #ad791f;
+  --pf-yellow-color: #ad871f;
   --pf-yellow-color-50: #fdfbf7;
-  --pf-yellow-color-100: #fcf7ee;
-  --pf-yellow-color-150: #faf3e5;
-  --pf-yellow-color-200: #f9eedc;
-  --pf-yellow-color-250: #f4e2c2;
-  --pf-yellow-color-300: #f0d6a8;
-  --pf-yellow-color-400: #eaab3e;
-  --pf-yellow-color-450: #dc9518;
-  --pf-yellow-color-500: #ad791f;
+  --pf-yellow-color-100: #fcf8ee;
+  --pf-yellow-color-150: #faf5e5;
+  --pf-yellow-color-200: #f9f1dc;
+  --pf-yellow-color-250: #f4e7c2;
+  --pf-yellow-color-300: #f0dda8;
+  --pf-yellow-color-400: #eabc3e;
+  --pf-yellow-color-450: #dca818;
+  --pf-yellow-color-500: #ad871f;
   --pf-yellow-color-550: #976f00;
-  --pf-yellow-color-600: #825b17;
-  --pf-yellow-color-700: #58421d;
-  --pf-yellow-color-800: #32291b;
+  --pf-yellow-color-600: #826517;
+  --pf-yellow-color-700: #58481d;
+  --pf-yellow-color-800: #322c1b;
   --pf-yellow-color-900: #1b160e;
 
   --pf-green-color: #14b869;
@@ -102,7 +101,7 @@
   --pf-green-color-100: #effbf5;
   --pf-green-color-150: #e7f9f0;
   --pf-green-color-200: #def7eb;
-  --pf-green-color-250: #c2f4dc;
+  --pf-green-color-250: #c2f4db;
   --pf-green-color-300: #a8f0cd;
   --pf-green-color-400: #3eea97;
   --pf-green-color-450: #18dc7e;
@@ -120,7 +119,7 @@
   --pf-teal-color-200: #dcf9f9;
   --pf-teal-color-250: #bff8f8;
   --pf-teal-color-300: #a3f5f5;
-  --pf-teal-color-400: #3eeaea;
+  --pf-teal-color-400: #4edada;
   --pf-teal-color-450: #25d0d0;
   --pf-teal-color-500: #29a3a3;
   --pf-teal-color-550: #267373;
@@ -146,38 +145,36 @@
   --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);
-
-  /** SEMANTIC COLORS **/
+  --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 **/
 
   --pf-primary-color: #50647c;
   --pf-primary-color-50: #f9fafb;
@@ -195,21 +192,21 @@
   --pf-primary-color-800: #111b28;
   --pf-primary-color-900: #0c141d;
 
-  --pf-secondary-color: var(--pf-blue-color);
-  --pf-secondary-color-50: var(--pf-blue-color-50);
-  --pf-secondary-color-100: var(--pf-blue-color-100);
-  --pf-secondary-color-150: var(--pf-blue-color-150);
-  --pf-secondary-color-200: var(--pf-blue-color-200);
-  --pf-secondary-color-250: var(--pf-blue-color-250);
-  --pf-secondary-color-300: var(--pf-blue-color-300);
-  --pf-secondary-color-400: var(--pf-blue-color-400);
-  --pf-secondary-color-450: var(--pf-blue-color-450);
-  --pf-secondary-color-500: var(--pf-blue-color-500);
-  --pf-secondary-color-550: var(--pf-blue-color-550);
-  --pf-secondary-color-600: var(--pf-blue-color-600);
-  --pf-secondary-color-700: var(--pf-blue-color-700);
-  --pf-secondary-color-800: var(--pf-blue-color-800);
-  --pf-secondary-color-900: var(--pf-blue-color-900);
+  --pf-secondary-color: #1474b8;
+  --pf-secondary-color-50: #f8fafc;
+  --pf-secondary-color-100: #f1f5f9;
+  --pf-secondary-color-150: #e8f1f7;
+  --pf-secondary-color-200: #deedf7;
+  --pf-secondary-color-250: #c6dff1;
+  --pf-secondary-color-300: #add1eb;
+  --pf-secondary-color-400: #3ea2ea;
+  --pf-secondary-color-450: #188bdc;
+  --pf-secondary-color-500: #1474b8;
+  --pf-secondary-color-550: #1268a5;
+  --pf-secondary-color-600: #0f578a;
+  --pf-secondary-color-700: #1d4058;
+  --pf-secondary-color-800: #132939;
+  --pf-secondary-color-900: #0e151b;
 
   --pf-tertiary-color: #6a7798;
   --pf-tertiary-color-50: #f8fafb;
@@ -227,22 +224,6 @@
   --pf-tertiary-color-800: #2c303a;
   --pf-tertiary-color-900: #111317;
 
-  --pf-brand-color: #2989ff;
-  --pf-brand-color-50: #f6fafd;
-  --pf-brand-color-100: #eef4fc;
-  --pf-brand-color-150: #e5effa;
-  --pf-brand-color-200: #d8e9fd;
-  --pf-brand-color-250: #bbd8fb;
-  --pf-brand-color-300: #9ec7fa;
-  --pf-brand-color-400: #2989ff;
-  --pf-brand-color-450: #0070f5;
-  --pf-brand-color-500: #005ccc;
-  --pf-brand-color-550: #0054b8;
-  --pf-brand-color-600: #004599;
-  --pf-brand-color-700: #06356f;
-  --pf-brand-color-800: #082345;
-  --pf-brand-color-900: #061323;
-
   /** UTILITY COLORS **/
 
   --pf-error-color: var(--pf-red-color-450);
@@ -260,9 +241,9 @@
   --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-brand-color-450);
-  --pf-brand-color-dark: var(--pf-brand-color-550);
-  --pf-brand-color-light: var(--pf-brand-color-300);
+  --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 'borderRadius';
+@import 'breakpoints';
+@import 'iconSizes';
+@import 'shadows';
+@import 'spacing';
+@import 'typography';