@indico-data/design-system 2.60.5 → 2.60.7

package/lib/index.css

@@ -1592,7 +1592,7 @@ form {
 
 .select-wrapper .select__control {
   background-color: var(--pf-form-input-background-color);
-  border: 1px solid var(--pf-form-input-border-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
   color: var(--pf-form-input-color);
   box-shadow: none;
 }
@@ -1601,7 +1601,7 @@ form {
   border-color: var(--pf-form-input-border-color);
 }
 .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
-  border: 1px solid var(--pf-form-input-focus-border-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-focus-border-color);
 }
 .select-wrapper .select__control--is-disabled {
   background-color: var(--pf-form-input-disabled-background-color);
@@ -1633,9 +1633,9 @@ form {
   color: var(--pf-form-input-hover-color);
 }
 .select-wrapper .select__menu {
-  border: 1px solid var(--pf-form-input-border-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
   box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
-  margin: 4px 0px;
+  margin: var(--pf-margin-2) 0;
   background-color: var(--pf-form-input-background-color);
 }
 .select-wrapper .select__menu-notice {
@@ -1673,6 +1673,41 @@ form {
   color: var(--pf-select-option-color);
 }
 
+/* Portal-specific styles that match the main component styling */
+body .select__menu-portal {
+  z-index: 9999 !important;
+}
+
+/* Apply theme styling to portal elements */
+body div[class*=select__menu] {
+  background-color: var(--pf-form-input-background-color);
+}
+body div[class*=select__menu-list] {
+  background-color: var(--pf-form-input-background-color);
+}
+body div[class*=select__option] {
+  background-color: var(--pf-form-input-background-color);
+  color: var(--pf-select-option-color);
+  cursor: pointer;
+  overflow-wrap: break-word;
+}
+body div[class*=select__option]:hover, body div[class*=select__option].select__option--is-focused, body div[class*=select__option][class*="--is-focused"], body div[class*=select__option]:active {
+  background: var(--pf-select-option-hover-color);
+  color: var(--pf-form-input-color);
+}
+body div[class*=select__option].select__option--is-selected, body div[class*=select__option][class*="--is-selected"] {
+  background: var(--pf-select-option-selected-color);
+  color: var(--pf-select-option-color);
+}
+body div[class*=select__control] {
+  background-color: var(--pf-form-input-background-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
+  color: var(--pf-form-input-color);
+}
+body div[class*=select__single-value] {
+  color: var(--pf-select-option-color);
+}
+
 :root [data-theme=light] {
   --pf-toggle-background-color: var(--pf-form-input-background-color);
   --pf-toggle-circle-color: var(--pf-primary-color);
@@ -1973,7 +2008,7 @@ form {
 }
 
 :root [data-theme=light] {
-  --pf-badge-background-color: var(--pf-primary-color-950);
+  --pf-badge-background-color: var(--pf-white-color);
   --pf-badge-border-color: var(--pf-border-color);
   --pf-badge-font-color: var(--pf-font-color);
   --pf-badge-rounded: var(--pf-rounded);
@@ -2830,6 +2865,22 @@ form {
   color: var(--pf-stepper-legend-step-disabled-text-color);
 }
 
+.cursor--pointer {
+  cursor: pointer;
+}
+
+.cursor--not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor--default {
+  cursor: default;
+}
+
+.cursor--grab {
+  cursor: grab;
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }

package/lib/index.esm.css

@@ -1592,7 +1592,7 @@ form {
 
 .select-wrapper .select__control {
   background-color: var(--pf-form-input-background-color);
-  border: 1px solid var(--pf-form-input-border-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
   color: var(--pf-form-input-color);
   box-shadow: none;
 }
@@ -1601,7 +1601,7 @@ form {
   border-color: var(--pf-form-input-border-color);
 }
 .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
-  border: 1px solid var(--pf-form-input-focus-border-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-focus-border-color);
 }
 .select-wrapper .select__control--is-disabled {
   background-color: var(--pf-form-input-disabled-background-color);
@@ -1633,9 +1633,9 @@ form {
   color: var(--pf-form-input-hover-color);
 }
 .select-wrapper .select__menu {
-  border: 1px solid var(--pf-form-input-border-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
   box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
-  margin: 4px 0px;
+  margin: var(--pf-margin-2) 0;
   background-color: var(--pf-form-input-background-color);
 }
 .select-wrapper .select__menu-notice {
@@ -1673,6 +1673,41 @@ form {
   color: var(--pf-select-option-color);
 }
 
+/* Portal-specific styles that match the main component styling */
+body .select__menu-portal {
+  z-index: 9999 !important;
+}
+
+/* Apply theme styling to portal elements */
+body div[class*=select__menu] {
+  background-color: var(--pf-form-input-background-color);
+}
+body div[class*=select__menu-list] {
+  background-color: var(--pf-form-input-background-color);
+}
+body div[class*=select__option] {
+  background-color: var(--pf-form-input-background-color);
+  color: var(--pf-select-option-color);
+  cursor: pointer;
+  overflow-wrap: break-word;
+}
+body div[class*=select__option]:hover, body div[class*=select__option].select__option--is-focused, body div[class*=select__option][class*="--is-focused"], body div[class*=select__option]:active {
+  background: var(--pf-select-option-hover-color);
+  color: var(--pf-form-input-color);
+}
+body div[class*=select__option].select__option--is-selected, body div[class*=select__option][class*="--is-selected"] {
+  background: var(--pf-select-option-selected-color);
+  color: var(--pf-select-option-color);
+}
+body div[class*=select__control] {
+  background-color: var(--pf-form-input-background-color);
+  border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
+  color: var(--pf-form-input-color);
+}
+body div[class*=select__single-value] {
+  color: var(--pf-select-option-color);
+}
+
 :root [data-theme=light] {
   --pf-toggle-background-color: var(--pf-form-input-background-color);
   --pf-toggle-circle-color: var(--pf-primary-color);
@@ -1973,7 +2008,7 @@ form {
 }
 
 :root [data-theme=light] {
-  --pf-badge-background-color: var(--pf-primary-color-950);
+  --pf-badge-background-color: var(--pf-white-color);
   --pf-badge-border-color: var(--pf-border-color);
   --pf-badge-font-color: var(--pf-font-color);
   --pf-badge-rounded: var(--pf-rounded);
@@ -2830,6 +2865,22 @@ form {
   color: var(--pf-stepper-legend-step-disabled-text-color);
 }
 
+.cursor--pointer {
+  cursor: pointer;
+}
+
+.cursor--not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor--default {
+  cursor: default;
+}
+
+.cursor--grab {
+  cursor: grab;
+}
+
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.60.5",
+  "version": "2.60.7",
   "description": "",
   "author": "",
   "main": "lib/index.js",

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

@@ -1,6 +1,6 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-badge-background-color: var(--pf-primary-color-950);
+  --pf-badge-background-color: var(--pf-white-color);
   --pf-badge-border-color: var(--pf-border-color);
   --pf-badge-font-color: var(--pf-font-color);
   --pf-badge-rounded: var(--pf-rounded);

package/src/components/forms/select/styles/Select.scss

@@ -14,12 +14,11 @@
   --pf-select-option-color: var(--pf-gray-color-100);
   --pf-select-option-hover-color: var(--pf-primary-color);
 }
-
 .select-wrapper {
   .select__ {
     &control {
       background-color: var(--pf-form-input-background-color);
-      border: 1px solid var(--pf-form-input-border-color);
+      border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
       color: var(--pf-form-input-color);
       box-shadow: none;
 
@@ -30,7 +29,7 @@
 
       &:focus,
       &--is-focused {
-        border: 1px solid var(--pf-form-input-focus-border-color);
+        border: var(--pf-border-sm) solid var(--pf-form-input-focus-border-color);
       }
 
       &--is-disabled {
@@ -69,9 +68,9 @@
     }
 
     &menu {
-      border: 1px solid var(--pf-form-input-border-color);
+      border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
       box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
-      margin: 4px 0px;
+      margin: var(--pf-margin-2) 0;
       background-color: var(--pf-form-input-background-color);
     }
 
@@ -121,3 +120,50 @@
     }
   }
 }
+
+/* Portal-specific styles that match the main component styling */
+body .select__menu-portal {
+  z-index: 9999 !important;
+}
+
+/* Apply theme styling to portal elements */
+body {
+  div[class*='select__menu'] {
+    background-color: var(--pf-form-input-background-color);
+  }
+
+  div[class*='select__menu-list'] {
+    background-color: var(--pf-form-input-background-color);
+  }
+
+  div[class*='select__option'] {
+    background-color: var(--pf-form-input-background-color);
+    color: var(--pf-select-option-color);
+    cursor: pointer;
+    overflow-wrap: break-word;
+
+    &:hover,
+    &.select__option--is-focused,
+    &[class*='--is-focused'],
+    &:active {
+      background: var(--pf-select-option-hover-color);
+      color: var(--pf-form-input-color);
+    }
+
+    &.select__option--is-selected,
+    &[class*='--is-selected'] {
+      background: var(--pf-select-option-selected-color);
+      color: var(--pf-select-option-color);
+    }
+  }
+
+  div[class*='select__control'] {
+    background-color: var(--pf-form-input-background-color);
+    border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
+    color: var(--pf-form-input-color);
+  }
+
+  div[class*='select__single-value'] {
+    color: var(--pf-select-option-color);
+  }
+}

package/src/styles/_utilities.scss

@@ -0,0 +1,15 @@
+.cursor--pointer {
+  cursor: pointer;
+}
+
+.cursor--not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor--default {
+  cursor: default;
+}
+
+.cursor--grab {
+  cursor: grab;
+}

package/src/styles/index.scss

@@ -32,6 +32,7 @@
 @import '../components/truncate/styles/Truncate.scss';
 @import '../components/toast/styles/Toast.scss';
 @import '../components/stepper/styles/Stepper.scss';
+@import 'utilities';
 @import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';

package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts

@@ -227,4 +227,10 @@ export const utilityClassesData: UtilityClassData[] = [
 
   // Drop Shadows
   { className: 'dropshadow', css: 'box-shadow: var(--pf-dropshadow);', category: 'Effect' },
+
+  // Cursor Utilities
+  { className: 'cursor--pointer', css: 'cursor: pointer;', category: 'Cursor' },
+  { className: 'cursor--not-allowed', css: 'cursor: not-allowed;', category: 'Cursor' },
+  { className: 'cursor--default', css: 'cursor: default;', category: 'Cursor' },
+  { className: 'cursor--grab', css: 'cursor: grab;', category: 'Cursor' },
 ];