@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/modals/ConfirmModal/ConfirmModal.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
-import { LoadingAwareContainer, ModalBase } from '@/legacy/components';
+import { ModalBase } from '@/legacy/components/modals/ModalBase';
 import { Button } from '@/components/button';
 import { ModalBaseProps } from '../ModalBase';
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 
 import { StyledConfirmModal } from './ConfirmModal.styles';
 
@@ -62,24 +62,17 @@ export function ConfirmModal(props: Props) {
 
         {message && <div className="message">{message}</div>}
 
-        <LoadingAwareContainer isLoading={processing} className="actions">
-          <Button
-            color="secondary"
-            ariaLabel="confirm"
-            onClick={(event) => responseHandler(true, event)}
-          >
-            {confirmText || 'Yes'}
-          </Button>
+        <Button ariaLabel="confirm" onClick={(event) => responseHandler(true, event)}>
+          {confirmText || 'Yes'}
+        </Button>
 
-          <Button
-            variant="outline"
-            color="secondary"
-            ariaLabel="reject"
-            onClick={(event) => responseHandler(false, event)}
-          >
-            {rejectText || 'No'}
-          </Button>
-        </LoadingAwareContainer>
+        <Button
+          variant="outline"
+          ariaLabel="reject"
+          onClick={(event) => responseHandler(false, event)}
+        >
+          {rejectText || 'No'}
+        </Button>
       </StyledConfirmModal>
     </ModalBase>
   );

package/src/legacy/components/modals/ModalBase/ModalBase.styles.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 import ReactModal from 'react-modal';
 import styled from 'styled-components';
 
