creactive 0.0.85 → 0.0.87

package/build/components/view/constants/border.d.ts

@@ -1,3 +1,23 @@
+/**
+ * Border width enumerated constants.
+ * Should be used to control themed border width.
+ * Includes matches for all theme base border width tokens.
+ */
+export declare enum ViewBorderWidth {
+    SM = 0,
+    MD = 1,
+    LG = 2
+}
+export declare const ViewBorderWidthThemeStyleSheetKey: {
+    0: "borderWidthBaseSM";
+    1: "borderWidthBaseMD";
+    2: "borderWidthBaseLG";
+};
+export declare const ViewBorderWidthThemeTokenKey: {
+    0: "borderWidthBaseSM";
+    1: "borderWidthBaseMD";
+    2: "borderWidthBaseLG";
+};
 /**
  * View component supported border radius enumerated constants.
  * Includes matches for all theme base border radius tokens and maximum one.

package/build/components/view/constants/color.d.ts

@@ -0,0 +1,34 @@
+export declare enum ViewBackgroundColor {
+    TRANSPARENT = 0,
+    BASE_100 = 1,
+    BASE_200 = 2,
+    BASE_300 = 3,
+    BASE_400 = 4,
+    BASE_500 = 5,
+    BASE_600 = 6,
+    BASE_700 = 7,
+    BASE_800 = 8,
+    BASE_900 = 9
+}
+export declare const ViewBackgroundColorStyleSheetKey: {
+    1: "colorBackgroundBase100";
+    2: "colorBackgroundBase200";
+    3: "colorBackgroundBase300";
+    4: "colorBackgroundBase400";
+    5: "colorBackgroundBase500";
+    6: "colorBackgroundBase600";
+    7: "colorBackgroundBase700";
+    8: "colorBackgroundBase800";
+    9: "colorBackgroundBase900";
+};
+export declare const ViewBackgroundColorThemeTokenKey: {
+    1: "colorBackgroundBase100";
+    2: "colorBackgroundBase200";
+    3: "colorBackgroundBase300";
+    4: "colorBackgroundBase400";
+    5: "colorBackgroundBase500";
+    6: "colorBackgroundBase600";
+    7: "colorBackgroundBase700";
+    8: "colorBackgroundBase800";
+    9: "colorBackgroundBase900";
+};

package/build/components/view/constants/index.d.ts

@@ -1,4 +1,5 @@
-export { ViewBorderRadius, ViewBorderRadiusThemeStyleSheetKey, ViewBorderRadiusThemeTokenKey, } from './border';
+export { ViewBorderRadius, ViewBorderRadiusThemeStyleSheetKey, ViewBorderRadiusThemeTokenKey, ViewBorderWidth, ViewBorderWidthThemeStyleSheetKey, ViewBorderWidthThemeTokenKey, } from './border';
+export { ViewBackgroundColor, ViewBackgroundColorStyleSheetKey, ViewBackgroundColorThemeTokenKey, } from './color';
 export { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewFlexDirection, ViewJustifyContent, } from './flex';
 export { ViewOverflow } from './overflow';
 export { ViewPosition } from './position';

package/build/components/view/view.types.d.ts

@@ -1,6 +1,7 @@
 import type { Position, PositionValue, Size, SizeValue } from '../../helpers';
+import type { Color } from '../../types';
 import type { FunctionComponent, PropsWithChildren } from 'react';
-import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewBorderRadius, ViewFlexDirection, ViewJustifyContent, ViewOverflow, ViewPosition, ViewSpacing, ViewTag } from './constants';
+import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewBackgroundColor, ViewBorderRadius, ViewBorderWidth, ViewFlexDirection, ViewJustifyContent, ViewOverflow, ViewPosition, ViewSpacing, ViewTag } from './constants';
 export interface ViewProps extends PropsWithChildren {
     /**
      * Allows to control HTML tag to render.
@@ -166,12 +167,24 @@ export interface ViewProps extends PropsWithChildren {
      * @default undefined
      */
     maxHeight?: Size;
