@indico-data/design-system 3.5.0 → 3.6.1

package/src/components/pill/styles/Pill.scss

@@ -1,25 +1,27 @@
+@import '../../../styles/_colors.scss';
+
 .pill {
   display: inline-block;
-  border-radius: var(--pf-rounded);
-  padding: var(--pf-padding-1) var(--pf-padding-2);
+  border-radius: var(--pf-border-radius-xs);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
   font-size: var(--pf-font-size-overline);
   font-weight: var(--pf-font-weight-medium);
   white-space: nowrap;
   line-height: 1;
-  color: var(--pf-font-color-light);
+  color: var(--pf-gray-color-50);
 
   &--sm {
-    padding: var(--pf-padding-1) var(--pf-padding-2);
+    padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
     font-size: var(--pf-font-size-overline);
   }
 
   &--md {
-    padding: var(--pf-padding-2) var(--pf-padding-3);
+    padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
     font-size: var(--pf-font-size-body);
   }
 
   &--lg {
-    padding: var(--pf-padding-3) var(--pf-padding-4);
+    padding: var(--pf-spacing-lg) var(--pf-spacing-2xl);
     font-size: var(--pf-font-size-h2);
   }
 

package/src/components/skeleton/styles/Skeleton.scss

@@ -1,7 +1,7 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
   --pf-skeleton-color-one: var(--pf-gray-color-800);
-  --pf-skeleton-color-two: var(--pf-gray-color-950);
+  --pf-skeleton-color-two: var(--pf-gray-color-900);
   --pf-skeleton-background-color: var(--pf-gray-color-700);
 }
 
