From a33f2cef49d832a70c14f4f8ac1c2b0e606bb5fc Mon Sep 17 00:00:00 2001 From: renatamottam Date: Fri, 3 Jun 2022 09:45:07 -0300 Subject: [PATCH 1/3] Creates basic structure for tokens test --- gatsby-browser.tsx | 5 + package.json | 2 + .../sections/Incentives/IncentivesHeader.tsx | 2 +- .../ui/Checkbox/checkbox.module.scss | 3 + src/pages/theming.tsx | 165 +++++++++++ src/styles/global/new-theme.scss | 273 ++++++++++++++++++ yarn.lock | 10 + 7 files changed, 459 insertions(+), 1 deletion(-) create mode 100644 src/pages/theming.tsx create mode 100644 src/styles/global/new-theme.scss diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx index 6cf97014..27b65f13 100644 --- a/gatsby-browser.tsx +++ b/gatsby-browser.tsx @@ -4,6 +4,11 @@ import './src/styles/global/resets.scss' import './src/styles/global/typography.scss' import './src/styles/global/layout.scss' +import '@fontsource/orelega-one' + +import '@fontsource/roboto-mono' +import '@fontsource/roboto-mono/700.css' + import { CartProvider, SessionProvider, UIProvider } from '@faststore/sdk' import Layout from 'src/Layout' import AnalyticsHandler from 'src/sdk/analytics' diff --git a/package.json b/package.json index 350c6d10..d91c0c15 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "node": ">=14" }, "dependencies": { + "@fontsource/orelega-one": "^4.5.2", + "@fontsource/roboto-mono": "^4.5.1", "@builder.io/partytown": "^0.5.4", "@envelop/core": "^1.2.0", "@envelop/graphql-jit": "^1.1.1", diff --git a/src/components/sections/Incentives/IncentivesHeader.tsx b/src/components/sections/Incentives/IncentivesHeader.tsx index ced8503e..61119434 100644 --- a/src/components/sections/Incentives/IncentivesHeader.tsx +++ b/src/components/sections/Incentives/IncentivesHeader.tsx @@ -15,7 +15,7 @@ interface Props { function IncentivesHeader({ incentives }: Props) { return (
- +
) } diff --git a/src/components/ui/Checkbox/checkbox.module.scss b/src/components/ui/Checkbox/checkbox.module.scss index 2d4e8f95..6ee2bef7 100644 --- a/src/components/ui/Checkbox/checkbox.module.scss +++ b/src/components/ui/Checkbox/checkbox.module.scss @@ -16,7 +16,9 @@ --fs-checkbox-transition : border var(--fs-transition-timing) var(--fs-transition-function), background-color var(--fs-transition-timing) var(--fs-transition-function), box-shadow var(--fs-transition-timing) var(--fs-transition-function); + --fs-checkbox-bkg-color : var(--fs-color-body-bkg); --fs-checkbox-bkg-color-hover : var(--fs-color-primary-bkg-light); + --fs-checkbox-shadow-hover : 0 0 0 var(--fs-checkbox-border-width) var(--fs-border-color-active); // Checked @@ -47,6 +49,7 @@ width: var(--fs-checkbox-width); height: var(--fs-checkbox-height); cursor: pointer; + background-color: var(--fs-checkbox-bkg-color); border: var(--fs-checkbox-border-width) solid var(--fs-checkbox-border-color); border-radius: var(--fs-checkbox-border-radius); outline: none; diff --git a/src/pages/theming.tsx b/src/pages/theming.tsx new file mode 100644 index 00000000..92958eae --- /dev/null +++ b/src/pages/theming.tsx @@ -0,0 +1,165 @@ +import { useSession } from '@faststore/sdk' +import { graphql } from 'gatsby' +import { GatsbySeo, JsonLd } from 'gatsby-plugin-next-seo' +import BannerText from 'src/components/sections/BannerText' +import Hero from 'src/components/sections/Hero' +import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader' +import ProductShelf from 'src/components/sections/ProductShelf' +import ProductTiles from 'src/components/sections/ProductTiles' +import { mark } from 'src/sdk/tests/mark' +import { ITEMS_PER_SECTION } from 'src/constants' +import type { PageProps } from 'gatsby' +import type { HomePageQueryQuery } from '@generated/graphql' +import IncentivesMock from 'src/components/sections/Incentives/incentivesMock' +import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton' +import { Suspense } from 'react' +import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton' + +import InputText from '../components/ui/InputText' +import Button from '../components/ui/Button' +import Checkbox from '../components/ui/Checkbox' + +import 'src/styles/pages/homepage.scss' +import 'src/styles/pages/theming.scss' +import 'src/styles/global/new-theme.scss' + +export type Props = PageProps + +function Page(props: Props) { + const { + data: { site }, + location: { pathname, host }, + } = props + + const { locale } = useSession() + + const title = site?.siteMetadata?.title ?? '' + const siteUrl = `https://${host}${pathname}` + + return ( +
+ {/* SEO */} + + + + + + + }> + + + + }> + + + + + + }> + + + +
+
+
+
+

