@indico-data/design-system 3.2.1 → 3.4.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.2.1",
+  "version": "3.4.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/badge/styles/Badge.scss

@@ -1,28 +1,11 @@
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-badge-background-color: var(--pf-page-background-color);
-  --pf-badge-font-color: var(--pf-font-color);
-  --pf-badge-rounded: var(--pf-rounded);
-  --pf-badge-border-color: var(--pf-border-color-secondary);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-badge-background-color: var(--pf-page-background-color);
-  --pf-badge-font-color: var(--pf-font-color);
-  --pf-badge-rounded: var(--pf-rounded);
-  --pf-badge-border-color: var(--pf-border-color-secondary);
-}
-
 .badge {
-  border: var(--pf-border-sm) solid var(--pf-badge-border-color);
+  border: var(--pf-border-sm) solid var(--pf-border-color-secondary);
   border-radius: var(--pf-rounded-lg);
   padding: var(--pf-padding-3);
-  background: var(--pf-badge-background-color);
+  background: var(--pf-page-background-color);
   box-sizing: border-box;
   width: fit-content;
-  color: var(--pf-badge-font-color);
+  color: var(--pf-font-color);
   &--xs {
     padding: var(--pf-padding-1);
     p {

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/components/card/styles/Card.scss

@@ -1,48 +1,27 @@
 // Common Variables
-:root {
-  --pf-card-rounded: var(--pf-rounded);
-  --pf-card-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
-}
-
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-card-background-color: var(--pf-page-background-color);
-  --pf-card-border-color: var(--pf-border-color-secondary);
-  --pf-card-heading-color: var(--pf-font-color-soft);
-  --pf-card-font-color: var(--pf-font-color);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-card-background-color: var(--pf-page-background-color);
-  --pf-card-border-color: var(--pf-border-color-secondary);
-  --pf-card-heading-color: var(--pf-font-color-soft);
-  --pf-card-font-color: var(--pf-font-color);
-}
 
 .card {
   border-radius: var(--pf-rounded-lg);
   padding: var(--pf-padding-3);
-  background: var(--pf-card-background-color);
+  background: var(--pf-page-background-color);
   box-sizing: border-box;
-  color: var(--pf-card-font-color);
-  border: var(--pf-border-thin) solid var(--pf-card-border-color);
-  box-shadow: var(--pf-card-box-shadow);
+  color: var(--pf-font-color);
+  border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
+  box-shadow: var(--pf-shadow-surface);
 }
 
 .card__header {
   margin-bottom: var(--pf-margin-2);
-  color: var(--pf-card-heading-color);
+  color: var(--pf-font-color-soft);
   p {
-    color: var(--pf-card-font-color);
+    color: var(--pf-font-color);
     font-size: var(--pf-font-size-subtitle2);
   }
 }
 
 .card__content {
   hr {
-    border: var(--pf-border-thin) solid var(--pf-card-border-color);
+    border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
     border-bottom: none;
     margin-bottom: var(--pf-margin-3);
     margin-top: var(--pf-margin-3);
@@ -50,5 +29,5 @@
 }
 
 .card--box-shadow {
-  box-shadow: var(--pf-dropshadow);
+  box-shadow: var(--pf-shadow-elevated);
 }

package/src/components/floatUI/styles/FloatUI.scss

@@ -1,11 +1,10 @@
-@import 'variables.scss';
 .floatui-container {
   z-index: 999;
 }
 
 .floatui-content {
   border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
-  border-radius: var(--pf-floatui-border-radius);
-  box-shadow: var(--pf-floatui-box-shadow);
-  background: var(--pf-floatui-background-color);
+  border-radius: var(--pf-rounded);
+  box-shadow: var(--pf-shadow-floating);
+  background: var(--pf-background-color-secondary);
 }

package/src/components/forms/date/datePicker/styles/DatePicker.scss

@@ -1,9 +1,4 @@
 :root [data-theme='light'] {
-  --pf-date-picker-background-color: var(--pf-background-color-secondary);
-  --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
-  --pf-date-picker-selected-date-font-color: var(--pf-font-color-inverted);
-  --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
-
   .rdp-root {
     --rdp-accent-color: var(--pf-link-color);
     --rdp-font-family: var(--pf-font-family-base);
@@ -15,11 +10,6 @@
 
 :root [data-theme='dark'],
 :root {
-  --pf-date-picker-background-color: var(--pf-background-color-secondary);
-  --pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
-  --pf-date-picker-selected-date-font-color: var(--pf-font-color);
-  --pf-date-picker-today-background-color: var(--pf-background-color-highlight);
-
   .rdp-root {
     --rdp-accent-color: var(--pf-link-color);
     --rdp-font-family: var(--pf-font-family-base);
@@ -39,7 +29,7 @@
 
 .rdp-months {
   color: var(--pf-font-color);
-  background-color: var(--pf-date-picker-background-color);
+  background-color: var(--pf-background-color-secondary);
   padding: var(--pf-padding-3);
   border-radius: var(--pf-rounded);
   border: solid var(--pf-border-thin) var(--pf-border-color-primary);
@@ -63,16 +53,15 @@
 
   &.rdp-today {
     .rdp-day_button {
-      background-color: var(--pf-date-picker-today-background-color);
-      color: var(--pf-date-picker-selected-date-font-color);
+      background-color: var(--pf-background-color-highlight);
+      color: var(--pf-font-color-inverted);
       border: none;
     }
   }
 
   &.rdp-selected {
     .rdp-day_button {
-      background-color: var(--pf-date-picker-selected-date-background-color);
-      color: var(--pf-date-picker-selected-date-font-color);
+      background-color: var(--pf-background-brand-solid);
       border: none;
     }
   }
@@ -85,6 +74,20 @@
   }
 }
 
+// Theme-specific selected date font color
+:root [data-theme='light'] {
+  .rdp-day.rdp-selected .rdp-day_button {
+    color: var(--pf-font-color-inverted);
+  }
+}
+
+:root [data-theme='dark'],
+:root {
+  .rdp-day.rdp-selected .rdp-day_button {
+    color: var(--pf-font-color);
+  }
+}
+
 .time-picker-wrapper {
   margin-bottom: var(--pf-margin-3);
   width: 348px;
@@ -96,6 +99,6 @@
   padding: var(--pf-padding-2);
   border-radius: var(--pf-rounded);
   width: 200px;
-  box-shadow: var(--pf-dropshadow);
+  box-shadow: var(--pf-shadow-elevated);
   font-size: var(--pf-font-size-overline);
 }

package/src/components/menu/styles/Menu.scss

@@ -1,12 +1,10 @@
-@import './variables.scss';
-
 .menu {
-  border-radius: var(--pf-menu-rounded);
+  border-radius: var(--pf-rounded);
 
   .menu-item {
     width: 100%;
-    background: var(--pf-menu-item-background-color);
-    color: var(--pf-menu-item-color);
+    background: var(--pf-background-color-secondary);
+    color: var(--pf-font-color);
     display: block;
     width: 100%;
     text-align: left;
@@ -14,22 +12,22 @@
     border-radius: 0;
 
     &:first-child {
-      border-top-left-radius: var(--pf-menu-rounded);
-      border-top-right-radius: var(--pf-menu-rounded);
+      border-top-left-radius: var(--pf-rounded);
+      border-top-right-radius: var(--pf-rounded);
     }
 
     &:last-child {
-      border-bottom-left-radius: var(--pf-menu-rounded);
-      border-bottom-right-radius: var(--pf-menu-rounded);
+      border-bottom-left-radius: var(--pf-rounded);
+      border-bottom-right-radius: var(--pf-rounded);
     }
 
     &:hover {
-      background: var(--pf-menu-item-hover-color);
+      background: var(--pf-background-color-highlight);
     }
 
     box-shadow: none;
     &:focus {
-      background-color: var(--pf-menu-item-focus-color);
+      background-color: var(--pf-background-color-accent);
     }
   }
 }

package/src/components/tanstackTable/components/NoResults/NoResults.scss

@@ -11,10 +11,10 @@
   &__text {
     font-size: var(--pf-line-height-md);
     font-weight: var(--pf-font-weight-medium);
-    color: var(--pf-tanstack-table-font-color);
+    color: var(--pf-font-color);
 
     span {
-      color: var(--pf-tanstack-table-font-color);
+      color: var(--pf-font-color);
       cursor: pointer;
       &:hover {
         text-decoration: underline;

package/src/components/tanstackTable/styles/table.scss

@@ -1,5 +1,3 @@
-@import './_variables.scss';
-
 @import '../components/ActionBar/ActionBar.scss';
 @import '../components/NoResults/NoResults.scss';
 
@@ -21,11 +19,11 @@
     grid-template-columns: 1fr;
     overflow-x: auto;
     overflow-y: auto;
-    background-color: var(--pf-tanstack-table-background-color);
+    background-color: var(--pf-page-background-color);
     border-radius: var(--pf-rounded-lg);
-    border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-    border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-    border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+    border-left: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+    border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+    border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
 
     // Webkit scrollbar styles
     &::-webkit-scrollbar {
@@ -35,13 +33,13 @@
     }
 
     &::-webkit-scrollbar-track {
-      background: var(--pf-tanstack-table-background-color);
+      background: var(--pf-page-background-color);
       border-radius: var(--pf-rounded);
       cursor: pointer;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: var(--pf-tanstack-table-border-color);
+      background: var(--pf-border-color-secondary);
       border-radius: var(--pf-rounded);
       cursor: pointer;
       &:hover {
@@ -51,7 +49,7 @@
 
     // Firefox scrollbar styles
     scrollbar-width: thin;
-    scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
+    scrollbar-color: var(--pf-border-color-secondary) var(--pf-page-background-color);
   }
 }
 
@@ -75,7 +73,7 @@
     .tanstack-table__tbody {
       tr:nth-child(odd) {
         td {
-          background-color: var(--pf-tanstack-table-stripe-color);
+          background-color: var(--pf-background-color-secondary);
         }
       }
     }
@@ -87,7 +85,7 @@
     z-index: 3;
     box-sizing: border-box;
 
-    background-color: var(--pf-tanstack-table-background-color);
+    background-color: var(--pf-background-color-primary);
 
     tr:first-child {
       th {
@@ -102,15 +100,15 @@
     }
 
     &__th {
-      color: var(--pf-tanstack-table-font-color);
-      background: var(--pf-tanstack-table-header-background-color);
-      font-size: var(--pf-tanstack-table-font-size);
+      color: var(--pf-font-color);
+      background: var(--pf-background-color-primary);
+      font-size: var(--pf-font-size-body2);
       font-weight: var(--pf-font-weight-medium);
       box-sizing: border-box;
 
-      border-top: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-      border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-      border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-top: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+      border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+      border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
 
       user-select: none;
 
@@ -146,14 +144,14 @@
 
       &.is-selected {
         td {
-          background: var(--pf-tanstack-table-checked-color) !important;
+          background: var(--pf-background-color-accent) !important;
         }
       }
 
       &.show-hover {
         &:hover {
           td {
-            background-color: var(--pf-tanstack-table-hover-color) !important;
+            background-color: var(--pf-background-color-tertiary) !important;
             cursor: pointer;
           }
         }
@@ -161,7 +159,7 @@
 
       &.is-clicked {
         td {
-          background-color: var(--pf-tanstack-table-clicked-color) !important;
+          background-color: var(--pf-background-color-highlight) !important;
         }
       }
     }
@@ -169,11 +167,11 @@
     &__td {
       font-size: var(--pf-font-size-base);
       font-weight: var(--pf-font-weight-medium);
-      color: var(--pf-tanstack-table-font-color);
-      background: var(--pf-tanstack-table-background-color);
+      color: var(--pf-font-color);
+      background: var(--pf-page-background-color);
 
-      border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
-      border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
+      border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
 
       box-sizing: border-box;
 
@@ -213,8 +211,8 @@
 .table__pagination {
   padding-bottom: var(--pf-padding-4);
   padding-top: var(--pf-padding-4);
-  color: var(--pf-tanstack-table-pagination-font-color);
-  background-color: var(--pf-tanstack-table-pagination-background-color);
+  color: var(--pf-font-color);
+  background-color: var(--pf-page-background-color);
   padding-left: var(
     --pf-padding-4
   ); // buttons have a visual illusion of having a gap, so we add padding to adjust the left side when the total results exist

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

@@ -1,9 +1,44 @@
-:root [data-theme='light'] {
-  // Globals
-  // ***********************************************************************************************************************************
+// Common Semantic Tokens (Theme-Independent)
+:root {
+  // Shadows
+  --pf-shadow-surface: var(--pf-shadow-1);
+  --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);
+  --pf-item-yellow-color: var(--pf-yellow-color-550);
+  --pf-item-gray-color: var(--pf-gray-color-700);
+  --pf-item-green-color: var(--pf-green-color-600);
+  --pf-item-purple-color: var(--pf-purple-color-500);
+  --pf-item-pink-color: var(--pf-pink-color-600);
+  --pf-item-orange-color: var(--pf-orange-color-500);
+  --pf-item-teal-color: var(--pf-teal-color-600);
+
+  @each $color in $chromatic-color-names {
+    @each $shade, $color-number in $item-shades-to-color-number {
+      --pf-item-#{$color}-#{$shade}-color: var(--pf-#{$color}-color-#{$color-number});
+    }
+  }
+}
+
+:root [data-theme='light'] {
   // Background Colors
   --pf-page-background-color: var(--pf-gray-color-100);
   --pf-background-color-primary: var(--pf-gray-color-150);
@@ -11,39 +46,28 @@
   --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
-  // ***********************************************************************************************************************************
   --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-brand-color-500);
+  --pf-font-color-accent: var(--pf-blue-color-500);
   --pf-font-color-disabled: var(--pf-gray-color-400);
-  --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);
 
   // 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;
   --pf-line-chart-color-two: #3ca7bd;
   --pf-line-chart-color-three: #4db8cb;
@@ -56,60 +80,27 @@
 
 :root [data-theme='dark'],
 :root {
-  // Globals
-  // ***********************************************************************************************************************************
-  --pf-white-color: #ffffff;
-  --pf-black-color: #000000;
-
   --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-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);
 
   // Fonts
-  // ***********************************************************************************************************************************
   --pf-font-color: var(--pf-gray-color-50);
   --pf-font-color-inverted: var(--pf-gray-color-900);
-
-  // Background Colors
   --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);
-  --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);
-  --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);
-  --pf-item-yellow-color: var(--pf-yellow-color-550);
-  --pf-item-gray-color: var(--pf-gray-color-700);
-  --pf-item-green-color: var(--pf-green-color-600);
-  --pf-item-purple-color: var(--pf-purple-color-500);
-  --pf-item-pink-color: var(--pf-pink-color-600);
-  --pf-item-orange-color: var(--pf-orange-color-500);
-  --pf-item-teal-color: var(--pf-teal-color-600);
-
-  @each $color in $chromatic-color-names {
-    @each $shade, $color-number in $item-shades-to-color-number {
-      --pf-item-#{$color}-#{$shade}-color: var(--pf-#{$color}-color-#{$color-number});
-    }
-  }
 
   // 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);
@@ -117,8 +108,6 @@
   --pf-active-link-color: var(--pf-secondary-color-400);
 
   // Chart Colors
-  // ***********************************************************************************************************************************
-
   --pf-line-chart-color-one: #256579;
   --pf-line-chart-color-two: #266f86;
   --pf-line-chart-color-three: #277a93;

package/src/styles/variables/_borders.scss

@@ -20,7 +20,7 @@
   --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-brand-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);