@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/whatsapp-template.js

@@ -0,0 +1,69 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon, MoreVerticalIcon, PhoneIcon, ReplyIcon } from "./internal/icons.js";
+import { useWhatsAppPlatform } from "./internal/whatsapp.js";
+function WhatsAppTemplate(_a) {
+  var _b = _a, {
+    children,
+    header = "none",
+    headerText,
+    image,
+    body,
+    footer,
+    time = "11:59",
+    platform,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "header",
+    "headerText",
+    "image",
+    "body",
+    "footer",
+    "time",
+    "platform",
+    "className"
+  ]);
+  const finalPlatform = useWhatsAppPlatform(platform);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: ["rds-whatsapp-template", `rds-whatsapp--${finalPlatform}`, className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: ["rds-whatsapp-template__content", header === "image" && "rds-whatsapp-template__content--image"].filter(Boolean).join(" "), children: [
+      header === "image" && /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-template__image", children: image }),
+      header === "text" && headerText && /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__header", children: headerText }),
+      /* @__PURE__ */ jsxs("div", { className: "rds-whatsapp-template__text", children: [
+        /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__body", children: body }),
+        footer && /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__footer", children: footer }),
+        /* @__PURE__ */ jsx("p", { className: "rds-whatsapp-template__time", children: time })
+      ] })
+    ] }),
+    children && /* @__PURE__ */ jsx("div", { className: "rds-whatsapp-template__buttons", children })
+  ] }));
+}
+const BUTTON_ICONS = {
+  "quick-reply": ReplyIcon,
+  url: ExternalLinkIcon,
+  phone: PhoneIcon,
+  "all-options": MoreVerticalIcon
+};
+function WhatsAppTemplateButton(_c) {
+  var _d = _c, { children, type = "quick-reply", status = "default", className } = _d, rest = __objRest(_d, ["children", "type", "status", "className"]);
+  const Icon = BUTTON_ICONS[type];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({}, rest), {
+      className: ["rds-whatsapp-template__button", status === "used" && "rds-whatsapp-template__button--used", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rds-whatsapp-template__button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsx("span", { children: children != null ? children : type === "all-options" ? "Ver todas as op\xE7\xF5es" : null })
+      ]
+    })
+  );
+}
+export {
+  WhatsAppTemplate,
+  WhatsAppTemplateButton
+};

package/dist/icons/index.d.ts

@@ -1 +1,3 @@
 export { AlertCircle, AlertTriangle, BarChart2, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, DollarSign, ExternalLink, FileText, GripVertical, House, Kanban, Layers, LayoutGrid, LayoutList, Loader2, LogOut, LucideIcon, LucideProps, Megaphone, Menu, MessagesSquare, Moon, Package, PanelLeftClose, PanelLeftOpen, Pencil, Plug, Plus, RefreshCw, Search, Settings, Star, Store, Sun, ThumbsUp, Trash2, Upload, Users, Wallet, X, Zap } from 'lucide-react';
+export { PixIcon, PixIconProps } from './pix.js';
+import 'react';

package/dist/icons/index.js

@@ -43,6 +43,7 @@ import {
   X,
   Zap
 } from "lucide-react";
