Add errorColor

jupyterlab-contrib · Dec 28, 2023 · 44862b8 · 44862b8
1 parent 72219a3
commit 44862b8
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 13 deletions.
diff --git a/packages/components/src/design-system-provider/design-system-provider.stories.ts b/packages/components/src/design-system-provider/design-system-provider.stories.ts
@@ -35,7 +35,8 @@ export default {
         '#d83b01'
       ]
     },
-    neutralColor: { control: 'color' }
+    neutralColor: { control: 'color' },
+    errorColor: { control: 'color' }
   }
 } as Meta;
 
@@ -45,8 +46,9 @@ const Template: StoryFn = (args): string => {
   fill-color="${args.fillColor}"
   accent-color="${args.accentColor}"
   neutral-color="${args.neutralColor}"
+  error-color="${args.errorColor}"
 >
-  <jp-button appearance="accent">Accent</jp-button><jp-button>Neutral</jp-button>
+  <jp-button appearance="accent">Accent</jp-button><jp-button>Neutral</jp-button><jp-button appearance="error">Error</jp-button>
 </jp-design-system-provider>
   `;
 };
@@ -56,5 +58,6 @@ export const Default: StoryObj = { render: Template.bind({}) };
 Default.args = {
   neutralColor: '#808080',
   accentColor: '#DA1A5F',
-  fillColor: '#3b3b3b'
+  fillColor: '#3b3b3b',
+  errorColor: '#D32F2F'
 };
diff --git a/packages/components/src/design-system-provider/index.ts b/packages/components/src/design-system-provider/index.ts
@@ -40,6 +40,7 @@ import {
   designUnit,
   direction,
   disabledOpacity,
+  errorColor,
   fillColor,
   focusStrokeWidth,
   neutralColor,
@@ -229,6 +230,19 @@ export class DesignSystemProvider extends FoundationElement {
   @designToken(neutralColor)
   public neutralColor?: Swatch;
 
+  /**
+   * Set the error color
+   * @remarks
+   * HTML attribute: error-color
+   */
+  @attr({
+    attribute: 'error-color',
+    converter: swatchConverter,
+    mode: 'fromView'
+  })
+  @designToken(errorColor)
+  public errorColor?: Swatch;
+
   /**
    *
    * The density offset, used with designUnit to calculate height and spacing.

diff --git a/packages/components/src/design-tokens.ts b/packages/components/src/design-tokens.ts
@@ -1029,13 +1029,17 @@ export const heightNumberAsToken = DesignToken.create<number>({
  * The delta used are those of the accent palette.
  */
 
+/** @public */
+export const errorColor = create<Swatch>('error-color').withDefault(errorBase);
+
 /**
  * Error palette
+ * @public
  */
-export const errorPalette = create<Palette>({
-  name: 'error-palette',
-  cssCustomPropertyName: null
-}).withDefault(PaletteRGB.from(errorBase));
+export const errorPalette = createNonCss<Palette>('error-palette').withDefault(
+  (element: HTMLElement) =>
+    PaletteRGB.from(errorColor.getValueFor(element) as SwatchRGB)
+);
 
 // Error Fill
 /** @public */

diff --git a/packages/components/src/utilities/theme/applyTheme.ts b/packages/components/src/utilities/theme/applyTheme.ts
@@ -17,6 +17,7 @@ import {
   baseLayerLuminance,
   bodyFont,
   controlCornerRadius,
+  errorColor,
   neutralColor,
   strokeWidth,
   typeRampBaseFontSize
@@ -156,6 +157,29 @@ const tokenMappings: { [key: string]: IConverter<any> } = {
     },
     token: accentColor
   },
+  '--jp-error-color1': {
+    converter: (value: string, isDark: boolean): Swatch | null => {
+      const parsedColor = parseColor(value);
+      if (parsedColor) {
+        const hsl = rgbToHSL(parsedColor);
+        // Correct luminance to get error fill closer
+        const direction = isDark ? 1 : -1;
+        const correctedHSL = ColorHSL.fromObject({
+          h: hsl.h,
+          s: hsl.s,
+          l:
+            hsl.l +
+            (direction * accentFillHoverDelta.getValueFor(document.body)) / 94.0
+        });
+        const correctedRGB = hslToRGB(correctedHSL!);
+
+        return SwatchRGB.create(correctedRGB.r, correctedRGB.g, correctedRGB.b);
+      } else {
+        return null;
+      }
+    },
+    token: errorColor
+  },
   '--jp-ui-font-family': {
     token: bodyFont
   },

diff --git a/packages/lab-example/src/index.tsx b/packages/lab-example/src/index.tsx
@@ -193,7 +193,7 @@ const plugin: JupyterFrontEndPlugin<void> = {
 
     app.restored.then(() => {
       app.shell.add(widget, 'main');
-      app.shell.add(reactWidget, 'main', { mode: 'split-bottom' });
+      app.shell.add(reactWidget, 'main', { mode: 'split-right' });
       app.shell.activateById(widget.id);
 
       const dataGrid: WebDataGrid | null =
@@ -252,10 +252,13 @@ function Artwork(props: { dataRef: React.Ref<WebDataGrid> }): JSX.Element {
       <div className="jp-FlexColumn" style={{ gridColumn: 1 }}>
         <div className="jp-FlexRow">
           <Button appearance="accent" onClick={onClick}>
-            Button
+            Accent
           </Button>
           <Button appearance="neutral" onClick={onClick}>
-            Button
+            Default
+          </Button>
+          <Button appearance="error" onClick={onClick}>
+            Error
           </Button>
           <Button appearance="stealth" aria-label="Confirm" onClick={onClick}>
             <span className="fa fa-cog"></span>
@@ -484,8 +487,9 @@ function createNode(): HTMLElement {
 <div class="jp-Grid">
     <div class="jp-FlexColumn" style="grid-column: 1;">
       <div class="jp-FlexRow">
-        <jp-button appearance="accent">Button</jp-button>
-        <jp-button appearance="neutral">Button</jp-button>
+        <jp-button appearance="accent">Accent</jp-button>
+        <jp-button appearance="neutral">Default</jp-button>
+        <jp-button appearance="error">Error</jp-button>
         <jp-button appearance="stealth" aria-label="Confirm"><span class="fa fa-cog"></span></jp-button>
       </div>
       <jp-anchor appearance="outline" href="#">

diff --git a/packages/react-components/src/button/index.tsx b/packages/react-components/src/button/index.tsx
@@ -9,7 +9,13 @@ const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
 
 export const Button: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {
-    appearance?: 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth';
+    appearance?:
+      | 'accent'
+      | 'error'
+      | 'lightweight'
+      | 'neutral'
+      | 'outline'
+      | 'stealth';
     'aria-label'?: string;
     autofocus?: boolean;
     disabled?: boolean;

diff --git a/packages/react-components/src/design-system-provider/index.tsx b/packages/react-components/src/design-system-provider/index.tsx
@@ -16,6 +16,7 @@ export const DesignSystemProvider: React.DetailedHTMLFactory<
     'fill-color'?: string;
     'accent-color'?: string;
     'neutral-color'?: string;
+    'error-color'?: string;
     density?: number;
     'design-unit'?: number;
     direction?: 'ltr' | 'rtl';