@indico-data/design-system 2.28.2 → 2.29.0

package/package.json

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

package/src/components/button/styles/Button.scss

@@ -201,3 +201,6 @@
 .btn--outline {
   background-color: var(--pf-button-outline-background-color);
 }
+.btn.btn--primary.btn--text {
+  color: var(--pf-link-color);
+}

package/src/components/card/styles/Card.scss

@@ -13,6 +13,7 @@
   --pf-card-background-color: var(--pf-primary-color);
   --pf-card-border-color: var(--pf-primary-color-200);
   --pf-card-text-color: var(--pf-gray-color-100);
+  --pf-card-border-color: var(--pf-steel-color-600);
 }
 
 .card {

package/src/components/floatUI/styles/_variables.scss

@@ -3,12 +3,12 @@
 :root [data-theme='light'],
 :root [data-theme='dark'] {
   --pf-floatui-background-color: var(--pf-white-color);
-  --pf-floatui-border-color: var(--pf-gray-color-900);
+  --pf-floatui-border-color: var(--pf-border-color-900);
   --pf-floatui-border-radius: var(--pf-rounded);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'] {
   --pf-floatui-background-color: var(--pf-primary-color-600);
-  --pf-floatui-border-color: var(--pf-gray-color);
+  --pf-floatui-border-color: var(--pf-border-color);
 }

package/src/components/forms/input/styles/Input.scss

@@ -20,7 +20,7 @@
   --pf-input-background-color: var(--pf-primary-color);
   --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color-100);
-  --pf-input-placeholder-text-color: var(--pf-gray-color);
+  --pf-input-placeholder-text-color: var(--pf-gray-color-600);
   --pf-input-help-text-color: var(--pf-gray-color-200);
   --pf-input-disabled-background-color: var(--pf-primary-color-200);
   --pf-input-disabled-border-color: var(--pf-gray-color-300);

package/src/legacy/styles/globals/typography.ts