@@ -13,7 +13,7 @@
 }
 
 .skeleton {
-  border-radius: var(--pf-rounded);
+  border-radius: var(--pf-border-radius-xs);
   background-color: var(--pf-skeleton-background-color);
   opacity: 0.7;
   animation: skeleton-loading 1s linear infinite alternate;
@@ -27,7 +27,7 @@
   }
 
   &.skeleton--circle {
-    border-radius: var(--pf-rounded-circle);
+    border-radius: var(--pf-border-radius-circle);
   }
 
   @keyframes skeleton-loading {

package/src/components/stepper/examples/constants.ts

@@ -1,10 +1,10 @@
 // Common information box style
 export const INFO_BOX_STYLE = {
   padding: '15px',
-  color: 'var(--pf-font-color)',
+  color: 'var(--pf-semantic-font-regular)',
   marginBottom: '20px',
   borderRadius: '5px',
-  border: '1px solid var(--pf-border-color)',
+  border: '1px solid var(--pf-semantic-border-primary)',
 };
 
 // Step status indicator styling

package/src/components/stepper/styles/Stepper.scss

@@ -1,57 +1,11 @@
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  // Stepper Legend
-  --pf-stepper-background-color: var(--pf-gray-color-900);
-  --pf-stepper-legend-background-color: var(--pf-gray-color-950);
-  // Default Step
-  --pf-stepper-legend-circle-background-color: var(--pf-gray-color-800);
-  --pf-stepper-legend-circle-text-color: var(--pf-white-color);
-  --pf-stepper-legend-line-background-color: var(--pf-gray-color-800);
-  --pf-stepper-legend-step-text-color: var(--pf-white-color);
-  --pf-stepper-legend-step-disabled-text-color: var(--pf-gray-color-800);
-
-  // Completed Step
-  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
-  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
-  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
-  --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
-  // Current Step
-  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
-  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
-  --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
-  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  // Stepper Legend
-  --pf-stepper-background-color: var(--pf-primary-color-600);
-  --pf-stepper-legend-background-color: var(--pf-tertiary-color-600);
-  // Default Step
-  --pf-stepper-legend-circle-background-color: var(--pf-tertiary-color-450);
-  --pf-stepper-legend-circle-text-color: var(--pf-white-color);
-  --pf-stepper-legend-line-background-color: var(--pf-tertiary-color-450);
-  --pf-stepper-legend-step-text-color: var(--pf-white-color);
-  --pf-stepper-legend-step-disabled-text-color: var(--pf-tertiary-color-450);
-
-  // Completed Step
-  --pf-stepper-legend-circle-completed-background-color: var(--pf-secondary-color);
-  --pf-stepper-legend-circle-completed-text-color: var(--pf-white-color);
-  --pf-stepper-legend-step-completed-text-color: var(--pf-secondary-color);
-  --pf-stepper-legend-line-completed-background-color: var(--pf-secondary-color);
-  // Current Step
-  --pf-stepper-legend-circle-current-background-color: var(--pf-secondary-color);
-  --pf-stepper-legend-circle-current-border-color: var(--pf-white-color);
-  --pf-stepper-legend-circle-current-text-color: var(--pf-white-color);
-  --pf-stepper-legend-step-current-text-color: var(--pf-secondary-color);
-}
+// Stepper component now uses semantic tokens directly
 
 .stepper {
-  padding: var(--pf-padding-8);
+  padding: var(--pf-spacing-6xl);
   height: 100%;
   display: grid;
   grid-template-columns: auto 5fr;
-  gap: var(--pf-margin-8);
+  gap: var(--pf-spacing-6xl);
 
   .stepper-body {
     display: flex;
@@ -63,49 +17,49 @@
       display: flex;
       justify-content: end;
       align-items: center;
-      padding-top: var(--pf-padding-8);
+      padding-top: var(--pf-spacing-6xl);
       border-top: solid 1px var(--pf-tertiary-color-800);
-      margin-top: var(--pf-margin-8);
-      margin-bottom: var(--pf-margin-8);
+      margin-top: var(--pf-spacing-6xl);
+      margin-bottom: var(--pf-spacing-6xl);
     }
   }
 
   .stepper-navigation-back {
-    margin-right: var(--pf-margin-2);
+    margin-right: var(--pf-spacing-sm);
   }
 
   .legend {
-    background-color: var(--pf-stepper-legend-background-color);
-    padding: var(--pf-padding-12) var(--pf-padding-8);
-    border-radius: var(--pf-rounded-xl);
+    background-color: var(--pf-semantic-background-tertiary);
+    padding: var(--pf-spacing-10xl) var(--pf-spacing-6xl);
+    border-radius: var(--pf-border-radius-3xl);
     width: 250px;
   }
 
   .legend-header {
-    margin-bottom: var(--pf-margin-4);
+    margin-bottom: var(--pf-spacing-2xl);
   }
 
   .legend-body {
-    margin-bottom: var(--pf-margin-4);
+    margin-bottom: var(--pf-spacing-2xl);
   }
 
   .stepper-legend-circle {
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background-color: var(--pf-stepper-legend-circle-background-color);
+    background-color: var(--pf-semantic-background-primary);
+    color: var(--pf-semantic-font-regular);
     display: flex;
     align-items: center;
     justify-content: center;
     &.completed {
-      background-color: var(--pf-stepper-legend-circle-completed-background-color);
-      border-color: var(--pf-stepper-legend-circle-completed-background-color);
-      color: var(--pf-stepper-legend-circle-completed-text-color);
+      background-color: var(--pf-semantic-utility-success-default);
+      color: var(--pf-semantic-font-inverted);
     }
 
     &.current {
-      background-color: var(--pf-stepper-legend-circle-current-background-color);
-      color: var(--pf-stepper-legend-circle-current-text-color);
+      background-color: var(--pf-semantic-font-accent);
+      color: var(--pf-semantic-font-inverted);
     }
   }
 
@@ -113,11 +67,11 @@
     width: 1px;
     height: 30px;
     min-height: 100%;
-    background-color: var(--pf-stepper-legend-line-background-color);
+    background-color: var(--pf-semantic-border-primary);
     margin-left: 12px;
 
     &--completed {
-      background-color: var(--pf-stepper-legend-line-completed-background-color);
+      background-color: var(--pf-semantic-utility-success-default);
     }
   }
 
@@ -126,26 +80,26 @@
     align-items: center;
     .btn {
       padding: 0;
-      margin-left: var(--pf-margin-2);
-      color: var(--pf-stepper-legend-step-text-color);
+      margin-left: var(--pf-spacing-sm);
+      color: var(--pf-semantic-font-regular);
     }
 
     &--completed-step {
       .btn {
-        color: var(--pf-stepper-legend-step-completed-text-color);
+        color: var(--pf-semantic-utility-success-default);
       }
     }
 
     &--current-step {
       .btn {
-        color: var(--pf-stepper-legend-step-current-text-color);
+        color: var(--pf-semantic-font-accent);
         text-decoration: underline;
       }
     }
 
     &--disabled-step {
       .btn {
-        color: var(--pf-stepper-legend-step-disabled-text-color);
+        color: var(--pf-semantic-font-disabled);
       }
     }
   }

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

