@indico-data/design-system 3.5.0 → 3.6.1

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

@@ -4,13 +4,9 @@
 @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';
 
@@ -38,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/{_borderRadius.scss → _borders.scss}

@@ -1,4 +1,11 @@
 :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;

package/src/styles/primitives/_colors.scss

@@ -223,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/index.scss

@@ -1,5 +1,5 @@
 @import 'colors';
-@import 'borderRadius';
+@import 'borders';
 @import 'breakpoints';
 @import 'iconSizes';
 @import 'shadows';

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 {

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

@@ -5,7 +5,8 @@
 // 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
+// Light Theme (default)
+:root,
 :root [data-theme='light'] {
   // Utility Colors
   --pf-semantic-utility-info-default: var(--pf-secondary-color-450);

package/src/styles/variables/index.scss

@@ -1,8 +1,2 @@
 @import 'typography';
-@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});
-      }
-    }
-  }
-}