From 354d0c797b8eee428aeba94de2674315310a606e Mon Sep 17 00:00:00 2001 From: akcodez Date: Mon, 8 Dec 2025 10:52:37 -0800 Subject: [PATCH] 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. --- about/tile-logo-showcase.page.tsx | 723 +++++++++++++++++++++++ shared/components/TileLogo/TileLogo.md | 348 +++++++++++ shared/components/TileLogo/TileLogo.scss | 379 ++++++++++++ shared/components/TileLogo/TileLogo.tsx | 140 +++++ shared/components/TileLogo/index.ts | 2 + static/css/devportal2024-v1.css | 189 ++++++ styles/xrpl.scss | 1 + 7 files changed, 1782 insertions(+) create mode 100644 about/tile-logo-showcase.page.tsx create mode 100644 shared/components/TileLogo/TileLogo.md create mode 100644 shared/components/TileLogo/TileLogo.scss create mode 100644 shared/components/TileLogo/TileLogo.tsx create mode 100644 shared/components/TileLogo/index.ts diff --git a/about/tile-logo-showcase.page.tsx b/about/tile-logo-showcase.page.tsx new file mode 100644 index 0000000000..d890cacbe0 --- /dev/null +++ b/about/tile-logo-showcase.page.tsx @@ -0,0 +1,723 @@ +import * as React from "react"; +import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid"; +import { TileLogo } from "shared/components/TileLogo"; + +export const frontmatter = { + seo: { + title: 'TileLogo Component Showcase', + description: "A comprehensive showcase of all TileLogo component variants, states, and themes in the XRPL.org Design System.", + } +}; + +export default function TileLogoShowcase() { + const handleClick = (message: string) => { + console.log(`TileLogo clicked: ${message}`); + }; + + // Sample logo - Ondo Finance logo SVG + const sampleLogo = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='151' height='46' viewBox='0 0 151 46' fill='none'%3E%3Cpath d='M22.2154 0H23.021C25.9433 0.0581414 28.8552 0.674289 31.5386 1.83712C34.6562 3.18041 37.4648 5.23876 39.6848 7.81058C41.7066 10.1385 43.2477 12.8847 44.1701 15.8296C45.1919 19.0651 45.4677 22.5332 44.9832 25.891C43.8958 25.888 42.8084 25.891 41.721 25.8895C42.2967 22.426 41.9365 18.8068 40.6441 15.5404C38.8408 10.9079 35.1807 7.0419 30.6622 4.98732C25.4603 2.57332 19.1762 2.65638 14.0497 5.23121C9.49129 7.45418 5.88844 11.5573 4.26599 16.3702C3.13789 19.6571 2.92915 23.2505 3.63977 26.6506C4.47021 30.6684 6.62694 34.3895 9.68119 37.1191C13.1484 40.255 17.7806 42.0581 22.4535 42.0679C26.388 42.0694 30.3231 42.0626 34.2583 42.0717C30.8755 44.1172 26.9501 45.2385 23.0006 45.305H22.1928C18.9645 45.2408 15.746 44.494 12.8372 43.0835C8.09114 40.819 4.19214 36.8337 2.02561 32.0351C0.73775 29.2217 0.0572717 26.1379 0 23.0459V22.2342C0.0640539 19.0009 0.80934 15.7782 2.21551 12.8651C4.47021 8.12167 8.43251 4.22167 13.2057 2.04703C16.0233 0.745267 19.1144 0.0581414 22.2154 0Z' fill='%23333'/%3E%3Cpath d='M15.6069 8.0703C18.1156 6.84556 20.9505 6.31625 23.7327 6.51106C26.472 6.69756 29.163 7.59838 31.4539 9.11685C34.0854 10.8369 36.1931 13.3468 37.4358 16.238C38.744 19.2516 39.0891 22.6721 38.4297 25.8903C37.325 25.8872 36.2202 25.8948 35.1155 25.8865C35.9821 22.5709 35.4606 18.914 33.6799 15.9858C32.6114 14.2069 31.111 12.6922 29.3431 11.6086C27.4584 10.4496 25.2715 9.7934 23.0613 9.72016C20.3861 9.61747 17.6853 10.3801 15.4615 11.8737C13.7418 13.0153 12.304 14.5776 11.3055 16.3853C10.1096 18.5312 9.55797 21.0283 9.71773 23.48C9.91668 26.9496 11.6039 30.2939 14.2565 32.5282C16.2339 34.2135 18.729 35.2842 21.3153 35.5319C22.0937 35.6203 22.8782 35.5863 23.6596 35.5931C29.4938 35.5923 35.3272 35.5931 41.1607 35.5923C40.3634 36.7582 39.4357 37.8296 38.4418 38.8301C33.2135 38.8301 27.9859 38.8301 22.7584 38.8301C19.5187 38.8739 16.2701 37.9036 13.5919 36.0741C10.4886 33.9983 8.15406 30.8028 7.11187 27.2139C6.21134 24.149 6.24676 20.8169 7.20832 17.7709C8.51955 13.5643 11.6348 9.9633 15.6069 8.0703Z' fill='%23333'/%3E%3Cpath d='M70.8021 8.74083C73.4359 8.543 76.1382 9.05948 78.4667 10.3242C81.57 11.9643 83.9399 14.8993 84.9543 18.2594C85.9904 21.6558 85.7696 25.4335 84.3062 28.6712C83.0726 31.4175 80.9008 33.7356 78.218 35.1023C73.9174 37.3215 68.4359 37.0791 64.3831 34.4129C61.9453 32.8295 60.0704 30.417 59.09 27.6806C57.9273 24.4518 57.9069 20.8131 59.0719 17.5829C60.0365 14.9061 61.8624 12.5457 64.2324 10.9729C66.1782 9.66958 68.4713 8.91148 70.8021 8.74083ZM70.729 12.3728C69.0591 12.5638 67.4404 13.1966 66.0938 14.2061C63.8006 15.8945 62.3545 18.6188 62.096 21.4451C61.7871 24.4549 62.6982 27.6262 64.7629 29.8665C66.5354 31.8434 69.1646 33.0001 71.8149 32.9979C73.9618 33.0311 76.1163 32.3259 77.8119 31.0014C79.2218 29.9103 80.3198 28.4266 80.9761 26.7692C81.8676 24.5175 82.01 21.9752 81.3763 19.6382C80.8292 17.6229 79.6604 15.7707 78.0342 14.4576C76.0176 12.7986 73.3115 12.0579 70.729 12.3728Z' fill='%23333'/%3E%3Cpath d='M124.998 9.08936C126.184 9.09011 127.372 9.09011 128.559 9.08936C128.56 18.1315 128.56 27.1743 128.559 36.2165C127.373 36.215 126.187 36.2172 125.001 36.215C124.999 34.9238 124.995 33.6326 125.004 32.3414C124.31 33.6839 123.266 34.8664 121.937 35.6003C120.699 36.2957 119.27 36.6008 117.859 36.6038C116.143 36.6204 114.424 36.1115 112.995 35.1609C110.839 33.7541 109.355 31.4224 108.853 28.908C108.48 27.0792 108.589 25.1515 109.183 23.3816C109.67 21.9356 110.484 20.5976 111.565 19.5201C112.772 18.3172 114.322 17.4579 115.99 17.1061C117.456 16.8003 118.999 16.8637 120.435 17.2858C121.845 17.7018 123.122 18.5543 124.041 19.7043C124.415 20.1581 124.722 20.6633 125.004 21.1782C124.991 17.1491 125.005 13.1192 124.998 9.08936ZM117.823 20.3658C116.194 20.5289 114.638 21.3481 113.596 22.6159C112.637 23.7538 112.118 25.2444 112.121 26.7304C112.102 28.2435 112.629 29.7628 113.607 30.9203C114.622 32.1473 116.12 32.9485 117.696 33.1418C119.072 33.3086 120.509 33.0791 121.736 32.4222C123.01 31.7517 124.028 30.6054 124.541 29.2569C125.05 27.9566 125.126 26.5008 124.815 25.1439C124.485 23.71 123.64 22.3909 122.438 21.5377C121.122 20.5749 119.432 20.2012 117.823 20.3658Z' fill='%23333'/%3E%3Cpath d='M17.2933 14.5376C18.8781 13.4843 20.7816 12.9263 22.6814 12.9489C24.8208 12.9534 26.9474 13.7063 28.6196 15.0428C29.8675 16.0312 30.8667 17.3329 31.4997 18.7955C32.4696 21.0185 32.5472 23.6039 31.7469 25.8903C30.563 25.8888 29.3799 25.8918 28.1968 25.8888C28.8404 24.8052 29.1305 23.5223 29.0551 22.2659C28.967 20.6659 28.2518 19.1096 27.0943 18.0034C25.9323 16.8572 24.3136 16.1965 22.6852 16.1859C21.3619 16.1633 20.0348 16.5673 18.9489 17.3254C17.8253 18.0971 16.9482 19.232 16.5104 20.5269C15.9565 22.0998 16.0462 23.8916 16.7613 25.398C17.4877 26.964 18.866 28.2152 20.499 28.7724C21.2458 29.0375 22.0431 29.1401 22.8336 29.1273C29.9813 29.1273 37.1289 29.1273 44.2766 29.1273C43.9465 30.2328 43.5381 31.3155 43.04 32.3553C36.7567 32.3553 30.4734 32.3553 24.1901 32.3553C23.0619 32.3432 21.9233 32.4195 20.8095 32.1929C18.8389 31.8237 16.9942 30.8187 15.6113 29.3644C14.5021 28.2061 13.6814 26.7692 13.2624 25.2182C12.7093 23.1863 12.8269 20.9717 13.6234 19.0205C14.3521 17.197 15.6551 15.6136 17.2933 14.5376Z' fill='%23333'/%3E%3Cpath d='M95.2947 17.4758C96.6413 16.8801 98.1643 16.8106 99.6051 17.0303C101.089 17.2538 102.543 17.8828 103.616 18.9505C104.589 19.8732 105.236 21.1002 105.596 22.3839C105.888 23.4289 105.996 24.5185 105.981 25.6013C105.981 29.1396 105.98 32.6779 105.982 36.2155C104.794 36.2162 103.607 36.214 102.42 36.217C102.42 33.1287 102.42 30.0404 102.42 26.9529C102.411 26.046 102.476 25.1256 102.259 24.2361C101.996 23.003 101.29 21.8425 100.225 21.1485C99.0068 20.3421 97.4567 20.1768 96.0452 20.4471C94.933 20.6615 93.8832 21.255 93.1907 22.1611C92.6534 22.8437 92.318 23.6713 92.1688 24.5245C92.0219 25.2766 92.0641 26.0453 92.0581 26.8071C92.0581 29.943 92.0588 33.0789 92.0581 36.2155C90.8591 36.2162 89.6602 36.2155 88.462 36.2155C88.4575 29.9105 88.462 23.6063 88.459 17.3014C89.6594 17.3006 90.8591 17.3014 92.0596 17.3006C92.0558 18.4053 92.0611 19.5108 92.0566 20.6162C92.737 19.2435 93.8802 18.0822 95.2947 17.4758Z' fill='%23333'/%3E%3Cpath d='M140.204 16.9698C141.94 16.7916 143.728 17.0596 145.318 17.7868C146.768 18.4399 148.047 19.4661 149.004 20.7376C150.93 23.2679 151.477 26.7368 150.557 29.7669C149.77 32.4361 147.758 34.7104 145.198 35.7955C142.085 37.1531 138.27 36.793 135.508 34.7973C134.288 33.9289 133.288 32.7601 132.6 31.4304C131.117 28.5611 131.136 24.9782 132.61 22.1096C133.234 20.9136 134.098 19.8383 135.16 19.004C136.598 17.8547 138.375 17.1495 140.204 16.9698ZM140.436 20.376C138.73 20.57 137.127 21.5222 136.154 22.9417C134.434 25.3829 134.597 29.0269 136.659 31.2212C137.449 32.079 138.487 32.7034 139.618 32.9896C141.253 33.4117 143.063 33.1814 144.508 32.2912C145.692 31.5761 146.612 30.4457 147.092 29.1485C147.627 27.7222 147.64 26.1168 147.184 24.6671C146.784 23.428 146.006 22.3105 144.958 21.5358C143.676 20.5776 142.017 20.1743 140.436 20.376Z' fill='%23333'/%3E%3C/svg%3E"; + + return ( +
+
+ {/* Hero Section */} +
+
+
Component Showcase
+

TileLogo Component

+

+ A tile/card component designed to display brand logos with interactive states. + Supports two shape variants (Square and Rectangle), two color variants (Neutral and Green), + and five interaction states. Sizes are responsive and change based on breakpoints. +

+
+
+ + {/* Shape Variants */} + + + +

Shape Variants

+

+ TileLogo comes in two shape variants with responsive sizing that adapts to different breakpoints. +

+ +
+ {/* Square Shape */} +
+
Square Shape (Default)
+

+ Maintains a 1:1 aspect ratio. Padding adjusts responsively: SM (36px/20px), MD (40px/24px), LG (72px/48px). +

+
+
+ handleClick('square')} + /> +
+
+ handleClick('square-green')} + /> +
+
+
+ + {/* Rectangle Shape */} +
+
Rectangle Shape
+

+ Fixed height with responsive column widths: 2 columns (SM), 4 columns (MD/LG). Height: 96px (SM/MD), 160px (LG). Padding: SM/MD (20px/36px), LG (32px/64px). +

+ + +
+ handleClick('rectangle')} + /> + handleClick('rectangle-green')} + /> +
+ + +
+
+ + + + + {/* Variants Overview */} + + + +

Color Variants

+

+ TileLogo comes in two color variants to support different visual hierarchies and use cases. +

+ +
+ {/* Neutral Variant */} +
+ handleClick('neutral')} + /> +
+ Neutral +
+ General purpose, subtle presentation +
+
+ + {/* Green Variant */} +
+ handleClick('green')} + /> +
+ Green +
+ Featured, primary highlights +
+
+
+ + + + + {/* Interaction States - Neutral */} + + + +

Interaction States: Neutral Variant

+

+ Hover over and interact with the tiles below to see the different states. + Use Tab key to see focus states. +

+ +
+ {/* Default */} +
+ handleClick('neutral-default')} + /> +
+ Default +
+ $gray-200 +
+
+ + {/* Hover - Note: This shows the default, users hover to see state */} +
+ handleClick('neutral-hover')} + /> +
+ Hover +
+ $gray-300 +
+
+ + {/* Focus - Users tab to see */} +
+ handleClick('neutral-focus')} + /> +
+ Focused +
+ $gray-300 + border +
+
+ + {/* Pressed - Users click to see */} +
+ handleClick('neutral-pressed')} + /> +
+ Pressed +
+ $gray-400 +
+
+ + {/* Disabled */} +
+ +
+ Disabled +
+ $gray-100 +
+
+
+ + + + + {/* Interaction States - Green */} + + + +

