@janbox/storefront-ui 2.0.32 → 3.0.0

package/README.md

@@ -59,11 +59,7 @@ pnpm add react-router
 import { ThemeProvider } from '@janbox/storefront-ui/theme';
 
 function App() {
-  return (
-    <ThemeProvider>
-      {/* Your app */}
-    </ThemeProvider>
-  );
+  return <ThemeProvider>{/* Your app */}</ThemeProvider>;
 }
 ```
 
@@ -75,28 +71,15 @@ import { Button, Input, Box, Text } from '@janbox/storefront-ui';
 function LoginForm() {
   return (
     <Box sx={{ md: { maxWidth: 400 } }}>
-      <Text size="2xl" sx={{ marginBottom: 16 }}>Đăng nhập</Text>
-      
-      <Input
-        type="email"
-        placeholder="Email"
-        size="md"
-        sx={{ marginBottom: 12 }}
-      />
-      
-      <Input
-        type="password"
-        placeholder="Mật khẩu"
-        size="md"
-        sx={{ marginBottom: 16 }}
-      />
-      
-      <Button
-        variant="contained"
-        color="primary"
-        size="lg"
-        fullWidth
-      >
+      <Text size="2xl" sx={{ marginBottom: 16 }}>
+        Đăng nhập
+      </Text>
+
+      <Input type="email" placeholder="Email" size="md" sx={{ marginBottom: 12 }} />
+
+      <Input type="password" placeholder="Mật khẩu" size="md" sx={{ marginBottom: 16 }} />
+
+      <Button variant="contained" color="primary" size="lg" fullWidth>
         Đăng nhập
       </Button>
     </Box>
@@ -122,18 +105,10 @@ import { Flexbox, Box, Button } from '@janbox/storefront-ui';
 
 function ResponsiveLayout() {
   return (
-    <Flexbox
-      direction="column"
-      md={{ direction: 'row' }}
-      gap={16}
-    >
-      <Box sx={{ sm: { flex: 1 } }}>
-        Nội dung chính
-      </Box>
-      
-      <Box sx={{ sm: { width: 300 } }}>
-        Sidebar
-      </Box>
+    <Flexbox direction="column" md={{ direction: 'row' }} gap={16}>
+      <Box sx={{ sm: { flex: 1 } }}>Nội dung chính</Box>
+
+      <Box sx={{ sm: { width: 300 } }}>Sidebar</Box>
     </Flexbox>
   );
 }
@@ -163,7 +138,7 @@ src/lib/<component>/
 export const Button = ({ ref, ..._props }: ButtonProps) => {
   // 1. Merge với default props qua helper
   const { size, variant, color, children, ...rest } = getButtonProps(_props);
-  
+
   // 2. Build CSS từ helpers
   const css = [
     getButtonCssBySize(size),
@@ -171,9 +146,13 @@ export const Button = ({ ref, ..._props }: ButtonProps) => {
     getButtonCssByColor(color),
     createSxInterpolation(sx),
   ];
-  
+
   // 3. Render với Primitive hoặc native element
-  return <button css={css} ref={ref} {...rest}>{children}</button>;
+  return (
+    <button css={css} ref={ref} {...rest}>
+      {children}
+    </button>
+  );
 };
 ```
 
@@ -195,12 +174,12 @@ import { Box } from '@janbox/storefront-ui';
 
 **Breakpoints:**
 
-| Screen | Min-width |
-|--------|-----------|
-| `xs` | 0px (default, không cần khai báo) |
-| `sm` | 768px (tablet) |
-| `md` | 1280px (desktop) |
-| `lg` | 1680px (large desktop) |
+| Screen | Min-width                         |
+| ------ | --------------------------------- |
+| `xs`   | 0px (default, không cần khai báo) |
+| `sm`   | 768px (tablet)                    |
+| `md`   | 1280px (desktop)                  |
+| `lg`   | 1680px (large desktop)            |
 
 ### 3. Polymorphic Components
 
