@indico-data/design-system 3.4.0 → 3.6.0

package/src/styles/tokens/_semantic-tokens.scss

@@ -0,0 +1,172 @@
+// ============================================================================
+// SEMANTIC TOKENS - Following Figma's Exact Token Structure
+// ============================================================================
+// These tokens map semantic meaning to our base palette colors and align with Figma
+// All tokens use --pf-semantic prefix. Eventually the word 'semantic' should be removed.
+// In the meantime, it is helpful to distinguish existing tokens with figma aligned ones
+
+// Light Theme
+:root [data-theme='light'] {
+  // Utility Colors
+  --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
+  --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
+  --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
+  --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
+  --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
+  --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
+  --pf-semantic-utility-error-default: var(--pf-red-color-450);
+  --pf-semantic-utility-error-light: var(--pf-red-color-300);
+  --pf-semantic-utility-error-dark: var(--pf-red-color-600);
+  --pf-semantic-utility-success-default: var(--pf-green-color-500);
+  --pf-semantic-utility-success-light: var(--pf-green-color-400);
+  --pf-semantic-utility-success-dark: var(--pf-green-color-600);
+  --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
+  --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
+  --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
+  --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
+  --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
+  --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
+  --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
+  --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
+  --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
+  --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
+  --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
+  --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
+  --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
+  --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
+  --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
+  --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
+  --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
+  --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
+
+  // Background
+  --pf-semantic-page-background: var(--pf-gray-color-100);
+  --pf-semantic-background-primary: var(--pf-gray-color-150);
+  --pf-semantic-background-secondary: var(--pf-gray-color-50);
+  --pf-semantic-background-tertiary: var(--pf-gray-color-200);
+  --pf-semantic-background-quaternary: var(--pf-gray-color-250);
+  --pf-semantic-background-accent: var(--pf-secondary-color-200);
+  --pf-semantic-background-highlight: var(--pf-blue-color-250);
+  --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
+  --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
+
+  // Border
+  --pf-semantic-border-primary: var(--pf-gray-color-300);
+  --pf-semantic-border-secondary: var(--pf-gray-color-250);
+  --pf-semantic-border-hover: var(--pf-gray-color-400);
+  --pf-semantic-border-soft: var(--pf-secondary-color-450);
+  --pf-semantic-border-accent: var(--pf-blue-color-450);
+  --pf-semantic-border-error: var(--pf-red-color-450);
+  --pf-semantic-border-warning: var(--pf-yellow-color-400);
+  --pf-semantic-border-pending: var(--pf-orange-color-400);
+  --pf-semantic-border-success: var(--pf-green-color-500);
+  --pf-semantic-border-info: var(--pf-secondary-color-450);
+  --pf-semantic-border-neutral: var(--pf-gray-color-500);
+
+  // Brand Logo
+  --pf-semantic-logo-primary: var(--pf-blue-color-450);
+  --pf-semantic-logo-secondary: var(--pf-primary-color-800);
+
+  // Font & Icon
+  --pf-semantic-font-regular: var(--pf-primary-color-800);
+  --pf-semantic-font-inverted: var(--pf-gray-color-50);
+  --pf-semantic-font-soft: var(--pf-gray-color-700);
+  --pf-semantic-font-mute: var(--pf-gray-color-800);
+  --pf-semantic-font-link: var(--pf-blue-color-500);
+  --pf-semantic-font-placeholder: var(--pf-gray-color-450);
+  --pf-semantic-font-disabled: var(--pf-gray-color-400);
+  --pf-semantic-font-accent: var(--pf-blue-color-500);
+  --pf-semantic-font-error: var(--pf-red-color-450);
+  --pf-semantic-font-success: var(--pf-green-color-600);
+
+  // Elevation
+  --pf-semantic-elevation-1: var(--pf-opacity-black-100);
+  --pf-semantic-elevation-2: var(--pf-opacity-black-150);
+  --pf-semantic-elevation-3: var(--pf-opacity-black-200);
+  --pf-semantic-elevation-4: var(--pf-opacity-black-250);
+  --pf-semantic-elevation-5: var(--pf-opacity-black-300);
+}
+
+// Dark Theme
+:root [data-theme='dark'] {
+  // Utility Colors
+  --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
+  --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
+  --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
+  --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
+  --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
+  --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
+  --pf-semantic-utility-error-default: var(--pf-red-color-450);
+  --pf-semantic-utility-error-light: var(--pf-red-color-300);
+  --pf-semantic-utility-error-dark: var(--pf-red-color-500);
+  --pf-semantic-utility-success-default: var(--pf-green-color-500);
+  --pf-semantic-utility-success-light: var(--pf-green-color-400);
+  --pf-semantic-utility-success-dark: var(--pf-green-color-600);
+  --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
+  --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
+  --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
+  --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
+  --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
+  --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
+  --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
+  --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
+  --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
+  --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
+  --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
+  --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
+  --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
+  --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
+  --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
+  --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
+  --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
+  --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
+
+  // Background
+  --pf-semantic-page-background: var(--pf-primary-color-700);
+  --pf-semantic-background-primary: var(--pf-primary-color-900);
+  --pf-semantic-background-secondary: var(--pf-primary-color-800);
+  --pf-semantic-background-tertiary: var(--pf-primary-color-600);
+  --pf-semantic-background-quaternary: var(--pf-primary-color-500);
+  --pf-semantic-background-accent: var(--pf-blue-color-800);
+  --pf-semantic-background-highlight: var(--pf-blue-color-700);
+  --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
+  --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
+
+  // Border
+  --pf-semantic-border-primary: var(--pf-tertiary-color-700);
+  --pf-semantic-border-secondary: var(--pf-primary-color-600);
+  --pf-semantic-border-hover: var(--pf-tertiary-color-600);
+  --pf-semantic-border-soft: var(--pf-secondary-color-600);
+  --pf-semantic-border-accent: var(--pf-secondary-color-400);
+  --pf-semantic-border-error: var(--pf-red-color-450);
+  --pf-semantic-border-warning: var(--pf-yellow-color-400);
+  --pf-semantic-border-pending: var(--pf-orange-color-400);
+  --pf-semantic-border-success: var(--pf-green-color-500);
+  --pf-semantic-border-info: var(--pf-secondary-color-450);
+  --pf-semantic-border-neutral: var(--pf-gray-color-500);
+
+  // Brand Logo
+  --pf-semantic-logo-primary: var(--pf-blue-color-450);
+  --pf-semantic-logo-secondary: var(--pf-gray-color-50);
+
+  // Font & Icon
+  --pf-semantic-font-regular: var(--pf-gray-color-50);
+  --pf-semantic-font-inverted: var(--pf-gray-color-900);
+  --pf-semantic-font-soft: var(--pf-tertiary-color-300);
+  --pf-semantic-font-mute: var(--pf-tertiary-color-400);
+  --pf-semantic-font-link: var(--pf-secondary-color-400);
+  --pf-semantic-font-placeholder: var(--pf-tertiary-color-450);
+  --pf-semantic-font-disabled: var(--pf-tertiary-color-700);
+  --pf-semantic-font-accent: var(--pf-secondary-color-400);
+  --pf-semantic-font-error: var(--pf-red-color-300);
+  --pf-semantic-font-success: var(--pf-green-color-400);
+
+  // Elevation
+  --pf-semantic-elevation-1: var(--pf-opacity-black-200);
+  --pf-semantic-elevation-2: var(--pf-opacity-black-250);
+  --pf-semantic-elevation-3: var(--pf-opacity-black-300);
+  --pf-semantic-elevation-4: var(--pf-opacity-black-400);
+  --pf-semantic-elevation-5: var(--pf-opacity-black-450);
+}

