diff --git a/src/components/Badge/styles.scss b/src/components/Badge/styles.scss index 610c3b52..9a34cf67 100644 --- a/src/components/Badge/styles.scss +++ b/src/components/Badge/styles.scss @@ -4,40 +4,42 @@ align-self: flex-start; border-radius: 4px; border: none; - color: $white; + color: $black; display: inline; font-size: 13px; font-weight: 600; padding: 0 14px; padding: 4px 8px; text-transform: uppercase; + text-decoration: none; &.pink { - background-color: $pink-bg; + background-color: $badge-bg-pink; } &.blue { - background-color: $blue-bg; + background-color: $badge-bg-blue; } &.dark-blue { - background-color: $blue-dark; + background-color: $badge-bg-navy; + color: $white; } &.yellow { - background-color: $yellow-bg; + background-color: $badge-bg-yellow; border: none; } &.green { - background-color: $green-bg-dark; + background-color: $badge-bg-teal-dark; } &.light-green { - background-color: $green-bg; + background-color: $badge-bg-teal; } &.red { - background-color: $red-bg; + background-color: $badge-bg-red; } } diff --git a/src/components/BottomCallout/styles.scss b/src/components/BottomCallout/styles.scss index b7298daa..27b7ee94 100644 --- a/src/components/BottomCallout/styles.scss +++ b/src/components/BottomCallout/styles.scss @@ -2,7 +2,7 @@ @import '../../styles/variables'; .BottomCallout { - background-color: $blue-dark; + background-color: $navy-dark; padding: 24px 0; color: $white; display: flex; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 3c689023..108184e0 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -5,7 +5,6 @@ import './styles.scss'; const btnTypes = { primary: 'is-primary', // uses bulma secondary: 'is-white secondary', // bulma + custom css - blue: 'blue', }; const btnSizes = { diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss index c80000ed..15d606e1 100644 --- a/src/components/Button/styles.scss +++ b/src/components/Button/styles.scss @@ -12,11 +12,11 @@ // This class is added like so: // - @@ -112,21 +116,13 @@ class HomePage extends React.Component {

Bioinformatics Core Products

Data is the essence of our field. Implement Overture’s core products to - - - - Generate & Upload{' '} - - - + + Generate & Upload + and
- - - - Access & Download - - - + + Access & Download + genomic data across multiple cloud providers:
@@ -137,7 +133,7 @@ class HomePage extends React.Component {
Authorization service for identity providers such as Google and Facebook.
-
+
Learn More
@@ -148,7 +144,7 @@ class HomePage extends React.Component {
Facilitates the transfer and storage of data seamlessly for cloud-based projects.
-
+
Learn More
@@ -159,7 +155,7 @@ class HomePage extends React.Component {
Tracks genomic data scattered across multiple cloud storage systems.
-
+
Learn More
@@ -171,7 +167,7 @@ class HomePage extends React.Component { Provide your administrators with the power to organize an intuitive search interface.
-
+
Learn More
@@ -184,24 +180,18 @@ class HomePage extends React.Component {
Also explore our products for:
- - - Analyze & Discover - + + Analyze & Discover - - - Collaborate & Share - + + Collaborate & Share
- - - Track & Manage - + + Track & Manage
diff --git a/src/pages/privacy/styles.scss b/src/pages/privacy/styles.scss index 29cc654c..8b7e71ad 100644 --- a/src/pages/privacy/styles.scss +++ b/src/pages/privacy/styles.scss @@ -9,7 +9,7 @@ font-size: 18px; letter-spacing: 0; line-height: 30px; - color: $blue-darker; + color: $navy-black; } p { diff --git a/src/pages/products/index.js b/src/pages/products/index.js index 58903e53..3df42029 100644 --- a/src/pages/products/index.js +++ b/src/pages/products/index.js @@ -18,7 +18,6 @@ import './style.scss'; // Component for rendering a single "box" representing a feature (ie "Generate & Upload") const ProductBox = ({ header, - headerColor, containerClass = 'is-6 box-section', details, links, @@ -29,42 +28,29 @@ const ProductBox = ({ return ( @@ -77,36 +63,32 @@ const featureGridData = [ header: 'Generate & Upload', id: 'generate-upload', containerClass: 'generate-upload', - headerColor: '#D087B4', - bgColor: '#F2F3F5', isCore: true, details: 'Products that allow your data submitters to generate genomic and clinical metadata and securely upload the corresponding files: ', links: [ - { icon: 'productScore', text: 'Score', link: 'score' }, - { icon: 'productSong', text: 'Song', link: 'song' }, + { icon: 'productScore', text: 'Score', link: productsDict.score.productsPath }, + { icon: 'productSong', text: 'Song', link: productsDict.song.productsPath }, ], ChildComponent: ProductBox, }, { header: 'Access & Download', - headerColor: '#6AC3E8', id: 'access-download', containerClass: 'access-download', - bgColor: '#F2F3F5', isCore: true, details: 'Products that give your users the correct permissions to view and download controlled data: ', links: [ - { icon: 'productEgo', text: 'Ego', link: 'ego', iconSize: 24 }, + { icon: 'productEgo', text: 'Ego', link: productsDict.ego.productsPath, iconSize: 24 }, { icon: 'productMaestro', text: 'Maestro', link: 'maestro', iconSize: 40, }, - { icon: 'productArranger', text: 'Arranger', link: 'arranger' }, + { icon: 'productArranger', text: 'Arranger', link: productsDict.arranger.productsPath }, ], ChildComponent: ProductBox, }, @@ -114,37 +96,32 @@ const featureGridData = [ [ { header: 'Analyze & Discover', - headerColor: '#C86370', id: 'analyze-discover', containerClass: 'analyze-discover', details: 'Products that allow your users to access interactive visualizations and code-based analysis environments: ', links: [ - { icon: 'productJukebox', text: 'Jukebox', link: 'jukebox' }, - { icon: 'productOnco', text: 'OncoJS', link: 'oncojs' }, + { icon: 'productJukebox', text: 'Jukebox', link: productsDict.jukebox.productsPath }, + { icon: 'productOnco', text: 'OncoJS', link: productsDict.oncojs.productsPath }, ], ChildComponent: ProductBox, }, - { header: 'Collaborate & Share', - headerColor: '#47D9BF', id: 'collaborate-share', containerClass: 'collaborate-share', details: 'Products that allow your users to set up a profile and share urls in order to raise awareness across the scientific community: ', links: [ - { icon: 'productPersona', text: 'Persona', link: 'persona' }, - { icon: 'productRiff', text: 'Riff', link: 'riff' }, + { icon: 'productPersona', text: 'Persona', link: productsDict.persona.productsPath }, + { icon: 'productRiff', text: 'Riff', link: productsDict.riff.productsPath }, ], ChildComponent: ProductBox, }, ], - [ { header: 'Track & Manage', - headerColor: '#ECC000', id: 'track-manage', containerClass: 'track-manage is-6 is-offset-3', details: @@ -273,11 +250,11 @@ export default function ProductsPage() { {/* Grid sections */}
diff --git a/src/pages/products/oncojs/index.js b/src/pages/products/oncojs/index.js index c47fcb60..09ed1a75 100644 --- a/src/pages/products/oncojs/index.js +++ b/src/pages/products/oncojs/index.js @@ -5,6 +5,7 @@ import { Button, Callout, H2, + Icon, LinkHelper as Link, ProductFeature, ProductHero, @@ -91,8 +92,8 @@ const OncoPage = () => (
- - Live example > + + Live example
@@ -149,8 +150,8 @@ const OncoPage = () => (
- - Live example > + + Live example
@@ -204,8 +205,8 @@ const OncoPage = () => (
- - Live example > + + Live example
@@ -266,8 +267,8 @@ const OncoPage = () => (
- - Live example > + + Live example
@@ -320,8 +321,8 @@ const OncoPage = () => (
- - Live example > + + Live example
diff --git a/src/pages/products/song/index.js b/src/pages/products/song/index.js index 610b9bdd..94988698 100644 --- a/src/pages/products/song/index.js +++ b/src/pages/products/song/index.js @@ -185,7 +185,7 @@ const SongPage = () => (
Or use our storage system - Score > + Score
diff --git a/src/pages/products/style.scss b/src/pages/products/style.scss index 8935d2fa..7a26eb87 100644 --- a/src/pages/products/style.scss +++ b/src/pages/products/style.scss @@ -34,8 +34,8 @@ } .grid-feature-wrap { - border-top: 2px solid $grey-4; - border-bottom: 2px solid $grey-4; + border-top: 2px solid $grey-3; + border-bottom: 2px solid $grey-3; } // sub component for `ProductBox` @@ -46,7 +46,7 @@ @media (max-width: $tablet) { padding: 44px; border-right: none; - border-bottom: 2px solid $grey-4; + border-bottom: 2px solid $grey-3; } .heading { @@ -64,7 +64,7 @@ .details { font-family: $font-sans-serif; font-size: 18px; - color: $blue-darker; + color: $navy-black; letter-spacing: 0; line-height: 30px; padding: 32px 0; @@ -76,7 +76,8 @@ .icon-link { display: flex; - flex: 1; + flex: 1 1 auto; + font-weight: bold; } .icon { @@ -95,39 +96,53 @@ .link { font-family: $font-sans-serif; font-size: 26px; - color: $blue-darker; + color: $navy-black; letter-spacing: 0; line-height: 70px; align-items: center; display: flex; - + text-decoration: none; &:hover { - color: $magenta; + color: $pink-darker; } } - + h2 { + font-weight: bold; + } // per box styling &.collaborate-share { + h2 { + color: $title-green; + } } - &.access-download { + h2 { + color: $title-blue; + } } - &.analyze-discover { - border-right: 2px solid $grey-4; + h2 { + color: $title-red; + } + border-right: 2px solid $grey-3; @media (max-width: $tablet) { border-right: none; } } - &.generate-upload { - border-right: 2px solid $grey-4; + h2 { + color: $title-pink; + } + border-right: 2px solid $grey-3; @media (max-width: $tablet) { border-right: none; - border-bottom: 2px solid $grey-4; + border-bottom: 2px solid $grey-3; } } &.track-manage { + h2 { + color: $title-yellow; + } } } } diff --git a/src/pages/services/styles.scss b/src/pages/services/styles.scss index b864886e..08d3f192 100644 --- a/src/pages/services/styles.scss +++ b/src/pages/services/styles.scss @@ -8,7 +8,7 @@ font-size: 18px; letter-spacing: 0; line-height: 30px; - color: $blue-darker; + color: $navy-black; } .services-top-hero { @@ -51,7 +51,7 @@ .hero-subheader { font-family: $font-sans-serif; font-size: 24px; - color: $blue-darker; + color: $navy-black; letter-spacing: 0; line-height: 40px; } @@ -68,7 +68,7 @@ .bottom-header { font-family: $font-sans-serif; font-size: 40px; - color: $blue-darker; + color: $navy-black; letter-spacing: 0; line-height: 68px; } diff --git a/src/pages/terms-conditions/styles.scss b/src/pages/terms-conditions/styles.scss index 52d367f7..0b5043d0 100644 --- a/src/pages/terms-conditions/styles.scss +++ b/src/pages/terms-conditions/styles.scss @@ -9,7 +9,7 @@ font-size: 18px; letter-spacing: 0; line-height: 30px; - color: $blue-darker; + color: $navy-black; } p { diff --git a/src/styles/_color-codes.scss b/src/styles/_color-codes.scss new file mode 100644 index 00000000..e0785704 --- /dev/null +++ b/src/styles/_color-codes.scss @@ -0,0 +1,66 @@ +// raw color values +// use only in _colors.css + +$c-white: #fff; +$c-black: #000; +$c-blue-green-gradient: linear-gradient(to right, #4bc6f0 0%, #99f1e5 100%); +$c-green-bright: #82ee86; + +$c-blue-100: #edf9fd; +$c-blue-200: #d2f1fb; +$c-blue-300: #aee5f8; +$c-blue-400: #66cef2; +$c-blue-500: #4bc6f0; +$c-blue-600: #109ed9; +$c-blue-700: #0b75a2; + +$c-green-100: #fbfbeb; +$c-green-200: #f5f7ce; +$c-green-300: #f0f2b0; +$c-green-400: #e4e775; +$c-green-500: #d9de3a; +$c-green-600: #cfd509; + +$c-grey-100: #f2f5f8; +$c-grey-200: #f2f3f5; +$c-grey-300: #dfdfe1; +$c-grey-400: #aeafb3; +$c-grey-500: #5e6068; +$c-grey-600: #282a35; + +$c-navy-100: #e5edf3; +$c-navy-200: #c0d3e2; +$c-navy-300: #9bb9d1; +$c-navy-400: #4f85ae; +$c-navy-500: #04518c; +$c-navy-600: #003055; + +$c-pink-100: #f7ecf3; +$c-pink-200: #edd2e1; +$c-pink-300: #e2b7d0; +$c-pink-400: #c772a3; +$c-pink-500: #b74a89; +$c-pink-600: #9e005d; + +$c-red-100: #f9eff0; +$c-red-200: #f1d8db; +$c-red-300: #e9c1c6; +$c-red-400: #d07a85; +$c-red-500: #c86370; +$c-red-600: #ad404e; + +$c-teal-100: #e5fbf8; +$c-teal-200: #ccf8f2; +$c-teal-300: #99f1e5; +$c-teal-400: #40e6cf; +$c-teal-500: #00ddbe; +$c-teal-600: #00c4a7; +$c-teal-700: #00a88f; + +$c-yellow-100: #fdfae8; +$c-yellow-200: #fcf3c7; +$c-yellow-300: #faeca6; +$c-yellow-400: #f5de63; +$c-yellow-500: #f2d021; +$c-yellow-600: #e6c104; +$c-yellow-700: #af9204; diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index b7457938..e345e972 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -1,50 +1,55 @@ -$blue-2: #00a1d9; -$blue-3: #4f85ae; -$blue-bg: #6ac3e8; -$blue-black: #151c3d; -$blue-dark: #04518c; -$blue-darker: #003055; -$blue-darkest: #282a35; -$blue-light: #66c2ea; -$blue-links-darker: #0c7cac; -$blue-links-yellow-bg: #0b75a2; -$blue-links: #109ed9; -$blue-nav: #004773; -$blue: #00a2d9; -$green-bg-dark: #5db9ae; -$green-bg: #00ddbe; -$green-link: #47d9bf; -$green-terminal: #82ee86; -$green-text: #3dd3b1; -$grey-1: #f1f3f5; -$grey-2: #efefef; -$grey-3: #dfdfdf; -$grey-4: #d4d4d4; -$grey-5: #eff0f3; -$grey-6: #d8d8d8; -$grey-bg-hover-2: #fbfbfc; -$grey-bg-hover-light: #f1f5f5; -$grey-bg-hover: #f2f5f8; -$grey-blue: #e5edf3; -$grey-border: #aeafb3; -$grey-hr: #dfdfe1; -$grey-table-bg: #f2f5f8; -$grey-table-border: #dcdde1; -$grey-text: #555; -$grey: #f2f3f5; -$image-border: #dfdfe1; -$magenta-border: #b74a89; -$magenta: #9e005d; -$pink-bg: #c66fa5; -$pink-light-bg: #f7ecf3; -$pink: #d087b4; -$red-bg: #c86370; -$tooltip-bg: #5e6068; -$tooltip-bg: #5e6068; -$white: #ffffff; -$yellow-bg: #ecc000; -$yellow-light-bg: #fcf3c7; -$yellow-light-border: #f2d021; -$yellow: #f2d03a; -$blue-outline: #4bc6f0; -$grey-input-border: #babcc2; +@import './color-codes'; + +$blue-light: $c-blue-400; +$blue-outline: $c-blue-500; +$blue: $c-blue-600; +$blue-links: $c-blue-700; + +$grey-1: $c-grey-100; +$grey-2: $c-grey-200; +$grey-3: $c-grey-300; +$grey-4: $c-grey-400; +$grey-darkest: $c-grey-600; + +$navy-dark: $c-navy-500; +$navy-black: $c-navy-600; + +$pink-light: $c-pink-100; +$pink: $c-pink-400; +$pink-dark: $c-pink-500; +$pink-darker: $c-pink-600; + +// rename to teal? +$green-bg: $c-teal-500; +$green-text: $c-teal-600; + +$black: $c-black; +$yellow: $c-yellow-500; +$white: $c-white; + +// contextual colours + +// badges +$badge-bg-blue: $c-blue-400; +$badge-bg-navy: $c-navy-500; +$badge-bg-pink: $c-pink-400; +$badge-bg-red: $c-red-400; +$badge-bg-teal-dark: $c-teal-700; +$badge-bg-teal: $c-teal-500; +$badge-bg-yellow: $c-yellow-600; + +// titles +$title-blue: $c-blue-600; +$title-green: $c-teal-700; +$title-pink: $c-pink-500; +$title-red: $c-red-500; +$title-yellow: $c-yellow-700; + +// warning box +$warning-bg: $c-yellow-200; +$warning-border: $c-yellow-500; +$warning-text: $c-navy-600; + +// misc +$gradient-bg: $c-blue-green-gradient; +$terminal-text: $c-green-bright; diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 6c351b3a..bf9aa8b1 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -11,7 +11,7 @@ .bullet { font-family: $font-sans-serif; - color: $blue-darker; + color: $navy-black; letter-spacing: 0; // line-height: 30px; list-style-type: disc; diff --git a/src/styles/_defaults.scss b/src/styles/_defaults.scss index 72fa2e92..4466ec20 100644 --- a/src/styles/_defaults.scss +++ b/src/styles/_defaults.scss @@ -12,14 +12,14 @@ nav { p, div { - color: $blue-darker; + color: $navy-black; } strong { - color: $blue-darker !important; + color: $navy-black !important; } hr { - background-color: $grey-hr !important; + background-color: $grey-3 !important; height: 1px !important; } diff --git a/src/styles/_util.scss b/src/styles/_util.scss index f64158ca..4b7cd3f4 100644 --- a/src/styles/_util.scss +++ b/src/styles/_util.scss @@ -4,15 +4,11 @@ // Backgrounds .bg-grey { - background: $grey-5; -} - -.bg-grey-light { - background: $grey; + background: $grey-2; } .bg-blue { - background: $blue-dark; + background: $navy-dark; } .bg-green { @@ -30,18 +26,19 @@ } .text-magenta { - color: $magenta; + color: $pink-darker; } .link-magenta { font-family: $font-sans-serif; font-weight: 700; - color: $magenta; + color: $pink-darker; letter-spacing: 0; + text-decoration: none; a, a:hover { - color: $magenta; + color: $pink-darker; } } @@ -55,6 +52,7 @@ .chevron-link, .chevron-link a { - color: $magenta; + color: $pink-darker; font-weight: bold; + text-decoration: none; } diff --git a/src/styles/main.scss b/src/styles/main.scss index 67ee9f05..e001e1b6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -8,9 +8,9 @@ // BULMA VARIABLE OVERRIDES! -------------------- $primary-invert: $white; -$navbar-item-hover-color: $magenta; -$navbar-item-color: $blue-black; -$navbar-item-hover-background-color: $grey; +$navbar-item-hover-color: $pink-darker; +$navbar-item-color: $navy-black; +$navbar-item-hover-background-color: $grey-2; $navbar-breakpoint: 1160px; $link: $blue; $family-serif: $font-sans-serif; @@ -20,13 +20,13 @@ $family-primary: $family-serif; // override bulma's hover CSS for the top navbar a.navbar-item:hover { - color: $blue-black; + color: $navy-black; } a.navbar-item.active-item { - background: $grey; + background: $grey-2; &:hover { - color: $magenta; + color: $pink-darker; } } @@ -98,3 +98,33 @@ body, height: 1px; overflow: hidden; } + +a { + color: $blue-links; + text-decoration: underline; +} + +.button { + text-decoration: none; + &.is-primary { + background: $navy-dark; + &:active, + &:hover, + &:focus { + background: $navy-black; + } + } +} + +.BottomCallout .button.is-primary { + background: $pink-dark; + &:active, + &:hover, + &:focus { + background: $pink-darker; + } +} + +a.column { + text-decoration: none; +} diff --git a/src/templates/documentation/styles.scss b/src/templates/documentation/styles.scss index aa383513..8c72c3e1 100644 --- a/src/templates/documentation/styles.scss +++ b/src/templates/documentation/styles.scss @@ -15,7 +15,7 @@ } &__sidebar { flex: 0 0 280px; - background: $grey; + background: $grey-2; padding: 20px 16px; &__github { position: absolute; @@ -25,19 +25,20 @@ } } &__overview { - color: $blue-links-darker; + color: $blue-links; display: block; font-size: 14px; font-weight: bold; line-height: 1; margin-bottom: 40px; + text-decoration: none; img { margin-right: 4px; } &:hover, &:active, &:focus { - color: $blue-links-darker; + color: $blue-links; } } &__sticky { @@ -87,7 +88,7 @@ height: 2px; } &:hover { - background: $blue-links-darker; + background: $blue-links; } } } @@ -185,8 +186,8 @@ &__mdx { // markdown code { - color: $magenta; - background: $grey-blue; + color: $pink-darker; + background: $grey-2; font-family: $font-monospace; border-radius: 3px; padding: 0.15em 0.25em; @@ -231,14 +232,14 @@ p, div, li { - color: $blue-darker; + color: $navy-black; } p, li, W td, th { a { - color: $blue-links-darker; + color: $blue-links; text-decoration: underline; &:hover, &:active { @@ -247,24 +248,24 @@ } } table { - border: 1px solid $grey-table-border; + border: 1px solid $grey-3; td, th { font-size: 14px; line-height: 1.5; - border: 1px solid $grey-table-border; + border: 1px solid $grey-3; padding: 4px 8px; } th { - color: $blue-black; + color: $navy-black; } td { - color: $blue-darkest; + color: $grey-darkest; border-top-width: 0; border-bottom-width: 0; } tr:nth-child(2n) { - background: $grey-table-bg; + background: $grey-1; } } h2, @@ -301,7 +302,7 @@ height: 3px; width: 106px; border-radius: 1.5px; - background-color: $yellow-light-border; + background-color: $yellow; } } h3 { @@ -323,7 +324,7 @@ list-style-type: decimal; } blockquote { - border-left: 6px solid $grey-table-border; + border-left: 6px solid $grey-3; padding: 0 18px; margin-bottom: 24px; *:last-child { @@ -334,12 +335,12 @@ div, strong, em { - color: $grey-text !important; + color: $grey-darkest !important; } } .gatsby-resp-image-wrapper { box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); - border: solid 1px $image-border; + border: solid 1px $grey-3; } } &__toc-headings {