@indico-data/design-system 2.43.1 → 2.45.0

package/src/components/forms/form/styles/Form.scss

@@ -1,11 +1,93 @@
 form {
   width: 100%;
 }
-:root [data-theme='light'],
 :root {
+  --pf-form-input-rounded: var(--pf-rounded);
+}
+
+:root [data-theme='light'] {
   --pf-form-input-border-color: var(--pf-border-color);
+  --pf-form-input-background-color: var(--pf-white-color);
+  --pf-form-input-color: var(--pf-gray-color);
+  --pf-form-input-placeholder-color: var(--pf-gray-color-300);
+  --pf-form-input-help-color: var(--pf-gray-color-400);
+  --pf-form-input-hover-background-color: var(--pf-gray-color-100);
+  --pf-form-input-focus-background-color: var(--pf-gray-color-100);
+  --pf-form-input-focus-border-color: var(--pf-secondary-color-800);
+  --pf-form-input-focus-outline-color: var(--pf-primary-color);
+  --pf-form-input-disabled-background-color: var(--pf-gray-color-100);
+  --pf-form-input-disabled-border-color: var(--pf-gray-color-100);
+  --pf-form-input-disabled-color: var(--pf-gray-color-400);
 }
 
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   --pf-form-input-border-color: var(--pf-border-color);
+  --pf-form-input-background-color: var(--pf-primary-color-700);
+  --pf-form-input-color: var(--pf-gray-color-100);
+  --pf-form-input-placeholder-color: var(--pf-primary-color-50);
+  --pf-form-input-help-color: var(--pf-gray-color-200);
+  --pf-form-input-hover-background-color: var(--pf-primary-color-800);
+  --pf-form-input-focus-background-color: var(--pf-primary-color-800);
+  --pf-form-input-focus-border-color: var(--pf-secondary-color-700);
+  --pf-form-input-focus-outline-color: var(--pf-primary-color);
+  --pf-form-input-disabled-background-color: var(--pf-tertiary-color-450);
+  --pf-form-input-disabled-border-color: var(--pf-tertiary-color-450);
+  --pf-form-input-disabled-color: var(--pf-tertiary-color-950);
+}
+
+// Common input/textarea form element styles
+.input-wrapper,
+.number-input-wrapper,
+.password-input-wrapper,
+.textarea-wrapper {
+  input {
+    height: var(--pf-size-9);
+  }
+  input,
+  textarea {
+    background-color: var(--pf-form-input-background-color);
+    border: 1px solid var(--pf-form-input-border-color);
+    border-radius: var(--pf-form-input-rounded);
+    color: var(--pf-form-input-color);
+
+    width: 100%;
+    box-sizing: border-box;
+
+    &::placeholder {
+      color: var(--pf-form-input-placeholder-color);
+    }
+
+    &:hover {
+      background-color: var(--pf-form-input-hover-background-color);
+    }
+    &:focus {
+      border-color: var(--pf-form-input-focus-border-color);
+      background-color: var(--pf-form-input-focus-background-color);
+    }
+    &:focus-visible {
+      outline: 1px solid var(--pf-form-input-focus-outline-color);
+    }
+    &:disabled {
+      background-color: var(--pf-form-input-disabled-background-color);
+      border-color: var(--pf-form-input-disabled-border-color);
+      color: var(--pf-form-input-disabled-color);
+    }
+
+    &.error {
+      border-color: var(--pf-error-color);
+    }
+
+    &.success {
+      border-color: var(--pf-success-color);
+    }
+
+    &.warning {
+      border-color: var(--pf-warning-color);
+    }
+
+    &.info {
+      border-color: var(--pf-info-color);
+    }
+  }
 }

package/src/components/forms/input/Input.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
-import { IconName } from '@/types';
+import { Icon } from '../../../components/icons/Icon';
+import { IconName } from '../../../components/icons/types';
 import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 

package/src/components/forms/input/styles/Input.scss

