@indico-data/design-system 3.4.0 → 3.6.0

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

@@ -1,24 +1,10 @@
-// Common Variables
-
-:root [data-theme='light'] {
-  --pf-radio-check-color: var(--pf-primary-color);
-  --pf-radio-disabled-color: var(--pf-gray-color-400);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-radio-check-color: var(--pf-white-color);
-  --pf-radio-disabled-color: var(--pf-gray-color-300);
-}
-
 .radio-wrapper {
   display: flex;
   align-items: center;
 }
 .radio-input {
   margin: 0;
-  margin-right: var(--pf-margin-2);
+  margin-right: var(--pf-spacing-sm);
   cursor: pointer;
 }
 .radio-input-label {
@@ -33,7 +19,7 @@
 [type='radio']:checked + label,
 [type='radio']: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;
@@ -46,16 +32,16 @@
   top: 0;
   width: 18px;
   height: 18px;
-  border: 1px solid var(--pf-form-input-border-color);
+  border: 1px solid var(--pf-semantic-border-primary);
   border-radius: 100%;
-  background: var(--pf-form-input-background-color);
+  background: var(--pf-semantic-background-secondary);
 }
 [type='radio']:checked + label:after,
 [type='radio']:not(:checked) + label:after {
   content: '';
   width: 12px;
   height: 12px;
-  background: var(--pf-radio-check-color);
+  background: var(--pf-semantic-background-inverted);
   position: absolute;
   top: 4px;
   left: 4px;
@@ -79,14 +65,14 @@
 }
 
 [type='radio']:disabled + label {
-  color: var(--pf-radio-disabled-color);
+  color: var(--pf-semantic-font-disabled);
   opacity: 0.5;
 }
 
 [type='radio']:disabled + label:before {
-  border-color: var(--pf-radio-disabled-color);
+  border-color: var(--pf-semantic-font-disabled);
 }
 
 [type='radio']:disabled + label:after {
-  background: var(--pf-radio-disabled-color);
+  background: var(--pf-semantic-font-disabled);
 }

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

@@ -1,44 +1,28 @@
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-select-indicator-color: var(--pf-font-color-accent);
-  --pf-select-option-selected-color: var(--pf-background-color-accent);
-  --pf-select-option-color: var(--pf-font-color);
-  --pf-select-option-hover-color: var(--pf-background-color-highlight);
-}
-
-// Dark  Theme and Default Variables
-:root [data-theme='dark'],
-:root {
-  --pf-select-indicator-color: var(--pf-font-color-accent);
-  --pf-select-option-selected-color: var(--pf-background-color-accent);
-  --pf-select-option-color: var(--pf-font-color);
-  --pf-select-option-hover-color: var(--pf-background-color-highlight);
-}
 .select-wrapper {
   .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);