Get News and Special Offers!

+

+ Receive our news and promotions in advance. Enjoy and get 10% + off your first purchase. For more information click here. +

+
+
+ + + +
+ + +
+ + +
+
+
+
+ ) +} + +export const querySSG = graphql` + query ThemingQuery { + site { + siteMetadata { + title + description + titleTemplate + } + } + } +` + +Page.displayName = 'Page' +export default mark(Page) diff --git a/src/styles/global/new-theme.scss b/src/styles/global/new-theme.scss new file mode 100644 index 00000000..0acd22c3 --- /dev/null +++ b/src/styles/global/new-theme.scss @@ -0,0 +1,273 @@ +// ---------------------------------------------------------- +// GLOBAL TOKENS +// Base Store Theme +// ---------------------------------------------------------- + +@import "../vendors/include-media"; + +// -------------------------------------------------------- +// Colors (Branding Core) +// -------------------------------------------------------- + +.new-theme { + // PALETTE + // Tone values must range from lightest to darkest. + // `0` is more suitable for backgrounds, and `4` for texts. + --fs-color-main-0 : #ecf0ff; + --fs-color-main-1 : #d8e2ff; + --fs-color-main-2 : #00419e; + --fs-color-main-3 : #002c71; + --fs-color-main-4 : #001947; + + --fs-color-accent-0 : #ebdcff; + --fs-color-accent-1 : #8d50fd; + --fs-color-accent-2 : #732fe2; + --fs-color-accent-3 : #5900c8; + --fs-color-accent-4 : #4700a0; + + --fs-color-neutral-0 : #ffffff; + --fs-color-neutral-1 : #f1f2f3; + --fs-color-neutral-2 : #e3e6e8; + --fs-color-neutral-3 : #c7ccd1; + --fs-color-neutral-4 : #9099a2; + --fs-color-neutral-5 : #74808b; + --fs-color-neutral-6 : #5d666f; + --fs-color-neutral-7 : #171a1c; + + // HIERARCHY + --fs-color-primary-text : var(--fs-color-text-inverse); + --fs-color-primary-bkg : var(--fs-color-main-4); + --fs-color-primary-bkg-hover : var(--fs-color-main-3); + --fs-color-primary-bkg-active : var(--fs-color-main-2); + --fs-color-primary-bkg-light : var(--fs-color-main-0); + --fs-color-primary-bkg-light-active : var(--fs-color-main-1); + + --fs-color-secondary-text : var(--fs-color-main-4); + --fs-color-secondary-bkg : transparent; + --fs-color-secondary-bkg-hover : var(--fs-color-main-4); + --fs-color-secondary-bkg-active : var(--fs-color-main-3); + --fs-color-secondary-bkg-light : var(--fs-color-main-0); + --fs-color-secondary-bkg-light-active: var(--fs-color-secondary-bkg-light); + + --fs-color-tertiary-text : var(--fs-color-link); + --fs-color-tertiary-bkg : transparent; + --fs-color-tertiary-bkg-hover : var(--fs-color-main-0); + --fs-color-tertiary-bkg-active : var(--fs-color-main-1); + --fs-color-tertiary-bkg-light : var(--fs-color-neutral-0); + --fs-color-tertiary-bkg-light-active : var(--fs-color-tertiary-bkg-light); + + // COMPONENTS & STATES + --fs-color-body-bkg : var(--fs-color-neutral-0); + + --fs-color-action-text : var(--fs-color-text-inverse); + --fs-color-action-bkg : var(--fs-color-accent-3); + --fs-color-action-bkg-hover : var(--fs-color-accent-2); + --fs-color-action-bkg-active : var(--fs-color-accent-1); + --fs-color-action-bkg-light : var(--fs-color-neutral-0); + --fs-color-action-bkg-light-active : var(--fs-color-tertiary-bkg-light); + + --fs-color-link : var(--fs-color-main-2); + --fs-color-link-hover : var(--fs-color-main-2); + --fs-color-link-active : var(--fs-color-main-4); + --fs-color-link-visited : #6058ba; + --fs-color-link-inverse : var(--fs-color-neutral-0); + + --fs-color-text : var(--fs-color-neutral-7); + --fs-color-text-light : var(--fs-color-neutral-6); + --fs-color-text-inverse : var(--fs-color-neutral-0); + --fs-color-text-display : var(--fs-color-main-4); + + --fs-color-focus-ring : #8db6fa; + --fs-color-focus-ring-outline : #8db6fa80; + --fs-color-focus-ring-danger : #e1adad; + + // SITUATIONS + --fs-color-success-text : #368369; + --fs-color-success-bkg : #cee8de; + --fs-color-success-border : var(--fs-color-success-text); + + --fs-color-warning-text : var(--fs-color-text); + --fs-color-warning-bkg : #f6e0ba; + --fs-color-warning-border : var(--fs-color-warning-text); + + --fs-color-danger-text : #cb4242; + --fs-color-danger-bkg : var(--fs-color-focus-ring-danger); + --fs-color-danger-border : var(--fs-color-danger-text); + + --fs-color-info-text : var(--fs-color-text); + --fs-color-info-bkg : var(--fs-color-main-1); + + --fs-color-highlighted-text : var(--fs-color-text); + --fs-color-highlighted-bkg : var(--fs-color-accent-0); + + --fs-color-neutral-text : var(--fs-color-text); + --fs-color-neutral-bkg : var(--fs-color-neutral-1); + + --fs-color-disabled-text : var(--fs-color-neutral-6); + --fs-color-disabled-bkg : var(--fs-color-neutral-2); + + // -------------------------------------------------------- + // Typography (Branding Core) + // -------------------------------------------------------- + + // FACE + --fs-text-face-body : "Lato", -apple-system, system-ui, BlinkMacSystemFont, sans-serif; + --fs-text-face-title : var(--fs-text-face-body); + + // WEIGHT + --fs-text-weight-light : 300; + --fs-text-weight-regular : 400; + --fs-text-weight-bold : 700; + --fs-text-weight-black : 900; + + // MAX LINES + --fs-text-max-lines : 2; + + // TYPOGRAPHY SCALE + // Use a type scale to add rhythm to your typography and + // ensure consistency throughout the project. + // Access https://type-scale.com and pick a scale that + // suits the store's branding. + --fs-text-scale-mobile : 1.13; + --fs-text-scale-desk : 1.25; + + --fs-scale : var(--fs-text-scale-mobile); + + @include media(">=notebook") { + --fs-scale : var(--fs-text-scale-desk); + } + + // NUMERIC SCALE + --fs-text-size-base : 16px; // 1rem + + --fs-text-size-0 : 12px; // Smallest + --fs-text-size-1 : 14px; // Smaller // Mob Desk + --fs-text-size-2 : var(--fs-text-size-base); // 16px 16px + --fs-text-size-3 : calc(var(--fs-text-size-2) * var(--fs-scale)); // 18px 20px + --fs-text-size-4 : calc(var(--fs-text-size-3) * var(--fs-scale)); // 20px 25px + --fs-text-size-5 : calc(var(--fs-text-size-4) * var(--fs-scale)); // 23px 31px + --fs-text-size-6 : calc(var(--fs-text-size-5) * var(--fs-scale)); // 26px 39px + --fs-text-size-7 : calc(var(--fs-text-size-6) * var(--fs-scale)); // 29px 48px + --fs-text-size-8 : calc(var(--fs-text-size-7) * var(--fs-scale)); // 33px 61px + + // HIERARCHY SCALE + --fs-text-size-title-huge : var(--fs-text-size-7); + --fs-text-size-title-page : var(--fs-text-size-6); + --fs-text-size-title-product : var(--fs-text-size-4); + --fs-text-size-title-section : var(--fs-text-size-4); + --fs-text-size-title-subsection : var(--fs-text-size-4); + --fs-text-size-title-mini : var(--fs-text-size-4); + --fs-text-size-lead : var(--fs-text-size-3); + --fs-text-size-menu : var(--fs-text-size-base); + --fs-text-size-body : var(--fs-text-size-base); + --fs-text-size-legend : var(--fs-text-size-1); + --fs-text-size-tiny : var(--fs-text-size-0); + + // -------------------------------------------------------- + // Spacing (UI Essentials) + // -------------------------------------------------------- + + // NUMERIC SCALE + --fs-spacing-0 : .25rem; // 4px + --fs-spacing-1 : .5rem; // 8px + --fs-spacing-2 : .75rem; // 12px + --fs-spacing-3 : 1rem; // 16px (--fs-text-size-base) + --fs-spacing-4 : 1.5rem; // 24px + --fs-spacing-5 : 2rem; // 32px + --fs-spacing-6 : 2.5rem; // 40px + --fs-spacing-7 : 3rem; // 48px + --fs-spacing-8 : 3.5rem; // 56px + --fs-spacing-9 : 4rem; // 64px + --fs-spacing-10 : 4.5rem; // 72px + --fs-spacing-11 : 5rem; // 80px + --fs-spacing-12 : 5.5rem; // 88px + --fs-spacing-13 : 6rem; // 96px + + // -------------------------------------------------------- + // Grid & Layout (UI Essentials) + // -------------------------------------------------------- + + // PADDING + --fs-grid-padding : var(--fs-spacing-3); + + @include media(">=tablet") { + --fs-grid-padding : var(--fs-spacing-4); + } + + @include media(">=notebook") { + --fs-grid-padding : var(--fs-spacing-5); + } + + // CONTAINER + --fs-grid-max-width : var(--fs-grid-breakpoint-notebook); + + // GAPS + --fs-grid-gap-0 : var(--fs-spacing-1); + --fs-grid-gap-1 : var(--fs-spacing-2); + --fs-grid-gap-2 : var(--fs-spacing-3); + --fs-grid-gap-3 : var(--fs-spacing-4); + --fs-grid-gap-4 : var(--fs-spacing-5); + + // BREAKPOINTS + --fs-grid-breakpoint-phone : #{map-get($breakpoints, "phone")}; + --fs-grid-breakpoint-phonemid : #{map-get($breakpoints, "phonemid")}; + --fs-grid-breakpoint-tablet : #{map-get($breakpoints, "tablet")}; + --fs-grid-breakpoint-notebook : #{map-get($breakpoints, "notebook")}; + --fs-grid-breakpoint-desktop : #{map-get($breakpoints, "desktop")}; + + // -------------------------------------------------------- + // Interactive Controls (UI Essentials) + // -------------------------------------------------------- + + // TAP + --fs-control-tap-size-smallest : calc(var(--fs-control-tap-size) / 2); + --fs-control-tap-size : var(--fs-spacing-7); // 3rem = 48px + + @include media(">=notebook") { + --fs-control-tap-size : var(--fs-spacing-7); // This value can be smaller on desktops + } + + // STATES + --fs-control-bkg : var(--fs-color-neutral-0); + --fs-control-bkg-hover : var(--fs-control-tap-size); + --fs-control-bkg-active : var(--fs-control-tap-size); + --fs-control-bkg-disabled : var(--fs-color-disabled-bkg); + + // SIZING + --fs-control-min-height : var(--fs-control-tap-size); + + // -------------------------------------------------------- + // Refinements + // -------------------------------------------------------- + + // TRANSITION + --fs-transition-timing : .2s; + --fs-transition-property : all; + --fs-transition-function : ease-in-out; + + // BORDERS + --fs-border-radius-small : .125rem; + --fs-border-radius : .25rem; + --fs-border-radius-medium : .5rem; + --fs-border-radius-pill : 100px; + --fs-border-radius-circle : 100%; + + --fs-border-color : var(--fs-color-neutral-4); + --fs-border-color-hover : var(--fs-color-main-3); + --fs-border-color-active : var(--fs-color-main-2); + --fs-border-color-disabled : var(--fs-color-neutral-6); + + --fs-border-color-light : var(--fs-color-neutral-2); + --fs-border-color-light-hover : var(--fs-color-neutral-3); + --fs-border-color-light-active : var(--fs-color-neutral-3); + --fs-border-color-light-disabled : var(--fs-color-neutral-5); + + --fs-border-width : 1px; + --fs-border-width-thick : 2px; + --fs-border-width-thickest : 3px; + + // SHADOW + --fs-shadow : none; + --fs-shadow-darker : 0 0 10px rgb(0 0 0 / 20%); + --fs-shadow-hover : 0 1px 4px rgb(0 0 0 / 10%), 0 6px 8px rgb(0 0 0 / 10%); +} diff --git a/yarn.lock b/yarn.lock index 8fa0947f..8c40883f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2003,6 +2003,16 @@ react-swipeable "^6.1.2" tabbable "^5.2.1" +"@fontsource/orelega-one@^4.5.2": + version "4.5.8" + resolved "https://registry.yarnpkg.com/@fontsource/orelega-one/-/orelega-one-4.5.8.tgz#76a2f9d366e8e087ae8273c15dcfa70945a2520c" + integrity sha512-YfgvNckRv4Mw4taHcS+uZtF5Qh26mkosSUjLO/D/zsxnrLw8KA5F0idyE2Fb+BVtLTMKkwJi0DPsG3FHqvVQOw== + +"@fontsource/roboto-mono@^4.5.1": + version "4.5.7" + resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-4.5.7.tgz#69a89b679ab962ea3591438f35833b09f0f8980f" + integrity sha512-1uBjM95BEz7zJlmmnpNAM5afMvIxx0wqr86eA76vRqZw8OF5wmsRqYfF3caHuVarBH9/AGN7t9h+3UXK8fjq/Q== + "@gar/promisify@^1.0.1": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" From 506305914f7c2c3bd8650167090f1c1ff79ba46d Mon Sep 17 00:00:00 2001 From: renatamottam Date: Fri, 3 Jun 2022 09:46:40 -0300 Subject: [PATCH 2/3] Styles Theming page --- src/styles/pages/theming.scss | 141 ++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 src/styles/pages/theming.scss diff --git a/src/styles/pages/theming.scss b/src/styles/pages/theming.scss new file mode 100644 index 00000000..dc4a9fda --- /dev/null +++ b/src/styles/pages/theming.scss @@ -0,0 +1,141 @@ +.footer, +.navbar { + display: none; +} + +.content { + width: 100%; + + section:nth-child(3) { + li [data-product-card-image] { + background-position: center; + background-size: cover; + img { opacity: 0; } + } + + li:nth-child(1) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760864-a1899065-6d63-490a-8aff-430f15638789.jpg"); + } + + li:nth-child(2) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760872-ca7a9ea8-6429-4fdb-a5f5-a7ad1a6f84f9.jpg"); + } + + li:nth-child(3) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760876-c5b4bc10-c27f-42d0-b1f4-de31bbda3fb5.jpg"); + } + + li:nth-child(4) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760879-1675010a-2622-40d2-8902-afa22fd28382.jpg"); + } + + li:nth-child(5) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760881-5c9534de-d564-494a-81ad-4ed080699b19.jpg"); + } + } + + section:nth-child(6) { + li [data-product-card-image] { + background-position: center; + background-size: cover; + + img { + opacity: 0; + } + } + + li:nth-child(1) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171734185-08d5a1a6-5624-4d42-99fd-b8008d875f67.jpg"); + } + + li:nth-child(2) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760879-1675010a-2622-40d2-8902-afa22fd28382.jpg"); + } + + li:nth-child(3) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760872-ca7a9ea8-6429-4fdb-a5f5-a7ad1a6f84f9.jpg"); + } + + li:nth-child(4) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760881-5c9534de-d564-494a-81ad-4ed080699b19.jpg"); + } + + li:nth-child(5) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760864-a1899065-6d63-490a-8aff-430f15638789.jpg"); + } + } + + [data-store-tiles] { + li [data-product-card-image] { + background-position: center; + background-size: cover; + + img { + opacity: 0; + } + } + + li:nth-child(1) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171760872-ca7a9ea8-6429-4fdb-a5f5-a7ad1a6f84f9.jpg"); + } + + li:nth-child(2) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171734190-2d5c5d13-6e64-4178-8ae7-468158acadcf.jpg"); + } + + li:nth-child(3) [data-product-card-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171734179-e4b16e39-2022-45bd-9678-039c8bb6bc95.jpg"); + } + } + + [data-fs-hero] { + [data-hero-image] { + background-image: url("https://user-images.githubusercontent.com/11613011/171738799-97728f4c-b413-46a6-8dd6-9e8d8b0867fc.png"); + background-position: center; + background-size: cover; + + img { + opacity: 0; + } + } + } +} + +.form { + padding-bottom: 0; + + h2 { + width: 80%; + margin-bottom: var(--fs-spacing-2); + font-size: var(--fs-text-size-title-page); + font-weight: var(--fs-text-weight-black); + } + + p { line-height: 1.4; } + + article { width: 30%; } + + form { + display: flex; + flex-direction: column; + row-gap: var(--fs-spacing-3); + width: 30%; + } + + button { margin-top: var(--fs-spacing-1); } + + .form__wrapper { background-color: aliceblue; } + + .layout__content { + display: flex; + column-gap: 10%; + align-items: flex-start; + justify-content: center; + padding: var(--fs-spacing-13) 0; + } + + .checkbox__wrapper { + display: flex; + column-gap: var(--fs-spacing-1); + } +} From 2fd7009369f1cf39fd55ef3651c16635d2221607 Mon Sep 17 00:00:00 2001 From: renatamottam Date: Fri, 3 Jun 2022 10:16:30 -0300 Subject: [PATCH 3/3] Fixes bkg color --- src/Layout.tsx | 2 +- src/pages/theming.tsx | 2 +- src/styles/global/new-theme.scss | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Layout.tsx b/src/Layout.tsx index 7b1e6841..5fd06060 100644 --- a/src/Layout.tsx +++ b/src/Layout.tsx @@ -22,7 +22,7 @@ function Layout({ children }: PropsWithChildren) { return ( <> -
+
+
{/* SEO */}