react-native-system-ui 0.0.7 → 1.0.0

package/README.md

@@ -1,12 +1,13 @@
 # react-native-system-ui
 
-面向 React Native 的设计系统级组件库。Tokens + ThemeProvider 主题体系，按需引入、体积可控；API 统一可组合，支持可访问性与多端一致。
+面向 React Native 的高性能设计系统组件库。基于 Design Tokens 驱动主题体系，50+ 组件全量覆盖移动端场景；原生 StyleSheet 零运行时开销，单组件均值 **3.4 KB gzip**；iOS / Android / Web 三端同构，API 一致、行为对齐。
 
-## 特性
+## 核心优势
 
-- **设计系统**：Design Tokens + ThemeProvider，无 less、基于 StyleSheet，组件不耦合具体样式，利于主题定制与按需复用。
-- **体积可控**：支持 Tree Shaking 与按需引入，单组件体积可控；详见文档站「组件体积」。
-- **API 统一**：语义贴近主流移动端组件库，迁移成本低；文档与示例聚焦落地与扩展。
+- **极致轻量**：全组件经过逐行精简——冗余 Hook 移除、StyleSheet 合并、计算内联、辅助函数提取；按需引入 + Tree Shaking，单组件平均 gzip 仅 **3.4 KB**，最小组件（SafeAreaView）仅 **0.6 KB**。
+- **原生性能**：纯 StyleSheet 驱动，零 CSS-in-JS 运行时；动画基于原生 Animated / LayoutAnimation，无 JS 线程阻塞；列表类组件（Picker、Swiper、Tabs）基于 FlatList / ScrollView 原生滚动，确保 60fps 流畅交互。
+- **三端同构**：iOS / Android / Web 统一 API 与交互行为；Swiper、Picker 等核心组件在 Web 端自动适配桌面鼠标拖拽与移动端触控，无需业务层额外处理。
+- **设计系统**：Design Tokens + ThemeProvider 分层架构，组件自管 tokens；支持 light / dark / 品牌主题一键切换，样式定制不侵入组件实现。
 
 ## 快速开始
 
@@ -20,7 +21,7 @@ pnpm add react-native-system-icon
 # 同时保证项目已安装 react 和 react-native（>=18.2 / >=0.79）
 ```
 
-**优先使用 ConfigProvider** 包裹根节点，这样 Button、Toast、Popup、Dialog 等都能直接使用，无需再配弹层挂载点。
+**优先使用 ConfigProvider** 包裹根节点，Button、Toast、Popup、Dialog 等即可直接使用，无需额外配置弹层挂载点。
 
 ```tsx
 import { ConfigProvider, Button, Toast } from 'react-native-system-ui'