@@ -1,70 +1,6 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  // Typography
-  --pf-input-background-color: var(--pf-white-color);
-  --pf-input-border-color: var(--pf-form-input-border-color);
-  --pf-input-text-color: var(--pf-gray-color);
-  --pf-input-placeholder-text-color: var(--pf-gray-color-300);
-  --pf-input-help-text-color: var(--pf-gray-color-400);
-  --pf-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-input-disabled-color: var(--pf-gray-color-400);
-
-  // input Radius
-  --pf-input-rounded: var(--pf-rounded);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-input-background-color: var(--pf-primary-color);
-  --pf-input-border-color: var(--pf-form-input-border-color);
-  --pf-input-text-color: var(--pf-gray-color-100);
-  --pf-input-placeholder-text-color: var(--pf-gray-color-600);
-  --pf-input-help-text-color: var(--pf-gray-color-200);
-  --pf-input-disabled-background-color: var(--pf-primary-color-200);
-  --pf-input-disabled-border-color: var(--pf-gray-color-300);
-  --pf-input-disabled-color: var(--pf-gray-color-400);
-}
-
 .input {
-  background-color: var(--pf-input-background-color);
-  border: 1px solid var(--pf-input-border-color);
-  border-radius: var(--pf-input-rounded);
-  color: var(--pf-input-text-color);
   padding: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  height: 36px;
-  &::placeholder {
-    color: var(--pf-input-placeholder-text-color);
-  }
-
-  &:focus {
-    border-color: var(--pf-primary-color);
-  }
 
-  &.error {
-    border-color: var(--pf-error-color);
-  }
-
-  &.success {
-    border-color: var(--pf-success-color);
-  }
-
-  &.warning {
-    border-color: var(--pf-warning-color);
-  }
-
-  &.info {
-    border-color: var(--pf-info-color);
-  }
-
-  &:disabled {
-    background-color: var(--pf-input-disabled-background-color);
-    border-color: var(--pf-input-disabled-border-color);
-    color: var(--pf-input-disabled-color);
-  }
   &--has-icon {
     padding-left: var(--pf-padding-7);
   }
@@ -75,7 +11,7 @@
   .help-text {
     margin-top: var(--pf-margin-2);
     margin-bottom: var(--pf-margin-2);
-    color: var(--pf-input-help-text-color);
+    color: var(--pf-form-input-help-color);
     font-size: var(--pf-font-size-subtitle2);
   }
   .input-wrapper {
@@ -84,13 +20,13 @@
       position: absolute;
       top: 10px;
       left: var(--pf-margin-2);
-      color: var(--pf-input-text-color);
+      color: var(--pf-form-input-color);
     }
     .clearable-icon {
       position: absolute;
       top: var(--pf-margin-3);
       right: var(--pf-margin-2);
-      color: var(--pf-input-text-color);
+      color: var(--pf-form-input-color);
       cursor: pointer;
     }
   }

package/src/components/forms/numberInput/NumberInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components/icons/Icon';
 import { LabelProps, withLabel } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 import { BaseInputProps } from '../input/Input';

package/src/components/forms/numberInput/styles/NumberInput.scss

@@ -1,42 +1,9 @@
 // Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  // Typography
