@indico-data/design-system 3.4.0 → 3.6.0

package/package.json

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

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

@@ -1,41 +1,41 @@
 .badge {
-  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-page-background-color);
+  border: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+  border-radius: var(--pf-border-radius-md);
+  padding: var(--pf-spacing-lg);
+  background: var(--pf-semantic-page-background);
   box-sizing: border-box;
   width: fit-content;
-  color: var(--pf-font-color);
+  color: var(--pf-semantic-font-regular);
   &--xs {
-    padding: var(--pf-padding-1);
+    padding: var(--pf-spacing-xxs);
     p {
       font-size: var(--pf-font-size-overline);
     }
   }
 
   &--sm {
-    padding: var(--pf-padding-2);
+    padding: var(--pf-spacing-sm);
     p {
       font-size: var(--pf-font-size-body2);
     }
   }
 
   &--md {
-    padding: var(--pf-padding-3);
+    padding: var(--pf-spacing-lg);
     p {
       font-size: var(--pf-font-size-body);
     }
   }
 
   &--lg {
-    padding: var(--pf-padding-4);
+    padding: var(--pf-spacing-2xl);
     p {
       font-size: var(--pf-font-size-h2);
     }
   }
 
   &--xl {
-    padding: var(--pf-padding-5);
+    padding: var(--pf-spacing-3xl);
     p {
       font-size: var(--pf-font-size-h1);
     }

package/src/components/button/styles/Button.scss

@@ -21,31 +21,31 @@
 // Button Sizes
 .btn--xs {
   line-height: var(--pf-button-line-height-xs);
-  padding: var(--pf-padding-1) var(--pf-padding-3);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
   font-size: var(--pf-button-font-size-xs);
 }
 
 .btn--sm {
   line-height: var(--pf-button-line-height-sm);
-  padding: var(--pf-padding-1) var(--pf-padding-3);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
   font-size: var(--pf-button-font-size-sm);
 }
 
 .btn--md {
   line-height: var(--pf-button-line-height-md);
-  padding: var(--pf-padding-2) var(--pf-padding-3);
+  padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
   font-size: var(--pf-button-font-size-md);
 }
 
 .btn--lg {
   line-height: var(--pf-button-line-height-lg);
-  padding: var(--pf-padding-2) var(--pf-padding-4);
+  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
   font-size: var(--pf-button-font-size-lg);
 }
 
 .btn--icon-only {
-  padding-left: var(--pf-padding-2);
-  padding-right: var(--pf-padding-2);
+  padding-left: var(--pf-spacing-sm);
+  padding-right: var(--pf-spacing-sm);
 }
 
 // Variants
@@ -83,7 +83,7 @@
 }
 
 .btn--action {
-  padding: var(--pf-padding-2);
+  padding: var(--pf-spacing-sm);
   background-color: transparent;
   border-color: var(--pf-button-action-border-color);
   color: var(--pf-button-action-color);

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

@@ -14,7 +14,7 @@
   --pf-button-line-height-lg: var(--pf-line-height-lg);
 
   // Border radii
-  --pf-button-border-radius: var(--pf-rounded-lg);
+  --pf-button-border-radius: var(--pf-border-radius-md);
   --pf-button-pill-border-radius: 100px;
 
   // Focus box shadows
@@ -46,8 +46,8 @@
   --pf-button-outline-disabled-color: var(--pf-gray-color-250);
 
   // link
-  --pf-button-link-color: var(--pf-link-color);
-  --pf-button-link-hover-color: var(--pf-link-hover-color);
+  --pf-button-link-color: var(--pf-semantic-font-link);
+  --pf-button-link-hover-color: var(--pf-semantic-background-brand-hover);
   --pf-button-link-disabled-color: var(--pf-primary-color-300);
 
   // action
@@ -98,8 +98,8 @@
 
   // link colors
   --pf-button-link-color: var(--pf-secondary-color-450);
-  --pf-button-link-hover-color: var(--pf-secondary-color-400);
-  --pf-button-link-disabled-color: var(--pf-tertiary-color-70);
+  --pf-button-link-hover-color: var(--pf-semantic-background-brand-hover);
+  --pf-button-link-disabled-color: var(--pf-tertiary-color-700);
 
   // - TODO - REMOVE?
   // action colors

package/src/components/card/styles/Card.scss

@@ -1,30 +1,28 @@
-// Common Variables
-
 .card {
-  border-radius: var(--pf-rounded-lg);
-  padding: var(--pf-padding-3);
-  background: var(--pf-page-background-color);
+  border-radius: var(--pf-border-radius-md);
+  padding: var(--pf-spacing-lg);
+  background: var(--pf-semantic-page-background);
   box-sizing: border-box;
-  color: var(--pf-font-color);
-  border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
+  color: var(--pf-semantic-font-regular);
+  border: thin solid var(--pf-semantic-border-secondary);
   box-shadow: var(--pf-shadow-surface);
 }
 
 .card__header {
-  margin-bottom: var(--pf-margin-2);
-  color: var(--pf-font-color-soft);
+  margin-bottom: var(--pf-spacing-sm);
+  color: var(--pf-semantic-font-soft);
   p {
-    color: var(--pf-font-color);
+    color: var(--pf-semantic-font-regular);
     font-size: var(--pf-font-size-subtitle2);
   }
 }
 
 .card__content {
   hr {
-    border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
+    border: thin solid var(--pf-semantic-border-secondary);
     border-bottom: none;
-    margin-bottom: var(--pf-margin-3);
-    margin-top: var(--pf-margin-3);
+    margin-bottom: var(--pf-spacing-lg);
+    margin-top: var(--pf-spacing-lg);
   }
 }
 

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

@@ -3,8 +3,8 @@
 }
 
 .floatui-content {
-  border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
-  border-radius: var(--pf-rounded);
+  border: thin solid var(--pf-semantic-border-secondary);
+  border-radius: var(--pf-border-radius-xs);
   box-shadow: var(--pf-shadow-floating);
-  background: var(--pf-background-color-secondary);
+  background: var(--pf-semantic-background-secondary);
 }

