{"version":3,"file":"component---src-pages-v-2-colours-jsx-62e1cd16ade83de122c5.js","mappings":"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","sources":["webpack://toyota-branding-guidelines/./src/components/v2/ImageBlock.jsx","webpack://toyota-branding-guidelines/./src/components/v2/ColourSwatch.jsx","webpack://toyota-branding-guidelines/./src/components/v2/Shade.jsx","webpack://toyota-branding-guidelines/./src/images/Toyota_.jpg","webpack://toyota-branding-guidelines/./src/images/6. Colours/Colours_Use_Black_Placeholder.jpeg","webpack://toyota-branding-guidelines/./src/images/6. Colours/Colours_Use_Gray_Placeholder.jpeg","webpack://toyota-branding-guidelines/./src/images/6. Colours/Colours_Use_White_Placeholder.jpeg","webpack://toyota-branding-guidelines/./src/pages/v2/colours.jsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst ImageBlock = (props) => {\r\n  let classes = \"image-block\";\r\n  if (props.vertPadding) {\r\n    classes += \" vert-padding\";\r\n  }\r\n  return <div className={classes}>{props.children}</div>;\r\n};\r\n\r\nexport default ImageBlock;\r\n","import React from \"react\";\r\n\r\nconst ColourSwatch = (props) => {\r\n  return (\r\n    <div className={`colour-swatch ${props.colour}`}>\r\n      <div className=\"inner-center\">\r\n        <h3 className=\"title\">\r\n          {props.name}\r\n        </h3>\r\n        <div className=\"copy\">\r\n          {props.pms &&\r\n            <>PMS {props.pms}\r\n            <br />\r\n            </>\r\n          }\r\n          CMYK {props.cmyk}\r\n          <br />\r\n          RGB {props.rgb}\r\n          <br />\r\n          HEX {props.hex}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n};\r\n\r\nexport default ColourSwatch;","import React from \"react\";\r\n\r\nconst Shade = (props) => {\r\n  return (\r\n    <div className=\"shade\" style={{ backgroundColor: `rgba(0, 0, 0, ${props.label / 100})`}}>\r\n      <div className=\"spacer\">&nbsp;</div>\r\n      <div className=\"label\">{props.label}%</div>\r\n      <div className=\"spacer\">&nbsp;</div>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Shade;","export default __webpack_public_path__ + \"static/Toyota_-3f725847507a03781ffcf3326027e174.jpg\";","export default __webpack_public_path__ + \"static/Colours_Use_Black_Placeholder-d060b2846520fa07236632693b5211b8.jpeg\";","export default __webpack_public_path__ + \"static/Colours_Use_Gray_Placeholder-3e08c657f257fbc178a11e785fa8a12d.jpeg\";","export default __webpack_public_path__ + \"static/Colours_Use_White_Placeholder-5575d0b20d86599d677b71170bb51e02.jpeg\";","import React from \"react\";\r\n\r\nimport Layout from \"../../components/v2/Layout\";\r\nimport ContentBlock from \"../../components/v2/ContentBlock\";\r\nimport Hero from \"../../components/v2/Hero\";\r\nimport PageSection from \"../../components/v2/PageSection\";\r\nimport Image from \"../../components/v2/Image\";\r\n\r\nimport PrevNextNavFooter from \"../../components/v2/ui-blocks/PrevNextNavFooter/PrevNextNavFooter\";\r\n\r\nimport ImageBlock from \"../../components/v2/ImageBlock\";\r\nimport ColourSwatch from \"../../components/v2/ColourSwatch\";\r\nimport Shade from \"../../components/v2/Shade\";\r\n\r\nimport ToyotaImage from \"../../images/Toyota_.jpg\";\r\nimport Colours_Black from \"../../images/6. Colours/Colours_Use_Black_Placeholder.jpeg\";\r\nimport Colours_Gray from \"../../images/6. Colours/Colours_Use_Gray_Placeholder.jpeg\";\r\nimport Colours_White from \"../../images/6. Colours/Colours_Use_White_Placeholder.jpeg\";\r\n\r\nimport { pageLinks } from \"../../data/pageLinks.js\";\r\n\r\nconst introText =\r\n  \"Colour is a powerful means of recognition, helping establish a clear identity and distinction for Toyota and our products. At the heart of our brand is Toyota Red. Red is the colour of energy. It is highly visible and conveys the Toyota spirit of excitement.\";\r\n\r\nconst Colours = (props) => {\r\n  return (\r\n    <Layout>\r\n      <Hero bgColor=\"#eb0a1e\" text={introText} />\r\n      <PageSection sectionId=\"brand-colours\">\r\n        <ContentBlock>\r\n          <h2>BRAND COLOURS</h2>\r\n          <div className=\"text\">\r\n            <p>\r\n              Our colour palette is simple and impactful, comprising Toyota Red,\r\n              white, black and grey. These are the colours of our identity, as\r\n              expressed through our logos and our Visual Identity System. In\r\n              addition to the colours within our photography, these are the only\r\n              colours to be used when creating brand communications that sit\r\n              within Messaging Platform. Brand Campaigns can use these colours\r\n              but also have the option to use secondary colours as specified in\r\n              the following page.\r\n            </p>\r\n          </div>\r\n        </ContentBlock>\r\n        <ColourSwatch\r\n          name=\"Toyota Red\"\r\n          colour=\"red\"\r\n          pms=\"186C\"\r\n          cmyk=\"00 100 90 00\"\r\n          rgb=\"235 10 30\"\r\n          hex=\"EB0A1E\"\r\n        />\r\n        <ColourSwatch\r\n          name=\"White\"\r\n          colour=\"white\"\r\n          cmyk=\"00 00 00 00\"\r\n          rgb=\"255 255 255\"\r\n          hex=\"FFFFFF\"\r\n        />\r\n        <ColourSwatch\r\n          name=\"Black\"\r\n          colour=\"black\"\r\n          pms=\"Black C\"\r\n          cmyk=\"00 00 00 100\"\r\n          rgb=\"0 0 0\"\r\n          hex=\"000000\"\r\n        />\r\n        <div className=\"shades\">\r\n          <div className=\"margin-aligner\"></div>\r\n          <div className=\"shade main\">\r\n            <h3 className=\"spacer\">Black Tint</h3>\r\n            <div className=\"label\">90%</div>\r\n            <div className=\"spacer\">&nbsp;</div>\r\n          </div>\r\n          <Shade label={80} />\r\n          <Shade label={70} />\r\n          <Shade label={60} />\r\n          <Shade label={50} />\r\n          <Shade label={40} />\r\n          <Shade label={30} />\r\n          <Shade label={20} />\r\n          <Shade label={10} />\r\n        </div>\r\n      </PageSection>\r\n      <PageSection sectionId=\"colour-mode\">\r\n        <ContentBlock>\r\n          <h2>COLOUR MODE</h2>\r\n          <h3>Toyota Red</h3>\r\n          <div className=\"text\">\r\n            <p>\r\n              Our colour palette is simple and impactful, comprising Toyota Red,\r\n              white, black and grey. These are the colours of our identity, as\r\n              expressed through our logos and our Visual Identity System. In\r\n              addition to the colours within our photography, these are the only\r\n              colours to be used when creating brand communications that sit\r\n              within Messaging Platform. Brand Campaigns can use these colours\r\n              but also have the option to use secondary colours as specified in\r\n              the following page.\r\n            </p>\r\n          </div>\r\n        </ContentBlock>\r\n        <ImageBlock>\r\n          <Image width=\"100%\" src={ToyotaImage}></Image>\r\n        </ImageBlock>\r\n        <div\r\n          className=\"checkerboard\"\r\n          style={{ background: \"#fafafa\", marginBottom: \"80px\" }}\r\n        >\r\n          <div className=\"full-width\">\r\n            <ul>\r\n              <li>\r\n                {/* First row */}\r\n                <div className=\"wrap\" style={{ background: \"transparent\" }}>\r\n                  <div\r\n                    className=\"left\"\r\n                    style={{ margin: \"0px\", background: \"transparent\" }}\r\n                  >\r\n                    <div className=\"block\">\r\n                      <div>\r\n                        <div\r\n                          className=\"image\"\r\n                          style={{ display: \"flex\", height: \"570px\" }}\r\n                        >\r\n                          {/* intetionally double curly braces around empty_png  */}\r\n                          <img\r\n                            alt=\"\"\r\n                            src={Colours_White}\r\n                            style={{\r\n                              height: \"400px\",\r\n                              width: \"400px\",\r\n                              margin: \"auto\",\r\n                            }}\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div\r\n                    className=\"right\"\r\n                    style={{ margin: \"0px\", background: \"white\" }}\r\n                  >\r\n                    <div className=\"block\">\r\n                      <span></span>\r\n                      <div className=\"copyWrap\">\r\n                        <h3 className=\"title\">White</h3>\r\n                        <p className=\"text\">\r\n                          White space allows for information and product to\r\n                          breathe and often promotes greater visibility and\r\n                          impact.\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                {/* end of first row  */}\r\n              </li>\r\n              <li>\r\n                <div className=\"wrap\" style={{ background: \"transparent\" }}>\r\n                  <div\r\n                    className=\"left\"\r\n                    style={{ margin: \"0px\", background: \"transparent\" }}\r\n                  >\r\n                    <div className=\"block\">\r\n                      <div>\r\n                        <div\r\n                          className=\"image\"\r\n                          style={{ display: \"flex\", height: \"570px\" }}\r\n                        >\r\n                          <img\r\n                            alt=\"\"\r\n                            src={Colours_Black}\r\n                            style={{\r\n                              height: \"400px\",\r\n                              width: \"400px\",\r\n                              margin: \"auto\",\r\n                            }}\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div\r\n                    className=\"right\"\r\n                    style={{ margin: \"0px\", background: \"white\" }}\r\n                  >\r\n                    <div className=\"block\">\r\n                      <span></span>\r\n                      <div className=\"copyWrap\">\r\n                        <h3 className=\"title\">Black</h3>\r\n                        <p className=\"text\">\r\n                          Black is generally used for typography only, but may\r\n                          be used elsewhere when deemed necessary.\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                {/* end of second row  */}\r\n              </li>\r\n\r\n              <li>\r\n                {/* Third row */}\r\n                <div className=\"wrap\" style={{ background: \"transparent\" }}>\r\n                  <div\r\n                    className=\"left\"\r\n                    style={{ margin: \"0px\", background: \"transparent\" }}\r\n                  >\r\n                    <div className=\"block\">\r\n                      <div>\r\n                        <div\r\n                          className=\"image\"\r\n                          style={{ display: \"flex\", height: \"570px\" }}\r\n                        >\r\n                          <img\r\n                            alt=\"\"\r\n                            src={Colours_Gray}\r\n                            style={{\r\n                              height: \"400px\",\r\n                              width: \"400px\",\r\n                              margin: \"auto\",\r\n                            }}\r\n                          />\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div\r\n                    className=\"right\"\r\n                    style={{ margin: \"0px\", background: \"white\" }}\r\n                  >\r\n                    <div className=\"block\">\r\n                      <span></span>\r\n                      <div className=\"copyWrap\">\r\n                        <h3 className=\"title\">Grey</h3>\r\n                        <p className=\"text\">\r\n                          Grey may be used as a secondary colour for call-outs\r\n                          and to highlight CTAs.'\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </PageSection>\r\n      <PrevNextNavFooter\r\n        previousText=\"Previous\"\r\n        previousHeader=\"photography\"\r\n        previousUrl={pageLinks.photography}\r\n        nextText=\"Next\"\r\n        nextHeader=\"TVC Endframe\"\r\n        nextUrl={pageLinks.endframe}\r\n      />\r\n    </Layout>\r\n  );\r\n};\r\n\r\nexport default Colours;\r\n"],"names":["props","classes","vertPadding","className","children","colour","name","pms","cmyk","rgb","hex","style","backgroundColor","label","Layout","Hero","bgColor","text","PageSection","sectionId","ContentBlock","ImageBlock","Image","width","src","ToyotaImage","background","marginBottom","margin","display","height","alt","Colours_White","Colours_Black","Colours_Gray","PrevNextNavFooter","previousText","previousHeader","previousUrl","pageLinks","nextText","nextHeader","nextUrl"],"sourceRoot":""}