-  --pf-number-input-background-color: var(--pf-white-color);
-  --pf-number-input-border-color: var(--pf-form-input-border-color);
-  --pf-number-input-text-color: var(--pf-gray-color);
-  --pf-number-input-placeholder-text-color: var(--pf-gray-color-300);
-  --pf-number-input-help-text-color: var(--pf-gray-color-400);
-  --pf-number-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-number-input-disabled-color: var(--pf-gray-color-400);
+:root {
   --pf-number-input-padding: 10px;
-
-  // Input Radius
-  --pf-number-input-rounded: var(--pf-rounded);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-number-input-background-color: var(--pf-primary-color);
-  --pf-number-input-border-color: var(--pf-form-input-border-color);
-  --pf-number-input-text-color: var(--pf-gray-color-100);
-  --pf-number-input-placeholder-text-color: var(--pf-gray-color-600);
-  --pf-number-input-help-text-color: var(--pf-gray-color-200);
-  --pf-number-input-disabled-background-color: var(--pf-primary-color-200);
-  --pf-number-input-disabled-border-color: var(--pf-gray-color-300);
-  --pf-number-input-disabled-color: var(--pf-gray-color-400);
 }
 
 .number-input {
-  background-color: var(--pf-number-input-background-color);
-  border: var(--pf-border-thin) solid var(--pf-input-border-color);
-  border-radius: var(--pf-number-input-rounded);
-  color: var(--pf-number-input-text-color);
-  width: 100%;
-  box-sizing: border-box;
-  height: var(--pf-size-9);
-
   padding-right: var(--pf-number-input-padding);
   &--is-clearable {
     padding-right: var(--pf-padding-7);
@@ -46,43 +13,13 @@
   &--has-icon {
     padding-left: var(--pf-padding-7);
   }
-
-  &::placeholder {
-    color: var(--pf-number-input-placeholder-text-color);
-  }
-
-  &:focus {
-    border-color: var(--pf-primary-color);
-  }
-
-  &.error {
-    border-color: var(--pf-error-color);
-  }
-
-  &.success {
-    border-color: var(--pf-success-color);
-  }
-
-  &.warning {
-    border-color: var(--pf-warning-color);
-  }
-
-  &.info {
-    border-color: var(--pf-info-color);
-  }
-
-  &:disabled {
-    background-color: var(--pf-number-input-disabled-background-color);
-    border-color: var(--pf-number-input-disabled-border-color);
-    color: var(--pf-number-input-disabled-color);
-  }
 }
 
 .form-control {
   .help-text {
     margin-top: var(--pf-margin-2);
     margin-bottom: var(--pf-margin-2);
-    color: var(--pf-number-input-help-text-color);
+    color: var(--pf-form-input-help-color);
     font-size: var(--pf-font-size-subtitle2);
   }
   .number-input-wrapper {
@@ -91,14 +28,14 @@
       position: absolute;
       top: 10px;
       left: var(--pf-margin-2);
-      color: var(--pf-number-input-text-color);
+      color: var(--pf-form-input-color);
     }
 
     .clearable-icon {
       position: absolute;
       top: var(--pf-margin-3);
       right: var(--pf-margin-2);
-      color: var(--pf-number-input-text-color);
+      color: var(--pf-form-input-color);
       cursor: pointer;
     }
   }

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components/icons/Icon';
 import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 import classNames from 'classnames';

package/src/components/forms/passwordInput/styles/PasswordInput.scss

@@ -1,70 +1,6 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  // Typography
-  --pf-password-input-background-color: var(--pf-white-color);
-  --pf-password-input-border-color: var(--pf-form-input-border-color);
-  --pf-password-input-text-color: var(--pf-gray-color);
-  --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
-  --pf-password-input-help-text-color: var(--pf-gray-color-400);
-  --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-password-input-disabled-color: var(--pf-gray-color-400);
-
-  // input Radius
-  --pf-password-input-rounded: var(--pf-rounded);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-password-input-background-color: var(--pf-primary-color);
-  --pf-password-input-border-color: var(--pf-form-input-border-color);
-  --pf-password-input-text-color: var(--pf-gray-color-100);
-  --pf-password-input-placeholder-text-color: var(--pf-gray-color);
-  --pf-password-input-help-text-color: var(--pf-gray-color-200);
-  --pf-password-input-disabled-background-color: var(--pf-primary-color-200);
-  --pf-password-input-disabled-border-color: var(--pf-gray-color-300);
-  --pf-password-input-disabled-color: var(--pf-gray-color-400);
-}
-
 .password-input {
-  background-color: var(--pf-password-input-background-color);
-  border: 1px solid var(--pf-password-input-border-color);
-  border-radius: var(--pf-password-input-rounded);
-  color: var(--pf-password-input-text-color);
   padding: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  height: 36px;
-  &::placeholder {
-    color: var(--pf-password-input-placeholder-text-color);
-  }
-
-  &:focus {
-    border-color: var(--pf-primary-color);
-  }
 
-  &.error {
-    border-color: var(--pf-error-color);
-  }
-
-  &.success {
-    border-color: var(--pf-success-color);
-  }
-
-  &.warning {
-    border-color: var(--pf-warning-color);
-  }
-
-  &.info {
-    border-color: var(--pf-info-color);
-  }
-
-  &:disabled {
-    background-color: var(--pf-password-input-disabled-background-color);
-    border-color: var(--pf-password-input-disabled-border-color);
-    color: var(--pf-password-input-disabled-color);
-  }
   &--has-icon {
     padding-left: var(--pf-padding-7);
   }
@@ -82,7 +18,7 @@
   .help-text {
     margin-top: var(--pf-margin-2);
     margin-bottom: var(--pf-margin-2);
-    color: var(--pf-password-input-help-text-color);
+    color: var(--pf-form-input-help-color);
     font-size: var(--pf-font-size-subtitle2);
   }
   .password-input-wrapper {
@@ -91,13 +27,13 @@
       position: absolute;
       top: 10px;
       left: var(--pf-margin-2);
-      color: var(--pf-password-input-text-color);
+      color: var(--pf-form-input-color);
     }
     .toggle-show-password-icon {
       position: absolute;
       top: var(--pf-margin-3);
       right: var(--pf-margin-2);
-      color: var(--pf-password-input-text-color);
+      color: var(--pf-form-input-color);
       cursor: pointer;
     }
   }

