From 702e180de67f9e4511a16f48a45a2b00a6ae226d Mon Sep 17 00:00:00 2001 From: akcodez Date: Thu, 4 Dec 2025 12:20:18 -0800 Subject: [PATCH 1/4] Add Divider component and documentation - Introduced the Divider component following the XRPL Brand Design System, supporting horizontal and vertical orientations, three stroke weights (thin, regular, strong), and three color variants (gray, black, green). - Created a comprehensive showcase page for the Divider component, demonstrating its usage and variations. - Added detailed documentation for the Divider component, including props API, usage examples, and best practices. - Included styles for the Divider component in SCSS format, ensuring compatibility with light and dark themes. --- about/divider-showcase.page.tsx | 465 +++++++++++++++++++++++++ shared/components/Divider/Divider.md | 350 +++++++++++++++++++ shared/components/Divider/Divider.scss | 165 +++++++++ shared/components/Divider/Divider.tsx | 63 ++++ shared/components/Divider/index.ts | 2 + static/css/devportal2024-v1.css | 71 ++++ styles/xrpl.scss | 1 + 7 files changed, 1117 insertions(+) create mode 100644 about/divider-showcase.page.tsx create mode 100644 shared/components/Divider/Divider.md create mode 100644 shared/components/Divider/Divider.scss create mode 100644 shared/components/Divider/Divider.tsx create mode 100644 shared/components/Divider/index.ts diff --git a/about/divider-showcase.page.tsx b/about/divider-showcase.page.tsx new file mode 100644 index 0000000000..81ee31dfa9 --- /dev/null +++ b/about/divider-showcase.page.tsx @@ -0,0 +1,465 @@ +import * as React from "react"; +import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid"; +import { Divider } from "shared/components/Divider"; + +export const frontmatter = { + seo: { + title: 'Divider Component Showcase', + description: "A comprehensive showcase of all Divider component variants, weights, colors, and orientations in the XRPL.org Design System.", + } +}; + +export default function DividerShowcase() { + return ( +
+
+
+
+
Component Showcase
+

Divider Component

+

+ A comprehensive showcase of all Divider component variants, weights, colors, and orientations. +

+
+
+ + {/* Weight by Color Matrix - Horizontal */} + + + +

Horizontal Dividers: Weight by Color Matrix

+
+ {/* Header Row */} +
+
+
Weight
+
+
+
Gray
+
+
+
Black
+
+
+
Green
+
+
+ + {/* Thin Row */} +
+
+ Thin +
+ 0.5px +
+
+ +
+
+ +
+
+ +
+
+ + {/* Regular Row */} +
+
+ Regular +
+ 1px +
+
+ +
+
+ +
+
+ +
+
+ + {/* Strong Row */} +
+
+ Strong +
+ 2px +
+
+ +
+
+ +
+
+ +
+
+
+ + + + + {/* Vertical Dividers */} + + + +

Vertical Dividers: Weight by Color Matrix

+
+ {/* Header Row */} +
+
+
Weight
+
+
+
Gray
+
+
+
Black
+
+
+
Green
+
+
+ + {/* Thin Row */} +
+
+
+ Thin +
+ 0.5px +
+
+
+ +
+
+ +
+
+ +
+
+ + {/* Regular Row */} +
+
+
+ Regular +
+ 1px +
+
+
+ +
+
+ +
+
+ +
+
+ + {/* Strong Row */} +
+
+
+ Strong +
+ 2px +
+
+
+ +
+
+ +
+
+ +
+
+
+ + + + + {/* Weights Comparison */} + + + +

Stroke Weights

+

Dividers are available in three stroke weights to represent different levels of visual hierarchy.

+
+
+
Thin (0.5px) - Subtle separation
+ +
+
+
Regular (1px) - Default weight
+ +
+
+
Strong (2px) - Emphasized boundaries
+ +
+
+ + + + + {/* Color Variants */} + + + +

Color Variants

+

Colors are mapped from the XRPL Design System color palette:

+ +
+ {/* Dark Mode Colors (Default) */} +
+
Dark Mode (Default)
+
+
+
+
+ Gray: $gray-600 +
+ #454549 +
+
+
+
+
+ Black: $white +
+ #FFFFFF +
+
+
+
+
+ Green: $green-300 +
+ #21E46B +
+
+
+
+ + {/* Light Mode Colors */} +
+
Light Mode
+
+
+
+
+ Gray: $gray-300 +
+ #C1C1C2 +
+
+
+
+
+ Black: $gray-900 +
+ #111112 +
+
+
+
+
+ Green: $green-300 +
+ #21E46B +
+
+
+
+
+ +
+
+
Gray - Neutral separation (default)
+ +
+
+
Black - High contrast separation
+ +
+
+
Green - Brand accent separation
+ +
+
+ + + + + {/* Real-World Examples */} + + + +

Real-World Examples

+ +
+ {/* Content Section Separation */} +
+
Content Section Separation
+
+
Section Title
+

This is some content in the first section that explains something important.

+ +

This is content in the second section that follows naturally from the first.

+
+
+ + {/* List Item Separation */} +
+
List Item Separation
+
+
+
+ Feature One +

Description of the first feature

+
+ +
+ Feature Two +

Description of the second feature

+
+ +
+ Feature Three +

Description of the third feature

+
+
+
+
+ + {/* Vertical Divider Between Columns */} +
+
Vertical Divider Between Columns
+
+
+
+ Column One +

Content for the first column

+
+ +
+ Column Two +

Content for the second column

+
+ +
+ Column Three +

Content for the third column

+
+
+
+
+ + {/* Major Section Break */} +
+
Major Section Break (Strong + Green)
+
+
Primary Section
+

This section contains the main content of the page.

+ +
Secondary Section
+

This section is clearly separated with a strong branded divider.

+
+
+ + {/* Navigation Separator */} +
+
Navigation Item Separator
+
+
+ Home + + Documentation + + API Reference + + Community +
+
+
+
+ + + + + {/* API Reference */} + + + +

Component API

+
+ {/* Header Row */} +
+
Prop
+
Type
+
Default
+
Description
+
+ + {/* orientation */} +
+
orientation
+
'horizontal' | 'vertical'
+
'horizontal'
+
Sets the divider orientation
+
+ + + {/* weight */} +
+
weight
+
'thin' | 'regular' | 'strong'
+
'regular'
+
Controls the stroke thickness
+
+ + + {/* color */} +
+
color
+
'gray' | 'black' | 'green'
+
'gray'
+
Sets the divider color
+
+ + + {/* className */} +
+
className
+
string
+
''
+
Additional CSS classes
+
+ + + {/* decorative */} +
+
decorative
+
boolean
+
true
+
Whether the divider is purely decorative (hides from screen readers)
+
+
+ + + +
+
+ ); +} diff --git a/shared/components/Divider/Divider.md b/shared/components/Divider/Divider.md new file mode 100644 index 0000000000..80f48243ad --- /dev/null +++ b/shared/components/Divider/Divider.md @@ -0,0 +1,350 @@ +# Divider Component Documentation + +## Overview + +The Divider component is a visual separator that creates clear boundaries between content sections, elements, or groups. Following the XRPL Brand Design System (BDS), it supports two orientations, three stroke weights, and three color variants to adapt to different visual contexts and hierarchy needs. + +## Features + +- **Two Orientations**: Horizontal (default) and Vertical +- **Three Stroke Weights**: Thin (0.5px), Regular (1px), Strong (2px) +- **Three Color Variants**: Gray (default), Black, Green +- **Theme Support**: Automatic light/dark mode adaptation +- **Accessibility**: Configurable for decorative or semantic use +- **Flexible Sizing**: Inherits width/height from parent container + +## Props API + +```typescript +interface DividerProps { + /** Divider orientation - horizontal separates vertical content, vertical separates horizontal content */ + 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'; + /** Additional CSS classes */ + className?: string; + /** Whether the divider is purely decorative (hides from screen readers) */ + decorative?: boolean; +} +``` + +### Default Values + +- `orientation`: `'horizontal'` +- `weight`: `'regular'` +- `color`: `'gray'` +- `className`: `''` +- `decorative`: `true` + +## Orientations + +### Horizontal Divider + +Horizontal dividers extend left to right to separate vertically stacked content. They span the full width of their container by default. + +**Common Uses:** +- Between content blocks or sections +- Separating list items +- Within cards to divide content areas + +**Usage:** +```tsx + +// or simply (horizontal is default) + +``` + +### Vertical Divider + +Vertical dividers extend top to bottom to separate horizontally aligned content. They inherit height from their parent container. + +**Common Uses:** +- Between columns in a layout +- Separating navigation items +- Within toolbars or action bars + +**Usage:** +```tsx + +``` + +**Note:** Vertical dividers require a parent container with a defined height. + +## Stroke Weights + +### Thin (0.5px) + +The lightest weight for subtle, unobtrusive separation. Use when content is closely related but needs minimal visual distinction. + +**Best For:** +- Within cards or small content areas +- Between tightly grouped elements +- Dense layouts where heavier dividers would feel cluttered + +**Usage:** +```tsx + +``` + +### Regular (1px) - Default + +The standard weight for most use cases. Provides clear separation without dominating the visual hierarchy. + +**Best For:** +- Most layout and section separations +- Between content blocks +- General-purpose dividers + +**Usage:** +```tsx + +// or simply (regular is default) + +``` + +### Strong (2px) + +The heaviest weight for maximum emphasis. Use sparingly to highlight major transitions or boundaries. + +**Best For:** +- Major section breaks +- Key boundaries between distinct content areas +- Emphasizing important transitions + +**Usage:** +```tsx + +``` + +## Color Variants + +### Gray (Default) + +Neutral, subtle separation that works in most contexts without drawing attention. + +**Best For:** +- Most separations +- Subtle visual breaks +- Backgrounds where you don't want the divider to stand out + +**Usage:** +```tsx + +// or simply (gray is default) + +``` + +### Black + +High-contrast separation for maximum visibility. In dark mode, this renders as white for proper contrast. + +**Best For:** +- When stronger contrast is needed +- Light backgrounds where gray may be too subtle +- Important structural boundaries + +**Usage:** +```tsx + +``` + +### Green + +Brand-colored separation that reinforces XRPL identity or indicates active/important areas. + +**Best For:** +- Highlighting branded sections +- Active or selected states +- Drawing attention to specific content areas + +**Usage:** +```tsx + +``` + +## When to Use + +Use a Divider to: + +- **Separate content sections** - Create clear boundaries between distinct content groups +- **Organize lists** - Divide list items for better scanability +- **Structure cards** - Separate header, body, and footer areas within cards +- **Define columns** - Visually separate side-by-side content +- **Indicate transitions** - Mark boundaries between zones of information + +## When NOT to Use + +Avoid using a Divider when: + +- **Spacing alone is sufficient** - If whitespace provides enough separation, skip the divider +- **Backgrounds provide contrast** - Different background colors may eliminate the need for dividers +- **It adds clutter** - In minimal designs, too many dividers can distract from content +- **To compensate for poor spacing** - Dividers should enhance, not replace, proper layout structure + +## Usage Examples + +### Basic Usage + +```tsx +import { Divider } from 'shared/components/Divider'; + +// Default horizontal divider + + +// Vertical divider + + +// Strong green divider for emphasis + +``` + +### List Separation + +```tsx +
+
Item One
+ +
Item Two
+ +
Item Three
+
+``` + +### Card Content Separation + +```tsx +
+
+

Card Title

+
+ +
+

Card content goes here...

+
+ +
+ +
+
+``` + +### Column Separation + +```tsx +
+
Column One
+ +
Column Two
+ +
Column Three
+
+``` + +### Navigation Separation + +```tsx + +``` + +### Major Section Break + +```tsx +
+

Primary Content

+

Main content area...

+
+ + + +
+

Secondary Content

+

Supporting content area...