package/src/styles/variables/index.scss

@@ -1,9 +1,2 @@
 @import 'typography';
-@import 'colors';
-@import 'icons';
-@import 'borders';
-@import 'padding';
-@import 'margin';
-@import 'gap';
-@import 'size';
 @import 'dropshadows';

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -19,10 +19,6 @@ export const BorderColor = () => {
           <div className="sb__square bg-gray-800 border border-lg border-secondary"></div>
           <p className="text-align--center">border-secondary</p>
         </div>
-        <div>
-          <div className="sb__square bg-gray-800 border border-lg border-soft-accent"></div>
-          <p className="text-align--center">border-soft-accent</p>
-        </div>
         <div>
           <div className="sb__square bg-gray-800 border border-lg border-error"></div>
           <p className="text-align--center">border-error</p>

package/src/stylesAndAnimations/sizing/Sizing.mdx

@@ -1,7 +1,10 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as Sizing from './Sizing.stories';
 
-<Meta title="Utility Classes/Sizing" /># Sizing The Sizing utility classes follow this pattern of
+<Meta title="Utility Classes/Sizing" />
+
+# Sizing The Sizing utility classes follow this pattern of
+
 usage.
 
 Instructuions: `{property}{direction}-{size}` The property applies the type of spacing:

package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts

@@ -28,7 +28,6 @@ export const utilityClassesData: UtilityClassData[] = [
   { className: 'border-yellow', css: 'border-color: var(--pf-yellow-color);', category: 'Border' },
   { className: 'border-green', css: 'border-color: var(--pf-green-color);', category: 'Border' },
   { className: 'border-purple', css: 'border-color: var(--pf-purple-color);', category: 'Border' },
-  { className: 'border-thin', css: 'border-width: var(--pf-border-thin);', category: 'Border' },
   { className: 'border-sm', css: 'border-width: var(--pf-border-sm);', category: 'Border' },
   { className: 'border-md', css: 'border-width: var(--pf-border-md);', category: 'Border' },
   { className: 'border-lg', css: 'border-width: var(--pf-border-lg);', category: 'Border' },
@@ -241,6 +240,8 @@ export const utilityClassesData: UtilityClassData[] = [
   { className: 'icon-md', css: 'font-size: var(--pf-icon-size-md);', category: 'Icon' },
   { className: 'icon-lg', css: 'font-size: var(--pf-icon-size-lg);', category: 'Icon' },
   { className: 'icon-xl', css: 'font-size: var(--pf-icon-size-xl);', category: 'Icon' },
+  { className: 'icon-2xl', css: 'font-size: var(--pf-icon-size-2xl);', category: 'Icon' },
+  { className: 'icon-3xl', css: 'font-size: var(--pf-icon-size-3xl);', category: 'Icon' },
 
   // Drop Shadows
   { className: 'shadow-surface', css: 'box-shadow: var(--pf-shadow-surface);', category: 'Effect' },

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

@@ -1 +0,0 @@
-export declare const Colors: () => import("react/jsx-runtime").JSX.Element;

package/lib/stylesAndAnimations/colors/Colors.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Colors } from './Colors';
-declare const meta: Meta<typeof Colors>;
-export default meta;
-type Story = StoryObj<typeof Colors>;
-export declare const Default: Story;

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

@@ -1,34 +0,0 @@
-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/lib/stylesAndAnimations/colors/index.d.ts

@@ -1 +0,0 @@
-export { Colors } from './Colors';

package/src/components/tooltip/styles/Tooltip.scss

@@ -1,12 +0,0 @@
-:root [data-theme='light'] {
-  --pf-tooltip-background-color: var(--pf-background-color-inverted);
-  --pf-tooltip-font-color: var(--pf-font-color-inverted);
-  --pf-tooltip-supporting-font-color: var(--pf-font-color-disabled);
-}
-
-:root [data-theme='dark'],
-:root {
-  --pf-tooltip-background-color: var(--pf-background-color-inverted);
-  --pf-tooltip-font-color: var(--pf-font-color-inverted);
-  --pf-tooltip-supporting-font-color: var(--pf-font-color-disabled);
-}

package/src/styles/_gap.scss

@@ -1,18 +0,0 @@
-$sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
-$classes: (
-  'gap': 'gap',
-);
-
-@each $class, $property in $classes {
-  @each $size in $sizes {
-    .#{$class}-#{$size} {
-      @if type-of($property) == list {
-        @each $prop in $property {
-          #{$prop}: var(--pf-gap-#{$size});
-        }
-      } @else {
-        #{$property}: var(--pf-gap-#{$size});
-      }
-    }
-  }
-}

package/src/styles/_margin.scss

@@ -1,41 +0,0 @@
-$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;
-$classes: (
-  "ma": "margin",
-  "mx": ("margin-left", "margin-right"),
-  "my": ("margin-top", "margin-bottom"),
-  "ml": "margin-left",
-  "mr": "margin-right",
-  "mb": "margin-bottom",
-  "mt": "margin-top"
-);
-
-@each $class, $property in $classes {
-  @each $size in $sizes {
-    .#{$class}-#{$size} {
-      @if type-of($property)==list {
-        @each $prop in $property {
-          #{$prop}: var(--pf-margin-#{$size});
-        }
-      }
-
-      @else {
-        #{$property}: var(--pf-margin-#{$size});
-      }
-    }
-  }
-
-  @each $size in $negativeSizes {
-    .#{$class}-n#{$size} {
-      @if type-of($property)==list {
-        @each $prop in $property {
-          #{$prop}: var(--pf-negative-margin-#{$size});
-        }
-      }
-
-      @else {
-        #{$property}: var(--pf-negative-margin-#{$size});
-      }
-    }
-  }
-}