@@ -105,40 +106,54 @@ export const AuroraBranding = () => (
 
 `themePresets.light` 等价于默认主题，`themePresets.dark` 提供深色配色，`themePresets.aurora` 演示品牌化圆角/字体，通过 `ThemeProvider` 配置。
 
-## 架构总览
+## 架构
 
-| 层级 | 说明 |
+| 层级 | 职责 |
 | --- | --- |
-| `src/design-system` | 仅承载基础设计变量（颜色、排版、间距、圆角等）与 `ThemeProvider`，只做公共部分。 |
-| `src/components/*` | 每个组件自带 `tokens.ts`/`useXXXTokens.ts` 等文件，负责自身的 token 推导与样式实现（Button 为首个示例）。 |
+| `src/design-system` | 基础设计变量（颜色、排版、间距、圆角）与 ThemeProvider，仅承载公共部分 |
+| `src/components/*` | 每个组件自带 `tokens.ts` / `useXXXTokens.ts`，自管 token 推导与样式，互不耦合 |
 
-> 这一层次化结构让“设计语言”与“交互实现”各司其职，可快速扩展到 40+ 组件而不失控。
+> 分层架构使"设计语言"与"交互实现"各司其职，可平滑扩展至 50+ 组件而不失控。
 
-## 已交付能力
+## 组件总览
 
-- **设计系统**：ConfigProvider、ThemeProvider、createTokens、themePresets（light/dark/aurora），组件自管 tokens。使用 Toast/Popup/Dialog 等弹层时推荐用 ConfigProvider 包裹根节点（内置 PortalHost）。
-- **基础与展示**：Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、NoticeBar、Popup、Portal、Progress、Slider、Toast、Dialog、Image、ImagePreview、Skeleton、WaterMark 等。
-- **表单与输入**：Form、Field、Input、PasswordInput、Checkbox、Radio、Switch、Stepper、Rate、Picker、DatetimePicker、Calendar、Search、NumberKeyboard、Area、Cascader、Selector 等。
-- **导航与反馈**：Tabs、NavBar、Tabbar、ActionSheet、Notify、Overlay、ShareSheet、Sidebar、Swiper 等。
-- **基础设施**：SafeAreaView、PortalHost、OverlayProvider、ConfigProvider 的 locale（zhCN/enUS）。
-- **文档**：快速上手、架构设计、路线图及组件文档站（`docs/`）。
+| 分类 | 组件 |
+| --- | --- |
+| **设计系统** | ConfigProvider、ThemeProvider、createTokens、themePresets（light / dark / aurora） |
+| **基础展示** | Button、Badge、Cell、Collapse、Divider、Empty、Flex、Grid、Space、Tag、Typography、Loading、Avatar |
+| **反馈交互** | Toast、Dialog、ActionSheet、Notify、Overlay、Popup、Portal、NoticeBar、ShareSheet |
+| **表单输入** | Form、Field、Input、PasswordInput、Checkbox、Radio、Switch、Stepper、Rate、Picker、DatetimePicker、Calendar、Search、NumberKeyboard、Area、Cascader、Selector |
+| **导航布局** | Tabs、NavBar、Tabbar、Sidebar、Swiper（三端手势 + 桌面鼠标拖拽） |
+| **数据展示** | Image、ImagePreview、Skeleton、Progress、Circle、Slider、CountDown、WaterMark |
+| **基础设施** | SafeAreaView、PortalHost、OverlayProvider、locale（zhCN / enUS） |
 
-详细组件列表与状态见 [指南 / 路线图](./docs/guide/roadmap.md)。
+详细组件列表与开发状态见 [路线图](./docs/guide/roadmap.md)。
 
 ## 组件体积
 
-基于 `dist/es` 各组件目录 gzip 后相加（字节），非实际打包单 chunk 体积。当前体积较大的组件（Top 5）：
-
-| 组件 | gzip 体积 |
-| --- | --- |
-| picker | ~10 KB |
-| swiper | ~10 KB |
-| tabs | ~9 KB |
-| dropdown-menu | ~6.5 KB |
-| form | ~6.3 KB |
-
-完整列表与口径说明见文档站首页「组件体积」区域。
+按需引入后单组件均值约 **3.4 KB**（各组件目录 gzip 相加估算）。支持 Tree Shaking，实际打包体积以构建结果为准。
+
+| 组件 | gzip | 组件 | gzip | 组件 | gzip |
+| --- | ---: | --- | ---: | --- | ---: |
+| picker | 8.4 KB | tabs | 7.7 KB | form | 6.6 KB |
+| cascader | 5.8 KB | dialog | 5.6 KB | slider | 5.4 KB |
+| field | 5.4 KB | calendar | 5.1 KB | popup | 5.0 KB |
+| number-keyboard | 4.8 KB | checkbox | 4.8 KB | swiper | 4.7 KB |
+| notify | 4.7 KB | button | 4.7 KB | toast | 4.6 KB |
+| stepper | 4.5 KB | radio | 4.5 KB | image-preview | 4.3 KB |
+| cell | 4.1 KB | grid | 3.9 KB | tabbar | 3.7 KB |
+| notice-bar | 3.5 KB | collapse | 3.4 KB | password-input | 3.4 KB |
+| action-sheet | 3.3 KB | portal | 3.3 KB | image | 3.2 KB |
+| datetime-picker | 3.1 KB | sidebar | 3.0 KB | share-sheet | 2.7 KB |
+| progress | 2.7 KB | selector | 2.7 KB | nav-bar | 2.6 KB |
+| typography | 2.6 KB | circle | 2.4 KB | config-provider | 2.4 KB |
+| badge | 2.3 KB | search | 2.3 KB | skeleton | 2.3 KB |
+| water-mark | 2.2 KB | space | 2.1 KB | tag | 2.0 KB |
+| flex | 1.9 KB | avatar | 1.7 KB | divider | 1.7 KB |
+| empty | 1.6 KB | input | 1.5 KB | area | 1.5 KB |
+| switch | 1.3 KB | loading | 1.2 KB | count-down | 1.2 KB |
+| overlay | 1.0 KB | safe-area-view | 0.6 KB | | |
 
 ## 版本与反馈
 
-当前为 v0.0.6，欢迎 issue / PR。
+当前为 v0.0.7，欢迎 issue / PR。

package/dist/cjs/components/action-sheet/ActionSheet.js

@@ -54,83 +54,74 @@ const ActionSheetHeader = /*#__PURE__*/_react().default.memo(({
     style: tokens.layout.header
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.titleContainer
-  }, (0, _utils.isText)(title) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.title, {
-      color: colors.title,
-      fontSize: typography.title
-    }]
-  }, title) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, (0, _utils.isText)(title) ? (0, _utils.renderTextOrNode)(title, [tokens.layout.title, {
+    color: colors.title,
+    fontSize: typography.title
+  }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.titleNode
-  }, title)), closeable ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+  }, title)), closeable && /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: tokens.layout.closeButton,
     accessibilityRole: "button",
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/_react().default.isValidElement(closeIcon) ? /*#__PURE__*/_react().default.cloneElement(closeIcon, {
     fill: colors.description,
     color: colors.description
-  }) : closeIcon) : null);
+  }) : closeIcon));
 });
