@indico-data/design-system 2.25.0 → 2.27.0

package/lib/index.css

@@ -61,6 +61,15 @@
   --pf-gray-color-700: #2c2c2c;
   --pf-gray-color-800: #1f1f1f;
   --pf-gray-color-900: #141414;
+  --pf-steel-color-100: #f4f6f8;
+  --pf-steel-color-200: #d9dee5;
+  --pf-steel-color-300: #bcc3cd;
+  --pf-steel-color-400: #a0a9b5;
+  --pf-steel-color-500: #7c8594;
+  --pf-steel-color-600: #5f697a;
+  --pf-steel-color-700: #454e5e;
+  --pf-steel-color-800: #2d3444;
+  --pf-steel-color-900: #1b202c;
   --pf-green-color: #008a00;
   --pf-green-color-100: #d6ecd6;
   --pf-green-color-200: #99d099;
@@ -133,6 +142,16 @@
   --pf-gray-color-700: #828588;
   --pf-gray-color-800: #797979;
   --pf-gray-color-900: #585858;
+  --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-green-color: #199d19;
   --pf-green-color-100: #98ff98;
   --pf-green-color-200: #76ff76;
@@ -2764,6 +2783,86 @@ p,
   background-color: var(--pf-gray-color-900);
 }
 
+.color-steel {
+  color: var(--pf-steel-color);
+}
+
+.bg-steel {
+  background-color: var(--pf-steel-color);
+}
+
+.color-steel-100 {
+  color: var(--pf-steel-color-100);
+}
+
+.bg-steel-100 {
+  background-color: var(--pf-steel-color-100);
+}
+
+.color-steel-200 {
+  color: var(--pf-steel-color-200);
+}
+
+.bg-steel-200 {
+  background-color: var(--pf-steel-color-200);
+}
+
+.color-steel-300 {
+  color: var(--pf-steel-color-300);
+}
+
+.bg-steel-300 {
+  background-color: var(--pf-steel-color-300);
+}
+
+.color-steel-400 {
+  color: var(--pf-steel-color-400);
+}
+
+.bg-steel-400 {
+  background-color: var(--pf-steel-color-400);
+}
+
+.color-steel-500 {
+  color: var(--pf-steel-color-500);
+}
+
+.bg-steel-500 {
+  background-color: var(--pf-steel-color-500);
+}
+
+.color-steel-600 {
+  color: var(--pf-steel-color-600);
+}
+
+.bg-steel-600 {
+  background-color: var(--pf-steel-color-600);
+}
+
+.color-steel-700 {
+  color: var(--pf-steel-color-700);
+}
+
+.bg-steel-700 {
+  background-color: var(--pf-steel-color-700);
+}
+
+.color-steel-800 {
+  color: var(--pf-steel-color-800);
+}
+
+.bg-steel-800 {
+  background-color: var(--pf-steel-color-800);
+}
+
+.color-steel-900 {
+  color: var(--pf-steel-color-900);
+}
+
+.bg-steel-900 {
+  background-color: var(--pf-steel-color-900);
+}
+
 .color-green {
   color: var(--pf-green-color);
 }
@@ -3004,6 +3103,46 @@ p,
   background-color: var(--pf-red-color-900);
 }
 
+.color-success {
+  color: var(--pf-success-color);
+}
+
+.bg-success {
+  background-color: var(--pf-success-color);
+}
+
+.color-info {
+  color: var(--pf-info-color);
+}
+
+.bg-info {
+  background-color: var(--pf-info-color);
+}
+
+.color-neutral {
+  color: var(--pf-neutral-color);
+}
+
+.bg-neutral {
+  background-color: var(--pf-neutral-color);
+}
+
+.color-warning {
+  color: var(--pf-warning-color);
+}
+
+.bg-warning {
+  background-color: var(--pf-warning-color);
+}
+
+.color-error {
+  color: var(--pf-error-color);
+}
+
+.bg-error {
+  background-color: var(--pf-error-color);
+}
+
 .border {
   border: solid 1px;
 }
@@ -3294,6 +3433,46 @@ p,
   border-color: var(--pf-gray-color-900);
 }
 