@@ -11,7 +11,7 @@
 }
 
 .table {
-  border-radius: var(--pf-rounded);
+  border-radius: var(--pf-border-radius-xs);
   background-color: var(--pf-table-background-color);
 
   &--full-height {
@@ -24,26 +24,26 @@
   &-body {
     background-color: var(--pf-table-background-color);
     color: var(--pf-table-font-color);
-    border-radius: var(--pf-rounded) !important;
+    border-radius: var(--pf-border-radius-xs) !important;
     border: var(--pf-border-sm) solid var(--pf-table-border-color);
     height: 100%;
 
     // Webkit scrollbar styles
     &::-webkit-scrollbar {
-      width: var(--pf-size-2);
-      height: var(--pf-size-2);
+      width: var(--pf-spacing-sm);
+      height: var(--pf-spacing-sm);
       cursor: pointer;
     }
 
     &::-webkit-scrollbar-track {
       background: var(--pf-table-background-color);
-      border-radius: var(--pf-rounded);
+      border-radius: var(--pf-border-radius-xs);
       cursor: pointer;
     }
 
     &::-webkit-scrollbar-thumb {
       background: var(--pf-table-border-color);
-      border-radius: var(--pf-rounded);
+      border-radius: var(--pf-border-radius-xs);
       cursor: pointer;
       &:hover {
         background: var(--pf-primary-color);
@@ -58,7 +58,7 @@
   // Pinned Columns
   .table__column__pin-action {
     padding: 0;
-    padding-right: var(--pf-padding-1);
+    padding-right: var(--pf-spacing-xxs);
   }
   .table__column--is-pinned {
     opacity: 1;
@@ -112,7 +112,7 @@
   }
 
   .rdt_TableHeader {
-    border-radius: var(--pf-rounded) 0;
+    border-radius: var(--pf-border-radius-xs) 0;
     border: var(--pf-border-sm) solid var(--pf-table-border-color);
     border-bottom: none;
   }

package/src/components/tanstackTable/components/ActionBar/ActionBar.scss

@@ -8,11 +8,11 @@
   &__container {
     display: flex;
     align-items: center;
-    gap: var(--pf-size-2);
+    gap: var(--pf-spacing-sm);
   }
 
   &__text-container {
-    padding: var(--pf-padding-2);
+    padding: var(--pf-spacing-sm);
 
     span {
       font-size: var(--pf-font-size-base);
@@ -25,6 +25,6 @@
   &__button-container {
     display: flex;
     align-items: center;
-    gap: var(--pf-size-4);
+    gap: var(--pf-spacing-2xl);
   }
 }

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

@@ -6,15 +6,15 @@
 
   position: sticky;
   left: 0;
-  margin: var(--pf-margin-8) auto;
+  margin: var(--pf-spacing-6xl) auto;
 
   &__text {
     font-size: var(--pf-line-height-md);
     font-weight: var(--pf-font-weight-medium);
-    color: var(--pf-font-color);
+    color: var(--pf-semantic-font-regular);
 
     span {
-      color: var(--pf-font-color);
+      color: var(--pf-semantic-font-regular);
       cursor: pointer;
       &:hover {
         text-decoration: underline;

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

@@ -19,37 +19,37 @@
     grid-template-columns: 1fr;
     overflow-x: auto;
     overflow-y: auto;
-    background-color: var(--pf-page-background-color);
-    border-radius: var(--pf-rounded-lg);
-    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);
+    background-color: var(--pf-semantic-page-background);
+    border-radius: var(--pf-border-radius-md);
+    border-left: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+    border-right: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+    border-bottom: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
 
     // Webkit scrollbar styles
     &::-webkit-scrollbar {
-      width: var(--pf-size-2);
-      height: var(--pf-size-2);
+      width: var(--pf-spacing-sm);
+      height: var(--pf-spacing-sm);
       cursor: pointer;
     }
 
     &::-webkit-scrollbar-track {
-      background: var(--pf-page-background-color);
-      border-radius: var(--pf-rounded);
+      background: var(--pf-semantic-page-background);
+      border-radius: var(--pf-border-radius-xs);
       cursor: pointer;
     }
 
     &::-webkit-scrollbar-thumb {
-      background: var(--pf-border-color-secondary);
-      border-radius: var(--pf-rounded);
+      background: var(--pf-semantic-border-secondary);
+      border-radius: var(--pf-border-radius-xs);
       cursor: pointer;
       &:hover {
-        background: var(--pf-primary-color);
+        background: var(--pf-semantic-background-brand-hover);
       }
     }
 
     // Firefox scrollbar styles
     scrollbar-width: thin;
-    scrollbar-color: var(--pf-border-color-secondary) var(--pf-page-background-color);
+    scrollbar-color: var(--pf-semantic-border-secondary) var(--pf-semantic-page-background);
   }
 }
 
@@ -58,13 +58,13 @@
   margin: 0;
   table-layout: auto;
   border-spacing: 0;
-  border-radius: var(--pf-rounded-lg);
+  border-radius: var(--pf-border-radius-md);
   width: 100%;
 
   &__tbody {
     tr {
       td {
-        padding: var(--pf-padding-2) var(--pf-padding-3);
+        padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
       }
     }
   }
@@ -73,7 +73,7 @@
     .tanstack-table__tbody {
       tr:nth-child(odd) {
         td {
-          background-color: var(--pf-background-color-secondary);
+          background-color: var(--pf-semantic-background-secondary);
         }
       }
     }
@@ -85,7 +85,7 @@
     z-index: 3;
     box-sizing: border-box;
 
-    background-color: var(--pf-background-color-primary);
+    background-color: var(--pf-semantic-background-primary);
 
     tr:first-child {
       th {
@@ -100,15 +100,15 @@
     }
 
     &__th {
-      color: var(--pf-font-color);
-      background: var(--pf-background-color-primary);
+      color: var(--pf-semantic-font-regular);
+      background: var(--pf-semantic-background-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-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);
+      border-top: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+      border-bottom: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+      border-right: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
 
       user-select: none;
 
@@ -118,7 +118,7 @@
 
       max-width: 300px;
       width: auto;
-      padding: 0 var(--pf-padding-2);
+      padding: 0 var(--pf-spacing-sm);
       text-align: left;
 
       &:first-child {
@@ -144,14 +144,14 @@
 
       &.is-selected {
         td {
-          background: var(--pf-background-color-accent) !important;
+          background: var(--pf-semantic-background-accent) !important;
         }
       }
 
       &.show-hover {
         &:hover {
           td {
-            background-color: var(--pf-background-color-tertiary) !important;
+            background-color: var(--pf-semantic-background-tertiary) !important;
             cursor: pointer;
           }
         }
@@ -159,7 +159,7 @@
 
       &.is-clicked {
         td {
-          background-color: var(--pf-background-color-highlight) !important;
+          background-color: var(--pf-semantic-background-highlight) !important;
         }
       }
     }
@@ -167,11 +167,11 @@
     &__td {
       font-size: var(--pf-font-size-base);
       font-weight: var(--pf-font-weight-medium);
-      color: var(--pf-font-color);
-      background: var(--pf-page-background-color);
+      color: var(--pf-semantic-font-regular);
+      background: var(--pf-semantic-page-background);
 
-      border-right: 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-semantic-border-secondary);
+      border-bottom: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
 
       box-sizing: border-box;
 
@@ -179,7 +179,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      padding: 0 var(--pf-padding-2);
+      padding: 0 var(--pf-spacing-sm);
       max-width: 300px;
       width: auto;
       text-align: left;
@@ -195,11 +195,11 @@
   }
 
   &__centered-row {
-    padding: var(--pf-padding-1) var(--pf-padding-2);
+    padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
     text-align: center;
     vertical-align: middle;
     height: 100%;
-    border: var(--pf-border-sm) solid var(--pf-border-color-primary);
+    border: var(--pf-border-sm) solid var(--pf-semantic-border-primary);
 
     svg {
       margin: 0 auto;
@@ -209,11 +209,10 @@
 }
 
 .table__pagination {
-  padding-bottom: var(--pf-padding-4);
-  padding-top: var(--pf-padding-4);
-  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
+  padding-bottom: var(--pf-spacing-2xl);
+  padding-top: var(--pf-spacing-2xl);
+  color: var(--pf-semantic-font-regular);
+  background-color: var(--pf-semantic-page-background);
+  padding-left: var(--pf-spacing-2xl);
+  // 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/components/toast/styles/Toast.scss

@@ -1,69 +1,53 @@
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --toastify-color-info: var(--pf-info-color);
-  --toastify-color-success: var(--pf-success-color);
-  --toastify-color-warning: var(--pf-warning-color);
-  --toastify-color-error: var(--pf-error-color);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --toastify-color-info: var(--pf-info-color);
-  --toastify-color-success: var(--pf-success-color);
-  --toastify-color-warning: var(--pf-warning-color);
-  --toastify-color-error: var(--pf-error-color);
-}
-
 // Override Toast BG colors and text colors
 .Toastify__toast-theme--colored.Toastify__toast--default {
-  background-color: var(--pf-background-color-secondary);
-  color: var(--pf-font-color);
+  background-color: var(--pf-semantic-background-secondary);
+  color: var(--pf-semantic-font-regular);
   svg {
-    fill: var(--pf-info-color);
+    fill: var(--pf-semantic-utility-info-default);
   }
 }
 .Toastify__toast-theme--colored.Toastify__toast--info {
-  background-color: var(--pf-background-color-secondary);
-  color: var(--pf-font-color);
+  background-color: var(--pf-semantic-background-secondary);
+  color: var(--pf-semantic-font-regular);
   svg {
-    fill: var(--pf-info-color);
+    fill: var(--pf-semantic-utility-info-default);
   }
 }
 .Toastify__toast-theme--colored.Toastify__toast--success {
-  background-color: var(--pf-background-color-secondary);
-  color: var(--pf-font-color);
+  background-color: var(--pf-semantic-background-secondary);
+  color: var(--pf-semantic-font-regular);
   svg {
-    fill: var(--pf-success-color);
+    fill: var(--pf-semantic-utility-success-default);
   }
 }
 .Toastify__toast-theme--colored.Toastify__toast--warning {
-  background-color: var(--pf-background-color-secondary);
-  color: var(--pf-font-color);
+  background-color: var(--pf-semantic-background-secondary);
+  color: var(--pf-semantic-font-regular);
   svg {
-    fill: var(--pf-warning-color);
+    fill: var(--pf-semantic-utility-warning-default);
   }
 }
 .Toastify__toast-theme--colored.Toastify__toast--error {
-  background-color: var(--pf-background-color-secondary);
-  color: var(--pf-font-color);
+  background-color: var(--pf-semantic-background-secondary);
+  color: var(--pf-semantic-font-regular);
   svg {
-    fill: var(--pf-error-color);
+    fill: var(--pf-semantic-utility-error-default);
   }
 }
 
 // Override Progress Bar Colors
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--default {
-  background-color: var(--pf-info-color);
+  background-color: var(--pf-semantic-utility-info-default);
 }
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info {
-  background-color: var(--pf-info-color);
+  background-color: var(--pf-semantic-utility-info-default);
 }
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success {
-  background-color: var(--pf-success-color);
+  background-color: var(--pf-semantic-utility-success-default);
 }
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning {
-  background-color: var(--pf-warning-color);
+  background-color: var(--pf-semantic-utility-warning-default);
 }
 .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
-  background-color: var(--pf-error-color);
+  background-color: var(--pf-semantic-utility-error-default);
 }

package/src/components/tooltip/Tooltip.tsx

@@ -30,8 +30,8 @@ export const Tooltip = ({
   return (
     <ReactTooltip
       style={{
-        backgroundColor: 'var(--pf-tooltip-background-color)',
-        color: 'var(--pf-tooltip-font-color)',
+        backgroundColor: 'var(--pf-semantic-background-inverted)',
+        color: 'var(--pf-semantic-font-inverted)',
         zIndex,
       }}
       id={id}