@indico-data/design-system 2.24.1 → 2.26.0

package/lib/index.css

@@ -21,6 +21,11 @@
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
+  /* Labels */
+  --pf-label-size: var(--pf-font-size-body);
+  --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);
 }
 
 :root [data-theme=light],
@@ -2246,6 +2251,11 @@ form {
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
+  /* Labels */
+  --pf-label-size: var(--pf-font-size-body);
+  --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);
 }
 
 html {
@@ -2498,6 +2508,22 @@ p,
   color: var(--pf-info-color);
 }
 
+.label-size--default {
+  font-size: var(--pf-label-size);
+}
+
+.label-size--small {
+  font-size: var(--pf-label-size-small);
+}
+
+.label-size--medium {
+  font-size: var(--pf-label-size-medium);
+}
+
+.label-size--large {
+  font-size: var(--pf-label-size-large);
+}
+
 .color-primary {
   color: var(--pf-primary-color);
 }
@@ -2978,6 +3004,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;
 }

package/lib/index.esm.css

@@ -21,6 +21,11 @@
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
+  /* Labels */
+  --pf-label-size: var(--pf-font-size-body);
+  --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);
 }
 
 :root [data-theme=light],
@@ -2246,6 +2251,11 @@ form {
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
+  /* Labels */
+  --pf-label-size: var(--pf-font-size-body);
+  --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);
 }
 
 html {
@@ -2498,6 +2508,22 @@ p,
   color: var(--pf-info-color);
 }
 
+.label-size--default {
+  font-size: var(--pf-label-size);
+}
+
+.label-size--small {
+  font-size: var(--pf-label-size-small);
+}
+
+.label-size--medium {
+  font-size: var(--pf-label-size-medium);
+}
+
+.label-size--large {
+  font-size: var(--pf-label-size-large);
+}
+
 .color-primary {
   color: var(--pf-primary-color);
 }
@@ -2978,6 +3004,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;
 }

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.24.1",
+  "version": "2.26.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/styles/_colors.scss

@@ -1,6 +1,7 @@
 
 $color-names: "primary", "secondary", "gray", "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/_typography.scss

@@ -132,3 +132,18 @@ html {
 .text-info {
   color: var(--pf-info-color);
 }
+
+// Label Sizes
+@each $size-name,
+  $size-var
+    in (
+      default: --pf-label-size,
+      small: --pf-label-size-small,
+      medium: --pf-label-size-medium,
+      large: --pf-label-size-large
+    )
+{
+  .label-size--#{$size-name} {
+    font-size: var(#{$size-var});
+  }
+}

package/src/styles/variables/_typography.scss

@@ -26,4 +26,10 @@
   --pf-font-weight-medium: 500;
   --pf-font-weight-bold: 700;
   --pf-font-weight-heavy: 900;
+
+  /* Labels */
+  --pf-label-size: var(--pf-font-size-body);
+  --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);
 }

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

@@ -91,6 +91,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 utilityColorList = ['success', 'info', 'neutral', 'warning', 'error'];
 export const lightThemeColors = {
   primary: {
     base: '#6833D0',
@@ -72,6 +73,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 = {
@@ -147,5 +155,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;