+.border-steel {
+  border-color: var(--pf-steel-color);
+}
+
+.border-steel-100 {
+  border-color: var(--pf-steel-color-100);
+}
+
+.border-steel-200 {
+  border-color: var(--pf-steel-color-200);
+}
+
+.border-steel-300 {
+  border-color: var(--pf-steel-color-300);
+}
+
+.border-steel-400 {
+  border-color: var(--pf-steel-color-400);
+}
+
+.border-steel-500 {
+  border-color: var(--pf-steel-color-500);
+}
+
+.border-steel-600 {
+  border-color: var(--pf-steel-color-600);
+}
+
+.border-steel-700 {
+  border-color: var(--pf-steel-color-700);
+}
+
+.border-steel-800 {
+  border-color: var(--pf-steel-color-800);
+}
+
+.border-steel-900 {
+  border-color: var(--pf-steel-color-900);
+}
+
 .border-green {
   border-color: var(--pf-green-color);
 }

package/lib/index.esm.css

@@ -61,6 +61,15 @@
   --pf-gray-color-700: #2c2c2c;
   --pf-gray-color-800: #1f1f1f;
   --pf-gray-color-900: #141414;
+  --pf-steel-color-100: #f4f6f8;
+  --pf-steel-color-200: #d9dee5;
+  --pf-steel-color-300: #bcc3cd;
+  --pf-steel-color-400: #a0a9b5;
+  --pf-steel-color-500: #7c8594;
+  --pf-steel-color-600: #5f697a;
+  --pf-steel-color-700: #454e5e;
+  --pf-steel-color-800: #2d3444;
+  --pf-steel-color-900: #1b202c;
   --pf-green-color: #008a00;
   --pf-green-color-100: #d6ecd6;
   --pf-green-color-200: #99d099;
@@ -133,6 +142,16 @@
   --pf-gray-color-700: #828588;
   --pf-gray-color-800: #797979;
   --pf-gray-color-900: #585858;
+  --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-green-color: #199d19;
   --pf-green-color-100: #98ff98;
   --pf-green-color-200: #76ff76;
@@ -2764,6 +2783,86 @@ p,
   background-color: var(--pf-gray-color-900);
 }
 
+.color-steel {
+  color: var(--pf-steel-color);
+}
+
+.bg-steel {
+  background-color: var(--pf-steel-color);
+}
+
+.color-steel-100 {
+  color: var(--pf-steel-color-100);
+}
+
+.bg-steel-100 {
+  background-color: var(--pf-steel-color-100);
+}
+
+.color-steel-200 {
+  color: var(--pf-steel-color-200);
+}
+
+.bg-steel-200 {
+  background-color: var(--pf-steel-color-200);
+}
+
+.color-steel-300 {
+  color: var(--pf-steel-color-300);
+}
+
+.bg-steel-300 {
+  background-color: var(--pf-steel-color-300);
+}
+
+.color-steel-400 {
+  color: var(--pf-steel-color-400);
+}
+
+.bg-steel-400 {
+  background-color: var(--pf-steel-color-400);
+}
+
+.color-steel-500 {
+  color: var(--pf-steel-color-500);
+}
+
+.bg-steel-500 {
+  background-color: var(--pf-steel-color-500);
+}
+
+.color-steel-600 {
+  color: var(--pf-steel-color-600);
+}
+
+.bg-steel-600 {
+  background-color: var(--pf-steel-color-600);
+}
+
+.color-steel-700 {
+  color: var(--pf-steel-color-700);
+}
+
+.bg-steel-700 {
+  background-color: var(--pf-steel-color-700);
+}
+
+.color-steel-800 {
+  color: var(--pf-steel-color-800);
+}
+
+.bg-steel-800 {
+  background-color: var(--pf-steel-color-800);
+}
+
+.color-steel-900 {
+  color: var(--pf-steel-color-900);
+}
+
+.bg-steel-900 {
+  background-color: var(--pf-steel-color-900);
+}
+
 .color-green {
   color: var(--pf-green-color);
 }
@@ -3004,6 +3103,46 @@ p,
   background-color: var(--pf-red-color-900);
 }
 
+.color-success {
+  color: var(--pf-success-color);
+}
+
+.bg-success {
+  background-color: var(--pf-success-color);
+}
+
+.color-info {
+  color: var(--pf-info-color);
+}
+
+.bg-info {
+  background-color: var(--pf-info-color);
+}
+
+.color-neutral {
+  color: var(--pf-neutral-color);
+}
+
+.bg-neutral {
+  background-color: var(--pf-neutral-color);
+}
+
+.color-warning {
+  color: var(--pf-warning-color);
+}
+
+.bg-warning {
+  background-color: var(--pf-warning-color);
+}
+
+.color-error {
+  color: var(--pf-error-color);
+}
+
+.bg-error {
+  background-color: var(--pf-error-color);
+}
+
 .border {
   border: solid 1px;
 }
@@ -3294,6 +3433,46 @@ p,
   border-color: var(--pf-gray-color-900);
 }
 
