@medway-ui/native 1.6.0 → 1.7.0

package/src/hooks/useThemeColor.ts

@@ -3,87 +3,766 @@ import { useColorScheme, useUnstableNativeVariable } from 'nativewind';
 /** Token sem prefixo `--color-` (ex.: `gray-foreground`, `primary-background-fill`). */
 type ThemeColorToken = string;
 
-/** Fallback quando NativeWind não resolve cadeias `var()` — light mode. */
+/**
+ * Cores base do sistema. Alpha variants (ex.: `primary-16`) são computadas
+ * dinamicamente a partir dessas bases via `resolvePaletteToken`.
+ */
+const PALETTE: Record<string, string> = {
+  white: 'rgba(255, 255, 255, 1)',
+  black: 'rgba(0, 0, 0, 1)',
+
+  // Gray scale
+  'gray-950': 'rgba(8, 10, 12, 1)',
+  'gray-900': 'rgba(12, 14, 18, 1)',
+  'gray-850': 'rgba(16, 19, 24, 1)',
+  'gray-800': 'rgba(24, 29, 37, 1)',
+  'gray-700': 'rgba(33, 38, 49, 1)',
+  'gray-600': 'rgba(49, 57, 73, 1)',
+  'gray-500': 'rgba(73, 86, 110, 1)',
+  'gray-450': 'rgba(90, 105, 135, 1)',
+  'gray-400': 'rgba(98, 114, 147, 1)',
+  'gray-300': 'rgba(133, 146, 173, 1)',
+  'gray-200': 'rgba(169, 179, 198, 1)',
+  'gray-150': 'rgba(206, 211, 222, 1)',
+  'gray-100': 'rgba(231, 233, 239, 1)',
+  'gray-70': 'rgba(240, 241, 245, 1)',
+  'gray-50': 'rgba(246, 247, 249, 1)',
+  'gray-30': 'rgba(249, 250, 251, 1)',
+  'gray-10': 'rgba(252, 252, 253, 1)',
+  'gray-0': 'rgba(252, 252, 253, 0)',
+
+  // Primary
+  primary: 'rgba(0, 32, 91, 1)',
+  'primary-darken-1': 'rgba(2, 22, 59, 1)',
+  'primary-darken-2': 'rgba(2, 11, 28, 1)',
+  'primary-lighten-1': 'rgba(4, 44, 118, 1)',
+  'primary-lighten-2': 'rgba(11, 57, 142, 1)',
+  'primary-lighten-3': 'rgba(19, 70, 164, 1)',
+  'primary-lighten-4': 'rgba(29, 80, 185, 1)',
+  'primary-lighten-5': 'rgba(39, 94, 206, 1)',
+  'primary-lighten-6': 'rgba(64, 112, 212, 1)',
+
+  // Secondary
+  secondary: 'rgba(1, 208, 180, 1)',
+  'secondary-darken-1': 'rgba(7, 171, 149, 1)',
+  'secondary-darken-2': 'rgba(11, 137, 120, 1)',
+  'secondary-darken-3': 'rgba(13, 104, 92, 1)',
+  'secondary-darken-4': 'rgba(12, 75, 66, 1)',
+  'secondary-darken-5': 'rgba(9, 47, 42, 1)',
+  'secondary-darken-6': 'rgba(5, 21, 19, 1)',
+  'secondary-lighten-1': 'rgba(10, 230, 201, 1)',
+  'secondary-lighten-2': 'rgba(33, 237, 210, 1)',
+  'secondary-lighten-3': 'rgba(69, 232, 210, 1)',
+  'secondary-lighten-4': 'rgba(101, 230, 213, 1)',
+  'secondary-lighten-5': 'rgba(132, 231, 217, 1)',
+  'secondary-lighten-6': 'rgba(160, 233, 223, 1)',
+
+  // Green
+  green: 'rgba(12, 187, 102, 1)',
+  'green-darken-1': 'rgba(16, 152, 86, 1)',
+  'green-darken-2': 'rgba(17, 120, 71, 1)',
+  'green-darken-3': 'rgba(16, 91, 55, 1)',
+  'green-darken-4': 'rgba(14, 63, 39, 1)',
+  'green-darken-5': 'rgba(9, 37, 23, 1)',
+  'green-darken-6': 'rgba(3, 12, 8, 1)',
+  'green-lighten-1': 'rgba(22, 208, 118, 1)',
+  'green-lighten-2': 'rgba(36, 224, 133, 1)',
+  'green-lighten-3': 'rgba(69, 222, 148, 1)',
+  'green-lighten-4': 'rgba(100, 221, 163, 1)',
+  'green-lighten-5': 'rgba(129, 223, 178, 1)',
+  'green-lighten-6': 'rgba(156, 226, 192, 1)',
+
+  // Red
+  red: 'rgba(238, 32, 56, 1)',
+  'red-darken-1': 'rgba(216, 24, 46, 1)',
+  'red-darken-2': 'rgba(182, 27, 45, 1)',
+  'red-darken-3': 'rgba(150, 29, 43, 1)',
+  'red-darken-4': 'rgba(121, 27, 38, 1)',
+  'red-darken-5': 'rgba(93, 25, 33, 1)',
+  'red-darken-6': 'rgba(67, 20, 25, 1)',
+  'red-darken-7': 'rgba(42, 14, 17, 1)',
+  'red-lighten-1': 'rgba(234, 67, 86, 1)',
+  'red-lighten-2': 'rgba(232, 100, 115, 1)',
+  'red-lighten-3': 'rgba(231, 131, 142, 1)',
+  'red-lighten-4': 'rgba(233, 159, 168, 1)',
+  'red-lighten-5': 'rgba(237, 187, 192, 1)',
+  'red-lighten-6': 'rgba(242, 212, 215, 1)',
+
+  // Yellow
+  yellow: 'rgba(241, 194, 4, 1)',
+  'yellow-darken-1': 'rgba(203, 165, 11, 1)',
+  'yellow-darken-2': 'rgba(168, 138, 16, 1)',
+  'yellow-darken-3': 'rgba(135, 112, 18, 1)',
+  'yellow-darken-4': 'rgba(105, 87, 18, 1)',
+  'yellow-darken-5': 'rgba(76, 64, 16, 1)',
+  'yellow-darken-6': 'rgba(49, 42, 12, 1)',
+  'yellow-lighten-1': 'rgba(243, 201, 32, 1)',
+  'yellow-lighten-2': 'rgba(238, 204, 68, 1)',
+  'yellow-lighten-3': 'rgba(235, 208, 102, 1)',
+  'yellow-lighten-4': 'rgba(234, 214, 133, 1)',
+  'yellow-lighten-5': 'rgba(236, 221, 162, 1)',
+  'yellow-lighten-6': 'rgba(239, 229, 189, 1)',
+
+  // CM (Clínica Médica)
+  cm: 'rgba(64, 126, 201, 1)',
+  'cm-darken-1': 'rgba(56, 112, 178, 1)',
+  'cm-darken-2': 'rgba(53, 97, 151, 1)',
+  'cm-darken-3': 'rgba(49, 83, 125, 1)',
+  'cm-darken-4': 'rgba(42, 69, 101, 1)',
+  'cm-darken-5': 'rgba(35, 54, 77, 1)',
+  'cm-darken-6': 'rgba(27, 39, 55, 1)',
+  'cm-lighten-1': 'rgba(92, 143, 204, 1)',
+  'cm-lighten-2': 'rgba(119, 159, 207, 1)',
+  'cm-lighten-3': 'rgba(145, 175, 212, 1)',
+  'cm-lighten-4': 'rgba(169, 191, 219, 1)',
+  'cm-lighten-5': 'rgba(192, 207, 227, 1)',
+  'cm-lighten-6': 'rgba(214, 223, 235, 1)',
+
+  // GO (Ginecologia e Obstetrícia)
+  go: 'rgba(172, 20, 90, 1)',
+  'go-darken-1': 'rgba(141, 22, 77, 1)',
+  'go-darken-2': 'rgba(111, 21, 63, 1)',
+  'go-darken-3': 'rgba(83, 19, 48, 1)',
+  'go-darken-4': 'rgba(56, 15, 34, 1)',
+  'go-darken-5': 'rgba(31, 10, 20, 1)',
+  'go-darken-6': 'rgba(8, 3, 5, 1)',
+  'go-lighten-1': 'rgba(194, 30, 106, 1)',
+  'go-lighten-2': 'rgba(214, 41, 121, 1)',
+  'go-lighten-3': 'rgba(213, 72, 137, 1)',
+  'go-lighten-4': 'rgba(214, 102, 154, 1)',
+  'go-lighten-5': 'rgba(217, 130, 170, 1)',
+  'go-lighten-6': 'rgba(221, 156, 186, 1)',
+
+  // CIR (Cirurgia)
+  cir: 'rgba(0, 239, 200, 1)',
+  'cir-darken-1': 'rgba(7, 202, 170, 1)',
+  'cir-darken-2': 'rgba(12, 166, 141, 1)',
+  'cir-darken-3': 'rgba(16, 132, 113, 1)',
+  'cir-darken-4': 'rgba(16, 101, 87, 1)',
+  'cir-darken-5': 'rgba(14, 73, 63, 1)',
+  'cir-darken-6': 'rgba(10, 46, 40, 1)',
+  'cir-lighten-1': 'rgba(24, 247, 210, 1)',
+  'cir-lighten-2': 'rgba(61, 240, 211, 1)',
+  'cir-lighten-3': 'rgba(95, 236, 213, 1)',
+  'cir-lighten-4': 'rgba(127, 235, 217, 1)',
+  'cir-lighten-5': 'rgba(156, 236, 223, 1)',
+  'cir-lighten-6': 'rgba(184, 239, 230, 1)',
+
+  // PED (Pediatria)
+  ped: 'rgba(255, 198, 73, 1)',
+  'ped-darken-1': 'rgba(248, 185, 48, 1)',
+  'ped-darken-2': 'rgba(238, 172, 27, 1)',
+  'ped-darken-3': 'rgba(210, 152, 25, 1)',
+  'ped-darken-4': 'rgba(176, 130, 28, 1)',
+  'ped-darken-5': 'rgba(146, 109, 28, 1)',
+  'ped-darken-6': 'rgba(116, 88, 26, 1)',
+  'ped-darken-7': 'rgba(89, 68, 24, 1)',
+  'ped-lighten-1': 'rgba(250, 205, 107, 1)',
+  'ped-lighten-2': 'rgba(246, 213, 141, 1)',
+  'ped-lighten-3': 'rgba(245, 223, 173, 1)',
+  'ped-lighten-4': 'rgba(247, 233, 202, 1)',
+  'ped-lighten-5': 'rgba(250, 244, 229, 1)',
+  'ped-lighten-6': 'rgba(255, 255, 255, 1)',
+
+  // PREV (Preventiva)
+  prev: 'rgba(59, 63, 182, 1)',
+  'prev-darken-1': 'rgba(55, 59, 154, 1)',
+  'prev-darken-2': 'rgba(50, 53, 129, 1)',
+  'prev-darken-3': 'rgba(44, 46, 104, 1)',
+  'prev-darken-4': 'rgba(37, 38, 80, 1)',
+  'prev-darken-5': 'rgba(28, 29, 59, 1)',
+  'prev-darken-6': 'rgba(19, 20, 37, 1)',
+  'prev-lighten-1': 'rgba(79, 82, 191, 1)',
+  'prev-lighten-2': 'rgba(104, 107, 196, 1)',
+  'prev-lighten-3': 'rgba(130, 132, 201, 1)',
+  'prev-lighten-4': 'rgba(154, 155, 208, 1)',
+  'prev-lighten-5': 'rgba(176, 177, 217, 1)',
+  'prev-lighten-6': 'rgba(198, 199, 226, 1)',
+
+  // Drop shadow (valores do light; no dark viram alias de `black-*`)
+  'drop-shadow-layer-a': 'rgba(33, 38, 49, 0.16)',
+  'drop-shadow-layer-b': 'rgba(73, 85, 110, 0.16)',
+
+  // Gold
+  gold: 'rgba(217, 172, 104, 1)',
+  'gold-darken-1': 'rgba(209, 154, 72, 1)',
+  'gold-darken-2': 'rgba(191, 134, 49, 1)',
+  'gold-darken-3': 'rgba(159, 111, 40, 1)',
+  'gold-darken-4': 'rgba(126, 88, 32, 1)',
+  'gold-darken-5': 'rgba(94, 66, 24, 1)',
+  'gold-darken-6': 'rgba(61, 43, 15, 1)',
+  'gold-lighten-1': 'rgba(221, 181, 121, 1)',
+  'gold-lighten-2': 'rgba(229, 199, 153, 1)',
+  'gold-lighten-3': 'rgba(233, 208, 170, 1)',
+  'gold-lighten-4': 'rgba(237, 217, 186, 1)',
+  'gold-lighten-5': 'rgba(242, 226, 202, 1)',
+  'gold-lighten-6': 'rgba(246, 235, 218, 1)',
+
+  // Silver
+  silver: 'rgba(120, 120, 120, 1)',
+  'silver-darken-1': 'rgba(99, 99, 99, 1)',
+  'silver-darken-2': 'rgba(79, 79, 79, 1)',
+  'silver-darken-3': 'rgba(69, 69, 69, 1)',
+  'silver-darken-4': 'rgba(59, 59, 59, 1)',
+  'silver-darken-5': 'rgba(48, 48, 48, 1)',
+  'silver-darken-6': 'rgba(38, 38, 38, 1)',
+  'silver-lighten-1': 'rgba(140, 140, 140, 1)',
+  'silver-lighten-2': 'rgba(161, 161, 161, 1)',
+  'silver-lighten-3': 'rgba(181, 181, 181, 1)',
+  'silver-lighten-4': 'rgba(199, 199, 199, 1)',
+  'silver-lighten-5': 'rgba(219, 219, 219, 1)',
+  'silver-lighten-6': 'rgba(240, 240, 240, 1)',
+
+  // Bronze
+  bronze: 'rgba(199, 119, 87, 1)',
+  'bronze-darken-1': 'rgba(184, 97, 61, 1)',
+  'bronze-darken-2': 'rgba(153, 80, 51, 1)',
+  'bronze-darken-3': 'rgba(122, 64, 41, 1)',
+  'bronze-darken-4': 'rgba(92, 48, 31, 1)',
+  'bronze-darken-5': 'rgba(61, 32, 20, 1)',
+  'bronze-darken-6': 'rgba(31, 16, 10, 1)',
+  'bronze-lighten-1': 'rgba(209, 144, 117, 1)',
+  'bronze-lighten-2': 'rgba(219, 168, 148, 1)',
+  'bronze-lighten-3': 'rgba(229, 193, 178, 1)',
+  'bronze-lighten-4': 'rgba(240, 218, 209, 1)',
+  'bronze-lighten-5': 'rgba(250, 243, 240, 1)',
+
+  // Backdrop / drop shadow subtle (`-dark` = valor do .dark)
+  'drop-shadow-subtle-layer-a': 'rgba(33, 38, 49, 0.04)',
+  'drop-shadow-subtle-layer-b': 'rgba(73, 85, 110, 0.08)',
+  backdrop: 'rgba(16, 19, 24, 0.3)',
+  'backdrop-dark': 'rgba(16, 19, 24, 0.5)',
+};
+
+/** Alias semântico → token da paleta, para light mode (`:root` em tokens.native.css). */
 const LIGHT_COLOR_ALIAS_MAP: Record<string, string> = {
+  // Content
   'content-title': 'primary',
   'content-paragraph': 'gray-600',
-  'gray-foreground': 'gray-600',
-  'primary-foreground': 'primary',
-  'secondary-foreground': 'secondary-darken-3',
-  'secondary-stroke-emphasis': 'secondary-darken-1',
+  'content-link': 'secondary-darken-2',
+
+  // State
+  'state-hover': 'gray-50',
+  'state-focus': 'gray-70',
+  'state-active': 'primary-16',
+  'state-error': 'red-16',
+
+  // Surface
+  'surface-elevated': 'white',
   'surface-card': 'white',
+  'surface-navigation': 'white',
+  'surface-section': 'white',
+  'surface-page': 'gray-30',
+  'surface-disable': 'white-8',
+  'surface-settings-on': 'white-80',
+  'surface-settings-off': 'white-48',
+
+  // Gray
+  'gray-foreground': 'gray-600',
+  'gray-foreground-emphasis': 'gray-700',
   'gray-foreground-muted': 'gray-450',
+  'gray-foreground-onfill': 'white',
+  'gray-stroke': 'gray-150',
+  'gray-stroke-emphasis': 'gray-200',
   'gray-stroke-muted': 'gray-100',
+  'gray-background-fill': 'gray-700',
+  'gray-background-fill-emphasis': 'gray-850',
   'gray-background-fill-muted': 'gray-400',
+  'gray-background-soft': 'gray-70',
+  'gray-background-soft-emphasis': 'gray-50',
   'gray-background-soft-muted': 'gray-30',
+
+  // Primary
+  'primary-foreground': 'primary',
+  'primary-foreground-emphasis': 'primary-darken-1',
+  'primary-foreground-muted': 'primary-64',
   'primary-foreground-onfill': 'white',
+  'primary-stroke': 'primary',
+  'primary-stroke-emphasis': 'primary-darken-1',
   'primary-background-fill': 'primary',
+  'primary-background-fill-emphasis': 'primary-darken-1',
+  'primary-background-soft': 'primary-8',
+  'primary-background-soft-emphasis': 'primary-6',
+  'primary-background-soft-muted': 'primary-4',
+
+  // Secondary
+  'secondary-foreground': 'secondary-darken-3',
+  'secondary-foreground-emphasis': 'secondary-darken-4',
+  'secondary-foreground-muted': 'secondary-darken-2',
+  'secondary-foreground-onfill': 'white',
+  'secondary-stroke': 'secondary',
+  'secondary-stroke-emphasis': 'secondary-darken-1',
+  'secondary-background-fill': 'secondary-darken-2',
+  'secondary-background-fill-emphasis': 'secondary-darken-3',
+  'secondary-background-soft': 'secondary-12',
+  'secondary-background-soft-emphasis': 'secondary-8',
+  'secondary-background-soft-muted': 'secondary-6',
+
+  // Green
+  'green-foreground': 'green-darken-3',
+  'green-foreground-emphasis': 'green-darken-4',
+  'green-foreground-onfill': 'white',
+  'green-stroke': 'green',
+  'green-stroke-emphasis': 'green-darken-2',
+  'green-background-fill': 'green-darken-2',
+  'green-background-fill-emphasis': 'green-darken-3',
+  'green-background-soft': 'green-16',
+  'green-background-soft-emphasis': 'green-12',
+  'green-background-soft-muted': 'green-6',
+
+  // Red
+  'red-foreground': 'red-darken-2',
+  'red-foreground-emphasis': 'red-darken-3',
+  'red-foreground-onfill': 'white',
+  'red-stroke': 'red',
+  'red-stroke-emphasis': 'red-darken-1',
+  'red-background-fill': 'red-darken-1',
+  'red-background-fill-emphasis': 'red-darken-2',
+  'red-background-soft': 'red-12',
+  'red-background-soft-emphasis': 'red-8',
+  'red-background-soft-muted': 'red-4',
+
+  // Yellow
+  'yellow-foreground': 'yellow-darken-4',
+  'yellow-foreground-emphasis': 'yellow-darken-5',
+  'yellow-foreground-onfill': 'yellow-darken-5',
+  'yellow-stroke': 'yellow-lighten-1',
+  'yellow-stroke-emphasis': 'yellow',
+  'yellow-background-fill': 'yellow-lighten-2',
+  'yellow-background-fill-emphasis': 'yellow',
+  'yellow-background-soft': 'yellow-24',
+  'yellow-background-soft-emphasis': 'yellow-16',
+  'yellow-background-soft-muted': 'yellow-8',
+
+  // CM
+  'cm-foreground': 'cm-darken-2',
+  'cm-foreground-emphasis': 'cm-darken-4',
+  'cm-foreground-onfill': 'white',
   'cm-background-fill': 'cm-darken-1',
+  'cm-background-fill-emphasis': 'cm-darken-3',
+  'cm-background-soft': 'cm-8',
+  'cm-background-soft-emphasis': 'cm-4',
+
+  // GO
+  'go-foreground': 'go-darken-1',
+  'go-foreground-emphasis': 'go-darken-3',
+  'go-foreground-onfill': 'white',
   'go-background-fill': 'go',
+  'go-background-fill-emphasis': 'go-darken-1',
+  'go-background-soft': 'go-8',
+  'go-background-soft-emphasis': 'go-4',
+
+  // CIR
+  'cir-foreground': 'cir-darken-4',
+  'cir-foreground-emphasis': 'cir-darken-5',
+  'cir-foreground-onfill': 'cir-darken-6',
   'cir-background-fill': 'cir',
-  'ped-background-fill': 'ped',
+  'cir-background-fill-emphasis': 'cir-darken-1',
+  'cir-background-soft': 'cir-16',
+  'cir-background-soft-emphasis': 'cir-8',
+
+  // PED
+  'ped-foreground': 'ped-darken-6',
+  'ped-foreground-emphasis': 'ped-darken-7',
+  'ped-foreground-onfill': 'ped-darken-7',
+  'ped-background-fill': 'ped-lighten-1',
+  'ped-background-fill-emphasis': 'ped',
+  'ped-background-soft': 'ped-16',
+  'ped-background-soft-emphasis': 'ped-8',
+
+  // PREV
+  'prev-foreground': 'prev',
+  'prev-foreground-emphasis': 'prev-darken-2',
+  'prev-foreground-onfill': 'white',
   'prev-background-fill': 'prev',
-  'red-foreground': 'red-darken-2',
-  'go-foreground': 'go-darken-1',
-  // Not a real CSS var: `--color-backdrop` resolves directly, this alias only
-  // keys the static fallback below (keep in sync with tokens.native.css).
-  backdrop: 'backdrop-light',
+  'prev-background-fill-emphasis': 'prev-darken-2',
+  'prev-background-soft': 'prev-8',
+  'prev-background-soft-emphasis': 'prev-4',
+
+  // Feedback — success
+  'feedback-success-foreground': 'green-darken-3',
+  'feedback-success-foreground-emphasis': 'green-darken-4',
+  'feedback-success-foreground-onfill': 'white',
+  'feedback-success-stroke': 'green',
+  'feedback-success-stroke-emphasis': 'green-darken-2',
+  'feedback-success-background-fill': 'green-darken-2',
+  'feedback-success-background-fill-emphasis': 'green-darken-3',
+  'feedback-success-background-soft': 'green-16',
+  'feedback-success-background-soft-emphasis': 'green-12',
+  'feedback-success-background-soft-muted': 'green-6',
+
+  // Feedback — error
+  'feedback-error-foreground': 'red-darken-2',
+  'feedback-error-foreground-emphasis': 'red-darken-3',
+  'feedback-error-foreground-onfill': 'white',
+  'feedback-error-stroke': 'red',
+  'feedback-error-stroke-emphasis': 'red-darken-1',
+  'feedback-error-background-fill': 'red-darken-1',
+  'feedback-error-background-fill-emphasis': 'red-darken-2',
+  'feedback-error-background-soft': 'red-12',
+  'feedback-error-background-soft-emphasis': 'red-8',
+  'feedback-error-background-soft-muted': 'red-4',
+
+  // Feedback — warning
+  'feedback-warning-foreground': 'yellow-darken-4',
+  'feedback-warning-foreground-emphasis': 'yellow-darken-5',
+  'feedback-warning-foreground-onfill': 'yellow-darken-5',
+  'feedback-warning-stroke': 'yellow-lighten-1',
+  'feedback-warning-stroke-emphasis': 'yellow',
+  'feedback-warning-background-fill': 'yellow-lighten-2',
+  'feedback-warning-background-fill-emphasis': 'yellow',
+  'feedback-warning-background-soft': 'yellow-24',
+  'feedback-warning-background-soft-emphasis': 'yellow-16',
+  'feedback-warning-background-soft-muted': 'yellow-8',
+
+  // Base
+  background: 'white',
+  foreground: 'gray-700',
+  ring: 'gray-150',
+
+  // Gradients
+  'gradient-base-blur-1': 'primary-lighten-6',
+  'gradient-base-blur-2': 'secondary-lighten-3',
+  'gradient-base-blur-3': 'secondary-lighten-6',
+  'gradient-base-bg-1': 'gray-50',
+  'gradient-base-bg-2': 'gray-10',
+  'gradient-cir-blur-1': 'cir-lighten-3',
+  'gradient-cir-blur-2': 'secondary-lighten-1',
+  'gradient-cir-blur-3': 'cir-darken-1',
+  'gradient-cir-bg-1': 'cir-lighten-6',
+  'gradient-cir-bg-2': 'gray-10',
+  'gradient-cm-blur-1': 'cm-lighten-4',
+  'gradient-cm-blur-2': 'cm-lighten-2',
+  'gradient-cm-blur-3': 'cm',
+  'gradient-cm-bg-1': 'cm-lighten-6',
+  'gradient-cm-bg-2': 'gray-10',
+  'gradient-go-blur-1': 'go-lighten-6',
+  'gradient-go-blur-2': 'go-lighten-4',
+  'gradient-go-blur-3': 'go-lighten-2',
+  'gradient-go-bg-1': 'go-lighten-6',
+  'gradient-go-bg-2': 'gray-10',
+  'gradient-ped-blur-1': 'ped-lighten-4',
+  'gradient-ped-blur-2': 'ped-lighten-2',
+  'gradient-ped-blur-3': 'ped',
+  'gradient-ped-bg-1': 'ped-lighten-5',
+  'gradient-ped-bg-2': 'gray-10',
+  'gradient-prev-blur-1': 'prev-lighten-5',
+  'gradient-prev-blur-2': 'prev-lighten-3',
+  'gradient-prev-blur-3': 'prev',
+  'gradient-prev-bg-1': 'prev-lighten-6',
+  'gradient-prev-bg-2': 'gray-10',
+  'gradient-r1-blur-1': 'secondary',
+  'gradient-r1-blur-2': 'primary-lighten-3',
+  'gradient-r1-blur-3': 'primary-lighten-5',
+  'gradient-r1-bg-1': 'primary',
+  'gradient-r1-bg-2': 'primary-lighten-1',
+  'gradient-rplus-blur-1': 'primary-lighten-1',
+  'gradient-rplus-blur-2': 'primary-lighten-3',
+  'gradient-rplus-blur-3': 'primary-lighten-5',
+  'gradient-rplus-bg-1': 'primary-lighten-1',
+  'gradient-rplus-bg-2': 'primary',
+  'gradient-pt-blur-1': 'secondary',
+  'gradient-pt-blur-2': 'secondary-darken-2',
+  'gradient-pt-blur-3': 'secondary-darken-4',
+  'gradient-pt-bg-1': 'gray-600',
+  'gradient-pt-bg-2': 'gray-450',
+
+  // Gold
+  'gold-foreground': 'gold-darken-4',
+  'gold-foreground-emphasis': 'gold-darken-5',
+  'gold-foreground-onfill': 'gold-darken-5',
+  'gold-background-fill': 'gold',
+  'gold-background-fill-emphasis': 'gold-darken-1',
+  'gold-background-soft': 'gold-24',
+  'gold-background-soft-emphasis': 'gold-16',
+
+  // Silver
+  'silver-foreground': 'silver-darken-4',
+  'silver-foreground-emphasis': 'silver-darken-6',
+  'silver-foreground-onfill': 'white',
+  'silver-background-fill': 'silver',
+  'silver-background-fill-emphasis': 'silver-darken-1',
+  'silver-background-soft': 'silver-8',
+  'silver-background-soft-emphasis': 'silver-4',
+
+  // Bronze
+  'bronze-foreground': 'bronze-darken-3',
+  'bronze-foreground-emphasis': 'bronze-darken-4',
+  'bronze-foreground-onfill': 'white',
+  'bronze-background-fill': 'bronze',
+  'bronze-background-fill-emphasis': 'bronze-darken-1',
+  'bronze-background-soft': 'bronze-24',
+  'bronze-background-soft-emphasis': 'bronze-16',
 };
 