package/src/styles/_padding.scss

@@ -1,30 +0,0 @@
-$sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16;
-$classes: (
-  'pa': 'padding',
-  'px': (
-    'padding-left',
-    'padding-right',
-  ),
-  'py': (
-    'padding-top',
-    'padding-bottom',
-  ),
-  'pl': 'padding-left',
-  'pr': 'padding-right',
-  'pb': 'padding-bottom',
-  'pt': 'padding-top',
-);
-
-@each $class, $property in $classes {
-  @each $size in $sizes {
-    .#{$class}-#{$size} {
-      @if type-of($property) ==list {
-        @each $prop in $property {
-          #{$prop}: var(--pf-padding-#{$size});
-        }
-      } @else {
-        #{$property}: var(--pf-padding-#{$size});
-      }
-    }
-  }
-}

package/src/styles/_sheets.scss

@@ -1,7 +0,0 @@
-:root [data-theme='light'] {
-  --sheets-background-color: var(--pf-gray-color-100);
-}
-:root [data-theme='dark'],
-:root {
-  --sheets-background-color: var(--pf-primary-color-400);
-}

package/src/styles/variables/_borders.scss

@@ -1,46 +0,0 @@
-:root {
-  --pf-border-thin: thin;
-  --pf-border-sm: 1px;
-  --pf-border-md: 2px;
-  --pf-border-lg: 4px;
-  --pf-border-xl: 8px;
-  --pf-rounded: 4px;
-  --pf-rounded-0: 0px;
-  --pf-rounded-sm: 2px;
-  --pf-rounded-md: 4px;
-  --pf-rounded-lg: 8px;
-  --pf-rounded-xl: 24px;
-  --pf-rounded-pill: 9999px;
-  --pf-rounded-circle: 50%;
-  --pf-rounded-shaped: 24px 0;
-}
-
-:root [data-theme='light'] {
-  --pf-border-color-primary: var(--pf-gray-color-300);
-  --pf-border-color-secondary: var(--pf-gray-color-250);
-  --pf-border-hover-color: var(--pf-gray-color-400);
-  --pf-border-color-soft: var(--pf-secondary-color-450);
-  --pf-border-color-accent: var(--pf-blue-color-450);
-  --pf-border-color-error: var(--pf-error-color);
-  --pf-border-color-warning: var(--pf-warning-color);
-  --pf-border-color-info: var(--pf-info-color);
-  --pf-border-color-success: var(--pf-success-color);
-  --pf-border-color-neutral: var(--pf-neutral-color);
-  --pf-border-color-pending: var(--pf-pending-color);
-  --pf-horizontal-line-color: var(--pf-border-color-primary);
-}
-
-:root [data-theme='dark'],
-:root {
-  --pf-border-color-primary: var(--pf-tertiary-color-700);
-  --pf-border-color-secondary: var(--pf-primary-color-600);
-  --pf-border-color-soft: var(--pf-secondary-color-600);
-  --pf-border-color-accent: var(--pf-secondary-color-400);
-  --pf-border-color-error: var(--pf-error-color);
-  --pf-border-color-warning: var(--pf-warning-color);
-  --pf-border-color-info: var(--pf-info-color);
-  --pf-border-color-success: var(--pf-success-color);
-  --pf-border-color-neutral: var(--pf-neutral-color);
-  --pf-border-color-pending: var(--pf-pending-color);
-  --pf-horizontal-line-color: var(--pf-border-color-primary);
-}

