@audira/carbon-react-native 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audira/carbon-react-native",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "MIT",
   "homepage": "https://rakadoank.github.io/carbon-react-native",
   "repository": "https://github.com/RakaDoank/carbon-react-native",

package/src/carbon-style-sheet/color.ts

@@ -1,13 +1,172 @@
-import {
-	Color,
-	type ColorToken,
-} from "@audira/carbon-react-native-elements"
+// Generated
+// Sun, 29 Mar 2026 10:05:23 GMT
 
-export const color =
-	Object
-		.keys(Color.Token.gray_10)
-		.reduce<Record<ColorToken, ColorToken>>((acc, key) => {
-			acc[key as ColorToken] = key as ColorToken
-			return acc
-		}, {
-		} as Record<ColorToken, ColorToken>)
+export const background = "#f4f4f4|#000000"
+export const background_active = "rgba(141,141,141,0.5)|rgba(141,141,141,0.4)"
+export const background_brand = "#0f62fe|#0f62fe"
+export const background_hover = "rgba(141,141,141,0.12)|rgba(141,141,141,0.16)"
+export const background_inverse = "#393939|#f4f4f4"
+export const background_inverse_hover = "#474747|#e8e8e8"
+export const background_selected = "rgba(141,141,141,0.2)|rgba(141,141,141,0.24)"
+export const background_selected_hover = "rgba(141,141,141,0.32)|rgba(141,141,141,0.32)"
+export const border_disabled = "#c6c6c6|rgba(141,141,141,0.5)"
+export const border_interactive = "#0f62fe|#4589ff"
+export const border_inverse = "#161616|#f4f4f4"
+export const border_strong_01 = "#8d8d8d|#6f6f6f"
+export const border_strong_02 = "#8d8d8d|#8d8d8d"
+export const border_strong_03 = "#8d8d8d|#a8a8a8"
+export const border_subtle_00 = "#c6c6c6|#393939"
+export const border_subtle_01 = "#e0e0e0|#393939"
+export const border_subtle_02 = "#c6c6c6|#525252"
+export const border_subtle_03 = "#e0e0e0|#6f6f6f"
+export const border_subtle_selected_01 = "#c6c6c6|#525252"
+export const border_subtle_selected_02 = "#c6c6c6|#6f6f6f"
+export const border_subtle_selected_03 = "#c6c6c6|#8d8d8d"
+export const border_tile_01 = "#a8a8a8|#525252"
+export const border_tile_02 = "#c6c6c6|#6f6f6f"
+export const border_tile_03 = "#a8a8a8|#8d8d8d"
+export const button_danger_active = "#750e13|#750e13"
+export const button_danger_hover = "#b81922|#b81922"
+export const button_danger_primary = "#da1e28|#da1e28"
+export const button_danger_secondary = "#da1e28|#fa4d56"
+export const button_disabled = "#c6c6c6|#525252"
+export const button_primary = "#0f62fe|#0f62fe"
+export const button_primary_active = "#002d9c|#002d9c"
+export const button_primary_hover = "#0050e6|#0050e6"
+export const button_secondary = "#393939|#6f6f6f"
+export const button_secondary_active = "#6f6f6f|#393939"
+export const button_secondary_hover = "#474747|#5e5e5e"
+export const button_separator = "#e0e0e0|#161616"
+export const button_tertiary = "#0f62fe|#ffffff"
+export const button_tertiary_active = "#002d9c|#c6c6c6"
+export const button_tertiary_hover = "#0050e6|#f4f4f4"
+export const field_01 = "#ffffff|#262626"
+export const field_02 = "#f4f4f4|#393939"
+export const field_03 = "#ffffff|#525252"
+export const field_hover_01 = "#e8e8e8|#333333"
+export const field_hover_02 = "#e8e8e8|#474747"
+export const field_hover_03 = "#e8e8e8|#636363"
+export const focus = "#0f62fe|#ffffff"
+export const focus_inset = "#ffffff|#161616"
+export const focus_inverse = "#ffffff|#0f62fe"
+export const highlight = "#d0e2ff|#001d6c"
+export const icon_disabled = "rgba(22,22,22,0.25)|rgba(244,244,244,0.25)"
+export const icon_interactive = "#0f62fe|#ffffff"
+export const icon_inverse = "#ffffff|#161616"
+export const icon_on_color = "#ffffff|#ffffff"
+export const icon_on_color_disabled = "#8d8d8d|rgba(255,255,255,0.25)"
+export const icon_primary = "#161616|#f4f4f4"
+export const icon_secondary = "#525252|#c6c6c6"
+export const interactive = "#0f62fe|#4589ff"
+export const layer_01 = "#ffffff|#262626"
+export const layer_02 = "#f4f4f4|#393939"
+export const layer_03 = "#ffffff|#525252"
+export const layer_accent_01 = "#e0e0e0|#393939"
+export const layer_accent_02 = "#e0e0e0|#525252"
+export const layer_accent_03 = "#e0e0e0|#6f6f6f"
+export const layer_accent_active_01 = "#a8a8a8|#525252"
+export const layer_accent_active_02 = "#a8a8a8|#8d8d8d"
+export const layer_accent_active_03 = "#a8a8a8|#393939"
+export const layer_accent_hover_01 = "#d1d1d1|#474747"
+export const layer_accent_hover_02 = "#d1d1d1|#636363"
+export const layer_accent_hover_03 = "#d1d1d1|#5e5e5e"
+export const layer_active_01 = "#c6c6c6|#525252"
+export const layer_active_02 = "#c6c6c6|#6f6f6f"
+export const layer_active_03 = "#c6c6c6|#8d8d8d"
+export const layer_hover_01 = "#e8e8e8|#333333"
+export const layer_hover_02 = "#e8e8e8|#474747"
+export const layer_hover_03 = "#e8e8e8|#636363"
+export const layer_selected_01 = "#e0e0e0|#393939"
+export const layer_selected_02 = "#e0e0e0|#525252"
+export const layer_selected_03 = "#e0e0e0|#6f6f6f"
+export const layer_selected_disabled = "#8d8d8d|#6f6f6f"
+export const layer_selected_hover_01 = "#d1d1d1|#474747"
+export const layer_selected_hover_02 = "#d1d1d1|#636363"
+export const layer_selected_hover_03 = "#d1d1d1|#5e5e5e"
+export const layer_selected_inverse = "#161616|#f4f4f4"
+export const link_inverse = "#78a9ff|#0f62fe"
+export const link_inverse_active = "#f4f4f4|#161616"
+export const link_inverse_hover = "#a6c8ff|#0043ce"
+export const link_inverse_visited = "#be95ff|#8a3ffc"
+export const link_primary = "#0f62fe|#78a9ff"
+export const link_primary_hover = "#0043ce|#a6c8ff"
+export const link_secondary = "#0043ce|#a6c8ff"
+export const link_visited = "#8a3ffc|#be95ff"
+export const notification_action_hover = "#ffffff|#333333"
+export const notification_action_tertiary_inverse = "#ffffff|#0f62fe"
+export const notification_action_tertiary_inverse_active = "#ffffff|#161616"
+export const notification_action_tertiary_inverse_hover = "#c6c6c6|#002d9c"
+export const notification_action_tertiary_inverse_text = "#161616|#ffffff"
+export const notification_action_tertiary_inverse_text_on_color_disabled = "#ffffff|#ffffff"
+export const notification_error_background = "#fff1f1|#262626"
+export const notification_error_border = "rgba(218,30,40,0.3)|rgba(255,131,137,0.5)"
+export const notification_info_background = "#edf5ff|#262626"
+export const notification_info_border = "rgba(0,67,206,0.3)|rgba(69,137,255,0.5)"
+export const notification_success_background = "#defbe6|#262626"
+export const notification_success_border = "rgba(36,161,72,0.3)|rgba(66,190,101,0.5)"
+export const notification_warning_background = "#fcf4d6|#262626"
+export const notification_warning_border = "rgba(241,194,27,0.3)|rgba(178,134,0,0.5)"
+export const overlay = "rgba(22,22,22,0.5)|rgba(22,22,22,0.7)"
+export const skeleton_background = "#e8e8e8|#474747"
+export const skeleton_element = "#c6c6c6|#525252"
+export const support_caution_major = "#ff832b|#ff832b"
+export const support_caution_minor = "#f1c21b|#f1c21b"
+export const support_caution_undefined = "#8a3ffc|#a56eff"
+export const support_error = "#da1e28|#fa4d56"
+export const support_error_inverse = "#fa4d56|#da1e28"
+export const support_info = "#0043ce|#4589ff"
+export const support_info_inverse = "#4589ff|#0043ce"
+export const support_success = "#24a148|#42be65"
+export const support_success_inverse = "#42be65|#24a148"
+export const support_warning = "#f1c21b|#f1c21b"
+export const support_warning_inverse = "#f1c21b|#f1c21b"
+export const tag_background_blue = "#d0e2ff|#0043ce"
+export const tag_background_cool_gray = "#dde1e6|#4d5358"
+export const tag_background_cyan = "#bae6ff|#00539a"
+export const tag_background_gray = "#e0e0e0|#525252"
+export const tag_background_green = "#a7f0ba|#0e6027"
+export const tag_background_magenta = "#ffd6e8|#9f1853"
+export const tag_background_purple = "#e8daff|#6929c4"
+export const tag_background_red = "#ffd7d9|#a2191f"
+export const tag_background_teal = "#9ef0f0|#005d5d"
+export const tag_background_warm_gray = "#e5e0df|#565151"
+export const tag_border_blue = "#78a9ff|#4589ff"
+export const tag_border_cool_gray = "#a2a9b0|#878d96"
+export const tag_border_cyan = "#33b1ff|#1192e8"
+export const tag_border_gray = "#a8a8a8|#8d8d8d"
+export const tag_border_green = "#42be65|#24a148"
+export const tag_border_magenta = "#ff7eb6|#ee5396"
+export const tag_border_purple = "#be95ff|#a56eff"
+export const tag_border_red = "#ff8389|#fa4d56"
+export const tag_border_teal = "#08bdba|#009d9a"
+export const tag_border_warm_gray = "#ada8a8|#8f8b8b"
+export const tag_color_blue = "#0043ce|#d0e2ff"
+export const tag_color_cool_gray = "#121619|#dde1e6"
+export const tag_color_cyan = "#00539a|#bae6ff"
+export const tag_color_gray = "#161616|#e0e0e0"
+export const tag_color_green = "#0e6027|#a7f0ba"
+export const tag_color_magenta = "#9f1853|#ffd6e8"
+export const tag_color_purple = "#6929c4|#e8daff"
+export const tag_color_red = "#a2191f|#ffd7d9"
+export const tag_color_teal = "#005d5d|#9ef0f0"
+export const tag_color_warm_gray = "#171414|#e5e0df"
+export const tag_hover_blue = "#b8d3ff|#0053ff"
+export const tag_hover_cool_gray = "#cdd3da|#5d646a"
+export const tag_hover_cyan = "#99daff|#0066bd"
+export const tag_hover_gray = "#d1d1d1|#636363"
+export const tag_hover_green = "#74e792|#11742f"
+export const tag_hover_magenta = "#ffbdda|#bf1d63"
+export const tag_hover_purple = "#dcc7ff|#7c3dd6"
+export const tag_hover_red = "#ffc2c5|#c21e25"
+export const tag_hover_teal = "#57e5e5|#007070"
+export const tag_hover_warm_gray = "#d8d0cf|#696363"
+export const text_disabled = "rgba(22,22,22,0.25)|rgba(244,244,244,0.25)"
+export const text_error = "#da1e28|#ff8389"
+export const text_helper = "#6f6f6f|#8d8d8d"
+export const text_inverse = "#ffffff|#161616"
+export const text_on_color = "#ffffff|#ffffff"
+export const text_on_color_disabled = "#8d8d8d|rgba(255,255,255,0.25)"
+export const text_placeholder = "#a8a8a8|#6f6f6f"
+export const text_primary = "#161616|#f4f4f4"
+export const text_secondary = "#525252|#c6c6c6"
+export const toggle_off = "#8d8d8d|#6f6f6f"

