tharaday 0.7.1 → 0.7.3

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -2,14 +2,9 @@ import type { ReactNode } from 'react';
 
 export interface SettingsLayoutProps {
   className?: string;
-  maxWidth?: string | number;
-  headerLogo?: ReactNode;
-  headerTitle?: string;
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
   breadcrumbs?: ReactNode;
   sidebar?: ReactNode;
   children: ReactNode;
-  user?: { name: string };
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
 }

package/src/styles/semantic.css

@@ -50,6 +50,9 @@
   --ds-border-default: var(--ds-border-1);
   --ds-surface-disabled: var(--ds-ref-surface-disabled);
 
+  /* Overlay */
+  --ds-overlay: rgba(0, 0, 0, 0.5);
+
   /* Skeleton */
   --ds-skeleton: var(--ds-ref-skeleton);
   --ds-skeleton-highlight: var(--ds-ref-skeleton-highlight);

package/src/styles/tokens.css

@@ -258,8 +258,19 @@
   --ds-space-14: 3.5rem; /* 56px */
   --ds-space-16: 4rem; /* 64px */
 
+  /* --- CONTENT WIDTH SCALE --- */
+
+  --ds-content-width-sm: 25rem; /* 400px — notifications, small modals */
+  --ds-content-width-md: 37.5rem; /* 600px — default modal */
+  --ds-content-width-lg: 50rem; /* 800px — large modal */
+  --ds-content-width-xl: 62.5rem; /* 1000px — xl modal */
+  --ds-content-width-2xl: 75rem; /* 1200px — page/nav max-width */
+
   /* --- BORDERS & SHADOWS --- */
 
+  --ds-border-width: 0.0625rem; /* 1px */
+  --ds-border-width-2: 0.125rem; /* 2px */
+
   --ds-radius-sm: 0.25rem;
   --ds-radius-md: 0.5rem;
   --ds-radius-lg: 1rem;
@@ -269,6 +280,10 @@
   --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
+  /* --- COMPONENT TOKENS --- */
+
+  --ds-checkbox-size: 1.125rem; /* 18px — checkbox and radio control box */
+
   /* --- ANIMATION --- */
 
   --ds-transition-fast: 150ms ease;