package/src/styles/variables/_gap.scss

@@ -1,19 +0,0 @@
-:root {
-  --pf-gap-0: 0;
-  --pf-gap-1: 4px;
-  --pf-gap-2: 8px;
-  --pf-gap-3: 12px;
-  --pf-gap-4: 16px;
-  --pf-gap-5: 20px;
-  --pf-gap-6: 24px;
-  --pf-gap-7: 28px;
-  --pf-gap-8: 32px;
-  --pf-gap-9: 36px;
-  --pf-gap-10: 40px;
-  --pf-gap-11: 44px;
-  --pf-gap-12: 48px;
-  --pf-gap-13: 52px;
-  --pf-gap-14: 56px;
-  --pf-gap-15: 60px;
-  --pf-gap-16: 64px;
-}

package/src/styles/variables/_icons.scss

@@ -1,7 +0,0 @@
-:root {
-  --pf-icon-size-xs: 0.6rem; // eww, probably want this to be 0.5 eventually but we use 0.6 (10px) commonly in the codebase
-  --pf-icon-size-sm: 0.75rem;
-  --pf-icon-size-md: 1rem;
-  --pf-icon-size-lg: 1.5rem;
-  --pf-icon-size-xl: 2rem;
-}

package/src/styles/variables/_margin.scss

