Created
May 29, 2023 22:06
-
-
Save phreakin/9742ce135bf88d88e99502425e098d89 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Base Colors | |
| $primary: #8a81fd !default; | |
| $secondary: #1f1f1f !default; | |
| $success: #4ffdb3 !default; | |
| $info: #68a8fd !default; | |
| $warning: #fcb24f !default; | |
| $danger: #fc5c4f !default; | |
| $light: #f8f8f2 !default; | |
| $dark: #282a36 !default; | |
| $gray: #555555 !default; | |
| $white: #fff !default; | |
| $black: #000 !default; | |
| $transparent: transparent !default; | |
| $muted: #6c757d !default; | |
| $disabled: #212529 !default; | |
| $text-color: #f1f1f1 !default; | |
| $bg-color: #111111 !default; | |
| $bg-color-dark: $dark !default; | |
| $border-color: lighten($dark, 20%) !default; | |
| $background-color-dark: $dark !default; | |
| $background-color-light: $light !default; | |
| $card-background-color: $dark !default; | |
| $card-background-color-dark: $dark !default; | |
| // Stone | |
| $stone: ( | |
| "50": #f8fafc, | |
| "100": #f1f5f9, | |
| "200": #e2e8f0, | |
| "300": #cbd5e1, | |
| "400": #94a3b8, | |
| "500": #64748b, | |
| "600": #475569, | |
| "700": #334155, | |
| "800": #1e293b, | |
| "900": #0f172a, | |
| "950": #020617 | |
| ) !default; | |
| // Gray | |
| $gray: ( | |
| "100": #f9fafb, | |
| "200": #f3f4f6, | |
| "300": #e5e7eb, | |
| "400": #d1d5db, | |
| "500": #9ca3af, | |
| "600": #6b7280, | |
| "700": #4b5563, | |
| "800": #374151, | |
| "900": #1f2937 | |
| ) !default; | |
| // Zinc | |
| $zinc: ( | |
| "50": #fafafa, | |
| "100": #f4f4f5, | |
| "200": #e4e4e7, | |
| "300": #d4d4d8, | |
| "400": #a1a1aa, | |
| "500": #71717a, | |
| "600": #52525b, | |
| "700": #3f3f46, | |
| "800": #27272a, | |
| "900": #18181b, | |
| "950": #0a0a0b | |
| ) !default; | |
| // Neutral | |
| $neutral: ( | |
| "50": #fafafa, | |
| "100": #f5f5f5, | |
| "200": #e4e4e7, | |
| "300": #d4d4d8, | |
| "400": #a1a1aa, | |
| "500": #71717a, | |
| "600": #52525b, | |
| "700": #3f3f46, | |
| "800": #27272a, | |
| "900": #18181b, | |
| "950": #0a0a0b | |
| ) !default; | |
| // Stone | |
| $stone: ( | |
| "50": #fafaf9, | |
| "100": #f5f5f4, | |
| "200": #e7e5e4, | |
| "300": #d6d3d1, | |
| "400": #a8a29e, | |
| "500": #78716c, | |
| "600": #57534e, | |
| "700": #44403c, | |
| "800": #292524, | |
| "900": #1c1917, | |
| "950": #0d0b0a | |
| ) !default; | |
| // Red | |
| $red: ( | |
| "50": #fef2f2, | |
| "100":#fee2e2, | |
| "200": #fecaca, | |
| "300": #fca5a5, | |
| "400": #f87171, | |
| "500": #ef4444, | |
| "600": #dc2626, | |
| "700": #b91c1c, | |
| "800": #991b1b, | |
| "900": #7f1d1d, | |
| "950": #3f0e0e | |
| ) !default; | |
| // Orange | |
| $orange: ( | |
| "50": #fff7ed, | |
| "100":#ffedd5, | |
| "200": #fed7aa, | |
| "300": #fdba74, | |
| "400": #fb923c, | |
| "500": #f97316, | |
| "600": #ea580c, | |
| "700": #c2410c, | |
| "800": #9a3412, | |
| "900": #7c2d12, | |
| "950": #341a0e | |
| ) !default; | |
| // Amber | |
| $amber: ( | |
| "50": #fffbeb, | |
| "100":#fef3c7, | |
| "200": #fde68a, | |
| "300": #fcd34d, | |
| "400": #fbbf24, | |
| "500": #f59e0b, | |
| "600": #d97706, | |
| "700": #b45309, | |
| "800": #92400e, | |
| "900": #78350f, | |
| "950": #42240c | |
| ) !default; | |
| // Yellow | |
| $yellow: ( | |
| "50": #fefce8, | |
| "100":#fef9c3, | |
| "200": #fef08a, | |
| "300": #fde047, | |
| "400": #facc15, | |
| "500": #eab308, | |
| "600": #ca8a04, | |
| "700": #a16207, | |
| "800": #854d0e, | |
| "900": #713f12, | |
| "950": #3e2812 | |
| ) !default; | |
| // Lime | |
| $lime: ( | |
| "50": #f7fee7, | |
| "100":#ecfccb, | |
| "200": #d9f99d, | |
| "300": #bef264, | |
| "400": #a3e635, | |
| "500": #84cc16, | |
| "600": #65a30d, | |
| "700": #4d7c0f, | |
| "800": #3f6212, | |
| "900": #365314, | |
| "950": #1d3e07 | |
| ) !default; | |
| // Green | |
| $green: ( | |
| "50": #f0fdf4, | |
| "100":#dcfce7, | |
| "200": #bbf7d0, | |
| "300": #86efac, | |
| "400": #4ade80, | |
| "500": #22c55e, | |
| "600": #16a34a, | |
| "700": #15803d, | |
| "800": #166534, | |
| "900": #14532d, | |
| "950": #0d3b23 | |
| ) !default; | |
| // Emerald | |
| $emerald: ( | |
| "50": #ecfdf5, | |
| "100":#d1fae5, | |
| "200": #a7f3d0, | |
| "300": #6ee7b7, | |
| "400": #34d399, | |
| "500": #10b981, | |
| "600": #059669, | |
| "700": #047857, | |
| "800": #065f46, | |
| "900": #064e3b, | |
| "950": #033931 | |
| ) !default; | |
| // Teal | |
| $teal: ( | |
| "50": #f0fdfa, | |
| "100":#ccfbf1, | |
| "200": #99f6e4, | |
| "300": #5eead4, | |
| "400": #2dd4bf, | |
| "500": #14b8a6, | |
| "600": #0d9488, | |
| "700": #0f766e, | |
| "800": #115e59, | |
| "900": #134e4a, | |
| "950": #0c3c35 | |
| ) !default; | |
| // Cyan | |
| $cyan: ( | |
| "50": #ecfeff, | |
| "100":#cffafe, | |
| "200": #a5f3fc, | |
| "300": #67e8f9, | |
| "400": #22d3ee, | |
| "500": #06b6d4, | |
| "600": #0891b2, | |
| "700": #0e7490, | |
| "800": #155e75, | |
| "900": #164e63, | |
| "950": #0f3647 | |
| ) !default; | |
| // Sky | |
| $sky: ( | |
| "50": #f0f9ff, | |
| "100":#e0f2fe, | |
| "200": #bae6fd, | |
| "300": #7dd3fc, | |
| "400": #38bdf8, | |
| "500": #0ea5e9, | |
| "600": #0284c7, | |
| "700": #0369a1, | |
| "800": #075985, | |
| "900": #0c4a6e, | |
| "950": #083c55 | |
| ) !default; | |
| // Blue | |
| $blue: ( | |
| "50": #eff6ff, | |
| "100":#dbeafe, | |
| "200": #bfdbfe, | |
| "300": #93c5fd, | |
| "400": #60a5fa, | |
| "500": #3b82f6, | |
| "600": #2563eb, | |
| "700": #1d4ed8, | |
| "800": #1e40af, | |
| "900": #1e3a8a, | |
| "950": #1d2d6f | |
| ) !default; | |
| // Indigo | |
| $indigo: ( | |
| "50": #eef2ff, | |
| "100":#e0e7ff, | |
| "200": #c7d2fe, | |
| "300": #a5b4fc, | |
| "400": #818cf8, | |
| "500": #6366f1, | |
| "600": #4f46e5, | |
| "700": #4338ca, | |
| "800": #3730a3, | |
| "900": #312e81, | |
| "950": #22205f | |
| ) !default; | |
| // Violet | |
| $violet: ( | |
| "50": #f5f3ff, | |
| "100":#ede9fe, | |
| "200": #ddd6fe, | |
| "300": #c4b5fd, | |
| "400": #a78bfa, | |
| "500": #8b5cf6, | |
| "600": #7c3aed, | |
| "700": #6d28d9, | |
| "800": #5b21b6, | |
| "900": #4c1d95, | |
| "950": #321575 | |
| ) !default; | |
| // Purple | |
| $purple: ( | |
| "50": #faf5ff, | |
| "100":#f3e8ff, | |
| "200": #e9d5ff, | |
| "300": #d8b4fe, | |
| "400": #c084fc, | |
| "500": #a855f7, | |
| "600": #9333ea, | |
| "700": #7e22ce, | |
| "800": #6b21a8, | |
| "900": #581c87, | |
| "950": #4c1d6c | |
| ) !default; | |
| // Fuchsia | |
| $fuchsia: ( | |
| "50": #fdf4ff, | |
| "100":#fae8ff, | |
| "200": #f5d0fe, | |
| "300": #f0abfc, | |
| "400": #e879f9, | |
| "500": #d946ef, | |
| "600": #c026d3, | |
| "700": #a21caf, | |
| "800": #86198f, | |
| "900": #701a75, | |
| "950": #571b5a | |
| ) !default; | |
| // Pink | |
| $pink: ( | |
| "50": #fdf2f8, | |
| "100":#fce7f3, | |
| "200": #fbcfe8, | |
| "300": #f9a8d4, | |
| "400": #f472b6, | |
| "500": #ec4899, | |
| "600": #db2777, | |
| "700": #be185d, | |
| "800": #9d174d, | |
| "900": #831843, | |
| "950": #6b143e | |
| ) !default; | |
| // Rose | |
| $rose: ( | |
| "50": #fff1f2, | |
| "100":#ffe4e6, | |
| "200": #fecdd3, | |
| "300": #fda4af, | |
| "400": #fb7185, | |
| "500": #f43f5e, | |
| "600": #e11d48, | |
| "700": #be123c, | |
| "800": #9f1239, | |
| "900": #881337, | |
| "950": #670a29 | |
| ) !default; | |
| // Bootswatch Colors | |
| $bootswatch: ( | |
| "cerulean": ( | |
| "primary": #2FA4E7, | |
| "secondary": #6A8CAA, | |
| "success": #3F9F3F, | |
| "info": #2F96B4, | |
| "warning": #ECAD53, | |
| "danger": #E95353, | |
| "light": #F4F4F4, | |
| "dark": #222, | |
| "blue": #0069D9, | |
| "indigo": #6610F2, | |
| "purple": #6F42C1, | |
| "pink": #E83E8C, | |
| "red": #E74C3C, | |
| "orange": #FD7E14, | |
| "yellow": #FFC107, | |
| "green": #28A745, | |
| "teal": #20C997, | |
| "cyan": #17A2B8, | |
| ), | |
| "cosmo": ( | |
| "primary": #2780E3, | |
| "success": #449D44, | |
| "info": #2F96B4, | |
| "warning": #F0AD4E, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #333, | |
| "blue": #0069D9, | |
| "indigo": #3F51B5, | |
| "purple": #6F42C1, | |
| "pink": #E83E8C, | |
| "red": #D9534F, | |
| "orange": #FD7E14, | |
| "yellow": #F0AD4E, | |
| "green": #5CB85C, | |
| "teal": #5BC0DE, | |
| "cyan": #5BC0DE, | |
| ), | |
| "cyborg": ( | |
| "primary": #2A9FD6, | |
| "success": #77B300, | |
| "info": #7A43B6, | |
| "warning": #F0AD4E, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #333, | |
| "blue": #2A9FD6, | |
| "indigo": #6610F2, | |
| "purple": #9B59B6, | |
| "pink": #E83E8C, | |
| "red": #D9534F, | |
| "orange": #FEA223, | |
| "yellow": #F0AD4E, | |
| "green": #7A43B6, | |
| "teal": #97D3C5, | |
| "cyan": #5BC0DE, | |
| ), | |
| "darkly": ( | |
| "primary": #375A7F, | |
| "success": #00bc8c, | |
| "info": #3498DB, | |
| "warning": #F0AD4E, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #00bc8c, | |
| "indigo": #6610F2, | |
| "purple": #6F42C1, | |
| "pink": #E83E8C, | |
| "red": #D9534F, | |
| "orange": #FD7E14, | |
| "yellow": #F0AD4E, | |
| "green": #00bc8c, | |
| "teal": #20C997, | |
| "cyan": #3498DB, | |
| ), | |
| "flatly": ( | |
| "primary": #2C3E50, | |
| "success": #18BC9C, | |
| "info": #3498DB, | |
| "warning": #F0AD4E, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #2C3E50, | |
| "blue": #3498DB, | |
| "indigo": #9B59B6, | |
| "purple": #9B59B6, | |
| "pink": #E91E63, | |
| "red": #E74C3C, | |
| "orange": #F39C12, | |
| "yellow": #F1C40F, | |
| "green": #2ECC71, | |
| "teal": #1ABC9C, | |
| "cyan": #16A085, | |
| ), | |
| "journal": ( | |
| "primary": #EB6864, | |
| "success": #A0D468, | |
| "info": #4A89DC, | |
| "warning": #F6BB42, | |
| "danger": #E9573F, | |
| "light": #F9F9F9, | |
| "dark": #777, | |
| "blue": #4A89DC, | |
| "indigo": #5D9CEC, | |
| "purple": #AC92EC, | |
| "pink": #EC87C0, | |
| "red": #D770AD, | |
| "orange": #F5AE5D, | |
| "yellow": #FBB03B, | |
| "green": #87D37C, | |
| "teal": #9CC2CB, | |
| "cyan": #5D9CEC, | |
| ), | |
| "lumen": ( | |
| "primary": #158CBA, | |
| "success": #8CC152, | |
| "info": #2D9CDB, | |
| "warning": #F6BB42, | |
| "danger": #E9573F, | |
| "light": #F9F9F9, | |
| "dark": #555, | |
| "blue": #47A8D8, | |
| "indigo": #3F4C6B, | |
| "purple": #8D6C9F, | |
| "pink": #CE6F9E, | |
| "red": #E9573F, | |
| "orange": #DA8C10, | |
| "yellow": #F6BB42, | |
| "green": #8CC152, | |
| "teal": #1CABA6, | |
| "cyan": #2D9CDB, | |
| ), | |
| "paper": ( | |
| "primary": #2196F3, | |
| "success": #4CAF50, | |
| "info": #2196F3, | |
| "warning": #FFC107, | |
| "danger": #F44336, | |
| "light": #F5F5F5, | |
| "dark": #212121, | |
| "blue": #2196F3, | |
| "indigo": #3F51B5, | |
| "purple": #673AB7, | |
| "pink": #E91E63, | |
| "red": #F44336, | |
| "orange": #FF9800, | |
| "yellow": #FFEB3B, | |
| "green": #4CAF50, | |
| "teal": #009688, | |
| "cyan": #00BCD4, | |
| ), | |
| "readable": ( | |
| "primary": #3E99F7, | |
| "success": #44C662, | |
| "info": #3E99F7, | |
| "warning": #F0AD4E, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #3E99F7, | |
| "indigo": #6610F2, | |
| "purple": #6F42C1, | |
| "pink": #E83E8C, | |
| "red": #D9534F, | |
| "orange": #FD7E14, | |
| "yellow": #F0AD4E, | |
| "green": #44C662, | |
| "teal": #20C997, | |
| "cyan": #3498DB, | |
| ), | |
| "sandstone": ( | |
| "primary": #449AA2, | |
| "success": #C8DA2B, | |
| "info": #4A89DC, | |
| "warning": #FAC51C, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #4A89DC, | |
| "indigo": #5D9CEC, | |
| "purple": #AC92EC, | |
| "pink": #EC87C0, | |
| "red": #D770AD, | |
| "orange": #F5AE5D, | |
| "yellow": #FBB03B, | |
| "green": #87D37C, | |
| "teal": #9CC2CB, | |
| "cyan": #5D9CEC, | |
| ), | |
| "simplex": ( | |
| "primary": #D9230F, | |
| "success": #00A600, | |
| "info": #2D9CDB, | |
| "warning": #F0AD4E, | |
| "danger": #D9534F, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #2D9CDB, | |
| "indigo": #3F51B5, | |
| "purple": #673AB7, | |
| "pink": #E91E63, | |
| "red": #D9230F, | |
| "orange": #F5871F, | |
| "yellow": #F0AD4E, | |
| "green": #00A600, | |
| "teal": #009688, | |
| "cyan": #00BCD4, | |
| ), | |
| "slate": ( | |
| "primary": #3A3F44, | |
| "success": #99C262, | |
| "info": #3A92C4, | |
| "warning": #FAC51C, | |
| "danger": #DB4437, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #3A92C4, | |
| "indigo": #5D9CEC, | |
| "purple": #AC92EC, | |
| "pink": #EC87C0, | |
| "red": #DB4437, | |
| "orange": #F5AE5D, | |
| "yellow": #FBB03B, | |
| "green": #99C262, | |
| "teal": #9CC2CB, | |
| "cyan": #5D9CEC, | |
| ), | |
| "spacelab": ( | |
| "primary": #446E9B, | |
| "success": #77CBB9, | |
| "info": #3A92C4, | |
| "warning": #FAC51C, | |
| "danger": #DB4437, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #3A92C4, | |
| "indigo": #5D9CEC, | |
| "purple": #AC92EC, | |
| "pink": #EC87C0, | |
| "red": #DB4437, | |
| "orange": #F5AE5D, | |
| "yellow": #FBB03B, | |
| "green": #77CBB9, | |
| "teal": #9CC2CB, | |
| "cyan": #5D9CEC, | |
| ), | |
| "superhero": ( | |
| "primary": #DF691A, | |
| "success": #46BFBD, | |
| "info": #4E5D6C, | |
| "warning": #FAC51C, | |
| "danger": #DB4437, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #4E5D6C, | |
| "indigo": #5D9CEC, | |
| "purple": #AC92EC, | |
| "pink": #EC87C0, | |
| "red": #DB4437, | |
| "orange": #F5AE5D, | |
| "yellow": #FBB03B, | |
| "green": #46BFBD, | |
| "teal": #9CC2CB, | |
| "cyan": #5D9CEC, | |
| ), | |
| "united": ( | |
| "primary": #3D566E, | |
| "success": #8CC152, | |
| "info": #4E5D6C, | |
| "warning": #F6BB42, | |
| "danger": #E9573F, | |
| "light": #F9F9F9, | |
| "dark": #222, | |
| "blue": #4E5D6C, | |
| "indigo": #5D9CEC, | |
| "purple": #AC92EC, | |
| "pink": #EC87C0, | |
| "red": #E9573F, | |
| "orange": #F6BB42, | |
| "yellow": #F6BB42, | |
| "green": #8CC152, | |
| "teal": #48CFAD, | |
| "cyan": #4FC1E9, | |
| ), | |
| "yeti": ( | |
| "primary": #008cba, | |
| "success": #00bc8c, | |
| "info": #5bc0de, | |
| "warning": #f0ad4e, | |
| "danger": #d9534f, | |
| "light": #f9f9f9, | |
| "dark": #222, | |
| "blue": #5bc0de, | |
| "indigo": #5d9cec, | |
| "purple": #ac92ec, | |
| "pink": #ec87c0, | |
| "red": #d9534f, | |
| "orange": #f0ad4e, | |
| "yellow": #f0ad4e, | |
| "green": #00bc8c, | |
| "teal": #48cfad, | |
| "cyan": #4fc1e9, | |
| ) | |
| ) !default; | |
| // Theme Colors | |
| $theme-colors: ( | |
| "primary": #007bff, | |
| "secondary": #6c757d, | |
| "success": #28a745, | |
| "info": #17a2b8, | |
| "warning": #ffc107, | |
| "danger": #dc3545, | |
| "light": #f8f9fa, | |
| "dark": #343a40, | |
| "blue": #007bff, | |
| "indigo": #6610f2, | |
| "purple": #6f42c1, | |
| "pink": #e83e8c, | |
| "red": #dc3545, | |
| "orange": #fd7e14, | |
| "yellow": #ffc107, | |
| "green": #28a745, | |
| "teal": #20c997, | |
| "cyan": #17a2b8, | |
| ) !default; | |
| ) | |
| // Primary Colors | |
| $primary-color: $primary !default; | |
| $secondary-color: $secondary !default; | |
| $success-color: $success !default; | |
| $info-color: $info !default; | |
| $warning-color: $warning !default; | |
| $danger-color: $danger !default; | |
| $light-color: $light !default; | |
| $dark-color: $dark !default; | |
| $gray-color: $gray !default; | |
| $white-color: $white !default; | |
| $black-color: $black !default; | |
| $transparent-color: $transparent !default; | |
| $muted-color: $muted !default; | |
| $disabled-color: $disabled !default; | |
| // Primary Text Colors | |
| $primary-text-color: $primary !default; | |
| $secondary-text-color: $secondary !default; | |
| $success-text-color: $success !default; | |
| $info-text-color: $info !default; | |
| $warning-text-color: $warning !default; | |
| $danger-text-color: $danger !default; | |
| $light-text-color: $light !default; | |
| $dark-text-color: $dark !default; | |
| $gray-text-color: $gray !default; | |
| $white-text-color: $white !default; | |
| $black-text-color: $black !default; | |
| $transparent-text-color: $transparent !default; | |
| $muted-text-color: $muted !default; | |
| $disabled-text-color: $disabled !default; | |
| // Primary Border Colors | |
| $primary-border-color: $primary !default; | |
| $secondary-border-color: $secondary !default; | |
| $success-border-color: $success !default; | |
| $info-border-color: $info !default; | |
| $warning-border-color: $warning !default; | |
| $danger-border-color: $danger !default; | |
| $light-border-color: $light !default; | |
| $dark-border-color: $dark !default; | |
| $gray-border-color: $gray !default; | |
| $white-border-color: $white !default; | |
| $black-border-color: $black !default; | |
| $transparent-border-color: $transparent !default; | |
| $muted-border-color: $muted !default; | |
| $disabled-border-color: $disabled !default; | |
| // Primary Background Colors | |
| $primary-background-color: $primary !default; | |
| $secondary-background-color: $secondary !default; | |
| $success-background-color: $success !default; | |
| $info-background-color: $info !default; | |
| $warning-background-color: $warning !default; | |
| $danger-background-color: $danger !default; | |
| $light-background-color: $light !default; | |
| $dark-background-color: $dark !default; | |
| $gray-background-color: $gray !default; | |
| $white-background-color: $white !default; | |
| $black-background-color: $black !default; | |
| $transparent-background-color: $transparent !default; | |
| $muted-background-color: $muted !default; | |
| $disabled-background-color: $disabled !default; | |
| // Primary Link Colors | |
| $primary-link-color: $primary !default; | |
| $secondary-link-color: $secondary !default; | |
| $success-link-color: $success !default; | |
| $info-link-color: $info !default; | |
| $warning-link-color: $warning !default; | |
| $danger-link-color: $danger !default; | |
| $light-link-color: $light !default; | |
| $dark-link-color: $dark !default; | |
| $gray-link-color: $gray !default; | |
| $white-link-color: $white !default; | |
| $black-link-color: $black !default; | |
| $transparent-link-color: $transparent !default; | |
| $muted-link-color: $muted !default; | |
| $disabled-link-color: $disabled !default; | |
| // Primary Hover Colors | |
| $primary-hover-color: darken($primary, 10%) !default; | |
| $secondary-hover-color: darken($secondary, 10%) !default; | |
| $success-hover-color: darken($success, 10%) !default; | |
| $info-hover-color: darken($info, 10%) !default; | |
| $warning-hover-color: darken($warning, 10%) !default; | |
| $danger-hover-color: darken($danger, 10%) !default; | |
| $light-hover-color: darken($light, 10%) !default; | |
| $dark-hover-color: darken($dark, 10%) !default; | |
| $gray-hover-color: darken($gray, 10%) !default; | |
| $white-hover-color: darken($white, 10%) !default; | |
| $black-hover-color: darken($black, 10%) !default; | |
| $transparent-hover-color: darken($transparent, 10%) !default; | |
| $muted-hover-color: darken($muted, 10%) !default; | |
| $disabled-hover-color: darken($disabled, 10%) !default; | |
| // Primary Active Colors | |
| $primary-active-color: darken($primary, 20%) !default; | |
| $secondary-active-color: darken($secondary, 20%) !default; | |
| $success-active-color: darken($success, 20%) !default; | |
| $info-active-color: darken($info, 20%) !default; | |
| $warning-active-color: darken($warning, 20%) !default; | |
| $danger-active-color: darken($danger, 20%) !default; | |
| $light-active-color: darken($light, 20%) !default; | |
| $dark-active-color: darken($dark, 20%) !default; | |
| $gray-active-color: darken($gray, 20%) !default; | |
| $white-active-color: darken($white, 20%) !default; | |
| $black-active-color: darken($black, 20%) !default; | |
| $transparent-active-color: darken($transparent, 20%) !default; | |
| $muted-active-color: darken($muted, 20%) !default; | |
| $disabled-active-color: darken($disabled, 20%) !default; | |
| // Primary Focus Colors | |
| $primary-focus-color: darken($primary, 20%) !default; | |
| $secondary-focus-color: darken($secondary, 20%) !default; | |
| $success-focus-color: darken($success, 20%) !default; | |
| $info-focus-color: darken($info, 20%) !default; | |
| $warning-focus-color: darken($warning, 20%) !default; | |
| $danger-focus-color: darken($danger, 20%) !default; | |
| $light-focus-color: darken($light, 20%) !default; | |
| $dark-focus-color: darken($dark, 20%) !default; | |
| $gray-focus-color: darken($gray, 20%) !default; | |
| $white-focus-color: darken($white, 20%) !default; | |
| $black-focus-color: darken($black, 20%) !default; | |
| $transparent-focus-color: darken($transparent, 20%) !default; | |
| $muted-focus-color: darken($muted, 20%) !default; | |
| $disabled-focus-color: darken($disabled, 20%) !default; | |
| // Primary Active Border Colors | |
| $primary-active-border-color: darken($primary, 20%) !default; | |
| $secondary-active-border-color: darken($secondary, 20%) !default; | |
| $success-active-border-color: darken($success, 20%) !default; | |
| $info-active-border-color: darken($info, 20%) !default; | |
| $warning-active-border-color: darken($warning, 20%) !default; | |
| $danger-active-border-color: darken($danger, 20%) !default; | |
| $light-active-border-color: darken($light, 20%) !default; | |
| $dark-active-border-color: darken($dark, 20%) !default; | |
| $gray-active-border-color: darken($gray, 20%) !default; | |
| $white-active-border-color: darken($white, 20%) !default; | |
| $black-active-border-color: darken($black, 20%) !default; | |
| $transparent-active-border-color: darken($transparent, 20%) !default; | |
| $muted-active-border-color: darken($muted, 20%) !default; | |
| $disabled-active-border-color: darken($disabled, 20%) !default; | |
| // Theme Colors | |
| $theme-colors: ( | |
| "primary": $primary, | |
| "secondary": $secondary, | |
| "success": $success, | |
| "info": $info, | |
| "warning": $warning, | |
| "danger": $danger, | |
| "light": $light, | |
| "dark": $dark, | |
| "gray": $gray, | |
| "white": $white, | |
| "black": $black, | |
| "transparent": $transparent, | |
| "muted": $muted, | |
| "disabled": $disabled, | |
| "stone": $stone, | |
| "red": $red, | |
| "orange": $orange, | |
| "amber": $amber, | |
| "yellow": $yellow, | |
| "lime": $lime, | |
| "green": $green, | |
| "teal": $teal, | |
| "cyan": $cyan, | |
| "blue": $blue, | |
| "indigo": $indigo, | |
| "violet": $violet, | |
| "fuchsia": $fuchsia, | |
| "pink": $pink, | |
| "rose": $rose, | |
| "fuchsia": $fuchsia, | |
| "bootstrap": $bootstrap, | |
| "emerald": $emerald, | |
| "bootswatch": $bootswatch, | |
| "bootstrap": $bootstrap, | |
| ) !default; | |
| // Named colors | |
| $named: ( | |
| "alice-blue": #f0f8ff, | |
| "antique-white": #faebd7, | |
| "aqua": #00ffff, | |
| "aquamarine": #7fffd4, | |
| "azure": #f0ffff, | |
| "beige": #f5f5dc, | |
| "bisque": #ffe4c4, | |
| "black": #000000, | |
| "blanched-almond": #ffebcd, | |
| "blue": #0000ff, | |
| "blue-violet": #8a2be2, | |
| "brown": #a52a2a, | |
| "burlywood": #deb887, | |
| "cadet-blue": #5f9ea0, | |
| "chartreuse": #7fff00, | |
| "chocolate": #d2691e, | |
| "coral": #ff7f50, | |
| "cornflower-blue": #6495ed, | |
| "cornsilk": #fff8dc, | |
| "crimson": #dc143c, | |
| "cyan": #00ffff, | |
| "dark-blue": #00008b, | |
| "dark-cyan": #008b8b, | |
| "dark-goldenrod": #b8860b, | |
| "dark-gray": #a9a9a9, | |
| "dark-green": #006400, | |
| "dark-grey": #a9a9a9, | |
| "dark-khaki": #bdb76b, | |
| "dark-magenta": #8b008b, | |
| "dark-olivegreen": #556b2f, | |
| "dark-orange": #ff8c00, | |
| "dark-orchid": #9932cc, | |
| "dark-red": #8b0000, | |
| "dark-salmon": #e9967a, | |
| "dark-seagreen": #8fbc8f, | |
| "dark-slate-blue": #483d8b, | |
| "dark-slate-gray": #2f4f4f, | |
| "dark-turquoise": #00ced1, | |
| "dark-violet": #9400d3, | |
| "deep-pink": #ff1493, | |
| "deep-skyblue": #00bfff, | |
| "dim-gray": #696969, | |
| "dodger-blue": #1e90ff, | |
| "fire-brick": #b22222, | |
| "floral-white": #fffaf0, | |
| "forest-green": #228b22, | |
| "fuchsia": #ff00ff, | |
| "gainsboro": #dcdcdc, | |
| "ghost-white": #f8f8ff, | |
| "gold": #ffd700, | |
| "golden-rod": #daa520, | |
| "gray": #808080, | |
| "green": #008000, | |
| "green-yellow": #adff2f, | |
| "honey-dew": #f0fff0, | |
| "hot-pink": #ff69b4, | |
| "indian-red": #cd5c5c, | |
| "indigo": #4b0082, | |
| "ivory": #fffff0, | |
| "khaki": #f0e68c, | |
| "lavender": #e6e6fa, | |
| "lavender-blush": #fff0f5, | |
| "lawn-green": #7cfc00, | |
| "lemon-chiffon": #fffacd, | |
| "light-blue": #add8e6, | |
| "light-coral": #f08080, | |
| "light-cyan": #e0ffff, | |
| "light-goldenrod-yellow": #fafad2, | |
| "light-gray": #d3d3d3, | |
| "light-green": #90ee90, | |
| "lightgrey": #d3d3d3, | |
| "light-pink": #ffb6c1, | |
| "light-salmon": #ffa07a, | |
| "light-seagreen": #20b2aa, | |
| "light-skyblue": #87cefa, | |
| "light-slate-gray": #778899, | |
| "light-steel-blue": #b0c4de, | |
| "light-yellow": #ffffe0, | |
| "lime": #00ff00, | |
| "lime-green": #32cd32, | |
| "linen": #faf0e6, | |
| "magenta": #ff00ff, | |
| "maroon": #800000, | |
| "medium-aquamarine": #66cdaa, | |
| "medium-blue": #0000cd, | |
| "medium-orchid": #ba55d3, | |
| "medium-purple": #9370db, | |
| "medium-sea-green": #3cb371, | |
| "medium-slate-blue": #7b68ee, | |
| "medium-spring-green": #00fa9a, | |
| "medium-turquoise": #48d1cc, | |
| "medium-violet-red": #c71585, | |
| "midnight-blue": #191970, | |
| "mint-cream": #f5fffa, | |
| "misty-rose": #ffe4e1, | |
| "moccasin": #ffe4b5, | |
| "navajo-white": #ffdead, | |
| "navy": #000080, | |
| "oldlace": #fdf5e6, | |
| "olive": #808000, | |
| "olive-drab": #6b8e23, | |
| "orange": #ffa500, | |
| "orange-red": #ff4500, | |
| "orchid": #da70d6, | |
| "pale-goldenrod": #eee8aa, | |
| "pale-green": #98fb98, | |
| "pale-turquoise": #afeeee, | |
| "pale-violet-red": #db7093, | |
| "papaya-whip": #ffefd5, | |
| "peach-puff": #ffdab9, | |
| "peru": #cd853f, | |
| "pink": #ffc0cb, | |
| "plum": #dda0dd, | |
| "powder-blue": #b0e0e6, | |
| "purple": #800080, | |
| "rebecca-purple": #663399, | |
| "red": #ff0000, | |
| "rosy-brown": #bc8f8f, | |
| "royal-blue": #4169e1, | |
| "saddle-brown": #8b4513, | |
| "salmon": #fa8072, | |
| "sandy-brown": #f4a460, | |
| "seagreen": #2e8b57, | |
| "seashell": #fff5ee, | |
| "sienna": #a0522d, | |
| "silver": #c0c0c0, | |
| "sky-blue": #87ceeb, | |
| "slate-blue": #6a5acd, | |
| "slate-gray": #708090, | |
| "snow": #fffafa, | |
| "spring-green": #00ff7f, | |
| "steel-blue": #4682b4, | |
| "tan": #d2b48c, | |
| "teal": #008080, | |
| "thistle": #d8bfd8, | |
| "tomato": #ff6347, | |
| "transparent": transparent, | |
| "turquoise": #40e0d0, | |
| "violet": #ee82ee, | |
| "wheat": #f5deb3, | |
| "white": #ffffff, | |
| "whitesmoke": #f5f5f5, | |
| "yellow": #ffff00, | |
| "yellow-green": #9acd32, | |
| ); | |
| // Material Colors | |
| $material: ( | |
| "mat-red": #f44336, | |
| "mat-pink": #e91e63, | |
| "mat-purple": #9c27b0, | |
| "mat-indigo": #3f51b5, | |
| "mat-blue": #2196f3, | |
| "mat-cyan": #00bcd4, | |
| "mat-teal": #009688, | |
| "mat-green": #4caf50, | |
| "mat-lime": #cddc39, | |
| "mat-yellow": #ffeb3b, | |
| "mat-amber": #ffc107, | |
| "mat-orange": #ff9800, | |
| "mat-brown": #795548, | |
| "mat-grey": #9e9e9e, | |
| "mat-black": #000000, | |
| "mat-white": #ffffff, | |
| "mat-transparent": transparent, | |
| ); | |
| // Bootstrap Colors | |
| $bootstrap: ( | |
| "bs-primary": #007bff, | |
| "bs-secondary": #6c757d, | |
| "bs-success": #28a745, | |
| "bs-info": #17a2b8, | |
| "bs-warning": #ffc107, | |
| "bs-danger": #dc3545, | |
| "bs-accent": #007bff, | |
| "bs-error": #dc3545, | |
| "bs-focus": #007bff, | |
| "bs-active": #007bff, | |
| "bs-link": #007bff, | |
| "bs-visited": #007bff, | |
| "bs-default": #007bff, | |
| "bs-current": #007bff, | |
| "bs-hover": #007bff, | |
| "bs-alternate": #6c757d, | |
| "bs-light": #f8f9fa, | |
| "bs-dark": #343a40, | |
| "bs-gray": #6c757d, | |
| "bs-white": #ffffff, | |
| "bs-black": #000000, | |
| "bs-transparent": transparent, | |
| "bs-muted": #6c757d, | |
| "bs-disabled": #6c757d, | |
| "bs-ghost": transparent, | |
| ); | |
| // Material Colors | |
| $material: ( | |
| "red": #f44336, | |
| "pink": #e91e63, | |
| "purple": #9c27b0, | |
| "deep-purple": #673ab7, | |
| "indigo": #3f51b5, | |
| "blue": #2196f3, | |
| "light-blue": #03a9f4, | |
| "cyan": #00bcd4, | |
| "teal": #009688, | |
| "green": #4caf50, | |
| "light-green": #8bc34a, | |
| "lime": #cddc39, | |
| "yellow": #ffeb3b, | |
| "amber": #ffc107, | |
| "orange": #ff9800, | |
| "deep-orange": #ff5722, | |
| "brown": #795548, | |
| "grey": #9e9e9e, | |
| "blue-grey": #607d8b | |
| ); | |
| // Social Colors | |
| $social{ | |
| $amazon-1: #ff9900; | |
| $amazon-2: #146eb4; | |
| $amazon-3: #333333; | |
| $amazon-4: #666666; | |
| $amazon-5: #b2b2b2; | |
| $american-express-1: #005ba6; | |
| $american-express-2: #002663; | |
| $american-express-3: #b2d0e1; | |
| $android-1: #a4c639; | |
| $android-2: #8cbb26; | |
| $android-3: #6d8f2e; | |
| $android-4: #4c6f21; | |
| $android-5: #d9e4a7; | |
| $apple-1: #b6bcca; | |
| $apple-2: #6d7e8d; | |
| $apple-3: #3b4652; | |
| $apple-4: #e5e8ec; | |
| $apple-5: #f5f7fa; | |
| $apple1: #b6bcca; | |
| $apple2: #6d7e8d; | |
| $apple3: #3b4652; | |
| $apple4: #e5e8ec; | |
| $apple5: #f5f7fa; | |
| $bitbucket1: #205081; | |
| $bitbucket2: #1d3b53; | |
| $bitbucket3: #2f6f97; | |
| $bitbucket4: #205081; | |
| $bitbucket5: #1d3b53; | |
| $codepen1: #000000; | |
| $codepen2: #ffffff; | |
| $codepen3: #000000; | |
| $codepen4: #ffffff; | |
| $codepen5: #000000; | |
| $css3-1: #1572b6; | |
| $css3-2: #33a9dc; | |
| $css3-3: #ffffff; | |
| $css3-4: #ffffff; | |
| $css3-5: #ffffff; | |
| $discover-1: #ff6000; | |
| $discover-2: #ff6000; | |
| $discover-3: #ff6000; | |
| $discover-4: #ff6000; | |
| $discover-5: #ff6000; | |
| $dribbble-1: #ea4c89; | |
| $dribbble-2: #ffffff; | |
| $dribbble-3: #222222; | |
| $dribbble-4: #ea4c89; | |
| $dribbble-5: #ffffff; | |
| $dropbox-1: #007ee5; | |
| $dropbox-2: #7b8994; | |
| $dropbox-3: #47525d; | |
| $dropbox-4: #3d464d; | |
| $drupal-1: #0077c0; | |
| $drupal-2: #81ceff; | |
| $drupal-3: #ffffff; | |
| $drupal-4: #0077c0; | |
| $drupal-5: #81ceff; | |
| $ebay-1: #e53238; | |
| $envato: #82b541; | |
| $etsy: #f56400; | |
| $evernote: #2dbe60; | |
| $facebook: #3b5998; | |
| $flickr: #ff0084; | |
| $github: #333333; | |
| $gitlab: #e24329; | |
| $google: #dd4b39; | |
| $html5: #e44d26; | |
| $instagram: #517fa4; | |
| $joomla: #f44321; | |
| $jsfiddle: #000000; | |
| $linkedin: #007bb6; | |
| $linux: #000000; | |
| $linux: #000000; | |
| $mastercard: #cc0000; | |
| $medium: #02b875; | |
| $paypal: #003087; | |
| $pinterest: #cb2027; | |
| $quora: #a82400; | |
| $reddit: #ff4500; | |
| $slack: #3aaf85; | |
| $slideshare: #0077b5; | |
| $spotify: #1db954; | |
| $stack-exchange: #1e5397; | |
| $stack-overflow: #f48024; | |
| $stumbleupon: #eb4924; | |
| $telegram: #0088cc; | |
| $tumblr: #32506d; | |
| $twitter: #55acee; | |
| $visa: #142787; | |
| $vk: #45668e; | |
| $wechat: #7bb32e; | |
| $whatsapp: #25d366; | |
| $wikipedia: #000000; | |
| $windows: #00a4ef; | |
| $wordpress: #21759b; | |
| $yahoo: #430297; | |
| $yandex: #ffcc00; | |
| $yelp: #af0606; | |
| $youtube: #bb0000; | |
| $zalando: #ff6900; | |
| $zendesk: #03363d; | |
| $zoom: #2d8cff; | |
| $zurb: #008cba; | |
| } | |
| // Set Color Groups | |
| $color-groups: ( | |
| $theme-colors, | |
| $named, | |
| $material, | |
| $bootstrap, | |
| ); | |
| // Get Color Group By Name And Loop Through It | |
| @mixin color-group($group-name) { | |
| @each $color in map-get($color-groups, $group-name) { | |
| .color-#{index(map-get($color-groups, $group-name), $color)} { | |
| color: $color; | |
| } | |
| } | |
| } | |
| @include color-group(theme-colors); | |
| @include color-group(named); | |
| @include color-group(material); | |
| @include color-group(bootstrap); | |
| // Set Text Colors From Theme Colors By Loop | |
| @for $i from 1 through 9 { | |
| .text-#{$i} { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: none; | |
| } | |
| .text-hover-#{$i}:hover { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: none; | |
| } | |
| .text-active-#{$i}:active { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: none; | |
| } | |
| .text-focus-#{$i}:focus { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: none; | |
| } | |
| .text-underline-#{$i} { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: underline; | |
| } | |
| .text-ghost-#{$i} { | |
| color: transparent; | |
| text-decoration: none; | |
| } | |
| .text-ghost-underline-#{$i} { | |
| color: transparent; | |
| text-decoration: underline; | |
| } | |
| .text-ghost-hover-#{$i}:hover { | |
| color: transparent; | |
| text-decoration: none; | |
| } | |
| .text-ghost-active-#{$i}:active { | |
| color: transparent; | |
| text-decoration: none; | |
| } | |
| .text-ghost-focus-#{$i}:focus { | |
| color: transparent; | |
| text-decoration: none; | |
| } | |
| .text-ghost-underline-hover-#{$i}:hover { | |
| color: transparent; | |
| text-decoration: underline; | |
| } | |
| .text-ghost-underline-active-#{$i}:active { | |
| color: transparent; | |
| text-decoration: underline; | |
| } | |
| .text-ghost-underline-focus-#{$i}:focus { | |
| color: transparent; | |
| text-decoration: underline; | |
| } | |
| .text-underline-hover-#{$i}:hover { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: underline; | |
| } | |
| .text-underline-active-#{$i}:active { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: underline; | |
| } | |
| .text-underline-focus-#{$i}:focus { | |
| color: map-get($theme-colors, $i); | |
| text-decoration: underline; | |
| } | |
| } | |
| @mixin generate-text-colors($theme-colors) { | |
| @each $color, $value in $colors { | |
| .text-#{$color} { | |
| color: $value; | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| $propgenerate-text-colors | |
| ( | |
| $colors) | |
| ; | |
| generate-text-hover-colors | |
| ( | |
| $colors) | |
| ; | |
| generate-text-active-colors | |
| ( | |
| $colors) | |
| ; | |
| generate-text-focus-colors | |
| ( | |
| $colors) | |
| ; | |
| generate-text-underline-colors | |
| ( | |
| $colors) | |
| ; | |
| generate-text-ghost-colors | |
| ( | |
| $colors) | |
| ; | |
| generate-text-ghost-hover-colors | |
| ( | |
| $colors) | |
| ; | |
| // Set Background Colors From Theme Colors By Loop | |
| @for $i from 1 through 9 { | |
| .background-#{$i} { | |
| background-color: map-get($theme-colors, $i); | |
| } | |
| .background-hover-#{$i}:hover { | |
| background-color: map-get($theme-colors, $i); | |
| } | |
| .background-active-#{$i}:active { | |
| background-color: map-get($theme-colors, $i); | |
| } | |
| .background-focus-#{$i}:focus { | |
| background-color: map-get($theme-colors, $i); | |
| } | |
| .background-underline-#{$i} { | |
| background-color: map-get($theme-colors, $i); | |
| } | |
| .background-ghost-#{$i} { | |
| background-color: transparent; | |
| } | |
| } | |
| // Set Border Colors From Theme Colors By Loop | |
| @for $i from 1 through 9 { | |
| .border-#{$i} { | |
| border-color: map-get($theme-colors, $i); | |
| } | |
| .border-hover-#{$i}:hover { | |
| border-color: map-get($theme-colors, $i); | |
| } | |
| .border-active-#{$i}:active { | |
| border-color: map-get($theme-colors, $i); | |
| } | |
| .border-focus-#{$i}:focus { | |
| border-color: map-get($theme-colors, $i); | |
| } | |
| .border-underline-#{$i} { | |
| border-color: map-get($theme-colors, $i); | |
| } | |
| } | |
| // Set Outline Colors From Theme Colors By Loop | |
| @for $i from 1 through 9 { | |
| .outline-#{$i} { | |
| outline-color: map-get($theme-colors, $i); | |
| } | |
| .outline-hover-#{$i}:hover { | |
| outline-color: map-get($theme-colors, $i); | |
| } | |
| .outline-active-#{$i}:active { | |
| outline-color: map-get($theme-colors, $i); | |
| } | |
| .outline-focus-#{$i}:focus { | |
| outline-color: map-get($theme-colors, $i); | |
| } | |
| .outline-underline-#{$i} { | |
| outline-color: map-get($theme-colors, $i); | |
| } | |
| } | |
| // Set Box Shadow Colors From Theme Colors By Loop | |
| @for $i from 1 through 9 { | |
| .box-shadow-#{$i} { | |
| box-shadow: 0 0 0 0.2rem map-get($theme-colors, $i); | |
| } | |
| .box-shadow-hover-#{$i}:hover { | |
| box-shadow: 0 0 0 0.2rem map-get($theme-colors, $i); | |
| } | |
| .box-shadow-active-#{$i}:active { | |
| box-shadow: 0 0 0 0.2rem map-get($theme-colors, $i); | |
| } | |
| .box-shadow-focus-#{$i}:focus { | |
| box-shadow: 0 0 0 0.2rem map-get($theme-colors, $i); | |
| } | |
| .box-shadow-underline-#{$i} { | |
| box-shadow: 0 0 0 0.2rem map-get($theme-colors, $i); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment