@medway-ui/native 1.6.1 → 1.7.1

package/setup/tokens.native.css

@@ -724,262 +724,272 @@
   --sidebar-width-icon: 72px;
 }
 
-.dark {
-  /* === Dark base colors === */
-  --color-background: var(--color-gray-850);
-  --color-foreground: var(--color-white);
-  --color-ring: var(--color-gray-500);
-  --color-backdrop: rgba(16, 19, 24, 0.5);
-
-  /* === Dark state colors === */
-  --color-state-hover: var(--color-gray-800);
-  --color-state-focus: var(--color-gray-700);
-  --color-state-active: var(--color-white-16);
-  --color-state-error: var(--color-red-16);
-
-  /* === Base feedback success colors === */
-  --color-feedback-success-foreground: var(--color-green-lighten-4);
-  --color-feedback-success-foreground-emphasis: var(--color-green-lighten-6);
-  --color-feedback-success-foreground-onfill: var(--color-white);
-  --color-feedback-success-stroke: var(--color-green-darken-2);
-  --color-feedback-success-stroke-emphasis: var(--color-green);
-  --color-feedback-success-background-fill: var(--color-green-darken-3);
-  --color-feedback-success-background-fill-emphasis: var(
-    --color-green-darken-2
-  );
-  --color-feedback-success-background-soft: var(--color-green-8);
-  --color-feedback-success-background-soft-emphasis: var(--color-green-24);
-  --color-feedback-success-background-soft-muted: var(--color-green-16);
-
-  /* === Base feedback error colors === */
-  --color-feedback-error-foreground: var(--color-red-lighten-3);
-  --color-feedback-error-foreground-emphasis: var(--color-red-lighten-4);
-  --color-feedback-error-foreground-onfill: var(--color-white);
-  --color-feedback-error-stroke: var(--color-red-darken-1);
-  --color-feedback-error-stroke-emphasis: var(--color-red);
-  --color-feedback-error-background-fill: var(--color-red-darken-2);
-  --color-feedback-error-background-fill-emphasis: var(--color-red-darken-1);
-  --color-feedback-error-background-soft: var(--color-red-12);
-  --color-feedback-error-background-soft-emphasis: var(--color-red-24);
-  --color-feedback-error-background-soft-muted: var(--color-red-16);
-
-  /* === Base feedback warning colors === */
-  --color-feedback-warning-foreground: var(--color-yellow-lighten-2);
-  --color-feedback-warning-foreground-emphasis: var(--color-yellow-lighten-4);
-  --color-feedback-warning-foreground-onfill: var(--color-yellow-darken-5);
-  --color-feedback-warning-stroke: var(--color-yellow);
-  --color-feedback-warning-stroke-emphasis: var(--color-yellow-lighten-1);
-  --color-feedback-warning-background-fill: var(--color-yellow);
-  --color-feedback-warning-background-fill-emphasis: var(
-    --color-yellow-lighten-2
-  );
-  --color-feedback-warning-background-soft: var(--color-yellow-8);
-  --color-feedback-warning-background-soft-emphasis: var(--color-yellow-24);
-  --color-feedback-warning-background-soft-muted: var(--color-yellow-16);
-
-  /* === Base content colors === */
-  --color-content-title: var(--color-white);
-  --color-content-paragraph: var(--color-gray-150);
-  --color-content-link: var(--color-secondary);
-
-  /* === Dark surface colors === */
-  --color-surface-elevated: var(--color-gray-800);
-  --color-surface-card: var(--color-gray-850);
-  --color-surface-navigation: var(--color-gray-850);
-  --color-surface-section: var(--color-gray-900);
-  --color-surface-page: var(--color-gray-950);
-  --color-surface-disable: var(--color-black-8);
-  --color-surface-settings-on: var(--color-black-48);
-  --color-surface-settings-off: var(--color-gray-950);
-
-  /* === Dark drop-shadow colors === */
-  --color-drop-shadow-layer-a: var(--color-black-24);
-  --color-drop-shadow-layer-b: var(--color-black-16);
-  --color-drop-shadow-subtle-layer-a: var(--color-drop-shadow-layer-a);
-  --color-drop-shadow-subtle-layer-b: var(--color-drop-shadow-layer-b);
-
-  /* === Dark gray colors === */
-  --color-gray-foreground: var(--color-gray-100);
-  --color-gray-foreground-emphasis: var(--color-white);
-  --color-gray-foreground-muted: var(--color-gray-150);
-  --color-gray-foreground-onfill: var(--color-gray-700);
-  --color-gray-stroke: var(--color-gray-600);
-  --color-gray-stroke-emphasis: var(--color-gray-500);
-  --color-gray-stroke-muted: var(--color-gray-700);
-  --color-gray-background-fill: var(--color-gray-100);
-  --color-gray-background-fill-emphasis: var(--color-gray-30);
-  --color-gray-background-fill-muted: var(--color-gray-300);
-  --color-gray-background-soft: var(--color-gray-800);
-  --color-gray-background-soft-emphasis: var(--color-gray-600);
-  --color-gray-background-soft-muted: var(--color-gray-700);
-
-  /* === Dark green colors === */
-  --color-green-foreground: var(--color-green-lighten-4);
-  --color-green-foreground-emphasis: var(--color-green-lighten-6);
-  --color-green-foreground-onfill: var(--color-white);
-  --color-green-stroke: var(--color-green-darken-2);
-  --color-green-stroke-emphasis: var(--color-green);
-  --color-green-background-fill: var(--color-green-darken-3);
-  --color-green-background-fill-emphasis: var(--color-green-darken-2);
-  --color-green-background-soft: var(--color-green-8);
-  --color-green-background-soft-emphasis: var(--color-green-24);
-  --color-green-background-soft-muted: var(--color-green-16);
-
-  /* === Dark red colors === */
-  --color-red-foreground: var(--color-red-lighten-3);
-  --color-red-foreground-emphasis: var(--color-red-lighten-4);
-  --color-red-foreground-onfill: var(--color-white);
-  --color-red-stroke: var(--color-red-darken-1);
-  --color-red-stroke-emphasis: var(--color-red);
-  --color-red-background-fill: var(--color-red-darken-2);
-  --color-red-background-fill-emphasis: var(--color-red-darken-1);
-  --color-red-background-soft: var(--color-red-12);
-  --color-red-background-soft-emphasis: var(--color-red-24);
-  --color-red-background-soft-muted: var(--color-red-16);
-
-  /* === Dark yellow colors === */
-  --color-yellow-foreground: var(--color-yellow-lighten-2);
-  --color-yellow-foreground-emphasis: var(--color-yellow-lighten-4);
-  --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
-  --color-yellow-stroke: var(--color-yellow);
-  --color-yellow-stroke-emphasis: var(--color-yellow-lighten-1);
-  --color-yellow-background-fill: var(--color-yellow);
-  --color-yellow-background-fill-emphasis: var(--color-yellow-lighten-2);
-  --color-yellow-background-soft: var(--color-yellow-8);
-  --color-yellow-background-soft-emphasis: var(--color-yellow-24);
-  --color-yellow-background-soft-muted: var(--color-yellow-16);
-
-  /* === Dark cm colors === */
-  --color-cm-foreground: var(--color-cm-lighten-4);
-  --color-cm-foreground-emphasis: var(--color-cm-lighten-6);
-  --color-cm-foreground-onfill: var(--color-white);
-  --color-cm-background-fill: var(--color-cm-darken-2);
-  --color-cm-background-fill-emphasis: var(--color-cm);
-  --color-cm-background-soft: var(--color-cm-12);
-  --color-cm-background-soft-emphasis: var(--color-cm-24);
-
-  /* === Dark go colors === */
-  --color-go-foreground: var(--color-go-lighten-5);
-  --color-go-foreground-emphasis: var(--color-go-lighten-6);
-  --color-go-foreground-onfill: var(--color-white);
-  --color-go-background-fill: var(--color-go-darken-1);
-  --color-go-background-fill-emphasis: var(--color-go);
-  --color-go-background-soft: var(--color-go-16);
-  --color-go-background-soft-emphasis: var(--color-go-24);
-
-  /* === Dark cir colors === */
-  --color-cir-foreground: var(--color-cir);
-  --color-cir-foreground-emphasis: var(--color-cir-lighten-3);
-  --color-cir-foreground-onfill: var(--color-cir-darken-6);
-  --color-cir-background-fill: var(--color-cir-darken-1);
-  --color-cir-background-fill-emphasis: var(--color-cir);
-  --color-cir-background-soft: var(--color-cir-8);
-  --color-cir-background-soft-emphasis: var(--color-cir-16);
-
-  /* === Dark ped colors === */
-  --color-ped-foreground: var(--color-ped);
-  --color-ped-foreground-emphasis: var(--color-ped-lighten-1);
-  --color-ped-foreground-onfill: var(--color-ped-darken-7);
-  --color-ped-background-fill: var(--color-ped);
-  --color-ped-background-fill-emphasis: var(--color-ped-lighten-1);
-  --color-ped-background-soft: var(--color-ped-8);
-  --color-ped-background-soft-emphasis: var(--color-ped-16);
-
-  /* === Dark prev colors === */
-  --color-prev-foreground: var(--color-prev-lighten-5);
-  --color-prev-foreground-emphasis: var(--color-prev-lighten-6);
-  --color-prev-foreground-onfill: var(--color-white);
-  --color-prev-background-fill: var(--color-prev-darken-1);
-  --color-prev-background-fill-emphasis: var(--color-prev);
-  --color-prev-background-soft: var(--color-prev-24);
-  --color-prev-background-soft-emphasis: var(--color-prev-48);
-
-  /* === Dark primary colors === */
-  --color-primary-foreground: var(--color-gray-100);
-  --color-primary-foreground-emphasis: var(--color-white);
-  --color-primary-foreground-muted: var(--color-gray-200);
-  --color-primary-foreground-onfill: var(--color-primary);
-  --color-primary-stroke: var(--color-gray-100);
-  --color-primary-stroke-emphasis: var(--color-white);
-  --color-primary-background-fill: var(--color-gray-70);
-  --color-primary-background-fill-emphasis: var(--color-white);
-  --color-primary-background-soft: var(--color-white-8);
-  --color-primary-background-soft-emphasis: var(--color-white-16);
-  --color-primary-background-soft-muted: var(--color-white-12);
-
-  /* === Dark secondary colors === */
-  --color-secondary-foreground: var(--color-secondary-lighten-1);
-  --color-secondary-foreground-emphasis: var(--color-secondary-lighten-2);
-  --color-secondary-foreground-muted: var(--color-secondary);
-  --color-secondary-foreground-onfill: var(--color-secondary-darken-6);
-  --color-secondary-stroke: var(--color-secondary-darken-1);
-  --color-secondary-stroke-emphasis: var(--color-secondary);
-  --color-secondary-background-fill: var(--color-secondary-darken-1);
-  --color-secondary-background-fill-emphasis: var(--color-secondary);
-  --color-secondary-background-soft: var(--color-secondary-8);
-  --color-secondary-background-soft-emphasis: var(--color-secondary-24);
-  --color-secondary-background-soft-muted: var(--color-secondary-12);
-
-  /* === Dark gradient base === */
-  --color-gradient-base-blur-1: var(--color-primary-lighten-3);
-  --color-gradient-base-blur-2: var(--color-secondary-darken-1);
-  --color-gradient-base-blur-3: var(--color-secondary);
-  --color-gradient-base-bg-1: var(--color-primary-darken-1);
-  --color-gradient-base-bg-2: var(--color-primary-darken-2);
-
-  /* === Dark gradient cir === */
-  --color-gradient-cir-blur-1: var(--color-cir-darken-1);
-  --color-gradient-cir-blur-2: var(--color-cir-darken-2);
-  --color-gradient-cir-blur-3: var(--color-cir-darken-3);
-  --color-gradient-cir-bg-1: var(--color-cir-darken-5);
-  --color-gradient-cir-bg-2: var(--color-cir-darken-6);
-
-  /* === Dark gradient cm === */
-  --color-gradient-cm-blur-1: var(--color-cm);
-  --color-gradient-cm-blur-2: var(--color-cm-darken-1);
-  --color-gradient-cm-blur-3: var(--color-cm-darken-2);
-  --color-gradient-cm-bg-1: var(--color-cm-darken-4);
-  --color-gradient-cm-bg-2: var(--color-cm-darken-6);
-
-  /* === Dark gradient go === */
-  --color-gradient-go-blur-1: var(--color-go-lighten-2);
-  --color-gradient-go-blur-2: var(--color-go);
-  --color-gradient-go-blur-3: var(--color-go-darken-2);
-  --color-gradient-go-bg-1: var(--color-go-darken-3);
-  --color-gradient-go-bg-2: var(--color-go-darken-5);
-
-  /* === Dark gradient ped === */
-  --color-gradient-ped-blur-1: var(--color-ped);
-  --color-gradient-ped-blur-2: var(--color-ped-darken-3);
-  --color-gradient-ped-blur-3: var(--color-ped-darken-5);
-  --color-gradient-ped-bg-1: var(--color-ped-darken-4);
-  --color-gradient-ped-bg-2: var(--color-yellow-darken-6);
-
-  /* === Dark gradient prev === */
-  --color-gradient-prev-blur-1: var(--color-prev-lighten-1);
-  --color-gradient-prev-blur-2: var(--color-prev);
-  --color-gradient-prev-blur-3: var(--color-prev-darken-1);
-  --color-gradient-prev-bg-1: var(--color-prev-darken-2);
-  --color-gradient-prev-bg-2: var(--color-prev-darken-4);
-
-  /* === Dark gradient r1 === */
-  --color-gradient-r1-blur-1: var(--color-secondary);
-  --color-gradient-r1-blur-2: var(--color-primary-lighten-1);
-  --color-gradient-r1-blur-3: var(--color-primary-lighten-2);
-  --color-gradient-r1-bg-1: var(--color-primary);
-  --color-gradient-r1-bg-2: var(--color-primary-darken-2);
-
-  /* === Dark gradient rplus === */
-  --color-gradient-rplus-blur-1: var(--color-primary-lighten-5);
-  --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
-  --color-gradient-rplus-blur-3: var(--color-primary-lighten-1);
-  --color-gradient-rplus-bg-1: var(--color-primary);
-  --color-gradient-rplus-bg-2: var(--color-primary-darken-2);
-
-  /* === Dark gradient pt === */
-  --color-gradient-pt-blur-1: var(--color-secondary);
-  --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
-  --color-gradient-pt-blur-3: var(--color-secondary-darken-3);
-  --color-gradient-pt-bg-1: var(--color-gray-800);
-  --color-gradient-pt-bg-2: var(--color-gray-900);
+/*
+ * Dark values go in a `prefers-color-scheme` query on `:root`: NativeWind
+ * compiles it into the dark value of each root variable, which follows the
+ * global color scheme. A bare `.dark` — or `.dark:root`, since the
+ * `darkMode: class` flag is only declared later, by `@tailwind base` — is
+ * compiled as a class that only reaches descendants of a `className="dark"`
+ * View, and adding that class after the first render remounts the subtree.
+ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* === Dark base colors === */
+    --color-background: var(--color-gray-850);
+    --color-foreground: var(--color-white);
+    --color-ring: var(--color-gray-500);
+    --color-backdrop: rgba(16, 19, 24, 0.5);
+
+    /* === Dark state colors === */
+    --color-state-hover: var(--color-gray-800);
+    --color-state-focus: var(--color-gray-700);
+    --color-state-active: var(--color-white-16);
+    --color-state-error: var(--color-red-16);
+
+    /* === Base feedback success colors === */
+    --color-feedback-success-foreground: var(--color-green-lighten-4);
+    --color-feedback-success-foreground-emphasis: var(--color-green-lighten-6);
+    --color-feedback-success-foreground-onfill: var(--color-white);
+    --color-feedback-success-stroke: var(--color-green-darken-2);
+    --color-feedback-success-stroke-emphasis: var(--color-green);
+    --color-feedback-success-background-fill: var(--color-green-darken-3);
+    --color-feedback-success-background-fill-emphasis: var(
+      --color-green-darken-2
+    );
+    --color-feedback-success-background-soft: var(--color-green-8);
+    --color-feedback-success-background-soft-emphasis: var(--color-green-24);
+    --color-feedback-success-background-soft-muted: var(--color-green-16);
+
+    /* === Base feedback error colors === */
+    --color-feedback-error-foreground: var(--color-red-lighten-3);
+    --color-feedback-error-foreground-emphasis: var(--color-red-lighten-4);
+    --color-feedback-error-foreground-onfill: var(--color-white);
+    --color-feedback-error-stroke: var(--color-red-darken-1);
+    --color-feedback-error-stroke-emphasis: var(--color-red);
+    --color-feedback-error-background-fill: var(--color-red-darken-2);
+    --color-feedback-error-background-fill-emphasis: var(--color-red-darken-1);
+    --color-feedback-error-background-soft: var(--color-red-12);
+    --color-feedback-error-background-soft-emphasis: var(--color-red-24);
+    --color-feedback-error-background-soft-muted: var(--color-red-16);
+
+    /* === Base feedback warning colors === */
+    --color-feedback-warning-foreground: var(--color-yellow-lighten-2);
+    --color-feedback-warning-foreground-emphasis: var(--color-yellow-lighten-4);
+    --color-feedback-warning-foreground-onfill: var(--color-yellow-darken-5);
+    --color-feedback-warning-stroke: var(--color-yellow);
+    --color-feedback-warning-stroke-emphasis: var(--color-yellow-lighten-1);
+    --color-feedback-warning-background-fill: var(--color-yellow);
+    --color-feedback-warning-background-fill-emphasis: var(
+      --color-yellow-lighten-2
+    );
+    --color-feedback-warning-background-soft: var(--color-yellow-8);
+    --color-feedback-warning-background-soft-emphasis: var(--color-yellow-24);
+    --color-feedback-warning-background-soft-muted: var(--color-yellow-16);
+
+    /* === Base content colors === */
+    --color-content-title: var(--color-white);
+    --color-content-paragraph: var(--color-gray-150);
+    --color-content-link: var(--color-secondary);
+
+    /* === Dark surface colors === */
+    --color-surface-elevated: var(--color-gray-800);
+    --color-surface-card: var(--color-gray-850);
+    --color-surface-navigation: var(--color-gray-850);
+    --color-surface-section: var(--color-gray-900);
+    --color-surface-page: var(--color-gray-950);
+    --color-surface-disable: var(--color-black-8);
+    --color-surface-settings-on: var(--color-black-48);
+    --color-surface-settings-off: var(--color-gray-950);
+
+    /* === Dark drop-shadow colors === */
+    --color-drop-shadow-layer-a: var(--color-black-24);
+    --color-drop-shadow-layer-b: var(--color-black-16);
+    --color-drop-shadow-subtle-layer-a: var(--color-drop-shadow-layer-a);
+    --color-drop-shadow-subtle-layer-b: var(--color-drop-shadow-layer-b);
+
+    /* === Dark gray colors === */
+    --color-gray-foreground: var(--color-gray-100);
+    --color-gray-foreground-emphasis: var(--color-white);
+    --color-gray-foreground-muted: var(--color-gray-150);
+    --color-gray-foreground-onfill: var(--color-gray-700);
+    --color-gray-stroke: var(--color-gray-600);
+    --color-gray-stroke-emphasis: var(--color-gray-500);
+    --color-gray-stroke-muted: var(--color-gray-700);
+    --color-gray-background-fill: var(--color-gray-100);
+    --color-gray-background-fill-emphasis: var(--color-gray-30);
+    --color-gray-background-fill-muted: var(--color-gray-300);
+    --color-gray-background-soft: var(--color-gray-800);
+    --color-gray-background-soft-emphasis: var(--color-gray-600);
+    --color-gray-background-soft-muted: var(--color-gray-700);
+
+    /* === Dark green colors === */
+    --color-green-foreground: var(--color-green-lighten-4);
+    --color-green-foreground-emphasis: var(--color-green-lighten-6);
+    --color-green-foreground-onfill: var(--color-white);
+    --color-green-stroke: var(--color-green-darken-2);
+    --color-green-stroke-emphasis: var(--color-green);
+    --color-green-background-fill: var(--color-green-darken-3);
+    --color-green-background-fill-emphasis: var(--color-green-darken-2);
+    --color-green-background-soft: var(--color-green-8);
+    --color-green-background-soft-emphasis: var(--color-green-24);
+    --color-green-background-soft-muted: var(--color-green-16);
+
+    /* === Dark red colors === */
+    --color-red-foreground: var(--color-red-lighten-3);
+    --color-red-foreground-emphasis: var(--color-red-lighten-4);
+    --color-red-foreground-onfill: var(--color-white);
+    --color-red-stroke: var(--color-red-darken-1);
+    --color-red-stroke-emphasis: var(--color-red);
+    --color-red-background-fill: var(--color-red-darken-2);
+    --color-red-background-fill-emphasis: var(--color-red-darken-1);
+    --color-red-background-soft: var(--color-red-12);
+    --color-red-background-soft-emphasis: var(--color-red-24);
+    --color-red-background-soft-muted: var(--color-red-16);
+
+    /* === Dark yellow colors === */
+    --color-yellow-foreground: var(--color-yellow-lighten-2);
+    --color-yellow-foreground-emphasis: var(--color-yellow-lighten-4);
+    --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
+    --color-yellow-stroke: var(--color-yellow);
+    --color-yellow-stroke-emphasis: var(--color-yellow-lighten-1);
+    --color-yellow-background-fill: var(--color-yellow);
+    --color-yellow-background-fill-emphasis: var(--color-yellow-lighten-2);
+    --color-yellow-background-soft: var(--color-yellow-8);
+    --color-yellow-background-soft-emphasis: var(--color-yellow-24);
+    --color-yellow-background-soft-muted: var(--color-yellow-16);
+
+    /* === Dark cm colors === */
+    --color-cm-foreground: var(--color-cm-lighten-4);
+    --color-cm-foreground-emphasis: var(--color-cm-lighten-6);
+    --color-cm-foreground-onfill: var(--color-white);
+    --color-cm-background-fill: var(--color-cm-darken-2);
+    --color-cm-background-fill-emphasis: var(--color-cm);
+    --color-cm-background-soft: var(--color-cm-12);
+    --color-cm-background-soft-emphasis: var(--color-cm-24);
+
+    /* === Dark go colors === */
+    --color-go-foreground: var(--color-go-lighten-5);
+    --color-go-foreground-emphasis: var(--color-go-lighten-6);
+    --color-go-foreground-onfill: var(--color-white);
+    --color-go-background-fill: var(--color-go-darken-1);
+    --color-go-background-fill-emphasis: var(--color-go);
+    --color-go-background-soft: var(--color-go-16);
+    --color-go-background-soft-emphasis: var(--color-go-24);
+
+    /* === Dark cir colors === */
+    --color-cir-foreground: var(--color-cir);
+    --color-cir-foreground-emphasis: var(--color-cir-lighten-3);
+    --color-cir-foreground-onfill: var(--color-cir-darken-6);
+    --color-cir-background-fill: var(--color-cir-darken-1);
+    --color-cir-background-fill-emphasis: var(--color-cir);
+    --color-cir-background-soft: var(--color-cir-8);
+    --color-cir-background-soft-emphasis: var(--color-cir-16);
+
+    /* === Dark ped colors === */
+    --color-ped-foreground: var(--color-ped);
+    --color-ped-foreground-emphasis: var(--color-ped-lighten-1);
+    --color-ped-foreground-onfill: var(--color-ped-darken-7);
+    --color-ped-background-fill: var(--color-ped);
+    --color-ped-background-fill-emphasis: var(--color-ped-lighten-1);
+    --color-ped-background-soft: var(--color-ped-8);
+    --color-ped-background-soft-emphasis: var(--color-ped-16);
+
+    /* === Dark prev colors === */
+    --color-prev-foreground: var(--color-prev-lighten-5);
+    --color-prev-foreground-emphasis: var(--color-prev-lighten-6);
+    --color-prev-foreground-onfill: var(--color-white);
+    --color-prev-background-fill: var(--color-prev-darken-1);
+    --color-prev-background-fill-emphasis: var(--color-prev);
+    --color-prev-background-soft: var(--color-prev-24);
+    --color-prev-background-soft-emphasis: var(--color-prev-48);
+
+    /* === Dark primary colors === */
+    --color-primary-foreground: var(--color-gray-100);
+    --color-primary-foreground-emphasis: var(--color-white);
+    --color-primary-foreground-muted: var(--color-gray-200);
+    --color-primary-foreground-onfill: var(--color-primary);
+    --color-primary-stroke: var(--color-gray-100);
+    --color-primary-stroke-emphasis: var(--color-white);
+    --color-primary-background-fill: var(--color-gray-70);
+    --color-primary-background-fill-emphasis: var(--color-white);
+    --color-primary-background-soft: var(--color-white-8);
+    --color-primary-background-soft-emphasis: var(--color-white-16);
+    --color-primary-background-soft-muted: var(--color-white-12);
+
+    /* === Dark secondary colors === */
+    --color-secondary-foreground: var(--color-secondary-lighten-1);
+    --color-secondary-foreground-emphasis: var(--color-secondary-lighten-2);
+    --color-secondary-foreground-muted: var(--color-secondary);
+    --color-secondary-foreground-onfill: var(--color-secondary-darken-6);
+    --color-secondary-stroke: var(--color-secondary-darken-1);
+    --color-secondary-stroke-emphasis: var(--color-secondary);
+    --color-secondary-background-fill: var(--color-secondary-darken-1);
+    --color-secondary-background-fill-emphasis: var(--color-secondary);
+    --color-secondary-background-soft: var(--color-secondary-8);
+    --color-secondary-background-soft-emphasis: var(--color-secondary-24);
+    --color-secondary-background-soft-muted: var(--color-secondary-12);
+
+    /* === Dark gradient base === */
+    --color-gradient-base-blur-1: var(--color-primary-lighten-3);
+    --color-gradient-base-blur-2: var(--color-secondary-darken-1);
+    --color-gradient-base-blur-3: var(--color-secondary);
+    --color-gradient-base-bg-1: var(--color-primary-darken-1);
+    --color-gradient-base-bg-2: var(--color-primary-darken-2);
+
+    /* === Dark gradient cir === */
+    --color-gradient-cir-blur-1: var(--color-cir-darken-1);
+    --color-gradient-cir-blur-2: var(--color-cir-darken-2);
+    --color-gradient-cir-blur-3: var(--color-cir-darken-3);
+    --color-gradient-cir-bg-1: var(--color-cir-darken-5);
+    --color-gradient-cir-bg-2: var(--color-cir-darken-6);
+
+    /* === Dark gradient cm === */
+    --color-gradient-cm-blur-1: var(--color-cm);
+    --color-gradient-cm-blur-2: var(--color-cm-darken-1);
+    --color-gradient-cm-blur-3: var(--color-cm-darken-2);
+    --color-gradient-cm-bg-1: var(--color-cm-darken-4);
+    --color-gradient-cm-bg-2: var(--color-cm-darken-6);
+
+    /* === Dark gradient go === */
+    --color-gradient-go-blur-1: var(--color-go-lighten-2);
+    --color-gradient-go-blur-2: var(--color-go);
+    --color-gradient-go-blur-3: var(--color-go-darken-2);
+    --color-gradient-go-bg-1: var(--color-go-darken-3);
+    --color-gradient-go-bg-2: var(--color-go-darken-5);
+
+    /* === Dark gradient ped === */
+    --color-gradient-ped-blur-1: var(--color-ped);
+    --color-gradient-ped-blur-2: var(--color-ped-darken-3);
+    --color-gradient-ped-blur-3: var(--color-ped-darken-5);
+    --color-gradient-ped-bg-1: var(--color-ped-darken-4);
+    --color-gradient-ped-bg-2: var(--color-yellow-darken-6);
+
+    /* === Dark gradient prev === */
+    --color-gradient-prev-blur-1: var(--color-prev-lighten-1);
+    --color-gradient-prev-blur-2: var(--color-prev);
+    --color-gradient-prev-blur-3: var(--color-prev-darken-1);
+    --color-gradient-prev-bg-1: var(--color-prev-darken-2);
+    --color-gradient-prev-bg-2: var(--color-prev-darken-4);
+
+    /* === Dark gradient r1 === */
+    --color-gradient-r1-blur-1: var(--color-secondary);
+    --color-gradient-r1-blur-2: var(--color-primary-lighten-1);
+    --color-gradient-r1-blur-3: var(--color-primary-lighten-2);
+    --color-gradient-r1-bg-1: var(--color-primary);
+    --color-gradient-r1-bg-2: var(--color-primary-darken-2);
+
+    /* === Dark gradient rplus === */
+    --color-gradient-rplus-blur-1: var(--color-primary-lighten-5);
+    --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
+    --color-gradient-rplus-blur-3: var(--color-primary-lighten-1);
+    --color-gradient-rplus-bg-1: var(--color-primary);
+    --color-gradient-rplus-bg-2: var(--color-primary-darken-2);
+
+    /* === Dark gradient pt === */
+    --color-gradient-pt-blur-1: var(--color-secondary);
+    --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
+    --color-gradient-pt-blur-3: var(--color-secondary-darken-3);
+    --color-gradient-pt-bg-1: var(--color-gray-800);
+    --color-gradient-pt-bg-2: var(--color-gray-900);
+  }
 }