+
+``` + +### Semantic Divider (Accessible) + +```tsx +// For dividers that should be announced by screen readers + +``` + +## Accessibility + +### Decorative vs Semantic + +By default, dividers are decorative (`decorative={true}`) and hidden from screen readers: +- Sets `aria-hidden="true"` +- Uses `role="presentation"` + +For semantic dividers that should be announced: +- Set `decorative={false}` +- Adds `role="separator"` +- Includes `aria-orientation` attribute + +### Keyboard Navigation + +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) +- **Green variant**: Brand color provides good contrast in both themes + +## Best Practices + +1. **Use consistent weights** - Stick to one weight within the same context (e.g., all list dividers should be the same weight) + +2. **Match hierarchy to importance** - Use thinner dividers for minor separations, stronger for major breaks + +3. **Don't overuse dividers** - If every element has a divider, none stand out; use sparingly for maximum effect + +4. **Consider spacing first** - Before adding a divider, try adjusting margins or padding + +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 + +7. **Test in both themes** - Verify dividers are visible and appropriate in both light and dark modes + +8. **Parent container setup** - For vertical dividers, ensure the parent has `display: flex`, `align-items: stretch`, and a defined height + +## Theme Support + +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) | +| Green | `$green-300` (#21E46B) | `$green-300` (#21E46B) | + +## Related Components + +- **Card** - Often uses horizontal dividers between sections +- **List** - May use dividers between list items +- **Navigation** - Vertical dividers separate nav groups +- **Form** - Dividers separate form sections + +## Showcase + +See the interactive showcase at `/about/divider-showcase` for live examples of all variants, weights, colors, and real-world usage patterns. + +## File Structure + +``` +shared/components/Divider/ +├── Divider.tsx # Component implementation +├── Divider.scss # Component styles +├── Divider.md # This documentation +└── index.ts # Exports +``` diff --git a/shared/components/Divider/Divider.scss b/shared/components/Divider/Divider.scss new file mode 100644 index 0000000000..f1a1ffae0f --- /dev/null +++ b/shared/components/Divider/Divider.scss @@ -0,0 +1,165 @@ +// BDS Divider Component Styles +// Brand Design System - Visual separator component +// +// Naming Convention: BEM with 'bds' namespace +// .bds-divider - Base divider (removes default hr styling) +// .bds-divider--horizontal - Horizontal orientation (default) +// .bds-divider--vertical - Vertical orientation +// .bds-divider--thin - Thin stroke weight (0.5px) +// .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--green - Green color variant +// +// Note: This file is imported within xrpl.scss after Bootstrap and project +// variables are loaded, so $grid-breakpoints, colors, and mixins are available. + +// ============================================================================= +// Design Tokens +// ============================================================================= + +// Stroke Weights (from Figma design spec) +$bds-divider-thin: 0.5px; +$bds-divider-regular: 1px; +$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-green-dark: $green-300; // #21E46B - brand color stays same + +// Colors - Light Mode (mapped from _colors.scss) +// Figma Neutral300 (#CAD4DF) → closest match: $gray-300 +// 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-green-light: $green-300; // #21E46B + +// ============================================================================= +// Base Divider Styles +// ============================================================================= + +// Use more specific selector to override Bootstrap hr styles +// hr.bds-divider has higher specificity than just hr +hr.bds-divider, +.bds-divider { + // Reset default
styles and override Bootstrap/global hr styles + margin: 0; + padding: 0; + border: none; + border-top: none; + border-bottom: none; + border-left: none; + border-right: none; + background: transparent; + opacity: 1; // Override Bootstrap's hr opacity: 0.25 + color: transparent; // Override inherited color + + // Default to gray color (dark mode default) + background-color: $bds-divider-gray-dark; +} + +// ============================================================================= +// Orientation Modifiers +// ============================================================================= + +// Horizontal divider - spans full width, uses height for stroke +.bds-divider--horizontal { + display: block; + width: 100%; + min-width: 100%; + + // Height set by weight modifier +} + +// Vertical divider - spans full height, uses width for stroke +.bds-divider--vertical { + display: inline-block; + height: 100%; + min-height: 100%; + vertical-align: middle; + + // Width set by weight modifier +} + +// ============================================================================= +// Weight Modifiers +// ============================================================================= + +// Thin weight (0.5px) +.bds-divider--thin { + &.bds-divider--horizontal { + height: $bds-divider-thin; + } + + &.bds-divider--vertical { + width: $bds-divider-thin; + } +} + +// Regular weight (1px) - default +.bds-divider--regular { + &.bds-divider--horizontal { + height: $bds-divider-regular; + } + + &.bds-divider--vertical { + width: $bds-divider-regular; + } +} + +// Strong weight (2px) +.bds-divider--strong { + &.bds-divider--horizontal { + height: $bds-divider-strong; + } + + &.bds-divider--vertical { + width: $bds-divider-strong; + } +} + +// ============================================================================= +// Color Modifiers - Dark Mode (Default) +// ============================================================================= +// Site defaults to dark mode, so base styles are for dark backgrounds + +// Gray variant (default) - subtle, neutral separation +.bds-divider--gray { + background-color: $bds-divider-gray-dark; +} + +// Black variant - uses white for contrast on dark backgrounds +.bds-divider--black { + background-color: $bds-divider-black-dark; +} + +// Green variant - branded, accent separation +.bds-divider--green { + background-color: $bds-divider-green-dark; +} + +// ============================================================================= +// Light Mode Styles +// ============================================================================= +// Site uses html.light class for light mode + +html.light { + // Gray variant in light mode + .bds-divider--gray { + background-color: $bds-divider-gray-light; + } + + // Black variant in light mode - use dark color for contrast + .bds-divider--black { + background-color: $bds-divider-black-light; + } + + // Green variant stays the same in light mode (brand color) + .bds-divider--green { + background-color: $bds-divider-green-light; + } +} diff --git a/shared/components/Divider/Divider.tsx b/shared/components/Divider/Divider.tsx new file mode 100644 index 0000000000..00d5d888e4 --- /dev/null +++ b/shared/components/Divider/Divider.tsx @@ -0,0 +1,63 @@ +import React from 'react'; + +export interface DividerProps { + /** Divider orientation - horizontal separates vertical content, vertical separates horizontal content */ + 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'; + /** Additional CSS classes */ + className?: string; + /** Whether the divider is purely decorative (hides from screen readers) */ + decorative?: boolean; +} + +/** + * BDS Divider Component + * + * A visual separator component following the XRPL Brand Design System. + * Provides clear visual separation between sections, elements, or content groups. + * + * @example + * // Horizontal divider (default) + * + * + * // Vertical divider between columns + * + * + * // Strong green divider for emphasis + * + * + * // Thin black divider + * + */ +export const Divider: React.FC = ({ + orientation = 'horizontal', + weight = 'regular', + color = 'gray', + className = '', + decorative = true, +}) => { + // Build class names using BEM with bds namespace + const classNames = [ + 'bds-divider', + `bds-divider--${orientation}`, + `bds-divider--${weight}`, + `bds-divider--${color}`, + className, + ] + .filter(Boolean) + .join(' '); + + return ( +
+ ); +}; + +export default Divider; diff --git a/shared/components/Divider/index.ts b/shared/components/Divider/index.ts new file mode 100644 index 0000000000..70599d530d --- /dev/null +++ b/shared/components/Divider/index.ts @@ -0,0 +1,2 @@ +export { Divider, type DividerProps } from './Divider'; +export { default } from './Divider'; diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 19f798bafa..26a8916da8 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -15125,6 +15125,77 @@ html:not(.light) .bds-link.bds-link--disabled:visited { display: none; } +hr.bds-divider, +.bds-divider { + margin: 0; + padding: 0; + border: none; + border-top: none; + border-bottom: none; + border-left: none; + border-right: none; + background: transparent; + opacity: 1; + color: transparent; + background-color: #454549; +} + +.bds-divider--horizontal { + display: block; + width: 100%; + min-width: 100%; +} + +.bds-divider--vertical { + display: inline-block; + height: 100%; + min-height: 100%; + vertical-align: middle; +} + +.bds-divider--thin.bds-divider--horizontal { + height: 0.5px; +} +.bds-divider--thin.bds-divider--vertical { + width: 0.5px; +} + +.bds-divider--regular.bds-divider--horizontal { + height: 1px; +} +.bds-divider--regular.bds-divider--vertical { + width: 1px; +} + +.bds-divider--strong.bds-divider--horizontal { + height: 2px; +} +.bds-divider--strong.bds-divider--vertical { + width: 2px; +} + +.bds-divider--gray { + background-color: #454549; +} + +.bds-divider--black { + background-color: #FFFFFF; +} + +.bds-divider--green { + background-color: #21E46B; +} + +html.light .bds-divider--gray { + background-color: #C1C1C2; +} +html.light .bds-divider--black { + background-color: #111112; +} +html.light .bds-divider--green { + background-color: #21E46B; +} + pre { color: #FFFFFF; background-color: #232325; diff --git a/styles/xrpl.scss b/styles/xrpl.scss index 83833a6a52..4cec0c91ec 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -90,6 +90,7 @@ $line-height-base: 1.5; @import "../shared/components/PageGrid/page-grid"; @import "../shared/components/Link/_link-icons.scss"; @import "../shared/components/Link/_link.scss"; +@import "../shared/components/Divider/Divider.scss"; @import "_code-tabs.scss"; @import "_code-walkthrough.scss"; @import "_diagrams.scss"; From e183369ef654d225a7d6c8002776cddf15d4ce6e Mon Sep 17 00:00:00 2001 From: akcodez Date: Thu, 4 Dec 2025 13:48:23 -0800 Subject: [PATCH 2/4] add height --- shared/components/Divider/Divider.scss | 9 +++++---- static/css/devportal2024-v1.css | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/shared/components/Divider/Divider.scss b/shared/components/Divider/Divider.scss index f1a1ffae0f..9e8ef8c56d 100644 --- a/shared/components/Divider/Divider.scss +++ b/shared/components/Divider/Divider.scss @@ -77,10 +77,11 @@ hr.bds-divider, // Vertical divider - spans full height, uses width for stroke .bds-divider--vertical { - display: inline-block; - height: 100%; - min-height: 100%; - vertical-align: middle; + display: block; + height: auto; + min-height: 1px; // Fallback minimum + align-self: stretch; // Stretch to fill flex container height + flex-shrink: 0; // Prevent collapsing in flex layouts // Width set by weight modifier } diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 26a8916da8..c10793b86d 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -15147,10 +15147,11 @@ hr.bds-divider, } .bds-divider--vertical { - display: inline-block; - height: 100%; - min-height: 100%; - vertical-align: middle; + display: block; + height: auto; + min-height: 1px; + align-self: stretch; + flex-shrink: 0; } .bds-divider--thin.bds-divider--horizontal { From 08941588aa81a0802058edb2e8d99c521c60af99 Mon Sep 17 00:00:00 2001 From: akcodez Date: Thu, 4 Dec 2025 13:51:04 -0800 Subject: [PATCH 3/4] fix colors --- shared/components/Divider/Divider.scss | 7 +++++++ static/css/devportal2024-v1.css | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/shared/components/Divider/Divider.scss b/shared/components/Divider/Divider.scss index 9e8ef8c56d..61e73f7dd9 100644 --- a/shared/components/Divider/Divider.scss +++ b/shared/components/Divider/Divider.scss @@ -127,18 +127,22 @@ hr.bds-divider, // Color Modifiers - Dark Mode (Default) // ============================================================================= // Site defaults to dark mode, so base styles are for dark backgrounds +// Use hr.bds-divider--* for higher specificity to override base hr.bds-divider // Gray variant (default) - subtle, neutral separation +hr.bds-divider--gray, .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; } // Green variant - branded, accent separation +hr.bds-divider--green, .bds-divider--green { background-color: $bds-divider-green-dark; } @@ -150,16 +154,19 @@ hr.bds-divider, html.light { // Gray variant in light mode + hr.bds-divider--gray, .bds-divider--gray { 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; } // Green variant stays the same in light mode (brand color) + hr.bds-divider--green, .bds-divider--green { background-color: $bds-divider-green-light; } diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index c10793b86d..bb6d174f5f 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -15175,24 +15175,30 @@ hr.bds-divider, width: 2px; } +hr.bds-divider--gray, .bds-divider--gray { background-color: #454549; } +hr.bds-divider--black, .bds-divider--black { background-color: #FFFFFF; } +hr.bds-divider--green, .bds-divider--green { background-color: #21E46B; } +html.light hr.bds-divider--gray, html.light .bds-divider--gray { background-color: #C1C1C2; } +html.light hr.bds-divider--black, html.light .bds-divider--black { background-color: #111112; } +html.light hr.bds-divider--green, html.light .bds-divider--green { background-color: #21E46B; } From cb6323d153495da1164f4cd9de0c0c55e88ae505 Mon Sep 17 00:00:00 2001 From: akcodez Date: Thu, 4 Dec 2025 15:33:32 -0800 Subject: [PATCH 4/4] 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. --- about/divider-showcase.page.tsx | 26 +++++++++++++------------- shared/components/Divider/Divider.md | 22 +++++++++++----------- shared/components/Divider/Divider.scss | 22 +++++++++++----------- shared/components/Divider/Divider.tsx | 8 ++++---- static/css/devportal2024-v1.css | 8 ++++---- 5 files changed, 43 insertions(+), 43 deletions(-) diff --git a/about/divider-showcase.page.tsx b/about/divider-showcase.page.tsx index 81ee31dfa9..ef3620db31 100644 --- a/about/divider-showcase.page.tsx +++ b/about/divider-showcase.page.tsx @@ -38,7 +38,7 @@ export default function DividerShowcase() {
Gray
-
Black
+
Base
Green
@@ -56,7 +56,7 @@ export default function DividerShowcase() {
- +
@@ -74,7 +74,7 @@ export default function DividerShowcase() {
- +
@@ -92,7 +92,7 @@ export default function DividerShowcase() {
- +
@@ -118,7 +118,7 @@ export default function DividerShowcase() {
Gray
-
Black
+
Base
Green
@@ -138,7 +138,7 @@ export default function DividerShowcase() {
- +
@@ -158,7 +158,7 @@ export default function DividerShowcase() {
- +
@@ -178,7 +178,7 @@ export default function DividerShowcase() {
- +
@@ -236,7 +236,7 @@ export default function DividerShowcase() {
- Black: $white + Base: $white
#FFFFFF
@@ -267,7 +267,7 @@ export default function DividerShowcase() {
- Black: $gray-900 + Base: $gray-900
#111112
@@ -290,8 +290,8 @@ export default function DividerShowcase() {
-
Black - High contrast separation
- +
Base - High contrast separation (adapts to theme)
+
Green - Brand accent separation
@@ -433,7 +433,7 @@ export default function DividerShowcase() { {/* color */}
color
-
'gray' | 'black' | 'green'
+
'gray' | 'base' | 'green'
'gray'
Sets the divider color
diff --git a/shared/components/Divider/Divider.md b/shared/components/Divider/Divider.md index 80f48243ad..af0fb7a430 100644 --- a/shared/components/Divider/Divider.md +++ b/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 ``` -### 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 - + ``` ### 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 diff --git a/shared/components/Divider/Divider.scss b/shared/components/Divider/Divider.scss index 61e73f7dd9..22ad5289cb 100644 --- a/shared/components/Divider/Divider.scss +++ b/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) diff --git a/shared/components/Divider/Divider.tsx b/shared/components/Divider/Divider.tsx index 00d5d888e4..6c995689d6 100644 --- a/shared/components/Divider/Divider.tsx +++ b/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 * * - * // Thin black divider - * + * // Thin base divider (high contrast - adapts to theme) + * */ export const Divider: React.FC = ({ orientation = 'horizontal', diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index bb6d174f5f..5e80cbbae3 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -15180,8 +15180,8 @@ hr.bds-divider--gray, background-color: #454549; } -hr.bds-divider--black, -.bds-divider--black { +hr.bds-divider--base, +.bds-divider--base { background-color: #FFFFFF; } @@ -15194,8 +15194,8 @@ html.light hr.bds-divider--gray, html.light .bds-divider--gray { background-color: #C1C1C2; } -html.light hr.bds-divider--black, -html.light .bds-divider--black { +html.light hr.bds-divider--base, +html.light .bds-divider--base { background-color: #111112; } html.light hr.bds-divider--green,