package/src/carbon-style-sheet/create.ts

@@ -5,10 +5,8 @@ import {
 	type ViewStyle,
 } from "react-native"
 
-import {
-	Color,
-	type BreakpointToken,
-	type ColorToken,
+import type {
+	BreakpointToken,
 } from "@audira/carbon-react-native-elements"
 
 import {
@@ -25,17 +23,40 @@ import {
 } from "./breakpoint"
 
 type Style = ViewStyle | TextStyle | ImageStyle
+
 type StyleBreakpoint =
 	Partial<
 		Record<
 			BreakpointToken,
 			Omit<
 				ViewStyle | TextStyle | ImageStyle,
-				(typeof colorStyleProps)[number]
+				ColorStyleAttr
 			>
 		>
 	>
 
+type ColorStyleAttr = Extract<
+	(keyof ViewStyle) | (keyof TextStyle) | (keyof ImageStyle),
+	| "backgroundColor"
+	| "borderColor"
+	| "borderEndColor"
+	| "borderStartColor"
+	| "borderTopColor"
+	| "borderBottomColor"
+	| "borderLeftColor"
+	| "borderRightColor"
+	| "borderBlockColor"
+	| "borderBlockEndColor"
+	| "borderBlockStartColor"
+	| "color"
+	| "outlineColor"
+	| "overlayColor"
+	| "textDecorationColor"
+	| "textShadowColor"
+	| "tintColor"
+	| "shadowColor"
+>
+
 /**
  * Create style sheet to help using color token of current color scheme and current breakpoint declaratively.  
  * It makes your code way more shorter which doesn't need to create conditional of current color scheme or current breakpoint in the style prop implementation
@@ -79,7 +100,7 @@ export function create<Styles extends Record<string, Style | StyleBreakpoint> =
 		normalStyle: Record<string, Style> =
 			{},
 
-		coloredStyle: Record<string, Style> =
+		carbonColoredStyle: Record<string, Partial<Record<ColorStyleAttr, string>>> =
 			{},
 
 		breakpointStyle: Record<string, Style> =
@@ -90,45 +111,62 @@ export function create<Styles extends Record<string, Style | StyleBreakpoint> =
 	for(const name in styles) {
 		const style = styles[name]
 
-		for(const styleProp in style) {
-			if((breakpointStyleProps as Record<string, string>)[styleProp]) {
+		for(const styleAttr in style) {
+			if((breakpointStyleProps as Record<string, string>)[styleAttr]) {
 
 				containBreakpointStyle = true
-				breakpointStyle[`${styleProp}${name}`] = (style as StyleBreakpoint)[styleProp] as Style
+				breakpointStyle[`${styleAttr}${name}`] = (style as StyleBreakpoint)[styleAttr] as Style
+
+			} else if(colorStyleAttrs[styleAttr as ColorStyleAttr]) {
+
+				// Resolve color string to the Carbon color (if any) for style prop or attribute that contain 'color'
+				// in the name like 'color', 'backgroundColor', 'borderColor', etc.,
+				// and the color value contains "|"
+				// If it does, it's a color token references that formatted in `gray_10|gray_100`
+
+				// For instance,
+				// if user want to modify `backgroundColor` with `CarbonStyleSheet.create` and using
+				// `CarbonStyleSheet.color.background`
+				// The `CarbonStyleSheet.color.background` itself is storing two color for gray_10 and gray_100
+				// in single string, which is `#f4f4f4|#000000`
+				// So we need to split them and make correct React Native StyleSheet
+				// with the same style attribute, for gray_10 and gray_100
 
-			} else if(colorStyleProps.indexOf(styleProp as keyof Style) > -1) {
+				const colorStr = (style as Record<ColorStyleAttr, string>)[styleAttr as ColorStyleAttr]
 
 				/**
-				 * Resolve color string to the Carbon color (if any) for style prop or attribute that contain 'color' in the name like 'color', 'backgroundColor', 'borderColor', etc
-				 * @see {@link colorStyleProps}
+				 * It's color token references
+				 * 
+				 * For instance,
+				 * `#f4f4f4|#000000`. It's formatted in `gray_10|gray_100`.
 				 */
+				const carbonColorToken = colorStr.split("|")
 
-				const
-					coloredStyleName_G10 =
-						`${prefixColorStyleName.gray_10}${name}`,
+				if(carbonColorToken.length > 1) {
+					const
+						coloredStyleName_G10 =
+							`${prefixColorStyleName.gray_10}${name}`,
 
-					coloredStyleName_G100 =
-						`${prefixColorStyleName.gray_100}${name}`
+						coloredStyleName_G100 =
+							`${prefixColorStyleName.gray_100}${name}`
 
-				if(!coloredStyle[coloredStyleName_G10]) {
-					coloredStyle[coloredStyleName_G10] = {
+					if(!carbonColoredStyle[coloredStyleName_G10]) {
+						carbonColoredStyle[coloredStyleName_G10] = {
+						}
 					}
-				}
-				if(!coloredStyle[coloredStyleName_G100]) {
-					coloredStyle[coloredStyleName_G100] = {
+					if(!carbonColoredStyle[coloredStyleName_G100]) {
+						carbonColoredStyle[coloredStyleName_G100] = {
+						}
 					}
-				}
-
-				const colorStr = (style as Record<(typeof colorStyleProps)[number], string>)[styleProp as (typeof colorStyleProps)[number]]
 
-				coloredStyle[coloredStyleName_G10][styleProp as keyof Style] =
-					Color.Token.gray_10.all[colorStr as ColorToken] as never ||
-					colorStr
+					const colorStyleAttr = styleAttr as ColorStyleAttr
 
-				coloredStyle[coloredStyleName_G100][styleProp as keyof Style] =
-					Color.Token.gray_100.all[colorStr as ColorToken] as never ||
-					colorStr
+					carbonColoredStyle[coloredStyleName_G10][colorStyleAttr] =
+						carbonColorToken[0]
 
+					carbonColoredStyle[coloredStyleName_G100][colorStyleAttr] =
+						carbonColorToken[1]
+				}
 			} else {
 
 				normalStyle[name] = style as Style
@@ -142,7 +180,7 @@ export function create<Styles extends Record<string, Style | StyleBreakpoint> =
 			StyleSheet.create<Record<string, Style>>(normalStyle),
 
 		coloredStyleSheet =
-			StyleSheet.create<Record<string, Style>>(coloredStyle),
+			StyleSheet.create<Record<string, Style>>(carbonColoredStyle),
 
 		breakpointStyleSheet =
 			StyleSheet.create<Record<string, Style>>(breakpointStyle)
@@ -181,27 +219,29 @@ export function create<Styles extends Record<string, Style | StyleBreakpoint> =
 }
 
 const
-	colorStyleProps: ((keyof ViewStyle) | (keyof TextStyle) | (keyof ImageStyle))[] =
-		[
-			"backgroundColor",
-			"borderColor",
-			"borderEndColor",
-			"borderStartColor",
-			"borderTopColor",
-			"borderBottomColor",
-			"borderLeftColor",
-			"borderRightColor",
-			"borderBlockColor",
-			"borderBlockEndColor",
-			"borderBlockStartColor",
-			"color",
-			"outlineColor",
-			"overlayColor",
-			"textDecorationColor",
-			"textShadowColor",
-			"tintColor",
-			"shadowColor",
-		] as const,
+	colorStyleAttrs =
+		{
+			backgroundColor: "backgroundColor",
+			borderColor: "borderColor",
+			borderEndColor: "borderEndColor",
+			borderStartColor: "borderStartColor",
+			borderTopColor: "borderTopColor",
+			borderBottomColor: "borderBottomColor",
+			borderLeftColor: "borderLeftColor",
+			borderRightColor: "borderRightColor",
+			borderBlockColor: "borderBlockColor",
+			borderBlockEndColor: "borderBlockEndColor",
+			borderBlockStartColor: "borderBlockStartColor",
+			color: "color",
+			outlineColor: "outlineColor",
+			overlayColor: "overlayColor",
+			textDecorationColor: "textDecorationColor",
+			textShadowColor: "textShadowColor",
+			tintColor: "tintColor",
+			shadowColor: "shadowColor",
+		} as const satisfies {
+			[Attr in ColorStyleAttr]: Attr
+		},
 
 	prefixColorStyleName: Record<ThemeType.ColorScheme, string> =
 		{

package/src/carbon-style-sheet/g/font.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 13 Mar 2026 18:42:02 GMT
+// Sun, 29 Mar 2026 10:05:23 GMT
 
 // To support cross platforms, we are mapping the `fontFamily` value to its PostScript name,
 // instead of the `fontWeight` number with a single font family name like in Web// Giving a `fontWeight` number will not work.

package/src/carbon-style-sheet/g/spacing.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 13 Mar 2026 18:42:02 GMT
+// Sun, 29 Mar 2026 10:05:23 GMT
 
 import {
 	StyleSheet,

package/src/carbon-style-sheet/g/text.ts

@@ -5,59 +5,59 @@ import {
 export const { text_center } = StyleSheet.create({
 	text_center: {
 		textAlign: "center",
-	},
+	} as const,
 })
 
 export const { text_left } = StyleSheet.create({
 	text_left: {
 		textAlign: "left",
-	},
+	} as const,
 })
 
 export const { text_right } = StyleSheet.create({
 	text_right: {
 		textAlign: "right",
-	},
+	} as const,
 })
 
 export const { underline } = StyleSheet.create({
 	underline: {
 		textDecorationLine: "underline",
-	},
+	} as const,
 })
 
 export const { line_through } = StyleSheet.create({
 	line_through: {
 		textDecorationLine: "line-through",
-	},
+	} as const,
 })
 
 export const { no_underline } = StyleSheet.create({
 	no_underline: {
 		textDecorationLine: "none",
-	},
+	} as const,
 })
 
 export const { align_auto } = StyleSheet.create({
 	align_auto: {
 		verticalAlign: "auto",
-	},
+	} as const,
 })
 
 export const { align_top } = StyleSheet.create({
 	align_top: {
 		verticalAlign: "top",
-	},
+	} as const,
 })
 
 export const { align_middle } = StyleSheet.create({
 	align_middle: {
 		verticalAlign: "middle",
-	},
+	} as const,
 })
 
 export const { align_bottom } = StyleSheet.create({
 	align_bottom: {
 		verticalAlign: "bottom",
-	},
+	} as const,
 })

