From 5935773481c7c14779c56d39f8cb30197b2137c2 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Sun, 28 Feb 2021 11:52:59 +0200 Subject: [PATCH 01/31] Add surfaces styles Elevation styles from new design system. --- src/styles/_surfaces.scss | 50 +++++++++++++++++++++++++++++++++++++++ src/styles/index.scss | 1 + 2 files changed, 51 insertions(+) create mode 100644 src/styles/_surfaces.scss diff --git a/src/styles/_surfaces.scss b/src/styles/_surfaces.scss new file mode 100644 index 000000000..c2a8263fc --- /dev/null +++ b/src/styles/_surfaces.scss @@ -0,0 +1,50 @@ +// Surface and elevation definitions +// dp = elevation unit, larger means higher elevation (closer) +// db = the same dp value overlayed over bg (calculated) + +// Colors +:root { + --clr-el-01dp: hsla(0, 0%, 100%, .05); + --clr-el-01db: hsl(240, 28%, 11%); + --shd-el-01dp: 0 1px 2px hsla(0, 0%, 0%, .24), + 0 1px 3px hsla(0, 0%, 0%, .12); + + --clr-el-02dp: hsla(0, 0%, 100%, .07); + --clr-el-02db: hsl(240, 24%, 13%); + --shd-el-02dp: 0 2px 4px hsla(0, 0%, 0%, .15), + 0 3px 6px hsla(0, 0%, 0%, .12); + + --clr-el-03dp: hsla(0, 0%, 100%, .09); + --clr-el-03db: hsl(240, 21%, 15%); + --shd-el-03dp: 0px 3px 6px hsla(0, 0%, 0%, 0.1), + 0px 10px 20px hsla(0, 0%, 0%, 0.15); + + --clr-el-04dp: hsla(0, 0%, 100%, .11); + --clr-el-04db: hsl(240, 17%, 17%); + --shd-el-04dp: 0px 5px 10px hsla(0, 0%, 0%, 0.1), + 0px 15px 25px hsla(0, 0%, 0%, 0.15); + + --clr-el-05dp: hsla(0, 0%, 100%, .14); + --clr-el-05db: hsl(240, 15%, 20%); + --shd-el-05dp: 0px 20px 40px hsla(0, 0%, 0%, 0.2); +} + +.srfc-01dp, .srfc-01db { box-shadow: var(--shd-el-01dp); } +.srfc-01dp { background: var(--clr-el-01dp); } +.srfc-01db { background: var(--clr-el-01db); } + +.srfc-02dp, .srfc-02db { box-shadow: var(--shd-el-02dp); } +.srfc-02dp { background: var(--clr-el-02dp); } +.srfc-02db { background: var(--clr-el-02db); } + +.srfc-03dp, .srfc-03db { box-shadow: var(--shd-el-03dp); } +.srfc-03dp { background: var(--clr-el-03dp); } +.srfc-03db { background: var(--clr-el-03db); } + +.srfc-04dp, .srfc-04db { box-shadow: var(--shd-el-04dp); } +.srfc-04dp { background: var(--clr-el-04dp); } +.srfc-04db { background: var(--clr-el-04db); } + +.srfc-05dp, .srfc-05db { box-shadow: var(--shd-el-05dp); } +.srfc-05dp { background: var(--clr-el-05dp); } +.srfc-05db { background: var(--clr-el-05db); } diff --git a/src/styles/index.scss b/src/styles/index.scss index 97685c0f2..f74cc62dd 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,6 +1,7 @@ @import './fonts'; @import './icons'; @import './global_variables'; +@import './surfaces'; @import './reset'; @import './code'; @import './anchor'; From 22e760f446987fc29d05c9b2fda12806692e06e7 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Sun, 28 Feb 2021 21:37:50 +0200 Subject: [PATCH 02/31] Separate breakpoints to own file --- src/styles/_breakpoints.scss | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/styles/_breakpoints.scss diff --git a/src/styles/_breakpoints.scss b/src/styles/_breakpoints.scss new file mode 100644 index 000000000..bda44409f --- /dev/null +++ b/src/styles/_breakpoints.scss @@ -0,0 +1,3 @@ +// Layout breakpoints +$layout-medium-breakpoint: 600px; +$layout-large-breakpoint: 900px; From 329e67f804f45daaae3d6cacb2507ba0266530cb Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Sun, 28 Feb 2021 21:38:25 +0200 Subject: [PATCH 03/31] Add type styles Typography colors from new design system. --- src/styles/_colors.scss | 44 ++++++++++++++++++++++++++++++ src/styles/_global_variables.scss | 38 -------------------------- src/styles/_reset.scss | 3 +- src/styles/index.scss | 6 ++-- src/styles/{ => type}/_anchor.scss | 9 ++---- src/styles/{ => type}/_code.scss | 38 ++++++++++++++------------ src/styles/type/_colors.scss | 15 ++++++++++ src/styles/type/_index.scss | 3 ++ 8 files changed, 90 insertions(+), 66 deletions(-) create mode 100644 src/styles/_colors.scss delete mode 100644 src/styles/_global_variables.scss rename src/styles/{ => type}/_anchor.scss (53%) rename src/styles/{ => type}/_code.scss (54%) create mode 100644 src/styles/type/_colors.scss create mode 100644 src/styles/type/_index.scss diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss new file mode 100644 index 000000000..2b3f85666 --- /dev/null +++ b/src/styles/_colors.scss @@ -0,0 +1,44 @@ +// Colors - all colors should be prefixed with `clr-` +// This include everything except typography and elevation +// Refer to _type and _surfaces for those palettes + +:root { + // Page background + --clr-bg: hsl(240, 49%, 7%); + + // Navbar + --clr-navbar-bg: hsl(252, 22%, 5%); + + // Scrollbars + --clr-scrollbar-bg: hsl(240, 52%, 5%); + --clr-scrollbar-knob: hsl(240, 17%, 17%); + --clr-scrollbar-knob-active: hsl(240, 15%, 20%); + + // Search bar + --clr-search-bg: hsla(0, 0%, 0%, .98); + --clr-search-results-border: hsla(0, 0%, 100%, 0.12); + + // Buttons & toggles + --clr-btn-bg: hsl(239, 97%, 61%); + --clr-tgl-fg: hsl(240, 4%, 84%); + --clr-tgl-bg: hsl(235, 7%, 39%); + --clr-tgl-fg-active: hsl(240, 82%, 87%); + --clr-tgl-bg-active: hsl(235, 46%, 44%); + + // Expertise + --clr-exp-beginner: hsl(89, 64%, 46%); + --clr-exp-intermediate: hsl(42, 100%, 50%); + --clr-exp-advanced: hsl(1, 84%, 59%); + --clr-exp-blog: hsl(216, 100%, 63%); + + // Card actions + --clr-action: hsl(278, 36%, 73%); + + // Snippet Preview (CSS snippet cards) + --clr-snippet-preview-bg: hsl(240, 26%, 7%); + + // Blog snippet cards + --clr-quote-border: hsl(223, 32%, 64%); + --clr-table-border: hsl(235, 7%, 39%); + --clr-img-credit-bg :hsla(240, 27%, 7%, 0.84); +} diff --git a/src/styles/_global_variables.scss b/src/styles/_global_variables.scss deleted file mode 100644 index 7eb2ae912..000000000 --- a/src/styles/_global_variables.scss +++ /dev/null @@ -1,38 +0,0 @@ -// Colors -:root { - // Interface color palette - --back-color: #F5F6FA; - --fore-color: #404454; - --fore-color-light: #4c526b; - --fore-color-dark: #1F253D; - --fore-color-darker: #060709; - - // Scrollbar - --scrollbar-back-color: #e0e4f6; - --scrollbar-fore-color: #666E8F; - --scrollbar-fore-color-dark: #555c77; -} - -// Dark mode colors -.dark { - --back-color: #0e0e11; - --fore-color: #dadbe2; - --fore-color-light: #acb1c3; - --fore-color-dark: #dcdfea; - --fore-color-darker: #fcfcfd; -} - -.dark { - background: #060709; // Hack to remove white space - // Scrollbar - --scrollbar-back-color: hsl(227, 19%, 3%); - --scrollbar-fore-color: hsl(228, 19%, 33%); - --scrollbar-fore-color-dark: hsl(228, 19%, 42%); - --nav-bar-back-color: #060709; - --nav-bar-border-color: #12151C; - --back-color: #0e0e11; -} - -// Layout breakpoints -$layout-medium-breakpoint: 600px; -$layout-large-breakpoint: 900px; diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index e87b08a65..3efcd634e 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -20,7 +20,8 @@ a, b, em, i, q, span, strong, u { } body { margin: 0; - color: var(--fore-color); + background: var(--clr-bg); + color: var(--clr-txt-100); overflow-x: hidden; } // Show overflow in Edge. diff --git a/src/styles/index.scss b/src/styles/index.scss index f74cc62dd..b262e75ab 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,10 +1,10 @@ @import './fonts'; @import './icons'; -@import './global_variables'; +@import './breakpoints'; +@import './colors'; @import './surfaces'; @import './reset'; -@import './code'; -@import './anchor'; +@import 'styles/type'; @import './functions'; @import 'components/atoms'; @import 'components/molecules'; diff --git a/src/styles/_anchor.scss b/src/styles/type/_anchor.scss similarity index 53% rename from src/styles/_anchor.scss rename to src/styles/type/_anchor.scss index 9a9a67792..83a91c8d7 100644 --- a/src/styles/_anchor.scss +++ b/src/styles/type/_anchor.scss @@ -1,18 +1,13 @@ // Colors :root { - --a-link-color: #2747C7; -} - -// Dark mode colors -.dark { - --a-link-color: #6DC7FD; + --clr-link: hsl(217, 82%, 77%); // TODO: Move me } a { text-decoration: none; &:link, &:visited { - color: var(--a-link-color); + color: var(--clr-link); } &:hover, &:focus { diff --git a/src/styles/_code.scss b/src/styles/type/_code.scss similarity index 54% rename from src/styles/_code.scss rename to src/styles/type/_code.scss index fe78d00d9..589c86ceb 100644 --- a/src/styles/_code.scss +++ b/src/styles/type/_code.scss @@ -1,14 +1,21 @@ // Colors :root { - --code-fore-color: #0324AB; - --code-back-color: #EDF0FC; - --code-selected-color: #BDEDFE; -} + // Inline + --clr-code-bg: hsl(225, 31%, 18%); + --clr-code-txt: hsl(228, 74%, 91%); + + // Block + --clr-code-block-txt: hsl(0, 69%, 67%); + --clr-code-selection: hsl(228, 89%, 15%); -.dark { - --code-fore-color: #d7def9; - --code-back-color: #232839; - --code-selected-color: #0dbcfb; + --clr-tkn-a: hsl(199, 17%, 57%); // Comments + --clr-tkn-b: hsl(0, 0%, 74%); // Punctuation + --clr-tkn-c: hsl(207, 89%, 68%); // Functions + --clr-tkn-d: hsl(34, 100%, 50%); // Numbers + --clr-tkn-e: hsl(88, 50%, 76%); // Strings + --clr-tkn-f: hsl(291, 47%, 71%); // Keywords + --clr-tkn-g: hsl(187, 71%, 50%); // Regular expressions + --clr-tkn-h: hsl(0, 69%, 67%); // Variables } // Style code @@ -24,8 +31,8 @@ code, kbd, pre, code *, pre *, kbd *, code[class*="language-"], pre[class*="lang } code { - background: var(--code-back-color); - color: var(--code-fore-color); + background: var(--clr-code-bg); + color: var(--clr-code-txt); padding: 0.125rem 0.375rem; border-radius: 0.125rem; } @@ -49,7 +56,8 @@ code[class*="language-"], pre[class*="language-"] { } pre[class*="language-"]::selection, pre[class*="language-"] ::selection { - background: var(--pre-selected-color); + background: var(--clr-code-selection); + // color: var(--clr-txt-150); } :not(pre) > code[class*="language-"] { @@ -61,11 +69,7 @@ pre[class*="language-"]::selection, pre[class*="language-"] ::selection { p > code, a > code { &, &[class*="language-"] { - color: var(--code-fore-color); - background: var(--code-back-color); - - &::selection, & ::selection { - background: var(--code-selected-color); - } + color: var(--clr-code-txt); + background: var(--clr-code-bg); } } diff --git a/src/styles/type/_colors.scss b/src/styles/type/_colors.scss new file mode 100644 index 000000000..dc81c9741 --- /dev/null +++ b/src/styles/type/_colors.scss @@ -0,0 +1,15 @@ +// Typography definitions +// Numeric values represent the strength/opacity of the font color + +// Colors +:root { + --clr-txt-200: hsla(0, 0%, 100%, .95); + --clr-txt-150: hsla(0, 0%, 100%, 0.87); + --clr-txt-100: hsla(0, 0%, 100%, .76); + --clr-txt-050: hsla(0, 0%, 100%, .64); +} + +.txt-200 { color: var(--clr-txt-200); } +.txt-150 { color: var(--clr-txt-150); } +.txt-100 { color: var(--clr-txt-100); } +.txt-050 { color: var(--clr-txt-050); } diff --git a/src/styles/type/_index.scss b/src/styles/type/_index.scss new file mode 100644 index 000000000..1bc9e0220 --- /dev/null +++ b/src/styles/type/_index.scss @@ -0,0 +1,3 @@ +@import './colors'; +@import './anchor'; +@import './code'; From f00bf0f5cd2b3669215ead047d60fab29628c283 Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Sun, 28 Feb 2021 21:41:25 +0200 Subject: [PATCH 04/31] Apply new styles to atoms --- .../atoms/button/regularButton/_index.scss | 21 ++------- src/components/atoms/card/_index.scss | 23 ---------- src/components/atoms/card/index.jsx | 5 ++- src/components/atoms/codeBlock/_index.scss | 43 ++++++------------- .../atoms/collectionChip/_index.scss | 21 +-------- src/components/atoms/collectionChip/index.jsx | 6 +-- src/components/atoms/expertise/_index.scss | 17 ++------ src/components/atoms/pageBackdrop/_index.scss | 17 +++----- src/components/atoms/pageBackdrop/index.jsx | 5 ++- src/components/atoms/pageTitle/_index.scss | 1 - src/components/atoms/pageTitle/index.jsx | 4 +- .../atoms/snippetPreview/_index.scss | 3 +- src/components/atoms/snippetPreview/index.jsx | 2 +- src/components/atoms/tagList/_index.scss | 1 - src/components/atoms/tagList/index.jsx | 4 +- src/components/atoms/toggle/_index.scss | 29 +++---------- 16 files changed, 53 insertions(+), 149 deletions(-) diff --git a/src/components/atoms/button/regularButton/_index.scss b/src/components/atoms/button/regularButton/_index.scss index febe162d2..3793ddf69 100644 --- a/src/components/atoms/button/regularButton/_index.scss +++ b/src/components/atoms/button/regularButton/_index.scss @@ -1,32 +1,19 @@ -// Colors -:root { - --button-back-color: #3B3EFC; - --button-fore-color: #FFFFFF; - --button-shadow-color: rgba(0, 32, 128, 0.25); - --button-back-color-tertiary: #131418; -} - -// Dark mode colors -.dark { - --button-shadow-color: rgba(0, 3, 10, 0.22); -} - .btn, a.btn { display: inline-block; padding: 0.625rem 0.875rem; margin-top: 0.75rem; - background: var(--button-back-color); - color: var(--button-fore-color); + background: var(--clr-btn-bg); + color: var(--clr-txt-200); cursor: pointer; border: none; border-radius: 1rem; font-size: 1.125rem; line-height: 1.5rem; transition: 0.3s ease all; - box-shadow: 0px 2px 4px var(--button-shadow-color); + box-shadow: var(--shd-el-02dp); &:hover, &:focus { - box-shadow: 0px 3px 10px var(--button-shadow-color); + box-shadow: var(--shd-el-04dp); text-decoration: none; outline: none; } diff --git a/src/components/atoms/card/_index.scss b/src/components/atoms/card/_index.scss index bf3586907..0f55866d5 100644 --- a/src/components/atoms/card/_index.scss +++ b/src/components/atoms/card/_index.scss @@ -1,27 +1,6 @@ -// Colors -:root { - --card-back-color: #FFFFFF; - --card-title-color: #202124; - --card-fore-color: #000; - --card-fore-color-light: #5F6368; - --card-shadow-color: rgba(0, 32, 128, 0.07); -} - -// Dark mode colors -.dark { - --card-back-color: #1A1D21; - --card-title-color: #E1ECF4; - --card-fore-color: #FCFCFD; - --card-fore-color-light: #C8C9CB; - --card-shadow-color: rgba(0, 3, 10, 0.16); -} - .card { position: relative; transition: all 0.3s ease; - background: var(--card-back-color); - color: var(--card-fore-color); - box-shadow: 0px 3px 5px 1px var(--card-shadow-color); border-radius: 0.5rem; margin: 1.75rem 0.25rem 1rem; padding: 1.5rem 1rem; @@ -40,7 +19,6 @@ line-height: 2rem; margin: 0 0.5rem; transition: 0.3s ease all; - color: var(--card-title-color); overflow: hidden; text-overflow: ellipsis; } @@ -86,7 +64,6 @@ .card-description { grid-column: 1/3; margin: 0; - color: var(--card-fore-color); line-height: 1.35; > p { diff --git a/src/components/atoms/card/index.jsx b/src/components/atoms/card/index.jsx index 54e2a560c..626d40e33 100644 --- a/src/components/atoms/card/index.jsx +++ b/src/components/atoms/card/index.jsx @@ -12,7 +12,10 @@ const propTypes = { * and passes everything else to the element. */ const Card = ({ className, ...rest }) => ( -
+
); Card.propTypes = propTypes; diff --git a/src/components/atoms/codeBlock/_index.scss b/src/components/atoms/codeBlock/_index.scss index 3581ed0a8..f0ef816b5 100644 --- a/src/components/atoms/codeBlock/_index.scss +++ b/src/components/atoms/codeBlock/_index.scss @@ -1,32 +1,15 @@ -// Colors -:root { - --pre-fore-color: #e57373; - --pre-back-color: #1e253d; - --pre-selected-color: #041248; - --pre-decorator-color: #92A9B4; - - --token-color-a: #7f99a5; // Comments - --token-color-b: #bdbdbd; // Punctuation - --token-color-c: #64b5f6; // Functions - --token-color-d: #ff8f00; // Numbers - --token-color-e: #c5e1a5; // Strings - --token-color-f: #ce93d8; // Keywords - --token-color-g: #26c6da; // Regular expressions - --token-color-h: #e57373; // Variables -} - pre { position: relative; overflow: auto; // Responsiveness - background: var(--pre-back-color); - color: var(--pre-fore-color); + background: var(--clr-code-bg); + color: var(--clr-code-block-txt); padding: 0.375rem; margin: 0.5rem; border: 0; } pre[class*="language-"] { - color: var(--pre-fore-color); + color: var(--clr-code-block-txt); padding: 1rem .875rem; overflow: auto; margin: 0.5rem 0; @@ -38,7 +21,7 @@ pre[data-code-language]:not([data-code-language=""]) { &::before { font-size: .875rem; - color: var(--pre-decorator-color); + color: var(--clr-txt-100); position: absolute; top: .8725rem; left: .8725rem; @@ -57,28 +40,28 @@ pre[data-code-language]:not([data-code-language=""]) { .token { &.comment, &.prolog, &.doctype, &.cdata { - color: var(--token-color-a); + color: var(--clr-tkn-a); } &.punctuation { - color: var(--token-color-b); + color: var(--clr-tkn-b); } &.property, &.tag, &.boolean, &.constant, &.symbol, &.deleted, &.function { - color: var(--token-color-c); + color: var(--clr-tkn-c); } &.number, &.class-name { - color: var(--token-color-d); + color: var(--clr-tkn-d); } &.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted { - color: var(--token-color-e); + color: var(--clr-tkn-e); } &.operator, &.entity, &.url, &.atrule, &.attr-value, &.keyword, &.interpolation-punctuation { - color: var(--token-color-f); + color: var(--clr-tkn-f); } &.regex { - color: var(--token-color-g); + color: var(--clr-tkn-g); } &.important, &.variable { - color: var(--token-color-h); + color: var(--clr-tkn-h); } &.italic, &.comment { font-style: italic; @@ -92,5 +75,5 @@ pre[data-code-language]:not([data-code-language=""]) { } .language-css .token.string, .style .token.string { - color: var(--token-color-f); + color: var(--clr-tkn-f); } diff --git a/src/components/atoms/collectionChip/_index.scss b/src/components/atoms/collectionChip/_index.scss index 0bac25473..001095529 100644 --- a/src/components/atoms/collectionChip/_index.scss +++ b/src/components/atoms/collectionChip/_index.scss @@ -1,21 +1,5 @@ -// Colors -:root { - --chip-back-color: #FFFFFF; - --chip-fore-color: #202124; - --chip-shadow-color: rgba(0, 32, 128, 0.07); -} - -// Dark mode colors -.dark { - --chip-back-color: #1A1D21; - --chip-fore-color: #E1ECF4; - --chip-shadow-color: rgba(0, 3, 10, 0.16); -} - .collection-chip { - background: var(--chip-back-color); border-radius: 1rem; - box-shadow: 0px 1px 3px 1px var(--chip-shadow-color); > .icon { display: block; @@ -32,7 +16,7 @@ text-align: center; &, &:link, &:visited { - color: var(--chip-fore-color); + color: var(--clr-txt-200); } &::before { @@ -70,7 +54,7 @@ font-variant-numeric: lining-nums; font-weight: 500; line-height: 1; - color: var(--card-title-color); + color: var(--clr-txt-200); } &:hover, &:focus { @@ -86,7 +70,6 @@ .card-subtitle { margin: 0 .5rem; display: inline-block; - color: var(--card-fore-color-light); font-size: .875rem; line-height: 1rem; } diff --git a/src/components/atoms/collectionChip/index.jsx b/src/components/atoms/collectionChip/index.jsx index 516a45cae..b9b58b961 100644 --- a/src/components/atoms/collectionChip/index.jsx +++ b/src/components/atoms/collectionChip/index.jsx @@ -14,10 +14,10 @@ const propTypes = { const CollectionChip = ({ chip }) => { const hasDescription = chip.description && chip.description.length; return hasDescription ? ( -
  • +
  • -

    +

    {chip.title}

    {literals.snippetCollection} @@ -27,7 +27,7 @@ const CollectionChip = ({ chip }) => {
    • ) : ( -
  • +
  • ( -
    +

    {mainText}

    diff --git a/src/components/atoms/pageTitle/_index.scss b/src/components/atoms/pageTitle/_index.scss index e736eccb6..16a57ff3c 100644 --- a/src/components/atoms/pageTitle/_index.scss +++ b/src/components/atoms/pageTitle/_index.scss @@ -6,7 +6,6 @@ font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 3rem; - color: var(--fore-color-darker); margin: 0 0.875rem; display: inline-block; diff --git a/src/components/atoms/pageTitle/index.jsx b/src/components/atoms/pageTitle/index.jsx index 2c653f252..c18f85e4a 100644 --- a/src/components/atoms/pageTitle/index.jsx +++ b/src/components/atoms/pageTitle/index.jsx @@ -15,7 +15,9 @@ const propTypes = { * and passes children to the element. */ const PageTitle = ({ className, children }) => ( -

    {children}

    +

    + {children} +

    ); PageTitle.propTypes = propTypes; diff --git a/src/components/atoms/snippetPreview/_index.scss b/src/components/atoms/snippetPreview/_index.scss index 65e280393..9e235573a 100644 --- a/src/components/atoms/snippetPreview/_index.scss +++ b/src/components/atoms/snippetPreview/_index.scss @@ -4,11 +4,10 @@ -webkit-font-smoothing: antialiased; line-height: 2; margin: 2rem 0 -3rem .875rem; - color: var(--card-title-color); } .snippet-preview { - background:var(--back-color); + background: var(--clr-snippet-preview-bg); border-radius: .5rem; padding: 3.25rem .875rem .75rem; margin: 0; diff --git a/src/components/atoms/snippetPreview/index.jsx b/src/components/atoms/snippetPreview/index.jsx index 18720d56e..787b3b496 100644 --- a/src/components/atoms/snippetPreview/index.jsx +++ b/src/components/atoms/snippetPreview/index.jsx @@ -37,7 +37,7 @@ const SnippetPreview = ({ scopeId, scopedCss, htmlCode, jsCode }) => { return ( <> -
    {literals.preview}
    +
    {literals.preview}
    diff --git a/src/components/atoms/tagList/_index.scss b/src/components/atoms/tagList/_index.scss index 17d2d90e1..44043b5a8 100644 --- a/src/components/atoms/tagList/_index.scss +++ b/src/components/atoms/tagList/_index.scss @@ -1,7 +1,6 @@ .tag-list { margin: 0 0.5rem; display: inline-block; - color: var(--card-fore-color-light); font-size: 0.875rem; line-height: 1rem; } diff --git a/src/components/atoms/tagList/index.jsx b/src/components/atoms/tagList/index.jsx index 98a3ca3f6..6f2348a78 100644 --- a/src/components/atoms/tagList/index.jsx +++ b/src/components/atoms/tagList/index.jsx @@ -9,7 +9,9 @@ const propTypes = { * List of tags. * Used in most pages that render snippet information. */ -const TagList = ({ tags }) =>

    {tags.join(', ')}

    ; +const TagList = ({ tags }) => ( +

    {tags.join(', ')}

    +); TagList.propTypes = propTypes; diff --git a/src/components/atoms/toggle/_index.scss b/src/components/atoms/toggle/_index.scss index 33cc51a6b..fa87a04bb 100644 --- a/src/components/atoms/toggle/_index.scss +++ b/src/components/atoms/toggle/_index.scss @@ -1,26 +1,10 @@ -// Colors -:root { - --toggle-fore-color: #FFFFFF; - --toggle-fore-color-active: #575aea; - --toggle-shadow-color: rgba(0, 0, 0, 0.25); - --toggle-back-color: #c2c4cb; - --toggle-back-color-active: #bebffe; -} - -.dark { - --toggle-fore-color: #cfcfcf; - --toggle-fore-color-active: #bebffe; - --toggle-back-color: #45464f; - --toggle-back-color-active: #575aea; -} - .toggle { display: block; width: 100%; font-size: 1rem; position: relative; cursor: pointer; - margin: 0.875rem 0.5rem 1.5rem; + margin: 0.875rem 0 1.5rem; @media screen and (min-width: $layout-medium-breakpoint) { font-size: 1.125rem; @@ -33,9 +17,9 @@ -webkit-appearance: none; -moz-appearance: none; appearance: none; - background-color: var(--toggle-back-color); + background-color: var(--clr-tgl-bg); border: none; - color: var(--toggle-fore-color); + color: var(--clr-tgl-fg); height: 12px; width: 24px; border-radius: 6px; @@ -51,20 +35,19 @@ height: 16px; content: ''; position: absolute; - background: var(--toggle-fore-color); + background: var(--clr-tgl-fg); top: -2px; left: -8px; border-radius: 8px; transition: all .3s ease; cursor: pointer; - box-shadow: 0px 1px 3px var(--toggle-shadow-color); } &:checked { - background: var(--toggle-back-color-active); + background: var(--clr-tgl-bg-active); &:before { - background: var(--toggle-fore-color-active); + background: var(--clr-tgl-fg-active); left: calc(100% - 8px); } } From 0d139ec6bfc35bf4aa814e43f9263b81231caf8d Mon Sep 17 00:00:00 2001 From: Chalarangelo Date: Sun, 28 Feb 2021 21:43:42 +0200 Subject: [PATCH 05/31] Apply new styles to molecules --- src/components/molecules/actions/_index.scss | 13 +- .../molecules/breadcrumbs/_index.scss | 10 +- .../molecules/cookieConsentPopup/_index.scss | 32 +++-- .../molecules/cookieConsentPopup/index.jsx | 2 +- .../molecules/developmentControls/index.jsx | 2 +- .../molecules/developmentControls/index.scss | 13 +- src/components/molecules/footer/_index.scss | 1 - .../molecules/listingAnchors/_index.scss | 22 +--- .../molecules/paginator/_index.scss | 18 +-- .../molecules/previewCard/_index.scss | 2 +- .../molecules/previewCard/index.jsx | 4 +- src/components/molecules/search/_index.scss | 116 ++++++------------ src/components/molecules/search/index.jsx | 13 +- src/components/molecules/simpleCard/index.jsx | 2 +- src/components/molecules/sorter/_index.scss | 27 +--- src/components/molecules/sorter/index.jsx | 4 +- 16 files changed, 93 insertions(+), 188 deletions(-) diff --git a/src/components/molecules/actions/_index.scss b/src/components/molecules/actions/_index.scss index f25ea54b6..87543904f 100644 --- a/src/components/molecules/actions/_index.scss +++ b/src/components/molecules/actions/_index.scss @@ -1,11 +1,3 @@ -:root { - --action-fore-color: #525252; -} - -.dark { - --action-fore-color: #bababa; -} - .card-actions { .btn-form, .btn { flex: 1 0 auto; @@ -16,7 +8,8 @@ position: relative; margin: 0; background: transparent; - color: var(--action-fore-color); + color: var(--clr-action); + opacity: .87; text-transform: uppercase; font-weight: 500; -webkit-font-smoothing: antialiased; @@ -31,7 +24,7 @@ &:hover, &:focus { box-shadow: none; - color: var(--a-link-color); + opacity: 1; } &:before { diff --git a/src/components/molecules/breadcrumbs/_index.scss b/src/components/molecules/breadcrumbs/_index.scss index f1b805f7e..b70d54bbe 100644 --- a/src/components/molecules/breadcrumbs/_index.scss +++ b/src/components/molecules/breadcrumbs/_index.scss @@ -20,18 +20,14 @@ a { &, &:link, &:visited { - color: var(--fore-color-dark); - - &:hover, &:focus { - color: var(--a-link-color); - } + color: var(--clr-txt-150); } } &:not(:last-of-type) { &:before { - color: var(--fore-color-light); + color: var(--clr-txt-050); position: absolute; right: -0.75rem; content: "/"; @@ -47,7 +43,7 @@ a { &, &:link, &:visited { - color: var(--fore-color-light); + color: var(--clr-txt-050); pointer-events: none; } } diff --git a/src/components/molecules/cookieConsentPopup/_index.scss b/src/components/molecules/cookieConsentPopup/_index.scss index 6d8661e6c..66da271d4 100644 --- a/src/components/molecules/cookieConsentPopup/_index.scss +++ b/src/components/molecules/cookieConsentPopup/_index.scss @@ -1,9 +1,6 @@ -// Colors -:root { - --consent-back-color: rgba(19, 21, 27, 0.925); - --consent-fore-color: #FFFFFF; - --consent-btn-back-color: #e2e4ee; - --consent-btn-fore-color: #212121; +@keyframes enter-from-below { + from { transform: translateY(100%);} + to { transform: translateY(0%); } } .cookie-consent-popup { @@ -13,12 +10,11 @@ left: 0; right: 0; z-index: 99999; - background: var(--consent-back-color); - color: var(--consent-fore-color); max-height: 60vh; overflow-y: auto; text-align: center; font-size: 0.875rem; + animation: enter-from-below 0.3s ease 0s; p { font-size: 0.875rem; @@ -29,14 +25,26 @@ margin: 0.375rem auto 0.5rem; } + > .cookie-consent-buttons { + display: flex; + justify-content: center; + } + .btn { + margin: 0; font-size: 0.875rem; padding: 0.625rem 1.375rem; - background: var(--consent-btn-back-color); - color: var(--consent-btn-fore-color); + background: transparent; + box-shadow: none; + color: var(--clr-action); + text-transform: uppercase; + opacity: .87; + font-weight: 500; + flex: 0 1 27.5%; - &.cookie-decline { - margin-left: 1rem; + &:hover, &:focus { + box-shadow: none; + opacity: 1; } } } diff --git a/src/components/molecules/cookieConsentPopup/index.jsx b/src/components/molecules/cookieConsentPopup/index.jsx index dd0f8078b..48278c82a 100644 --- a/src/components/molecules/cookieConsentPopup/index.jsx +++ b/src/components/molecules/cookieConsentPopup/index.jsx @@ -22,7 +22,7 @@ const CookieConsentPopup = () => { if (!hasMounted) return null; return ( -
    +

    {literals.cookieDisclaimer} {literals.learnMore} diff --git a/src/components/molecules/developmentControls/index.jsx b/src/components/molecules/developmentControls/index.jsx index a8c5802b7..88b6768a0 100644 --- a/src/components/molecules/developmentControls/index.jsx +++ b/src/components/molecules/developmentControls/index.jsx @@ -37,7 +37,7 @@ const DevelopmentControls = ({ pageContext: { snippet } = {} }) => { }); return ( -

    +
    {opened ? ( <> diff --git a/src/components/molecules/developmentControls/index.scss b/src/components/molecules/developmentControls/index.scss index 5b220566d..bc6eb2bfc 100644 --- a/src/components/molecules/developmentControls/index.scss +++ b/src/components/molecules/developmentControls/index.scss @@ -1,16 +1,10 @@ -:root { - --button-dev-back-color: #B744B8; -} - .floating-controls-container { position: fixed; bottom: 2.5rem; right: 1.5rem; display: flex; flex-direction: column; - background: var(--card-back-color); border-radius: 1rem; - box-shadow: 0 2px 4px var(--button-shadow-color); padding: 0.5rem 0.75rem 0; min-width: calc(48px - 1.5rem); @@ -19,19 +13,18 @@ text-align: left; line-height: 2; background: transparent; - color: var(--fore-color); + color: var(--clr-txt-150); box-shadow: none; padding: 0; margin-top: 0; &:hover, &:focus { box-shadow: none; - color: var(--fore-color-darker); + color: var(--clr-link); } } .btn-dev-controls { - background: var(--button-dev-back-color); position: relative; margin-top: 0; box-shadow: none; @@ -59,6 +52,4 @@ width: calc(100% + 1.5rem); } } - - } diff --git a/src/components/molecules/footer/_index.scss b/src/components/molecules/footer/_index.scss index 16707dc38..a2a5dc98e 100644 --- a/src/components/molecules/footer/_index.scss +++ b/src/components/molecules/footer/_index.scss @@ -1,6 +1,5 @@ footer { margin: 3.5rem 0.5rem 0rem; - color: var(--fore-color); // Make at least as tall as the cookie consent popup // to ensure that the paginator is never hidden min-height: 9rem; diff --git a/src/components/molecules/listingAnchors/_index.scss b/src/components/molecules/listingAnchors/_index.scss index d39c85294..4c3c83964 100644 --- a/src/components/molecules/listingAnchors/_index.scss +++ b/src/components/molecules/listingAnchors/_index.scss @@ -1,13 +1,3 @@ -// Colors -:root { - --listing-anchors-selected-color: #434ec7; -} - -// Dark mode colors -.dark { - --listing-anchors-selected-color: #678df4; -} - .listing-anchors { position: relative; margin: 0; @@ -20,7 +10,7 @@ justify-content: flex-start; &::-webkit-scrollbar-track { - background-color: var(--scrollbar-back-color); + background-color: var(--clr-scrollbar-bg); margin: 0 35vw; border-radius: 0.125rem; @@ -35,7 +25,7 @@ } &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-fore-color); + background-color: var(--clr-scrollbar-knob); border-radius: 0.125rem; } @@ -65,17 +55,17 @@ text-align: center; background: transparent; border-radius: 0; - color: var(--fore-color-light); + color: var(--clr-txt-100); border-bottom: 2px solid transparent; &.selected { - color: var(--fore-color-dark); - border-bottom: 2px solid var(--fore-color-dark); + color: var(--clr-txt-200); + border-bottom: 2px solid currentColor; } &:hover, &:focus { box-shadow: none; - color: var(--listing-anchors-selected-color); + color: var(--clr-link); } @media screen and (min-width: $layout-medium-breakpoint) { diff --git a/src/components/molecules/paginator/_index.scss b/src/components/molecules/paginator/_index.scss index c6ba4e1e9..aed444020 100644 --- a/src/components/molecules/paginator/_index.scss +++ b/src/components/molecules/paginator/_index.scss @@ -1,13 +1,3 @@ -// Colors -:root { - --paginator-selected-color: #434ec7; -} - -// Dark mode colors -.dark { - --paginator-selected-color: #678df4; -} - .paginator { margin: 1.75rem 1.25rem 1.5rem; display: flex; @@ -27,12 +17,12 @@ text-align: center; box-shadow: none; background: transparent; - color: var(--fore-color); + color: var(--clr-txt-150); &:not(.current-page) { &:hover, &:focus { - color: var(--paginator-selected-color); + color: var(--clr-link); } } @@ -42,7 +32,7 @@ } &.previous-page, &.next-page { - color: var(--paginator-selected-color); + color: var(--clr-link); position: relative; box-sizing: border-box; margin: 0.625rem 1rem; @@ -90,7 +80,7 @@ .paginator-separator { display: block; - color: var(--fore-color-light); + color: var(--clr-txt-050); opacity: 0.45; letter-spacing: 2px; line-height: 24px; diff --git a/src/components/molecules/previewCard/_index.scss b/src/components/molecules/previewCard/_index.scss index 367cd7c36..4f2590e43 100644 --- a/src/components/molecules/previewCard/_index.scss +++ b/src/components/molecules/previewCard/_index.scss @@ -19,7 +19,7 @@ font-variant-numeric: lining-nums; font-weight: 500; line-height: 1; - color: var(--card-title-color); + color: var(--clr-txt-200); } &:hover, &:focus { diff --git a/src/components/molecules/previewCard/index.jsx b/src/components/molecules/previewCard/index.jsx index d833af872..9acc42dc6 100644 --- a/src/components/molecules/previewCard/index.jsx +++ b/src/components/molecules/previewCard/index.jsx @@ -18,12 +18,12 @@ const PreviewCard = ({ snippet }) => { ? [snippet.language, snippet.primaryTag] : [snippet.primaryTag, snippet.expertise]; return ( -
  • +
  • -

    +

    {snippet.title}

    diff --git a/src/components/molecules/search/_index.scss b/src/components/molecules/search/_index.scss index aabe7c968..d34f3d332 100644 --- a/src/components/molecules/search/_index.scss +++ b/src/components/molecules/search/_index.scss @@ -1,31 +1,3 @@ -// Colors -:root { - --search-back-color: #FFFFFF; - --search-button-back-color: #f4f4f5; - --search-button-fore-color: #53586A; - --search-button-hover-back-color: #e9eaec; - --search-fore-color: #0d0e17; - --search-placeholder-color: #9a9ca7; - --search-bar-border-color: #e4e6ec; - --search-focus-border-color: #91abf8; - --search-result-back-color: #FFFFFF; - --search-result-focus-back-color: #e1e6ff; -} - -// Dark mode colors -.dark { - --search-back-color: #31343f; - --search-button-back-color: #1f2129; - --search-button-fore-color: #c3c6d0; - --search-button-hover-back-color: #252732; - --search-fore-color: #f2f3f7; - --search-placeholder-color: #a0a5ca; - --search-bar-border-color: #13151b; - --search-focus-border-color: #3052b0; - --search-result-back-color: #060709; - --search-result-focus-back-color: #2e5ee0; -} - // Style for placeholder text @mixin placeholder-styles { font-family: 'Inter', Helvetica, sans-serif; @@ -47,6 +19,8 @@ position: relative; display: flex; width: calc(100% - 76px - 64px - 44px); + background: var(--clr-search-bg); + border-radius: 0.5rem; @media screen and (min-width: $layout-medium-breakpoint) { width: 284px; @@ -55,17 +29,29 @@ &:not(:focus-within) .search-autocomplete-list{ display: none; } + + &::before { + transition: 0.3s ease all; + font-size: 1.25rem; + line-height: 44px; + margin-left: 8px; + color: var(--clr-txt-100); + } + + &:focus-within { + + &::before { + color: var(--clr-txt-200); + } + } } [type="search"].search-box { transition: 0.3s ease all; - width: calc(100% - 44px); - margin: 0 0 0 8px; - background: var(--search-back-color); + width: calc(100% - 36px); + background: transparent; vertical-align: top; - border: 1px solid var(--search-bar-border-color); - border-right-color: transparent; - border-radius: 0.25rem 0 0 0.25rem; + border: none; outline: none; box-sizing: border-box; padding: 0.25rem 0.5rem; @@ -73,51 +59,23 @@ font-weight: 400; line-height: 1.9; height: 44px; - color: var(--search-fore-color); + color: var(--clr-txt-100); &::placeholder { - color: var(--search-placeholder-color); + color: var(--clr-txt-100); } &:focus { - border-color: var(--search-focus-border-color); + color: var(--clr-txt-200); - + a.search-btn { - border-color: var(--search-focus-border-color); + &::placeholder { + color: var(--clr-txt-200); } } - - @media screen and (min-width: $layout-medium-breakpoint) { - width: 240px; - margin: 0; - } } -a.search-btn { - color: var(--search-button-fore-color); - background: var(--search-button-back-color); - border: 1px solid var(--search-bar-border-color); - border-left: none; - position: relative; - vertical-align: top; - width: 44px; - height: 44px; - margin: 0; - border-radius: 0 0.25rem 0.25rem 0; - box-sizing: border-box; - box-shadow: none; - - &:hover, &:focus { - box-shadow: none; - background: var(--search-button-hover-back-color); - } - - &:before { - position: absolute; - font-size: 24px; - top: 10px; - left: 10px; - } +a.search-btn[aria-hidden="true"] { + display: none; } .search-autocomplete-list { @@ -126,7 +84,6 @@ a.search-btn { margin: 0 8px; top: 42px; list-style: none; - border-bottom: 1px solid var(--search-focus-border-color); border-radius: 0 0 0.25rem 0.25rem; overflow: hidden; z-index: 100; @@ -139,10 +96,8 @@ a.search-btn { > li { height: 42px; margin-left: -20px; - border: 1px solid var(--search-focus-border-color); - border-top-color: var(--search-bar-border-color); + border-top: 1px solid var(--clr-search-results-border); border-bottom: none; - background: var(--search-result-back-color); &:last-child { border-radius: 0 0 0.25rem 0.25rem; @@ -154,24 +109,25 @@ a.search-btn { height: 42px; box-sizing: border-box; - &:hover, &:focus, &.selected { - text-decoration: none; - background: var(--search-result-focus-back-color); - } - .result-title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 8px; - color: var(--fore-color); } .result-tag { flex: 1 0 auto; font-size: 0.75rem; line-height: 2.125; - color: var(--fore-color-light); + } + + &:hover, &:focus, &.selected { + text-decoration: none; + + .result-title, .result-tag { + color: var(--clr-link); + } } } } diff --git a/src/components/molecules/search/index.jsx b/src/components/molecules/search/index.jsx index fb56d048a..3e654bbb2 100644 --- a/src/components/molecules/search/index.jsx +++ b/src/components/molecules/search/index.jsx @@ -96,7 +96,7 @@ const Search = ({ isMainSearch = false }) => { return (
    { e.preventDefault(); if (isMainSearch || !hasResults) return; @@ -119,7 +119,7 @@ const Search = ({ isMainSearch = false }) => { > { }} />