+      background-color: var(--pf-semantic-background-secondary);
+      border: var(--pf-border-sm) solid var(--pf-semantic-border-primary);
+      color: var(--pf-semantic-font-regular);
       box-shadow: none;
 
       &:hover:not(:focus) {
-        border-color: var(--pf-form-input-hover-border-color);
+        border-color: var(--pf-semantic-border-hover);
       }
 
       &:focus,
       &--is-focused {
-        border: var(--pf-border-sm) solid var(--pf-form-input-focus-border-color);
+        border: var(--pf-border-sm) solid var(--pf-semantic-border-accent);
       }
 
       &--is-disabled {
-        background-color: var(--pf-form-input-disabled-background-color);
-        color: var(--pf-form-input-disabled-color);
+        background-color: var(--pf-semantic-page-background);
+        color: var(--pf-semantic-font-disabled);
       }
     }
 
     &placeholder {
-      color: var(--pf-form-input-placeholder-color);
+      color: var(--pf-semantic-font-placeholder);
     }
 
     &value-container {
@@ -46,48 +30,48 @@
     }
 
     &input-container {
-      color: var(--pf-form-input-color);
+      color: var(--pf-semantic-font-regular);
     }
 
     &multi-value {
-      background-color: var(--pf-select-option-selected-color);
-      border-radius: var(--pf-rounded);
+      background-color: var(--pf-semantic-background-accent);
+      border-radius: var(--pf-border-radius-xs);
       &__label {
         padding-top: 5px; // TODO -- clean up padding on this component overall
-        color: var(--pf-select-option-color);
+        color: var(--pf-semantic-font-regular);
       }
       &__remove {
-        color: var(--pf-select-option-color);
+        color: var(--pf-semantic-font-regular);
         cursor: pointer;
         &:hover {
-          background-color: var(--pf-select-option-hover-color);
-          color: var(--pf-form-input-hover-color);
+          background-color: var(--pf-semantic-background-highlight);
+          color: var(--pf-semantic-font-regular);
         }
       }
     }
 
     &menu {
-      border: var(--pf-border-sm) solid var(--pf-form-input-border-color);
+      border: var(--pf-border-sm) solid var(--pf-semantic-border-primary);
       box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
-      margin: var(--pf-margin-2) 0;
-      background-color: var(--pf-form-input-background-color);
+      margin: var(--pf-spacing-sm) 0;
+      background-color: var(--pf-semantic-background-secondary);
     }
 
     &menu-notice {
-      color: var(--pf-form-input-color);
+      color: var(--pf-semantic-font-regular);
     }
 
     &indicator-separator {
-      background-color: var(--pf-select-indicator-color);
+      background-color: var(--pf-semantic-font-accent);
     }
 
     &indicator {
       cursor: pointer;
-      color: var(--pf-select-indicator-color);
+      color: var(--pf-semantic-font-accent);
 
       &:hover,
       &:focus {
-        color: var(--pf-form-input-color);
+        color: var(--pf-semantic-font-regular);
       }
     }
 
@@ -103,19 +87,19 @@
     &option {
       cursor: pointer;
       overflow-wrap: break-word;
-      color: var(--pf-select-option-color);
+      color: var(--pf-semantic-font-regular);
       &--is-focused,
       &:active {
-        background: var(--pf-select-option-hover-color);
+        background: var(--pf-semantic-background-highlight);
       }
 
       &--is-selected {
-        background: var(--pf-select-option-selected-color);
+        background: var(--pf-semantic-background-accent);
       }
     }
 
     &single-value {
-      color: var(--pf-select-option-color);
+      color: var(--pf-semantic-font-regular);
     }
   }
 }
@@ -128,16 +112,16 @@ body .select__menu-portal {
 /* Apply theme styling to portal elements */
 body {
   div[class*='select__menu'] {
-    background-color: var(--pf-form-input-background-color);
+    background-color: var(--pf-semantic-background-secondary);
   }
 
   div[class*='select__menu-list'] {
-    background-color: var(--pf-form-input-background-color);
+    background-color: var(--pf-semantic-background-secondary);
   }
 
   div[class*='select__option'] {
-    background-color: var(--pf-form-input-background-color);
-    color: var(--pf-select-option-color);
+    background-color: var(--pf-semantic-background-secondary);
+    color: var(--pf-semantic-font-regular);
     cursor: pointer;
     overflow-wrap: break-word;
 
@@ -145,24 +129,24 @@ body {
     &.select__option--is-focused,
     &[class*='--is-focused'],
     &:active {
-      background: var(--pf-select-option-hover-color);
-      color: var(--pf-form-input-color);
+      background: var(--pf-semantic-background-primary);
+      color: var(--pf-semantic-font-regular);
     }
 
     &.select__option--is-selected,
     &[class*='--is-selected'] {
-      background: var(--pf-select-option-selected-color);
-      color: var(--pf-select-option-color);
+      background: var(--pf-semantic-background-highlight);
+      color: var(--pf-semantic-font-regular);
     }
   }
 
   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);
+    background-color: var(--pf-semantic-background-secondary);
+    border: var(--pf-border-sm) solid var(--pf-semantic-border-primary);
+    color: var(--pf-semantic-font-regular);
   }
 
   div[class*='select__single-value'] {
-    color: var(--pf-select-option-color);
+    color: var(--pf-semantic-font-regular);
   }
 }

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

@@ -1,23 +1,23 @@
 .textarea {
   padding: 10px;
   &.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);
   }
 
   &--has-icon {
-    padding-left: var(--pf-padding-7);
+    padding-left: var(--pf-spacing-5xl);
   }
 }
 
@@ -25,13 +25,13 @@
   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);
 }

