npm - @indico-data/design-system - Versions diffs - 2.43.1 → 2.45.0 - Mend

@indico-data/design-system 2.43.1 → 2.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (428) hide show

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/a.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/b.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/c.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/d.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/e.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/f.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/g.woff2 ADDED Viewed

Binary file

package/src/styles/assets/fonts/noto/h.woff2 ADDED Viewed

Binary file

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

@@ -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 CHANGED Viewed

@@ -1,5 +1,4 @@
-:root [data-theme='light'],
-:root {
+:root [data-theme='light'] {
   // Globals
   // ***********************************************************************************************************************************
   --pf-white-color: #ffffff;
@@ -22,25 +21,20 @@
   // ***********************************************************************************************************************************
   --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;
   --pf-black-color: #000000;
-  --pf-background-color-light: var(--pf-primary-color-300);
+  --pf-background-color-light: var(--pf-primary-color);
   --pf-background-color: var(--pf-primary-color-600);
   --pf-background-color-dark: var(--pf-primary-color-900);
   --pf-background-secondary-color-light: var(--pf-secondary-color-300);
   --pf-background-color-secondary: var(--pf-secondary-color-500);
-  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
+  --pf-background-color-secondary-dark: var(--pf-secondary-color-950);
   // Fonts
   // ***********************************************************************************************************************************
@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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'] {
-  --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);
+:root [data-theme='dark'],
+:root {
+  --pf-horizontal-line-color: var(--pf-tertiary-color-800);
+  --pf-border-color: var(--pf-tertiary-color-800);
+  --pf-border-color-light: var(--pf-white-color-100);
 }

package/src/styles/variables/_dropshadows.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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));
 }

package/src/styles/variables/themes/dark.scss CHANGED Viewed

