@audira/carbon-react-native 0.0.1-alpha.1

package/src/constants/color/tokens/gray-10.ts

@@ -0,0 +1,197 @@
+import {
+	hexToRgba,
+} from '../../../helpers/color/hex-to-rgba'
+
+import type {
+	ThemeType,
+} from '../../../types'
+
+import code from '../code.json'
+
+export const gray_10 = {
+
+	background: code.gray10,
+	background_hover: hexToRgba(code.gray50, '0.12'),
+	background_active: hexToRgba(code.gray50, '0.5'),
+	background_selected: hexToRgba(code.gray50, '0.2'),
+	background_selected_hover: hexToRgba(code.gray50, '0.32'),
+	background_inverse: code.gray80,
+	background_inverse_hover: code.gray80Hover,
+	background_brand: code.blue60,
+
+	layer_01: code.white,
+	layer_02: code.gray10,
+	layer_03: code.white,
+	layer_hover_01: code.gray10Hover,
+	layer_hover_02: code.gray10Hover,
+	layer_hover_03: code.gray10Hover,
+	layer_active_01: code.gray30,
+	layer_active_02: code.gray30,
+	layer_active_03: code.gray30,
+	layer_selected_01: code.gray20,
+	layer_selected_02: code.gray20,
+	layer_selected_03: code.gray20,
+	layer_selected_hover_01: code.gray20Hover,
+	layer_selected_hover_02: code.gray20Hover,
+	layer_selected_hover_03: code.gray20Hover,
+	layer_selected_inverse: code.gray100,
+	layer_selected_disabled: code.gray50,
+
+	layer_accent_01: code.gray20,
+	layer_accent_02: code.gray20,
+	layer_accent_03: code.gray20,
+	layer_accent_hover_01: code.gray20Hover,
+	layer_accent_hover_02: code.gray20Hover,
+	layer_accent_hover_03: code.gray20Hover,
+	layer_accent_active_01: code.gray40,
+	layer_accent_active_02: code.gray40,
+	layer_accent_active_03: code.gray40,
+
+	field_01: code.white,
+	field_02: code.gray10,
+	field_03: code.white,
+	field_hover_01: code.gray10Hover,
+	field_hover_02: code.gray10Hover,
+	field_hover_03: code.gray10Hover,
+
+	border_interactive: code.blue60,
+	border_subtle_00: code.gray30,
+	border_subtle_01: code.gray20,
+	border_subtle_02: code.gray30,
+	border_subtle_03: code.gray20,
+	border_subtle_selected_01: code.gray30,
+	border_subtle_selected_02: code.gray30,
+	border_subtle_selected_03: code.gray30,
+	border_strong_01: code.gray50,
+	border_strong_02: code.gray50,
+	border_strong_03: code.gray50,
+	border_tile_01: code.gray40,
+	border_tile_02: code.gray30,
+	border_tile_03: code.gray40,
+	border_inverse: code.gray100,
+	border_disabled: code.gray30,
+
+	text_primary: code.gray100,
+	text_secondary: code.gray70,
+	text_placeholder: code.gray40,
+	text_on_color: code.white,
+	text_on_color_disabled: code.gray50,
+	text_helper: code.gray60,
+	text_error: code.red60,
+	text_inverse: code.white,
+	text_disabled: hexToRgba(code.gray100, '0.25'),
+
+	link_primary: code.blue60,
+	link_primary_hover: code.blue70,
+	link_secondary: code.blue70,
+	link_inverse: code.blue40,
+	link_inverse_hover: code.blue30,
+	link_inverse_active: code.gray10,
+	link_inverse_visited: code.purple40,
+	link_visited: code.purple60,
+
+	icon_primary: code.gray100,
+	icon_secondary: code.gray70,
+	icon_on_color: code.white,
+	icon_on_color_disabled: code.gray50,
+	icon_interactive: code.blue60,
+	icon_inverse: code.white,
+	icon_disabled: hexToRgba(code.gray100, '0.25'),
+
+	support_error: code.red60,
+	support_success: code.green50,
+	support_warning: code.yellow30,
+	support_info: code.blue70,
+	support_error_inverse: code.red50,
+	support_success_inverse: code.green40,
+	support_warning_inverse: code.yellow30,
+	support_info_inverse: code.blue50,
+	support_caution_minor: code.yellow30,
+	support_caution_major: code.orange40,
+	support_caution_undefined: code.purple60,
+
+	focus: code.blue60,
+	focus_inset: code.white,
+	focus_inverse: code.white,
+
+	interactive: code.blue60,
+	highlight: code.blue20,
+	toggle_off: code.gray50,
+	overlay: hexToRgba(code.gray100, '0.5'),
+	skeleton_element: code.gray30,
+	skeleton_background: code.gray10Hover,
+
+	button_primary: code.blue60,
+	button_primary_hover: code.blue60Hover,
+	button_primary_active: code.blue80,
+	button_secondary: code.gray80,
+	button_secondary_hover: code.gray80Hover,
+	button_secondary_active: code.gray60,
+	button_tertiary: code.blue60,
+	button_tertiary_hover: code.blue60Hover,
+	button_tertiary_active: code.blue80,
+	button_danger_primary: code.red60,
+	button_danger_secondary: code.red60,
+	button_danger_hover: code.red60Hover,
+	button_danger_active: code.red80,
+	button_separator: code.gray20,
+	button_disabled: code.gray30,
+
+	tag_background_gray: code.gray20,
+	tag_color_gray: code.gray100,
+	tag_hover_gray: code.gray20Hover,
+	tag_border_gray: code.gray40,
+	tag_background_cool_gray: code.coolGray20,
+	tag_color_cool_gray: code.coolGray100,
+	tag_hover_cool_gray: code.coolGray20Hover,
+	tag_border_cool_gray: code.coolGray40,
+	tag_background_warm_gray: code.warmGray20,
+	tag_color_warm_gray: code.warmGray100,
+	tag_hover_warm_gray: code.warmGray20Hover,
+	tag_border_warm_gray: code.warmGray40,
+	tag_background_red: code.red20,
+	tag_color_red: code.red70,
+	tag_hover_red: code.red20Hover,
+	tag_border_red: code.red40,
+	tag_background_magenta: code.magenta20,
+	tag_color_magenta: code.magenta70,
+	tag_hover_magenta: code.magenta20Hover,
+	tag_border_magenta: code.magenta40,
+	tag_background_purple: code.purple20,
+	tag_color_purple: code.purple70,
+	tag_hover_purple: code.purple20Hover,
+	tag_border_purple: code.purple40,
+	tag_background_blue: code.blue20,
+	tag_color_blue: code.blue70,
+	tag_hover_blue: code.blue20Hover,
+	tag_border_blue: code.blue40,
+	tag_background_cyan: code.cyan20,
+	tag_color_cyan: code.cyan70,
+	tag_hover_cyan: code.cyan20Hover,
+	tag_border_cyan: code.cyan40,
+	tag_background_teal: code.teal20,
+	tag_color_teal: code.teal70,
+	tag_hover_teal: code.teal20Hover,
+	tag_border_teal: code.teal40,
+	tag_background_green: code.green20,
+	tag_color_green: code.green70,
+	tag_hover_green: code.green20Hover,
+	tag_border_green: code.green40,
+
+	notification_info_background: code.blue10,
+	notification_info_border: hexToRgba(code.blue70, '0.3'),
+	notification_error_background: code.red10,
+	notification_error_border: hexToRgba(code.red60, '0.3'),
+	notification_success_background: code.green10,
+	notification_success_border: hexToRgba(code.green50, '0.3'),
+	notification_warning_background: code.yellow10,
+	notification_warning_border: hexToRgba(code.yellow30, '0.3'),
+
+	notification_action_hover: code.white,
+	notification_action_tertiary_inverse: code.white,
+	notification_action_tertiary_inverse_active: code.white,
+	notification_action_tertiary_inverse_hover: code.gray30,
+	notification_action_tertiary_inverse_text: code.gray100,
+	notification_action_tertiary_inverse_text_on_color_disabled: code.white,
+
+} as const satisfies Record<ThemeType.ColorToken, string>

