ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-12-05 16:57:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

add primary dark mode

Browse Source
This commit is contained in:
akcodez
2025-12-01 14:17:25 -08:00
parent f20177b5f9
commit bdc69f047a
2 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
shared/components/Button/Button.scss
View File

@@ -717,4 +717,45 @@ $bds-btn-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
gap: 16px;
}
}
}
// =============================================================================
// Dark Mode Styles - Primary Button Only
// =============================================================================
// All styles remain the same as light mode EXCEPT focus state uses white outline
html.dark {
.bds-btn--primary {
// Focus State (keyboard navigation) - with icon - Desktop
&:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
outline: $bds-btn-focus-border-width solid $white;
outline-offset: 2px;
padding: 8px 13px 8px 20px;
gap: 22px;
}
// Focus State (no icon) - Desktop
&:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon {
outline: $bds-btn-focus-border-width solid $white;
outline-offset: 2px;
padding: 8px 20px;
}
// Focus State (keyboard navigation) - with icon - Tablet & Mobile (≤1023px)
@media (max-width: 1023px) {
&:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
outline: $bds-btn-focus-border-width solid $white;
outline-offset: 2px;
padding: 8px 10px 8px 16px;
gap: 21px;
}
// Focus State (no icon) - Tablet & Mobile
&:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon {
outline: $bds-btn-focus-border-width solid $white;
outline-offset: 2px;
padding: 8px 16px;
}
}
}
}

25
static/css/devportal2024-v1.css
View File

@@ -11541,6 +11541,31 @@ button[disabled=disabled] {
}
}
html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
padding: 8px 13px 8px 20px;
gap: 22px;
}
html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
padding: 8px 20px;
}
@media (max-width: 1023px) {
html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled):not(.bds-btn--no-icon) {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
padding: 8px 10px 8px 16px;
gap: 21px;
}
html.dark .bds-btn--primary:focus-visible:not(:disabled):not(.bds-btn--disabled).bds-btn--no-icon {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
padding: 8px 16px;
}
}
/* TABLE STYLING */
article table {
clear: right;