Interaction States: Green Variant

+

+ The green variant follows the same interaction pattern but uses the brand green color palette. +

+ +
+ {/* Default */} +
+ handleClick('green-default')} + /> +
+ Default +
+ $green-200 +
+
+ + {/* Hover */} +
+ handleClick('green-hover')} + /> +
+ Hover +
+ $green-300 +
+
+ + {/* Focus */} +
+ handleClick('green-focus')} + /> +
+ Focused +
+ $green-300 + border +
+
+ + {/* Pressed */} +
+ handleClick('green-pressed')} + /> +
+ Pressed +
+ $green-400 +
+
+ + {/* Disabled */} +
+ +
+ Disabled +
+ $gray-100 +
+
+
+ + + + + {/* Color Token Reference */} + + + +

Color Token Reference

+

All colors are mapped from styles/_colors.scss. The component uses html.dark selector for dark mode styles.

+ +
+ {/* Light Mode Colors */} +
+
Light Mode
+ +
+ Neutral Variant +
+
+
+
Default: $gray-200 #E6EAF0
+
+
+
+
Hover/Focus: $gray-300 #CAD4DF
+
+
+
+
Pressed: $gray-400 #8A919A
+
+
+
+
Disabled: $gray-100 #F0F3F7
+
+
+
+ +
+ Green Variant +
+
+
+
Default: $green-200 #70EE97
+
+
+
+
Hover/Focus: $green-300 #21E46B
+
+
+
+
Pressed: $green-400 #0DAA3E
+
+
+
+
Disabled: $gray-100 #F0F3F7
+
+
+
+ +
+ Focus Border +
+
+
$black #000000
+
+
+
+ + {/* Dark Mode Colors */} +
+
Dark Mode (html.dark)
+ +
+ Neutral Variant +
+
+
+
Default: $gray-500 #72777E
+
+
+
+
Hover/Focus: $gray-400 #8A919A
+
+
+
+
Pressed: rgba($gray-500, 0.7)
+
+
+
+
Disabled: rgba($gray-500, 0.3)
+
+
+
+ +
+ Green Variant +
+
+
+
Default: $green-200 #70EE97
+
+
+
+
Hover/Focus: $green-300 #21E46B
+
+
+
+
Pressed: $green-400 #0DAA3E
+
+
+
+
Disabled: rgba($gray-500, 0.3)
+
+
+
+ +
+ Focus Border +
+
+
$white #FFFFFF
+
+
+
+
+ + + + + {/* Real-World Examples */} + + + +

Real-World Examples

+ +
+ {/* Partner Logo Grid - Square */} +
+
Partner Logo Grid (Square Shape)
+

Use square shape with neutral variant for general partner showcases in grid layouts.

+
+
+ handleClick('partner-1')} /> +
+
+ handleClick('partner-2')} /> +
+
+ handleClick('partner-3')} /> +
+
+ handleClick('partner-4')} /> +
+
+
+ + {/* Partner Logo Grid - Rectangle */} +
+
Partner Logo Grid (Rectangle Shape)
+

Use rectangle shape for horizontal layouts or featured partner banners.

+ + +
+ handleClick('partner-a')} /> + handleClick('partner-b')} /> + handleClick('partner-c')} /> +
+ + +
+ + {/* Featured Partners */} +
+
Featured Partners
+

Use green variant to highlight featured or primary partners. Works with both shape variants.

+
+
+ handleClick('featured-1')} /> +
+
+ handleClick('featured-2')} /> +
+
+ + +
+ handleClick('featured-banner')} /> +
+ + +
+ + {/* Mixed Grid */} +
+
Mixed Grid (Featured + Regular)
+

Combine variants and shapes to create visual hierarchy in partner showcases.

+
+
+ handleClick('primary')} /> +
+
+ handleClick('partner-a')} /> +
+
+ handleClick('partner-b')} /> +
+
+ handleClick('partner-c')} /> +
+
+ + +
+ handleClick('featured-banner')} /> + handleClick('regular-banner')} /> +
+ + +
+ + {/* With Links */} +
+
Linked Partner Tiles
+