+import { PixIcon } from "./pix.js";
 export {
   AlertCircle,
   AlertTriangle,
@@ -71,6 +72,7 @@ export {
   PanelLeftClose,
   PanelLeftOpen,
   Pencil,
+  PixIcon,
   Plug,
   Plus,
   RefreshCw,

package/dist/icons/pix.d.ts

@@ -0,0 +1,16 @@
+import 'lucide-react';
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+interface PixIconProps extends SVGProps<SVGSVGElement> {
+    /** Width and height in px. Default 16. */
+    size?: number;
+}
+/**
+ * The Pix symbol (Banco Central do Brasil), monochrome: it takes the text colour (currentColor), so it sits with
+ * the other payment-method icons. Decorative by default (aria-hidden); name it with aria-label and role="img" when
+ * it stands alone. The coloured version belongs to brand contexts, not to UI.
+ */
+declare function PixIcon({ size, ...props }: PixIconProps): react.JSX.Element;
+
+export { PixIcon, type PixIconProps };

package/dist/targets/native/components/index.d.ts

@@ -33,8 +33,6 @@ export { IconButton, IconButtonColor, IconButtonSize, IconButtonVariant } from '
 export { Search } from './search.js';
 export { FAB, FABProps, FABProvider, useFAB } from './fab.js';
 export { Accordion, AccordionItem, AccordionItemProps, AccordionProps } from './accordion.js';
-export { PaywallBanner, PaywallBannerProps } from './paywall-banner.js';
-export { PaywallContent, PaywallContentProps, PaywallIcon, PaywallReason } from './paywall.js';
 export { Menu, MenuItem } from './menu.js';
 export { ContextMenu } from './context-menu.js';
 export { Slider } from './slider.js';

package/dist/targets/native/components/index.js

@@ -34,8 +34,6 @@ import { IconButton } from "./icon-button.js";
 import { Search } from "./search.js";
 import { FAB, FABProvider, useFAB } from "./fab.js";
 import { Accordion, AccordionItem } from "./accordion.js";
-import { PaywallBanner } from "./paywall-banner.js";
-import { PaywallContent } from "./paywall.js";
 import { Menu, MenuItem } from "./menu.js";
 import { ContextMenu } from "./context-menu.js";
 import { Slider } from "./slider.js";
@@ -75,8 +73,6 @@ export {
   Menu,
   MenuItem,
   Modal,
-  PaywallBanner,
-  PaywallContent,
   Radio,
   RadioGroup,
   SavingBar,

package/dist/targets/native/preset.cjs

@@ -34,7 +34,6 @@ module.exports = {
                       "hover": "var(--ds-brand-hover)",
                       "secondary": "var(--ds-brand-secondary)",
                       "accent": "var(--ds-brand-accent)",
-                      "accent-light": "var(--ds-brand-accent-light)",
                       "on-primary": "var(--ds-brand-on-primary)",
                       "on-secondary": "var(--ds-brand-on-secondary)",
                       "on-accent": "var(--ds-brand-on-accent)"

package/dist/targets/native/theme.css

@@ -3,37 +3,36 @@
 /* Tema rojao resolvido (hex/rgba) para React Native via NativeWind. */
 
 :root {
-  --ds-border-control: #737373;
-  --ds-border-default: #d6d6d6;
-  --ds-border-focus: #0d0d0d;
-  --ds-border-strong: #b9b9b9;
-  --ds-border-subtle: #ededed;
-  --ds-brand-accent: #379c3d;
-  --ds-brand-accent-light: #f0ffef;
-  --ds-brand-hover: #3c3c3c;
-  --ds-brand-on-accent: #ffffff;
+  --ds-border-control: #71717a;
+  --ds-border-default: #e4e4e7;
+  --ds-border-focus: #1b2a4a;
+  --ds-border-strong: #d4d4d8;
+  --ds-border-subtle: #f4f4f5;
+  --ds-brand-accent: #ff6a00;
+  --ds-brand-hover: #26344f;
+  --ds-brand-on-accent: #000000;
   --ds-brand-on-primary: #ffffff;
-  --ds-brand-on-secondary: #0d0d0d;
-  --ds-brand-primary: #0d0d0d;
-  --ds-brand-primary-100: #ededed;
-  --ds-brand-primary-200: #d6d6d6;
-  --ds-brand-primary-300: #b9b9b9;
-  --ds-brand-primary-400: #979797;
-  --ds-brand-primary-50: #fafafa;
-  --ds-brand-primary-500: #737373;
-  --ds-brand-primary-600: #575757;
-  --ds-brand-primary-700: #3c3c3c;
-  --ds-brand-primary-800: #232323;
-  --ds-brand-primary-900: #0d0d0d;
-  --ds-brand-secondary: #ffffff;
+  --ds-brand-on-secondary: #ffffff;
+  --ds-brand-primary: #1b2a4a;
+  --ds-brand-primary-100: #e4e6ec;
+  --ds-brand-primary-200: #c9cdd8;
+  --ds-brand-primary-300: #aeb6c4;
+  --ds-brand-primary-400: #8a91a1;
+  --ds-brand-primary-50: #f4f6f9;
+  --ds-brand-primary-500: #6b7488;
+  --ds-brand-primary-600: #5a6478;
+  --ds-brand-primary-700: #3a465f;
+  --ds-brand-primary-800: #26344f;
+  --ds-brand-primary-900: #1b2a4a;
+  --ds-brand-secondary: #1b2a4a;
   --ds-brand-secondary-band: var(--brand-secondary);
   --ds-brand-secondary-surface: var(--brand-secondary);
-  --ds-brand-text: #0d0d0d;
+  --ds-brand-text: #1b2a4a;
   --ds-danger: #f44336;
   --ds-danger-border: #ef9a9a;
   --ds-danger-soft: #ffcdd2;
   --ds-danger-text: #991b1b;
-  --ds-icon-default: #232323;
+  --ds-icon-default: #27272a;
   --ds-info: #2196f3;
   --ds-info-border: #90caf9;
   --ds-info-soft: #bbdefb;
@@ -43,16 +42,16 @@
   --ds-success-soft: #c8e6c9;
   --ds-success-text: #1b5e20;
   --ds-surface-default: #ffffff;
-  --ds-surface-invert: #0d0d0d;
-  --ds-surface-overlay: #0d0d0d;
+  --ds-surface-invert: #18181b;
+  --ds-surface-overlay: #18181b;
   --ds-surface-page: #fafafa;
-  --ds-surface-raised: #ededed;
-  --ds-text-disabled: #979797;
+  --ds-surface-raised: #f4f4f5;
+  --ds-text-disabled: #a1a1aa;
   --ds-text-inverse: #ffffff;
-  --ds-text-muted: #575757;
-  --ds-text-placeholder: #575757;
-  --ds-text-primary: #0d0d0d;
-  --ds-text-secondary: #3c3c3c;
+  --ds-text-muted: #52525b;
+  --ds-text-placeholder: #52525b;
+  --ds-text-primary: #18181b;
+  --ds-text-secondary: #3f3f46;
   --ds-warning: #ffc107;
   --ds-warning-border: #ffe082;
   --ds-warning-soft: #ffecb3;
@@ -62,27 +61,26 @@
 .dark {
   --ds-border-control: rgba(255, 255, 255, 0.4);
   --ds-border-default: rgba(255, 255, 255, 0.14);
-  --ds-border-focus: #979797;
+  --ds-border-focus: #1b2a4a;
   --ds-border-strong: rgba(255, 255, 255, 0.22);
   --ds-border-subtle: rgba(255, 255, 255, 0.08);
-  --ds-brand-accent: #379c3d;
-  --ds-brand-accent-light: #f0ffef;
-  --ds-brand-hover: #ededed;
-  --ds-brand-on-accent: #ffffff;
-  --ds-brand-on-primary: #0d0d0d;
+  --ds-brand-accent: #ff6a00;
+  --ds-brand-hover: #26344f;
+  --ds-brand-on-accent: #000000;
+  --ds-brand-on-primary: #ffffff;
   --ds-brand-on-secondary: #ffffff;
-  --ds-brand-primary: #ffffff;
-  --ds-brand-primary-100: #ededed;
-  --ds-brand-primary-200: #d6d6d6;
-  --ds-brand-primary-300: #b9b9b9;
-  --ds-brand-primary-400: #979797;
-  --ds-brand-primary-50: #fafafa;
-  --ds-brand-primary-500: #737373;
-  --ds-brand-primary-600: #575757;
-  --ds-brand-primary-700: #3c3c3c;
-  --ds-brand-primary-800: #232323;
-  --ds-brand-primary-900: #0d0d0d;
-  --ds-brand-secondary: #0d0d0d;
+  --ds-brand-primary: #1b2a4a;
+  --ds-brand-primary-100: #e4e6ec;
+  --ds-brand-primary-200: #c9cdd8;
+  --ds-brand-primary-300: #aeb6c4;
+  --ds-brand-primary-400: #8a91a1;
+  --ds-brand-primary-50: #f4f6f9;
+  --ds-brand-primary-500: #6b7488;
+  --ds-brand-primary-600: #5a6478;
+  --ds-brand-primary-700: #3a465f;
+  --ds-brand-primary-800: #26344f;
+  --ds-brand-primary-900: #1b2a4a;
+  --ds-brand-secondary: #1b2a4a;
   --ds-brand-secondary-band: transparent;
   --ds-brand-secondary-surface: var(--surface-page);
   --ds-brand-text: #fafafa;
@@ -90,7 +88,7 @@
   --ds-danger-border: rgba(244, 67, 54, 0.4);
   --ds-danger-soft: rgba(244, 67, 54, 0.2);
   --ds-danger-text: #ef9a9a;
-  --ds-icon-default: #979797;
+  --ds-icon-default: #a1a1aa;
   --ds-info: #2196f3;
   --ds-info-border: rgba(33, 150, 243, 0.4);
   --ds-info-soft: rgba(33, 150, 243, 0.2);
@@ -99,17 +97,17 @@
   --ds-success-border: rgba(76, 175, 80, 0.4);
   --ds-success-soft: rgba(76, 175, 80, 0.2);
   --ds-success-text: #a5d6a7;
-  --ds-surface-default: #232323;
+  --ds-surface-default: #27272a;
   --ds-surface-invert: #fafafa;
-  --ds-surface-overlay: #d6d6d6;
-  --ds-surface-page: #0d0d0d;
-  --ds-surface-raised: #3c3c3c;
-  --ds-text-disabled: #575757;
-  --ds-text-inverse: #0d0d0d;
-  --ds-text-muted: #b9b9b9;
-  --ds-text-placeholder: #b9b9b9;
+  --ds-surface-overlay: #e4e4e7;
+  --ds-surface-page: #18181b;
+  --ds-surface-raised: #3f3f46;
+  --ds-text-disabled: #52525b;
+  --ds-text-inverse: #18181b;
+  --ds-text-muted: #d4d4d8;
+  --ds-text-placeholder: #d4d4d8;
   --ds-text-primary: #fafafa;
-  --ds-text-secondary: #d6d6d6;
+  --ds-text-secondary: #e4e4e7;
   --ds-warning: #ffc107;
   --ds-warning-border: rgba(255, 193, 7, 0.4);
   --ds-warning-soft: rgba(255, 193, 7, 0.2);

package/dist/targets/native/theme.d.ts

@@ -16,44 +16,43 @@ declare const dsTheme: {
         readonly "--info-soft": "#bbdefb";
         readonly "--info-border": "#90caf9";
         readonly "--info-text": "#1e40af";
-        readonly "--brand-primary-50": "#fafafa";
-        readonly "--brand-primary-100": "#ededed";
-        readonly "--brand-primary-200": "#d6d6d6";
-        readonly "--brand-primary-300": "#b9b9b9";
-        readonly "--brand-primary-400": "#979797";
-        readonly "--brand-primary-500": "#737373";
-        readonly "--brand-primary-600": "#575757";
-        readonly "--brand-primary-700": "#3c3c3c";
-        readonly "--brand-primary-800": "#232323";
-        readonly "--brand-primary-900": "#0d0d0d";
-        readonly "--brand-primary": "#0d0d0d";
-        readonly "--brand-hover": "#3c3c3c";
+        readonly "--brand-primary-50": "#f4f6f9";
+        readonly "--brand-primary-100": "#e4e6ec";
+        readonly "--brand-primary-200": "#c9cdd8";
+        readonly "--brand-primary-300": "#aeb6c4";
+        readonly "--brand-primary-400": "#8a91a1";
+        readonly "--brand-primary-500": "#6b7488";
+        readonly "--brand-primary-600": "#5a6478";
+        readonly "--brand-primary-700": "#3a465f";
+        readonly "--brand-primary-800": "#26344f";
+        readonly "--brand-primary-900": "#1b2a4a";
+        readonly "--brand-primary": "#1b2a4a";
+        readonly "--brand-hover": "#26344f";
         readonly "--brand-on-primary": "#ffffff";
-        readonly "--brand-secondary": "#ffffff";
-        readonly "--brand-on-secondary": "#0d0d0d";
+        readonly "--brand-secondary": "#1b2a4a";
+        readonly "--brand-on-secondary": "#ffffff";
         readonly "--brand-secondary-surface": "var(--brand-secondary)";
         readonly "--brand-secondary-band": "var(--brand-secondary)";
-        readonly "--brand-accent": "#379c3d";
-        readonly "--brand-accent-light": "#f0ffef";
-        readonly "--brand-on-accent": "#ffffff";
+        readonly "--brand-accent": "#ff6a00";
+        readonly "--brand-on-accent": "#000000";
         readonly "--surface-page": "#fafafa";
         readonly "--surface-default": "#ffffff";
-        readonly "--surface-raised": "#ededed";
-        readonly "--surface-overlay": "#0d0d0d";
-        readonly "--surface-invert": "#0d0d0d";
-        readonly "--border-subtle": "#ededed";
-        readonly "--border-default": "#d6d6d6";
-        readonly "--border-strong": "#b9b9b9";
-        readonly "--border-control": "#737373";
-        readonly "--border-focus": "#0d0d0d";
-        readonly "--brand-text": "#0d0d0d";
-        readonly "--text-primary": "#0d0d0d";
-        readonly "--text-secondary": "#3c3c3c";
-        readonly "--text-muted": "#575757";
-        readonly "--text-disabled": "#979797";
+        readonly "--surface-raised": "#f4f4f5";
+        readonly "--surface-overlay": "#18181b";
+        readonly "--surface-invert": "#18181b";
+        readonly "--border-subtle": "#f4f4f5";
+        readonly "--border-default": "#e4e4e7";
+        readonly "--border-strong": "#d4d4d8";
+        readonly "--border-control": "#71717a";
+        readonly "--border-focus": "#1b2a4a";
+        readonly "--brand-text": "#1b2a4a";
+        readonly "--text-primary": "#18181b";
+        readonly "--text-secondary": "#3f3f46";
+        readonly "--text-muted": "#52525b";
+        readonly "--text-disabled": "#a1a1aa";
         readonly "--text-inverse": "#ffffff";
-        readonly "--text-placeholder": "#575757";
-        readonly "--icon-default": "#232323";
+        readonly "--text-placeholder": "#52525b";
+        readonly "--icon-default": "#27272a";
     };
     readonly dark: {
         readonly "--danger": "#f44336";
@@ -72,44 +71,43 @@ declare const dsTheme: {
         readonly "--info-soft": "rgba(33, 150, 243, 0.2)";
         readonly "--info-border": "rgba(33, 150, 243, 0.4)";
         readonly "--info-text": "#90caf9";
-        readonly "--brand-primary-50": "#fafafa";
-        readonly "--brand-primary-100": "#ededed";
-        readonly "--brand-primary-200": "#d6d6d6";
-        readonly "--brand-primary-300": "#b9b9b9";
-        readonly "--brand-primary-400": "#979797";
-        readonly "--brand-primary-500": "#737373";
-        readonly "--brand-primary-600": "#575757";
-        readonly "--brand-primary-700": "#3c3c3c";
-        readonly "--brand-primary-800": "#232323";
-        readonly "--brand-primary-900": "#0d0d0d";
-        readonly "--brand-primary": "#ffffff";
-        readonly "--brand-hover": "#ededed";
-        readonly "--brand-on-primary": "#0d0d0d";
-        readonly "--brand-secondary": "#0d0d0d";
+        readonly "--brand-primary-50": "#f4f6f9";
+        readonly "--brand-primary-100": "#e4e6ec";
+        readonly "--brand-primary-200": "#c9cdd8";
+        readonly "--brand-primary-300": "#aeb6c4";
+        readonly "--brand-primary-400": "#8a91a1";
+        readonly "--brand-primary-500": "#6b7488";
+        readonly "--brand-primary-600": "#5a6478";
+        readonly "--brand-primary-700": "#3a465f";
+        readonly "--brand-primary-800": "#26344f";
+        readonly "--brand-primary-900": "#1b2a4a";
+        readonly "--brand-primary": "#1b2a4a";
+        readonly "--brand-hover": "#26344f";
+        readonly "--brand-on-primary": "#ffffff";
+        readonly "--brand-secondary": "#1b2a4a";
         readonly "--brand-on-secondary": "#ffffff";
         readonly "--brand-secondary-surface": "var(--surface-page)";
         readonly "--brand-secondary-band": "transparent";
-        readonly "--brand-accent": "#379c3d";
-        readonly "--brand-accent-light": "#f0ffef";
-        readonly "--brand-on-accent": "#ffffff";
-        readonly "--surface-page": "#0d0d0d";
-        readonly "--surface-default": "#232323";
-        readonly "--surface-raised": "#3c3c3c";
-        readonly "--surface-overlay": "#d6d6d6";
+        readonly "--brand-accent": "#ff6a00";
+        readonly "--brand-on-accent": "#000000";
+        readonly "--surface-page": "#18181b";
+        readonly "--surface-default": "#27272a";
+        readonly "--surface-raised": "#3f3f46";
+        readonly "--surface-overlay": "#e4e4e7";
         readonly "--surface-invert": "#fafafa";
         readonly "--border-subtle": "rgba(255, 255, 255, 0.08)";
         readonly "--border-default": "rgba(255, 255, 255, 0.14)";
         readonly "--border-strong": "rgba(255, 255, 255, 0.22)";
         readonly "--border-control": "rgba(255, 255, 255, 0.4)";
-        readonly "--border-focus": "#979797";
+        readonly "--border-focus": "#1b2a4a";
         readonly "--brand-text": "#fafafa";
         readonly "--text-primary": "#fafafa";
-        readonly "--text-secondary": "#d6d6d6";
-        readonly "--text-muted": "#b9b9b9";
-        readonly "--text-disabled": "#575757";
-        readonly "--text-inverse": "#0d0d0d";
-        readonly "--text-placeholder": "#b9b9b9";
-        readonly "--icon-default": "#979797";
+        readonly "--text-secondary": "#e4e4e7";
+        readonly "--text-muted": "#d4d4d8";
+        readonly "--text-disabled": "#52525b";
+        readonly "--text-inverse": "#18181b";
+        readonly "--text-placeholder": "#d4d4d8";
+        readonly "--icon-default": "#a1a1aa";
     };
 };
 type ThemeMap = Record<string, string>;

package/dist/targets/native/theme.js

@@ -17,44 +17,43 @@ const dsTheme = {
     "--info-soft": "#bbdefb",
     "--info-border": "#90caf9",
     "--info-text": "#1e40af",
-    "--brand-primary-50": "#fafafa",
-    "--brand-primary-100": "#ededed",
-    "--brand-primary-200": "#d6d6d6",
-    "--brand-primary-300": "#b9b9b9",
-    "--brand-primary-400": "#979797",
-    "--brand-primary-500": "#737373",
-    "--brand-primary-600": "#575757",
-    "--brand-primary-700": "#3c3c3c",
-    "--brand-primary-800": "#232323",
-    "--brand-primary-900": "#0d0d0d",
-    "--brand-primary": "#0d0d0d",
-    "--brand-hover": "#3c3c3c",
+    "--brand-primary-50": "#f4f6f9",
+    "--brand-primary-100": "#e4e6ec",
+    "--brand-primary-200": "#c9cdd8",
+    "--brand-primary-300": "#aeb6c4",
+    "--brand-primary-400": "#8a91a1",
+    "--brand-primary-500": "#6b7488",
+    "--brand-primary-600": "#5a6478",
+    "--brand-primary-700": "#3a465f",
+    "--brand-primary-800": "#26344f",
+    "--brand-primary-900": "#1b2a4a",
+    "--brand-primary": "#1b2a4a",
+    "--brand-hover": "#26344f",
     "--brand-on-primary": "#ffffff",
-    "--brand-secondary": "#ffffff",
-    "--brand-on-secondary": "#0d0d0d",
+    "--brand-secondary": "#1b2a4a",
+    "--brand-on-secondary": "#ffffff",
     "--brand-secondary-surface": "var(--brand-secondary)",
     "--brand-secondary-band": "var(--brand-secondary)",
-    "--brand-accent": "#379c3d",
-    "--brand-accent-light": "#f0ffef",
-    "--brand-on-accent": "#ffffff",
+    "--brand-accent": "#ff6a00",
+    "--brand-on-accent": "#000000",
     "--surface-page": "#fafafa",
     "--surface-default": "#ffffff",
-    "--surface-raised": "#ededed",
-    "--surface-overlay": "#0d0d0d",
-    "--surface-invert": "#0d0d0d",
-    "--border-subtle": "#ededed",
-    "--border-default": "#d6d6d6",
-    "--border-strong": "#b9b9b9",
-    "--border-control": "#737373",
-    "--border-focus": "#0d0d0d",
-    "--brand-text": "#0d0d0d",
-    "--text-primary": "#0d0d0d",
-    "--text-secondary": "#3c3c3c",
-    "--text-muted": "#575757",
-    "--text-disabled": "#979797",
+    "--surface-raised": "#f4f4f5",
+    "--surface-overlay": "#18181b",
+    "--surface-invert": "#18181b",
+    "--border-subtle": "#f4f4f5",
+    "--border-default": "#e4e4e7",
+    "--border-strong": "#d4d4d8",
+    "--border-control": "#71717a",
+    "--border-focus": "#1b2a4a",
+    "--brand-text": "#1b2a4a",
+    "--text-primary": "#18181b",
+    "--text-secondary": "#3f3f46",
+    "--text-muted": "#52525b",
+    "--text-disabled": "#a1a1aa",
     "--text-inverse": "#ffffff",
-    "--text-placeholder": "#575757",
-    "--icon-default": "#232323"
+    "--text-placeholder": "#52525b",
+    "--icon-default": "#27272a"
   },
   dark: {
     "--danger": "#f44336",
@@ -73,44 +72,43 @@ const dsTheme = {
     "--info-soft": "rgba(33, 150, 243, 0.2)",
     "--info-border": "rgba(33, 150, 243, 0.4)",
     "--info-text": "#90caf9",
-    "--brand-primary-50": "#fafafa",
-    "--brand-primary-100": "#ededed",
-    "--brand-primary-200": "#d6d6d6",
-    "--brand-primary-300": "#b9b9b9",
-    "--brand-primary-400": "#979797",
-    "--brand-primary-500": "#737373",
-    "--brand-primary-600": "#575757",
-    "--brand-primary-700": "#3c3c3c",
-    "--brand-primary-800": "#232323",
-    "--brand-primary-900": "#0d0d0d",
-    "--brand-primary": "#ffffff",
-    "--brand-hover": "#ededed",
-    "--brand-on-primary": "#0d0d0d",
-    "--brand-secondary": "#0d0d0d",
+    "--brand-primary-50": "#f4f6f9",
+    "--brand-primary-100": "#e4e6ec",
+    "--brand-primary-200": "#c9cdd8",
+    "--brand-primary-300": "#aeb6c4",
+    "--brand-primary-400": "#8a91a1",
+    "--brand-primary-500": "#6b7488",
+    "--brand-primary-600": "#5a6478",
+    "--brand-primary-700": "#3a465f",
+    "--brand-primary-800": "#26344f",
+    "--brand-primary-900": "#1b2a4a",
+    "--brand-primary": "#1b2a4a",
+    "--brand-hover": "#26344f",
+    "--brand-on-primary": "#ffffff",
+    "--brand-secondary": "#1b2a4a",
     "--brand-on-secondary": "#ffffff",
     "--brand-secondary-surface": "var(--surface-page)",
     "--brand-secondary-band": "transparent",
-    "--brand-accent": "#379c3d",
-    "--brand-accent-light": "#f0ffef",
-    "--brand-on-accent": "#ffffff",
-    "--surface-page": "#0d0d0d",
-    "--surface-default": "#232323",
-    "--surface-raised": "#3c3c3c",
-    "--surface-overlay": "#d6d6d6",
+    "--brand-accent": "#ff6a00",
+    "--brand-on-accent": "#000000",
+    "--surface-page": "#18181b",
+    "--surface-default": "#27272a",
+    "--surface-raised": "#3f3f46",
+    "--surface-overlay": "#e4e4e7",
     "--surface-invert": "#fafafa",
     "--border-subtle": "rgba(255, 255, 255, 0.08)",
     "--border-default": "rgba(255, 255, 255, 0.14)",
     "--border-strong": "rgba(255, 255, 255, 0.22)",
     "--border-control": "rgba(255, 255, 255, 0.4)",
-    "--border-focus": "#979797",
+    "--border-focus": "#1b2a4a",
     "--brand-text": "#fafafa",
     "--text-primary": "#fafafa",
-    "--text-secondary": "#d6d6d6",
-    "--text-muted": "#b9b9b9",
-    "--text-disabled": "#575757",
-    "--text-inverse": "#0d0d0d",
-    "--text-placeholder": "#b9b9b9",
-    "--icon-default": "#979797"
+    "--text-secondary": "#e4e4e7",
+    "--text-muted": "#d4d4d8",
+    "--text-disabled": "#52525b",
+    "--text-inverse": "#18181b",
+    "--text-placeholder": "#d4d4d8",
+    "--icon-default": "#a1a1aa"
   }
 };
 export {