-ActionSheetHeader.displayName = 'ActionSheetHeader';
 const ActionSheetItem = /*#__PURE__*/_react().default.memo(({
   action,
   index,
   tokens,
   onActionPress
 }) => {
-  const disabled = !!action.disabled;
-  const loading = !!action.loading;
+  const {
+    disabled,
+    loading,
+    name,
+    subname,
+    icon
+  } = action;
   const {
     colors,
     spacing,
     typography
   } = tokens;
-  const handlePress = (0, _react().useCallback)(() => onActionPress(action, index), [action, index, onActionPress]);
   const actionPress = (0, _hooks.useAriaPress)({
-    disabled: disabled || loading,
-    onPress: handlePress,
+    disabled: !!disabled || !!loading,
+    onPress: (0, _react().useCallback)(() => onActionPress(action, index), [action, index, onActionPress]),
     extraProps: {
-      accessibilityRole: 'button',
+      accessibilityRole: 'menuitem',
+      accessibilityLabel: (0, _utils.isText)(name) ? String(name) : undefined,
       accessibilityState: {
-        disabled,
-        busy: loading
+        disabled: !!disabled,
+        busy: !!loading
       },
       testID: `rv-action-sheet-item-${index}`
     }
   });
-  const color = action.color ?? colors.item;
-  const name = action.name;
-  const subname = action.subname;
-  const hasIcon = !!action.icon;
-  const hasName = (0, _utils.isRenderable)(name);
-  const hasSubname = (0, _utils.isRenderable)(subname);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     style: ({
       pressed
-    }) => [tokens.layout.item, hasIcon && tokens.layout.itemWithIcon, {
+    }) => [tokens.layout.item, !!icon && tokens.layout.itemWithIcon, {
       paddingVertical: spacing.vertical,
       paddingHorizontal: spacing.horizontal,
-      backgroundColor: pressed && !disabled && !loading ? colors.itemPressedBackground : colors.itemBackground
+      backgroundColor: pressed && !action.disabled && !action.loading ? colors.itemPressedBackground : colors.itemBackground
     }, action.style]
-  }, actionPress.interactionProps), hasIcon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, actionPress.interactionProps), !!icon && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.icon
-  }, action.icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
+  }, icon), loading ? /*#__PURE__*/_react().default.createElement(_loading.default, {
     size: 20
-  }) : hasName ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }) : (0, _utils.isRenderable)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.itemTextWrapper
-  }, (0, _utils.isText)(name) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.itemText, {
-      color: disabled ? colors.disabled : color,
-      fontSize: typography.item
-    }]
-  }, name) : name, hasSubname ? (0, _utils.isText)(subname) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.subname, {
-      color: colors.subitem
-    }]
-  }, subname) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, (0, _utils.renderTextOrNode)(name, [tokens.layout.itemText, {
+    color: action.disabled ? colors.disabled : action.color ?? colors.item,
+    fontSize: typography.item
+  }]), (0, _utils.isRenderable)(subname) && ((0, _utils.isText)(subname) ? (0, _utils.renderTextOrNode)(subname, [tokens.layout.subname, {
+    color: colors.subitem
+  }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.subnameNode
-  }, subname) : null) : null);
+  }, subname))) : null);
 });