-/** Fallback — dark mode (espelha tokens.css `.dark`). */
+/** Alias semântico → token da paleta, para dark mode (`.dark` em tokens.native.css). */
 const DARK_COLOR_ALIAS_MAP: Record<string, string> = {
+  // Content
   'content-title': 'white',
   'content-paragraph': 'gray-150',
-  'gray-foreground': 'gray-100',
-  'primary-foreground': 'gray-100',
-  'secondary-foreground': 'secondary-lighten-1',
-  'secondary-stroke-emphasis': 'secondary',
+  'content-link': 'secondary',
+
+  // State
+  'state-hover': 'gray-800',
+  'state-focus': 'gray-700',
+  'state-active': 'white-16',
+  'state-error': 'red-16',
+
+  // Surface
+  'surface-elevated': 'gray-800',
   'surface-card': 'gray-850',
+  'surface-navigation': 'gray-850',
+  'surface-section': 'gray-900',
+  'surface-page': 'gray-950',
+  'surface-disable': 'black-8',
+  'surface-settings-on': 'black-48',
+  'surface-settings-off': 'gray-950',
+
+  // Gray
+  'gray-foreground': 'gray-100',
+  'gray-foreground-emphasis': 'white',
   'gray-foreground-muted': 'gray-150',
+  'gray-foreground-onfill': 'gray-700',
+  'gray-stroke': 'gray-600',
+  'gray-stroke-emphasis': 'gray-500',
   'gray-stroke-muted': 'gray-700',
+  'gray-background-fill': 'gray-100',
+  'gray-background-fill-emphasis': 'gray-30',
   'gray-background-fill-muted': 'gray-300',
+  'gray-background-soft': 'gray-800',
+  'gray-background-soft-emphasis': 'gray-600',
   'gray-background-soft-muted': 'gray-700',
+
+  // Primary
+  'primary-foreground': 'gray-100',
+  'primary-foreground-emphasis': 'white',
+  'primary-foreground-muted': 'gray-200',
   'primary-foreground-onfill': 'primary',
+  'primary-stroke': 'gray-100',
+  'primary-stroke-emphasis': 'white',
   'primary-background-fill': 'gray-70',
-  'cm-background-fill': 'cm-darken-1',
-  'go-background-fill': 'go-darken-1',
-  'cir-background-fill': 'cir',
-  'ped-background-fill': 'ped',
-  'prev-background-fill': 'prev',
+  'primary-background-fill-emphasis': 'white',
+  'primary-background-soft': 'white-8',
+  'primary-background-soft-emphasis': 'white-16',
+  'primary-background-soft-muted': 'white-12',
+
+  // Secondary
+  'secondary-foreground': 'secondary-lighten-1',
+  'secondary-foreground-emphasis': 'secondary-lighten-2',
+  'secondary-foreground-muted': 'secondary',
+  'secondary-foreground-onfill': 'secondary-darken-6',
+  'secondary-stroke': 'secondary-darken-1',
+  'secondary-stroke-emphasis': 'secondary',
+  'secondary-background-fill': 'secondary-darken-1',
+  'secondary-background-fill-emphasis': 'secondary',
+  'secondary-background-soft': 'secondary-8',
+  'secondary-background-soft-emphasis': 'secondary-24',
+  'secondary-background-soft-muted': 'secondary-12',
+
+  // Green
+  'green-foreground': 'green-lighten-4',
+  'green-foreground-emphasis': 'green-lighten-6',
+  'green-foreground-onfill': 'white',
+  'green-stroke': 'green-darken-2',
+  'green-stroke-emphasis': 'green',
+  'green-background-fill': 'green-darken-3',
+  'green-background-fill-emphasis': 'green-darken-2',
+  'green-background-soft': 'green-8',
+  'green-background-soft-emphasis': 'green-24',
+  'green-background-soft-muted': 'green-16',
+
+  // Red
   'red-foreground': 'red-lighten-3',
+  'red-foreground-emphasis': 'red-lighten-4',
+  'red-foreground-onfill': 'white',
+  'red-stroke': 'red-darken-1',
+  'red-stroke-emphasis': 'red',
+  'red-background-fill': 'red-darken-2',
+  'red-background-fill-emphasis': 'red-darken-1',
+  'red-background-soft': 'red-12',
+  'red-background-soft-emphasis': 'red-24',
+  'red-background-soft-muted': 'red-16',
+
+  // Yellow
+  'yellow-foreground': 'yellow-lighten-2',
+  'yellow-foreground-emphasis': 'yellow-lighten-4',
+  'yellow-foreground-onfill': 'yellow-darken-5',
+  'yellow-stroke': 'yellow',
+  'yellow-stroke-emphasis': 'yellow-lighten-1',
+  'yellow-background-fill': 'yellow',
+  'yellow-background-fill-emphasis': 'yellow-lighten-2',
+  'yellow-background-soft': 'yellow-8',
+  'yellow-background-soft-emphasis': 'yellow-24',
+  'yellow-background-soft-muted': 'yellow-16',
+
+  // CM
+  'cm-foreground': 'cm-lighten-4',
+  'cm-foreground-emphasis': 'cm-lighten-6',
+  'cm-foreground-onfill': 'white',
+  'cm-background-fill': 'cm-darken-2',
+  'cm-background-fill-emphasis': 'cm',
+  'cm-background-soft': 'cm-12',
+  'cm-background-soft-emphasis': 'cm-24',
+
+  // GO
   'go-foreground': 'go-lighten-5',
-  // Fallback key only, see LIGHT_COLOR_ALIAS_MAP.
-  backdrop: 'backdrop-dark',
-};
+  'go-foreground-emphasis': 'go-lighten-6',
+  'go-foreground-onfill': 'white',
+  'go-background-fill': 'go-darken-1',
+  'go-background-fill-emphasis': 'go',
+  'go-background-soft': 'go-16',
+  'go-background-soft-emphasis': 'go-24',
 