+.border-steel {
+  border-color: var(--pf-steel-color);
+}
+
+.border-steel-100 {
+  border-color: var(--pf-steel-color-100);
+}
+
+.border-steel-200 {
+  border-color: var(--pf-steel-color-200);
+}
+
+.border-steel-300 {
+  border-color: var(--pf-steel-color-300);
+}
+
+.border-steel-400 {
+  border-color: var(--pf-steel-color-400);
+}
+
+.border-steel-500 {
+  border-color: var(--pf-steel-color-500);
+}
+
+.border-steel-600 {
+  border-color: var(--pf-steel-color-600);
+}
+
+.border-steel-700 {
+  border-color: var(--pf-steel-color-700);
+}
+
+.border-steel-800 {
+  border-color: var(--pf-steel-color-800);
+}
+
+.border-steel-900 {
+  border-color: var(--pf-steel-color-900);
+}
+
 .border-green {
   border-color: var(--pf-green-color);
 }

package/lib/src/stylesAndAnimations/colors/Swatch.d.ts

@@ -1,8 +1,8 @@
 import './swatches.scss';
 interface Props {
     color: string;
-    shade: number;
     colorValue: string;
+    shade?: number;
 }
 export declare const Swatch: ({ color, shade, colorValue }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/src/stylesAndAnimations/colors/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const colorList: string[];
+export declare const utilityColorList: string[];
 export declare const lightThemeColors: Record<string, any>;
 export declare const darkThemeColors: Record<string, any>;
 export declare const shades = 9;

package/package.json

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

package/src/styles/_borders.scss

@@ -8,7 +8,7 @@ $directions: (
   ("r", right
 );
 $styles: dashed, dotted, double, solid;
-$color-names: "primary", "secondary", "gray", "green", "orange", "red";
+$color-names: "primary", "secondary", "gray", "steel", "green", "orange", "red";
 $color-grades: "100", "200", "300", "400", "500", "600", "700", "800", "900";
 $radiusSizes: 0, sm, lg, md, xl, pill, circle, shaped;
 $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md), var(--pf-rounded-lg), var(--pf-rounded-xl), var(--pf-rounded-pill), var(--pf-rounded-circle), var(--pf-rounded-shaped);

package/src/styles/_colors.scss

@@ -1,6 +1,7 @@
 
-$color-names: "primary", "secondary", "gray", "green", "orange", "red";
+$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";
 
 @each $color-name in $color-names {
   .color-#{$color-name} {
@@ -20,4 +21,14 @@ $color-grades: "100", "200", "300", "400", "500", "600", "700", "800", "900";
       background-color: var(--pf-#{$color-name}-color-#{$color-grade});
     }
   }
-}
+}
+
+@each $color-name in $utility-color-names {
+  .color-#{$color-name} {
+    color: var(--pf-#{$color-name}-color);
+  }
+
+  .bg-#{$color-name} {
+    background-color: var(--pf-#{$color-name}-color);
+  }
+}

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

@@ -39,6 +39,19 @@
   --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;
+
   //Green Color
   --pf-green-color: #199d19;
 

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

@@ -39,6 +39,17 @@
   --pf-gray-color-800: #1f1f1f;
   --pf-gray-color-900: #141414;
 
+  // Steel Color
+  --pf-steel-color-100: #f4f6f8;
+  --pf-steel-color-200: #d9dee5;
+  --pf-steel-color-300: #bcc3cd;
+  --pf-steel-color-400: #a0a9b5;
+  --pf-steel-color-500: #7c8594;
+  --pf-steel-color-600: #5f697a;
+  --pf-steel-color-700: #454e5e;
+  --pf-steel-color-800: #2d3444;
+  --pf-steel-color-900: #1b202c;
+
   //Green Color *do success warning etc etc
   --pf-green-color: #008a00;
   --pf-green-color-100: #d6ecd6;

package/src/stylesAndAnimations/colors/Colors.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { Container, Row, Col } from 'react-grid-system';
-import { colorList, darkThemeColors, lightThemeColors, shades } from './constants';
+import {
+  colorList,
+  darkThemeColors,
+  lightThemeColors,
+  shades,
+  utilityColorList,
+} from './constants';
 import { Swatch } from './Swatch';
 import { useTheme } from './hooks'; // import the custom hook
 
@@ -24,6 +30,14 @@ export const Colors = () => {
           );
         })}
       </Row>
+      <Row>
+        <Col sm={4} key="utility">
+          <h1 className="text-capitalize my-5">Utility Colors</h1>
+          {utilityColorList.map((color) => {
+            return <Swatch key={color} color={color} colorValue={themeColors.utility[color]} />;
+          })}
+        </Col>
+      </Row>
     </Container>
   );
 };