-ActionSheetItem.displayName = 'ActionSheetItem';
 const ActionSheetCancel = /*#__PURE__*/_react().default.memo(({
   cancelText,
   tokens,
@@ -159,15 +150,12 @@ const ActionSheetCancel = /*#__PURE__*/_react().default.memo(({
       paddingHorizontal: spacing.horizontal,
       backgroundColor: colors.cancelBackground
     }]
-  }, cancelPress.interactionProps), (0, _utils.isText)(cancelText) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.cancelText, {
-      color: colors.cancel,
-      fontSize: typography.item
-    }]
-  }, cancelText) : cancelText));
+  }, cancelPress.interactionProps), (0, _utils.renderTextOrNode)(cancelText, [tokens.layout.cancelText, {
+    color: colors.cancel,
+    fontSize: typography.item
+  }])));
 });
-ActionSheetCancel.displayName = 'ActionSheetCancel';
-const ActionSheet = props => {
+const ActionSheetImpl = props => {
   const {
     tokensOverride,
     visible,
@@ -203,24 +191,31 @@ const ActionSheet = props => {
   const hasCancelText = (0, _utils.isRenderable)(cancelText);
   const lastPopupCloseReasonRef = (0, _react().useRef)('close');
   const closingRef = (0, _react().useRef)(false);
+  const beforeCloseRef = (0, _react().useRef)(beforeClose);
+  beforeCloseRef.current = beforeClose;
+  const onCloseRef = (0, _react().useRef)(onClose);
+  onCloseRef.current = onClose;
+  const onCancelRef = (0, _react().useRef)(onCancel);
+  onCancelRef.current = onCancel;
+  const onSelectRef = (0, _react().useRef)(onSelect);
+  onSelectRef.current = onSelect;
   const runBeforeClose = (0, _react().useCallback)(async action => {
-    if (!beforeClose) return true;
+    if (!beforeCloseRef.current) return true;
     try {
-      return (await beforeClose(action)) !== false;
-    } catch (error) {
+      return (await beforeCloseRef.current(action)) !== false;
+    } catch {
       return true;
     }
-  }, [beforeClose]);
+  }, []);
   const emitClose = (0, _react().useCallback)(reason => {
-    if (onClose) {
-      if (reason === 'cancel') {
-        onCancel?.();
-      }
-      onClose();
+    if (onCloseRef.current) {
+      if (reason === 'cancel') onCancelRef.current?.();
+      onCloseRef.current();
       return;
     }
-    onCancel?.();
-  }, [onCancel, onClose]);
+    ;
+    onCancelRef.current?.();
+  }, []);
   const requestClose = (0, _react().useCallback)(async action => {
     if (closingRef.current) return;
     closingRef.current = true;
@@ -233,9 +228,8 @@ const ActionSheet = props => {
     }
   }, [emitClose, runBeforeClose]);
   const handlePopupBeforeClose = (0, _react().useCallback)(reason => {
-    const action = reason === 'close-icon' ? 'close-icon' : reason === 'overlay' ? 'overlay' : 'close';
-    lastPopupCloseReasonRef.current = action;
-    return runBeforeClose(action);
+    lastPopupCloseReasonRef.current = reason;
+    return runBeforeClose(reason);
   }, [runBeforeClose]);
   const handlePopupClose = (0, _react().useCallback)(() => {
     emitClose(lastPopupCloseReasonRef.current);
@@ -247,65 +241,63 @@ const ActionSheet = props => {
     void requestClose('close-icon');
   }, [requestClose]);
   const handleActionPress = (0, _react().useCallback)((action, index) => {
-    if (action.disabled || action.loading) {
-      return;
-    }
+    if (action.disabled || action.loading) return;
     action.onPress?.(action);
     action.callback?.(action);
-    onSelect?.(action, index);
-    if (shouldCloseOnClickAction) {
-      void requestClose('action');
-    }
-  }, [onSelect, requestClose, shouldCloseOnClickAction]);
-  const popupStyleMemo = (0, _react().useMemo)(() => [tokens.layout.popup, popupStyle], [popupStyle, tokens.layout.popup]);
-  const panelStyle = (0, _react().useMemo)(() => [tokens.layout.panel, {
-    backgroundColor: tokens.colors.background
-  }], [tokens.colors.background, tokens.layout.panel]);
-  const headerNode = (0, _react().useMemo)(() => hasTitle ? /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
+    onSelectRef.current?.(action, index);
+    if (shouldCloseOnClickAction) void requestClose('action');
+  }, [requestClose, shouldCloseOnClickAction]);
+  const popupStyleMemo = (0, _react().useMemo)(() => [tokens.layout.popup, popupStyle], [tokens.layout.popup, popupStyle]);
+  return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
+    visible: visible,
+    placement: "bottom",
+    round: round,
+    safeAreaInsetTop: hasTitle && closeable,
+    safeAreaInsetBottom: safeAreaInsetBottom,
+    overlay: overlay,
+    lockScroll: lockScroll,
+    beforeClose: handlePopupBeforeClose,
+    onClose: handlePopupClose,
+    style: popupStyleMemo
+  }, popupProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    accessibilityRole: "menu",
+    style: [tokens.layout.panel, {
+      backgroundColor: tokens.colors.background
+    }]
+  }, hasTitle && /*#__PURE__*/_react().default.createElement(ActionSheetHeader, {
     title: title,
     closeable: closeable,
     closeIcon: closeIcon,
     tokens: tokens,
     onClose: handleCloseIcon
-  }) : null, [closeIcon, closeable, handleCloseIcon, hasTitle, title, tokens]);
-  const descriptionNode = (0, _react().useMemo)(() => hasDescription ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [tokens.layout.descriptionContainer, (0, _utils.createHairlineBorderBottom)(tokens.colors.border)]
-  }, (0, _utils.isText)(description) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [tokens.layout.description, {
-      color: tokens.colors.description,
-      fontSize: tokens.typography.description
-    }]
-  }, description) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }), hasDescription && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.descriptionContainer
+  }, (0, _utils.isText)(description) ? (0, _utils.renderTextOrNode)(description, [tokens.layout.description, {
+    color: tokens.colors.description,
+    fontSize: tokens.typography.description
+  }]) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: tokens.layout.descriptionNode
-  }, description)) : null, [description, hasDescription, tokens.colors.border, tokens.colors.description, tokens.layout.description, tokens.layout.descriptionContainer, tokens.layout.descriptionNode, tokens.typography.description]);
-  const actionNodes = (0, _react().useMemo)(() => actions.map((action, index) => /*#__PURE__*/_react().default.createElement(ActionSheetItem, {
+  }, description), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: (0, _utils.createHairlineView)({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0
+    })
+  })), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: tokens.layout.actions
+  }, actions.map((action, index) => /*#__PURE__*/_react().default.createElement(ActionSheetItem, {
     key: action.key ?? index,
     action: action,
     index: index,
     tokens: tokens,
     onActionPress: handleActionPress
-  })), [actions, handleActionPress, tokens]);
-  const cancelNode = (0, _react().useMemo)(() => hasCancelText ? /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
+  }))), children, hasCancelText && /*#__PURE__*/_react().default.createElement(ActionSheetCancel, {
     cancelText: cancelText,
     tokens: tokens,
     onPress: handleCancel
-  }) : null, [cancelText, handleCancel, hasCancelText, tokens]);
-  return /*#__PURE__*/_react().default.createElement(_popup.default, _extends({
-    visible: visible,
-    placement: "bottom",
-    round: round,
-    safeAreaInsetTop: hasTitle && closeable,
-    safeAreaInsetBottom: safeAreaInsetBottom,
-    overlay: overlay,
-    lockScroll: lockScroll,
-    beforeClose: handlePopupBeforeClose,
-    onClose: handlePopupClose,
-    style: popupStyleMemo
-  }, popupProps), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: panelStyle
-  }, headerNode, descriptionNode, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: tokens.layout.actions
-  }, actionNodes), children, cancelNode));
+  })));
 };