@@ -1,37 +0,0 @@
-:root {
-  --pf-margin-auto: auto;
-  --pf-margin-0: 0;
-  --pf-margin-1: 4px;
-  --pf-margin-2: 8px;
-  --pf-margin-3: 12px;
-  --pf-margin-4: 16px;
-  --pf-margin-5: 20px;
-  --pf-margin-6: 24px;
-  --pf-margin-7: 28px;
-  --pf-margin-8: 32px;
-  --pf-margin-9: 36px;
-  --pf-margin-10: 40px;
-  --pf-margin-11: 44px;
-  --pf-margin-12: 48px;
-  --pf-margin-13: 52px;
-  --pf-margin-14: 56px;
-  --pf-margin-15: 60px;
-  --pf-margin-16: 64px;
-
-  --pf-negative-margin-1: -4px;
-  --pf-negative-margin-2: -8px;
-  --pf-negative-margin-3: -12px;
-  --pf-negative-margin-4: -16px;
-  --pf-negative-margin-5: -20px;
-  --pf-negative-margin-6: -24px;
-  --pf-negative-margin-7: -28px;
-  --pf-negative-margin-8: -32px;
-  --pf-negative-margin-9: -36px;
-  --pf-negative-margin-10: -40px;
-  --pf-negative-margin-11: -44px;
-  --pf-negative-margin-12: -48px;
-  --pf-negative-margin-13: -52px;
-  --pf-negative-margin-14: -56px;
-  --pf-negative-margin-15: -60px;
-  --pf-negative-margin-16: -64px;
-}

