@janbox/storefront-ui 2.0.32 → 3.0.1

package/dist/lib/table/table-footer/types.d.ts

@@ -1,3 +1,3 @@
 import { JSX } from 'react';
-import { PropsWithSx } from '../../../types';
-export type TableFooterProps = PropsWithSx<JSX.IntrinsicElements['tfoot']>;
+import { PrimitiveProps } from '../../primitive';
+export type TableFooterProps = PrimitiveProps<JSX.IntrinsicElements['tfoot'], 'tfoot'>;

package/dist/theme/palette.d.ts

@@ -1,13 +1,14 @@
 import { Paths } from 'type-fest';
 export declare const getColorVar: (key: PaletteKey, fullVar?: boolean) => string;
 type Scale = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
-type ColorScale = Record<Scale, string>;
+type ColorScale = Record<Scale, string> & {
+    contrast: string;
+};
 export interface Palette {
-    readonly inherit: 'inherit';
-    readonly current: 'currentColor';
-    readonly transparent: 'transparent';
-    readonly black: '#000000';
-    readonly white: '#FFFFFF';
+    readonly common: {
+        readonly black: '#000000';
+        readonly white: '#FFFFFF';
+    };
     background: {
         subtle: string;
         default: string;

package/dist/theme/palette.js

@@ -6,11 +6,10 @@ const getColorVar = (key, fullVar = true) => {
 };
 const prefix = "color";
 const paletteVars = {
-  inherit: "inherit",
-  current: "currentColor",
-  transparent: "transparent",
-  black: "#000000",
-  white: "#FFFFFF",
+  common: {
+    black: "#000000",
+    white: "#FFFFFF"
+  },
   background: {
     subtle: getColorVar("background.subtle"),
     default: getColorVar("background.default"),
@@ -30,7 +29,8 @@ const paletteVars = {
     500: getColorVar("primary.500"),
     600: getColorVar("primary.600"),
     700: getColorVar("primary.700"),
-    800: getColorVar("primary.800")
+    800: getColorVar("primary.800"),
+    contrast: getColorVar("primary.contrast")
     // 900: getColorVar('primary.900'),
   },
   secondary: {
@@ -41,7 +41,8 @@ const paletteVars = {
     500: getColorVar("secondary.500"),
     600: getColorVar("secondary.600"),
     700: getColorVar("secondary.700"),
-    800: getColorVar("secondary.800")
+    800: getColorVar("secondary.800"),
+    contrast: getColorVar("secondary.contrast")
     // 900: getColorVar('secondary.900'),
   },
   red: {
@@ -52,7 +53,8 @@ const paletteVars = {
     500: getColorVar("red.500"),
     600: getColorVar("red.600"),
     700: getColorVar("red.700"),
-    800: getColorVar("red.800")
+    800: getColorVar("red.800"),
+    contrast: getColorVar("red.contrast")
     // 900: getColorVar('red.900'),
   },
   orange: {
@@ -63,7 +65,8 @@ const paletteVars = {
     500: getColorVar("orange.500"),
     600: getColorVar("orange.600"),
     700: getColorVar("orange.700"),
-    800: getColorVar("orange.800")
+    800: getColorVar("orange.800"),
+    contrast: getColorVar("orange.contrast")
     // 900: getColorVar('orange.900'),
   },
   yellow: {
@@ -74,7 +77,8 @@ const paletteVars = {
     500: getColorVar("yellow.500"),
     600: getColorVar("yellow.600"),
     700: getColorVar("yellow.700"),
-    800: getColorVar("yellow.800")
+    800: getColorVar("yellow.800"),
+    contrast: getColorVar("yellow.contrast")
     // 900: getColorVar('yellow.900'),
   },
   green: {
@@ -85,7 +89,8 @@ const paletteVars = {
     500: getColorVar("green.500"),
     600: getColorVar("green.600"),
     700: getColorVar("green.700"),
-    800: getColorVar("green.800")
+    800: getColorVar("green.800"),
+    contrast: getColorVar("green.contrast")
     // 900: getColorVar('green.900'),
   },
   blue: {
@@ -96,7 +101,8 @@ const paletteVars = {
     500: getColorVar("blue.500"),
     600: getColorVar("blue.600"),
     700: getColorVar("blue.700"),
-    800: getColorVar("blue.800")
+    800: getColorVar("blue.800"),
+    contrast: getColorVar("blue.contrast")
     // 900: getColorVar('blue.900'),
   },
   violet: {
@@ -107,7 +113,8 @@ const paletteVars = {
     500: getColorVar("violet.500"),
     600: getColorVar("violet.600"),
     700: getColorVar("violet.700"),
-    800: getColorVar("violet.800")
+    800: getColorVar("violet.800"),
+    contrast: getColorVar("violet.contrast")
     // 900: getColorVar('violet.900'),
   },
   neutral: {
@@ -118,14 +125,15 @@ const paletteVars = {
     500: getColorVar("neutral.500"),
     600: getColorVar("neutral.600"),
     700: getColorVar("neutral.700"),
-    800: getColorVar("neutral.800")
+    800: getColorVar("neutral.800"),
+    contrast: getColorVar("neutral.contrast")
     // 900: getColorVar('neutral.900'),
   }
 };
 const groupedColors = [
   {
     name: "Basic",
-    colors: ["transparent", "black", "white"]
+    colors: ["common.white", "common.black"]
   },
   {
     name: "Background",
@@ -149,7 +157,8 @@ const groupedColors = [
       "primary.500",
       "primary.600",
       "primary.700",
-      "primary.800"
+      "primary.800",
+      "primary.contrast"
       // 'primary.900',
     ]
   },
@@ -163,7 +172,8 @@ const groupedColors = [
       "secondary.500",
       "secondary.600",
       "secondary.700",
-      "secondary.800"
+      "secondary.800",
+      "secondary.contrast"
       // 'secondary.900',
     ]
   },
@@ -177,7 +187,8 @@ const groupedColors = [
       "red.500",
       "red.600",
       "red.700",
-      "red.800"
+      "red.800",
+      "red.contrast"
       // 'red.900'
     ]
   },
@@ -191,7 +202,8 @@ const groupedColors = [
       "orange.500",
       "orange.600",
       "orange.700",
-      "orange.800"
+      "orange.800",
+      "orange.contrast"
       // 'orange.900',
     ]
   },
@@ -205,7 +217,8 @@ const groupedColors = [
       "yellow.500",
       "yellow.600",
       "yellow.700",
-      "yellow.800"
+      "yellow.800",
+      "yellow.contrast"
       // 'yellow.900',
     ]
   },
@@ -219,7 +232,8 @@ const groupedColors = [
       "green.500",
       "green.600",
       "green.700",
-      "green.800"
+      "green.800",
+      "green.contrast"
       // 'green.900',
     ]
   },
@@ -233,7 +247,8 @@ const groupedColors = [
       "blue.500",
       "blue.600",
       "blue.700",
-      "blue.800"
+      "blue.800",
+      "blue.contrast"
       // 'blue.900',
     ]
   },
@@ -247,7 +262,8 @@ const groupedColors = [
       "violet.500",
       "violet.600",
       "violet.700",
-      "violet.800"
+      "violet.800",
+      "violet.contrast"
       // 'violet.900',
     ]
   },
@@ -261,7 +277,8 @@ const groupedColors = [
       "neutral.500",
       "neutral.600",
       "neutral.700",
-      "neutral.800"
+      "neutral.800",
+      "neutral.contrast"
       // 'neutral.900',
     ]
   }

package/dist/utils/index.d.ts

@@ -7,7 +7,7 @@ export * from './query-params';
 export { createUnderlineEffect } from './stylesheet';
 export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     main: string;
-    contrastText: string;
+    contrast: string;
     dark: string;
     light: string;
     placeholder: string;
@@ -15,10 +15,9 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     disabledText: string;
     ariaDisabledSurface: string;
     ariaDisabledText: string;
-    contrast: string;
 } | {
     main?: undefined;
-    contrastText?: undefined;
+    contrast?: undefined;
     dark?: undefined;
     light?: undefined;
     placeholder?: undefined;
@@ -26,7 +25,6 @@ export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
     disabledText?: undefined;
     ariaDisabledSurface?: undefined;
     ariaDisabledText?: undefined;
-    contrast?: undefined;
 };
 export declare const mergeComponentProps: <T extends object>(...args: Array<T | object | ((current: T) => T | object)>) => T;
 export declare const flattenChildren: (children: React.ReactNode) => ReactElement[];

package/dist/utils/index.js

@@ -10,93 +10,86 @@ const getColorShadesByVariant = (variant) => {
     case "primary":
       return {
         main: getColorVar("primary.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("primary.contrast"),
         dark: getColorVar("primary.700"),
         light: getColorVar("primary.100"),
         placeholder: getColorVar("primary.400"),
         disabledSurface: getColorVar("primary.300"),
         disabledText: getColorVar("primary.500"),
         ariaDisabledSurface: getColorVar("primary.300"),
-        ariaDisabledText: getColorVar("primary.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("primary.300")
       };
     case "secondary":
       return {
         main: getColorVar("secondary.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("secondary.contrast"),
         dark: getColorVar("secondary.700"),
         light: getColorVar("secondary.100"),
         placeholder: getColorVar("secondary.400"),
         disabledSurface: getColorVar("secondary.300"),
         disabledText: getColorVar("secondary.500"),
         ariaDisabledSurface: getColorVar("secondary.300"),
-        ariaDisabledText: getColorVar("secondary.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("secondary.300")
       };
     case "green":
       return {
         main: getColorVar("green.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("green.contrast"),
         dark: getColorVar("green.700"),
         light: getColorVar("green.100"),
         placeholder: getColorVar("green.400"),
         disabledSurface: getColorVar("green.300"),
         disabledText: getColorVar("green.500"),
         ariaDisabledSurface: getColorVar("green.300"),
-        ariaDisabledText: getColorVar("green.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("green.300")
       };
     case "orange":
       return {
         main: getColorVar("orange.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("orange.contrast"),
         dark: getColorVar("orange.700"),
         light: getColorVar("orange.100"),
         placeholder: getColorVar("orange.400"),
         disabledSurface: getColorVar("orange.300"),
         disabledText: getColorVar("orange.500"),
         ariaDisabledSurface: getColorVar("orange.300"),
-        ariaDisabledText: getColorVar("orange.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("orange.300")
       };
     case "red":
       return {
         main: getColorVar("red.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("red.contrast"),
         dark: getColorVar("red.700"),
         light: getColorVar("red.100"),
         placeholder: getColorVar("red.400"),
         disabledSurface: getColorVar("red.300"),
         disabledText: getColorVar("red.500"),
         ariaDisabledSurface: getColorVar("red.300"),
-        ariaDisabledText: getColorVar("red.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("red.300")
       };
     case "blue":
       return {
         main: getColorVar("blue.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("blue.contrast"),
         dark: getColorVar("blue.700"),
         light: getColorVar("blue.100"),
         placeholder: getColorVar("blue.400"),
         disabledSurface: getColorVar("blue.300"),
         disabledText: getColorVar("blue.500"),
         ariaDisabledSurface: getColorVar("blue.300"),
-        ariaDisabledText: getColorVar("blue.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("blue.300")
       };
     case "neutral":
       return {
         main: getColorVar("neutral.600"),
-        contrastText: getColorVar("white"),
+        contrast: getColorVar("neutral.contrast"),
         dark: getColorVar("neutral.700"),
         light: getColorVar("neutral.100"),
         placeholder: getColorVar("neutral.400"),
         disabledSurface: getColorVar("neutral.300"),
         disabledText: getColorVar("neutral.500"),
         ariaDisabledSurface: getColorVar("neutral.300"),
-        ariaDisabledText: getColorVar("neutral.300"),
-        contrast: getColorVar("white")
+        ariaDisabledText: getColorVar("neutral.300")
       };
     default:
       return {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "2.0.32",
+  "version": "3.0.1",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [