feat: Variate Separator thinkness

packages/ui/src/components/Header/Header.tsx

@@ -1,6 +1,8 @@
 import React, { memo } from 'react';
 
+import { Separator } from '../Separator/Separator';
 import { Text } from '../Text/Text';
+import { VStack } from '../VStack/VStack';
 
 import type { TextProps, TextType, TextSize } from '../Text/Text';
 
@@ -19,7 +21,14 @@ export interface HeaderProps extends Omit<TextProps, 'as'> {
  * typography variants in the design system, ensuring accessibility
  * and visual consistency.
  */
-export const Header = memo(function Header({ level, type, size, children, ...props }: HeaderProps) {
+export const Header = memo(function Header({
+  level,
+  type,
+  size,
+  children,
+  className,
+  ...props
+}: HeaderProps) {
   // Default mappings from level to type and size
   const levelMapping: Record<number, { type: TextType; size: TextSize }> = {
     1: { type: 'display', size: 'l' },
@@ -41,9 +50,26 @@ export const Header = memo(function Header({ level, type, size, children, ...pro
   } as const;
   const Tag = tags[level];
 
-  return (
-    <Text as={Tag} size={size ?? defaultStyles.size} type={type ?? defaultStyles.type} {...props}>
+  const content = (
+    <Text
+      as={Tag}
+      className={className}
+      size={size ?? defaultStyles.size}
+      type={type ?? defaultStyles.type}
+      {...props}
+    >
       {children}
     </Text>
   );
+
+  if (level <= 2) {
+    return (
+      <VStack className="w-fit" gap={0.5}>
+        {content}
+        <Separator thinned="thinned-end" />
+      </VStack>
+    );
+  }
+
+  return content;
 });

packages/ui/src/components/Separator/Separator.tsx

@@ -35,14 +35,14 @@ const THINNED_TYPE_CLASSES: Record<
   Record<Exclude<SeparatorThinnedType, 'none'>, string>
 > = {
   horizontal: {
-    thinned: '[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]',
-    'thinned-start': '[mask-image:linear-gradient(to_right,transparent,black_10%,black)]',
-    'thinned-end': '[mask-image:linear-gradient(to_right,black,black_90%,transparent)]',
+    thinned: '[mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)]',
+    'thinned-start': '[mask-image:linear-gradient(to_right,transparent,black_20%,black)]',
+    'thinned-end': '[mask-image:linear-gradient(to_right,black,black_80%,transparent)]',
   },
   vertical: {
-    thinned: '[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]',
-    'thinned-start': '[mask-image:linear-gradient(to_bottom,transparent,black_10%,black)]',
-    'thinned-end': '[mask-image:linear-gradient(to_bottom,black,black_90%,transparent)]',
+    thinned: '[mask-image:linear-gradient(to_bottom,transparent,black_20%,black_80%,transparent)]',
+    'thinned-start': '[mask-image:linear-gradient(to_bottom,transparent,black_20%,black)]',
+    'thinned-end': '[mask-image:linear-gradient(to_bottom,black,black_80%,transparent)]',
   },
 };
 
@@ -54,29 +54,11 @@ const THINNED_TYPE_CLASSES: Record<
  * - Multiple color options (black, outline, outline-light) with theme support
  * - Horizontal and vertical orientations
  * - Optional thinned gradient fade effect at line ends ('thinned', 'thinned-start', 'thinned-end', 'none')
- * - 2px stroke width following print design standards
+ * - 1px stroke width for subtle division
  * - Semantic HTML with proper ARIA attributes for accessibility
  *
  * The component uses CSS mask-image for the thinned effect and CSS custom properties
  * for theme-aware colors. Double separators have 4px spacing between lines.
- *
- * @example
- * ```tsx
- * // Basic horizontal separator (defaults to thinned)
- * <Separator />
- *
- * // Double-line separator with black color
- * <Separator type="double" color="black" />
- *
- * // Vertical separator without thinned ends
- * <Separator direction="vertical" thinned="none" />
- *
- * // Separator with only the end thinned
- * <Separator thinned="thinned-end" />
- *
- * // Light separator for subtle content division
- * <Separator color="outline-light" />
- * ```
  */
 export const Separator = memo(function Separator({
   type = 'single',
@@ -93,8 +75,8 @@ export const Separator = memo(function Separator({
   // Color mapping to CSS custom properties
   const colorClasses = {
     black: 'border-foreground',
-    outline: 'border-border',
-    'outline-light': 'border-muted',
+    outline: 'border-[var(--rb-outline)]',
+    'outline-light': 'border-[var(--rb-outline)]/40',
   };
 
   // Base line styles
@@ -102,8 +84,8 @@ export const Separator = memo(function Separator({
     'border-0',
     'border-solid',
     colorClasses[finalColor],
-    // 2px stroke as specified
-    direction === 'horizontal' ? 'border-t-2' : 'border-l-2',
+    // 1px stroke for subtler appearance
+    direction === 'horizontal' ? 'border-t' : 'border-l',
   ];
 
   // Thinned effect using CSS mask