-/** Fallback estático quando NativeWind não resolve `var(--color-*)` encadeado. */
-const THEME_COLOR_FALLBACKS: Record<string, string> = {
-  white: '#FFFFFF',
-  primary: 'rgba(0, 32, 91, 1)',
-  'cm-darken-1': 'rgba(56, 112, 178, 1)',
-  go: 'rgba(172, 20, 90, 1)',
-  cir: 'rgba(0, 239, 200, 1)',
-  ped: 'rgba(255, 198, 73, 1)',
-  prev: 'rgba(59, 63, 182, 1)',
-  'gray-600': 'rgba(49, 57, 73, 1)',
-  'gray-450': 'rgba(90, 105, 135, 1)',
-  'gray-400': 'rgba(122, 133, 151, 1)',
-  'gray-100': 'rgba(231, 233, 239, 1)',
-  'gray-30': 'rgba(249, 250, 251, 1)',
-  'gray-150': 'rgba(206, 211, 222, 1)',
-  'gray-300': 'rgba(133, 146, 173, 1)',
-  'gray-700': 'rgba(33, 38, 49, 1)',
-  'gray-850': 'rgba(16, 19, 24, 1)',
-  'gray-70': 'rgba(240, 241, 245, 1)',
-  'red-darken-2': 'rgba(182, 27, 45, 1)',
-  'red-lighten-3': 'rgba(231, 131, 142, 1)',
-  'go-darken-1': 'rgba(141, 22, 77, 1)',
-  'go-lighten-5': 'rgba(237, 187, 192, 1)',
-  'secondary-darken-1': 'rgba(7, 171, 149, 1)',
-  'secondary-darken-3': 'rgba(13, 104, 92, 1)',
-  'secondary-lighten-1': 'rgba(22, 208, 118, 1)',
-  'backdrop-light': 'rgba(16, 19, 24, 0.3)',
-  'backdrop-dark': 'rgba(16, 19, 24, 0.5)',
+  // CIR
+  'cir-foreground': 'cir',
+  'cir-foreground-emphasis': 'cir-lighten-3',
+  'cir-foreground-onfill': 'cir-darken-6',
+  'cir-background-fill': 'cir-darken-1',
+  'cir-background-fill-emphasis': 'cir',
+  'cir-background-soft': 'cir-8',
+  'cir-background-soft-emphasis': 'cir-16',
+
+  // PED
+  'ped-foreground': 'ped',
+  'ped-foreground-emphasis': 'ped-lighten-1',
+  'ped-foreground-onfill': 'ped-darken-7',
+  'ped-background-fill': 'ped',
+  'ped-background-fill-emphasis': 'ped-lighten-1',
+  'ped-background-soft': 'ped-8',
+  'ped-background-soft-emphasis': 'ped-16',
+
+  // PREV
+  'prev-foreground': 'prev-lighten-5',
+  'prev-foreground-emphasis': 'prev-lighten-6',
+  'prev-foreground-onfill': 'white',
+  'prev-background-fill': 'prev-darken-1',
+  'prev-background-fill-emphasis': 'prev',
+  'prev-background-soft': 'prev-24',
+  'prev-background-soft-emphasis': 'prev-48',
+
+  // Feedback — success
+  'feedback-success-foreground': 'green-lighten-4',
+  'feedback-success-foreground-emphasis': 'green-lighten-6',
+  'feedback-success-foreground-onfill': 'white',
+  'feedback-success-stroke': 'green-darken-2',
+  'feedback-success-stroke-emphasis': 'green',
+  'feedback-success-background-fill': 'green-darken-3',
+  'feedback-success-background-fill-emphasis': 'green-darken-2',
+  'feedback-success-background-soft': 'green-8',
+  'feedback-success-background-soft-emphasis': 'green-24',
+  'feedback-success-background-soft-muted': 'green-16',
+
+  // Feedback — error
+  'feedback-error-foreground': 'red-lighten-3',
+  'feedback-error-foreground-emphasis': 'red-lighten-4',
+  'feedback-error-foreground-onfill': 'white',
+  'feedback-error-stroke': 'red-darken-1',
+  'feedback-error-stroke-emphasis': 'red',
+  'feedback-error-background-fill': 'red-darken-2',
+  'feedback-error-background-fill-emphasis': 'red-darken-1',
+  'feedback-error-background-soft': 'red-12',
+  'feedback-error-background-soft-emphasis': 'red-24',
+  'feedback-error-background-soft-muted': 'red-16',
+
+  // Feedback — warning
+  'feedback-warning-foreground': 'yellow-lighten-2',
+  'feedback-warning-foreground-emphasis': 'yellow-lighten-4',
+  'feedback-warning-foreground-onfill': 'yellow-darken-5',
+  'feedback-warning-stroke': 'yellow',
+  'feedback-warning-stroke-emphasis': 'yellow-lighten-1',
+  'feedback-warning-background-fill': 'yellow',
+  'feedback-warning-background-fill-emphasis': 'yellow-lighten-2',
+  'feedback-warning-background-soft': 'yellow-8',
+  'feedback-warning-background-soft-emphasis': 'yellow-24',
+  'feedback-warning-background-soft-muted': 'yellow-16',
+
+  // Base
+  background: 'gray-850',
+  foreground: 'white',
+  ring: 'gray-500',
+
+  // Drop shadow
+  'drop-shadow-layer-a': 'black-24',
+  'drop-shadow-layer-b': 'black-16',
+
+  // Gradients
+  'gradient-base-blur-1': 'primary-lighten-3',
+  'gradient-base-blur-2': 'secondary-darken-1',
+  'gradient-base-blur-3': 'secondary',
+  'gradient-base-bg-1': 'primary-darken-1',
+  'gradient-base-bg-2': 'primary-darken-2',
+  'gradient-cir-blur-1': 'cir-darken-1',
+  'gradient-cir-blur-2': 'cir-darken-2',
+  'gradient-cir-blur-3': 'cir-darken-3',
+  'gradient-cir-bg-1': 'cir-darken-5',
+  'gradient-cir-bg-2': 'cir-darken-6',
+  'gradient-cm-blur-1': 'cm',
+  'gradient-cm-blur-2': 'cm-darken-1',
+  'gradient-cm-blur-3': 'cm-darken-2',
+  'gradient-cm-bg-1': 'cm-darken-4',
+  'gradient-cm-bg-2': 'cm-darken-6',
+  'gradient-go-blur-1': 'go-lighten-2',
+  'gradient-go-blur-2': 'go',
+  'gradient-go-blur-3': 'go-darken-2',
+  'gradient-go-bg-1': 'go-darken-3',
+  'gradient-go-bg-2': 'go-darken-5',
+  'gradient-ped-blur-1': 'ped',
+  'gradient-ped-blur-2': 'ped-darken-3',
+  'gradient-ped-blur-3': 'ped-darken-5',
+  'gradient-ped-bg-1': 'ped-darken-4',
+  'gradient-ped-bg-2': 'yellow-darken-6',
+  'gradient-prev-blur-1': 'prev-lighten-1',
+  'gradient-prev-blur-2': 'prev',
+  'gradient-prev-blur-3': 'prev-darken-1',
+  'gradient-prev-bg-1': 'prev-darken-2',
+  'gradient-prev-bg-2': 'prev-darken-4',
+  'gradient-r1-blur-1': 'secondary',
+  'gradient-r1-blur-2': 'primary-lighten-1',
+  'gradient-r1-blur-3': 'primary-lighten-2',
+  'gradient-r1-bg-1': 'primary',
+  'gradient-r1-bg-2': 'primary-darken-2',
+  'gradient-rplus-blur-1': 'primary-lighten-5',
+  'gradient-rplus-blur-2': 'primary-lighten-3',
+  'gradient-rplus-blur-3': 'primary-lighten-1',
+  'gradient-rplus-bg-1': 'primary',
+  'gradient-rplus-bg-2': 'primary-darken-2',
+  'gradient-pt-blur-1': 'secondary',
+  'gradient-pt-blur-2': 'secondary-darken-1',
+  'gradient-pt-blur-3': 'secondary-darken-3',
+  'gradient-pt-bg-1': 'gray-800',
+  'gradient-pt-bg-2': 'gray-900',
+
+  // Gold (herdado do :root)
+  'gold-foreground': 'gold-darken-4',
+  'gold-foreground-emphasis': 'gold-darken-5',
+  'gold-foreground-onfill': 'gold-darken-5',
+  'gold-background-fill': 'gold',
+  'gold-background-fill-emphasis': 'gold-darken-1',
+  'gold-background-soft': 'gold-24',
+  'gold-background-soft-emphasis': 'gold-16',
+
+  // Silver (herdado do :root)
+  'silver-foreground': 'silver-darken-4',
+  'silver-foreground-emphasis': 'silver-darken-6',
+  'silver-foreground-onfill': 'white',
+  'silver-background-fill': 'silver',
+  'silver-background-fill-emphasis': 'silver-darken-1',
+  'silver-background-soft': 'silver-8',
+  'silver-background-soft-emphasis': 'silver-4',
+
+  // Bronze (herdado do :root)
+  'bronze-foreground': 'bronze-darken-3',
+  'bronze-foreground-emphasis': 'bronze-darken-4',
+  'bronze-foreground-onfill': 'white',
+  'bronze-background-fill': 'bronze',
+  'bronze-background-fill-emphasis': 'bronze-darken-1',
+  'bronze-background-soft': 'bronze-24',
+  'bronze-background-soft-emphasis': 'bronze-16',
+
+  // Backdrop / drop shadow subtle
+  'drop-shadow-subtle-layer-a': 'black-24',
+  'drop-shadow-subtle-layer-b': 'black-16',
+  backdrop: 'backdrop-dark',
 };
 
 const DEFAULT_COLOR = '#3B4958';