package/src/components/forms/checkbox/styles/Checkbox.scss

@@ -1,23 +1,11 @@
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-checkbox-check-color: var(--pf-primary-color);
-  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
-}
-
-// Dark Theme and Default Variables
-:root [data-theme='dark'],
-:root {
-  --pf-checkbox-check-color: var(--pf-white-color);
-  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
-}
 .checkbox-wrapper {
   display: flex;
-  margin-bottom: var(--pf-margin-2);
+  margin-bottom: var(--pf-spacing-sm);
   align-items: center;
 }
 .checkbox-input {
   margin: 0;
-  margin-right: var(--pf-margin-2);
+  margin-right: var(--pf-spacing-sm);
   cursor: pointer;
 }
 .checkbox-input-label {
@@ -31,7 +19,7 @@
 .checkbox-input:checked + label,
 .checkbox-input:not(:checked) + label {
   position: relative;
-  padding-left: var(--pf-padding-7);
+  padding-left: var(--pf-spacing-5xl);
   cursor: pointer;
   line-height: 20px;
   display: inline-block;
@@ -44,20 +32,20 @@
   top: 0;
   width: 18px;
   height: 18px;
-  border: 1px solid var(--pf-form-input-border-color);
-  border-radius: var(--pf-rounded);
-  background: var(--pf-form-input-background-color);
+  border: 1px solid var(--pf-semantic-border-primary);
+  border-radius: var(--pf-border-radius-xs);
+  background: var(--pf-semantic-background-secondary);
 }
 .checkbox-input:checked + label:after,
 .checkbox-input:not(:checked) + label:after {
   content: '';
   width: 12px;
   height: 12px;
-  background: var(--pf-checkbox-check-color);
+  background: var(--pf-semantic-background-inverted);
   position: absolute;
   top: 4px;
   left: 4px;
-  border-radius: var(--pf-rounded);
+  border-radius: var(--pf-border-radius-xs);
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
@@ -77,14 +65,14 @@
 }
 
 .checkbox-input:disabled + label {
-  color: var(--pf-checkbox-disabled-color);
+  color: var(--pf-semantic-font-disabled);
   opacity: 0.5;
 }
 
 .checkbox-input:disabled + label:before {
-  border-color: var(--pf-checkbox-disabled-color);
+  border-color: var(--pf-semantic-font-disabled);
 }
 
 .checkbox-input:disabled + label:after {
-  background: var(--pf-form-input-disabled-background-color);
+  background: var(--pf-semantic-page-background);
 }

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

@@ -1,49 +1,49 @@
 :root [data-theme='light'] {
   .rdp-root {
-    --rdp-accent-color: var(--pf-link-color);
+    --rdp-accent-color: var(--pf-semantic-font-link);
     --rdp-font-family: var(--pf-font-family-base);
 
     // range
-    --rdp-range_middle-background-color: var(--pf-page-background-color);
+    --rdp-range_middle-background-color: var(--pf-semantic-page-background);
   }
 }
 
 :root [data-theme='dark'],
 :root {
   .rdp-root {
-    --rdp-accent-color: var(--pf-link-color);
+    --rdp-accent-color: var(--pf-semantic-font-link);
     --rdp-font-family: var(--pf-font-family-base);
 
     // range
-    --rdp-range_middle-background-color: var(--pf-page-background-color);
+    --rdp-range_middle-background-color: var(--pf-semantic-page-background);
   }
 }
 
 // Navigation
 
 .rdp-chevron {
-  margin-left: var(--pf-margin-1);
+  margin-left: var(--pf-spacing-xxs);
 }
 
 // Calendar
 
 .rdp-months {
-  color: var(--pf-font-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);
+  color: var(--pf-semantic-font-regular);
+  background-color: var(--pf-semantic-background-secondary);
+  padding: var(--pf-spacing-lg);
+  border-radius: var(--pf-border-radius-xs);
+  border: solid thin var(--pf-semantic-border-primary);
   .rdp-nav {
-    margin-top: var(--pf-margin-3);
-    margin-right: var(--pf-margin-3);
+    margin-top: var(--pf-spacing-lg);
+    margin-right: var(--pf-spacing-lg);
   }
   .rdp-month_caption {
-    padding-left: var(--pf-margin-3);
+    padding-left: var(--pf-spacing-lg);
   }
 }
 
 .rdp-week {
-  margin-bottom: var(--pf-margin-4);
+  margin-bottom: var(--pf-spacing-2xl);
 }
 
 .rdp-day {
@@ -53,22 +53,22 @@
 
   &.rdp-today {
     .rdp-day_button {
-      background-color: var(--pf-background-color-highlight);
-      color: var(--pf-font-color-inverted);
+      background-color: var(--pf-semantic-background-highlight);
+      color: var(--pf-semantic-font-inverted);
       border: none;
     }
   }
 
   &.rdp-selected {
     .rdp-day_button {
-      background-color: var(--pf-background-brand-solid);
+      background-color: var(--pf-semantic-background-brand-solid);
       border: none;
     }
   }
 
   &.rdp-range_middle {
     .rdp-day_button {
-      color: var(--pf-font-color);
+      color: var(--pf-semantic-font-regular);
       background-color: transparent;
     }
   }
@@ -77,27 +77,27 @@
 // Theme-specific selected date font color
 :root [data-theme='light'] {
   .rdp-day.rdp-selected .rdp-day_button {
-    color: var(--pf-font-color-inverted);
+    color: var(--pf-semantic-font-inverted);
   }
 }
 
 :root [data-theme='dark'],
 :root {
   .rdp-day.rdp-selected .rdp-day_button {
-    color: var(--pf-font-color);
+    color: var(--pf-semantic-font-regular);
   }
 }
 
 .time-picker-wrapper {
-  margin-bottom: var(--pf-margin-3);
+  margin-bottom: var(--pf-spacing-lg);
   width: 348px;
 }
 
 .time-validation-error {
-  background-color: var(--pf-tooltip-background-color);
-  color: var(--pf-tooltip-font-color);
-  padding: var(--pf-padding-2);
-  border-radius: var(--pf-rounded);
+  background-color: var(--pf-semantic-background-inverted);
+  color: var(--pf-semantic-font-inverted);
+  padding: var(--pf-spacing-sm);
+  border-radius: var(--pf-border-radius-xs);
   width: 200px;
   box-shadow: var(--pf-shadow-elevated);
   font-size: var(--pf-font-size-overline);

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

@@ -1,40 +1,6 @@
 form {
   width: 100%;
 }
-:root {
-  --pf-form-input-rounded: var(--pf-rounded);
-}
-
-:root [data-theme='light'] {
-  --pf-form-input-border-color: var(--pf-border-color-primary);
-  --pf-form-input-background-color: var(--pf-background-color-secondary);
-  --pf-form-input-color: var(--pf-font-color);
-  --pf-form-input-placeholder-color: var(--pf-font-color-placeholder);
-  --pf-form-input-help-color: var(--pf-font-color-mute);
-  --pf-form-input-hover-border-color: var(--pf-border-hover-color);
-  --pf-form-input-focus-background-color: var(--pf-background-color-secondary);
-  --pf-form-input-focus-border-color: var(--pf-border-color-accent);
-  --pf-form-input-focus-outline-color: var(--pf-border-color-accent);
-  --pf-form-input-disabled-background-color: var(--pf-page-background-color);
-  --pf-form-input-disabled-border-color: var(--pf-border-color-primary);
-  --pf-form-input-disabled-color: var(--pf-font-color-disabled);
-}
-
-:root [data-theme='dark'],
-:root {
-  --pf-form-input-border-color: var(--pf-border-color-primary);
-  --pf-form-input-background-color: var(--pf-background-color-secondary);
-  --pf-form-input-color: var(--pf-font-color);
-  --pf-form-input-placeholder-color: var(--pf-font-color-placeholder);
-  --pf-form-input-help-color: var(--pf-font-color-mute);
-  --pf-form-input-hover-border-color: var(--pf-border-hover-color);
-  --pf-form-input-focus-background-color: var(--pf-background-color-secondary);
-  --pf-form-input-focus-border-color: var(--pf-border-color-accent);
-  --pf-form-input-focus-outline-color: var(--pf-border-color-accent);
-  --pf-form-input-disabled-background-color: var(--pf-page-background-color);
-  --pf-form-input-disabled-border-color: var(--pf-border-color-primary);
-  --pf-form-input-disabled-color: var(--pf-font-color-disabled);
-}
 
 // Common input/textarea form element styles
 .time-input-wrapper,
@@ -43,62 +9,62 @@ form {
 .password-input-wrapper,
 .textarea-wrapper {
   input {
-    height: var(--pf-size-9);
+    height: var(--pf-spacing-7xl);
   }
   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);
+    background-color: var(--pf-semantic-background-secondary);
+    border: 1px solid var(--pf-semantic-border-primary);
+    border-radius: var(--pf-border-radius-xs);
+    color: var(--pf-semantic-font-regular);
 
     width: 100%;
     box-sizing: border-box;
 
     &::placeholder {
-      color: var(--pf-form-input-placeholder-color);
+      color: var(--pf-semantic-font-placeholder);
     }
 
     &:hover {
-      border-color: var(--pf-form-input-hover-border-color);
+      border-color: var(--pf-semantic-border-hover);
     }
     &:focus {
-      border-color: var(--pf-form-input-focus-border-color);
-      background-color: var(--pf-form-input-focus-background-color);
+      border-color: var(--pf-semantic-border-accent);
+      background-color: var(--pf-semantic-background-secondary);
     }
     &:focus-visible {
-      outline: 1px solid var(--pf-form-input-focus-outline-color);
+      outline: 1px solid var(--pf-semantic-border-accent);
     }
     &: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);
+      background-color: var(--pf-semantic-page-background);
+      border-color: var(--pf-semantic-border-primary);
+      color: var(--pf-semantic-font-disabled);
     }
 
     &.error {
-      border-color: var(--pf-error-color);
+      border-color: var(--pf-semantic-utility-error-default);
     }
 
     &.success {
-      border-color: var(--pf-success-color);
+      border-color: var(--pf-semantic-utility-success-default);
     }
 
     &.warning {
-      border-color: var(--pf-warning-color);
+      border-color: var(--pf-semantic-utility-warning-default);
     }
 
     &.info {
-      border-color: var(--pf-info-color);
+      border-color: var(--pf-semantic-utility-info-default);
     }
   }
 }
 
 .form {
   .form-control {
-    margin-bottom: var(--pf-margin-3);
+    margin-bottom: var(--pf-spacing-lg);
   }
 }
 .form-label {
-  margin-bottom: var(--pf-margin-2);
+  margin-bottom: var(--pf-spacing-sm);
   font-size: var(--pf-font-size-form-label);
 }

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