@@ -1,102 +1,166 @@
-:root [data-theme='dark'] {
+:root [data-theme='dark'],
+:root {
   // Primary Color
-  --pf-primary-color: #262c3a;
-  --pf-primary-color-100: #8194c0;
-  --pf-primary-color-200: #5b6b8f;
-  --pf-primary-color-300: #3b455e;
-  --pf-primary-color-400: #323a4d;
-  --pf-primary-color-500: #262c3a;
-  --pf-primary-color-600: #182432;
-  --pf-primary-color-700: #101a26;
-  --pf-primary-color-800: #1b202c;
+  --pf-primary-color: #394c6b;
+  --pf-primary-color-50: #bcc7da;
+  --pf-primary-color-100: #7989b5;
+  --pf-primary-color-200: #8593b3;
+  --pf-primary-color-300: #7488a4;
+  --pf-primary-color-400: #5c708c;
+  --pf-primary-color-500: #394c6b;
+  --pf-primary-color-600: #233346;
+  --pf-primary-color-700: #182432;
+  --pf-primary-color-800: #101a26;
   --pf-primary-color-900: #141b24;
-  --pf-primary-color-1000: #271153;
+  --pf-primary-color-950: #0c141d;
   // Secondary Color
-  --pf-secondary-color: #0070f5;
-  --pf-secondary-color-100: #dceafd;
-  --pf-secondary-color-200: #b3d4fc;
-  --pf-secondary-color-300: #7ab5fa;
-  --pf-secondary-color-400: #4797f5;
-  --pf-secondary-color-500: #2482f5;
-  --pf-secondary-color-600: #2070d1;
-  --pf-secondary-color-700: #178ee0;
-  --pf-secondary-color-800: #3d5a7d;
-  --pf-secondary-color-900: #0b2647;
+  --pf-secondary-color: #198bdc;
+  --pf-secondary-color-50: #bddffa;
+  --pf-secondary-color-100: #83c5f6;
+  --pf-secondary-color-200: #68afee;
+  --pf-secondary-color-300: #66a2d5;
+  --pf-secondary-color-400: #36a1ea;
+  --pf-secondary-color-500: #198bdc;
+  --pf-secondary-color-550: #0070f5;
+  --pf-secondary-color-600: #2f6a98;
+  --pf-secondary-color-700: #0c6ebd;
+  --pf-secondary-color-800: #0b5899;
+  --pf-secondary-color-900: #002c4e;
+  --pf-secondary-color-950: #112341;
+  // Tertiary Color
+  --pf-tertiary-color: #40464e;
+  --pf-tertiary-color-50: #dae3eb;
+  --pf-tertiary-color-100: #c2d4df;
+  --pf-tertiary-color-200: #a3b2c9;
+  --pf-tertiary-color-300: #8593b3;
+  --pf-tertiary-color-400: #656f82;
+  --pf-tertiary-color-450: #4d5667;
+  --pf-tertiary-color-500: #40464e;
+  --pf-tertiary-color-600: #334154;
+  --pf-tertiary-color-700: #3b415b;
+  --pf-tertiary-color-800: #344152;
+  --pf-tertiary-color-900: #2d3444;
+  --pf-tertiary-color-950: #283243;
   // Gray Color
-  --pf-gray-color: #bfc1c3;
+  --pf-gray-color: #525252;
+  --pf-gray-color-50: #f6f6f6;
   --pf-gray-color-100: #efefef;
-  --pf-gray-color-200: #eaeaea;
-  --pf-gray-color-300: #dcdcdc;
-  --pf-gray-color-400: #d2d2d2;
-  --pf-gray-color-500: #bfc1c3;
-  --pf-gray-color-600: #a0a0a0;
-  --pf-gray-color-700: #828588;
-  --pf-gray-color-800: #797979;
-  --pf-gray-color-900: #585858;
-  // Steel Color
-  --pf-steel-color: #3e4751;
-  --pf-steel-color-100: #9aa1b1;
-  --pf-steel-color-200: #7c8594;
-  --pf-steel-color-300: #6a717e;
-  --pf-steel-color-400: #545c67;
-  --pf-steel-color-500: #3e4751;
-  --pf-steel-color-600: #2d3444;
-  --pf-steel-color-700: #232a3a;
-  --pf-steel-color-800: #1a202f;
-  --pf-steel-color-900: #11161f;
+  --pf-gray-color-200: #dcdcdc;
+  --pf-gray-color-300: #bdbdbd;
+  --pf-gray-color-400: #989898;
+  --pf-gray-color-450: #737373;
+  --pf-gray-color-500: #525252;
+  --pf-gray-color-600: #404040;
+  --pf-gray-color-700: #262626;
+  --pf-gray-color-800: #171717;
+  --pf-gray-color-900: #0a0a0a;
-  //Green Color
-  --pf-green-color: #199d19;
-  --pf-green-color-100: #98ff98;
-  --pf-green-color-200: #76ff76;
-  --pf-green-color-300: #63eb63;
-  --pf-green-color-400: #41ca41;
-  --pf-green-color-500: #199d19;
-  --pf-green-color-600: #168116;
-  --pf-green-color-700: #106710;
-  --pf-green-color-800: #0d5a0d;
-  --pf-green-color-900: #003c00;
+  //Red color
+  --pf-red-color: #ce6068;
+  --pf-red-color-50: #fcf5f4;
+  --pf-red-color-100: #fae9e9;
+  --pf-red-color-200: #f4d7d8;
+  --pf-red-color-300: #ebb6b8;
+  --pf-red-color-400: #df8d91;
+  --pf-red-color-500: #ce6068;
+  --pf-red-color-600: #b94553;
+  --pf-red-color-700: #9b3544;
+  --pf-red-color-800: #822f3e;
+  --pf-red-color-900: #702b39;
+  --pf-red-color-950: #3e131b;
   //Orange color
-  --pf-orange-color: #da9534;
-  --pf-orange-color-100: #ffd599;
-  --pf-orange-color-200: #ffc676;
-  --pf-orange-color-300: #f7b75b;
-  --pf-orange-color-400: #f1ab48;
-  --pf-orange-color-500: #da9534;
-  --pf-orange-color-600: #c7892f;
-  --pf-orange-color-700: #a87428;
-  --pf-orange-color-800: #825b22;
-  --pf-orange-color-900: #68481a;
+  --pf-orange-color: #f46325;
-  //Red color
-  --pf-red-color: #f44d4f;
-  --pf-red-color-100: #ffa9aa;
-  --pf-red-color-200: #ff8a8b;
-  --pf-red-color-300: #ff7577;
-  --pf-red-color-400: #ff6466;
-  --pf-red-color-500: #f44d4f;
-  --pf-red-color-600: #ba5759;
-  --pf-red-color-700: #b4393a;
-  --pf-red-color-800: #7b2728;
-  --pf-red-color-900: #4d1717;
+  --pf-orange-color-50: #fff5ed;
+  --pf-orange-color-100: #fee9d6;
+  --pf-orange-color-200: #fcceac;
+  --pf-orange-color-300: #faac77;
+  --pf-orange-color-400: #f67e41;
+  --pf-orange-color-500: #f46325;
+  --pf-orange-color-600: #e54311;
+  --pf-orange-color-700: #be3010;
+  --pf-orange-color-800: #972815;
+  --pf-orange-color-900: #792315;
+  --pf-orange-color-950: #420f08;
+  //Yellow color
+  --pf-yellow-color: #f29c22;
+  --pf-yellow-color-50: #fbf7eb;
+  --pf-yellow-color-100: #f5edcc;
+  --pf-yellow-color-200: #ecd99c;
+  --pf-yellow-color-300: #deb650;
+  --pf-yellow-color-400: #d7a438;
+  --pf-yellow-color-500: #f29c22;
+  --pf-yellow-color-600: #c88e2a;
+  --pf-yellow-color-700: #ac6e22;
+  --pf-yellow-color-800: #80670c;
+  --pf-yellow-color-900: #463703;
+  --pf-yellow-color-950: #312602;
+  //Green Color
+  --pf-green-color: #15b77d;
+  --pf-green-color-50: #a9f1ce;
+  --pf-green-color-100: #71e4b3;
+  --pf-green-color-200: #14b8a6;
+  --pf-green-color-300: #03aaaa;
+  --pf-green-color-400: #38cf94;
+  --pf-green-color-500: #15b77d;
+  --pf-green-color-600: #099263;
+  --pf-green-color-700: #087950;
+  --pf-green-color-800: #085d43;
+  --pf-green-color-900: #084c38;
+  --pf-green-color-950: #032b20;
+  // Purple Color
+  --pf-purple-color: #9776d3;
+  --pf-purple-color-50: #f7f6fc;
+  --pf-purple-color-100: #f1edfa;
+  --pf-purple-color-200: #e4dff5;
+  --pf-purple-color-300: #cfc4ee;
+  --pf-purple-color-400: #b6a3e2;
+  --pf-purple-color-500: #9776d3;
+  --pf-purple-color-600: #8b60c7;
+  --pf-purple-color-700: #7a4eb3;
+  --pf-purple-color-800: #664196;
+  --pf-purple-color-900: #55377b;
+  --pf-purple-color-950: #352253;
+  // White color
+  --pf-white-color: #ffffff;
+  --pf-white-color-1: rgba(255, 255, 255, 0.01);
+  --pf-white-color-3: rgba(255, 255, 255, 0.03);
+  --pf-white-color-5: rgba(255, 255, 255, 0.05);
+  --pf-white-color-10: rgba(255, 255, 255, 0.1);
+  --pf-white-color-15: rgba(255, 255, 255, 0.15);
+  --pf-white-color-20: rgba(255, 255, 255, 0.2);
+  --pf-white-color-30: rgba(255, 255, 255, 0.3);
+  --pf-white-color-40: rgba(255, 255, 255, 0.4);
+  --pf-white-color-50: rgba(255, 255, 255, 0.5);
+  --pf-white-color-60: rgba(255, 255, 255, 0.6);
+  --pf-white-color-70: rgba(255, 255, 255, 0.7);
+  --pf-white-color-80: rgba(255, 255, 255, 0.8);
+  --pf-white-color-90: rgba(255, 255, 255, 0.9);
+  --pf-white-color-100: rgba(255, 255, 255, 1);
   // Utility Colors
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);
-  --pf-warning-color: var(--pf-orange-color);
-  --pf-neutral-color: var(--pf-gray-color);
-  --pf-info-color: var(--pf-secondary-color);
+  --pf-warning-color: var(--pf-yellow-color-300);
+  --pf-neutral-color: var(--pf-gray-color-100);
+  --pf-info-color: var(--pf-secondary-color-200);
+  --pf-brand-color: var(--pf-secondary-color-550);
   --pf-link-color: var(--pf-gray-color-300);
   --pf-link-hover-color: var(--pf-gray-color-100);

package/src/styles/variables/themes/light.scss CHANGED Viewed

@@ -1,5 +1,4 @@
-:root [data-theme='light'],
-:root {
+:root [data-theme='light'] {
   // Primary Color
   --pf-primary-color: #6833d0;