diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index d60d7f5..5f9d79c 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,6 +1,8 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
+import "./styles.css";
+
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
new file mode 100644
index 0000000..6b78ad6
--- /dev/null
+++ b/react/components/Html/styles.css
@@ -0,0 +1,3 @@
+[class*="html--pdp-breadcrumb"] {
+ background-color: #FFFFFF;
+}
diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css
new file mode 100644
index 0000000..dcda541
--- /dev/null
+++ b/styles/configs/font-faces.css
@@ -0,0 +1,5 @@
+
+@font-face {
+ font-family: 'Open Sans', sans-serif;
+ src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');
+}
diff --git a/styles/configs/style.json b/styles/configs/style.json
index 7b90b6b..2f02809 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
- "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans , -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 5e37ba5..395ab15 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -8,9 +8,9 @@
/* Media Query M3 */
/* Grid breakpoints */
.html {
- background-color: red;
+ background-color: #FFFFFF;
}
.html--pdp-breadcrumb {
- background-color: green;
+ background-color: #FFFFFF;
}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
new file mode 100644
index 0000000..18b33b9
--- /dev/null
+++ b/styles/css/vtex.breadcrumb.css
@@ -0,0 +1,34 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.container {
+ padding: 0 40px;
+}
+.container .homeIcon {
+ display: none;
+}
+.container .homeLink::after {
+ content: "Home";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+.container .link,
+.container .term {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+}
+.container .link {
+ color: #929292;
+}
+.container .term {
+ color: #000000;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index ea7d5b9..c4c4c7c 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -1,8 +1,7 @@
.html {
- background-color: red;
+ background-color: #FFFFFF;
}
.html--pdp-breadcrumb {
- background-color: green;
+ background-color: #FFFFFF;
}
-
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
new file mode 100644
index 0000000..286ae2b
--- /dev/null
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -0,0 +1,32 @@
+.container {
+ padding: 0 40px;
+
+ .homeIcon {
+ display: none;
+ }
+
+ .homeLink {
+ &::after {
+ content: "Home";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
+ }
+
+ .link,
+ .term {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ }
+
+ .link {
+ color: #929292;
+ }
+
+ .term {
+ color: #000000;
+ }
+}