@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/theme/tokens.js

@@ -0,0 +1,702 @@
+"use strict";
+
+const typography = {
+  fontSize: {
+    xs: 11,
+    sm: 13,
+    base: 15,
+    lg: 17,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700'
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.4,
+    relaxed: 1.6
+  },
+  letterSpacing: {
+    tight: -0.2,
+    normal: 0,
+    wide: 0.4
+  }
+};
+const spacing = {
+  none: 0,
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  '2xl': 32,
+  '3xl': 48,
+  '4xl': 64
+};
+const radius = {
+  none: 0,
+  xs: 4,
+  sm: 6,
+  md: 10,
+  lg: 14,
+  xl: 20,
+  '2xl': 28,
+  full: 9999
+};
+
+// The one corner radius shared by every rounded-rect field: Input (single-line
+// and multiline / textarea), Select, NumberInput, PickerTrigger — anything that
+// composes FieldBase and reads `components.field.<size>`. Change it here and it
+// changes everywhere those controls render. (SearchBar keeps its own pill
+// radius; OTP cells keep their own — those are deliberate per-component
+// overrides, not part of this shared value.)
+const FIELD_RADIUS = 10;
+
+// `field` tokens hold the canonical dimensions every input-like control
+// inherits via FieldBase. Heights, radii and padding ladders here are the
+// single source of truth — Input, Select, SearchBar, NumberInput, OTPInput
+// cell and PickerTrigger fall through to these unless their own component
+// tokens override. Fill / border colours resolve at theme-build time inside
+// the providers (which know `colors.*`) — these defaults are dimension-only.
+// `md` is the design spec measured 1:1 (a 240×44 box, 14px inset, 14px type,
+// 16px icons, 12px label 4dp above the box, 12px message 2dp below it; the type's own
+// line box adds a little more optically); `sm` / `lg` step
+// the same ladder down and up.
+const fieldSizes = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: FIELD_RADIUS,
+    iconSize: 14,
+    labelFontSize: 11,
+    labelGap: 4,
+    messageFontSize: 11,
+    messageGap: 2
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 13,
+    minHeight: 44,
+    fontSize: 14,
+    borderRadius: FIELD_RADIUS,
+    iconSize: 16,
+    labelFontSize: 12,
+    labelGap: 4,
+    messageFontSize: 12,
+    messageGap: 2
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 15,
+    minHeight: 52,
+    fontSize: 16,
+    borderRadius: FIELD_RADIUS,
+    iconSize: 18,
+    labelFontSize: 13,
+    labelGap: 4,
+    messageFontSize: 13,
+    messageGap: 2
+  }
+};
+const components = {
+  button: {
+    xs: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      minHeight: 28,
+      fontSize: 12,
+      borderRadius: 8
+    },
+    sm: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      minHeight: 34,
+      fontSize: 14,
+      borderRadius: 10
+    },
+    md: {
+      paddingHorizontal: 16,
+      paddingVertical: 9,
+      minHeight: 42,
+      fontSize: 16,
+      borderRadius: 12
+    },
+    lg: {
+      paddingHorizontal: 20,
+      paddingVertical: 12,
+      minHeight: 50,
+      fontSize: 18,
+      borderRadius: 14
+    },
+    xl: {
+      paddingHorizontal: 24,
+      paddingVertical: 14,
+      minHeight: 58,
+      fontSize: 20,
+      borderRadius: 16
+    }
+  },
+  input: {
+    // Mirrors `fieldSizes` (Input reads its dimensions through FieldBase's
+    // field tokens); `multilineMinHeight` is the one Input-only key.
+    sm: {
+      ...fieldSizes.sm,
+      multilineMinHeight: 72
+    },
+    md: {
+      ...fieldSizes.md,
+      multilineMinHeight: 92
+    },
+    lg: {
+      ...fieldSizes.lg,
+      multilineMinHeight: 110
+    }
+  },
+  searchBar: {
+    // Everything but the corner comes from `field.<size>`, so a SearchBar
+    // beside an Input of the same size shares its height, padding, font and
+    // icon. `borderRadius: radius.full` keeps the pill as the library
+    // default; brands wanting the rounded-rect shape override per size to
+    // match `field.<size>.borderRadius`.
+    sm: {
+      borderRadius: radius.full
+    },
+    md: {
+      borderRadius: radius.full
+    },
+    lg: {
+      borderRadius: radius.full
+    }
+  },
+  emptyState: {
+    sm: {
+      iconSize: 48,
+      titleFontSize: 'lg',
+      descriptionFontSize: 'sm',
+      paddingVertical: 'lg'
+    },
+    md: {
+      iconSize: 64,
+      titleFontSize: 'xl',
+      descriptionFontSize: 'base',
+      paddingVertical: 'xl'
+    },
+    lg: {
+      iconSize: 80,
+      titleFontSize: '2xl',
+      descriptionFontSize: 'base',
+      paddingVertical: '2xl'
+    }
+  },
+  field: {
+    defaultVariant: 'outlined',
+    sm: fieldSizes.sm,
+    md: fieldSizes.md,
+    lg: fieldSizes.lg
+    // Variant fill / border colours are filled in at theme-build time by the
+    // light/dark Theme objects below — they need access to `colors.*`.
+  },
+  listItem: {
+    sm: {
+      paddingVertical: 'sm',
+      titleFontSize: 'sm',
+      subtitleFontSize: 'xs',
+      minHeight: 44
+    },
+    md: {
+      paddingVertical: 'md',
+      titleFontSize: 'base',
+      subtitleFontSize: 'sm',
+      minHeight: 56
+    },
+    lg: {
+      paddingVertical: 'lg',
+      titleFontSize: 'lg',
+      subtitleFontSize: 'sm',
+      minHeight: 72
+    }
+  },
+  badge: {
+    sm: {
+      fontSize: 10,
+      minWidth: 16,
+      height: 16,
+      paddingHorizontal: 5,
+      dotSize: 8
+    },
+    md: {
+      fontSize: 11,
+      minWidth: 20,
+      height: 20,
+      paddingHorizontal: 6,
+      dotSize: 10
+    },
+    borderWidth: 1.5,
+    anchorOffset: 4
+  },
+  chip: {
+    sm: {
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      fontSize: 12,
+      minHeight: 26,
+      closeSize: 16,
+      closeFontSize: 12,
+      gap: 6
+    },
+    md: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      fontSize: 13,
+      minHeight: 32,
+      closeSize: 18,
+      closeFontSize: 13,
+      gap: 8
+    }
+  },
+  checkbox: {
+    sm: {
+      boxSize: 16
+    },
+    md: {
+      boxSize: 20
+    },
+    lg: {
+      boxSize: 24
+    },
+    labelGap: 10
+  },
+  radio: {
+    sm: {
+      outer: 16,
+      inner: 8
+    },
+    md: {
+      outer: 20,
+      inner: 10
+    },
+    lg: {
+      outer: 24,
+      inner: 12
+    },
+    labelGap: 10
+  },
+  switch: {
+    sm: {
+      trackWidth: 42,
+      trackHeight: 26,
+      thumbSize: 22,
+      padding: 2
+    },
+    md: {
+      trackWidth: 51,
+      trackHeight: 31,
+      thumbSize: 27,
+      padding: 2
+    },
+    lg: {
+      trackWidth: 60,
+      trackHeight: 36,
+      thumbSize: 32,
+      padding: 2
+    },
+    thumbColor: '#FFFFFF'
+  },
+  otpInput: {
+    sm: {
+      cell: 36,
+      fontSize: 16,
+      borderRadius: 8,
+      gap: 8
+    },
+    md: {
+      cell: 48,
+      fontSize: 20,
+      borderRadius: 10,
+      gap: 10
+    },
+    lg: {
+      cell: 56,
+      fontSize: 24,
+      borderRadius: 12,
+      gap: 12
+    }
+  },
+  dialog: {
+    iconWrapperSize: 48,
+    iconWrapperBorderRadius: 24,
+    actionButtonMinHeight: 44
+  },
+  toast: {
+    iconCircleSize: 28,
+    iconCircleBorderRadius: 14,
+    iconGlyphFontSize: 16,
+    tintBarWidth: 4
+  },
+  formField: {
+    inlineLabelWidth: '35%'
+  }
+};
+const motion = {
+  duration: {
+    instant: 80,
+    fast: 160,
+    normal: 240,
+    slow: 360,
+    slower: 500
+  },
+  easing: {
+    standard: [0.4, 0.0, 0.2, 1],
+    accelerate: [0.4, 0.0, 1, 1],
+    decelerate: [0.0, 0.0, 0.2, 1],
+    sharp: [0.4, 0.0, 0.6, 1]
+  },
+  /**
+   * Springs run at sub-1 mass on purpose. Mass is the lever that decides
+   * whether motion reads as "responsive" or "floaty", and leaving it at 1 (the
+   * RN default) is what makes an otherwise correct animation feel slow. Higher
+   * stiffness with lighter mass settles faster without losing the spring.
+   *
+   * The asymmetry rule: OPEN with a spring from this scale, CLOSE with
+   * `Animated.timing` at `duration.fast` and `easing.accelerate`. A spring on
+   * the way out re-reads as hesitation — the element should leave decisively.
+   */
+  spring: {
+    gentle: {
+      damping: 26,
+      stiffness: 240,
+      mass: 0.9
+    },
+    bouncy: {
+      damping: 16,
+      stiffness: 200,
+      mass: 0.7
+    },
+    snappy: {
+      damping: 20,
+      stiffness: 300,
+      mass: 0.7
+    }
+  }
+};
+const lightShadows = {
+  none: {},
+  xs: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.14,
+    shadowRadius: 24,
+    elevation: 12
+  },
+  '2xl': {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 20
+    },
+    shadowOpacity: 0.18,
+    shadowRadius: 32,
+    elevation: 20
+  }
+};
+const darkShadows = {
+  none: {},
+  xs: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.4,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    shadowOpacity: 0.55,
+    shadowRadius: 16,
+    elevation: 8
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 12
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 24,
+    elevation: 12
+  },
+  '2xl': {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 20
+    },
+    shadowOpacity: 0.7,
+    shadowRadius: 32,
+    elevation: 20
+  }
+};
+export const lightTheme = {
+  mode: 'light',
+  colors: {
+    primary: '#5B5BD6',
+    primaryHover: '#4F4FBF',
+    primaryPressed: '#4040A8',
+    primaryMuted: '#EEEEFC',
+    secondary: '#F4F4F8',
+    secondaryHover: '#E9E9F0',
+    success: '#1FAD66',
+    warning: '#F59E0B',
+    error: '#E5484D',
+    info: '#3B82F6',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#0F0F1A',
+    onSuccess: '#FFFFFF',
+    onWarning: '#0F0F1A',
+    onError: '#FFFFFF',
+    onInfo: '#FFFFFF',
+    text: {
+      primary: '#0F0F1A',
+      secondary: '#52525B',
+      tertiary: '#8B8B95',
+      inverse: '#FFFFFF',
+      disabled: '#B4B4BB',
+      link: '#5B5BD6'
+    },
+    background: {
+      primary: '#FFFFFF',
+      secondary: '#F8F8FB',
+      tertiary: '#F1F1F5',
+      elevated: '#FFFFFF',
+      overlay: 'rgba(15, 15, 26, 0.5)',
+      inverse: '#0F0F1A'
+    },
+    border: {
+      primary: '#E5E5EC',
+      secondary: '#EFEFF3',
+      focus: '#5B5BD6',
+      error: '#E5484D',
+      width: 1
+    },
+    // Sampled 1:1 from the Input design spec (Default / Active / Filled /
+    // Disabled / Error columns), not derived from the brand tones: the field
+    // family sits on a cool near-white with a soft blue focus ring and a
+    // pink error ring, while the brand stays on `primary`.
+    field: {
+      background: '#F9FBFC',
+      backgroundFocused: '#FFFFFF',
+      backgroundDisabled: '#F5F6FA',
+      border: '#EBEDF3',
+      borderFocused: '#BED2F9',
+      borderError: '#FDBFCE',
+      label: '#242F4A',
+      text: '#252F4A',
+      textDisabled: '#C4CADA',
+      placeholder: '#99A1B7',
+      placeholderDisabled: '#C4CADA',
+      icon: '#99A1B7',
+      iconFocused: '#4B5675',
+      iconDisabled: '#C4CADA',
+      caret: '#5B8DEE',
+      message: '#E82545'
+    },
+    surface: {
+      pressed: 'rgba(15, 15, 26, 0.06)',
+      hovered: 'rgba(15, 15, 26, 0.04)',
+      selected: 'rgba(91, 91, 214, 0.1)',
+      disabled: '#F1F1F5'
+    },
+    // Same in both schemes: the surface under a glass control is the brand
+    // colour, not the page. See `Theme.colors.glass`.
+    glass: {
+      fill: 'rgba(255, 255, 255, 0.28)',
+      border: 'rgba(255, 255, 255, 0.45)',
+      on: '#0F0F1A',
+      badge: '#FFFFFF'
+    },
+    skeleton: {
+      background: '#EBEDF3',
+      highlight: '#F5F6FA'
+    },
+    // Held to one contrast standard: every hue lands in a 5.2:1-5.7:1 band
+    // against the white initials, so no single avatar colour is the weak one.
+    // Index order is load-bearing — it is what keeps a given user's colour stable.
+    avatarPalette: ['#5B5BD6', '#0A7979', '#A45A05', '#CD226E', '#2462EB', '#7C3AED', '#047C57', '#D42222']
+  },
+  typography,
+  spacing,
+  radius,
+  shadows: lightShadows,
+  motion,
+  components,
+  gradients: {}
+};
+export const darkTheme = {
+  mode: 'dark',
+  colors: {
+    primary: '#7C7CE8',
+    primaryHover: '#9292EE',
+    primaryPressed: '#A8A8F2',
+    primaryMuted: '#1F1F3D',
+    secondary: '#1F1F26',
+    secondaryHover: '#2A2A33',
+    success: '#30C780',
+    warning: '#FBBF24',
+    error: '#F87171',
+    info: '#60A5FA',
+    onPrimary: '#0F0F1A',
+    onSecondary: '#FAFAFA',
+    onSuccess: '#0F0F1A',
+    onWarning: '#0F0F1A',
+    onError: '#0F0F1A',
+    onInfo: '#0F0F1A',
+    text: {
+      primary: '#FAFAFA',
+      secondary: '#B4B4BB',
+      tertiary: '#71717A',
+      inverse: '#0F0F1A',
+      disabled: '#52525B',
+      link: '#9292EE'
+    },
+    background: {
+      primary: '#0B0B12',
+      secondary: '#13131C',
+      tertiary: '#1C1C26',
+      elevated: '#1C1C26',
+      overlay: 'rgba(0, 0, 0, 0.65)',
+      inverse: '#FAFAFA'
+    },
+    border: {
+      primary: '#27272F',
+      secondary: '#1C1C26',
+      focus: '#7C7CE8',
+      error: '#F87171',
+      width: 1
+    },
+    // Dark counterpart of the light field palette: the same roles, inverted
+    // against the dark surfaces (no dark design spec exists; these keep the
+    // light spec's contrast relationships).
+    field: {
+      background: '#13131C',
+      backgroundFocused: '#0B0B12',
+      backgroundDisabled: '#1C1C26',
+      border: '#27272F',
+      borderFocused: '#3D5FB0',
+      borderError: '#8A2F42',
+      label: '#E4E6EE',
+      text: '#FAFAFA',
+      textDisabled: '#52525B',
+      placeholder: '#71717A',
+      placeholderDisabled: '#52525B',
+      icon: '#8B8B95',
+      iconFocused: '#D4D4DB',
+      iconDisabled: '#52525B',
+      caret: '#7C9EF0',
+      message: '#F87171'
+    },
+    surface: {
+      pressed: 'rgba(255, 255, 255, 0.08)',
+      hovered: 'rgba(255, 255, 255, 0.05)',
+      selected: 'rgba(124, 124, 232, 0.18)',
+      disabled: '#1C1C26'
+    },
+    // Deliberately identical to the light theme; see `Theme.colors.glass`.
+    glass: {
+      fill: 'rgba(255, 255, 255, 0.28)',
+      border: 'rgba(255, 255, 255, 0.45)',
+      on: '#0F0F1A',
+      badge: '#FFFFFF'
+    },
+    skeleton: {
+      background: '#1C1C26',
+      highlight: '#27272F'
+    },
+    avatarPalette: ['#8B8BEE', '#2DD4BF', '#FCD34D', '#F472B6', '#60A5FA', '#A78BFA', '#34D399', '#F87171']
+  },
+  typography,
+  spacing,
+  radius,
+  shadows: darkShadows,
+  motion,
+  components,
+  gradients: {}
+};
+//# sourceMappingURL=tokens.js.map

package/lib/module/theme/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map