+const ActionSheet = /*#__PURE__*/_react().default.memo(ActionSheetImpl);
 ActionSheet.displayName = 'ActionSheet';
 var _default = exports.default = ActionSheet;

package/dist/cjs/components/action-sheet/tokens.js

@@ -5,12 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useActionSheetTokens = exports.createActionSheetTokens = void 0;
 var _designSystem = require("../../design-system");
+const centered = {
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 const createActionSheetTokens = foundations => {
   const {
     palette,
     spacing,
     fontSize
   } = foundations;
+  const white = '#ffffff';
   return {
     defaults: {
       closeOnClickAction: false,
@@ -33,31 +38,25 @@ const createActionSheetTokens = foundations => {
       header: {
         position: 'relative',
         flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
+        ...centered,
         paddingHorizontal: 16
       },
       titleContainer: {
         flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
+        ...centered
       },
       title: {
         fontWeight: '600',
         textAlign: 'center'
       },
-      titleNode: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      titleNode: centered,
       closeButton: {
         position: 'absolute',
         top: 0,
         right: 0,
         width: 48,
         height: 48,
-        alignItems: 'center',
-        justifyContent: 'center'
+        ...centered
       },
       descriptionContainer: {
         paddingTop: 12,
@@ -68,26 +67,19 @@ const createActionSheetTokens = foundations => {
         textAlign: 'center',
         lineHeight: 20
       },
-      descriptionNode: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      descriptionNode: centered,
       actions: {
         width: '100%'
       },
       item: {
-        alignItems: 'center',
-        justifyContent: 'center',
+        ...centered,
         width: '100%'
       },
       itemWithIcon: {
         flexDirection: 'row',
         justifyContent: 'center'
       },
-      itemTextWrapper: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      itemTextWrapper: centered,
       itemText: {
         lineHeight: 24
       },
@@ -106,16 +98,13 @@ const createActionSheetTokens = foundations => {
         width: '100%',
         marginBottom: 0
       },
-      cancel: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      },
+      cancel: centered,
       cancelText: {
         lineHeight: 24
       }
     },
     colors: {
-      background: '#ffffff',
+      background: white,
       title: palette.default[900],
       description: palette.default[500],
       item: palette.default[900],
@@ -123,9 +112,9 @@ const createActionSheetTokens = foundations => {
       cancel: palette.default[900],
       disabled: palette.default[400],
       border: palette.default[200],
-      itemBackground: '#ffffff',
+      itemBackground: white,
       itemPressedBackground: palette.default[100],
-      cancelBackground: '#ffffff',
+      cancelBackground: white,
       cancelGapBackground: palette.default[100] ?? '#f1f2f5'
     },
     typography: {