package/src/components/Alert.tsx

@@ -96,7 +96,9 @@ function Alert({ className, variant = "regular", onClose, children, ...props }:
         {onClose && (
           <Pressable
             onPress={onClose}
-            accessibilityLabel="Close alert"
+            accessibilityRole="button"
+            accessibilityLabel="Fechar"
+            hitSlop={14}
             className="absolute right-4 top-2"
           >
             {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}

package/src/components/AlertDialog.tsx

@@ -124,7 +124,7 @@ function AlertDialogPortal({ ...props }: AlertDialogPrimitive.PortalProps) {
 function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.OverlayProps) {
   return (
     <AlertDialogPrimitive.Overlay
-      className={cn("absolute inset-0 bg-black/50", className)}
+      className={cn("absolute inset-0 bg-black-48", className)}
       {...props}
     />
   );
@@ -142,7 +142,7 @@ function AlertDialogContent({
   return (
     <AlertDialogPrimitive.Portal>
       <AlertDialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black/50", overlayClassName)}
+        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
       />
       <AlertDialogPrimitive.Content
         className="absolute inset-0 items-center justify-center px-4"
@@ -156,7 +156,12 @@ function AlertDialogContent({
         >
           {children}
           {showCloseButton && (
-            <AlertDialogPrimitive.Cancel className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft">
+            <AlertDialogPrimitive.Cancel
+              accessibilityRole="button"
+              accessibilityLabel="Fechar"
+              hitSlop={8}
+              className="absolute right-3 top-3 rounded-pill p-1.5 active:bg-gray-background-soft"
+            >
               {closeIconColor && <CloseMd width={16} height={16} color={closeIconColor} />}
             </AlertDialogPrimitive.Cancel>
           )}