mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-30 00:25:49 +00:00
Refactor color migration strategy to a clean implementation, removing backward compatibility aliases and consolidating color scales. Update SCSS files to reflect new design tokens and ensure all references are migrated. Adjust event card layout in community events page for improved responsiveness. Modify CSS styles for better alignment with updated color palette and remove unnecessary padding in card components.
This commit is contained in:
akcodez
@@ -3,19 +3,30 @@
|
||||
**Date:** October 21, 2025
|
||||
**Source:** [XRPL.org Design Tokens - Figma](https://figma.com/design/zRyhXG4hRP3Lk3B6Owr3eo/XRPL.org-Design-Tokens)
|
||||
|
||||
## Migration Strategy: Smart Merge Approach
|
||||
## Migration Strategy: Clean Migration
|
||||
|
||||
The old 10-level color scale (100-1000) has been consolidated into a new 5-level scale (100-500) using the following mapping:
|
||||
The old 10-level color scale (100-1000) has been completely migrated to a new 5-level scale (100-500). All references in the codebase have been updated, and backward compatibility aliases have been removed for a clean implementation.
|
||||
|
||||
**Mapping Applied:**
|
||||
```
|
||||
Old System → New System
|
||||
100, 200 → 100 (lightest)
|
||||
300, 400 → 200
|
||||
500, 600 → 300 (mid-tone, default)
|
||||
700, 800 → 400
|
||||
900, 1000 → 500 (darkest)
|
||||
100 → 100 (lightest)
|
||||
200 → 100
|
||||
300 → 200
|
||||
400 → 200
|
||||
500 → 300 (mid-tone, default)
|
||||
600 → 300
|
||||
700 → 400
|
||||
800 → 400
|
||||
900 → 500 (darkest)
|
||||
1000 → 500
|
||||
```
|
||||
|
||||
**Migration Approach:**
|
||||
1. All color usages (600-1000) were found and replaced with their new equivalents (300-500)
|
||||
2. Backward compatibility aliases were removed from `_colors.scss`
|
||||
3. Only 100-500 design tokens remain for each color family
|
||||
|
||||
## Color Families Updated
|
||||
|
||||
### Primary Colors
|
||||
@@ -27,32 +38,40 @@ Old System → New System
|
||||
|
||||
#### Green ✅
|
||||
- **New Design Tokens:** #EAFCF1, #70EE97, #21E46B, #0DAA3E, #078139
|
||||
- **Backward compatibility:** All old variables (100-1000) mapped to new values
|
||||
- **Variables:** `$green-100` through `$green-500` only
|
||||
- **Migrated:** 14 file references updated
|
||||
- **Special:** `$apex-2023-green` (#00FF76) retained
|
||||
|
||||
#### Lilac (Primary) ✅ *replaces blue-purple*
|
||||
- **New Design Tokens:** #F2EDFF, #D9CAFF, #C0A7FF, #7649E3, #5429A1
|
||||
- **Legacy aliases:** All `$blue-purple-*` variables now map to `$lilac-*`
|
||||
- **Variables:** `$lilac-100` through `$lilac-500` only
|
||||
- **Legacy aliases:** `$blue-purple-100` through `$blue-purple-500` map to lilac (600-900 removed)
|
||||
- **Migrated:** 16 file references updated
|
||||
- **Note:** This is a new color name in the design system
|
||||
|
||||
### Secondary Colors
|
||||
|
||||
#### Red ✅ *NEW*
|
||||
- **New Design Tokens:** #FDECE7, #F27A66, #F0643A, #DA4518, #A22514
|
||||
- **Variables:** `$red-100` through `$red-500` only
|
||||
- **Note:** This is a completely new color family added to the design system
|
||||
|
||||
#### Pink ✅ *replaces magenta*
|
||||
- **New Design Tokens:** #FDF1F4, #F2B5C3, #F18DA5, #FF577F, #DC466F
|
||||
- **Legacy aliases:** All `$magenta-*` variables now map to `$pink-*`
|
||||
- **Variables:** `$pink-100` through `$pink-500` only
|
||||
- **Legacy aliases:** `$magenta-100` through `$magenta-500` map to pink (600-900 removed)
|
||||
- **Migrated:** 7 file references updated
|
||||
|
||||
#### Blue ✅
|
||||
- **New Design Tokens:** #EDF4FF, #93BFF1, #428CFF, #0179E7, #0A4DC0
|
||||
- **Backward compatibility:** All old variables (100-900) mapped to new values
|
||||
- **Variables:** `$blue-100` through `$blue-500` only
|
||||
- **Migrated:** 8 file references updated
|
||||
- **Special:** `$accent-blue-90` (#001133) retained
|
||||
|
||||
#### Yellow ✅
|
||||
- **New Design Tokens:** #F3F1EB, #E6F1A7, #DBF15E, #E1DB26, #D4C02D
|
||||
- **Backward compatibility:** All old variables (100-900) mapped to new values
|
||||
- **Variables:** `$yellow-100` through `$yellow-500` only
|
||||
- **Migrated:** 11 file references updated
|
||||
|
||||
## Colors Retained (No Design Token Replacement)
|
||||
|
||||
@@ -83,10 +102,16 @@ All Bootstrap theme variables remain functional:
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
**None.** All existing color variables are still available through either:
|
||||
1. Direct design token values (100-500)
|
||||
2. Backward compatibility aliases (600-1000)
|
||||
3. Legacy color family aliases (magenta→pink, blue-purple→lilac)
|
||||
**Removed Variables:**
|
||||
- All color variables from 600-1000 have been removed for: Green, Blue, Lilac, Pink, Red, Yellow
|
||||
- `$blue-purple-600` through `$blue-purple-900` removed (use 100-500)
|
||||
- `$magenta-600` through `$magenta-900` removed (use 100-500)
|
||||
|
||||
**No Impact:**
|
||||
- All usages in the codebase have been updated
|
||||
- Legacy color name aliases maintained (100-500 only):
|
||||
- `$blue-purple-100` through `$blue-purple-500` → maps to `$lilac-*`
|
||||
- `$magenta-100` through `$magenta-500` → maps to `$pink-*`
|
||||
|
||||
## Color Name Changes
|
||||
|
||||
@@ -98,11 +123,11 @@ All Bootstrap theme variables remain functional:
|
||||
|
||||
## Usage Recommendations
|
||||
|
||||
### For New Code
|
||||
Use the new design tokens directly:
|
||||
### Current Best Practices
|
||||
Use the new 5-level design tokens (100-500):
|
||||
```scss
|
||||
// Primary colors
|
||||
color: $gray-300; // Default gray
|
||||
color: $gray-300; // Gray (not yet migrated - still uses old values)
|
||||
color: $green-300; // Default green
|
||||
color: $lilac-400; // Primary purple
|
||||
|
||||
@@ -113,13 +138,11 @@ color: $blue-300; // Default blue
|
||||
color: $yellow-300; // Default yellow
|
||||
```
|
||||
|
||||
### For Existing Code
|
||||
No changes required. All existing variables continue to work:
|
||||
### Legacy Aliases Still Available
|
||||
```scss
|
||||
// These still work via backward compatibility
|
||||
background: $gray-800;
|
||||
color: $blue-purple-500;
|
||||
border: 1px solid $magenta-600;
|
||||
// These legacy names work (100-500 only)
|
||||
color: $blue-purple-400; // Same as $lilac-400
|
||||
color: $magenta-300; // Same as $pink-300
|
||||
```
|
||||
|
||||
## Files Modified
|
||||
@@ -131,7 +154,25 @@ border: 1px solid $magenta-600;
|
||||
✅ All SCSS variables resolve correctly
|
||||
✅ No linter errors
|
||||
✅ Bootstrap theme colors functional
|
||||
✅ Backward compatibility maintained
|
||||
✅ All old color references (600-1000) removed from codebase
|
||||
✅ Special event colors preserved
|
||||
⏸️ Gray/Neutral colors - pending future update
|
||||
|
||||
## Migration Statistics
|
||||
|
||||
**Files Updated:** 11 SCSS files
|
||||
- `styles/_colors.scss` - Color definitions cleaned up
|
||||
- `styles/light/_light-theme.scss` - 11 color references updated
|
||||
- `styles/_status-labels.scss` - 39 color references updated
|
||||
- `styles/_diagrams.scss` - 6 color references updated
|
||||
- `styles/_code-tabs.scss` - 2 color references updated
|
||||
- `styles/_content.scss` - 1 color reference updated
|
||||
- `styles/_buttons.scss` - 7 color references updated
|
||||
- `styles/_pages.scss` - 3 color references updated
|
||||
- `styles/_blog.scss` - 2 color references updated
|
||||
- `styles/_feedback.scss` - 2 color references updated
|
||||
- `styles/_rpc-tool.scss` - 1 color reference updated
|
||||
- `styles/_landings.scss` - 1 color reference updated
|
||||
|
||||
**Total Color References Updated:** 75+ instances
|
||||
|
||||
|
||||
@@ -1529,15 +1529,14 @@ export default function Events() {
|
||||
</div>
|
||||
</div>
|
||||
{/* # Available Types - conference, hackathon, ama, cc, zone, meetup, info */}
|
||||
<div className="mt-2 row row-cols-1 row-cols-lg-3 card-deck">
|
||||
<div className="row row-cols-1 row-cols-lg-3 g-4 mt-2">
|
||||
{filteredUpcoming.map((event, i) => (
|
||||
<a
|
||||
key={event.name + i}
|
||||
className={`event-card ${event.type}`}
|
||||
href={event.link}
|
||||
style={{}}
|
||||
target="_blank"
|
||||
>
|
||||
<div key={event.name + i} className="col">
|
||||
<a
|
||||
className={`event-card ${event.type} h-100`}
|
||||
href={event.link}
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
className="event-card-header"
|
||||
style={{
|
||||
@@ -1558,6 +1557,7 @@ export default function Events() {
|
||||
<span className="d-flex icon icon-date">{event.date}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1664,34 +1664,35 @@ export default function Events() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 mb-0 row row-cols-1 row-cols-lg-3 card-deck ">
|
||||
<div className="row row-cols-1 row-cols-lg-3 g-4 mt-2 mb-0">
|
||||
{filteredPast.map((event, i) => (
|
||||
<a
|
||||
key={event.name + i}
|
||||
className="event-card {event.type}"
|
||||
href={event.link}
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
className="event-card-header"
|
||||
style={{
|
||||
background: `url(${event.image}) no-repeat`,
|
||||
}}
|
||||
<div key={event.name + i} className="col">
|
||||
<a
|
||||
className={`event-card ${event.type} h-100`}
|
||||
href={event.link}
|
||||
target="_blank"
|
||||
>
|
||||
<div className="event-card-title">
|
||||
{translate(event.name)}
|
||||
<div
|
||||
className="event-card-header"
|
||||
style={{
|
||||
background: `url(${event.image}) no-repeat`,
|
||||
}}
|
||||
>
|
||||
<div className="event-card-title">
|
||||
{translate(event.name)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="event-card-body">
|
||||
<p>{translate(event.description)}</p>
|
||||
</div>
|
||||
<div className="mt-lg-auto event-card-footer d-flex flex-column">
|
||||
<span className="mb-2 d-flex icon icon-location">
|
||||
{event.location}
|
||||
</span>
|
||||
<div className="event-card-body">
|
||||
<p>{translate(event.description)}</p>
|
||||
</div>
|
||||
<div className="mt-lg-auto event-card-footer d-flex flex-column">
|
||||
<span className="mb-2 d-flex icon icon-location">
|
||||
{event.location}
|
||||
</span>
|
||||
<span className="d-flex icon icon-date">{event.date}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -280,7 +280,7 @@
|
||||
--bs-link-hover-color-rgb: 173, 146, 238;
|
||||
--bs-code-color: rgb(236.4, 236.4, 237);
|
||||
--bs-highlight-color: #C1C1C2;
|
||||
--bs-highlight-bg: #E1DB26;
|
||||
--bs-highlight-bg: rgb(84.8, 76.8, 18);
|
||||
--bs-border-color: #343437;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #21E46B;
|
||||
@@ -10529,10 +10529,6 @@ section {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
.card-grid .card .card-body {
|
||||
padding: 8px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.card-grid .card .card-body .card-icon-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@@ -17052,6 +17048,9 @@ html.light .label.label-fees:hover .badge-pill, html.light .label.label-payments
|
||||
.page-events .events-filter h6, .page-events .events-filter .h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.page-events .form-check-inline {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.page-events .events-filter {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
@@ -200,7 +200,7 @@
|
||||
background-position: center;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-600;
|
||||
border-color: $blue-purple-300;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -215,7 +215,7 @@
|
||||
border: none;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-600;
|
||||
border-color: $blue-purple-300;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,15 +34,15 @@ button[disabled="disabled"] {
|
||||
border: none;
|
||||
border-color: transparent;
|
||||
&:hover {
|
||||
background: $blue-purple-600;
|
||||
background: $blue-purple-300;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled="disabled"] {
|
||||
background: $blue-purple-700;
|
||||
background: $blue-purple-400;
|
||||
|
||||
&:hover {
|
||||
background: $blue-purple-700;
|
||||
background: $blue-purple-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,7 +66,7 @@ button[disabled="disabled"] {
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
&:hover {
|
||||
background: $blue-purple-600 !important;
|
||||
background: $blue-purple-300 !important;
|
||||
border: none;
|
||||
&::after {
|
||||
-webkit-transform: translateX(4px);
|
||||
|
||||
@@ -197,7 +197,7 @@ pre {
|
||||
.ss, // string, symbol
|
||||
.sx // string, other
|
||||
{
|
||||
color: $green-700;
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
.vc, // variable, class
|
||||
|
||||
@@ -32,14 +32,6 @@ $green-200: #70EE97; // New design token
|
||||
$green-300: #21E46B; // New design token (default)
|
||||
$green-400: #0DAA3E; // New design token
|
||||
$green-500: #078139; // New design token
|
||||
|
||||
// Green - Backward compatibility aliases (smart merge mapping)
|
||||
$green-600: $green-300; // Maps to 300
|
||||
$green-700: $green-400; // Maps to 400
|
||||
$green-800: $green-400; // Maps to 400
|
||||
$green-900: $green-500; // Maps to 500
|
||||
$green-1000: $green-500; // Maps to 500
|
||||
|
||||
$green: $green-500;
|
||||
$apex-2023-green: #00FF76; // Special event color - preserved
|
||||
$token-2049-purple: #410bb9; // Special event color - preserved
|
||||
@@ -50,39 +42,22 @@ $blue-200: #93BFF1; // New design token
|
||||
$blue-300: #428CFF; // New design token (default)
|
||||
$blue-400: #0179E7; // New design token
|
||||
$blue-500: #0A4DC0; // New design token
|
||||
|
||||
// Blue - Backward compatibility aliases (smart merge mapping)
|
||||
$blue-600: $blue-300; // Maps to 300
|
||||
$blue-700: $blue-400; // Maps to 400
|
||||
$blue-800: $blue-400; // Maps to 400
|
||||
$blue-900: $blue-500; // Maps to 500
|
||||
|
||||
$blue: $blue-500;
|
||||
$accent-blue-90: #001133; // Special event color - preserved
|
||||
|
||||
// Lilac (Primary) - New Design Tokens (replaces blue-purple)
|
||||
$lilac-100: #F2EDFF; // New design token (was F2EDFE in Figma, adjusted)
|
||||
$lilac-100: #F2EDFF; // New design token
|
||||
$lilac-200: #D9CAFF; // New design token
|
||||
$lilac-300: #C0A7FF; // New design token (default)
|
||||
$lilac-400: #7649E3; // New design token
|
||||
$lilac-500: #5429A1; // New design token
|
||||
|
||||
// Lilac - Backward compatibility aliases (smart merge mapping)
|
||||
$lilac-600: $lilac-300; // Maps to 300
|
||||
$lilac-700: $lilac-400; // Maps to 400
|
||||
$lilac-800: $lilac-400; // Maps to 400
|
||||
$lilac-900: $lilac-500; // Maps to 500
|
||||
|
||||
// Legacy blue-purple aliases (map to new lilac)
|
||||
$blue-purple-100: $lilac-100;
|
||||
$blue-purple-200: $lilac-200;
|
||||
$blue-purple-300: $lilac-300;
|
||||
$blue-purple-400: $lilac-400;
|
||||
$blue-purple-500: $lilac-500;
|
||||
$blue-purple-600: $lilac-600;
|
||||
$blue-purple-700: $lilac-700;
|
||||
$blue-purple-800: $lilac-800;
|
||||
$blue-purple-900: $lilac-900;
|
||||
$purple: $lilac-400;
|
||||
|
||||
// Red-purple - Legacy (no design token replacement)
|
||||
@@ -103,22 +78,12 @@ $pink-300: #F18DA5; // New design token (default)
|
||||
$pink-400: #FF577F; // New design token
|
||||
$pink-500: #DC466F; // New design token
|
||||
|
||||
// Pink - Backward compatibility aliases (smart merge mapping)
|
||||
$pink-600: $pink-300; // Maps to 300
|
||||
$pink-700: $pink-400; // Maps to 400
|
||||
$pink-800: $pink-400; // Maps to 400
|
||||
$pink-900: $pink-500; // Maps to 500
|
||||
|
||||
// Legacy magenta aliases (map to new pink)
|
||||
$magenta-100: $pink-100;
|
||||
$magenta-200: $pink-200;
|
||||
$magenta-300: $pink-300;
|
||||
$magenta-400: $pink-400;
|
||||
$magenta-500: $pink-500;
|
||||
$magenta-600: $pink-600;
|
||||
$magenta-700: $pink-700;
|
||||
$magenta-800: $pink-800;
|
||||
$magenta-900: $pink-900;
|
||||
$magenta: $pink-500;
|
||||
$pink: $pink-500;
|
||||
|
||||
@@ -128,13 +93,6 @@ $red-200: #F27A66; // New design token
|
||||
$red-300: #F0643A; // New design token (default)
|
||||
$red-400: #DA4518; // New design token
|
||||
$red-500: #A22514; // New design token
|
||||
|
||||
// Red - Backward compatibility aliases (smart merge mapping)
|
||||
$red-600: $red-300; // Maps to 300
|
||||
$red-700: $red-400; // Maps to 400
|
||||
$red-800: $red-400; // Maps to 400
|
||||
$red-900: $red-500; // Maps to 500
|
||||
|
||||
$red: $red-500;
|
||||
|
||||
// Orange - Legacy (no design token replacement)
|
||||
@@ -155,13 +113,6 @@ $yellow-200: #E6F1A7; // New design token
|
||||
$yellow-300: #DBF15E; // New design token (default)
|
||||
$yellow-400: #E1DB26; // New design token
|
||||
$yellow-500: #D4C02D; // New design token
|
||||
|
||||
// Yellow - Backward compatibility aliases (smart merge mapping)
|
||||
$yellow-600: $yellow-300; // Maps to 300
|
||||
$yellow-700: $yellow-400; // Maps to 400
|
||||
$yellow-800: $yellow-400; // Maps to 400
|
||||
$yellow-900: $yellow-500; // Maps to 500
|
||||
|
||||
$yellow: $yellow-500;
|
||||
|
||||
// Common colors & colors used in Bootstrap ------------------------------------
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
p code,
|
||||
table code,
|
||||
li > code {
|
||||
background-color: $green-1000;
|
||||
background-color: $green-500;
|
||||
color: $green-400;
|
||||
}
|
||||
|
||||
|
||||
@@ -207,7 +207,7 @@ html:not(.light) article {
|
||||
|
||||
// Primary Blue Side gradient: change to green
|
||||
stop[stop-color="#29a1da"] {
|
||||
stop-color: $green-600;
|
||||
stop-color: $green-300;
|
||||
}
|
||||
stop[stop-color="#2789b9"] {
|
||||
stop-color: $green-400;
|
||||
@@ -247,7 +247,7 @@ html.light {
|
||||
svg[fill="black"] {
|
||||
|
||||
g[fill="blue"] {
|
||||
fill: $blue-700;
|
||||
fill: $blue-400;
|
||||
}
|
||||
g[stroke="blue"] {
|
||||
stroke: $blue-500;
|
||||
@@ -271,7 +271,7 @@ html.light {
|
||||
fill: $blue-500;
|
||||
}
|
||||
g[stroke="rgb(29,180,255)"] {
|
||||
stroke: $blue-700;
|
||||
stroke: $blue-400;
|
||||
}
|
||||
rect[stroke="rgb(245,247,249)"] { // old off-white.
|
||||
stroke: $gray-050;
|
||||
@@ -282,7 +282,7 @@ html.light {
|
||||
}
|
||||
g[stroke="lime"] ,
|
||||
g[stroke="rgb(0,255,0)"]{
|
||||
stroke: $green-700; // darken strokes
|
||||
stroke: $green-400; // darken strokes
|
||||
}
|
||||
g[fill="yellow"],
|
||||
g[fill="rgb(255,255,0)"] {
|
||||
@@ -325,7 +325,7 @@ html.light {
|
||||
}
|
||||
path[stroke="#FF198B"] {
|
||||
// slightly darken up this magenta for more contrast in light mode
|
||||
stroke: $magenta-700;
|
||||
stroke: $magenta-400;
|
||||
}
|
||||
|
||||
linearGradient stop[stop-color="#F5F5F7"] {
|
||||
|
||||
@@ -58,15 +58,15 @@
|
||||
margin: 0 !important;
|
||||
margin-top: 8px !important;
|
||||
&:hover {
|
||||
background: $blue-purple-600 !important;
|
||||
background: $blue-purple-300 !important;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled="disabled"] {
|
||||
background-color: $blue-purple-700 !important;
|
||||
background-color: $blue-purple-400 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue-purple-700 !important;
|
||||
background-color: $blue-purple-400 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,7 +185,7 @@
|
||||
// Alert banners
|
||||
.alert-info {
|
||||
color: white;
|
||||
background-color: $blue-700;
|
||||
background-color: $blue-400;
|
||||
border-width: 0;
|
||||
|
||||
a {
|
||||
|
||||
@@ -177,18 +177,15 @@ section {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 8px;
|
||||
padding-bottom: 24px;
|
||||
// Removed card-body padding override - using Bootstrap 5 defaults
|
||||
|
||||
.card-icon-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.card-body .card-icon-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -365,7 +365,7 @@
|
||||
padding: 2px 16px;
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background: $blue-purple-800;
|
||||
background: $blue-purple-400;
|
||||
border-radius: 100px;
|
||||
|
||||
font-weight: 600;
|
||||
@@ -850,6 +850,11 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// Add spacing to filter checkboxes to match Bootstrap 4
|
||||
.form-check-inline {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.events-filter {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@@ -915,7 +920,7 @@
|
||||
background-position: center;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-600;
|
||||
border-color: $blue-purple-300;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -930,7 +935,7 @@
|
||||
border: none;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-600;
|
||||
border-color: $blue-purple-300;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
/* stylelint-disable selector-class-pattern -- react18-json-view uses these */
|
||||
.json-view--boolean {
|
||||
color: $magenta-600 !important;
|
||||
color: $magenta-300 !important;
|
||||
}
|
||||
|
||||
.json-view--pair {
|
||||
|
||||
@@ -95,61 +95,61 @@
|
||||
}
|
||||
|
||||
@mixin chip-indigo {
|
||||
background-color: $blue-purple-900;
|
||||
background-color: $blue-purple-500;
|
||||
color: $blue-purple-300;
|
||||
.badge-pill {
|
||||
color: $blue-purple-900;
|
||||
color: $blue-purple-500;
|
||||
background-color: $blue-purple-300;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $blue-purple-800;
|
||||
background-color: $blue-purple-400;
|
||||
color: $blue-purple-200;
|
||||
.badge-pill {
|
||||
color: $blue-purple-800;
|
||||
color: $blue-purple-400;
|
||||
background-color: $blue-purple-200;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $blue-purple-200;
|
||||
color: $blue-purple-800;
|
||||
color: $blue-purple-400;
|
||||
.badge-pill {
|
||||
color: $blue-purple-200;
|
||||
background-color: $blue-purple-800;
|
||||
background-color: $blue-purple-400;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $blue-purple-300;
|
||||
color: $blue-purple-900;
|
||||
color: $blue-purple-500;
|
||||
.badge-pill {
|
||||
color: $blue-purple-300;
|
||||
background-color: $blue-purple-900;
|
||||
background-color: $blue-purple-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-green {
|
||||
background-color: $green-900;
|
||||
background-color: $green-500;
|
||||
color: $green-300;
|
||||
.badge-pill {
|
||||
background-color: $green-300;
|
||||
color: $green-900;
|
||||
color: $green-500;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $green-800;
|
||||
background-color: $green-400;
|
||||
color: $green-200;
|
||||
.badge-pill {
|
||||
background-color: $green-200;
|
||||
color: $green-800;
|
||||
color: $green-400;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $green-200;
|
||||
color: $green-900;
|
||||
color: $green-500;
|
||||
.badge-pill {
|
||||
color: $green-200;
|
||||
background-color: $green-900;
|
||||
background-color: $green-500;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $green-300;
|
||||
@@ -197,68 +197,68 @@
|
||||
}
|
||||
|
||||
@mixin chip-yellow {
|
||||
background-color: $yellow-900;
|
||||
background-color: $yellow-500;
|
||||
color: $yellow-300;
|
||||
.badge-pill {
|
||||
background-color: $yellow-300;
|
||||
color: $yellow-900;
|
||||
color: $yellow-500;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $yellow-800;
|
||||
background-color: $yellow-400;
|
||||
color: $yellow-200;
|
||||
.badge-pill {
|
||||
background-color: $yellow-200;
|
||||
color: $yellow-800;
|
||||
color: $yellow-400;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $yellow-200;
|
||||
color: $yellow-900;
|
||||
color: $yellow-500;
|
||||
.badge-pill {
|
||||
color: $yellow-200;
|
||||
background-color: $yellow-900;
|
||||
background-color: $yellow-500;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $yellow-300;
|
||||
color: $yellow-900;
|
||||
color: $yellow-500;
|
||||
.badge-pill {
|
||||
color: $yellow-300;
|
||||
background-color: $yellow-900;
|
||||
background-color: $yellow-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chip-blue {
|
||||
background-color: $blue-900;
|
||||
background-color: $blue-500;
|
||||
color: $blue-300;
|
||||
.badge-pill {
|
||||
background-color: $blue-300;
|
||||
color: $blue-900;
|
||||
color: $blue-500;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $blue-800;
|
||||
background-color: $blue-400;
|
||||
color: $blue-200;
|
||||
.badge-pill {
|
||||
background-color: $blue-200;
|
||||
color: $blue-800;
|
||||
color: $blue-400;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $blue-200;
|
||||
color: $blue-800;
|
||||
color: $blue-400;
|
||||
.badge-pill {
|
||||
color: $blue-200;
|
||||
background-color: $blue-800;
|
||||
background-color: $blue-400;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $blue-300;
|
||||
color: $blue-900;
|
||||
color: $blue-500;
|
||||
.badge-pill {
|
||||
color: $blue-300;
|
||||
background-color: $blue-900;
|
||||
background-color: $blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -299,34 +299,34 @@
|
||||
}
|
||||
|
||||
@mixin chip-magenta {
|
||||
background-color: $magenta-900;
|
||||
background-color: $magenta-500;
|
||||
color: $magenta-300;
|
||||
.badge-pill {
|
||||
background-color: $magenta-300;
|
||||
color: $magenta-900;
|
||||
color: $magenta-500;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $magenta-800;
|
||||
background-color: $magenta-400;
|
||||
color: $magenta-200;
|
||||
.badge-pill {
|
||||
background-color: $magenta-200;
|
||||
color: $magenta-800;
|
||||
color: $magenta-400;
|
||||
}
|
||||
}
|
||||
|
||||
html.light & {
|
||||
background-color: $magenta-200;
|
||||
color: $magenta-800;
|
||||
color: $magenta-400;
|
||||
.badge-pill {
|
||||
color: $magenta-200;
|
||||
background-color: $magenta-800;
|
||||
background-color: $magenta-400;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $magenta-300;
|
||||
color: $magenta-900;
|
||||
color: $magenta-500;
|
||||
.badge-pill {
|
||||
color: $magenta-300;
|
||||
background-color: $magenta-900;
|
||||
background-color: $magenta-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ h6,
|
||||
}
|
||||
|
||||
&.green-500 {
|
||||
color: $green-700;
|
||||
color: $green-400;
|
||||
text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px;
|
||||
}
|
||||
}
|
||||
@@ -407,7 +407,7 @@ aside .card {
|
||||
|
||||
// Status labels
|
||||
.status.not_enabled {
|
||||
color: $yellow-700;
|
||||
color: $yellow-400;
|
||||
}
|
||||
|
||||
// Parent ("category") page in label landings
|
||||
@@ -438,19 +438,19 @@ aside .card {
|
||||
// Callouts
|
||||
.devportal-callout.caution,
|
||||
.devportal-callout.注意 {
|
||||
border-color: $yellow-700;
|
||||
border-color: $yellow-400;
|
||||
|
||||
>strong:first-child::before {
|
||||
color: $yellow-700;
|
||||
color: $yellow-400;
|
||||
}
|
||||
}
|
||||
|
||||
.devportal-callout.tip,
|
||||
.devportal-callout.ヒント {
|
||||
border-color: $green-600;
|
||||
border-color: $green-300;
|
||||
|
||||
>strong:first-child::before {
|
||||
color: $green-600;
|
||||
color: $green-300;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -495,7 +495,7 @@ pre {
|
||||
|
||||
.interactive-block {
|
||||
.breadcrumb-item.done a::after {
|
||||
color: $green-900;
|
||||
color: $green-500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1023,10 +1023,10 @@ $placeholder-color: $gray-600;
|
||||
background-image: url(../img/events/event-check.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: $blue-purple-600;
|
||||
background-color: $blue-purple-300;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: $blue-purple-600;
|
||||
border-color: $blue-purple-300;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user