package/src/constants/color/tokens/gray-100.ts

@@ -0,0 +1,197 @@
+import {
+	hexToRgba,
+} from '../../../helpers/color/hex-to-rgba'
+
+import type {
+	ThemeType,
+} from '../../../types'
+
+import code from '../code.json'
+
+export const gray_100 = {
+
+	background: code.black,
+	background_hover: hexToRgba(code.gray50, '0.16'),
+	background_active: hexToRgba(code.gray50, '0.4'),
+	background_selected: hexToRgba(code.gray50, '0.24'),
+	background_selected_hover: hexToRgba(code.gray50, '0.32'),
+	background_inverse: code.gray10,
+	background_inverse_hover: code.gray10Hover,
+	background_brand: code.blue60,
+
+	layer_01: code.gray90,
+	layer_02: code.gray80,
+	layer_03: code.gray70,
+	layer_hover_01: code.gray90Hover,
+	layer_hover_02: code.gray80Hover,
+	layer_hover_03: code.gray70Hover,
+	layer_active_01: code.gray70,
+	layer_active_02: code.gray60,
+	layer_active_03: code.gray50,
+	layer_selected_01: code.gray80,
+	layer_selected_02: code.gray70,
+	layer_selected_03: code.gray60,
+	layer_selected_hover_01: code.gray80Hover,
+	layer_selected_hover_02: code.gray70Hover,
+	layer_selected_hover_03: code.gray60Hover,
+	layer_selected_inverse: code.gray10,
+	layer_selected_disabled: code.gray60,
+
+	layer_accent_01: code.gray80,
+	layer_accent_02: code.gray70,
+	layer_accent_03: code.gray60,
+	layer_accent_hover_01: code.gray80Hover,
+	layer_accent_hover_02: code.gray70Hover,
+	layer_accent_hover_03: code.gray60Hover,
+	layer_accent_active_01: code.gray70,
+	layer_accent_active_02: code.gray50,
+	layer_accent_active_03: code.gray80,
+
+	field_01: code.gray90,
+	field_02: code.gray80,
+	field_03: code.gray70,
+	field_hover_01: code.gray90Hover,
+	field_hover_02: code.gray80Hover,
+	field_hover_03: code.gray70Hover,
+
+	border_interactive: code.blue50,
+	border_subtle_00: code.gray80,
+	border_subtle_01: code.gray80,
+	border_subtle_02: code.gray70,
+	border_subtle_03: code.gray60,
+	border_subtle_selected_01: code.gray70,
+	border_subtle_selected_02: code.gray60,
+	border_subtle_selected_03: code.gray50,
+	border_strong_01: code.gray60,
+	border_strong_02: code.gray50,
+	border_strong_03: code.gray40,
+	border_tile_01: code.gray70,
+	border_tile_02: code.gray60,
+	border_tile_03: code.gray50,
+	border_inverse: code.gray10,
+	border_disabled: hexToRgba(code.gray50, '0.5'),
+
+	text_primary: code.gray10,
+	text_secondary: code.gray30,
+	text_placeholder: code.gray60,
+	text_on_color: code.white,
+	text_on_color_disabled: hexToRgba(code.white, '0.25'),
+	text_helper: code.gray50,
+	text_error: code.red40,
+	text_inverse: code.gray100,
+	text_disabled: hexToRgba(code.gray10, '0.25'),
+
+	link_primary: code.blue40,
+	link_primary_hover: code.blue30,
+	link_secondary: code.blue30,
+	link_inverse: code.blue60,
+	link_inverse_hover: code.blue70,
+	link_inverse_active: code.gray100,
+	link_inverse_visited: code.purple60,
+	link_visited: code.purple40,
+
+	icon_primary: code.gray10,
+	icon_secondary: code.gray30,
+	icon_on_color: code.white,
+	icon_on_color_disabled: hexToRgba(code.white, '0.25'),
+	icon_interactive: code.white,
+	icon_inverse: code.gray100,
+	icon_disabled: hexToRgba(code.gray10, '0.25'),
+
+	support_error: code.red50,
+	support_success: code.green40,
+	support_warning: code.yellow30,
+	support_info: code.blue50,
+	support_error_inverse: code.red60,
+	support_success_inverse: code.green50,
+	support_warning_inverse: code.yellow30,
+	support_info_inverse: code.blue70,
+	support_caution_minor: code.yellow30,
+	support_caution_major: code.orange40,
+	support_caution_undefined: code.purple50,
+
+	focus: code.white,
+	focus_inset: code.gray100,
+	focus_inverse: code.blue60,
+
+	interactive: code.blue50,
+	highlight: code.blue90,
+	toggle_off: code.gray60,
+	overlay: hexToRgba(code.gray100, '0.7'),
+	skeleton_element: code.gray70,
+	skeleton_background: code.gray80Hover,
+
+	button_primary: code.blue60,
+	button_primary_hover: code.blue60Hover,
+	button_primary_active: code.blue80,
+	button_secondary: code.gray60,
+	button_secondary_hover: code.gray60Hover,
+	button_secondary_active: code.gray80,
+	button_tertiary: code.white,
+	button_tertiary_hover: code.gray10,
+	button_tertiary_active: code.gray30,
+	button_danger_primary: code.red60,
+	button_danger_secondary: code.red50,
+	button_danger_hover: code.red60Hover,
+	button_danger_active: code.red80,
+	button_separator: code.gray100,
+	button_disabled: code.gray70,
+
+	tag_background_gray: code.gray70,
+	tag_color_gray: code.gray20,
+	tag_hover_gray: code.gray70Hover,
+	tag_border_gray: code.gray50,
+	tag_background_cool_gray: code.coolGray70,
+	tag_color_cool_gray: code.coolGray20,
+	tag_hover_cool_gray: code.coolGray70Hover,
+	tag_border_cool_gray: code.coolGray50,
+	tag_background_warm_gray: code.warmGray70,
+	tag_color_warm_gray: code.warmGray20,
+	tag_hover_warm_gray: code.warmGray70Hover,
+	tag_border_warm_gray: code.warmGray50,
+	tag_background_red: code.red70,
+	tag_color_red: code.red20,
+	tag_hover_red: code.red70Hover,
+	tag_border_red: code.red50,
+	tag_background_magenta: code.magenta70,
+	tag_color_magenta: code.magenta20,
+	tag_hover_magenta: code.magenta70Hover,
+	tag_border_magenta: code.magenta50,
+	tag_background_purple: code.purple70,
+	tag_color_purple: code.purple20,
+	tag_hover_purple: code.purple70Hover,
+	tag_border_purple: code.purple50,
+	tag_background_blue: code.blue70,
+	tag_color_blue: code.blue20,
+	tag_hover_blue: code.blue70Hover,
+	tag_border_blue: code.blue50,
+	tag_background_cyan: code.cyan70,
+	tag_color_cyan: code.cyan20,
+	tag_hover_cyan: code.cyan70Hover,
+	tag_border_cyan: code.cyan50,
+	tag_background_teal: code.teal70,
+	tag_color_teal: code.teal20,
+	tag_hover_teal: code.teal70Hover,
+	tag_border_teal: code.teal50,
+	tag_background_green: code.green70,
+	tag_color_green: code.green20,
+	tag_hover_green: code.green70Hover,
+	tag_border_green: code.green50,
+
+	notification_info_background: code.gray90,
+	notification_info_border: hexToRgba(code.blue50, '0.5'),
+	notification_error_background: code.gray90,
+	notification_error_border: hexToRgba(code.red40, '0.5'),
+	notification_success_background: code.gray90,
+	notification_success_border: hexToRgba(code.green40, '0.5'),
+	notification_warning_background: code.gray90,
+	notification_warning_border: hexToRgba(code.yellow50, '0.5'),
+
+	notification_action_hover: code.gray90Hover,
+	notification_action_tertiary_inverse: code.blue60,
+	notification_action_tertiary_inverse_active: code.gray100,
+	notification_action_tertiary_inverse_hover: code.blue80,
+	notification_action_tertiary_inverse_text: code.white,
+	notification_action_tertiary_inverse_text_on_color_disabled: code.white,
+
+} as const satisfies Record<ThemeType.ColorToken, string>

