@indico-data/design-system 3.2.0 → 3.3.0

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/pill/styles/Pill.scss

@@ -6,7 +6,6 @@
   font-weight: var(--pf-font-weight-medium);
   white-space: nowrap;
   line-height: 1;
-  border: solid 1px;
   color: var(--pf-font-color-light);
 
   &--sm {

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/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);
@@ -17,7 +52,6 @@
   --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);
@@ -25,16 +59,8 @@
   --pf-font-color-placeholder: var(--pf-gray-color-450);
   --pf-font-color-accent: var(--pf-brand-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-secondary-link-color: var(--pf-tertiary-color-700);
@@ -42,8 +68,6 @@
   --pf-active-link-color: var(--pf-brand-color-500);
 
   // Chart Colors
-  // ***********************************************************************************************************************************
-
   --pf-line-chart-color-one: #2b97af;
   --pf-line-chart-color-two: #3ca7bd;
   --pf-line-chart-color-three: #4db8cb;
@@ -56,11 +80,6 @@
 
 :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);
@@ -73,43 +92,15 @@
   --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/_dropshadows.scss

@@ -1,7 +1,8 @@
 :root,
 :root [data-theme='light'],
 :root [data-theme='dark'] {
-  --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-
-  --pf-focus-box-shadow-alignment: 0px 0px 0px 4px;
+  --pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
+  --pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
+  --pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  --pf-focus-alignment: 0px 0px 0px 4px;
 }

package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts

@@ -243,7 +243,17 @@ export const utilityClassesData: UtilityClassData[] = [
   { className: 'icon-xl', css: 'font-size: var(--pf-icon-size-xl);', category: 'Icon' },
 
   // Drop Shadows
-  { className: 'dropshadow', css: 'box-shadow: var(--pf-dropshadow);', category: 'Effect' },
+  { className: 'shadow-surface', css: 'box-shadow: var(--pf-shadow-surface);', category: 'Effect' },
+  {
+    className: 'shadow-elevated',
+    css: 'box-shadow: var(--pf-shadow-elevated);',
+    category: 'Effect',
+  },
+  {
+    className: 'shadow-floating',
+    css: 'box-shadow: var(--pf-shadow-floating);',
+    category: 'Effect',
+  },
 
   // Cursor Utilities
   { className: 'cursor--pointer', css: 'cursor: pointer;', category: 'Cursor' },

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

@@ -1,18 +0,0 @@
-// Common Variables
-:root {
-  --pf-floatui-border-radius: var(--pf-rounded);
-  --pf-floatui-box-shadow: var(--pf-dropshadow);
-  --pf-floatui-border: none;
-  --pf-floatui-border-color: var(--pf-border-color-secondary);
-}
-
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-floatui-background-color: var(--pf-background-color-secondary);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-floatui-background-color: var(--pf-background-color-secondary);
-}

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

@@ -1,20 +0,0 @@
-:root {
-  --pf-menu-rounded: var(--pf-rounded);
-}
-
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-menu-item-hover-color: var(--pf-background-color-highlight);
-  --pf-menu-item-background-color: var(--pf-background-color-secondary);
-  --pf-menu-item-color: var(--pf-font-color);
-  --pf-menu-item-focus-color: var(--pf-background-color-accent);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-menu-item-hover-color: var(--pf-background-color-highlight);
-  --pf-menu-item-background-color: var(--pf-background-color-secondary);
-  --pf-menu-item-color: var(--pf-font-color);
-  --pf-menu-item-focus-color: var(--pf-background-color-accent);
-}

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

@@ -1,41 +0,0 @@
-// Light Theme Specific Variables
-
-:root [data-theme='light'] {
-  --pf-tanstack-table-background-color: var(--pf-page-background-color);
-  --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
-
-  --pf-tanstack-table-font-color: var(--pf-font-color);
-  --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
-  --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
-  --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
-  --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
-  --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
-  --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
-  --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
-    0 4px 8px rgba(0, 0, 0, 0.1);
-  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
-  --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
-  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-tanstack-table-background-color: var(--pf-page-background-color);
-  --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
-
-  --pf-tanstack-table-font-color: var(--pf-font-color);
-  --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
-  --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
-  --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
-  --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
-  --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
-  --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
-  --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
-    0 4px 8px rgba(0, 0, 0, 0.1);
-  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
-  --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
-  --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
-}