@tujyane/alf 1.0.0

package/src/atoms/common.ts

@@ -0,0 +1,1049 @@
+import { type ViewStyle } from "react-native";
+
+import * as tokens from "../tokens";
+import { type ShadowStyle } from "./types";
+
+export const atoms = {
+  debug: {
+    borderColor: "red",
+    borderWidth: 1,
+  },
+
+  /*
+   * Positioning
+   */
+  fixed: {
+    position: "fixed" as ViewStyle["position"],
+  },
+  absolute: {
+    position: "absolute",
+  },
+  relative: {
+    position: "relative",
+  },
+  static: {
+    position: "static",
+  },
+  sticky: {
+    position: "sticky" as ViewStyle["position"],
+  },
+  inset_0: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  top_0: {
+    top: 0,
+  },
+  right_0: {
+    right: 0,
+  },
+  bottom_0: {
+    bottom: 0,
+  },
+  left_0: {
+    left: 0,
+  },
+  z_10: {
+    zIndex: 10,
+  },
+  z_20: {
+    zIndex: 20,
+  },
+  z_30: {
+    zIndex: 30,
+  },
+  z_40: {
+    zIndex: 40,
+  },
+  z_50: {
+    zIndex: 50,
+  },
+
+  overflow_visible: {
+    overflow: "visible",
+  },
+  overflow_x_visible: {
+    overflowX: "visible",
+  },
+  overflow_y_visible: {
+    overflowY: "visible",
+  },
+  overflow_hidden: {
+    overflow: "hidden",
+  },
+  overflow_x_hidden: {
+    overflowX: "hidden",
+  },
+  overflow_y_hidden: {
+    overflowY: "hidden",
+  },
+  overflow_auto: {
+    overflow: "auto",
+  },
+
+  /*
+   * Width & Height
+   */
+  w_full: {
+    width: "100%",
+  },
+  h_full: {
+    height: "100%",
+  },
+  h_full_vh: {
+    height: "100vh",
+  },
+  max_w_full: {
+    maxWidth: "100%",
+  },
+  max_h_full: {
+    maxHeight: "100%",
+  },
+
+  /*
+   * Border radius
+   */
+  rounded_0: {
+    borderRadius: 0,
+  },
+  rounded_2xs: {
+    borderRadius: tokens.borderRadius._2xs,
+  },
+  rounded_xs: {
+    borderRadius: tokens.borderRadius.xs,
+  },
+  rounded_sm: {
+    borderRadius: tokens.borderRadius.sm,
+  },
+  rounded_md: {
+    borderRadius: tokens.borderRadius.md,
+  },
+  rounded_lg: {
+    borderRadius: tokens.borderRadius.lg,
+  },
+  rounded_full: {
+    borderRadius: tokens.borderRadius.full,
+  },
+
+  /*
+   * Flex
+   */
+  gap_0: {
+    gap: 0,
+  },
+  gap_2xs: {
+    gap: tokens.space._2xs,
+  },
+  gap_xs: {
+    gap: tokens.space.xs,
+  },
+  gap_sm: {
+    gap: tokens.space.sm,
+  },
+  gap_md: {
+    gap: tokens.space.md,
+  },
+  gap_lg: {
+    gap: tokens.space.lg,
+  },
+  gap_xl: {
+    gap: tokens.space.xl,
+  },
+  gap_2xl: {
+    gap: tokens.space._2xl,
+  },
+  gap_3xl: {
+    gap: tokens.space._3xl,
+  },
+  gap_4xl: {
+    gap: tokens.space._4xl,
+  },
+  gap_5xl: {
+    gap: tokens.space._5xl,
+  },
+  flex: {
+    display: "flex",
+  },
+  flex_col: {
+    flexDirection: "column",
+  },
+  flex_row: {
+    flexDirection: "row",
+  },
+  flex_col_reverse: {
+    flexDirection: "column-reverse",
+  },
+  flex_row_reverse: {
+    flexDirection: "row-reverse",
+  },
+  flex_wrap: {
+    flexWrap: "wrap",
+  },
+  flex_nowrap: {
+    flexWrap: "nowrap",
+  },
+  flex_0: {
+    flex: "0 0 auto" as unknown as ViewStyle["flex"],
+  },
+  flex_1: {
+    flex: 1,
+  },
+  flex_grow: {
+    flexGrow: 1,
+  },
+  flex_grow_0: {
+    flexGrow: 0,
+  },
+  flex_shrink: {
+    flexShrink: 1,
+  },
+  flex_shrink_0: {
+    flexShrink: 0,
+  },
+  justify_start: {
+    justifyContent: "flex-start",
+  },
+  justify_center: {
+    justifyContent: "center",
+  },
+  justify_between: {
+    justifyContent: "space-between",
+  },
+  justify_end: {
+    justifyContent: "flex-end",
+  },
+  align_center: {
+    alignItems: "center",
+  },
+  align_start: {
+    alignItems: "flex-start",
+  },
+  align_end: {
+    alignItems: "flex-end",
+  },
+  align_baseline: {
+    alignItems: "baseline",
+  },
+  align_stretch: {
+    alignItems: "stretch",
+  },
+  self_auto: {
+    alignSelf: "auto",
+  },
+  self_start: {
+    alignSelf: "flex-start",
+  },
+  self_end: {
+    alignSelf: "flex-end",
+  },
+  self_center: {
+    alignSelf: "center",
+  },
+  self_stretch: {
+    alignSelf: "stretch",
+  },
+  self_baseline: {
+    alignSelf: "baseline",
+  },
+
+  /*
+   * Text
+   */
+  text_left: {
+    textAlign: "left",
+  },
+  text_center: {
+    textAlign: "center",
+  },
+  text_right: {
+    textAlign: "right",
+  },
+  text_2xs: {
+    fontSize: tokens.fontSize._2xs,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_xs: {
+    fontSize: tokens.fontSize.xs,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_sm: {
+    fontSize: tokens.fontSize.sm,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_md: {
+    fontSize: tokens.fontSize.md,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_lg: {
+    fontSize: tokens.fontSize.lg,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_xl: {
+    fontSize: tokens.fontSize.xl,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_2xl: {
+    fontSize: tokens.fontSize._2xl,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_3xl: {
+    fontSize: tokens.fontSize._3xl,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_4xl: {
+    fontSize: tokens.fontSize._4xl,
+    letterSpacing: tokens.TRACKING,
+  },
+  text_5xl: {
+    fontSize: tokens.fontSize._5xl,
+    letterSpacing: tokens.TRACKING,
+  },
+  leading_tight: {
+    lineHeight: tokens.lineHeight.tight,
+  },
+  leading_snug: {
+    lineHeight: tokens.lineHeight.snug,
+  },
+  leading_relaxed: {
+    lineHeight: tokens.lineHeight.relaxed,
+  },
+  /**
+   * @deprecated use `leading_relaxed` instead
+   */
+  leading_normal: {
+    lineHeight: tokens.lineHeight.relaxed,
+  },
+  tracking_normal: {
+    letterSpacing: tokens.TRACKING,
+  },
+  font_normal: {
+    fontWeight: tokens.fontWeight.normal,
+  },
+  font_medium: {
+    fontWeight: tokens.fontWeight.medium,
+  },
+  font_semi_bold: {
+    fontWeight: tokens.fontWeight.semiBold,
+  },
+  font_bold: {
+    fontWeight: tokens.fontWeight.bold,
+  },
+  italic: {
+    fontStyle: "italic",
+  },
+
+  /*
+   * Border
+   */
+  border_0: {
+    borderWidth: 0,
+  },
+  border_t_0: {
+    borderTopWidth: 0,
+  },
+  border_b_0: {
+    borderBottomWidth: 0,
+  },
+  border_l_0: {
+    borderLeftWidth: 0,
+  },
+  border_r_0: {
+    borderRightWidth: 0,
+  },
+  border_x_0: {
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+  },
+  border_y_0: {
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+  },
+  border: {
+    borderWidth: 1,
+  },
+  border_t: {
+    borderTopWidth: 1,
+  },
+  border_b: {
+    borderBottomWidth: 1,
+  },
+  border_l: {
+    borderLeftWidth: 1,
+  },
+  border_r: {
+    borderRightWidth: 1,
+  },
+  border_x: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+  },
+  border_y: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+  },
+  border_transparent: {
+    borderColor: "transparent",
+  },
+  curve_circular: {},
+  curve_continuous: {},
+
+  shadow_sm: {} as ShadowStyle,
+  shadow_md: {} as ShadowStyle,
+  shadow_lg: {} as ShadowStyle,
+
+  /*
+   * Gutters
+   */
+  gutter_tight: {
+    padding: tokens.space.sm,
+  },
+  gutter_x_tight: {
+    paddingLeft: tokens.space.sm,
+    paddingRight: tokens.space.sm,
+  },
+  gutter_y_tight: {
+    paddingTop: tokens.space.sm,
+    paddingBottom: tokens.space.sm,
+  },
+  gutter_snug: {
+    padding: tokens.space.md,
+  },
+  gutter_x_snug: {
+    paddingLeft: tokens.space.md,
+    paddingRight: tokens.space.md,
+  },
+  gutter_y_snug: {
+    paddingTop: tokens.space.md,
+    paddingBottom: tokens.space.md,
+  },
+  gutter_default: {
+    padding: tokens.space.lg,
+  },
+  gutter_x_default: {
+    paddingLeft: tokens.space.lg,
+    paddingRight: tokens.space.lg,
+  },
+  gutter_y_default: {
+    paddingTop: tokens.space.lg,
+    paddingBottom: tokens.space.lg,
+  },
+  gutter_wide: {
+    padding: tokens.space.xl,
+  },
+  gutter_x_wide: {
+    paddingLeft: tokens.space.xl,
+    paddingRight: tokens.space.xl,
+  },
+  gutter_y_wide: {
+    paddingTop: tokens.space.xl,
+    paddingBottom: tokens.space.xl,
+  },
+  gutter_extra_wide: {
+    padding: tokens.space._2xl,
+  },
+  gutter_x_extra_wide: {
+    paddingLeft: tokens.space._2xl,
+    paddingRight: tokens.space._2xl,
+  },
+  gutter_y_extra_wide: {
+    paddingTop: tokens.space._2xl,
+    paddingBottom: tokens.space._2xl,
+  },
+
+  /*
+   * Padding
+   */
+  p_0: {
+    padding: 0,
+  },
+  p_2xs: {
+    padding: tokens.space._2xs,
+  },
+  p_xs: {
+    padding: tokens.space.xs,
+  },
+  p_sm: {
+    padding: tokens.space.sm,
+  },
+  p_md: {
+    padding: tokens.space.md,
+  },
+  p_lg: {
+    padding: tokens.space.lg,
+  },
+  p_xl: {
+    padding: tokens.space.xl,
+  },
+  p_2xl: {
+    padding: tokens.space._2xl,
+  },
+  p_3xl: {
+    padding: tokens.space._3xl,
+  },
+  p_4xl: {
+    padding: tokens.space._4xl,
+  },
+  p_5xl: {
+    padding: tokens.space._5xl,
+  },
+  px_0: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+  px_2xs: {
+    paddingLeft: tokens.space._2xs,
+    paddingRight: tokens.space._2xs,
+  },
+  px_xs: {
+    paddingLeft: tokens.space.xs,
+    paddingRight: tokens.space.xs,
+  },
+  px_sm: {
+    paddingLeft: tokens.space.sm,
+    paddingRight: tokens.space.sm,
+  },
+  px_md: {
+    paddingLeft: tokens.space.md,
+    paddingRight: tokens.space.md,
+  },
+  px_lg: {
+    paddingLeft: tokens.space.lg,
+    paddingRight: tokens.space.lg,
+  },
+  px_xl: {
+    paddingLeft: tokens.space.xl,
+    paddingRight: tokens.space.xl,
+  },
+  px_2xl: {
+    paddingLeft: tokens.space._2xl,
+    paddingRight: tokens.space._2xl,
+  },
+  px_3xl: {
+    paddingLeft: tokens.space._3xl,
+    paddingRight: tokens.space._3xl,
+  },
+  px_4xl: {
+    paddingLeft: tokens.space._4xl,
+    paddingRight: tokens.space._4xl,
+  },
+  px_5xl: {
+    paddingLeft: tokens.space._5xl,
+    paddingRight: tokens.space._5xl,
+  },
+  py_0: {
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+  py_2xs: {
+    paddingTop: tokens.space._2xs,
+    paddingBottom: tokens.space._2xs,
+  },
+  py_xs: {
+    paddingTop: tokens.space.xs,
+    paddingBottom: tokens.space.xs,
+  },
+  py_sm: {
+    paddingTop: tokens.space.sm,
+    paddingBottom: tokens.space.sm,
+  },
+  py_md: {
+    paddingTop: tokens.space.md,
+    paddingBottom: tokens.space.md,
+  },
+  py_lg: {
+    paddingTop: tokens.space.lg,
+    paddingBottom: tokens.space.lg,
+  },
+  py_xl: {
+    paddingTop: tokens.space.xl,
+    paddingBottom: tokens.space.xl,
+  },
+  py_2xl: {
+    paddingTop: tokens.space._2xl,
+    paddingBottom: tokens.space._2xl,
+  },
+  py_3xl: {
+    paddingTop: tokens.space._3xl,
+    paddingBottom: tokens.space._3xl,
+  },
+  py_4xl: {
+    paddingTop: tokens.space._4xl,
+    paddingBottom: tokens.space._4xl,
+  },
+  py_5xl: {
+    paddingTop: tokens.space._5xl,
+    paddingBottom: tokens.space._5xl,
+  },
+  pt_0: {
+    paddingTop: 0,
+  },
+  pt_2xs: {
+    paddingTop: tokens.space._2xs,
+  },
+  pt_xs: {
+    paddingTop: tokens.space.xs,
+  },
+  pt_sm: {
+    paddingTop: tokens.space.sm,
+  },
+  pt_md: {
+    paddingTop: tokens.space.md,
+  },
+  pt_lg: {
+    paddingTop: tokens.space.lg,
+  },
+  pt_xl: {
+    paddingTop: tokens.space.xl,
+  },
+  pt_2xl: {
+    paddingTop: tokens.space._2xl,
+  },
+  pt_3xl: {
+    paddingTop: tokens.space._3xl,
+  },
+  pt_4xl: {
+    paddingTop: tokens.space._4xl,
+  },
+  pt_5xl: {
+    paddingTop: tokens.space._5xl,
+  },
+  pb_0: {
+    paddingBottom: 0,
+  },
+  pb_2xs: {
+    paddingBottom: tokens.space._2xs,
+  },
+  pb_xs: {
+    paddingBottom: tokens.space.xs,
+  },
+  pb_sm: {
+    paddingBottom: tokens.space.sm,
+  },
+  pb_md: {
+    paddingBottom: tokens.space.md,
+  },
+  pb_lg: {
+    paddingBottom: tokens.space.lg,
+  },
+  pb_xl: {
+    paddingBottom: tokens.space.xl,
+  },
+  pb_2xl: {
+    paddingBottom: tokens.space._2xl,
+  },
+  pb_3xl: {
+    paddingBottom: tokens.space._3xl,
+  },
+  pb_4xl: {
+    paddingBottom: tokens.space._4xl,
+  },
+  pb_5xl: {
+    paddingBottom: tokens.space._5xl,
+  },
+  pl_0: {
+    paddingLeft: 0,
+  },
+  pl_2xs: {
+    paddingLeft: tokens.space._2xs,
+  },
+  pl_xs: {
+    paddingLeft: tokens.space.xs,
+  },
+  pl_sm: {
+    paddingLeft: tokens.space.sm,
+  },
+  pl_md: {
+    paddingLeft: tokens.space.md,
+  },
+  pl_lg: {
+    paddingLeft: tokens.space.lg,
+  },
+  pl_xl: {
+    paddingLeft: tokens.space.xl,
+  },
+  pl_2xl: {
+    paddingLeft: tokens.space._2xl,
+  },
+  pl_3xl: {
+    paddingLeft: tokens.space._3xl,
+  },
+  pl_4xl: {
+    paddingLeft: tokens.space._4xl,
+  },
+  pl_5xl: {
+    paddingLeft: tokens.space._5xl,
+  },
+  pr_0: {
+    paddingRight: 0,
+  },
+  pr_2xs: {
+    paddingRight: tokens.space._2xs,
+  },
+  pr_xs: {
+    paddingRight: tokens.space.xs,
+  },
+  pr_sm: {
+    paddingRight: tokens.space.sm,
+  },
+  pr_md: {
+    paddingRight: tokens.space.md,
+  },
+  pr_lg: {
+    paddingRight: tokens.space.lg,
+  },
+  pr_xl: {
+    paddingRight: tokens.space.xl,
+  },
+  pr_2xl: {
+    paddingRight: tokens.space._2xl,
+  },
+  pr_3xl: {
+    paddingRight: tokens.space._3xl,
+  },
+  pr_4xl: {
+    paddingRight: tokens.space._4xl,
+  },
+  pr_5xl: {
+    paddingRight: tokens.space._5xl,
+  },
+
+  /*
+   * Margin
+   */
+  m_0: {
+    margin: 0,
+  },
+  m_2xs: {
+    margin: tokens.space._2xs,
+  },
+  m_xs: {
+    margin: tokens.space.xs,
+  },
+  m_sm: {
+    margin: tokens.space.sm,
+  },
+  m_md: {
+    margin: tokens.space.md,
+  },
+  m_lg: {
+    margin: tokens.space.lg,
+  },
+  m_xl: {
+    margin: tokens.space.xl,
+  },
+  m_2xl: {
+    margin: tokens.space._2xl,
+  },
+  m_3xl: {
+    margin: tokens.space._3xl,
+  },
+  m_4xl: {
+    margin: tokens.space._4xl,
+  },
+  m_5xl: {
+    margin: tokens.space._5xl,
+  },
+  m_auto: {
+    margin: "auto",
+  },
+  mx_0: {
+    marginLeft: 0,
+    marginRight: 0,
+  },
+  mx_2xs: {
+    marginLeft: tokens.space._2xs,
+    marginRight: tokens.space._2xs,
+  },
+  mx_xs: {
+    marginLeft: tokens.space.xs,
+    marginRight: tokens.space.xs,
+  },
+  mx_sm: {
+    marginLeft: tokens.space.sm,
+    marginRight: tokens.space.sm,
+  },
+  mx_md: {
+    marginLeft: tokens.space.md,
+    marginRight: tokens.space.md,
+  },
+  mx_lg: {
+    marginLeft: tokens.space.lg,
+    marginRight: tokens.space.lg,
+  },
+  mx_xl: {
+    marginLeft: tokens.space.xl,
+    marginRight: tokens.space.xl,
+  },
+  mx_2xl: {
+    marginLeft: tokens.space._2xl,
+    marginRight: tokens.space._2xl,
+  },
+  mx_3xl: {
+    marginLeft: tokens.space._3xl,
+    marginRight: tokens.space._3xl,
+  },
+  mx_4xl: {
+    marginLeft: tokens.space._4xl,
+    marginRight: tokens.space._4xl,
+  },
+  mx_5xl: {
+    marginLeft: tokens.space._5xl,
+    marginRight: tokens.space._5xl,
+  },
+  mx_auto: {
+    marginLeft: "auto",
+    marginRight: "auto",
+  },
+  my_0: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  my_2xs: {
+    marginTop: tokens.space._2xs,
+    marginBottom: tokens.space._2xs,
+  },
+  my_xs: {
+    marginTop: tokens.space.xs,
+    marginBottom: tokens.space.xs,
+  },
+  my_sm: {
+    marginTop: tokens.space.sm,
+    marginBottom: tokens.space.sm,
+  },
+  my_md: {
+    marginTop: tokens.space.md,
+    marginBottom: tokens.space.md,
+  },
+  my_lg: {
+    marginTop: tokens.space.lg,
+    marginBottom: tokens.space.lg,
+  },
+  my_xl: {
+    marginTop: tokens.space.xl,
+    marginBottom: tokens.space.xl,
+  },
+  my_2xl: {
+    marginTop: tokens.space._2xl,
+    marginBottom: tokens.space._2xl,
+  },
+  my_3xl: {
+    marginTop: tokens.space._3xl,
+    marginBottom: tokens.space._3xl,
+  },
+  my_4xl: {
+    marginTop: tokens.space._4xl,
+    marginBottom: tokens.space._4xl,
+  },
+  my_5xl: {
+    marginTop: tokens.space._5xl,
+    marginBottom: tokens.space._5xl,
+  },
+  my_auto: {
+    marginTop: "auto",
+    marginBottom: "auto",
+  },
+  mt_0: {
+    marginTop: 0,
+  },
+  mt_2xs: {
+    marginTop: tokens.space._2xs,
+  },
+  mt_xs: {
+    marginTop: tokens.space.xs,
+  },
+  mt_sm: {
+    marginTop: tokens.space.sm,
+  },
+  mt_md: {
+    marginTop: tokens.space.md,
+  },
+  mt_lg: {
+    marginTop: tokens.space.lg,
+  },
+  mt_xl: {
+    marginTop: tokens.space.xl,
+  },
+  mt_2xl: {
+    marginTop: tokens.space._2xl,
+  },
+  mt_3xl: {
+    marginTop: tokens.space._3xl,
+  },
+  mt_4xl: {
+    marginTop: tokens.space._4xl,
+  },
+  mt_5xl: {
+    marginTop: tokens.space._5xl,
+  },
+  mt_auto: {
+    marginTop: "auto",
+  },
+  mb_0: {
+    marginBottom: 0,
+  },
+  mb_2xs: {
+    marginBottom: tokens.space._2xs,
+  },
+  mb_xs: {
+    marginBottom: tokens.space.xs,
+  },
+  mb_sm: {
+    marginBottom: tokens.space.sm,
+  },
+  mb_md: {
+    marginBottom: tokens.space.md,
+  },
+  mb_lg: {
+    marginBottom: tokens.space.lg,
+  },
+  mb_xl: {
+    marginBottom: tokens.space.xl,
+  },
+  mb_2xl: {
+    marginBottom: tokens.space._2xl,
+  },
+  mb_3xl: {
+    marginBottom: tokens.space._3xl,
+  },
+  mb_4xl: {
+    marginBottom: tokens.space._4xl,
+  },
+  mb_5xl: {
+    marginBottom: tokens.space._5xl,
+  },
+  mb_auto: {
+    marginBottom: "auto",
+  },
+  ml_0: {
+    marginLeft: 0,
+  },
+  ml_2xs: {
+    marginLeft: tokens.space._2xs,
+  },
+  ml_xs: {
+    marginLeft: tokens.space.xs,
+  },
+  ml_sm: {
+    marginLeft: tokens.space.sm,
+  },
+  ml_md: {
+    marginLeft: tokens.space.md,
+  },
+  ml_lg: {
+    marginLeft: tokens.space.lg,
+  },
+  ml_xl: {
+    marginLeft: tokens.space.xl,
+  },
+  ml_2xl: {
+    marginLeft: tokens.space._2xl,
+  },
+  ml_3xl: {
+    marginLeft: tokens.space._3xl,
+  },
+  ml_4xl: {
+    marginLeft: tokens.space._4xl,
+  },
+  ml_5xl: {
+    marginLeft: tokens.space._5xl,
+  },
+  ml_auto: {
+    marginLeft: "auto",
+  },
+  mr_0: {
+    marginRight: 0,
+  },
+  mr_2xs: {
+    marginRight: tokens.space._2xs,
+  },
+  mr_xs: {
+    marginRight: tokens.space.xs,
+  },
+  mr_sm: {
+    marginRight: tokens.space.sm,
+  },
+  mr_md: {
+    marginRight: tokens.space.md,
+  },
+  mr_lg: {
+    marginRight: tokens.space.lg,
+  },
+  mr_xl: {
+    marginRight: tokens.space.xl,
+  },
+  mr_2xl: {
+    marginRight: tokens.space._2xl,
+  },
+  mr_3xl: {
+    marginRight: tokens.space._3xl,
+  },
+  mr_4xl: {
+    marginRight: tokens.space._4xl,
+  },
+  mr_5xl: {
+    marginRight: tokens.space._5xl,
+  },
+  mr_auto: {
+    marginRight: "auto",
+  },
+
+  /*
+   * Pointer events & user select
+   */
+  pointer_events_none: {
+    pointerEvents: "none",
+  },
+  pointer_events_auto: {
+    pointerEvents: "auto",
+  },
+  pointer_events_box_only: {
+    pointerEvents: "box-only",
+  },
+  pointer_events_box_none: {
+    pointerEvents: "box-none",
+  },
+  user_select_none: {
+    userSelect: "none",
+  },
+  user_select_text: {
+    userSelect: "text",
+  },
+  user_select_all: {
+    userSelect: "all",
+  },
+  outline_inset_1: {
+    outlineOffset: -1,
+  },
+
+  /*
+   * Text decoration
+   */
+  underline: {
+    textDecorationLine: "underline",
+  },
+  strike_through: {
+    textDecorationLine: "line-through",
+  },
+
+  /*
+   * Display
+   */
+  hidden: {
+    display: "none",
+  },
+  contents: {
+    display: "contents",
+  },
+  inline: {
+    display: "inline",
+  } as unknown as Pick<ViewStyle, "display">,
+  block: {
+    display: "block",
+  } as unknown as Pick<ViewStyle, "display">,
+
+  pointer: {
+    cursor: "pointer",
+  },
+} as const;