package/src/components/forms/radio/styles/Radio.scss

@@ -1,18 +1,14 @@
 // Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-radio-background-color: var(--pf-white-color);
+
+:root [data-theme='light'] {
   --pf-radio-check-color: var(--pf-primary-color);
-  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-400);
 }
 
 // Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-radio-background-color: var(--pf-primary-color-600);
+:root [data-theme='dark'],
+:root {
   --pf-radio-check-color: var(--pf-white-color);
-  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-300);
 }
 
@@ -51,9 +47,9 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid var(--pf-radio-border-color);
+    border: 1px solid var(--pf-form-input-border-color);
     border-radius: 100%;
-    background: var(--pf-radio-background-color);
+    background: var(--pf-form-input-background-color);
   }
   [type='radio']:checked + label:after,
   [type='radio']:not(:checked) + label:after {

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

@@ -1,60 +1,46 @@
-// Common Variables
-:root,
+// Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-select-background-color: var(--pf-white-color);
-  --pf-select-border-color: var(--pf-form-input-border-color);
-  --pf-select-text-color: var(--pf-gray-color);
   --pf-select-indicator-color: var(--pf-gray-color);
-  --pf-select-placeholder-text-color: var(--pf-gray-color);
-  --pf-select-hover-color: var(--pf-gray-color);
   --pf-select-option-selected-color: var(--pf-primary-color-100);
-  --pf-select-option-text-color: var(--pf-gray-color);
+  --pf-select-option-color: var(--pf-gray-color);
   --pf-select-option-hover-color: var(--pf-primary-color-100);
-
-  // Disabled
-  --pf-select-disabled-background-color: var(--pf-gray-color-100);
-  --pf-select-disabled-color: var(--pf-gray-color-400);
 }
 
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-select-background-color: var(--pf-primary-color);
-  --pf-select-border-color: var(--pf-form-input-border-color);
-  --pf-select-text-color: var(--pf-gray-color-100);
+// Dark  Theme and Default Variables
+:root [data-theme='dark'],
+:root {
   --pf-select-indicator-color: var(--pf-gray-color-100);
-  --pf-select-placeholder-text-color: var(--pf-gray-color-100);
-  --pf-select-hover-color: var(--pf-gray-color-100);
-  --pf-select-option-selected-color: var(--pf-primary-color-900);
-  --pf-select-option-text-color: var(--pf-gray-color-100);
-  --pf-select-option-hover-color: var(--pf-primary-color-300);
-
-  // Disabled
-  --pf-select-disabled-background-color: var(--pf-primary-color-200);
-  --pf-select-disabled-color: var(--pf-gray-color-400);
+  --pf-select-option-selected-color: var(--pf-tertiary-color-700);
+  --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-select-background-color);
-      border: 1px solid var(--pf-select-border-color);
-      color: var(--pf-select-text-color);
+      background-color: var(--pf-form-input-background-color);
+      border: 1px solid var(--pf-form-input-border-color);
+      color: var(--pf-form-input-color);
       box-shadow: none;
 
