Files
YGChatCS/src/static/scss/colors.scss
DEV_DSW fe5dd78632 feat: add RecommendationListCard and RoutePlanCard components with styles and mocks
- Implemented RecommendationListCard component for displaying a list of recommendations with titles, descriptions, and badges.
- Created RoutePlanCard component to show route details, including nodes and tips, with a detailed view toggle.
- Added ScenicImageCard component for showcasing images with optional captions.
- Developed SharedVisual components: CardShell, BadgePill, MediaFrame, ActionRow, and DetailShell for reusable UI elements.
- Introduced SCSS styles for all new components and updated existing styles for consistency.
- Created test page to preview and interact with all components using mock data.
- Added new utility classes for background colors, borders, colors, display, flex, font sizes, font weights, heights, positions, rounded corners, and widths.
2026-05-13 14:06:43 +08:00

150 lines
1.6 KiB
SCSS

// 字体颜色
.color-white {
color: #fff;
}
.color-000 {
color: #000;
}
.color-333 {
color: #333;
}
.color-666 {
color: #666;
}
.color-999 {
color: #999;
}
.color-A3A3A3 {
color: #a3a3a3;
}
.color-525866 {
color: #525866;
}
.color-171717 {
color: #171717;
}
.color-99A0AE {
color: #99a0ae;
}
.color-FF3D60 {
color: #ff3d60;
}
.color-94A3B8 {
color: #94a3b8;
}
.theme-color-500 {
color: $theme-color-500;
}
.color-43669A {
color: #43669a;
}
.color-21B466 {
color: #21b466;
}
.color-FA7319 {
color: #fa7319;
}
.color-B45309 {
color: #b45309;
}
.color-D97706 {
color: #d97706;
}
.color-0F172A {
color: #0f172a;
}
.color-1E293B {
color: #1e293b;
}
.color-334155 {
color: #334155;
}
.color-475569 {
color: #475569;
}
.color-64748B {
color: #64748b;
}
.color-CBD5E1 {
color: #cbd5e1;
}
.color-2563EB {
color: #2563eb;
}
.color-7C3AED {
color: #7c3aed;
}
.color-E11D48 {
color: #e11d48;
}
.color-0F766E {
color: #0f766e;
}
.color-047857 {
color: #047857;
}
.color-0891B2 {
color: #0891b2;
}
// text 颜色
.text-color-900 {
color: $text-color-900; // #181B25
}
.text-color-800 {
color: $text-color-800; // #222530
}
.text-color-700 {
color: $text-color-700; // #2B303B
}
.text-color-600 {
color: $text-color-600; // #525866
}
.text-color-500 {
color: $text-color-500; // #717784
}
.text-color-400 {
color: $text-color-400; // #99A0AE
}
.text-color-300 {
color: $text-color-300; // #CACFD8
}
.text-color-200 {
color: $text-color-200; // #E5E8EE
}
.text-color-100 {
color: $text-color-100; // #F2F5F8
}
.text-color-50 {
color: $text-color-50; // #F9FAFB
}