Use href prop to navigate to partner pages. Works with both shape variants.

+
+
+ +
+
+ +
+
+ + +
+ + +
+ + +
+
+ + + + + {/* API Reference */} + + + +

Component API

+
+ {/* Header Row */} +
+
Prop
+
Type
+
Default
+
Description
+
+ + {/* shape */} +
+
shape
+
'square' | 'rectangle'
+
'square'
+
Shape variant - square maintains 1:1 aspect ratio, rectangle has fixed height
+
+ + {/* variant */} +
+
variant
+
'neutral' | 'green'
+
'neutral'
+
Color variant of the tile
+
+ + {/* logo */} +
+
logo
+
string
+
required
+
Logo image source (URL or path)
+
+ + {/* alt */} +
+
alt
+
string
+
required
+
Alt text for accessibility
+
+ + {/* onClick */} +
+
onClick
+
() => void
+
undefined
+
Click handler - renders as button
+
+ + {/* href */} +
+
href
+
string
+
undefined
+
Link destination - renders as anchor
+
+ + {/* disabled */} +
+
disabled
+
boolean
+
false
+
Disabled state - prevents interaction
+
+ + {/* className */} +
+
className
+
string
+
''
+
Additional CSS classes
+
+
+ + + + + {/* Figma References */} + + + +

Design References

