From 6e34c911919cb8c99098704549514b428ed00afa Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Wed, 13 Apr 2022 16:57:57 -0400 Subject: [PATCH] Port over colour and gradient changes (#111) * straight port of colour/gradient/style changes * prettier --- src/components/Blog/LinkPost.tsx | 2 +- src/components/Carousels/QuoteCarousel.tsx | 16 +- .../CaseStudies/NewCaseStudyLayout.tsx | 2 +- .../UseChallengeSolutionResults.tsx | 12 +- src/components/ContentSection.tsx | 2 +- src/components/Install/install.module.scss | 2 +- src/components/Jumbotron/index.tsx | 2 +- src/components/RequestDemoTrySourcegraph.tsx | 6 +- src/components/ThreeUpText.tsx | 4 +- src/pages/accelerate-dev-onboarding.tsx | 2 +- .../nutanix-fixed-log4j-with-sourcegraph.tsx | 2 +- src/pages/fixing-vulnerabilities.tsx | 2 +- src/pages/get-started/getStarted.module.scss | 10 +- src/pages/get-started/self-hosted.tsx | 2 +- src/pages/jobs.tsx | 20 +-- src/pages/support.tsx | 22 +-- src/pages/use-cases/onboarding.tsx | 12 +- src/pages/use-cases/useCases.module.scss | 3 +- src/pages/use-cases/vulnerabilities.tsx | 12 +- src/styles/_colors.scss | 163 +++++++++++------- src/styles/_gradients.scss | 123 ++++++------- src/styles/_typography.scss | 12 -- src/styles/components/_ComparisonTable.scss | 2 +- src/styles/components/_CustomCarousel.scss | 2 +- src/styles/components/_Header.scss | 10 +- src/styles/components/_IconItem.scss | 21 --- src/styles/components/_LeadershipSection.scss | 2 +- src/styles/components/_SelfHostedSection.scss | 4 +- src/styles/components/_TemplateCodeBlock.scss | 4 +- src/styles/components/blog/_BlogPost.scss | 1 - src/styles/components/blog/_PostsList.scss | 2 +- .../product/_GitLabIntegrationSection.scss | 4 +- src/styles/globals.scss | 137 ++++++++------- src/styles/pages/_about.scss | 4 +- src/styles/pages/_batch-changes.scss | 8 +- src/styles/pages/_code-insights.scss | 11 +- src/styles/pages/_community.scss | 4 +- src/styles/pages/_content.scss | 4 +- src/styles/pages/_get-started.scss | 16 +- src/styles/pages/_jobs.scss | 6 +- src/styles/pages/_podcast.scss | 16 +- src/styles/pages/_sales.scss | 2 +- src/styles/pages/_universal-code-search.scss | 2 +- src/styles/pages/get-started/_cloud.scss | 14 +- .../product/_code-change-management.scss | 2 +- src/styles/templates/_PostTemplate.scss | 2 +- 46 files changed, 363 insertions(+), 350 deletions(-) delete mode 100644 src/styles/_typography.scss delete mode 100644 src/styles/components/_IconItem.scss diff --git a/src/components/Blog/LinkPost.tsx b/src/components/Blog/LinkPost.tsx index c232bac28b8..e2aef0788a6 100644 --- a/src/components/Blog/LinkPost.tsx +++ b/src/components/Blog/LinkPost.tsx @@ -40,7 +40,7 @@ export const LinkPost: FunctionComponent = ({ )} -
+
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} {post.frontmatter.publishDate} diff --git a/src/components/Carousels/QuoteCarousel.tsx b/src/components/Carousels/QuoteCarousel.tsx index a09ab242bf7..a69bafd001e 100644 --- a/src/components/Carousels/QuoteCarousel.tsx +++ b/src/components/Carousels/QuoteCarousel.tsx @@ -34,7 +34,11 @@ export const QuoteCarousel: FunctionComponent = ({ items, au return (
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} + />
{carouselItems.map(item => ( @@ -56,14 +60,18 @@ export const QuoteCarousel: FunctionComponent = ({ items, au ))}
- carouselHook.moveCarousel()} /> + carouselHook.moveCarousel()} />
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} + />
- carouselHook.moveCarousel()} /> + carouselHook.moveCarousel()} />
diff --git a/src/components/CaseStudies/NewCaseStudyLayout.tsx b/src/components/CaseStudies/NewCaseStudyLayout.tsx index a589d16fdc1..3c43098f4c1 100644 --- a/src/components/CaseStudies/NewCaseStudyLayout.tsx +++ b/src/components/CaseStudies/NewCaseStudyLayout.tsx @@ -45,7 +45,7 @@ export const NewCaseStudyLayout: FunctionComponent = ({ <>
diff --git a/src/components/CaseStudies/UseChallengeSolutionResults.tsx b/src/components/CaseStudies/UseChallengeSolutionResults.tsx index 22cc1a30a77..ea8261629ee 100644 --- a/src/components/CaseStudies/UseChallengeSolutionResults.tsx +++ b/src/components/CaseStudies/UseChallengeSolutionResults.tsx @@ -30,11 +30,11 @@ const ListItemType: FunctionComponent = ({ item }) => ( export const UseChallengeSolutionResults: FunctionComponent = ({ useCases, challenges, solutions, results }) => (
-
+
- +
Use case
@@ -47,7 +47,7 @@ export const UseChallengeSolutionResults: FunctionComponent = ({ useCases
- +
Challenge
@@ -60,7 +60,7 @@ export const UseChallengeSolutionResults: FunctionComponent = ({ useCases
- +
Solution
@@ -73,11 +73,11 @@ export const UseChallengeSolutionResults: FunctionComponent = ({ useCases
-
+
- +
Results
diff --git a/src/components/ContentSection.tsx b/src/components/ContentSection.tsx index cf7b812becb..644328d7f90 100644 --- a/src/components/ContentSection.tsx +++ b/src/components/ContentSection.tsx @@ -5,7 +5,7 @@ const COLORS = { white: 'bg-white text-dark', black: 'bg-black text-light', gray: 'bg-dark text-light', - purple: 'bg-purple text-light', + purple: 'bg-vivid-violet text-light', primary: 'bg-primary text-light', pink: 'bg-pink text-dark', 'light-orange': 'bg-light-orange text-dark', diff --git a/src/components/Install/install.module.scss b/src/components/Install/install.module.scss index 47d7b77e250..91ce184eae3 100644 --- a/src/components/Install/install.module.scss +++ b/src/components/Install/install.module.scss @@ -2,7 +2,7 @@ @keyframes flashBackground { 0% { - background: $light-yellow; + background: $yellow-mist; } 100% { background-color: none; diff --git a/src/components/Jumbotron/index.tsx b/src/components/Jumbotron/index.tsx index ed9b43e5f65..a9f78442e50 100644 --- a/src/components/Jumbotron/index.tsx +++ b/src/components/Jumbotron/index.tsx @@ -5,7 +5,7 @@ import styles from './jumbotron.module.scss' export const COLORS = { white: '', dark: 'bg-black text-light', - purple: 'bg-purple text-light', + purple: 'bg-vivid-violet text-light', } interface Props { diff --git a/src/components/RequestDemoTrySourcegraph.tsx b/src/components/RequestDemoTrySourcegraph.tsx index e5c7c935fa8..c71108287c9 100644 --- a/src/components/RequestDemoTrySourcegraph.tsx +++ b/src/components/RequestDemoTrySourcegraph.tsx @@ -11,9 +11,9 @@ interface Props { } export const RequestDemoTrySourcegraph: FunctionComponent = () => ( -
+
-
+

Get started with Sourcegraph

Understand, fix, and automate changes across your entire codebase.

@@ -23,7 +23,7 @@ export const RequestDemoTrySourcegraph: FunctionComponent = () => (
Request a demo
-

Try Sourcegraph now

+

Try Sourcegraph now

diff --git a/src/components/ThreeUpText.tsx b/src/components/ThreeUpText.tsx index a192429b49a..0fea7a4d07a 100644 --- a/src/components/ThreeUpText.tsx +++ b/src/components/ThreeUpText.tsx @@ -11,14 +11,14 @@ interface Props { } export const ThreeUpText: FunctionComponent = ({ title, results }) => ( -
+

{title}

{results.map((result, index) => (
-

{result.subtitle}

+

{result.subtitle}

{result.description}

))} diff --git a/src/pages/accelerate-dev-onboarding.tsx b/src/pages/accelerate-dev-onboarding.tsx index 23da3382bbd..d90936b3f66 100644 --- a/src/pages/accelerate-dev-onboarding.tsx +++ b/src/pages/accelerate-dev-onboarding.tsx @@ -57,7 +57,7 @@ const AccelerateDevOnboarding: FunctionComponent = () => {
-
+

Learn how Convoy increases the efficiency and confidence of entry level developers diff --git a/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx b/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx index fb732dbf386..cd5412793a9 100644 --- a/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx +++ b/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx @@ -145,7 +145,7 @@ export const CaseStudy: FunctionComponent = () => (

- +
{

-
+

Cloudflare proves to auditors that its code isn't vulnerable diff --git a/src/pages/get-started/getStarted.module.scss b/src/pages/get-started/getStarted.module.scss index 44390c9b572..3c8b5ea0692 100644 --- a/src/pages/get-started/getStarted.module.scss +++ b/src/pages/get-started/getStarted.module.scss @@ -15,7 +15,7 @@ // Get started page index specific .getStartedPage { - background: linear-gradient(90deg, $light-blue 0%, $brand-fog 50%, $light-blue 50%, $light-green 100%); + background: linear-gradient(90deg, $light-blue 0%, $violet-mist 50%, $light-blue 50%, $light-green 100%); section h1 { font-size: 2.25rem; @@ -25,20 +25,20 @@ // Self hosted section section:nth-of-type(1) { @media only screen and (max-width: 990px) { - @include BgGradientBluePurple; + @include GradientBlueVioletMist; } } // Cloud section section:nth-of-type(2) { @media only screen and (max-width: 990px) { - @include BgGradientBlueGreen; + @include GradientBlueGreen; } } } .mostPopularBadge { - background: $brand-purple; + background: $vivid-violet; padding: 7px 10px; font-size: 0.65rem; line-height: 0.815rem; @@ -63,5 +63,5 @@ // Cloud page specific .gitLab { - background-color: $purple; + background-color: $blurple; } diff --git a/src/pages/get-started/self-hosted.tsx b/src/pages/get-started/self-hosted.tsx index 7f52e595388..9ef3523442e 100644 --- a/src/pages/get-started/self-hosted.tsx +++ b/src/pages/get-started/self-hosted.tsx @@ -30,7 +30,7 @@ export const SelfHostedPage: FunctionComponent = () => { heroAndHeaderClassName={styles.hero} hideGetStartedButton={true} > -
+
diff --git a/src/pages/jobs.tsx b/src/pages/jobs.tsx index e4299541aee..2d1ae0d516b 100644 --- a/src/pages/jobs.tsx +++ b/src/pages/jobs.tsx @@ -58,7 +58,7 @@ const CareersPage: FunctionComponent = () => {
-

Let’s build the future together.

+

Let's build the future together.

We're developing the world's most advanced code search navigation platform with brilliant dreamers around the globe. @@ -97,7 +97,7 @@ const CareersPage: FunctionComponent = () => { Happy, healthy, and always in the flow.

- Our Teammates are our most valuable resource. That’s why we provide total rewards that + Our Teammates are our most valuable resource. That's why we provide total rewards that are highly competitive and allow you to thrive both personally and professionally.

@@ -168,11 +168,11 @@ const CareersPage: FunctionComponent = () => {

- +

- Just because we’re remote doesn’t mean we’re apart
+ Just because we're remote doesn't mean we're apart
#life-at-sourcegraph

@@ -181,11 +181,11 @@ const CareersPage: FunctionComponent = () => {
- +

- We’re moving fast to create a world in which everyone can code + We're moving fast to create a world in which everyone can code

@@ -193,7 +193,7 @@ const CareersPage: FunctionComponent = () => {
- +

@@ -206,7 +206,7 @@ const CareersPage: FunctionComponent = () => {

- +

@@ -222,7 +222,7 @@ const CareersPage: FunctionComponent = () => {

- +

Creating the next generation of Sourcegraph coders, one baby at a time

@@ -328,7 +328,7 @@ const CareersPage: FunctionComponent = () => { -
+
diff --git a/src/pages/support.tsx b/src/pages/support.tsx index 20fa4e01923..37c1abad26e 100644 --- a/src/pages/support.tsx +++ b/src/pages/support.tsx @@ -28,12 +28,11 @@ const SUPPORT_FEATURES = { } const Support: FunctionComponent = () => ( - @@ -102,7 +101,8 @@ const Support: FunctionComponent = () => (

Team

+ href="https://sourcegraph.com/subscriptions/new" + > Buy now
@@ -149,8 +149,8 @@ const Support: FunctionComponent = () => (

Enterprise

- {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} @@ -196,7 +196,7 @@ const Support: FunctionComponent = () => ( )
  • - + Dedicated customer engineer assigned to you (available,{' '} contact us @@ -208,10 +208,10 @@ const Support: FunctionComponent = () => (

    • - * We will use commercially reasonable efforts to adhere to the SLAs and uptime defined - above. SLAs apply to tickets submitted via email to{' '} - support@sourcegraph.com. -

    + * We will use commercially reasonable efforts to adhere to the SLAs and uptime defined above. SLAs + apply to tickets submitted via email to{' '} + support@sourcegraph.com. +

    diff --git a/src/pages/use-cases/onboarding.tsx b/src/pages/use-cases/onboarding.tsx index 114c725998f..2c7b0ad4a94 100644 --- a/src/pages/use-cases/onboarding.tsx +++ b/src/pages/use-cases/onboarding.tsx @@ -180,7 +180,7 @@ const UseCasePage: FunctionComponent = () => (
    - +

    Find answers across all repositories

    Codebases grow increasingly complex over time. Sourcegraph enables developers to search @@ -188,7 +188,7 @@ const UseCasePage: FunctionComponent = () => (

    - +

    Share knowledge quickly with links to specific code

    Knowledge sharing takes time. With Sourcegraph, developers can share links directly to @@ -196,7 +196,7 @@ const UseCasePage: FunctionComponent = () => (

    - +

    Navigate and understand large codebases

    Make new codebases approachable, not aggravating. Search across all your repositories in one @@ -207,7 +207,7 @@ const UseCasePage: FunctionComponent = () => (

    -
    +
    @@ -258,7 +258,7 @@ const UseCasePage: FunctionComponent = () => (
    -
    +
    (
    -
    +
    diff --git a/src/pages/use-cases/useCases.module.scss b/src/pages/use-cases/useCases.module.scss index d138ebfc1e8..bb02001cfa8 100644 --- a/src/pages/use-cases/useCases.module.scss +++ b/src/pages/use-cases/useCases.module.scss @@ -1,5 +1,4 @@ @import '@styles/colors'; -@import '@styles/gradients'; .landingHeader { background: url('/customers-page-bg.svg') no-repeat; @@ -10,7 +9,7 @@ position: relative; background-image: url('/code-insights/code-insights-page-bg.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom left, rgba($light-green2, 0.5), transparent); + radial-gradient(ellipse at bottom left, rgba($green-mist, 0.5), transparent); background-repeat: no-repeat; background-size: cover; } diff --git a/src/pages/use-cases/vulnerabilities.tsx b/src/pages/use-cases/vulnerabilities.tsx index 41c24c65266..7fa9c33adc6 100644 --- a/src/pages/use-cases/vulnerabilities.tsx +++ b/src/pages/use-cases/vulnerabilities.tsx @@ -222,7 +222,7 @@ const UseCasePage: FunctionComponent = () => (
    - +

    Reduce time to discovery and resolution

    Find every instance of a vulnerability and start remediating in minutes instead of days or @@ -230,7 +230,7 @@ const UseCasePage: FunctionComponent = () => (

    - +

    Automate fixing, merging, and deploying fixes

    Automate PRs to fix vulnerabilities across your entire codebase so you can be 100% confident @@ -238,7 +238,7 @@ const UseCasePage: FunctionComponent = () => (

    - +

    Alert for risky code changes & known vulnerabilities

    Get on top of vulnerabilities by monitoring your repositories for commits when risky @@ -249,7 +249,7 @@ const UseCasePage: FunctionComponent = () => (

    -
    +
    @@ -313,13 +313,13 @@ const UseCasePage: FunctionComponent = () => (
    -
    +
    -
    +
    diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 6947331a3a2..b01129b5bdc 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -1,33 +1,31 @@ -/* Sourcegraph Brand Colors */ -$sg-space-black: #000000; -$blue: #2c7ef6; -$red: #dc3545; -$purple: #5033e1; -$white: #ffffff; -$gray: #6c757d; -$brand-purple: #a112ff; -$brand-cyan: #00cbec; -$brand-orange: #ff5543; -$brand-primary-blue: #2a66e2; -$logo-purple: #b200f8; +/** + * Sourcegraph Brand Colors + * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/ + */ -// Sourcegraph Brand Secondary Colors -$brand-onahau: #c7ffff; -$brand-mint: #8fedcf; -$brand-fog: #e8d1ff; -// TODO: consolidate and name more brand colours +// Sourcegraph Primary Colors +$sky-blue: #00cbec; +$vivid-violet: #a112ff; +$vermillion: #ff5543; -$body-bg: #f9f9f9; -$body-color: #222233; +// Sourcegraph Secondary Colors +$yellow-mist: #fff2cf; +$red-mist: #ffc9c9; +$violet-mist: #e8d1ff; +$plum-mist: #bfbfff; +$blue-mist: #c7ffff; +$green-mist: #c4ffe8; +$mint: #8fedcf; +$blurple: #5033e1; +$pacific-blue: #00a1c7; -$nav-bg-color: #f9f9f9; +// Sourcegraph Colors for Website UI +$pale-sky: #6c757d; +$space-black: #000000; -$dark-13: #000000; -$dark-12: #07090d; -$dark-11: #0e121b; -$dark-10: #151c28; +// Colors not listed in our Brand Guidelines $dark-9: #1d2535; -$dark-8: #242e42; +$dark-8: #222233; $dark-5: #39496a; $dark-3: #475c85; @@ -37,52 +35,85 @@ $light-5: #a2b0cd; $light-6: #afbcd4; $light-8: #cad2e2; $light-9: #d7ddea; -$light-gray-0: #ddd; +$light-gray-0: #dddddd; $light-gray-1: #dee2e6; -$light-gray-2: #f9fafb; -$light-10: #e4e9f1; -$light-11: #f2f4f8; - -$red-7: #f03e3e; +$light-gray-2: #e4e9f1; +$light-gray-3: #f2f4f8; +$light-gray-4: #f9fafb; +$light-gray-5: #f5f5f5; -$indigo-5: #5c7cfa; +$green-1: #d3f9d8; +$green-5: #51cf66; +$green-7: #37b24d; +$green-9: #2b8a3e; -$light-green: #bceee9; -$light-green2: #c4ffe8; +$alabaster: #f9f9f9; $light-blue: #d5e6f7; -$light-blue2: #bfbfff; -$light-yellow: #fff2cf; -$light-red: #ffc9c9; -$blue-3: #72c3fc; -$blue-7: #1c7cd6; -$blue-mist: #c7ffff; -$wild-sand: #f5f5f5; +$light-green: #bceee9; +$turquoise: #66d9e8; +$malibu: #72c3fc; +$curious-blue: #1c7cd6; +$cornflower-blue: #5c7cfa; +$dodger-blue: #2c7ef6; -$cyan-2: #00a1c7; -$cyan-3: #66d9e8; +/** + * Bootstrap Theme Colors + * This allows us to use text-{colorName} and bg-{colorName} utility classes + */ +$theme-colors: ( + // Bootstrap overrides + 'primary': $blurple, -$teal-7: #0ca678; + // Sourcegraph Primary Colors + 'sky-blue': $sky-blue, + 'vivid-violet': $vivid-violet, + 'vermillion': $vermillion, -$green-1: #d3f9d8; -$green-5: #51cf66; -$green-7: #37b24d; -$green-9: #2b8a3e; + // Sourcegraph Secondary Colors + 'yellow-mist': $yellow-mist, + 'red-mist': $red-mist, + 'violet-mist': $violet-mist, + 'plum-mist': $plum-mist, + 'blue-mist': $blue-mist, + 'green-mist': $green-mist, + 'mint': $mint, + 'blurple': $blurple, + 'pacific-blue': $pacific-blue, + + // Sourcegraph Colors for Website UI + 'pale-sky': $pale-sky, + 'black': $space-black, + + // Colors not listed in our Brand Guidelines + 'dark-9': $dark-9, + 'dark-8': $dark-8, + 'dark-5': $dark-5, + 'dark-3': $dark-3, + + 'light-1': $light-1, + 'light-2': $light-2, + 'light-5': $light-5, + 'light-6': $light-6, + 'light-8': $light-8, + 'light-9': $light-9, + 'light-gray-0': $light-gray-0, + 'light-gray-1': $light-gray-1, + 'light-gray-2': $light-gray-2, + 'light-gray-3': $light-gray-3, + 'light-gray-4': $light-gray-4, + 'light-gray-5': $light-gray-5, + + 'green-1': $green-1, + 'green-5': $green-5, + 'green-7': $green-7, + 'green-9': $green-9, -.bg-light-gray { - background-color: $light-gray-2; -} -.bg-light-gray2 { - background-color: $light-11; -} -.bg-black { - background-color: $sg-space-black; -} -.bg-purple { - background-color: $logo-purple; -} -.bg-light-transparent { - background-color: transparentize($light-11, 0.3); -} -.bg-unset { - background-color: unset; -} + 'alabaster': $alabaster, + 'light-blue': $light-blue, + 'light-green': $light-green, + 'turquoise': $turquoise, + 'malibu': $malibu, + 'curious-blue': $curious-blue, + 'cornflower-blue': $cornflower-blue, + 'dodger-blue': $dodger-blue +); diff --git a/src/styles/_gradients.scss b/src/styles/_gradients.scss index c61b2cf3835..370bfcf2657 100644 --- a/src/styles/_gradients.scss +++ b/src/styles/_gradients.scss @@ -1,91 +1,94 @@ @use 'sass:color'; @import '@styles/colors'; -@mixin BgGradientPrimary { - background-image: radial-gradient(circle at 50% 0px, $blue-7, darken($blue, 9%)); -} -@mixin BgGradientGreenBlue { - background: linear-gradient(90deg, $light-green 0%, $light-blue 100%); -} -@mixin BgGradientBlueGreen { - background: linear-gradient(90deg, $light-blue 0%, $light-green 100%); -} -@mixin BgGradientOnahauMint { +/** + * Sourcegraph Brand Gradients + * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/#gradients + */ + +/** + * Sourcegraph Gradients + * Note: These are slightly adjusted and not true to the Brand Guidelines + * due to following Figma designs provided. + */ +@mixin GradientVenusSaturated { background: linear-gradient( 90deg, - color.adjust($brand-onahau, $alpha: -0.7) 14.33%, - color.adjust($brand-mint, $alpha: -0.7) 81.79% + color.adjust($blue-mist, $alpha: -0.7) 14.33%, + color.adjust($mint, $alpha: -0.7) 81.79% ); } -@mixin BgGradientOnahauFog { +@mixin GradientVenusRadial { + background: radial-gradient(ellipse at top left, rgba($blue-mist, 0.5), transparent), + radial-gradient(ellipse at bottom right, rgba($green-mist, 0.5), transparent); +} +@mixin GradientSaturnSaturated { background: linear-gradient( 90deg, - color.adjust($brand-onahau, $alpha: -0.7) 14.33%, - color.adjust($brand-fog, $alpha: -0.7) 81.79% + color.adjust($blue-mist, $alpha: -0.7) 14.33%, + color.adjust($violet-mist, $alpha: -0.7) 81.79% ); } -@mixin BgGradientBluePurple { - background: linear-gradient(90deg, $light-blue 0%, $brand-fog 100%); + +// Gradients not listed in our Brand Guidelines +@mixin GradientGreenBlue { + background: linear-gradient(90deg, $light-green 0%, $light-blue 100%); } -@mixin BgGradientPurpleYellow { - background: linear-gradient(90deg, $brand-fog 0%, $light-yellow 100%); +@mixin GradientBlueGreen { + background: linear-gradient(90deg, $light-blue 0%, $light-green 100%); } -@mixin BgGradientFogBlue2 { - background: linear-gradient(90deg, $brand-fog 0%, $light-blue2 100%); +@mixin GradientBlueVioletMist { + background: linear-gradient(90deg, $light-blue 0%, $violet-mist 100%); } -@mixin BgGradientYellowGreen2 { - background: linear-gradient(90deg, $light-yellow 0%, $light-green2 100%); +@mixin GradientVioletYellowMist { + background: linear-gradient(90deg, $violet-mist 0%, $yellow-mist 100%); } -@mixin BgGradientGreen2Red { - background: linear-gradient(90deg, $light-green 0%, $light-red 100%); +@mixin GradientYellowGreenMist { + background: linear-gradient(90deg, $yellow-mist 0%, $green-mist 100%); } -@mixin BgGradientRedBlue2 { - background: linear-gradient(90deg, $light-red 0%, $light-blue2 100%); +@mixin GradientGreenRedMist { + background: linear-gradient(90deg, $light-green 0%, $red-mist 100%); } -@mixin BgGradientBlue2Blue { - background: linear-gradient(90deg, $light-blue2 0%, $light-blue 100%); +@mixin GradientRedPlumMist { + background: linear-gradient(90deg, $red-mist 0%, $plum-mist 100%); } -@mixin BgGradientBlueMist { - background: radial-gradient(ellipse at top left, rgba($blue-mist, 0.5), transparent), - radial-gradient(ellipse at bottom right, rgba($light-green2, 0.5), transparent); +@mixin GradientPlumMistBlue { + background: linear-gradient(90deg, $plum-mist 0%, $light-blue 100%); } -.bg-gradient-primary { - @include BgGradientPrimary; +// Sourcegraph Gradients - utility classes +.bg-gradient-venus-saturated { + @include GradientVenusSaturated; } -.bg-gradient-green-blue { - @include BgGradientGreenBlue; -} -.bg-gradient-blue-green { - @include BgGradientBlueGreen; +.bg-gradient-venus-radial { + @include GradientVenusRadial; } -.bg-gradient-onahau-mint { - @include BgGradientOnahauMint; +.bg-gradient-saturn-saturated { + @include GradientSaturnSaturated; } -.bg-gradient-onahau-fog { - @include BgGradientOnahauFog; -} -.bg-gradient-blue-purple { - @include BgGradientBluePurple; + +// Gradients not listed in our Brand Guidelines - utility classes +.bg-gradient-green-blue { + @include GradientGreenBlue; } -.bg-gradient-purple-yellow { - @include BgGradientPurpleYellow; +.bg-gradient-blue-green { + @include GradientBlueGreen; } -.bg-gradient-fog-blue2 { - @include BgGradientFogBlue2; +.bg-gradient-blue-violet-mist { + @include GradientBlueVioletMist; } -.bg-gradient-yellow-green2 { - @include BgGradientYellowGreen2; +.bg-gradient-violet-yellow-mist { + @include GradientVioletYellowMist; } -.bg-gradient-green2-red { - @include BgGradientGreen2Red; +.bg-gradient-yellow-green-mist { + @include GradientYellowGreenMist; } -.bg-gradient-red-blue2 { - @include BgGradientRedBlue2; +.bg-gradient-green-red-mist { + @include GradientGreenRedMist; } -.bg-gradient-blue2-blue { - @include BgGradientBlue2Blue; +.bg-gradient-red-plum-mist { + @include GradientRedPlumMist; } -.bg-gradient-blue-mist { - @include BgGradientBlueMist; +.bg-gradient-plum-mist-blue { + @include GradientPlumMistBlue; } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index ec07f6e02ed..00000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '@styles/colors'; - -$colors: ( - 'blue7': $blue-7, - 'gray': $gray, -); - -@each $name, $glyph in $colors { - .text-#{$name} { - color: $glyph; - } -} diff --git a/src/styles/components/_ComparisonTable.scss b/src/styles/components/_ComparisonTable.scss index 8a701c160e2..a52d3a93e16 100644 --- a/src/styles/components/_ComparisonTable.scss +++ b/src/styles/components/_ComparisonTable.scss @@ -28,7 +28,7 @@ &__close { svg path { - fill: $red-7; + fill: $vermillion; } margin-right: 0.5rem; } diff --git a/src/styles/components/_CustomCarousel.scss b/src/styles/components/_CustomCarousel.scss index 05ad8759dce..35a0787bd31 100644 --- a/src/styles/components/_CustomCarousel.scss +++ b/src/styles/components/_CustomCarousel.scss @@ -37,7 +37,7 @@ li { cursor: pointer; - color: $sg-space-black; + color: $space-black; margin: 30px 0; } diff --git a/src/styles/components/_Header.scss b/src/styles/components/_Header.scss index d491d45894a..02a8ee9ff2d 100644 --- a/src/styles/components/_Header.scss +++ b/src/styles/components/_Header.scss @@ -40,10 +40,10 @@ color: $white; } &.btn-outline-primary { - color: $blue; + color: $blurple; &:hover { - background-color: $blue; + background-color: $blurple; color: $white; } } @@ -51,7 +51,7 @@ .right-nav { .nav-link.btn-simple { - color: $blue; + color: $blurple; } .nav-link.btn { font-weight: bold; @@ -88,7 +88,7 @@ font-weight: normal; &:hover { color: $navbar-light-hover-color !important; - background-color: $nav-bg-color !important; + background-color: $white !important; } } /* Adjust dropdown arrow positioning */ @@ -125,5 +125,5 @@ /* Hello bar */ .background-purple { - background-color: $purple; + background-color: $blurple; } diff --git a/src/styles/components/_IconItem.scss b/src/styles/components/_IconItem.scss deleted file mode 100644 index 9a15bacc92f..00000000000 --- a/src/styles/components/_IconItem.scss +++ /dev/null @@ -1,21 +0,0 @@ -@mixin icon-item-color($name, $color) { - &.#{$name} { - color: $color; - background-color: rgba($color, 0.25); - } -} - -.icon-item { - &__icon { - margin-right: 0.5rem; - padding: 0.125rem; - - @include icon-item-color('blue', $primary); - @include icon-item-color('brand-cyan', $brand-cyan); - @include icon-item-color('brand-purple', $brand-purple); - @include icon-item-color('brand-orange', $brand-orange); - @include icon-item-color('green', $green); - @include icon-item-color('red', $red); - @include icon-item-color('white', $white); - } -} diff --git a/src/styles/components/_LeadershipSection.scss b/src/styles/components/_LeadershipSection.scss index 271d8fc4cb7..7e3b6eacfb0 100644 --- a/src/styles/components/_LeadershipSection.scss +++ b/src/styles/components/_LeadershipSection.scss @@ -18,7 +18,7 @@ padding: 0.3rem; } &-social a:hover { - color: #6c757d; + color: $pale-sky; } &-social li:first-child { padding-left: 0; diff --git a/src/styles/components/_SelfHostedSection.scss b/src/styles/components/_SelfHostedSection.scss index 5160fba39c6..d381ad77387 100644 --- a/src/styles/components/_SelfHostedSection.scss +++ b/src/styles/components/_SelfHostedSection.scss @@ -6,7 +6,7 @@ width: 100%; outline: none; resize: none; - background-color: $light-11; + background-color: $light-gray-3; min-height: 150px; padding: 1.5rem; } @@ -45,7 +45,7 @@ padding-left: 1.5rem; } &__action { - background-color: $light-11; + background-color: $light-gray-3; border: 1px solid $light-gray-1 !important; padding: 1.5rem; min-height: 150px; diff --git a/src/styles/components/_TemplateCodeBlock.scss b/src/styles/components/_TemplateCodeBlock.scss index 8c2e2a740df..514a6c994ad 100644 --- a/src/styles/components/_TemplateCodeBlock.scss +++ b/src/styles/components/_TemplateCodeBlock.scss @@ -15,13 +15,13 @@ } .code { - background-color: $light-11; + background-color: $light-gray-3; font-family: sfmono-regular, consolas, menlo, dejavu sans mono, monospace; font-size: 11px; border: 1px solid #dfe2e6; } .keyword { - color: $blue; + color: $dodger-blue; } } diff --git a/src/styles/components/blog/_BlogPost.scss b/src/styles/components/blog/_BlogPost.scss index 155068f8698..bcab12f798f 100644 --- a/src/styles/components/blog/_BlogPost.scss +++ b/src/styles/components/blog/_BlogPost.scss @@ -17,7 +17,6 @@ } &__read-more { - color: $blue-7; font-weight: bold; } diff --git a/src/styles/components/blog/_PostsList.scss b/src/styles/components/blog/_PostsList.scss index ac3aca82ac7..b5163cbea71 100644 --- a/src/styles/components/blog/_PostsList.scss +++ b/src/styles/components/blog/_PostsList.scss @@ -5,7 +5,7 @@ &-title { font-size: $h5-font-size; &-link { - color: $body-color; + color: $dark-8; } } } diff --git a/src/styles/components/product/_GitLabIntegrationSection.scss b/src/styles/components/product/_GitLabIntegrationSection.scss index 377011439a6..204456dc68d 100644 --- a/src/styles/components/product/_GitLabIntegrationSection.scss +++ b/src/styles/components/product/_GitLabIntegrationSection.scss @@ -8,7 +8,7 @@ } &__new-badge { - color: $light-11; + color: $light-gray-3; background-color: #dc3545; border: 1px solid transparent; padding: 0.15rem 0.75rem; @@ -25,7 +25,7 @@ font-size: 1.35rem; p { - border-left: 3px solid $brand-cyan; + border-left: 3px solid $sky-blue; padding-left: 1rem; text-indent: 0.4em; diff --git a/src/styles/globals.scss b/src/styles/globals.scss index b999133c563..89a60115d7f 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -8,6 +8,8 @@ @import 'colors'; +/* ==================== Bootstrap Overrides ==================== */ + $font-family-sans-serif: source-sans-pro, sans-serif; /* Adobe Source Sans Pro */ $font-family-monospace: source-code-pro, monospace; /* Adobe Source Code Pro for code */ $font-family-base: $font-family-sans-serif; @@ -64,9 +66,9 @@ $display4-size: 1.75rem; $navbar-nav-link-padding-x: $spacer * 0.75; $navbar-light-color: $dark; -$navbar-light-hover-color: $blue; +$navbar-light-hover-color: $blurple; $navbar-dark-color: $light; -$navbar-dark-hover-color: $blue; +$navbar-dark-hover-color: $blurple; $nav-tabs-border-width: 0; @@ -74,13 +76,13 @@ $btn-padding-x: 1.5rem; $btn-font-weight: 600; $input-bg: transparent; -$input-color: $body-color; +$input-color: $dark-8; $input-box-shadow: none; -$input-border-color: $brand-primary-blue; +$input-border-color: $blurple; $input-border-width: 3px; $input-focus-bg: $input-bg; -$input-focus-color: $body-color; -$input-placeholder-color: $body-color; +$input-focus-color: $dark-8; +$input-placeholder-color: $dark-8; $input-focus-border-color: darken($component-active-bg, 25%); $input-focus-box-shadow: none; @@ -97,7 +99,7 @@ $card-spacer-x: 1.25 * $spacer; $grid-gutter-width: 2rem; :root { - --body-color: #{$body-color}; + --body-color: #{$dark-8}; --border-color: #{$border-color}; } @@ -123,6 +125,8 @@ $grid-gutter-width: 2rem; @import 'node_modules/bootstrap/scss/dropdown'; @import 'node_modules/bootstrap/scss/carousel'; +/* ==================== Layout ==================== */ + html, body { -webkit-overflow-scrolling: touch; @@ -135,29 +139,16 @@ body { body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; + background-color: $alabaster; } +/* ==================== Icons ==================== */ + .material-icons { margin-right: 4px; fill: currentColor; } -.popover { - /* Prevent a child element with non-rounded corners from extruding. - overflow: hidden; */ - border: 0; -} - -.text-sans-serif { - font-family: $font-family-sans-serif; -} - -.popover-body { - border: solid 1px $gray-200; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; - background-color: $white; -} - /* Formats an icon so that it appears inline in the text with height matching the text */ .icon-inline { /* SVGs already include padding to account for text baseline, @@ -180,20 +171,7 @@ img.icon-inline, fill: currentColor; } -.img-drop-shadow { - max-width: calc(100% - 10px); - max-height: 100vh; - box-shadow: 0 4px 18px 0 #0000001a, 0 6px 20px 0 #00000017; - margin: 40px auto; - display: block; - vertical-align: middle; - border-style: none; -} - -code.border { - background-color: $light-11; - font-size: 80%; -} +/* ==================== Tables ==================== */ table { width: 100%; @@ -221,6 +199,8 @@ table { background-color: $white; } +/* ==================== BEM Pages/Components ==================== */ + @import 'components/blog/BlogPost'; @import 'components/blog/LinkPost'; @import 'components/blog/PodcastPost'; @@ -240,7 +220,6 @@ table { @import 'components/Events'; @import 'components/SelfHostedSection'; @import 'components/Header'; -@import 'components/IconItem'; @import 'components/Footer'; @import 'components/LeadershipSection'; @import 'components/PrismTheme'; @@ -267,13 +246,10 @@ table { @import 'templates/PostTemplate'; @import 'pages/dev-tools-quiz'; @import 'pages/code-insights'; -@import './gradients'; -@import './spacing'; -@import './typography'; +@import 'gradients'; +@import 'spacing'; -.virtual-br::before { - content: '\A'; -} +/* ==================== Typography ==================== */ .font-size-base { font-size: $font-size-base !important; @@ -281,41 +257,78 @@ table { .font-family-base { font-family: $font-family-base !important; } - -.nav-tabs { - font-weight: 600; - font-size: 1.25em; - border-bottom-width: 1px; -} - .font-size-medium { font-size: 1.2em; line-height: 1.95em; } - .font-size-large { font-size: 4.5em; line-height: 1.25em; } - .font-size-extra-large { font-size: 6em; line-height: 1.25em; } - -.blog-image { - margin-top: 1rem; - margin-bottom: 1rem; - border: 1px solid var(--border-color); - max-width: 100%; +.text-normal { + font-size: normal; +} +.text-sans-serif { + font-family: $font-family-sans-serif; } - .text-decoration-underline { text-decoration: underline; &:hover { text-decoration: none; } } -.text-normal { - font-style: normal; + +/* ==================== Bootstrap Components ==================== */ + +.popover { + /* Prevent a child element with non-rounded corners from extruding. + overflow: hidden; */ + border: 0; +} + +.popover-body { + border: solid 1px $gray-200; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; + background-color: $white; +} + +.nav-tabs { + font-weight: 600; + font-size: 1.25em; + border-bottom-width: 1px; +} + +/* ==================== Misc ==================== */ + +.virtual-br::before { + content: '\A'; +} + +.img-drop-shadow { + max-width: calc(100% - 10px); + max-height: 100vh; + box-shadow: 0 4px 18px 0 #0000001a, 0 6px 20px 0 #00000017; + margin: 40px auto; + display: block; + border-style: none; +} + +code.border { + background-color: $light-gray-3; + font-size: 80%; +} + +.list-spaced > li { + margin-bottom: 1rem; +} + +.blog-image { + margin-top: 1rem; + margin-bottom: 1rem; + border: 1px solid var(--border-color); + max-width: 100%; } diff --git a/src/styles/pages/_about.scss b/src/styles/pages/_about.scss index ea41e758846..7e70f5a1d5d 100644 --- a/src/styles/pages/_about.scss +++ b/src/styles/pages/_about.scss @@ -5,7 +5,7 @@ &__plan { padding: 3rem 0; - background-color: $light-10; + background-color: $light-gray-2; &-container { background-color: #ffffff; padding: 2rem 2rem; @@ -34,7 +34,7 @@ border-radius: 0.25rem; padding-right: 1rem; margin: 0 0 1rem 1rem; - background: $light-11; + background: $light-gray-3; display: flex; img { margin-bottom: 0; diff --git a/src/styles/pages/_batch-changes.scss b/src/styles/pages/_batch-changes.scss index 0c24f9ef303..593ebb2a35c 100644 --- a/src/styles/pages/_batch-changes.scss +++ b/src/styles/pages/_batch-changes.scss @@ -2,8 +2,8 @@ &__hero-and-header { background-image: url('/batch-changes/hero_illustration.svg'), url('/batch-changes/hero_background.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom right, rgba($indigo-5, 0.5), transparent), - radial-gradient(ellipse at bottom left, rgba($cyan-3, 0.5), transparent); + radial-gradient(ellipse at bottom right, rgba($cornflower-blue, 0.5), transparent), + radial-gradient(ellipse at bottom left, rgba($turquoise, 0.5), transparent); background-repeat: no-repeat, no-repeat; background-size: auto 113%, 100% 100%; background-position: center right 15%, top left; @@ -13,10 +13,10 @@ button { font-weight: 600; background-color: transparent; - color: $blue; + color: $blurple; &:hover { - color: $brand-primary-blue; + color: $blurple; @media only screen and (max-width: 990px) { color: unset; diff --git a/src/styles/pages/_code-insights.scss b/src/styles/pages/_code-insights.scss index 3f184de7240..769066801e3 100644 --- a/src/styles/pages/_code-insights.scss +++ b/src/styles/pages/_code-insights.scss @@ -28,7 +28,7 @@ &::before { background-image: url('/code-insights/code-insights-page-bg.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom left, rgba($light-green2, 0.5), transparent); + radial-gradient(ellipse at bottom left, rgba($green-mist, 0.5), transparent); background-position: top left; @media only screen and (max-width: 990px) { transform: rotate(180deg); @@ -70,7 +70,6 @@ border-radius: 45%; padding: 1rem; background-color: $white; - color: $cyan-2; } } @@ -88,15 +87,9 @@ } .btn-link { - color: $brand-primary-blue; text-decoration: none; } - .btn-primary { - color: $white; - background-color: $brand-primary-blue; - } - .tab-section { @media only screen and (max-width: 768px) { display: none; @@ -146,7 +139,7 @@ font-size: 1.5rem; line-height: 1.4rem; cursor: pointer; - color: $sg-space-black; + color: $space-black; display: block; margin: 10px 0 10px 10px; font-size: 18px; diff --git a/src/styles/pages/_community.scss b/src/styles/pages/_community.scss index 7b7d05192d6..31bb96eb7dd 100644 --- a/src/styles/pages/_community.scss +++ b/src/styles/pages/_community.scss @@ -10,10 +10,10 @@ button { font-weight: 600; background-color: transparent; - color: $blue; + color: $blurple; &:hover { - color: $brand-primary-blue; + color: $blurple; @media only screen and (max-width: 990px) { color: unset; diff --git a/src/styles/pages/_content.scss b/src/styles/pages/_content.scss index 5f0e883b850..ec1c4c0c113 100644 --- a/src/styles/pages/_content.scss +++ b/src/styles/pages/_content.scss @@ -2,8 +2,8 @@ &__title { text-align: center; padding: 2rem; - border-bottom: 1px solid $light-11; - background-color: $light-11; + border-bottom: 1px solid $light-gray-3; + background-color: $light-gray-3; } &__body { diff --git a/src/styles/pages/_get-started.scss b/src/styles/pages/_get-started.scss index eb0925796b4..61a5ab3217a 100644 --- a/src/styles/pages/_get-started.scss +++ b/src/styles/pages/_get-started.scss @@ -26,7 +26,7 @@ &__local { .btn { - color: $blue; + color: $blurple; font-size: 1.125rem; line-height: 1.375rem; padding: 0; @@ -86,18 +86,18 @@ padding-bottom: 0.25rem; } .github { - background-color: $sg-space-black; + background-color: $space-black; color: $white; } .gitlab { - background-color: $purple; + background-color: $blurple; color: $white; } a { margin: 8px 0; } hr { - color: $sg-space-black; + color: $space-black; opacity: 0.5; } .small-font { @@ -150,7 +150,7 @@ .small-font a { text-decoration: underline; - color: $sg-space-black; + color: $space-black; } .small-font { font-size: 1rem; @@ -170,7 +170,7 @@ } .badge { text-transform: uppercase; - background-color: $brand-purple; + background-color: $vivid-violet; padding: 7px 10px 5px; color: $white; font-weight: bold; @@ -220,7 +220,7 @@ @media only screen and (max-width: 768px) { .btn { - color: $blue; + color: $blurple; background-color: transparent; border: 0 none; padding: 0; @@ -253,7 +253,7 @@ display: none; } .mdi-icon { - color: $sg-space-black; + color: $space-black; } } diff --git a/src/styles/pages/_jobs.scss b/src/styles/pages/_jobs.scss index 8e18781c314..9018834bf20 100644 --- a/src/styles/pages/_jobs.scss +++ b/src/styles/pages/_jobs.scss @@ -76,7 +76,7 @@ .handbook-benefits-link { text-decoration: underline; - color: $sg-space-black; + color: $space-black; } .icon { @@ -102,7 +102,7 @@ } button { - background-color: $sg-space-black; + background-color: $space-black; opacity: 0.5; width: 10px; height: 10px; @@ -221,7 +221,7 @@ .carousel-control-prev-icon, .carousel-control-next-icon, .carousel-indicators li { - background-color: $sg-space-black; + background-color: $space-black; } } } diff --git a/src/styles/pages/_podcast.scss b/src/styles/pages/_podcast.scss index cd930b6216a..b8af3816c3e 100644 --- a/src/styles/pages/_podcast.scss +++ b/src/styles/pages/_podcast.scss @@ -21,7 +21,7 @@ border-top: 1px solid $dark-5; border-bottom: 1px solid $dark-5; color: black; - background-color: $blue-3; + background-color: $malibu; padding-top: 1em; padding-bottom: 1em; &-highlight { @@ -51,13 +51,13 @@ &__content-option { margin: 1.5em 0 1.5em 0; - color: $blue-3; + color: $malibu; a { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 1em; padding-left: 1em; - color: $blue-3; + color: $malibu; &:first-child { margin-left: -1em; @@ -66,8 +66,8 @@ border-radius: 0.5em; } a.podcast__content-option-selected { - text-shadow: 0 0 0.9px $blue-3, 0 0 0.9px $blue-3; - border: 1px solid $blue-3; + text-shadow: 0 0 0.9px $malibu, 0 0 0.9px $malibu; + border: 1px solid $malibu; box-sizing: border-box; } } @@ -92,13 +92,13 @@ font-size: 2.5em; margin: 0.75em auto 0.75em auto; font-weight: 100; - color: $blue-3; + color: $malibu; a { - color: $blue-3; + color: $malibu; } a:hover { text-decoration: none; - border-bottom: 2px solid $blue-3; + border-bottom: 2px solid $malibu; } } diff --git a/src/styles/pages/_sales.scss b/src/styles/pages/_sales.scss index 12fb49d2f3f..0aec0a44be9 100644 --- a/src/styles/pages/_sales.scss +++ b/src/styles/pages/_sales.scss @@ -73,7 +73,7 @@ } .panel { - background: $light-10; + background: $light-gray-2; border-radius: 0.5rem; padding: 2rem; &__help { diff --git a/src/styles/pages/_universal-code-search.scss b/src/styles/pages/_universal-code-search.scss index c9f1210e074..64aa44290da 100644 --- a/src/styles/pages/_universal-code-search.scss +++ b/src/styles/pages/_universal-code-search.scss @@ -5,6 +5,6 @@ } &__btn { - background-color: $brand-cyan; + background-color: $sky-blue; } } diff --git a/src/styles/pages/get-started/_cloud.scss b/src/styles/pages/get-started/_cloud.scss index 0c401d938fc..e17ada73937 100644 --- a/src/styles/pages/get-started/_cloud.scss +++ b/src/styles/pages/get-started/_cloud.scss @@ -21,7 +21,7 @@ .small-font a { text-decoration: underline; - color: $sg-space-black; + color: $space-black; margin: 0 0 4px 0; } .small-font, @@ -45,7 +45,7 @@ } .badge { text-transform: uppercase; - background-color: $brand-purple; + background-color: $vivid-violet; padding: 7px 10px 5px; color: $white; font-weight: bold; @@ -92,7 +92,7 @@ @media only screen and (max-width: 768px) { .btn { - color: $blue; + color: $blurple; background-color: transparent; border: 0 none; padding: 0; @@ -125,7 +125,7 @@ display: none; } .mdi-icon { - color: $sg-space-black; + color: $space-black; } } @@ -165,16 +165,16 @@ } } .github { - background-color: $sg-space-black; + background-color: $space-black; } .gitlab { - background-color: $purple; + background-color: $blurple; } a { margin: 8px 0; } hr { - color: $sg-space-black; + color: $space-black; opacity: 0.5; } .small-font { diff --git a/src/styles/pages/product/_code-change-management.scss b/src/styles/pages/product/_code-change-management.scss index b3765ea6fdf..4c27c82693a 100644 --- a/src/styles/pages/product/_code-change-management.scss +++ b/src/styles/pages/product/_code-change-management.scss @@ -8,7 +8,7 @@ top: -0.3rem; right: -6rem; content: 'Private beta'; - color: $light-11; + color: $light-gray-3; background-color: #dc3545; text-transform: uppercase; border: 1px solid transparent; diff --git a/src/styles/templates/_PostTemplate.scss b/src/styles/templates/_PostTemplate.scss index 880d6df9357..40707921250 100644 --- a/src/styles/templates/_PostTemplate.scss +++ b/src/styles/templates/_PostTemplate.scss @@ -9,7 +9,7 @@ &-title { &-link { - color: $body-color; + color: $dark-8; } }