package/src/components/forms/toggle/styles/Toggle.scss

@@ -1,52 +1,35 @@
-// Common Variables
-
-:root [data-theme='light'] {
-  --pf-toggle-background-color: var(--pf-form-input-background-color);
-  --pf-toggle-circle-color: var(--pf-primary-color);
-  --pf-toggle-border-color: var(--pf-form-input-border-color);
-  --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
-  --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
-  --pf-toggle-checked-background-color: var(--pf-primary-color-300);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-toggle-background-color: var(--pf-form-input-background-color);
-  --pf-toggle-circle-color: var(--pf-white-color);
-  --pf-toggle-border-color: var(--pf-primary-color);
-  --pf-toggle-disabled-background-color: var(--pf-form-input-disabled-background-color);
-  --pf-toggle-disabled-circle-color: var(--pf-form-input-disabled-color);
-  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
-}
 .switch {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 20px;
-  background-color: var(--pf-toggle-background-color);
+  background-color: var(--pf-semantic-background-tertiary);
   border-radius: 20px;
   transition: all 0.3s;
   cursor: pointer;
-  border: 1px solid var(--pf-toggle-border-color);
+  border: 1px solid var(--pf-semantic-border-primary);
 }
 .switch::after {
   content: '';
   position: absolute;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
-  background-color: var(--pf-toggle-circle-color);
+  background-color: var(--pf-semantic-background-secondary);
+  box-shadow:
+    -1px 1px 2px 0 var(--pf-shadow-xs),
+    0 1px 3px 0 var(--pf-shadow-xs);
   top: 1px;
   left: 1px;
   transition: all 0.3s;
+  border: 1px solid var(--pf-semantic-border-primary);
 }
 
 .toggle-input:checked + label.switch::after {
-  left: 20px;
+  left: 21px;
 }
 .toggle-input:checked + label.switch {
-  background-color: var(--pf-toggle-checked-background-color);
+  background-color: var(--pf-semantic-font-accent);
 }
 .toggle-input:checked,
 .toggle-input:not(:checked) {
@@ -54,12 +37,12 @@
   left: -9999px;
 }
 .toggle-input:disabled + label.switch {
-  background-color: var(--pf-toggle-disabled-background-color);
+  background-color: var(--pf-semantic-background-primary);
   cursor: not-allowed;
 }
 
 .toggle-input:disabled + label.switch::after {
-  background-color: var(--pf-toggle-disabled-circle-color);
+  background-color: var(--pf-semantic-font-disabled);
 }
 
 .toggle-wrapper {
@@ -69,6 +52,6 @@
 
 .toggle-label {
   cursor: pointer;
-  margin-left: var(--pf-margin-2);
+  margin-left: var(--pf-spacing-sm);
   font-size: var(--pf-font-size-form-label);
 }

package/src/components/icons/Icon.mdx

@@ -31,7 +31,7 @@ You can use the `className` prop to apply custom styles to the icons.
 
 <Story of={IconStories.CustomStyledIcon} />
 ```tsx // .tsx
-<Icon name="fa-mountain-sun" size="xl" className="color-primary-600" />
+<Icon name="fa-mountain-sun" size="xl" style={{ color: 'var(--pf-semantic-font-success)' }} />
 ```
 
 ### Duotone Icons

package/src/components/icons/Icon.stories.tsx

@@ -42,9 +42,9 @@ const meta: Meta = {
     },
     size: {
       control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
       table: {
-        type: { summary: 'xs | sm | md | lg | xl' },
+        type: { summary: 'xs | sm | md | lg | xl | 2xl | 3xl' },
         category: 'styling',
       },
     },
@@ -77,15 +77,14 @@ export const DefaultIcon: Story = {
 
 export const IconStates: Story = {
   render: (args) => {
-    const sizes: IconSizes[] = ['xs', 'sm', 'md', 'lg', 'xl'];
-    const rems = ['0.6rem', '0.75rem', '1rem', '1.5rem', '2rem'];
+    const sizes: IconSizes[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+    const rems = ['10px', '12px', '16px', '24px', '32px', '48px', '64px'];
+
     return (
       <Row>
         {sizes.map((size, idx) => (
-          <Col xs={2} key={`${args.name}-${size}`}>
-            <div style={{ height: 32 }}>
-              <Icon name={args.name} size={size} />
-            </div>
+          <Col xs={3} key={`${args.name}-${size}`}>
+            <Icon name={args.name} size={size} />
             <div className="mt-2 text-body-2">{`${size} (${rems[idx]})`}</div>
           </Col>
         ))}
@@ -99,7 +98,9 @@ export const IconStates: Story = {
 
 export const CustomStyledIcon: Story = {
   render: () => {
-    return <Icon name="fa-mountain-sun" size="xl" className="color-primary-600" />;
+    return (
+      <Icon name="fa-mountain-sun" size="xl" style={{ color: 'var(--pf-semantic-font-success)' }} />
+    );
   },
 };
 

package/src/components/icons/styles/Icon.scss

@@ -4,6 +4,8 @@ $sizes: (
   md: var(--pf-icon-size-md),
   lg: var(--pf-icon-size-lg),
   xl: var(--pf-icon-size-xl),
+  '2xl': var(--pf-icon-size-2xl),
+  '3xl': var(--pf-icon-size-3xl),
 );
 
 @mixin icon-size($name, $value) {

package/src/components/icons/types.ts

@@ -3,7 +3,7 @@ import { PermafrostComponent } from '../../types';
 import { IconName as FAIconName } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
 
-export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 
 export type IndiconName = keyof typeof indicons;
 

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

@@ -1,10 +1,10 @@
 .menu {
-  border-radius: var(--pf-rounded);
+  border-radius: var(--pf-border-radius-xs);
 
   .menu-item {
     width: 100%;
-    background: var(--pf-background-color-secondary);
-    color: var(--pf-font-color);
+    background: var(--pf-semantic-background-secondary);
+    color: var(--pf-semantic-font-regular);
     display: block;
     width: 100%;
     text-align: left;
@@ -12,22 +12,22 @@
     border-radius: 0;
 
     &:first-child {
-      border-top-left-radius: var(--pf-rounded);
-      border-top-right-radius: var(--pf-rounded);
+      border-top-left-radius: var(--pf-border-radius-xs);
+      border-top-right-radius: var(--pf-border-radius-xs);
     }
 
     &:last-child {
-      border-bottom-left-radius: var(--pf-rounded);
-      border-bottom-right-radius: var(--pf-rounded);
+      border-bottom-left-radius: var(--pf-border-radius-xs);
+      border-bottom-right-radius: var(--pf-border-radius-xs);
     }
 
     &:hover {
-      background: var(--pf-background-color-highlight);
+      background: var(--pf-semantic-background-highlight);
     }
 
     box-shadow: none;
     &:focus {
-      background-color: var(--pf-background-color-accent);
+      background-color: var(--pf-semantic-background-accent);
     }
   }
 }

package/src/components/modal/styles/Modal.scss

@@ -1,36 +1,3 @@
-// Common Variables
-:root {
-  --pf-modal-rounded: var(--pf-rounded-lg);
-  --pf-modal-close-button-top: var(--pf-margin-2);
-  --pf-modal-close-button-right: var(--pf-margin-2);
-  --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
-  --pf-modal-title-font-size: var(--pf-font-size-h1);
-  --pf-modal-title-font-weight: var(--pf-font-weight-bold);
-  --pf-modal-subtitle-font-size: var(--pf-font-size-body);
-  --pf-modal-close-button-font-size: var(--pf-font-size-caption);
-  --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
-  --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
-  --pf-modal-overlay-transition: opacity 100ms ease-in-out;
-  --pf-modal-content-padding: var(--pf-padding-5) var(--pf-padding-6);
-}
-
-// Light Theme Specific Variables
-:root [data-theme='light'] {
-  --pf-modal-background-color: var(--pf-background-color-secondary);
-  --pf-modal-border-color: var(--pf-border-color-secondary);
-  --pf-modal-subtitle-font-color: var(--pf-font-color-soft);
-  --pf-modal-close-button-font-color: var(--pf-font-color-soft);
-}
-
-// Dark Theme Specific Variables
-:root [data-theme='dark'],
-:root {
-  --pf-modal-background-color: var(--pf-background-color-secondary);
-  --pf-modal-border-color: var(--pf-border-color-secondary);
-  --pf-modal-subtitle-font-color: var(--pf-font-color-soft);
-  --pf-modal-close-button-font-color: var(--pf-font-color-soft);
-}
-
 // Library overrides
 .ReactModal__Overlay {
   position: fixed;
@@ -38,14 +5,14 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--pf-modal-overlay-background);
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .ReactModal__Overlay {
   opacity: 0;
-  transition: var(--pf-modal-overlay-transition);
+  transition: opacity 100ms ease-in-out;
 }
 
 .ReactModal__Overlay--after-open {
@@ -60,8 +27,8 @@
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  background: var(--pf-background-color);
-  border-radius: var(--pf-modal-rounded);
+  background: var(--pf-semantic-background-primary);
+  border-radius: var(--pf-border-radius-md);
   outline: none;
 
   &--center {
@@ -74,13 +41,13 @@
   }
 
   .modal-content {
-    background-color: var(--pf-modal-background-color);
-    border: var(--pf-border-sm) solid var(--pf-modal-border-color);
-    border-radius: var(--pf-modal-rounded);
+    background-color: var(--pf-semantic-background-secondary);
+    border: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+    border-radius: var(--pf-border-radius-md);
   }
   .modal-header {
-    border-bottom: var(--pf-border-sm) solid var(--pf-modal-border-color);
-    padding: var(--pf-modal-content-padding);
+    border-bottom: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
+    padding: var(--pf-spacing-3xl) var(--pf-spacing-4xl);
 
     .modal-title {
       font-size: var(--pf-font-size-h1);
@@ -88,23 +55,23 @@
     }
     .modal-subtitle {
       font-size: var(--pf-font-size-subtitle);
-      color: var(--pf-modal-subtitle-font-color);
+      color: var(--pf-semantic-font-soft);
     }
   }
 
   .modal-close-button {
     position: absolute;
-    top: var(--pf-modal-close-button-top);
-    right: var(--pf-modal-close-button-right);
-    padding: var(--pf-modal-close-button-padding);
-    font-size: var(--pf-modal-close-button-font-size);
-    color: var(--pf-modal-close-button-font-color);
+    top: var(--pf-spacing-sm);
+    right: var(--pf-spacing-sm);
+    padding: var(--pf-spacing-lg) var(--pf-spacing-2xl);
+    font-size: var(--pf-font-size-caption);
+    color: var(--pf-semantic-font-soft);
     line-height: 1;
     z-index: 1000;
 
     &.btn .icon {
-      width: var(--pf-modal-close-button-icon-size) !important;
-      height: var(--pf-modal-close-button-icon-size);
+      width: var(--pf-font-size-caption) !important;
+      height: var(--pf-font-size-caption);
 
       svg {
         width: 100%;
@@ -114,12 +81,12 @@
   }
 
   .modal-body {
-    padding: var(--pf-modal-content-padding);
+    padding: var(--pf-spacing-3xl) var(--pf-spacing-4xl);
   }
 
   .modal-footer {
-    padding: var(--pf-modal-content-padding);
-    border-top: var(--pf-border-sm) solid var(--pf-modal-border-color);
+    padding: var(--pf-spacing-3xl) var(--pf-spacing-4xl);
+    border-top: var(--pf-border-sm) solid var(--pf-semantic-border-secondary);
     text-align: right;
   }
 }
@@ -128,11 +95,11 @@
   .confirmation-modal-title {
     font-size: var(--pf-font-size-h1);
     font-weight: var(--pf-font-weight-bold);
-    margin-bottom: var(--pf-margin-4);
+    margin-bottom: var(--pf-spacing-2xl);
   }
 
   .confirmation-modal-icon {
-    margin-top: var(--pf-margin-4);
-    margin-bottom: var(--pf-margin-4);
+    margin-top: var(--pf-spacing-2xl);
+    margin-bottom: var(--pf-spacing-2xl);
   }
 }

package/src/components/pagination/styles/Pagination.scss

@@ -10,7 +10,7 @@
 .pagination {
   .pagination__current-page-input {
     &.has-error {
-      border-color: var(--pf-error-color);
+      border-color: var(--pf-semantic-utility-error-default);
     }
   }
 }