+
+
+ Shape Variants - Square: + +
+
+ Shape Variants - Rectangle: + +
+
+ Light Mode:{' '} + + Figma - Light Mode Design + +
+
+ Dark Mode:{' '} + + Figma - Dark Mode Design + +
+
+ Documentation:{' '} + shared/components/TileLogo/TileLogo.md +
+
+ + + +
+
+ ); +} diff --git a/shared/components/TileLogo/TileLogo.md b/shared/components/TileLogo/TileLogo.md new file mode 100644 index 0000000000..d9c5739438 --- /dev/null +++ b/shared/components/TileLogo/TileLogo.md @@ -0,0 +1,348 @@ +# TileLogo Component - Usage Guidelines + +## Overview + +`TileLogo` is a tile/card component designed to display brand logos with interactive states. It supports two shape variants (Square and Rectangle), two color variants (Neutral and Green), and responsive sizing that adapts to different breakpoints. + +**Use TileLogo when:** +- Displaying partner or ecosystem brand logos +- Creating logo grids or showcases +- Highlighting integrations or collaborations +- Building clickable logo galleries +- Creating featured partner banners + +**Don't use TileLogo for:** +- Feature cards with text content (use CardOffgrid) +- Navigation items (use navigation components) +- Image galleries (use gallery components) +- Non-interactive logo displays (use simple image elements) + +--- + +## Shape Variants + +### Square Shape (Default) + +- **Aspect Ratio:** 1:1 (maintains square proportions) +- **Use Cases:** Logo grids, partner showcases, general logo displays +- **Responsive Padding:** + - SM: 36px vertical / 20px horizontal + - MD: 40px vertical / 24px horizontal + - LG: 72px vertical / 48px horizontal + +### Rectangle Shape + +- **Height:** Fixed height with full width +- **Use Cases:** Horizontal layouts, featured partner banners, wide logo displays +- **Responsive Sizing:** + - SM: 96px height, 2 columns width + - MD: 96px height, 4 columns width + - LG: 160px height, 4 columns width +- **Responsive Padding:** + - SM/MD: 20px vertical / 36px horizontal + - LG: 32px vertical / 64px horizontal + +--- + +## Color Variants + +### Neutral Variant (Default) + +Use for general partner showcases and standard logo displays. Provides a subtle, professional appearance. + +**Best for:** +- Standard partner logos +- General logo grids +- Non-featured content + +### Green Variant + +Use to highlight featured or primary partners. Creates visual hierarchy and draws attention. + +**Best for:** +- Featured partners +- Primary integrations +- Important collaborations +- Creating visual emphasis + +--- + +## Component API + +```typescript +interface TileLogoProps { + /** Shape variant: 'square' (default) or 'rectangle' */ + shape?: 'square' | 'rectangle'; + + /** Color variant: 'neutral' (default) or 'green' */ + variant?: 'neutral' | 'green'; + + /** Logo image source (URL or path) */ + logo: string; + + /** Alt text for accessibility */ + alt: string; + + /** Click handler - renders as + ); +}; + +export default TileLogo; diff --git a/shared/components/TileLogo/index.ts b/shared/components/TileLogo/index.ts new file mode 100644 index 0000000000..ae5a381385 --- /dev/null +++ b/shared/components/TileLogo/index.ts @@ -0,0 +1,2 @@ +export { TileLogo, type TileLogoProps } from './TileLogo'; +export { default } from './TileLogo'; diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css index 5c1ed12845..8b2e87d44e 100644 --- a/static/css/devportal2024-v1.css +++ b/static/css/devportal2024-v1.css @@ -15365,6 +15365,195 @@ html.light .bds-card-offgrid--disabled .bds-card-offgrid__icon-container { height: auto; } } +.tile-logo { + appearance: none; + border: none; + background: none; + margin: 0; + font: inherit; + color: inherit; + text-decoration: none; + text-align: center; + position: relative; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + width: 100%; + cursor: pointer; + transition: background-color 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98), opacity 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); +} +.tile-logo:focus { + outline: 2px solid #FFFFFF; + outline-offset: 1px; +} +.tile-logo:focus:not(:focus-visible) { + outline: none; +} +.tile-logo:focus-visible { + outline: 2px solid #FFFFFF; + outline-offset: 2px; +} + +.tile-logo--square { + aspect-ratio: 1; + padding: 36px 20px; +} +@media (min-width: 576px) { + .tile-logo--square { + padding: 40px 24px; + } +} +@media (min-width: 992px) { + .tile-logo--square { + padding: 72px 48px; + } +} + +.tile-logo--rectangle { + height: 96px; + padding: 20px 36px; + width: calc((100% - 8px * 3) / 4 * 2 + 8px * 1); +} +@media (min-width: 576px) { + .tile-logo--rectangle { + width: calc((100% - 8px * 7) / 8 * 4 + 8px * 3); + } +} +@media (min-width: 992px) { + .tile-logo--rectangle { + height: 160px; + padding: 32px 64px; + width: calc((100% - 8px * 11) / 12 * 4 + 8px * 3); + } +} + +.tile-logo__overlay { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + clip-path: inset(100% 0 0 0); + transition: clip-path 200ms cubic-bezier(0.98, 0.12, 0.12, 0.98); +} + +.tile-logo--hovered .tile-logo__overlay { + clip-path: inset(0 0 0 0); +} + +.tile-logo__image { + position: relative; + z-index: 1; + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + object-fit: contain; +} + +.tile-logo--neutral { + background-color: #E6EAF0; +} +.tile-logo--neutral .tile-logo__overlay { + background-color: #CAD4DF; +} +.tile-logo--neutral:active:not(.tile-logo--disabled) .tile-logo__overlay { + background-color: #8A919A; + clip-path: inset(0 0 0 0); +} + +.tile-logo--green { + background-color: #70EE97; +} +.tile-logo--green .tile-logo__overlay { + background-color: #21E46B; +} +.tile-logo--green:active:not(.tile-logo--disabled) .tile-logo__overlay { + background-color: #0DAA3E; + clip-path: inset(0 0 0 0); +} + +.tile-logo--disabled { + background-color: #F0F3F7; + cursor: not-allowed; + pointer-events: none; +} +.tile-logo--disabled:focus, .tile-logo--disabled:focus-visible { + outline: none; +} +.tile-logo--disabled .tile-logo__image { + opacity: 0.5; +} + +html.dark .tile-logo:focus { + outline-color: #FFFFFF; +} +html.dark .tile-logo:focus-visible { + outline-color: #FFFFFF; +} +html.dark .tile-logo--neutral { + background-color: #72777E; +} +html.dark .tile-logo--neutral .tile-logo__overlay { + background-color: #8A919A; +} +html.dark .tile-logo--neutral:active:not(.tile-logo--disabled) .tile-logo__overlay { + background-color: rgba(114, 119, 126, 0.7); + clip-path: inset(0 0 0 0); +} +html.dark .tile-logo--green { + background-color: #70EE97; +} +html.dark .tile-logo--green .tile-logo__overlay { + background-color: #21E46B; +} +html.dark .tile-logo--green:active:not(.tile-logo--disabled) .tile-logo__overlay { + background-color: #0DAA3E; + clip-path: inset(0 0 0 0); +} +html.dark .tile-logo--disabled { + background-color: rgba(114, 119, 126, 0.3); + opacity: 1; +} +html.dark .tile-logo--disabled .tile-logo__image { + opacity: 0.5; +} + +html.light .tile-logo:focus { + outline-color: #000000; +} +html.light .tile-logo:focus-visible { + outline-color: #000000; +} +html.light .tile-logo--neutral { + background-color: #E6EAF0; +} +html.light .tile-logo--neutral .tile-logo__overlay { + background-color: #CAD4DF; +} +html.light .tile-logo--neutral:active:not(.tile-logo--disabled) .tile-logo__overlay { + background-color: #8A919A; + clip-path: inset(0 0 0 0); +} +html.light .tile-logo--green { + background-color: #70EE97; +} +html.light .tile-logo--green .tile-logo__overlay { + background-color: #21E46B; +} +html.light .tile-logo--green:active:not(.tile-logo--disabled) .tile-logo__overlay { + background-color: #0DAA3E; + clip-path: inset(0 0 0 0); +} +html.light .tile-logo--disabled { + background-color: #F0F3F7; + opacity: 1; +} +html.light .tile-logo--disabled .tile-logo__image { + opacity: 0.5; +} + pre { color: #FFFFFF; background-color: #232325; diff --git a/styles/xrpl.scss b/styles/xrpl.scss index 6c48c26046..6723c75bfa 100644 --- a/styles/xrpl.scss +++ b/styles/xrpl.scss @@ -93,6 +93,7 @@ $line-height-base: 1.5; @import "../shared/components/Link/_link.scss"; @import "../shared/components/Divider/Divider.scss"; @import "../shared/components/CardOffgrid/CardOffgrid.scss"; +@import "../shared/components/TileLogo/TileLogo.scss"; @import "_code-tabs.scss"; @import "_code-walkthrough.scss"; @import "_diagrams.scss";