Commit Graph

88 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
Calvin Jhunjhuwala
fe0057aa9f css clean up 2026-01-13 12:07:29 -08:00
Calvin Jhunjhuwala
1e3ca30ace fixing per comments 2026-01-13 12:07:29 -08:00
Calvin Jhunjhuwala
1fcc294ffb fixing button spacing + image background 2026-01-13 12:07:29 -08:00
Calvin Jhunjhuwala
0d0fc38344 cleaning up css 2026-01-13 12:07:28 -08:00
Calvin Jhunjhuwala
cd1759332d fixing errors 2026-01-13 12:07:28 -08:00
Calvin Jhunjhuwala
62d23ce36b updated and working showcase for call out media 2026-01-13 12:07:28 -08:00
Calvin Jhunjhuwala
678e168029 adding a README 2026-01-13 12:07:28 -08:00
akcodez
31a9cac20b merge main in, resolve comments 2026-01-13 12:06:52 -08:00
akcodez
9738402921 Focus should not activate button hover - cardimage 2026-01-13 12:05:49 -08:00
akcodez
e064ce02d0 Card - image : hovering card should not activate button hover state 2026-01-13 12:05:49 -08:00
akcodez
862a5c42d8 fix disasbled dark mode link color 2026-01-13 12:05:49 -08:00
akcodez
d29a5083d1 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-13 12:05:49 -08:00
akcodez
60fc8eb22e 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-13 12:05:49 -08:00
akcodez
ec4ef6e9fc Update HeaderHeroSplitMedia styles for aspect ratio and title alignment
- Changed tablet aspect ratio from 2:1 to 16:9 for better compatibility with an 8-column grid.
- Adjusted title alignment in the title-only layout from center to top for improved visual hierarchy.
2026-01-13 12:02:11 -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
akcodez
ce75b4388c minor qa changes 2026-01-09 12:58:07 -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
akcodez
f346a80ce0 Refactor HeaderHeroSplitMedia styles for tablet and accent surfaces
- Updated spacing variables for tablet view to enhance layout consistency.
- Introduced accent-specific spacing for title and description groups on tablet and desktop.
- Adjusted margin and gap values for improved responsiveness and visual hierarchy.
2026-01-06 13:28:20 -08:00
akcodez
e849cc95b9 Update HeaderHeroSplitMedia styles for improved color consistency and dark mode support
- Refactored color variables to use design tokens for better maintainability.
- Ensured consistent text colors for titles and descriptions in both light and dark modes.
- Adjusted color values for better contrast and readability across themes.
2026-01-06 13:20:09 -08:00
akcodez
0bff1aab4c Add HeaderHeroSplitMedia styles and adjust typography margins
- Introduced new styles for the HeaderHeroSplitMedia component, including layout, typography, and responsive design adjustments.
- Updated margin-bottom for paragraph and label-r elements to enhance spacing consistency.
2026-01-06 13:15:12 -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