package/src/stylesAndAnimations/colors/Swatch.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
 import './swatches.scss';
 import { Row, Col } from 'react-grid-system';
+
 interface Props {
   color: string;
-  shade: number;
   colorValue: string;
+  shade?: number;
 }
 
 export const Swatch = ({ color, shade, colorValue }: Props) => {
-  const handleCopy = (colorValue: string) => {
-    navigator.clipboard.writeText(colorValue);
+  const handleCopy = (value: string) => {
+    navigator.clipboard.writeText(value);
   };
 
   return (
-    <Row className="sb__swatch" key={shade} onClick={() => handleCopy(colorValue)}>
+    <Row className="sb__swatch" key={shade ?? colorValue} onClick={() => handleCopy(colorValue)}>
       <Col xs="content">
-        <div className={`sb__swatch__block bg-${color}-${shade}`}></div>
+        <div
+          className={`sb__swatch__block bg-${color}${shade ? `-${shade}` : ''}`}
+          title={`--pf-${color}-color${shade ? `-${shade}` : ''}`}
+        ></div>
       </Col>
       <Col className="sb__swatch__description">
-        {shade} - {colorValue}
+        {`${shade ? `${shade} - ` : `${color} - `}${colorValue}`}
       </Col>
     </Row>
   );

package/src/stylesAndAnimations/colors/UtilityClasses.tsx

@@ -81,6 +81,9 @@ export const UtilityClasses = () => {
         <li>
           <span className="color-gray">gray</span>
         </li>
+        <li>
+          <span className="color-steel">steel</span>
+        </li>
         <li>
           <span className="color-green">green</span>
         </li>
@@ -91,6 +94,24 @@ export const UtilityClasses = () => {
           <span className="color-red">red</span>
         </li>
       </ul>
+      <h2>Utility Colors</h2>
+      <ul>
+        <li>
+          <span className="color-success">success</span>
+        </li>
+        <li>
+          <span className="color-info">info</span>
+        </li>
+        <li>
+          <span className="color-neutral">neutral</span>
+        </li>
+        <li>
+          <span className="color-warning">warning</span>
+        </li>
+        <li>
+          <span className="color-error">error</span>
+        </li>
+      </ul>
     </>
   );
 };

package/src/stylesAndAnimations/colors/constants.ts

@@ -1,4 +1,5 @@
-export const colorList = ['primary', 'secondary', 'gray', 'red', 'orange', 'green'];
+export const colorList = ['primary', 'secondary', 'gray', 'steel', 'red', 'orange', 'green'];
+export const utilityColorList = ['success', 'info', 'neutral', 'warning', 'error'];
 export const lightThemeColors = {
   primary: {
     base: '#6833D0',
@@ -36,6 +37,18 @@ export const lightThemeColors = {
     800: '#1F1F1F',
     900: '#141414',
   },
+  steel: {
+    base: '#7C8594',
+    100: '#F4F6F8',
+    200: '#D9DEE5',
+    300: '#BCC3CD',
+    400: '#A0A9B5',
+    500: '#7C8594',
+    600: '#5F697A',
+    700: '#454E5E',
+    800: '#2D3444',
+    900: '#1B202C',
+  },
   green: {
     base: '#008A00',
     100: '#D6ECD6',
@@ -72,6 +85,13 @@ export const lightThemeColors = {
     800: '#B01B1D',
     900: '#9D181A',
   },
+  utility: {
+    success: '#168116',
+    info: '#2070D1',
+    neutral: '#BFC1C3',
+    warning: '#C7892F',
+    error: '#D52023',
+  },
 } as Record<string, any>;
 
 export const darkThemeColors = {
@@ -111,6 +131,18 @@ export const darkThemeColors = {
     800: '#797979',
     900: '#585858',
   },
+  steel: {
+    base: '#3e4751',
+    100: '#9aa1b1',
+    200: '#7c8594',
+    300: '#6a717e',
+    400: '#545c67',
+    500: '#3e4751',
+    600: '#2d3444',
+    700: '#232a3a',
+    800: '#1a202f',
+    900: '#11161f',
+  },
   green: {
     base: '#199d19',
     100: '#98ff98',
@@ -147,5 +179,12 @@ export const darkThemeColors = {
     800: '#9a3132',
     900: '#752324',
   },
+  utility: {
+    success: '#199D19',
+    info: '#0070F5',
+    neutral: '#BFC1C3',
+    warning: '#DA9534',
+    error: '#F44D4F',
+  },
 } as Record<string, any>;
 export const shades = 9;