package/src/constants/color/tokens/index.ts

@@ -0,0 +1,2 @@
+export * from './gray-10'
+export * from './gray-100'

package/src/constants/index.ts

@@ -0,0 +1,11 @@
+import * as ColorConstant from './color'
+import * as MotionConstant from './motion'
+import * as TypographyConstant from './typography'
+
+export {
+	ColorConstant,
+	MotionConstant,
+	TypographyConstant,
+}
+
+export { default as SpacingConstant } from './spacing'

package/src/constants/motion/index.ts

@@ -0,0 +1,34 @@
+/**
+ * Initially, it was using @carbon/motion
+ */
+
+/**
+ * In milliseconds  
+ * https://carbondesignsystem.com/elements/motion/overview/#duration-tokens
+ */
+export const Durations = {
+	fast_01: 70,
+	fast_02: 110,
+	moderate_01: 150,
+	moderate_02: 240,
+	slow_01: 400,
+	slow_02: 700,
+} as const
+
+/**
+ * https://carbondesignsystem.com/elements/motion/overview/#easing
+ */
+export const Easings = {
+	standard: {
+		productive: { x1: 0.2, y1: 0, x2: 0.38, y2: 0.9 },
+		expressive: { x1: 0.4, y1: 0.14, x2: 0.3, y2: 1 },
+	},
+	entrance: {
+		productive: { x1: 0, y1: 0, x2: 0.38, y2: 0.9 },
+		expressive: { x1: 0, y1: 0, x2: 0.3, y2: 1 },
+	},
+	exit: {
+		productive: { x1: 0.2, y1: 0, x2: 1, y2: 0.9 },
+		expressive: { x1: 0.4, y1: 0.14, x2: 1, y2: 1 },
+	},
+} as const

