creactive 0.0.91 → 0.0.93

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

@@ -1,3 +1,7 @@
+/**
+ * View border color enumerated constants.
+ * Should be used to controle view border color with properties.
+ */
 export declare enum ViewBorderColor {
     BASE_100 = 0,
     BASE_200 = 1,
@@ -31,6 +35,10 @@ export declare const ViewBorderColorThemeTokenKey: {
     7: "colorBorderBase800";
     8: "colorBorderBase900";
 };
+/**
+ * View themed background color enumerated constants.
+ * Allows to pass theme background colors as component property.
+ */
 export declare enum ViewBackgroundColor {
     BASE_100 = 0,
     BASE_200 = 1,

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

@@ -3,5 +3,6 @@ export { ViewBackgroundColor, ViewBackgroundColorStyleSheetKey, ViewBackgroundCo
 export { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewFlexDirection, ViewJustifyContent, } from './flex';
 export { ViewOverflow } from './overflow';
 export { ViewPosition } from './position';
+export { ViewBoxShadow } from './shadow';
 export { ViewMarginBottomThemeStyleSheetKey, ViewMarginLeftThemeStyleSheetKey, ViewMarginRightThemeStyleSheetKey, ViewMarginTopThemeStyleSheetKey, ViewPaddingBottomThemeStyleSheetKey, ViewPaddingLeftThemeStyleSheetKey, ViewPaddingRightThemeStyleSheetKey, ViewPaddingTopThemeStyleSheetKey, ViewSpacing, ViewSpacingThemeTokenKey, } from './spacing';
 export { ViewHTMLTag, ViewTag } from './tag';

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

@@ -0,0 +1,9 @@
+/**
+ * Supported box shadow enumerated constants.
+ * Should be used to control view component box shadow.
+ */
+export declare enum ViewBoxShadow {
+    SM = 0,
+    MD = 1,
+    LG = 2
+}

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

@@ -1,7 +1,7 @@
-import type { Position, PositionValue, Size, SizeValue } from '../../helpers';
+import type { Opacity, Position, PositionValue, Size, SizeValue } from '../../helpers';
 import type { Color } from '../../types';
 import type { FunctionComponent, PropsWithChildren } from 'react';
-import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewBackgroundColor, ViewBorderColor, ViewBorderRadius, ViewBorderWidth, ViewFlexDirection, ViewJustifyContent, ViewOverflow, ViewPosition, ViewSpacing, ViewTag } from './constants';
+import type { ViewAlignContent, ViewAlignItems, ViewAlignSelf, ViewBackgroundColor, ViewBorderColor, ViewBorderRadius, ViewBorderWidth, ViewBoxShadow, ViewFlexDirection, ViewJustifyContent, ViewOverflow, ViewPosition, ViewSpacing, ViewTag } from './constants';
 export interface ViewProps extends PropsWithChildren {
     /**
      * Allows to control HTML tag to render.
@@ -41,6 +41,13 @@ export interface ViewProps extends PropsWithChildren {
      * @default undefined
      */
     bottom?: Position;
+    /**
+     * View opacity.
+     * Controls the transparency of the view.
+     * @see Opacity
+     * @default undefined
+     */
+    opacity?: Opacity;
     /**
      * View overflow behavior.
      * Controls how children are measured and displayed.
@@ -167,6 +174,12 @@ export interface ViewProps extends PropsWithChildren {
      * @default undefined
      */
     maxHeight?: Size;
+    /**
+     * View box shadow.
+     * @see View.BoxShadow
+     * @default undefined
+     */
+    boxShadow?: ViewBoxShadow;
     /**
      * View border color.
      * @see View.BorderColor
@@ -202,6 +215,7 @@ export type ViewComponent = FunctionComponent<ViewProps> & {
     AlignSelf: Record<keyof typeof ViewAlignSelf, ViewAlignSelf>;
     AlignContent: Record<keyof typeof ViewAlignContent, ViewAlignContent>;
     Spacing: Record<keyof typeof ViewSpacing, ViewSpacing>;
+    BoxShadow: Record<keyof typeof ViewBoxShadow, ViewBoxShadow>;
     BorderColor: Record<keyof typeof ViewBorderColor, ViewBorderColor>;
     BorderWidth: Record<keyof typeof ViewBorderWidth, ViewBorderWidth>;
     BorderRadius: Record<keyof typeof ViewBorderRadius, ViewBorderRadius>;
@@ -212,6 +226,7 @@ export type StyledViewProps = Pick<ViewProps, 'position' | 'overflow' | 'flexDir
     left?: PositionValue;
     right?: PositionValue;
     bottom?: PositionValue;
+    opacity?: number;
     marginTop?: number;
     paddingTop?: number;
     marginLeft?: number;
@@ -226,6 +241,7 @@ export type StyledViewProps = Pick<ViewProps, 'position' | 'overflow' | 'flexDir
     minHeight?: SizeValue;
     height?: SizeValue;
     maxHeight?: SizeValue;
+    boxShadow?: string;
     borderColor?: Color;
     borderWidth?: number;
     borderRadius?: `${number}px` | '50%';

package/build/constants/index.d.ts

@@ -1,4 +1,4 @@
 export { Dimension } from '../constants/dimension';
-export { POSITION_MAX, POSITION_ZERO } from '../constants/position';
+export { POSITION_MAX, POSITION_MIN } from '../constants/position';
 export { SIZE_FULL } from '../constants/size';
-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_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_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';
+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_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/position.d.ts

@@ -1,3 +1,3 @@
 import { Position } from '../helpers/position';
 export declare const POSITION_MAX: Position;
-export declare const POSITION_ZERO: Position;
+export declare const POSITION_MIN: Position;

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

@@ -1,21 +1,3 @@
-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_BORDER_BASE_100 = "rgb(253,252,254)";
-export declare const COLOR_BORDER_BASE_200 = "rgb(249,249,250)";
-export declare const COLOR_BORDER_BASE_300 = "rgb(247,247,249)";
-export declare const COLOR_BORDER_BASE_400 = "rgb(244,244,245)";
-export declare const COLOR_BORDER_BASE_500 = "rgb(224,224,238)";
-export declare const COLOR_BORDER_BASE_600 = "rgb(216,216,228)";
-export declare const COLOR_BORDER_BASE_700 = "rgb(216,216,228)";
-export declare const COLOR_BORDER_BASE_800 = "rgb(212,212,216)";
-export declare const COLOR_BORDER_BASE_900 = "rgb(198,198,202)";
 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)";

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, 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_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_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 { 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 { ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, ThemeFontWeight, } from '../contexts/theme';
+export type { ThemeContextProviderComponent, ThemeContextProviderProps, ThemeContextValue, } from '../contexts/theme';

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

@@ -0,0 +1,18 @@
+export declare const COLOR_BACKGROUND_BASE_100 = "rgb(198,198,202)";
+export declare const COLOR_BACKGROUND_BASE_200 = "rgb(212,212,216)";
+export declare const COLOR_BACKGROUND_BASE_300 = "rgb(216,216,228)";
+export declare const COLOR_BACKGROUND_BASE_400 = "rgb(218,218,234)";
+export declare const COLOR_BACKGROUND_BASE_500 = "rgb(224,224,238)";
+export declare const COLOR_BACKGROUND_BASE_600 = "rgb(244,244,245)";
+export declare const COLOR_BACKGROUND_BASE_700 = "rgb(247,247,249)";
+export declare const COLOR_BACKGROUND_BASE_800 = "rgb(249,249,250)";
+export declare const COLOR_BACKGROUND_BASE_900 = "rgb(254,254,255)";
+export declare const COLOR_BORDER_BASE_100 = "rgb(253,252,254)";
+export declare const COLOR_BORDER_BASE_200 = "rgb(249,249,250)";
+export declare const COLOR_BORDER_BASE_300 = "rgb(247,247,249)";
+export declare const COLOR_BORDER_BASE_400 = "rgb(244,244,245)";
+export declare const COLOR_BORDER_BASE_500 = "rgb(224,224,238)";
+export declare const COLOR_BORDER_BASE_600 = "rgb(218,218,234)";
+export declare const COLOR_BORDER_BASE_700 = "rgb(216,216,228)";
+export declare const COLOR_BORDER_BASE_800 = "rgb(212,212,216)";
+export declare const COLOR_BORDER_BASE_900 = "rgb(198,198,202)";

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

@@ -0,0 +1 @@
+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_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_BASE_900, } from './color';

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

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

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

@@ -1,108 +1,100 @@
-import type { Color } from '../../types';
+import type { Color, FontWeight } from '../../types';
 import type { FunctionComponent, PropsWithChildren } from 'react';
-/**
- * Theme font weight type.
- * Should be used to specify theme font weight.
- */
-export type ThemeFontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 /**
  * Theme context value interface.
- * Contains all theme tokens you may need.
- * This tokens are used inside components for styling.
- * This tokens can be also accesed via theme context outside.
+ * Provides access to all themable tokens.
+ * Library components use this tokens for styling.
+ * Can be accessed via theme context outside when need.
  */
 export interface ThemeContextValue {
     /**
-     * Base background 100 color token.
-     * Least contrast color in the background palette.
+     * Least contrast base background color.
+     * @default rgb(198,198,202)
      */
     colorBackgroundBase100: Color;
     /**
-     * Base background 200 color token.
-     * Almost non-contrasting base background color.
+     * Dim base background color.
+     * @default rgb(212,212,216)
      */
     colorBackgroundBase200: Color;
     /**
-     * Base background 300 color token.
-     * Slightly more contrasting, useful for subtle depth or layering.
+     * Mix of dim and muted base background color.
+     * @default rgb(216,216,228)
      */
     colorBackgroundBase300: Color;
     /**
-     * Base background 400 color token.
-     * Even less contrasting background color.
+     * Muted base background color.
+     * @default rgb(218,218,234)
      */
     colorBackgroundBase400: Color;
     /**
-     * Base background 500 color token.
-     * When you need some layering between less contrast backgrounds.
+     * Mix of muted and subtle base background color.
+     * @default rgb(224,224,238)
      */
     colorBackgroundBase500: Color;
     /**
-     * Base background 600 color token.
-     * A kind of secondary base background color.
-     * It is also less contrast than default background.
+     * Subtle base background color.
+     * @default rgb(244,244,245)
      */
     colorBackgroundBase600: Color;
     /**
-     * Base background 700 color token.
-     * Less contrast than default background color shade.
+     * Mix of subtle and default base background color.
+     * @default rgb(247,247,249)
      */
     colorBackgroundBase700: Color;
     /**
-     * Base background 800 color token.
-     * Supposed to be default interface background color.
+     * Base default interface background color.
+     * @default rgb(249,249,250)
      */
     colorBackgroundBase800: Color;
     /**
-     * Base background 900 color token.
-     * More contrast than default background color shade.
+     * Most contrast base background color.
+     * @default rgb(254,254,255)
      */
     colorBackgroundBase900: Color;
     /**
-     * Base border 100 color token.
-     * The lightest shade for borders.
-     * Useful for subtle dividers or low-emphasis elements.
+     * Least contrast base border color.
+     * @default rgb(253,252,254)
      */
     colorBorderBase100: Color;
     /**
-     * Base border 200 color token.
-     * Slightly more visible than 100.
-     * Suitable for very soft separators or outlines.
+     * Dim base border color.
+     * @default rgb(249,249,250)
      */
     colorBorderBase200: Color;
     /**
-     * Base border 300 color token.
-     * A light neutral border color for gentle outlines.
+     * Mix of dim and muted base border color.
+     * @default rgb(247,247,249)
      */
     colorBorderBase300: Color;
     /**
-     * Base border 400 color token.
-     * Can be used for low-contrast interface borders or containers.
+     * Muted base border color.
+     * @default rgb(244,244,245)
      */
     colorBorderBase400: Color;
     /**
-     * Base border 500 color token.
-     * A medium-light border tone for secondary elements.
+     * Mix of muted and subtle base border color.
+     * @default rgb(224,224,238)
      */
     colorBorderBase500: Color;
     /**
-     * Base border 600 color token.
-     * A neutral border tone with moderate contrast.
+     * Subtle base border color.
+     * @default rgb(218,218,234)
      */
     colorBorderBase600: Color;
     /**
-     * Base border 700 color token.
-     * Little bit less contrast background color.
+     * Mix of subtle and default base border color.
+     * @default rgb(216,216,228)
      */
     colorBorderBase700: Color;
     /**
-     * Base border 800 color token.
-     * Supposed to be default border color.
+     * Base default border color.
+     * @default rgb(212,212,216)
      */
     colorBorderBase800: Color;
     /**
-     * Base border 900 color token.
-     * More contrast than default border color shade.
+     * Most contrast base border color.
+     * @default rgb(198,198,202)
      */
     colorBorderBase900: Color;
     /**
@@ -215,53 +207,53 @@ export interface ThemeContextValue {
      * Base thin font weight token.
      * Ideal for very delicate and decorative, large, elegant hero text.
      */
-    fontWeightBaseThin: ThemeFontWeight;
+    fontWeightBaseThin: FontWeight;
     /**
      * Base extra-light font weight token.
      * Use for large, airy headings or subtle interface elements.
      * Slightly more readable than extra-thin, but still decorative.
      */
-    fontWeightBaseExtraLight: ThemeFontWeight;
+    fontWeightBaseExtraLight: FontWeight;
     /**
      * Base light font weight token.
      * Suitable for subheadings, muted captions, and soft labels.
      */
-    fontWeightBaseLight: ThemeFontWeight;
+    fontWeightBaseLight: FontWeight;
     /**
      * Base regular font weight token.
      * For the most common text elements in your interface.
      * When unsure about font weight, this is the default option.
      */
-    fontWeightBaseRegular: ThemeFontWeight;
+    fontWeightBaseRegular: FontWeight;
     /**
      * Base medium font weight token.
      * Suitable for labels, buttons, and small subheadings.
      * Slightly emphasized, providing better readability.
      */
-    fontWeightBaseMedium: ThemeFontWeight;
+    fontWeightBaseMedium: FontWeight;
     /**
      * Base semi-bold font weight token.
      * Provides stronger emphasis without being overwhelming.
      * Ideal for section headers, emphasized text, and card titles.
      */
-    fontWeightBaseSemibold: ThemeFontWeight;
+    fontWeightBaseSemibold: FontWeight;
     /**
      * Base bold font weight token.
      * For high emphasis on important elements.
      * Use for main headings and strong call-to-action buttons.
      */
-    fontWeightBaseBold: ThemeFontWeight;
+    fontWeightBaseBold: FontWeight;
     /**
      * Extra-bold font weight token.
      * Perfect for promo banners and large impactful headings.
      */
-    fontWeightBaseExtraBold: ThemeFontWeight;
+    fontWeightBaseExtraBold: FontWeight;
     /**
      * Base black font weight token.
      * Extreme emphasis for rare, dramatic cases.
      * Great for headlines in posters and highly attention-grabbing elements.
      */
-    fontWeightBaseBlack: ThemeFontWeight;
+    fontWeightBaseBlack: FontWeight;
     /**
      * Base 2 times extra-small font size token.
      * Use this size for tiny text elements like captions.