@@ -108,6 +787,28 @@ function isResolvedColor(value: unknown): value is string {
   return typeof value === 'string' && !value.startsWith('var(');
 }
 
+/**
+ * Resolve tokens da paleta com sufixo numérico (`primary-16`, `red-8`) para o
+ * mesmo tom base com alpha aplicada. Ex.: `primary-16` = base `primary` com
+ * alpha 0.16.
+ */
+function resolvePaletteToken(paletteToken: string): string | null {
+  if (PALETTE[paletteToken]) return PALETTE[paletteToken];
+
+  const alphaMatch = paletteToken.match(/^(.+)-(\d+)$/);
+  if (!alphaMatch) return null;
+
+  const [, base, alphaStr] = alphaMatch;
+  const baseColor = PALETTE[base];
+  if (!baseColor) return null;
+
+  const alphaPercent = Number(alphaStr);
+  if (alphaPercent > 100) return null;
+
+  const alphaValue = alphaPercent / 100;
+  return baseColor.replace(/,\s*1\)$/, `, ${alphaValue})`);
+}
+
 function getFallbackColor(
   token: ThemeColorToken,
   aliasMap: Record<string, string>
@@ -115,18 +816,15 @@ function getFallbackColor(
   const tokenName = toTokenName(token);
   const aliasToken = aliasMap[tokenName] ?? tokenName;
 
+  // Alias primeiro: ele é específico do color scheme e deve vencer valores
+  // literais da paleta (ex.: `drop-shadow-layer-a` no dark → `black-24`).
   return (
-    THEME_COLOR_FALLBACKS[tokenName] ??
-    THEME_COLOR_FALLBACKS[aliasToken] ??
+    resolvePaletteToken(aliasToken) ??
+    resolvePaletteToken(tokenName) ??
     DEFAULT_COLOR
   );
 }
 
-/**
- * Aplica alpha na cor já resolvida (`rgba` ou hex). `transparent` no
- * LinearGradient do Expo interpola via preto no Android.
- * `alpha` é clamado em 0–1 para não gerar hex inválido (ex. `#RRGGBB132`).
- */
 function withAlpha(color: string, alpha: number): string {
   const clamped = Math.min(1, Math.max(0, alpha));
   const rgba = color.match(
@@ -154,11 +852,6 @@ function withAlpha(color: string, alpha: number): string {
   return color;
 }
 
-/**
- * Resolve uma cor semântica do design system (tokens.native.css) em runtime.
- * Use quando a prop `color` for obrigatória (SVG, stroke Reanimated, etc.).
- * `alpha` (0–1) aplica a opacidade na cor resolvida.
- */
 function useThemeColor(token: ThemeColorToken, alpha?: number): string {
   const { colorScheme } = useColorScheme();
   const aliasMap =