+    /**
+     * View border width.
+     * @see View.BorderWidth
+     * @default undefined
+     */
+    borderWidth?: ViewBorderWidth;
     /**
      * View border radius.
      * @see View.BorderRadius
      * @default undefined
      */
     borderRadius?: ViewBorderRadius;
+    /**
+     * View background color.
+     * @see View.BackgroundColor
+     * @default View.BackgroundColor.TRANSPARENT
+     */
+    backgroundColor?: ViewBackgroundColor | Color;
 }
 export type ViewComponent = FunctionComponent<ViewProps> & {
     Tag: Record<keyof typeof ViewTag, ViewTag>;
@@ -183,7 +196,9 @@ export type ViewComponent = FunctionComponent<ViewProps> & {
     AlignSelf: Record<keyof typeof ViewAlignSelf, ViewAlignSelf>;
     AlignContent: Record<keyof typeof ViewAlignContent, ViewAlignContent>;
     Spacing: Record<keyof typeof ViewSpacing, ViewSpacing>;
+    BorderWidth: Record<keyof typeof ViewBorderWidth, ViewBorderWidth>;
     BorderRadius: Record<keyof typeof ViewBorderRadius, ViewBorderRadius>;
+    BackgroundColor: Record<keyof typeof ViewBackgroundColor, ViewBackgroundColor>;
 };
 export type StyledViewProps = Pick<ViewProps, 'position' | 'overflow' | 'flexDirection' | 'justifyContent' | 'alignItems' | 'alignSelf' | 'alignContent'> & {
     top?: PositionValue;
@@ -204,5 +219,7 @@ export type StyledViewProps = Pick<ViewProps, 'position' | 'overflow' | 'flexDir
     minHeight?: SizeValue;
     height?: SizeValue;
     maxHeight?: SizeValue;
+    borderWidth?: number;
     borderRadius?: `${number}px` | '50%';
+    backgroundColor: 'transparent' | Color;
 };

package/build/constants/index.d.ts

@@ -1,2 +1,2 @@
 export { Dimension } from '../constants/dimension';
-export { BORDER_RADIUS_BASE_LG, BORDER_RADIUS_BASE_MD, BORDER_RADIUS_BASE_SM, BORDER_RADIUS_BASE_XL, BORDER_RADIUS_BASE_XS, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, FONT_FAMILY_BASE, FONT_SIZE_BASE_LG, FONT_SIZE_BASE_MD, FONT_SIZE_BASE_SM, FONT_SIZE_BASE_X2L, FONT_SIZE_BASE_X2S, FONT_SIZE_BASE_X3L, FONT_SIZE_BASE_X4L, FONT_SIZE_BASE_X5L, FONT_SIZE_BASE_XL, FONT_SIZE_BASE_XS, FONT_WEIGHT_BASE_BLACK, FONT_WEIGHT_BASE_BOLD, FONT_WEIGHT_BASE_EXTRABOLD, FONT_WEIGHT_BASE_EXTRALIGHT, FONT_WEIGHT_BASE_LIGHT, FONT_WEIGHT_BASE_MEDIUM, FONT_WEIGHT_BASE_REGULAR, FONT_WEIGHT_BASE_SEMIBOLD, FONT_WEIGHT_BASE_THIN, LINE_HEIGHT_BASE_LOOSE, LINE_HEIGHT_BASE_NONE, LINE_HEIGHT_BASE_NORMAL, LINE_HEIGHT_BASE_RELAXED, LINE_HEIGHT_BASE_SNUG, LINE_HEIGHT_BASE_TIGHT, SPACING_BASE_LG, SPACING_BASE_MD, SPACING_BASE_SM, SPACING_BASE_X2L, SPACING_BASE_X2S, SPACING_BASE_X3L, SPACING_BASE_X4L, SPACING_BASE_X5L, SPACING_BASE_X6L, SPACING_BASE_X7L, SPACING_BASE_XL, SPACING_BASE_XS, } from '../constants/theme';
+export { BORDER_RADIUS_BASE_LG, BORDER_RADIUS_BASE_MD, BORDER_RADIUS_BASE_SM, BORDER_RADIUS_BASE_XL, BORDER_RADIUS_BASE_XS, BORDER_WIDTH_BASE_LG, BORDER_WIDTH_BASE_MD, BORDER_WIDTH_BASE_SM, COLOR_BACKGROUND_BASE_100, COLOR_BACKGROUND_BASE_200, COLOR_BACKGROUND_BASE_300, COLOR_BACKGROUND_BASE_400, COLOR_BACKGROUND_BASE_500, COLOR_BACKGROUND_BASE_600, COLOR_BACKGROUND_BASE_700, COLOR_BACKGROUND_BASE_800, COLOR_BACKGROUND_BASE_900, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, FONT_FAMILY_BASE, FONT_SIZE_BASE_LG, FONT_SIZE_BASE_MD, FONT_SIZE_BASE_SM, FONT_SIZE_BASE_X2L, FONT_SIZE_BASE_X2S, FONT_SIZE_BASE_X3L, FONT_SIZE_BASE_X4L, FONT_SIZE_BASE_X5L, FONT_SIZE_BASE_XL, FONT_SIZE_BASE_XS, FONT_WEIGHT_BASE_BLACK, FONT_WEIGHT_BASE_BOLD, FONT_WEIGHT_BASE_EXTRABOLD, FONT_WEIGHT_BASE_EXTRALIGHT, FONT_WEIGHT_BASE_LIGHT, FONT_WEIGHT_BASE_MEDIUM, FONT_WEIGHT_BASE_REGULAR, FONT_WEIGHT_BASE_SEMIBOLD, FONT_WEIGHT_BASE_THIN, LINE_HEIGHT_BASE_LOOSE, LINE_HEIGHT_BASE_NONE, LINE_HEIGHT_BASE_NORMAL, LINE_HEIGHT_BASE_RELAXED, LINE_HEIGHT_BASE_SNUG, LINE_HEIGHT_BASE_TIGHT, SPACING_BASE_LG, SPACING_BASE_MD, SPACING_BASE_SM, SPACING_BASE_X2L, SPACING_BASE_X2S, SPACING_BASE_X3L, SPACING_BASE_X4L, SPACING_BASE_X5L, SPACING_BASE_X6L, SPACING_BASE_X7L, SPACING_BASE_XL, SPACING_BASE_XS, } from '../constants/theme';

package/build/constants/theme/border.d.ts

@@ -1,3 +1,6 @@
+export declare const BORDER_WIDTH_BASE_SM = 0.5;
+export declare const BORDER_WIDTH_BASE_MD = 1;
+export declare const BORDER_WIDTH_BASE_LG = 1.5;
 export declare const BORDER_RADIUS_BASE_XS = 2;
 export declare const BORDER_RADIUS_BASE_SM = 4;
 export declare const BORDER_RADIUS_BASE_MD = 6;

package/build/constants/theme/color.d.ts

@@ -1,7 +1,12 @@
-/**
- * Base foreground color constants.
- * Use it for coloring text, icons and etc.
- */
+export declare const COLOR_BACKGROUND_BASE_100 = "rgb(24,24,27)";
+export declare const COLOR_BACKGROUND_BASE_200 = "rgb(39,39,42)";
+export declare const COLOR_BACKGROUND_BASE_300 = "rgb(63,63,70)";
+export declare const COLOR_BACKGROUND_BASE_400 = "rgb(82,82,92)";
+export declare const COLOR_BACKGROUND_BASE_500 = "rgb(113,113,123)";
+export declare const COLOR_BACKGROUND_BASE_600 = "rgb(159,159,169)";
+export declare const COLOR_BACKGROUND_BASE_700 = "rgb(212,212,216)";
+export declare const COLOR_BACKGROUND_BASE_800 = "rgb(228,228,231)";
+export declare const COLOR_BACKGROUND_BASE_900 = "rgb(244,244,245)";
 export declare const COLOR_FOREGROUND_BASE_100 = "rgb(244,244,245)";
 export declare const COLOR_FOREGROUND_BASE_200 = "rgb(228,228,231)";
 export declare const COLOR_FOREGROUND_BASE_300 = "rgb(212,212,216)";
@@ -11,10 +16,6 @@ export declare const COLOR_FOREGROUND_BASE_600 = "rgb(82,82,92)";
 export declare const COLOR_FOREGROUND_BASE_700 = "rgb(63,63,70)";
 export declare const COLOR_FOREGROUND_BASE_800 = "rgb(39,39,42)";
 export declare const COLOR_FOREGROUND_BASE_900 = "rgb(24,24,27)";
-/**
- * Inverse foreground color constants.
- * Use it for coloring inversed elements.
- */
 export declare const COLOR_FOREGROUND_INVERSE_100 = "rgb(24,24,27)";
 export declare const COLOR_FOREGROUND_INVERSE_200 = "rgb(39,39,42)";
 export declare const COLOR_FOREGROUND_INVERSE_300 = "rgb(63,63,70)";

package/build/constants/theme/index.d.ts

@@ -1,5 +1,5 @@
-export { BORDER_RADIUS_BASE_LG, BORDER_RADIUS_BASE_MD, BORDER_RADIUS_BASE_SM, BORDER_RADIUS_BASE_XL, BORDER_RADIUS_BASE_XS, } from './border';
-export { COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, } from './color';
+export { BORDER_RADIUS_BASE_LG, BORDER_RADIUS_BASE_MD, BORDER_RADIUS_BASE_SM, BORDER_RADIUS_BASE_XL, BORDER_RADIUS_BASE_XS, BORDER_WIDTH_BASE_LG, BORDER_WIDTH_BASE_MD, BORDER_WIDTH_BASE_SM, } from './border';
+export { COLOR_BACKGROUND_BASE_100, COLOR_BACKGROUND_BASE_200, COLOR_BACKGROUND_BASE_300, COLOR_BACKGROUND_BASE_400, COLOR_BACKGROUND_BASE_500, COLOR_BACKGROUND_BASE_600, COLOR_BACKGROUND_BASE_700, COLOR_BACKGROUND_BASE_800, COLOR_BACKGROUND_BASE_900, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, } from './color';
 export { FONT_FAMILY_BASE, FONT_SIZE_BASE_LG, FONT_SIZE_BASE_MD, FONT_SIZE_BASE_SM, FONT_SIZE_BASE_X2L, FONT_SIZE_BASE_X2S, FONT_SIZE_BASE_X3L, FONT_SIZE_BASE_X4L, FONT_SIZE_BASE_X5L, FONT_SIZE_BASE_XL, FONT_SIZE_BASE_XS, FONT_WEIGHT_BASE_BLACK, FONT_WEIGHT_BASE_BOLD, FONT_WEIGHT_BASE_EXTRABOLD, FONT_WEIGHT_BASE_EXTRALIGHT, FONT_WEIGHT_BASE_LIGHT, FONT_WEIGHT_BASE_MEDIUM, FONT_WEIGHT_BASE_REGULAR, FONT_WEIGHT_BASE_SEMIBOLD, FONT_WEIGHT_BASE_THIN, } from './font';
 export { SPACING_BASE_LG, SPACING_BASE_MD, SPACING_BASE_SM, SPACING_BASE_X2L, SPACING_BASE_X2S, SPACING_BASE_X3L, SPACING_BASE_X4L, SPACING_BASE_X5L, SPACING_BASE_X6L, SPACING_BASE_X7L, SPACING_BASE_XL, SPACING_BASE_XS, } from './spacing';
 export { LINE_HEIGHT_BASE_LOOSE, LINE_HEIGHT_BASE_NONE, LINE_HEIGHT_BASE_NORMAL, LINE_HEIGHT_BASE_RELAXED, LINE_HEIGHT_BASE_SNUG, LINE_HEIGHT_BASE_TIGHT, } from './text';

package/build/contexts/index.d.ts

@@ -1,4 +1,4 @@
 export { Media, MediaContextProvider, useMediaContext } from '../contexts/media';
 export type { MediaComponent, MediaContextProviderComponent, MediaContextValue, MediaProps, } from '../contexts/media';
 export { ThemeContextProvider, useThemeContext } from '../contexts/theme';
-export type { ThemeColorRGB, ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from '../contexts/theme';
+export type { ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from '../contexts/theme';

package/build/contexts/theme/index.d.ts

@@ -1,2 +1,2 @@
 export { ThemeContextProvider, useThemeContext } from './theme';
-export type { ThemeColorRGB, ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from './theme.types';
+export type { ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from './theme.types';

package/build/contexts/theme/theme.types.d.ts

@@ -1,10 +1,5 @@
+import type { Color } from '../../types';
 import type { FunctionComponent, PropsWithChildren } from 'react';
-/**
- * Theme RGB color type.
- * Should be used to specify theme colors.
- * Number instead of 0-255 union to avoid too complex union type.
- */
-export type ThemeColorRGB = `rgb(${number},${number},${number})`;
 /**
  * Theme font weight type.
  * Should be used to specify theme font weight.
@@ -17,106 +12,152 @@ export type ThemeFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 90
  * This tokens can be also accesed via theme context outside.
  */
 export interface ThemeContextValue {
+    /**
+     * Base background 100 color token.
+     * Least contrast color in the background palette.
+     */
+    colorBackgroundBase100: Color;
+    /**
+     * Base background 200 color token.
+     * Almost non-contrasting base background color.
+     */
+    colorBackgroundBase200: Color;
+    /**
+     * Base background 300 color token.
+     * Slightly more contrasting, useful for subtle depth or layering.
+     */
+    colorBackgroundBase300: Color;
+    /**
+     * Base background 400 color token.
+     * Even less contrasting background color.
+     */
+    colorBackgroundBase400: Color;
+    /**
+     * Base background 500 color token.
+     * When you need some layering between less contrast backgrounds.
+     */
+    colorBackgroundBase500: Color;
+    /**
+     * Base background 600 color token.
+     * A kind of secondary base background color.
+     * It is also less contrast than default background.
+     */
+    colorBackgroundBase600: Color;
+    /**
+     * Base background 700 color token.
+     * Less contrast than default background color shade.
+     */
+    colorBackgroundBase700: Color;
+    /**
+     * Base background 800 color token.
+     * Supposed to be default interface background color.
+     */
+    colorBackgroundBase800: Color;
+    /**
+     * Base background 900 color token.
+     * More contrast than default background color shade.
+     */
+    colorBackgroundBase900: Color;
     /**
      * Base foreground 100 color token.
      * The least contrasting color in the foreground palette.
      * Intended for nearly invisible elements.
      */
-    colorForegroundBase100: ThemeColorRGB;
+    colorForegroundBase100: Color;
     /**
      * Base foreground 200 color token.
      * Still meant to be barely visible.
      * Can help create a subtle sense of hierarchy.
      */
-    colorForegroundBase200: ThemeColorRGB;
+    colorForegroundBase200: Color;
     /**
      * Base foreground 300 color token.
      * Suitable for slightly readable text or elements.
      */
-    colorForegroundBase300: ThemeColorRGB;
+    colorForegroundBase300: Color;
     /**
      * Base foreground 400 color token.
      * A secondary color for secondary elements.
      * If a secondary element has multiple levels, this is for the lower one.
      */
-    colorForegroundBase400: ThemeColorRGB;
+    colorForegroundBase400: Color;
     /**
      * Base foreground 500 color token.
      * Also useful for secondary elements on low-contrast backgrounds.
      */
-    colorForegroundBase500: ThemeColorRGB;
+    colorForegroundBase500: Color;
     /**
      * Base foreground 600 color token.
      * Ideal for secondary elements and less prominent text.
      */
-    colorForegroundBase600: ThemeColorRGB;
+    colorForegroundBase600: Color;
     /**
      * Base foreground 700 color token.
      * Used for default elements on higher contrast backgrounds.
      * Also suitable for slightly subdued elements.
      */
-    colorForegroundBase700: ThemeColorRGB;
+    colorForegroundBase700: Color;
     /**
      * Base foreground 800 color token.
      * The default value for the text component.
      * Ideal for high-contrast text and key elements.
      */
-    colorForegroundBase800: ThemeColorRGB;
+    colorForegroundBase800: Color;
     /**
      * Base foreground 900 color token.
      * Similar to 800 but better suited for lower-contrast backgrounds.
      */
-    colorForegroundBase900: ThemeColorRGB;
+    colorForegroundBase900: Color;
     /**
      * Inverse foreground 100 color token.
      * The least contrasting color in the inverse foreground palette.
      * Intended for nearly invisible elements on inverse backgrounds.
      */
-    colorForegroundInverse100: ThemeColorRGB;
+    colorForegroundInverse100: Color;
     /**
      * Inverse foreground 200 color token.
      * Can help create a subtle sense of hierarchy on inverse backgrounds.
      * Also almost invisible, but a bit more contrasting than 100.
      */
-    colorForegroundInverse200: ThemeColorRGB;
+    colorForegroundInverse200: Color;
     /**
      * Inverse foreground 300 color token.
      * Suitable for slightly readable text or elements on inverse backgrounds.
      */
-    colorForegroundInverse300: ThemeColorRGB;
+    colorForegroundInverse300: Color;
     /**
      * Inverse foreground 400 color token.
      * A secondary color for secondary elements on inverse backgrounds.
      * If a secondary element has multiple levels, this is for the lower one.
      */
-    colorForegroundInverse400: ThemeColorRGB;
+    colorForegroundInverse400: Color;
     /**
      * Inverse foreground 500 color token.
      * Also useful for secondary elements on low-contrast inverse backgrounds.
      */
-    colorForegroundInverse500: ThemeColorRGB;
+    colorForegroundInverse500: Color;
     /**
      * Inverse foreground 600 color token.
      * Ideal for secondary elements on inverse backgrounds.
      */
-    colorForegroundInverse600: ThemeColorRGB;
+    colorForegroundInverse600: Color;
     /**
      * Inverse foreground 700 color token.
      * Used for default elements on higher contrast inverse backgrounds.
      * Also suitable for slightly subdued elements.
      */
-    colorForegroundInverse700: ThemeColorRGB;
+    colorForegroundInverse700: Color;
     /**
      * Inverse foreground 800 color token.
      * Ideal for high-contrast text on inverse background.
      */
-    colorForegroundInverse800: ThemeColorRGB;
+    colorForegroundInverse800: Color;
     /**
      * Inverse foreground 900 color token.
      * Similar to 800 but can be a bit more contrasting.
      * Suitable when you need even more contrast on inverse background.
      */
-    colorForegroundInverse900: ThemeColorRGB;
+    colorForegroundInverse900: Color;
     /**
      * Base font family token.
      * Supposed to be used by most components.
@@ -324,6 +365,21 @@ export interface ThemeContextValue {
      * Used for large layout sections or when significant whitespace is needed.
      */
     spacingBaseX7L: number;
+    /**
+     * Small base border width token.
+     * @default 0.5
+     */
+    borderWidthBaseSM: number;
+    /**
+     * Medium base border width token.
+     * @default 1
+     */
+    borderWidthBaseMD: number;
+    /**
+     * Large base border width token.
+     * @default 1.5
+     */
+    borderWidthBaseLG: number;
     /**
      * Extra small border radius token.
      * @default 2