package/src/constants/spacing.ts

@@ -0,0 +1,17 @@
+export default {
+
+	spacing_01: 2,
+	spacing_02: 4,
+	spacing_03: 8,
+	spacing_04: 12,
+	spacing_05: 16,
+	spacing_06: 24,
+	spacing_07: 32,
+	spacing_08: 40,
+	spacing_09: 48,
+	spacing_10: 64,
+	spacing_11: 80,
+	spacing_12: 96,
+	spacing_13: 160,
+
+} as const

package/src/constants/typography/font-family.ts

@@ -0,0 +1,16 @@
+export const FontFamily = {
+	thin: 'IBMPlexSans-Thin',
+	thin_italic: 'IBMPlexSans-Thin-Italic',
+	extralight: 'IBMPlexSans-ExtraLight',
+	extralight_italic: 'IBMPlexSans-ExtraLight-Italic',
+	light: 'IBMPlexSans-Light',
+	light_italic: 'IBMPlexSans-Light-Italic',
+	normal: 'IBMPlexSans-Regular',
+	normal_italic: 'IBMPlexSans-Regular-Italic',
+	medium: 'IBMPlexSans-Medium-Italic',
+	medium_italic: 'IBMPlexSans-Medium-Italic',
+	semibold: 'IBMPlexSans-SemiBold',
+	semibold_italic: 'IBMPlexSans-SemiBold-Italic',
+	bold: 'IBMPlexSans-Bold',
+	bold_italic: 'IBMPlexSans-Italic',
+} as const

