Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-20 02:15:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update colors to GitHub Copilot brand palette

Browse Source 
Use official Copilot colors from brand.github.com:
- Primary purple: #8534F3
- Purple variants: #C898FD, #B870FF, #43179E, #26115F
- Orange accents: #FE4C25, #F08A3A, #C53211
- Updated gradients to use purple-to-orange blend
This commit is contained in:
Aaron Powell
2026-01-29 10:45:39 +11:00
parent 10e42f4bed
commit 43a1ca1844
1 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
website/public/styles/global.css
View File

@@ -1,36 +1,43 @@
/* CSS Variables and Base Styles */
/* GitHub Copilot Brand Colors:
Purple 1: #C898FD Purple 2: #B870FF Purple 3: #8534F3 (Primary)
Purple 4: #43179E Purple 5: #26115F Purple 6: #160048
Orange 1: #F4A876 Orange 2: #F08A3A Orange 3: #FE4C25
Orange 4: #C53211 Orange 5: #801E0F Orange 6: #500A00
*/
:root {
/* Dark theme (default) */
--color-bg: #0a0a0f;
--color-bg-secondary: #12121a;
--color-bg-tertiary: #1a1a24;
--color-border: #2a2a3a;
--color-text: #e0e0e8;
--color-text-muted: #8888a0;
--color-bg: #0d0d12;
--color-bg-secondary: #14141c;
--color-bg-tertiary: #1c1c28;
--color-border: #2d2d3d;
--color-text: #e4e4ec;
--color-text-muted: #9090a8;
--color-text-emphasis: #ffffff;
--color-link: #6c9fff;
--color-link-hover: #9cc0ff;
--color-accent: #6366f1;
--color-accent-hover: #818cf8;
--color-accent-secondary: #ec4899;
--color-danger: #f43f5e;
--color-warning: #f59e0b;
--color-link: #B870FF;
--color-link-hover: #C898FD;
--color-accent: #8534F3;
--color-accent-hover: #B870FF;
--color-accent-secondary: #FE4C25;
--color-danger: #C53211;
--color-warning: #F08A3A;
--color-success: #10b981;
--color-card-bg: rgba(18, 18, 26, 0.8);
--color-card-hover: rgba(26, 26, 36, 0.9);
--color-error: #C53211;
--color-card-bg: rgba(20, 20, 28, 0.8);
--color-card-hover: rgba(28, 28, 40, 0.9);
--color-glass: rgba(255, 255, 255, 0.05);
--color-glass-border: rgba(255, 255, 255, 0.1);
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
--gradient-accent: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.15), transparent);
--gradient-primary: linear-gradient(135deg, #8534F3 0%, #B870FF 50%, #FE4C25 100%);
--gradient-accent: linear-gradient(135deg, #43179E 0%, #8534F3 100%);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.25), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.12), transparent);
--border-radius: 8px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.5);
--shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.5);
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--container-width: 1200px;
@@ -41,23 +48,23 @@
[data-theme="light"] {
--color-bg: #fafafa;
--color-bg-secondary: #ffffff;
--color-bg-tertiary: #f4f4f5;
--color-bg-tertiary: #f5f5f7;
--color-border: #e4e4e7;
--color-text: #3f3f46;
--color-text-muted: #71717a;
--color-text-emphasis: #18181b;
--color-link: #6366f1;
--color-link-hover: #4f46e5;
--color-link: #8534F3;
--color-link-hover: #43179E;
--color-card-bg: rgba(255, 255, 255, 0.9);
--color-card-hover: rgba(255, 255, 255, 1);
--color-glass: rgba(255, 255, 255, 0.7);
--color-glass-border: rgba(0, 0, 0, 0.08);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.06), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.06), transparent);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
--shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3);
--shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.3);
}
/* Auto theme based on system preference */
@@ -65,23 +72,23 @@
:root:not([data-theme="dark"]) {
--color-bg: #fafafa;
--color-bg-secondary: #ffffff;
--color-bg-tertiary: #f4f4f5;
--color-bg-tertiary: #f5f5f7;
--color-border: #e4e4e7;
--color-text: #3f3f46;
--color-text-muted: #71717a;
--color-text-emphasis: #18181b;
--color-link: #6366f1;
--color-link-hover: #4f46e5;
--color-link: #8534F3;
--color-link-hover: #43179E;
--color-card-bg: rgba(255, 255, 255, 0.9);
--color-card-hover: rgba(255, 255, 255, 1);
--color-glass: rgba(255, 255, 255, 0.7);
--color-glass-border: rgba(0, 0, 0, 0.08);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent);
--gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.12), transparent),
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.06), transparent),
radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.06), transparent);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
--shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3);
--shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.3);
}
}