@@ -246,20 +225,20 @@ const responsiveStyle = {
 
 ```tsx
 import {
-  cn,                           // Class names combiner
-  mergeComponentProps,          // Deep merge props
-  getColorShadesByVariant,      // Color utilities
-  getSizeVariantState,          // Size utilities
-  formatNumber,                 // Number formatter
-  formatPrice,                  // Price formatter
-  formatDateTime,               // DateTime formatter
+  cn, // Class names combiner
+  mergeComponentProps, // Deep merge props
+  getColorShadesByVariant, // Color utilities
+  getSizeVariantState, // Size utilities
+  formatNumber, // Number formatter
+  formatPrice, // Price formatter
+  formatDateTime, // DateTime formatter
 } from '@janbox/storefront-ui/utils';
 
 // Example: merge props
 const props = mergeComponentProps(defaultProps, userProps);
 
 // Example: get color shades
-const { main, dark, light, contrastText } = getColorShadesByVariant('primary');
+const { main, dark, light, contrast } = getColorShadesByVariant('primary');
 
 // Example: format price
 const formatted = formatPrice(1000000, 'VND', 'vi-VN'); // "1.000.000 ₫"
@@ -274,30 +253,39 @@ const formatted = formatPrice(1000000, 'VND', 'vi-VN'); // "1.000.000 ₫"
 Thư viện cung cấp 60+ components được tổ chức theo các nhóm:
 
 #### Layout
+
 `Box`, `Flexbox`, `Grid`, `Container`
 
 #### Typography
+
 `Text`, `Link`, `HighlightWords`
 
 #### Form Controls
+
 `Input`, `InputNumber`, `InputRange`, `InputMask`, `Textarea`, `Select`, `MultipleSelect`, `Checkbox`, `RadioButton`, `Switch`, `DatePicker`, `TimePicker`, `PhoneInput`, `OtpInput`, `Cascader`
 
 #### Buttons
+
 `Button`, `IconButton`, `NavLink`
 
 #### Feedback
+
 `Loading`, `Progress`, `LinearProgress`, `Dialog`, `Drawer`, `Tooltip`, `Popover`, `Notifications`
 
 #### Data Display
+
 `Badge`, `Chip`, `Avatar`, `Table`, `Pagination`, `Stepper`, `Tabs`, `Accordion`, `Collapse`, `Breadcrumbs`, `StarRating`, `PriceLabel`, `CountUp`, `CountdownTimer`, `Flag`
 
 #### Media
+
 `Image`, `Video`, `Icon`, `Lightbox`, `Swiper`
 
 #### Navigation
+
 `Menu`, `FilterPanel`
 
 #### Utilities
+
 `Primitive`, `RippleEffect`, `SuspenseQuery`, `Marquee`, `Floating`
 
 ### Export Paths
@@ -320,7 +308,6 @@ import { cn, formatPrice } from '@janbox/storefront-ui/utils';
 
 // Constants
 import { HTMLDatasetAttributes } from '@janbox/storefront-ui/constants';
-
 ```
 
 ### Size Variants
@@ -337,11 +324,11 @@ Hầu hết components hỗ trợ 4 size variants:
 **Size mapping:**
 
 | size | iconSize | inputSize | inputPaddingX | textVariant |
-|------|----------|-----------|---------------|-------------|
-| `xs` | 20px | 24px | 8px | `xs` |
-| `sm` | 20px | 32px | 12px | `sm` |
-| `md` | 24px | 40px | 12px | `sm` |
-| `lg` | 24px | 48px | 16px | `base` |
+| ---- | -------- | --------- | ------------- | ----------- |
+| `xs` | 20px     | 24px      | 8px           | `xs`        |
+| `sm` | 20px     | 32px      | 12px          | `sm`        |
+| `md` | 24px     | 40px      | 12px          | `sm`        |
+| `lg` | 24px     | 48px      | 16px          | `base`      |
 
 ### Color Variants
 
@@ -453,14 +440,14 @@ Storybook sẽ chạy tại **http://localhost:6006**
 
 ### Development Commands
 
-| Command | Description |
-|---------|-------------|
-| `pnpm storybook` | Dev server (port 6006) |
-| `pnpm build` | Build thư viện → `dist/` |
-| `pnpm dev` | Build với watch mode |
-| `pnpm type-check` | TypeScript type checking |
-| `pnpm lint` | ESLint |
-| `pnpm build-storybook` | Build Storybook static |
+| Command                | Description              |
+| ---------------------- | ------------------------ |
+| `pnpm storybook`       | Dev server (port 6006)   |
+| `pnpm build`           | Build thư viện → `dist/` |
+| `pnpm dev`             | Build với watch mode     |
+| `pnpm type-check`      | TypeScript type checking |
+| `pnpm lint`            | ESLint                   |
+| `pnpm build-storybook` | Build Storybook static   |
 
 ### Creating New Components
 
@@ -494,7 +481,11 @@ export const getXxxProps = (p: XxxProps) => mergeComponentProps(defaultProps, p)
 // xxx.tsx
 export const Xxx = ({ ref, ..._props }: XxxProps) => {
   const { size, children, ...rest } = getXxxProps(_props);
-  return <Primitive ref={ref} {...rest}>{children}</Primitive>;
+  return (
+    <Primitive ref={ref} {...rest}>
+      {children}
+    </Primitive>
+  );
 };
 ```
 

package/dist/lib/avatar/avatar.js

@@ -62,7 +62,7 @@ const Avatar = ({ ref, ..._props }) => {
               alignItems: "center",
               justifyContent: "center",
               backgroundColor: getColorVar(`${color}.600`),
-              color: getColorVar("white"),
+              color: getColorVar("common.white"),
               fontWeight: 600,
               lineHeight: 1,
               borderRadius: "inherit",
@@ -85,7 +85,7 @@ const Avatar = ({ ref, ..._props }) => {
               borderRadius: "50%",
               backgroundColor: getAvatarStatusColor(status),
               borderWidth: 2,
-              borderColor: getColorVar("white"),
+              borderColor: getColorVar("common.white"),
               ...createStatusStyle({ size }),
               sm: createStatusStyle(sm),
               md: createStatusStyle(md),

package/dist/lib/button/button.js

@@ -39,7 +39,7 @@ const Button = ({ children, ref, ..._props }) => {
     dark,
     light,
     main,
-    contrastText,
+    contrast,
     placeholder: placeholderColor,
     ariaDisabledSurface,
     ariaDisabledText
@@ -61,7 +61,7 @@ const Button = ({ children, ref, ..._props }) => {
     },
     variant === "contained" && {
       backgroundColor: isLoading ? placeholderColor : main,
-      color: contrastText,
+      color: contrast,
       ":hover": {
         backgroundColor: dark
       },

package/dist/lib/date-picker/date-picker.js

@@ -88,7 +88,7 @@ const DatePicker = (_props, ref) => {
         justifyContent: "center",
         overflow: "hidden",
         borderRadius: 12,
-        backgroundColor: getColorVar("white"),
+        backgroundColor: getColorVar("common.white"),
         fontSize: "0.875rem",
         lineHeight: "1.25rem",
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",

package/dist/lib/icon-button/icon-button.js

@@ -15,7 +15,7 @@ const IconButton = ({ children, ref, ..._props }) => {
     dark,
     light,
     main,
-    contrastText,
+    contrast,
     placeholder: placeholderColor,
     ariaDisabledSurface,
     ariaDisabledText
@@ -42,7 +42,7 @@ const IconButton = ({ children, ref, ..._props }) => {
     },
     variant === "contained" && {
       backgroundColor: isLoading ? placeholderColor : main,
-      color: contrastText,
+      color: contrast,
       ":hover": {
         backgroundColor: dark
       },

package/dist/lib/stepper/step.js

@@ -6,32 +6,32 @@ import CheckIcon from "../../assets/svg/check.svg.js";
 import { Icon } from "../icon/icon.js";
 const stateStyles = {
   done: {
-    text: { color: getColorVar("white") },
+    text: { color: getColorVar("common.white") },
     bg: {
       borderColor: getColorVar("primary.600"),
       backgroundColor: getColorVar("primary.600"),
-      color: getColorVar("white")
+      color: getColorVar("common.white")
     }
   },
   active: {
     text: { color: getColorVar("primary.600") },
     bg: {
       borderColor: getColorVar("primary.600"),
-      backgroundColor: getColorVar("white"),
+      backgroundColor: getColorVar("common.white"),
       color: getColorVar("primary.600")
     }
   },
   normal: {
-    text: { color: getColorVar("white") },
+    text: { color: getColorVar("common.white") },
     bg: {
       borderColor: getColorVar("neutral.500"),
       backgroundColor: getColorVar("neutral.500"),
-      color: getColorVar("white")
+      color: getColorVar("common.white")
     }
   }
 };
 const Step = forwardRef((props, ref) => {
-  const { state = "normal", content, className, size = 32, children, ...rest } = props;
+  const { state = "normal", content, size = 32, children, ...rest } = props;
   const styles = stateStyles[state] ?? stateStyles.normal;
   const checked = state === "done";
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(

package/dist/lib/swiper/swiper-dots-paging/swiper-dots-paging.js

@@ -124,7 +124,7 @@ const SwiperDotsPaging = ({
                         ...inViewIndexes.includes(slideIndex) ? { visibility: "hidden" } : {},
                         borderWidth: 1,
                         borderColor: getColorVar(`${color}.600`),
-                        backgroundColor: getColorVar("white")
+                        backgroundColor: getColorVar("common.white")
                       },
                       onClick: onDotClick,
                       "data-index": slideIndex

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -217,7 +217,7 @@ const ArrowButton = ({
             borderStyle: "solid",
             borderColor: getColorVar(`${color}.600`),
             borderRadius: 9999,
-            backgroundColor: getColorVar("white"),
+            backgroundColor: getColorVar("common.white"),
             ":disabled": {
               opacity: visible ? 0.5 : 0
             },

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.0",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [