Update Divider component to replace 'black' color variant with 'base' for improved theme adaptability

- Changed all instances of 'black' to 'base' in the Divider component and its documentation to reflect the new high-contrast color that adapts to light and dark themes.
- Updated showcase page and styles to ensure consistency with the new color naming convention.

shared/components/Divider/Divider.md

@@ -8,7 +8,7 @@ The Divider component is a visual separator that creates clear boundaries betwee
 
 - **Two Orientations**: Horizontal (default) and Vertical
 - **Three Stroke Weights**: Thin (0.5px), Regular (1px), Strong (2px)
-- **Three Color Variants**: Gray (default), Black, Green
+- **Three Color Variants**: Gray (default), Base (adapts to theme), Green
 - **Theme Support**: Automatic light/dark mode adaptation
 - **Accessibility**: Configurable for decorative or semantic use
 - **Flexible Sizing**: Inherits width/height from parent container
@@ -21,8 +21,8 @@ interface DividerProps {
   orientation?: 'horizontal' | 'vertical';
   /** Stroke weight - controls visual thickness */
   weight?: 'thin' | 'regular' | 'strong';
-  /** Color variant - gray (default), black for stronger contrast, green for brand emphasis */
-  color?: 'gray' | 'black' | 'green';
+  /** Color variant - gray (default), base for high contrast (adapts to theme), green for brand emphasis */
+  color?: 'gray' | 'base' | 'green';
   /** Additional CSS classes */
   className?: string;
   /** Whether the divider is purely decorative (hides from screen readers) */
@@ -136,18 +136,18 @@ Neutral, subtle separation that works in most contexts without drawing attention
 <Divider />
 ```
 
-### Black
+### Base
 
-High-contrast separation for maximum visibility. In dark mode, this renders as white for proper contrast.
+High-contrast separation that adapts to the theme - renders as white in dark mode and black in light mode.
 
 **Best For:**
-- When stronger contrast is needed
-- Light backgrounds where gray may be too subtle
+- When maximum contrast is needed
 - Important structural boundaries
+- Universal high-visibility dividers
 
 **Usage:**
 ```tsx
-<Divider color="black" />
+<Divider color="base" />
 ```
 
 ### Green
@@ -297,7 +297,7 @@ Dividers are non-interactive elements and do not receive focus.
 ### Color Contrast
 
 - **Gray variant**: Meets contrast requirements on dark backgrounds; may need weight adjustment on light backgrounds
-- **Black variant**: High contrast in both themes (renders as white in dark mode)
+- **Base variant**: High contrast in both themes (adapts to theme - white in dark, black in light)
 - **Green variant**: Brand color provides good contrast in both themes
 
 ## Best Practices
@@ -312,7 +312,7 @@ Dividers are non-interactive elements and do not receive focus.
 
 5. **Maintain alignment** - Dividers should align with content; avoid full-width dividers in padded containers
 
-6. **Use color purposefully** - Reserve green for branded emphasis; gray for most cases; black for high contrast needs
+6. **Use color purposefully** - Reserve green for branded emphasis; gray for most cases; base for high contrast needs
 
 7. **Test in both themes** - Verify dividers are visible and appropriate in both light and dark modes
 
@@ -325,7 +325,7 @@ The component automatically adapts colors for light and dark modes:
 | Color | Dark Mode (Default) | Light Mode |
 |-------|---------------------|------------|
 | Gray | `$gray-600` (#454549) | `$gray-300` (#C1C1C2) |
-| Black | `$white` (#FFFFFF) | `$gray-900` (#111112) |
+| Base | `$white` (#FFFFFF) | `$gray-900` (#111112) |
 | Green | `$green-300` (#21E46B) | `$green-300` (#21E46B) |
 
 ## Related Components

shared/components/Divider/Divider.scss

@@ -9,7 +9,7 @@
 // .bds-divider--regular     - Regular stroke weight (1px, default)
 // .bds-divider--strong      - Strong stroke weight (2px)
 // .bds-divider--gray        - Gray color variant (default)
-// .bds-divider--black       - Black color variant
+// .bds-divider--base        - Base color variant (high contrast, adapts to theme)
 // .bds-divider--green       - Green color variant
 //
 // Note: This file is imported within xrpl.scss after Bootstrap and project
@@ -27,7 +27,7 @@ $bds-divider-strong: 2px;
 // Colors - Dark Mode (default, mapped from _colors.scss)
 // Site defaults to dark mode, uses html.light for light mode
 $bds-divider-gray-dark: $gray-600;    // #454549 - visible on dark backgrounds
-$bds-divider-black-dark: $white;      // #FFFFFF - inverted for dark mode
+$bds-divider-base-dark: $white;       // #FFFFFF - high contrast for dark mode
 $bds-divider-green-dark: $green-300;  // #21E46B - brand color stays same
 
 // Colors - Light Mode (mapped from _colors.scss)
@@ -35,7 +35,7 @@ $bds-divider-green-dark: $green-300;  // #21E46B - brand color stays same
 // Figma Black (#141414) → closest match: $gray-900
 // Figma Green 300 (#21E46B) → exact match: $green-300
 $bds-divider-gray-light: $gray-300;   // #C1C1C2
-$bds-divider-black-light: $gray-900;  // #111112
+$bds-divider-base-light: $gray-900;   // #111112 - high contrast for light mode
 $bds-divider-green-light: $green-300; // #21E46B
 
 // =============================================================================
@@ -135,10 +135,10 @@ hr.bds-divider--gray,
   background-color: $bds-divider-gray-dark;
 }
 
-// Black variant - uses white for contrast on dark backgrounds
-hr.bds-divider--black,
-.bds-divider--black {
-  background-color: $bds-divider-black-dark;
+// Base variant - high contrast, adapts to theme (white in dark mode, black in light mode)
+hr.bds-divider--base,
+.bds-divider--base {
+  background-color: $bds-divider-base-dark;
 }
 
 // Green variant - branded, accent separation
@@ -159,10 +159,10 @@ html.light {
     background-color: $bds-divider-gray-light;
   }
   
-  // Black variant in light mode - use dark color for contrast
-  hr.bds-divider--black,
-  .bds-divider--black {
-    background-color: $bds-divider-black-light;
+  // Base variant in light mode - use dark color for contrast
+  hr.bds-divider--base,
+  .bds-divider--base {
+    background-color: $bds-divider-base-light;
   }
   
   // Green variant stays the same in light mode (brand color)

shared/components/Divider/Divider.tsx

@@ -5,8 +5,8 @@ export interface DividerProps {
   orientation?: 'horizontal' | 'vertical';
   /** Stroke weight - controls visual thickness */
   weight?: 'thin' | 'regular' | 'strong';
-  /** Color variant - gray (default), black for stronger contrast, green for brand emphasis */
-  color?: 'gray' | 'black' | 'green';
+  /** Color variant - gray (default), base for high contrast (adapts to theme), green for brand emphasis */
+  color?: 'gray' | 'base' | 'green';
   /** Additional CSS classes */
   className?: string;
   /** Whether the divider is purely decorative (hides from screen readers) */
@@ -29,8 +29,8 @@ export interface DividerProps {
  * // Strong green divider for emphasis
  * <Divider weight="strong" color="green" />
  * 
- * // Thin black divider
- * <Divider weight="thin" color="black" />
+ * // Thin base divider (high contrast - adapts to theme)
+ * <Divider weight="thin" color="base" />
  */
 export const Divider: React.FC<DividerProps> = ({
   orientation = 'horizontal',