@@ -2,14 +2,14 @@
   padding: 10px;
 
   &--has-icon {
-    padding-left: var(--pf-padding-7);
+    padding-left: var(--pf-spacing-5xl);
   }
 }
 
 .help-text {
-  margin-top: var(--pf-margin-2);
-  margin-bottom: var(--pf-margin-2);
-  color: var(--pf-form-input-help-color);
+  margin-top: var(--pf-spacing-sm);
+  margin-bottom: var(--pf-spacing-sm);
+  color: var(--pf-semantic-font-mute);
   font-size: var(--pf-font-size-subtitle2);
 }
 .input-wrapper {
@@ -17,17 +17,17 @@
   .embedded-icon {
     position: absolute;
     top: 10px;
-    left: var(--pf-margin-2);
-    color: var(--pf-form-input-color);
+    left: var(--pf-spacing-sm);
+    color: var(--pf-semantic-font-regular);
   }
   .clearable-icon {
     position: absolute;
-    top: var(--pf-margin-3);
-    right: var(--pf-margin-2);
-    color: var(--pf-form-input-color);
+    top: var(--pf-spacing-lg);
+    right: var(--pf-spacing-sm);
+    color: var(--pf-semantic-font-regular);
     cursor: pointer;
   }
   .is-clearable {
-    padding-right: var(--pf-padding-6);
+    padding-right: var(--pf-spacing-4xl);
   }
 }

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

