@indico-data/design-system 2.26.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);
 }
@@ -3334,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);
 }
@@ -3334,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.26.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,5 +1,5 @@
 
-$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";
 

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/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>

package/src/stylesAndAnimations/colors/constants.ts

@@ -1,4 +1,4 @@
-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: {
@@ -37,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',
@@ -119,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',