creactive 0.0.94 → 0.0.96

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

@@ -143,262 +143,295 @@ export interface ThemeContextValue {
      */
     colorForegroundBase900: Color;
     /**
-     * Inverse foreground 100 color token.
-     * The least contrasting color in the inverse foreground palette.
-     * Intended for nearly invisible elements on inverse backgrounds.
+     * Least contrast inverse foreground color.
+     * @default rgb(198,198,202)
      */
     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.
+     * Dim inverse foreground color.
+     * @default rgb(212,212,216)
      */
     colorForegroundInverse200: Color;
     /**
-     * Inverse foreground 300 color token.
-     * Suitable for slightly readable text or elements on inverse backgrounds.
+     * Mix of dim and muted inverse foreground color.
+     * @default rgb(216,216,228)
      */
     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.
+     * Muted inverse foreground color.
+     * @default rgb(218,218,234)
      */
     colorForegroundInverse400: Color;
     /**
-     * Inverse foreground 500 color token.
-     * Also useful for secondary elements on low-contrast inverse backgrounds.
+     * Mix of muted and subtle inverse foreground color.
+     * @default rgb(224,224,238)
      */
     colorForegroundInverse500: Color;
     /**
-     * Inverse foreground 600 color token.
-     * Ideal for secondary elements on inverse backgrounds.
+     * Subtle inverse foreground color.
+     * @default rgb(244,244,245)
      */
     colorForegroundInverse600: Color;
     /**
-     * Inverse foreground 700 color token.
-     * Used for default elements on higher contrast inverse backgrounds.
-     * Also suitable for slightly subdued elements.
+     * Mix of subtle and default inverse foreground color.
+     * @default rgb(247,247,249)
      */
     colorForegroundInverse700: Color;
     /**
-     * Inverse foreground 800 color token.
-     * Ideal for high-contrast text on inverse background.
+     * Inverse default foreground color.
+     * @default rgb(249,249,250)
      */
     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.
+     * Most contrast inverse foreground color.
+     * @default rgb(254,254,255)
      */
     colorForegroundInverse900: Color;
     /**
-     * Base font family token.
-     * Supposed to be used by most components.
-     * If you don't known what font family to use - use this one.
+     * Base font family.
+     * @see FONT_FAMILY_BASE
      */
     fontFamilyBase: string;
     /**
-     * Base thin font weight token.
-     * Ideal for very delicate and decorative, large, elegant hero text.
+     * Base thin font weight.
+     * @see FONT_WEIGHT_BASE_THIN
+     * @default 100
      */
     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.
+     * Base extra-light font weight.
+     * @see FONT_WEIGHT_BASE_EXTRALIGHT
+     * @default 200
      */
     fontWeightBaseExtraLight: FontWeight;
     /**
-     * Base light font weight token.
-     * Suitable for subheadings, muted captions, and soft labels.
+     * Base light font weight.
+     * @see FONT_WEIGHT_BASE_LIGHT
+     * @default 300
      */
     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.
+     * Base regular font weight.
+     * @see FONT_WEIGHT_BASE_REGULAR
+     * @default 400
      */
     fontWeightBaseRegular: FontWeight;
     /**
-     * Base medium font weight token.
-     * Suitable for labels, buttons, and small subheadings.
-     * Slightly emphasized, providing better readability.
+     * Base medium font weight.
+     * @see FONT_WEIGHT_BASE_MEDIUM
+     * @default 500
      */
     fontWeightBaseMedium: FontWeight;
     /**
-     * Base semi-bold font weight token.
-     * Provides stronger emphasis without being overwhelming.
-     * Ideal for section headers, emphasized text, and card titles.
+     * Base semi-bold font weight.
+     * @see FONT_WEIGHT_BASE_SEMIBOLD
+     * @default 600
      */
     fontWeightBaseSemibold: FontWeight;
     /**
-     * Base bold font weight token.
-     * For high emphasis on important elements.
-     * Use for main headings and strong call-to-action buttons.
+     * Base bold font weight.
+     * @see FONT_WEIGHT_BASE_BOLD
+     * @default 700
      */
     fontWeightBaseBold: FontWeight;
     /**
-     * Extra-bold font weight token.
-     * Perfect for promo banners and large impactful headings.
+     * Extra-bold font weight.
+     * @see FONT_WEIGHT_BASE_EXTRABOLD
+     * @default 800
      */
     fontWeightBaseExtraBold: FontWeight;
     /**
-     * Base black font weight token.
-     * Extreme emphasis for rare, dramatic cases.
-     * Great for headlines in posters and highly attention-grabbing elements.
+     * Base black font weight.
+     * @see FONT_WEIGHT_BASE_BLACK
+     * @default 900
      */
     fontWeightBaseBlack: FontWeight;
     /**
-     * Base 2 times extra-small font size token.
-     * Use this size for tiny text elements like captions.
-     * It represents the smallest readable text in your interface.
+     * Base 2 times extra-small font size.
+     * @see FONT_SIZE_BASE_X2S
+     * @default 12
      */
     fontSizeBaseX2S: number;
     /**
-     * Base extra-small font size token.
-     * Suitable for subtitles or the smallest readable text, for example.
+     * Base extra-small font size.
+     * @see FONT_SIZE_BASE_XS
+     * @default 14
      */
     fontSizeBaseXS: number;
     /**
-     * Base small font size token.
-     * Can be used for smaller labels or captions among medium text.
-     * Also suitable for titles in smaller 2x small text.
+     * Base small font size.
+     * @see FONT_SIZE_BASE_SM
+     * @default 16
      */
     fontSizeBaseSM: number;
     /**
-     * Base medium font size token.
-     * Intended for most text elements.
-     * If unsure about which font size to use, this is the default option.
+     * Base medium font size.
+     * @see FONT_SIZE_BASE_MD
+     * @default 18
      */
     fontSizeBaseMD: number;
     /**
-     * Base large font size token.
-     * Suitable for fourth-level page titles.
-     * Can also be used for larger labels or captions among medium text.
+     * Base large font size.
+     * @see FONT_SIZE_BASE_LG
+     * @default 20
      */
     fontSizeBaseLG: number;
     /**
-     * Base extra-large font size token.
-     * Ideal for third-level page titles.
-     * Can also be used for larger labels or captions within medium text.
+     * Base extra-large font size.
+     * @see FONT_SIZE_BASE_XL
+     * @default 24
      */
     fontSizeBaseXL: number;
     /**
-     * Base 2 times extra-large font size token.
-     * Typically used for second-level page titles.
+     * Base 2 times extra-large font size.
+     * @see FONT_SIZE_BASE_X2L
+     * @default 30
      */
     fontSizeBaseX2L: number;
     /**
-     * Base 3 times extra-large font size token.
-     * Designed for first-level page titles.
-     * Can also be used for labels or captions within huge text.
+     * Base 3 times extra-large font size.
+     * @see FONT_SIZE_BASE_X3L
+     * @default 36
      */
     fontSizeBaseX3L: number;
     /**
-     * Base 4 times extra-large font size token.
-     * Ideal for huge text labels and captions.
+     * Base 4 times extra-large font size.
+     * @see FONT_SIZE_BASE_X4L
+     * @default 48
      */
     fontSizeBaseX4L: number;
     /**
-     * Base 5 times extra-large font size token.
-     * Use this size for enormous text elements like hero titles.
-     * It should be the largest font size in your interface.
+     * Base 5 times extra-large font size.
+     * @see FONT_SIZE_BASE_X5L
+     * @default 60
      */
     fontSizeBaseX5L: number;
     /**
-     * Base none line height token.
-     * Use for elements with no line height, like buttons, badges, and tags.
+     * Base none line height.
+     * @see LINE_HEIGHT_BASE_NONE
+     * @default 1
      */
     lineHeightBaseNone: number;
     /**
-     * Base tight line height token.
-     * For compact text elements with closely packed lines.
+     * Base tight line height.
+     * @see LINE_HEIGHT_BASE_TIGHT
+     * @default 1.25
      */
     lineHeightBaseTight: number;
     /**
-     * Base snug line height token.
-     * Ideal for compact text that still needs some breathing room.
+     * Base snug line height.
+     * @see LINE_HEIGHT_BASE_SNUG
+     * @default 1.375
      */
     lineHeightBaseSnug: number;
     /**
-     * Base normal line height token.
-     * Standard line height for most text elements.
-     * Use for general content in your interface.
+     * Base normal line height.
+     * @see LINE_HEIGHT_BASE_NORMAL
+     * @default 1.5
      */
     lineHeightBaseNormal: number;
     /**
-     * Base relaxed line height token.
-     * Provides more space between lines.
-     * Ideal for body text or large blocks of content.
+     * Base relaxed line height.
+     * @see LINE_HEIGHT_BASE_RELAXED
+     * @default 1.625
      */
     lineHeightBaseRelaxed: number;
     /**
-     * Base loose line height token.
-     * Very spacious and airy, great for large headings.
-     * Suitable for text elements that need a lot of breathing room.
+     * Base loose line height.
+     * @see LINE_HEIGHT_BASE_LOOSE
+     * @default 2
      */
     lineHeightBaseLoose: number;
     /**
-     * Base 2 times extra-small spacing token.
-     * Rarely used – best for tight icon/text gaps or hairline adjustments.
+     * Base 6 times extra-small spacing.
+     * @see SPACING_BASE_X6S
+     * @default 2
+     */
+    spacingBaseX6S: number;
+    /**
+     * Base 5 times extra-small spacing.
+     * @see SPACING_BASE_X5S
+     * @default 4
+     */
+    spacingBaseX5S: number;
+    /**
+     * Base 4 times extra-small spacing.
+     * @see SPACING_BASE_X4S
+     * @default 6
+     */
+    spacingBaseX4S: number;
+    /**
+     * Base 3 times extra-small spacing.
+     * @see SPACING_BASE_X3S
+     * @default 8
+     */
+    spacingBaseX3S: number;
+    /**
+     * Base 2 times extra-small spacing.
+     * @see SPACING_BASE_X2S
+     * @default 10
      */
     spacingBaseX2S: number;
     /**
-     * Extra-small base spacing token.
-     * Ideal for compact elements like tag paddings or small icon separation.
+     * Base extra-small spacing.
+     * @see SPACING_BASE_XS
+     * @default 12
      */
     spacingBaseXS: number;
     /**
-     * Small base spacing token.
-     * Great for dense layouts, or minor gaps.
+     * Base small spacing.
+     * @see SPACING_BASE_SM
+     * @default 14
      */
     spacingBaseSM: number;
     /**
-     * Base medium spacing token.
-     * Good default for most components like cards, inputs, or buttons.
+     * Base medium spacing.
+     * @see SPACING_BASE_MD
+     * @default 16
      */
     spacingBaseMD: number;
     /**
-     * Large base spacing token.
-     * Nice for separating grouped elements or setting consistent gaps.
+     * Base large spacing.
+     * @see SPACING_BASE_LG
+     * @default 18
      */
     spacingBaseLG: number;
     /**
-     * Extra-large base spacing token.
-     * Useful between sections or to give components more breathing.
+     * Base extra-large spacing.
+     * @see SPACING_BASE_XL
+     * @default 20
      */
     spacingBaseXL: number;
     /**
-     * Base 2 times extra-large spacing token.
-     * Fits well in modals or larger layout divisions.
+     * Base 2 times extra-large spacing.
+     * @see SPACING_BASE_X2L
+     * @default 24
      */
     spacingBaseX2L: number;
     /**
-     * Base 3 times extra-large spacing token.
-     * Helps emphasize hierarchy between layout blocks.
+     * Base 3 times extra-large spacing.
+     * @see SPACING_BASE_X3L
+     * @default 28
      */
     spacingBaseX3L: number;
     /**
-     * Base 4 times extra-large spacing token.
-     * Ideal for responsive paddings, section and outer margins.
+     * Base 4 times extra-large spacing.
+     * @see SPACING_BASE_X4L
+     * @default 32
      */
     spacingBaseX4L: number;
     /**
-     * Base 5 times extra-large spacing token.
-     * Great for container paddings, grid gaps, or large components.
+     * Base 5 times extra-large spacing.
+     * @see SPACING_BASE_X5L
+     * @default 36
      */
     spacingBaseX5L: number;
     /**
-     * Base 6 times extra-large spacing token.
-     * Works well in modal layouts or for generous top-level spacing.
+     * Base 6 times extra-large spacing.
+     * @see SPACING_BASE_X6L
+     * @default 40
      */
     spacingBaseX6L: number;
-    /**
-     * Base 7 times extra-large spacing token.
-     * Used for large layout sections or when significant whitespace is needed.
-     */
-    spacingBaseX7L: number;
     /**
      * Small base border width token.
      * @default 0.5