-      &:hover,
+      &:hover:not(:focus) {
+        background-color: var(--pf-form-input-hover-background-color);
+        border-color: var(--pf-form-input-border-color);
+      }
+
       &:focus,
       &--is-focused {
-        border: 1px solid var(--pf-select-hover-color);
+        border: 1px solid var(--pf-form-input-focus-border-color);
       }
 
       &--is-disabled {
-        background-color: var(--pf-select-disabled-background-color);
-        color: var(--pf-select-disabled-color);
+        background-color: var(--pf-form-input-disabled-background-color);
+        color: var(--pf-form-input-disabled-color);
       }
     }
 
     &placeholder {
-      color: var(--pf-select-placeholder-text-color);
+      color: var(--pf-form-input-placeholder-color);
     }
 
     &value-container {
@@ -62,7 +48,7 @@
     }
 
     &input-container {
-      color: var(--pf-select-text-color);
+      color: var(--pf-form-input-color);
     }
 
     &multi-value {
@@ -70,27 +56,27 @@
       border-radius: var(--pf-rounded);
       &__label {
         padding-top: 5px; // TODO -- clean up padding on this component overall
-        color: var(--pf-select-option-text-color);
+        color: var(--pf-select-option-color);
       }
       &__remove {
-        color: var(--pf-select-option-text-color);
+        color: var(--pf-select-option-color);
         cursor: pointer;
         &:hover {
           background-color: var(--pf-select-option-hover-color);
-          color: var(--pf-select-hover-color);
+          color: var(--pf-form-input-hover-color);
         }
       }
     }
 
     &menu {
-      border: 1px solid var(--pf-select-border-color);
+      border: 1px solid var(--pf-form-input-border-color);
       box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
       margin: 4px 0px;
-      background-color: var(--pf-select-background-color);
+      background-color: var(--pf-form-input-background-color);
     }
 
     &menu-notice {
-      color: var(--pf-select-text-color);
+      color: var(--pf-form-input-color);
     }
 
     &indicator-separator {
@@ -103,7 +89,7 @@
 
       &:hover,
       &:focus {
-        color: var(--pf-select-hover-color);
+        color: var(--pf-form-input-color);
       }
     }
 
@@ -119,7 +105,7 @@
     &option {
       cursor: pointer;
       overflow-wrap: break-word;
-      color: var(--pf-select-option-text-color);
+      color: var(--pf-select-option-color);
       &--is-focused,
       &:active {
         background: var(--pf-select-option-hover-color);
@@ -131,7 +117,7 @@
     }
 
     &single-value {
-      color: var(--pf-select-option-text-color);
+      color: var(--pf-select-option-color);
     }
   }
 }

package/src/components/forms/textarea/styles/Textarea.scss

@@ -1,48 +1,5 @@
-// Common Variables
-:root,
-:root [data-theme='light'],
-:root [data-theme='dark'] {
-  // Typography
-  --pf-textarea-background-color: var(--pf-white-color);
-  --pf-textarea-text-color: var(--pf-gray-color);
-  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
-  --pf-textarea-help-text-color: var(--pf-gray-color-400);
-  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
-  --pf-textarea-border-color: var(--pf-form-input-border-color);
-  --pf-textarea-disabled-color: var(--pf-gray-color-400);
-
-  // textarea Radius
-  --pf-textarea-rounded: var(--pf-rounded);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'] {
-  --pf-textarea-background-color: var(--pf-primary-color);
-  --pf-textarea-border-color: var(--pf-form-input-border-color);
-  --pf-textarea-text-color: var(--pf-gray-color-100);
-  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
-  --pf-textarea-help-text-color: var(--pf-gray-color-200);
-  --pf-textarea-disabled-background-color: var(--pf-primary-color-200);
-  --pf-textarea-disabled-border-color: var(--pf-gray-color-300);
-  --pf-textarea-disabled-color: var(--pf-gray-color-400);
-}
-
 .textarea {
-  background-color: var(--pf-textarea-background-color);
-  border: 1px solid var(--pf-textarea-border-color);
-  border-radius: var(--pf-textarea-rounded);
-  color: var(--pf-textarea-text-color);
   padding: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  &::placeholder {
-    color: var(--pf-textarea-placeholder-text-color);
-  }
-
-  &:focus {
-    border-color: var(--pf-primary-color);
-  }
-
   &.error {
     border-color: var(--pf-error-color);
   }
@@ -59,11 +16,6 @@
     border-color: var(--pf-info-color);
   }
 
-  &:disabled {
-    background-color: var(--pf-textarea-disabled-background-color);
-    border-color: var(--pf-textarea-disabled-border-color);
-    color: var(--pf-textarea-disabled-color);
-  }
   &--has-icon {
     padding-left: var(--pf-padding-7);
   }
@@ -81,7 +33,7 @@
   .help-text {
     margin-top: var(--pf-margin-2);
     margin-bottom: var(--pf-margin-2);
-    color: var(--pf-textarea-help-text-color);
+    color: var(--pf-form-input-help-color);
     font-size: var(--pf-font-size-subtitle2);
   }
   .form-label {