-import { COLORS } from '@/legacy/tokens';
-import { colorUtils } from '@/legacy/utils';
-
 // see: https://github.com/reactjs/react-modal/issues/603
 function ModalAdapter(props: any): React.ReactElement {
   const { className } = props;
@@ -36,8 +33,6 @@ export const StyledModalBase = styled(ModalAdapter)`
     padding: 0;
 
     border-radius: 4px;
-    background-color: ${COLORS.clay};
-    border: solid 1px ${COLORS.oxfordBlue};
     outline: none;
 
     width: ${(props) => (props.maxWidth ? '100%' : 'auto')};
@@ -52,8 +47,6 @@ export const StyledModalBase = styled(ModalAdapter)`
 
     width: 100%;
     height: 100%;
-
-    background-color: ${colorUtils.hexToRgb(COLORS.mirage, 0.95)};
   }
 
   .ReactModal__Overlay {

package/src/legacy/components/modals/ModalBase/ModalBase.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 
 import { StyledModalBase } from './ModalBase.styles';
 

package/src/storybookDocs/Permafrost.mdx

@@ -0,0 +1,92 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Getting Started" />
+
+# Permafrost 
+#### Permafrost is the name of our User Interface Design System and Component Library.
+Permafrost is utilized in Indico's React projects to ensure a consistent look and feel across our products. It leverages many variables and components that are defined in our design system. We also wrap multiple libraries such as `react-day-picker` or `react-select` to ensure a consistent look and feel.
+
+<div style={{ marginBottom: '3rem' }} />
+
+## Installation
+Indico serves Permafrost as a package on npm. In order to take advantage of it in your project, you can install it by adding the following to your `package.json`:
+
+```json
+"dependencies": {
+  "@indico-data/permafrost": "latest" // or the specific version you want
+}
+```
+After adding the package, import the CSS file to apply Permafrost’s styles to the components.
+
+```css
+@import "@indico-data/permafrost/dist/index.css";
+```
+
+
+## Usage
+
+### Overriding Variables
+You are able to override any of the variables in the design system. We currently support `light` and `dark` themes. If you would like to override a variable in the dark theme, try this approach:
+
+```css
+:root [data-theme='dark'] {
+  --pf-primary-color: #262c3a; /* your color here */
+}
+```
+
+This pattern applies to all of our variables which you can find in the CSS variables directory in the project.
+
+### Theming
+In order to switch between the light and dark themes, you can simply add the `data-theme` attribute to the `html` element. *Note* If no theme is provided, it will default to `:root` which is the dark theme.
+
+```html
+<html data-theme="light">
+  <!-- Your app here -->
+</html>
+```
+
+In the example above, it will leverage the `light` theme to render our styles with the `light mode` variables. It is important to note that while Permafrost natively supports `light` and `dark` values for data-theme, these can be extended and even overridden by your project to support additional themes.
+
+
+### Importing Components
+Using components from Permafrost is as simple as importing them from the package and using them in your project.
+
+```tsx
+import {Icon} from '@indico-data/design-system';
+
+
+<Icon name="indico-o" />
+```
+
+### CSS Only
+We have tried to provide as much support as possible for those who wish to implement Permafrost without using our React components. This is where the CSS only approach comes in. We have wrapped the components in a way that allows you to use the same styles with a different library. In order to use the CSS only approach, you can import the css file that sets the styles for the components.
+
+You can do this by going into the project and running the following command:
+
+```bash
+yarn build
+```
+
+This will create an `index.css` file in the `dist` directory that you can then copy and import into your project.
+
+#### SASS
+If you prefer to use SASS, you can copy the entire `/styles` directory and import the `index.scss` file into your project.
+
+**Note:** This will only give you the styling of our design system, none of the interactivity.
+
+### CSS Only Usage
+If you wish to do the CSS only approach, you can do so by applying the CSS classes to your components. For example, if you have an input you wish to have styled with our design system, you can do the following:
+
+```tsx
+<input className="input" />
+```
+
+We are as generic as possible with our CSS classes, so you can easily override them if needed.
+
+
+## Testing
+All of our components have been tested with React Testing Library. You can view the tests for each component by looking in the `__tests__` directory in each component. To run them, you can simply run the following command:
+
+```bash
+yarn jest
+```

package/src/styles/_colors.scss

@@ -1,6 +1,10 @@
-$color-names: 'primary', 'secondary', 'gray', 'steel', 'green', 'orange', 'red';
-$color-grades: '100', '200', '300', '400', '500', '600', '700', '800', '900';
-$utility-color-names: 'success', 'info', 'neutral', 'warning', 'error';
+$color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
+  'purple';
+$color-grades: ();
+@for $i from 1 through 20 {
+  $color-grades: append($color-grades, #{$i * 50}, comma);
+}
+$utility-color-names: 'success', 'info', 'neutral', 'warning', 'error', 'brand';
 
 @each $color-name in $color-names {
   .color-#{$color-name} {

package/src/styles/_sheets.scss

@@ -1,7 +1,7 @@
-:root [data-theme='light'],
-:root {
+:root [data-theme='light'] {
   --sheets-background-color: var(--pf-gray-color-100);
 }
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   --sheets-background-color: var(--pf-primary-color-400);
 }

package/src/styles/assets/fonts/noto/notosans.css

@@ -0,0 +1,79 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9X6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9e6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* devanagari */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9b6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9W6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9Z6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9V6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9U6VLYyWtZ3rKW9w.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: url(https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VLYyWtZ3rI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/src/styles/globals.scss

@@ -1,5 +1,4 @@
-:root [data-theme='light'],
-:root {
+:root [data-theme='light'] {
   // Globals
   // ***********************************************************************************************************************************
   --pf-white-color: #ffffff;
@@ -22,15 +21,10 @@
   // ***********************************************************************************************************************************
   --pf-link-color: var(--pf-primary-color);
   --pf-active-link-color: var(--pf-primary-color-600);
-
-  // Borders
-  // ***********************************************************************************************************************************
-  --pf-border-color: var(--pf-gray-color-200);
-  --pf-border-color-light: var(--pf-gray-color-100);
-  --pf-horizontal-line-color: var(--pf-gray-color-200);
 }
 
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   // Globals
   // ***********************************************************************************************************************************
   --pf-white-color: #ffffff;
@@ -53,12 +47,6 @@
   // ***********************************************************************************************************************************
   --pf-link-color: var(--pf-gray-color-300);
   --pf-active-link-color: var(--pf-gray-color-100);
-
-  // Borders
-  // ***********************************************************************************************************************************
-  --pf-horizontal-line-color: var(--pf-primary-color-200);
-  --pf-border-color: var(--pf-steel-color-600);
-  --pf-border-color-light: var(--pf-steel-color-400);
 }
 
 // Global Styles
@@ -73,7 +61,8 @@ body {
   font-weight: var(--pf-font-weight-regular);
 }
 
-a, .link {
+a,
+.link {
   color: var(--pf-link-color);
   transition: color 0.3s ease-in-out;
 

package/src/styles/index.scss

@@ -1,4 +1,5 @@
 // Variables
+@import './assets/fonts/noto/notosans.css';
 @import 'variables/index.scss';
 @import './globals.scss';
 // Components
@@ -29,5 +30,3 @@
 @import 'padding';
 @import 'margin';
 @import 'animations';
-// Fonts
-@import './assets/fonts/mulish/mulish.css';

package/src/styles/storybook.scss

@@ -5,7 +5,7 @@
 }
 
 :root [data-theme='dark'] {
-  --storybook-bg-color: var(--pf-primary-color-300);
+  --storybook-bg-color: var(--pf-background-color);
   --storybook-font-color: var(--pf-white-color);
 }
 

package/src/styles/variables/_borders.scss

@@ -15,15 +15,15 @@
   --pf-rounded-shaped: 24px 0;
 }
 
-:root [data-theme='light'],
-:root {
-  --pf-border-color: var(--pf-gray-color-200);
+:root [data-theme='light'] {
+  --pf-border-color: var(--pf-gray-color-300);
   --pf-border-color-light: var(--pf-gray-color-100);
   --pf-horizontal-line-color: var(--pf-gray-color-200);
 }
 
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   --pf-horizontal-line-color: var(--pf-primary-color-200);
-  --pf-border-color: var(--pf-steel-color-600);
-  --pf-border-color-light: var(--pf-steel-color-400);
+  --pf-border-color: var(--pf-tertiary-color-800);
+  --pf-border-color-light: var(--pf-white-color-100);
 }

package/src/styles/variables/_dropshadows.scss

@@ -2,4 +2,6 @@
 :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;
 }

package/src/styles/variables/_padding.scss

@@ -1,8 +1,12 @@
 :root {
   --pf-padding-0: 0;
+  --pf-padding-0-5: 2px;
   --pf-padding-1: 4px;
+  --pf-padding-1-5: 6px;
   --pf-padding-2: 8px;
+  --pf-padding-2-5: 10px;
   --pf-padding-3: 12px;
+  --pf-padding-3-5: 14px;
   --pf-padding-4: 16px;
   --pf-padding-5: 20px;
   --pf-padding-6: 24px;
@@ -16,4 +20,4 @@
   --pf-padding-14: 56px;
   --pf-padding-15: 60px;
   --pf-padding-16: 64px;
-}
+}

package/src/styles/variables/_typography.scss

@@ -1,6 +1,6 @@
 :root {
   // Family
-  --pf-font-family-base: 'Mulish', sans-serif;
+  --pf-font-family-base: 'Noto Sans', sans-serif;
 
   // Sizes
   --pf-font-size-base: 1rem;
@@ -30,4 +30,10 @@
   --pf-label-size-sm: var(--pf-font-size-overline);
   --pf-label-size-md: var(--pf-font-size-body);
   --pf-label-size-lg: var(--pf-font-size-h2);
+
+  // Line heights
+  --pf-line-height-xs: calc(0.75 * var(--pf-font-size-base));
+  --pf-line-height-sm: var(--pf-font-size-base);
+  --pf-line-height-md: calc(1.25 * var(--pf-font-size-base));
+  --pf-line-height-lg: calc(1.5 * var(--pf-font-size-base));
 }