package/src/constants/typography/index.ts

@@ -0,0 +1,2 @@
+export * from './font-family'
+export * from './type-sets'

package/src/constants/typography/type-sets.ts

@@ -0,0 +1,151 @@
+import type {
+	TypographyType,
+} from '../../types'
+
+const
+	body_compact_01: TypographyType.TypeSetsStyle =
+		{
+			fontSize: 14,
+			lineHeight: 18,
+			fontWeight: 400,
+			letterSpacing: 0.16,
+		},
+
+	body_compact_02: TypographyType.TypeSetsStyle =
+		{
+			fontSize: 16,
+			lineHeight: 22,
+			fontWeight: 400,
+			letterSpacing: 0,
+		},
+
+	body_01: TypographyType.TypeSetsStyle =
+		{
+			fontSize: 14,
+			lineHeight: 20,
+			fontWeight: 400,
+			letterSpacing: 0.16,
+		},
+
+	body_02: TypographyType.TypeSetsStyle =
+		{
+			fontSize: 16,
+			lineHeight: 24,
+			fontWeight: 400,
+			letterSpacing: 0,
+		}
+
+export const TypeSets: TypographyType.TypeSets = {
+
+	code_01: {
+		fontSize: 12,
+		lineHeight: 16,
+		fontWeight: 400,
+		letterSpacing: 0.32,
+	},
+	code_02: {
+		fontSize: 14,
+		lineHeight: 20,
+		fontWeight: 400,
+		letterSpacing: 0.32,
+	},
+	label_01: {
+		fontSize: 12,
+		lineHeight: 16,
+		fontWeight: 400,
+		letterSpacing: 0.32,
+	},
+	label_02: {
+		fontSize: 14,
+		lineHeight: 18,
+		fontWeight: 400,
+		letterSpacing: 0.16,
+	},
+	helper_text_01: {
+		fontSize: 12,
+		lineHeight: 16,
+		fontWeight: 400,
+		letterSpacing: 0.32,
+	},
+	helper_text_02: {
+		fontSize: 14,
+		lineHeight: 18,
+		fontWeight: 400,
+		letterSpacing: 0.16,
+	},
+	legal_01: {
+		fontSize: 12,
+		lineHeight: 16,
+		fontWeight: 400,
+		letterSpacing: 0.32,
+	},
+	legal_02: {
+		fontSize: 14,
+		lineHeight: 18,
+		fontWeight: 400,
+		letterSpacing: 0.16,
+	},
+
+	body_compact_01: body_compact_01,
+	body_compact_02: body_compact_02,
+	body_01: {
+		fontSize: 14,
+		lineHeight: 20,
+		fontWeight: 400,
+		letterSpacing: 0.16,
+	},
+	body_02: {
+		fontSize: 16,
+		lineHeight: 24,
+		fontWeight: 400,
+		letterSpacing: 0,
+	},
+
+	heading_compact_01: {
+		...body_compact_01,
+		fontWeight: 600,
+	},
+	heading_compact_02: {
+		...body_compact_02,
+		fontWeight: 600,
+	},
+	heading_01: {
+		...body_01,
+		fontWeight: 600,
+	},
+	heading_02: {
+		...body_02,
+		fontWeight: 600,
+	},
+	heading_03: {
+		fontSize: 20,
+		lineHeight: 28,
+		fontWeight: 400,
+		letterSpacing: 0,
+	},
+	heading_04: {
+		fontSize: 28,
+		lineHeight: 36,
+		fontWeight: 400,
+		letterSpacing: 0,
+	},
+	heading_05: {
+		fontSize: 32,
+		lineHeight: 40,
+		fontWeight: 400,
+		letterSpacing: 0,
+	},
+	heading_06: {
+		fontSize: 42,
+		lineHeight: 50,
+		fontWeight: 300,
+		letterSpacing: 0,
+	},
+	heading_07: {
+		fontSize: 54,
+		lineHeight: 64,
+		fontWeight: 300,
+		letterSpacing: 0,
+	},
+
+}