@@ -1,24 +1,19 @@
-// Common Variables
-:root {
-  --pf-number-input-padding: 10px;
-}
-
 .number-input {
-  padding-right: var(--pf-number-input-padding);
+  padding-right: var(--pf-spacing-md);
   &--is-clearable {
-    padding-right: var(--pf-padding-7);
+    padding-right: var(--pf-spacing-5xl);
   }
 
-  padding-left: var(--pf-number-input-padding);
+  padding-left: var(--pf-spacing-md);
   &--has-icon {
-    padding-left: var(--pf-padding-7);
+    padding-left: var(--pf-spacing-5xl);
   }
 }
 
 .help-text {
-  margin-top: var(--pf-margin-2);
-  margin-bottom: var(--pf-margin-2);
-  color: var(--pf-form-input-help-color);
+  margin-top: var(--pf-spacing-sm);
+  margin-bottom: var(--pf-spacing-sm);
+  color: var(--pf-semantic-font-mute);
   font-size: var(--pf-font-size-subtitle2);
 }
 .number-input-wrapper {
@@ -26,18 +21,18 @@
   .embedded-icon {
     position: absolute;
     top: 10px;
-    left: var(--pf-margin-2);
-    color: var(--pf-form-input-color);
+    left: var(--pf-spacing-sm);
+    color: var(--pf-semantic-font-regular);
   }
 
   .clearable-icon {
     position: absolute;
-    top: var(--pf-margin-3);
-    right: var(--pf-margin-2);
-    color: var(--pf-form-input-color);
+    top: var(--pf-spacing-lg);
+    right: var(--pf-spacing-sm);
+    color: var(--pf-semantic-font-regular);
     cursor: pointer;
   }
 }
 .form-label {
-  margin-bottom: var(--pf-margin-2);
+  margin-bottom: var(--pf-spacing-sm);
 }

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