package/src/styles/variables/_padding.scss

@@ -1,19 +0,0 @@
-:root {
-  --pf-padding-0: 0;
-  --pf-padding-1: 4px;
-  --pf-padding-2: 8px;
-  --pf-padding-3: 12px;
-  --pf-padding-4: 16px;
-  --pf-padding-5: 20px;
-  --pf-padding-6: 24px;
-  --pf-padding-7: 28px;
-  --pf-padding-8: 32px;
-  --pf-padding-9: 36px;
-  --pf-padding-10: 40px;
-  --pf-padding-11: 44px;
-  --pf-padding-12: 48px;
-  --pf-padding-13: 52px;
-  --pf-padding-14: 56px;
-  --pf-padding-15: 60px;
-  --pf-padding-16: 64px;
-}

package/src/styles/variables/_size.scss

@@ -1,19 +0,0 @@
-:root {
-  --pf-size-0: 0;
-  --pf-size-1: 4px;
-  --pf-size-2: 8px;
-  --pf-size-3: 12px;
-  --pf-size-4: 16px;
-  --pf-size-5: 20px;
-  --pf-size-6: 24px;
-  --pf-size-7: 28px;
-  --pf-size-8: 32px;
-  --pf-size-9: 36px;
-  --pf-size-10: 40px;
-  --pf-size-11: 44px;
-  --pf-size-12: 48px;
-  --pf-size-13: 52px;
-  --pf-size-14: 56px;
-  --pf-size-15: 60px;
-  --pf-size-16: 64px;
-}

package/src/stylesAndAnimations/colors/BaseColorPalette.mdx

@@ -1,56 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as Colors from './Colors.stories';
- 
-<Meta title="Styles/Base Palette Colors" />
-# Base Palette Colors
-
-These are the base palette colors used to build semantic tokens. Do not use these directly!
-
-## Color Structure
-
-### Base Colors
-
-- **Primary**: Blue-gray palette (#50647c) - Main brand colors
-- **Secondary**: Blue palette (#1474b8) - Accent and interactive elements
-- **Tertiary**: Gray-blue palette (#6a7798) - Supporting elements
-- **Gray**: Neutral grays (#808080) - Text and backgrounds
-- **Red**: Error and destructive actions (#a3292d)
-- **Orange**: Warning and attention (#994733)
-- **Yellow**: Caution and highlights (#ad871f)
-- **Green**: Success and positive actions (#14b869)
-- **Purple**: Special and premium features (#5c29a3)
-- **Pink**: Unique and creative elements (#a3292d)
-- **Teal**: Information and data (#29a3a3)
-- **Blue**: Brand and primary actions (#2989ff)
-
-### Color Scale
-
-Each color family follows a consistent scale: 50, 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 700, 800, 900
-
-Click on the swatch to copy the color to your clipboard.
-
-<Canvas of={Colors.Default} />
-
-## CSS Variable Syntax
-
-In order to use or override a color listed above, you would use the following syntax.
-
-### Using A Variable
-
-The syntax for invoking a variable in your CSS code follows this pattern.
-
-```css
-.myElement {
-  color: var(--pf-primary-color-100);
-}
-```
-
-### Overriding A Variable
-
-The syntax for overriding a variable in your CSS code follows this pattern.
-
-```css
-:root {
-  --pf-primary-color-100: #ff0000;
-}
-```

package/src/stylesAndAnimations/colors/Colors.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Colors } from './Colors';
-
-const meta: Meta<typeof Colors> = {
-  title: 'remove/colors',
-  component: Colors,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Colors>;
-
-export const Default: Story = {};