Commit Graph

71 Commits

Author SHA1 Message Date
akcodez
0b52e5f747 Add FeatureTwoColumn pattern and button enhancements
- Introduced the FeatureTwoColumn pattern for showcasing features in a two-column layout, supporting multiple color themes and responsive design.
- Implemented button behavior based on the number of links, with configurations for 1 to 5 links.
- Added `forceColor` prop to Button component to maintain button color across light and dark themes, particularly useful for colored backgrounds.
- Updated styles and documentation for both the FeatureTwoColumn pattern and Button component to reflect new features and usage guidelines.
2026-01-14 14:04:17 -08:00
gabriel-ortiz
9a7f9479d4 Merge branch 'xrpl-brand-update-2026' into go/feat/pattern/smallTiles 2026-01-13 16:12:21 -08:00
gabriel-ortiz
f3bef3784f Add theme mode mixin and update CardIcon focus styles
- Introduced a new SCSS mixin for theme mode that applies styles based on light or dark themes, with validation for mode parameters.
- Updated CardIcon styles to maintain background color on focus for both light and green themes, enhancing accessibility and user experience.
- Removed unnecessary import from SmallTilesSection styles to streamline the codebase.
2026-01-12 21:02:29 -08:00
Calvin Jhunjhuwala
3feb69a1da fixing per comments 2026-01-12 14:28:57 -08:00
gabriel-ortiz
ab366c79ef Add warning for empty cards in SmallTilesSection
- Implemented a console warning in the SmallTilesSection component to notify when no cards are provided, improving debugging and user feedback.
2026-01-08 11:29:01 -08:00
gabriel-ortiz
3badef78c1 Add SmallTilesSection component and styles
- Introduced the SmallTilesSection component for displaying multiple CardIcon components in a responsive grid layout.
- Implemented SCSS styles for the SmallTilesSection, including responsive grid behavior and spacing adjustments.
- Added documentation for the SmallTilesSection component, detailing usage, props, and examples.
- Updated main stylesheet to include SmallTilesSection styles.
2026-01-08 10:09:48 -08:00
Calvin Jhunjhuwala
478f5784ee updating callout media banner, styling for extra width 2026-01-07 16:28:21 -08:00
akcodez
4cb232a068 Focus should not activate button hover - cardimage 2026-01-05 13:01:02 -08:00
akcodez
35958ebede Card - image : hovering card should not activate button hover state 2026-01-05 12:59:59 -08:00
akcodez
688ac5dc91 fix disasbled dark mode link color 2026-01-05 12:54:05 -08:00
akcodez
176e187c6a Refactor button typography for responsiveness and consistency
- Updated Button component styles to use responsive typography mixins for better adaptability across devices.
- Removed redundant media queries and adjusted font sizes and line heights for both button types.
- Ensured margin resets to maintain consistent spacing in various contexts.
- Enhanced CSS for improved readability and maintainability.
2026-01-05 12:44:14 -08:00
akcodez
ecd4a1bb66 Merge remote-tracking branch 'origin/xrpl-brand-update-2026' into design-qa-review 2026-01-05 12:22:06 -08:00
Calvin
3fbed79209 Merge pull request #3421 from XRPLF/fix-bds-session-121125
Fix typography
2026-01-05 12:07:55 -08:00
Aria Keshmiri
fc472a4f77 Merge pull request #3417 from XRPLF/link-rename
rename link
2026-01-05 11:55:15 -08:00
akcodez
7b223aafc2 Update CardImage and TileLogo components for improved responsiveness and layout
- Adjusted column spans in CardImage showcase to support a 4-column layout on larger screens.
- Updated TileLogo showcase to reflect changes in aspect ratios and responsive behavior, ensuring proper display across different screen sizes.
- Enhanced SCSS styles for both components to maintain consistency in appearance and functionality in light and dark themes.
- Refined documentation to clarify usage and responsive design principles for both CardImage and TileLogo components.
2026-01-05 10:12:11 -08:00
Calvin Jhunjhuwala
be0e324d0b working font styles and updated card grid 2025-12-11 15:01:08 -08:00
akcodez
fadfde1775 Add link button functionality and styles
- Introduced link button support in the Button component, allowing buttons to render as anchor elements when an `href` prop is provided.
- Updated Button showcase to demonstrate link buttons for internal and external navigation.
- Enhanced Button SCSS styles to ensure proper appearance and behavior for link buttons in both light and dark themes.
- Added documentation for link button usage in the Button showcase.
2025-12-11 11:23:23 -08:00
akcodez
32899e9c41 rename link 2025-12-10 13:53:21 -08:00
Aria Keshmiri
15f48991c3 Merge pull request #3415 from XRPLF/component/card-image
Add CardImage component with showcase and documentation
2025-12-10 12:45:37 -08:00
akcodez
642c0dd2ce add bottom padding 2025-12-10 12:45:04 -08:00
akcodez
a08b24ed5d Enhance CardImage showcase with image scaling demo and responsive layout adjustments
- Added a new image scaling demonstration to the CardImage showcase, illustrating a zoom effect on hover.
- Updated layout of CardImage components to improve responsiveness, adjusting column spans for various screen sizes.
- Introduced a new image from Figma for the scaling demo and included detailed descriptions of the scaling behavior.
- Refined SCSS styles to support the new layout and ensure consistent spacing across different screen sizes.
2025-12-10 10:35:14 -08:00
Aria Keshmiri
74e8be5a13 Merge pull request #3413 from XRPLF/component/card-icon
Add CardIcon component with showcase and documentation
2025-12-10 09:37:01 -08:00
akcodez
8e6d8f7c30 Add CardImage component with showcase and documentation
- Introduced the CardImage component, a responsive card designed to display an image, title, subtitle, and call-to-action button.
- Implemented three responsive size variants (LG, MD, SM) that adapt to viewport width.
- Added interactive states including default, hover, focus, pressed, and disabled.
- Created a comprehensive showcase page demonstrating all variants and states of the CardImage component.
- Included detailed documentation covering usage examples, props API, design tokens, and accessibility features.
- Added SCSS styles for the CardImage component, ensuring compatibility with both light and dark themes.
2025-12-09 12:29:03 -08:00
Calvin Jhunjhuwala
36785bc0f1 fixing css conflict 2025-12-09 12:28:14 -08:00
Calvin Jhunjhuwala
977c37ef83 minor copy change, pushiong fixed color 2025-12-09 12:00:11 -08:00
Calvin Jhunjhuwala
52d895b1d0 edits for dark mode card 2025-12-09 11:56:34 -08:00
akcodez
230ddcbe21 Add CardIcon component with showcase and documentation
- Introduced the CardIcon component, a clickable card featuring an icon and label text, supporting two color variants (Neutral and Green) and five interaction states (Default, Hover, Focused, Pressed, Disabled).
- Implemented responsive sizing that adapts at breakpoints (SM, MD, LG).
- Created a comprehensive showcase page demonstrating all variants, states, and usage examples.
- Added detailed documentation covering usage guidelines, best practices, and API reference.
- Included SCSS styles for the CardIcon component, ensuring compatibility with both light and dark themes.
2025-12-09 10:37:40 -08:00
Aria Keshmiri
314980a667 Merge pull request #3409 from XRPLF/component/tile-logo
Add TileLogo component with showcase and documentation
2025-12-09 10:13:06 -08:00
akcodez
2783d90cf6 Refactor CardOffgrid typography styles to utilize predefined classes
- Updated CardOffgrid component to use .subhead-lg-l and .body-l classes for title and description typography, respectively.
- Removed custom font size and line height definitions from SCSS and CSS files for improved consistency and maintainability.
- Adjusted related styles to ensure compatibility with the new typography approach.
2025-12-09 06:15:22 -08:00
Calvin Jhunjhuwala
b7ba976fb2 consolidating classes, still need superscript specs 2025-12-08 21:06:56 -08:00
Calvin Jhunjhuwala
7d694c76a5 working card stat, finalizing sup, cleaning up code cleanliness 2025-12-08 13:58:57 -08:00
akcodez
cbc56937e6 Refactor TileLogo component styles and class naming to align with BDS conventions
- Updated SCSS styles to replace 'tile-logo' namespace with 'bds-tile-logo' for consistency with the Brand Design System.
- Adjusted class names in the TileLogo component to reflect the new naming convention.
- Ensured all styles and variants (square, rectangle, neutral, green) are updated accordingly for both light and dark themes.
2025-12-08 10:57:02 -08:00
akcodez
1a9fa9b970 Add TileLogo component with showcase and documentation
- Introduced the TileLogo component, designed for displaying brand logos with interactive states.
- Implemented two shape variants (Square and Rectangle) and two color variants (Neutral and Green), with responsive sizing.
- Created a comprehensive showcase page demonstrating all variants, states, and usage examples.
- Added detailed documentation covering usage guidelines, best practices, and API reference.
- Included SCSS styles for the TileLogo component, ensuring compatibility with both light and dark themes.
2025-12-08 10:52:37 -08:00
akcodez
57898ab010 Add CardOffgrid component with showcase and documentation
- Introduced the CardOffgrid component, designed for displaying feature highlights with customizable icons, titles, and descriptions.
- Implemented two color variants: neutral and green, with interactive states and a unique hover animation.
- Created a comprehensive showcase page demonstrating all variants and states of the CardOffgrid component.
- Added detailed documentation covering usage guidelines, best practices, and API reference.
- Included SCSS styles for the CardOffgrid component, ensuring compatibility with both light and dark themes.
2025-12-05 11:41:18 -08:00
akcodez
cb6323d153 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.
2025-12-04 15:33:32 -08:00
akcodez
08941588aa fix colors 2025-12-04 13:51:04 -08:00
akcodez
e183369ef6 add height 2025-12-04 13:48:23 -08:00
akcodez
702e180de6 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.
2025-12-04 12:20:18 -08:00
Calvin
a265f82980 Merge pull request #3404 from XRPLF/grid-optimization
[fix] Grid optimization
2025-12-03 16:17:54 -08:00
Calvin Jhunjhuwala
3e07b8400d removing extra css 2025-12-03 16:02:08 -08:00
Calvin Jhunjhuwala
5433894f20 renaming class name to bds 2025-12-03 14:51:59 -08:00
Calvin Jhunjhuwala
a6d84de417 working grid for fill and auto 2025-12-03 13:34:05 -08:00
Calvin Jhunjhuwala
6f76d4ece5 clean up of grid, working on all screen sizes, logic built out 2025-12-03 13:09:39 -08:00
Aria Keshmiri
17778ad84b Merge pull request #3399 from XRPLF/component/button
Component/button
2025-12-03 10:58:04 -08:00
akcodez
ad0631f701 add arialbel 2025-12-03 10:56:43 -08:00
akcodez
01c19628a9 fix link spacing 2025-12-02 15:27:52 -08:00
akcodez
44614dba9d Refactor Button Styles for Responsive Design
Updated button styles to enhance responsiveness across devices by replacing fixed breakpoints with a mixin for the xl breakpoint. Adjusted typography and padding for smaller screens to ensure consistent appearance and usability. Improved comments for clarity on the import order and design tokens.
2025-12-02 12:40:27 -08:00
akcodez
621db81c7d add proper breakpoint sizing 2025-12-02 12:23:35 -08:00
akcodez
c01749eba2 rm deprecated linkCOlor 2025-12-02 11:52:23 -08:00
akcodez
2ff14e4224 Add BDS link styles and update existing link styles
- Introduced new styles for BDS link icons, including hover and focus states.
- Updated existing link styles to exclude BDS links from certain color and hover effects.
- Ensured consistent styling across light and dark themes for BDS links.
- Refactored landing page link styles to accommodate new BDS link classes.
2025-12-02 10:21:52 -08:00