package/src/contexts/global-config/context.ts

@@ -0,0 +1,20 @@
+import {
+	createContext,
+} from 'react'
+
+import type {
+	NotificationColor,
+} from '../../components/notification/types'
+
+export interface GlobalConfigContext {
+	/**
+	 * @platform android
+	 */
+	android_buttonRippleEffect: boolean,
+	notificationColor: NotificationColor,
+}
+
+export const GlobalConfigContext = createContext<GlobalConfigContext>({
+	android_buttonRippleEffect: true,
+	notificationColor: 'high_contrast',
+})

package/src/contexts/global-config/provider.tsx

@@ -0,0 +1,26 @@
+import {
+	GlobalConfigContext,
+} from './context'
+
+export interface GlobalConfigContextProviderProps extends Partial<GlobalConfigContext> {
+	children?: React.ReactNode,
+}
+
+export function GlobalConfigContextProvider({
+	android_buttonRippleEffect = true,
+	notificationColor = 'high_contrast',
+	children,
+}: GlobalConfigContextProviderProps) {
+
+	return (
+		<GlobalConfigContext.Provider
+			value={{
+				android_buttonRippleEffect,
+				notificationColor,
+			}}
+		>
+			{ children }
+		</GlobalConfigContext.Provider>
+	)
+
+}

package/src/contexts/index.tsx

@@ -0,0 +1,2 @@
+export * from './global-config/context'
+export * from './theme/context'