@@ -14,20 +14,7 @@ export const Typography = createGlobalStyle`
     font-style: normal;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: ${TYPOGRAPHY.fontFamily.base};
-    font-size: ${TYPOGRAPHY.fontSize.display};
-    line-height: ${TYPOGRAPHY.lineHeight.heading};
-    margin: 0 0 10px;
-    color: ${COLORS.lightGray};
-    font-weight: 400;
-    font-style: normal;
-  }
+
 
   h3 {
     font-size: ${TYPOGRAPHY.fontSize.subheadLarge};

package/src/styles/_borders.scss

@@ -1,20 +1,18 @@
 $sizes: thin, sm, md, lg, 0, xl;
-$values: var(--pf-border-thin), var(--pf-border-sm), var(--pf-border-md), var(--pf-border-lg), 0, var(--pf-border-xl);
-$directions: (
-  "t",
-  top),
-  ("b", bottom),
-  ("l", left),
-  ("r", right
-);
+$values: var(--pf-border-thin), var(--pf-border-sm), var(--pf-border-md), var(--pf-border-lg), 0,
+  var(--pf-border-xl);
+$directions: ('t', top), ('b', bottom), ('l', left), ('r', right);
 $styles: dashed, dotted, double, solid;
-$color-names: "primary", "secondary", "gray", "steel", "green", "orange", "red";
-$color-grades: "100", "200", "300", "400", "500", "600", "700", "800", "900";
+$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);
+$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);
 
 .border {
   border: solid 1px;
+  border-color: var(--pf-border-color);
+  border-radius: var(--pf-rounded);
 }
 
 @each $size, $value in zip($sizes, $values) {
@@ -57,4 +55,4 @@ $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md),
   .rounded-#{$size} {
     border-radius: $value;
   }
-}
+}

package/src/styles/_colors.scss

@@ -1,7 +1,6 @@
-
-$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', '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} {
@@ -32,3 +31,10 @@ $utility-color-names: "success", "info", "neutral", "warning", "error";
     background-color: var(--pf-#{$color-name}-color);
   }
 }
+
+.link-color {
+  color: var(--pf-link-color);
+}
+.active-link-color {
+  color: var(--pf-active-link-color);
+}

package/src/styles/_sheets.scss

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

package/src/styles/globals.scss

@@ -1,11 +1,79 @@
-// Common Variables
-:root,
 :root [data-theme='light'],
-:root [data-theme='dark'] {
-  --pf-form-input-border-color: var(--pf-gray-color-700);
+:root {
+  // Globals
+  // ***********************************************************************************************************************************
+  --pf-white-color: #ffffff;
+  --pf-black-color: #000000;
+  --pf-background-color-light: var(--pf-gray-color-100);
+  --pf-background-color: var(--pf-white-color);
+  --pf-background-color-dark: var(--pf-gray-color-300);
+  --pf-background-secondary-color-light: var(--secondary-color-300);
+  --pf-background-color-secondary: var(--pf-secondary-color-500);
+  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
+
+  // Fonts
+  // ***********************************************************************************************************************************
+  --pf-font-color: var(--pf-gray-color);
+  --pf-font-color-emphasis: var(--pf-gray-color-800);
+  --pf-font-color-light: var(--pf-gray-color-400);
+  --pf-font-color-light-header: var(--pf-primary-color-100);
+
+  // Links
+  // ***********************************************************************************************************************************
+  --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);
 }
 
-// Dark Theme Specific Variables
 :root [data-theme='dark'] {
-  --pf-form-input-border-color: var(--pf-primary-color-200);
+  // Globals
+  // ***********************************************************************************************************************************
+  --pf-white-color: #ffffff;
+  --pf-black-color: #000000;
+  --pf-background-color-light: var(--primary-color-300);
+  --pf-background-color: var(--pf-primary-color-600);
+  --pf-background-color-dark: var(--pf-primary-color-900);
+  --pf-background-secondary-color-light: var(--secondary-color-300);
+  --pf-background-color-secondary: var(--pf-secondary-color-500);
+  --pf-background-color-secondary-dark: var(--pf-secondary-color-900);
+
+  // Fonts
+  // ***********************************************************************************************************************************
+  --pf-font-color: var(--pf-gray-color);
+  --pf-font-color-emphasis: var(--pf-gray-color-300);
+  --pf-font-color-light: var(--pf-gray-color-100);
+  --pf-font-color-light-header: var(--pf-primary-color-100);
+
+  // Links
+  // ***********************************************************************************************************************************
+  --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
+// ***********************************************************************************************************************************
+html,
+body {
+  padding: 0;
+  margin: 0;
+  color: var(--pf-font-color);
+  font-size: var(--pf-font-size-base);
+  font-family: var(--pf-font-family-base);
+  font-weight: var(--pf-font-weight-regular);
+}
+
+.theme {
+  background-color: var(--pf-background-color);
+  color: var(--pf-font-color);
 }

package/src/styles/index.scss

@@ -20,6 +20,7 @@
 @import '../components/floatUI/styles/FloatUI.scss';
 @import '../legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss';
 @import '../components/pill/styles/Pill.scss';
+@import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/styles/variables/_borders.scss

@@ -13,4 +13,17 @@
   --pf-rounded-pill: 9999px;
   --pf-rounded-circle: 50%;
   --pf-rounded-shaped: 24px 0;
-}
+}
+
+:root [data-theme='light'],
+:root {
+  --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'] {
+  --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);
+}

package/src/styles/variables/_typography.scss

@@ -33,3 +33,15 @@
   --pf-label-size-md: var(--pf-font-size-body);
   --pf-label-size-lg: var(--pf-font-size-h2);
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li {
+  color: var(--pf-font-color);
+}

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

@@ -40,6 +40,8 @@
   --pf-gray-color-900: #141414;
 
   // Steel Color
+  --pf-steel-color: #7c8594;
+
   --pf-steel-color-100: #f4f6f8;
   --pf-steel-color-200: #d9dee5;
   --pf-steel-color-300: #bcc3cd;
@@ -86,9 +88,6 @@
   --pf-red-color-800: #b01b1d;
   --pf-red-color-900: #9d181a;
 
-  //White color
-  --pf-white-color: #ffffff;
-
   // Utility Colors
   --pf-error-color: var(--pf-red-color-600);
   --pf-success-color: var(--pf-green-color-600);

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -5,6 +5,10 @@ import './borders.scss';
 export const BorderColor = () => {
   return (
     <div className="sb__border-story">
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg"></div>
+        <p className="text-align--center">border</p>
+      </div>
       <div>
         <div className="sb__square bg-gray-800 border border-lg border-primary"></div>
         <p className="text-align--center">border-primary</p>
@@ -29,6 +33,10 @@ export const BorderColor = () => {
         <div className="sb__square bg-gray-800 border border-lg border-orange"></div>
         <p className="text-align--center">border-orange</p>
       </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-steel"></div>
+        <p className="text-align--center">border-steel</p>
+      </div>
     </div>
   );
 };

package/src/stylesAndAnimations/colors/Colors.tsx

@@ -8,10 +8,10 @@ import {
   utilityColorList,
 } from './constants';
 import { Swatch } from './Swatch';
-import { useTheme } from './hooks'; // import the custom hook
+import { useTheme } from './hooks';
 
 export const Colors = () => {
-  const theme = useTheme(); // use the custom hook
+  const theme = useTheme();
 
   const themeColors = theme === 'dark' ? darkThemeColors : lightThemeColors;
 
@@ -20,7 +20,7 @@ export const Colors = () => {
       <Row>
         {colorList.map((color) => {
           return (
-            <Col sm={4} key={color}>
+            <Col sm={6} key={color}>
               <h1 className="text-capitalize my-5">{color}</h1>
               {Array.from({ length: shades }, (_, i) => (i + 1) * 100).map((shade) => {
                 const colorValue = themeColors[color][shade];
@@ -31,7 +31,7 @@ export const Colors = () => {
         })}
       </Row>
       <Row>
-        <Col sm={4} key="utility">
+        <Col sm={6} key="utility">
           <h1 className="text-capitalize my-5">Utility Colors</h1>
           {utilityColorList.map((color) => {
             return <Swatch key={color} color={color} colorValue={themeColors.utility[color]} />;

package/src/stylesAndAnimations/colors/Swatch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './swatches.scss';
 import { Row, Col } from 'react-grid-system';
+import { Icon } from '../../components';
 
 interface Props {
   color: string;
@@ -13,16 +14,39 @@ export const Swatch = ({ color, shade, colorValue }: Props) => {
     navigator.clipboard.writeText(value);
   };
 
+  const cssVar = `--pf-${color}-color${shade ? `-${shade}` : ''}`;
+
   return (
-    <Row className="sb__swatch" key={shade ?? colorValue} onClick={() => handleCopy(colorValue)}>
+    <Row className="sb__swatch" key={shade ?? colorValue}>
       <Col xs="content">
         <div
           className={`sb__swatch__block bg-${color}${shade ? `-${shade}` : ''}`}
-          title={`--pf-${color}-color${shade ? `-${shade}` : ''}`}
+          title={cssVar}
         ></div>
       </Col>
-      <Col className="sb__swatch__description">
-        {`${shade ? `${shade} - ` : `${color} - `}${colorValue}`}
+      <Col xs={1} className="sb__swatch__description">
+        {colorValue}
+      </Col>
+      <Col xs="content">
+        <span
+          className="sb__swatch__hex link-color"
+          onClick={() => handleCopy(colorValue)}
+          style={{ cursor: 'pointer', margin: '0 10px' }}
+        >
+          <Icon className="ml-8" name="fa-copy" />
+        </span>
+      </Col>
+      <Col xs="content" className="sb__swatch__description">
+        {cssVar}
+      </Col>
+      <Col xs={1}>
+        <span
+          className="sb__swatch__var link-color"
+          onClick={() => handleCopy(cssVar)}
+          style={{ cursor: 'pointer' }}
+        >
+          <Icon name="fa-copy" />
+        </span>
       </Col>
     </Row>
   );

package/src/stylesAndAnimations/colors/UtilityClasses.mdx

@@ -2,9 +2,142 @@ import '../../styles/_colors.scss';
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as UtilityClasses from './UtilityClasses.stories';
 
-{' '}
 <Meta title="Utility Classes/Colors" />
 # Color Utility Classes 
 
 The following pattern is to be used as a method of styling your elements with the colors listed below. We support ***100 to 900*** for our variable ranges.
-<Canvas of={UtilityClasses.Default} />
+<Canvas of={UtilityClasses.Default} 
+source={{
+  code: `
+  <Row>
+  <Col xs={12} className="my-5">
+    <h1 className="mb-5">Color Classes</h1>
+    <p>
+      The below code will apply the background color of the element to the primary color 100.
+      Omitting the number will default to 500. <strong>NOTE</strong> The background classes
+      here have no color style, it is added for documentation contrast
+    </p>
+  </Col>
+  <Col sm={12} md={6}>
+    <h1 className="mb-5">Backgrounds</h1>
+    <div className="bg-primary pa-2">
+      <span className="color-gray-100">bg-primary</span>
+    </div>
+    <div className="bg-primary-100 pa-2">bg-primary-100</div>
+    <div className="bg-primary-200 pa-2">bg-primary-200</div>
+    <div className="bg-primary-300 pa-2">bg-primary-300</div>
+    <div className="bg-primary-400 pa-2">bg-primary-400</div>
+    <div className="bg-primary-500 pa-2">bg-primary-500</div>
+    <div className="bg-primary-600 pa-2">
+      <span className="color-gray-10">bg-primary-600</span>
+    </div>
+    <div className="bg-primary-700 pa-2">
+      <span className="color-gray-100">bg-primary-700</span>
+    </div>
+    <div className="bg-primary-800 pa-2">
+      <span className="color-gray-100">bg-primary-800</span>
+    </div>
+    <div className="bg-primary-900 pa-2">
+      <span className="color-gray-100">bg-primary-900</span>
+    </div>
+  </Col>
+  <Col sm={12} md={6}>
+    <h1 className="mb-5">Text</h1>
+    <ul>
+      <li>
+        <span className="color-primary">color-primary</span>
+      </li>
+      <li>
+        <span className="color-primary-100">color-primary-100</span>
+      </li>
+      <li>
+        <span className="color-primary-200">color-primary-200</span>
+      </li>
+      <li>
+        <span className="color-primary-300">color-primary-300</span>
+      </li>
+      <li>
+        <span className="color-primary-400">color-primary-400</span>
+      </li>
+      <li>
+        <span className="color-primary-500">color-primary-500</span>
+      </li>
+      <li>
+        <span className="color-primary-600">color-primary-600</span>
+      </li>
+      <li>
+        <span className="color-primary-700">color-primary-700</span>
+      </li>
+      <li>
+        <span className="color-primary-800">color-primary-800</span>
+      </li>
+      <li>
+        <span className="color-primary-900">color-primary-900</span>
+      </li>
+    </ul>
+  </Col>
+  <Col className="my-5" xs={12}>
+    <hr />
+    <p>
+      The below code will apply the text color of the element to the primary color 100.
+      Omitting the number will default to 500.
+    </p>
+  </Col>
+  <Col sm={12} md={6}>
+    <h2 className="mb-5">Text Colors</h2>
+    <ul>
+      <li>
+        <span className="color-primary">primary</span>
+      </li>
+      <li>
+        <span className="color-secondary">secondary</span>
+      </li>
+      <li>
+        <span className="color-gray">gray</span>
+      </li>
+      <li>
+        <span className="color-steel">steel</span>
+      </li>
+      <li>
+        <span className="color-green">green</span>
+      </li>
+      <li>
+        <span className="color-orange">orange</span>
+      </li>
+      <li>
+        <span className="color-red">red</span>
+      </li>
+    </ul>
+  </Col>
+  <Col sm={12} md={6}>
+    <h2 className="mb-5">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>
+  </Col>
+  <Col xs={12}>
+    <hr />
+    <h2>Usage Example</h2>
+    <div className="bg-primary-200 pa-5">
+      <p className="color-primary-900">
+                      This background color will be Background Primary Color 200 with text color of
+              color-primary-900
+      </p>
+    </div>
+  </Col>
+</Row>
+`, }} />