@@ -2,7 +2,7 @@
   padding: 10px;
 
   &--has-icon {
-    padding-left: var(--pf-padding-7);
+    padding-left: var(--pf-spacing-5xl);
   }
 }
 
@@ -10,14 +10,14 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  margin-top: var(--pf-margin-2);
-  margin-bottom: var(--pf-margin-2);
-  color: var(--pf-error-color);
+  margin-top: var(--pf-spacing-sm);
+  margin-bottom: var(--pf-spacing-sm);
+  color: var(--pf-semantic-utility-error-default);
 }
 .help-text {
-  margin-top: var(--pf-margin-2);
-  margin-bottom: var(--pf-margin-2);
-  color: var(--pf-form-input-help-color);
+  margin-top: var(--pf-spacing-sm);
+  margin-bottom: var(--pf-spacing-sm);
+  color: var(--pf-semantic-font-mute);
   font-size: var(--pf-font-size-subtitle2);
 }
 .password-input-wrapper {
@@ -25,14 +25,14 @@
   .embedded-icon {
     position: absolute;
     top: 10px;
-    left: var(--pf-margin-2);
-    color: var(--pf-form-input-color);
+    left: var(--pf-spacing-sm);
+    color: var(--pf-semantic-font-regular);
   }
   .toggle-show-password-icon {
     position: absolute;
-    top: var(--pf-margin-3);
-    right: var(--pf-margin-2);
-    color: var(--pf-form-input-color);
+    top: var(--pf-spacing-lg);
+    right: var(--pf-spacing-sm);
+    color: var(--pf-semantic-font-regular);
     cursor: pointer;
   }
 }