package/src/carbon-style-sheet/g/typography.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 13 Mar 2026 18:42:02 GMT
+// Sun, 29 Mar 2026 10:05:23 GMT
 
 import {
 	StyleSheet,

package/src/carbon-style-sheet/g-object/font.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 13 Mar 2026 18:42:02 GMT
+// Sun, 29 Mar 2026 10:05:23 GMT
 
 // To support cross platforms, we are mapping the `fontFamily` value to its PostScript name,
 // instead of the `fontWeight` number with a single font family name like in Web// Giving a `fontWeight` number will not work.

package/src/carbon-style-sheet/g-object/spacing.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 13 Mar 2026 18:42:02 GMT
+// Sun, 29 Mar 2026 10:05:23 GMT
 
 import type {
 	ViewStyle,

package/src/carbon-style-sheet/g-object/text.ts

@@ -1,43 +1,43 @@
 import type {
-	ViewStyle,
+	TextStyle,
 } from "react-native"
 
 export const text_center = {
 	textAlign: "center",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const text_left = {
 	textAlign: "left",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const text_right = {
 	textAlign: "right",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const underline = {
 	textDecorationLine: "underline",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const line_through = {
 	textDecorationLine: "line-through",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const no_underline = {
 	textDecorationLine: "none",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const align_auto = {
 	verticalAlign: "auto",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const align_top = {
 	verticalAlign: "top",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const align_middle = {
 	verticalAlign: "middle",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle
 
 export const align_bottom = {
 	verticalAlign: "bottom",
-} as const satisfies ViewStyle
+} as const satisfies TextStyle

package/src/carbon-style-sheet/g-object/typography.ts

@@ -1,5 +1,5 @@
 // Generated
-// Fri, 13 Mar 2026 18:42:02 GMT
+// Sun, 29 Mar 2026 10:05:23 GMT
 
 import type {
 	TextStyle,

package/src/carbon-style-sheet/index.ts

@@ -2,6 +2,8 @@ import {
 	StyleSheet as RNStyleSheet,
 } from "react-native"
 
+import * as color from "./color"
+
 import * as g from "./g"
 import * as gObject from "./g-object"
 
@@ -12,11 +14,11 @@ export const hairlineWidth = RNStyleSheet.hairlineWidth
 export const setStyleAttributePreprocessor = RNStyleSheet.setStyleAttributePreprocessor
 
 export {
+	color,
 	g,
 	gObject,
 }
 
 export * from "./breakpoint"
-export * from "./color"
 export * from "./create"
 export * from "./use"