https://vcc-ui.vercel.app/_next/static/chunks/pages/blog/2022-11-20-text-styles-css-c200f2913f071fe1.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3562],{66136:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/2022-11-20-text-styles-css",function(){return s(46222)}])},46222:function(e,n,s){"use strict";s.r(n);var a=s(52322),t=s(45392),i=s(28621),l=s(88760);function r(e){let n=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",a:"a",h2:"h2",em:"em",pre:"pre",strong:"strong",h3:"h3"},(0,t.ah)(),e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(l.G,{direction:"row",spacing:1,children:(0,a.jsx)(i.q,{email:"[email protected]",align:"start",name:"Jacob Rask",title:"Volvo Cars Online Engineering",img:"/people/jacob.jpg"})}),"\n",(0,a.jsx)(n.h1,{id:"new-text-styles-and-the-volvo-cars-css-library",children:"New text styles and the Volvo Cars CSS library"}),"\n",(0,a.jsxs)(n.p,{children:["We're happy to present our updated type stack and the first release of ",(0,a.jsx)(n.code,{children:"@volvo-cars/css"}),", the Volvo Cars CSS library for the Web Design System library."]}),"\n",(0,a.jsx)(n.p,{children:"The release includes several major changes:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Abstract text style names have been replaced with descriptive ones"}),"\n",(0,a.jsx)(n.li,{children:"Text styles are delivered with a CSS library rather than through a React component in VCC UI"}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["To find out more about why we're creating a CSS utility library, ",(0,a.jsx)(n.a,{href:"./2022-11-23-future-css",children:"read the blog post"}),"."]}),"\n",(0,a.jsx)(n.p,{children:"Otherwise, let's talk text styles."}),"\n",(0,a.jsx)(n.h2,{id:"more-intuitive-text-style-names",children:"More intuitive text style names"}),"\n",(0,a.jsx)(n.p,{children:"The previous names were difficult to learn as there was no connection between the name and the rendered output. Some variants were responsive and some were not, some allowed emphasis and some did not. We wanted new names that were both easier to learn but also made it easy to make the right choice when picking a text style."}),"\n",(0,a.jsx)(n.p,{children:"As our designers and developers analyzed the usage of the existing styles on the web and other platforms, we identified text styles fell into natural groupings."}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"cook"})," was most commonly used as the main heading on a page. It has been renamed ",(0,a.jsx)(n.code,{children:"heading-1"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"ootah"})," was expanded from a single style with ",(0,a.jsx)(n.code,{children:"emphasis"})," and ",(0,a.jsx)(n.code,{children:"standard"})," modifiers to become ",(0,a.jsx)(n.code,{children:"heading-2"})," and ",(0,a.jsx)(n.code,{children:"heading-3"})," styles."]}),"\n",(0,a.jsxs)(n.p,{children:["This means that the most commonly used text styles both follow the simple and familiar naming convention of and map cleanly to the markup elements ",(0,a.jsx)(n.code,{children:"h1"}),", ",(0,a.jsx)(n.code,{children:"h2"}),", and ",(0,a.jsx)(n.code,{children:"h3"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["The text styles ",(0,a.jsx)(n.code,{children:"peary"})," and ",(0,a.jsx)(n.code,{children:"yang"})," were more rarely used and were grouped into the ",(0,a.jsx)(n.em,{children:"Statement"})," category, which will be further expanded with two larger text styles in an upcoming release."]}),"\n",(0,a.jsx)(n.p,{children:"The Heading and Statement categories are both fluid, meaning they will seamlessly increase in size from a smaller device up to larger screens instead of increasing at specific breakpoint intervals."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n<p className="heading-1">heading-1</p>\n<p className="pt">was <code>&lt;Text variant="cook"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="heading-2">heading-2</p>\n  <p className="pt">was <code>&lt;Text variant="ootah" subStyle="emphasis"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,

1children:'<>\n  <p className="heading-3">heading-3</p>\n  <p className="pt">was <code>&lt;Text variant="ootah" subStyle="standard"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="statement-3">statement-3</p>\n  <p className="pt">was <code>&lt;Text variant="peary"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="statement-signature">statement-signature</p>\n  <p className="pt">was <code>&lt;Text variant="yang"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"hillary"}),", ",(0,a.jsx)(n.code,{children:"columbus"})," and ",(0,a.jsx)(n.code,{children:"bates"})," text styles were also given more descriptive names."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="title-24">title-24</p>\n  <p className="pt">new</p>\n</>\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="title-20">title-20</p>\n  <p className="pt">was <code>&lt;Text variant="hillary"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"body-16"})," is the default font-size when using ",(0,a.jsx)(n.code,{children:"@volvo-cars/css"})," and should rarely need to be set explicitly."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="body-16">body-16</p>\n  <p className="pt">was <code>&lt;Text variant="columbus"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",example:!0,children:'<>\n  <p className="micro">micro</p>\n  <p className="pt">was <code>&lt;Text variant="kelly"&gt;</code></p>\n</>\n'})}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.strong,{children:"Deprecations"})}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"kelly"})," and ",(0,a.jsx)(n.code,{children:"amundsen"})," text styles have been removed and most use cases should be replaced with ",(0,a.jsx)(n.code,{children:"body-16"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"the-css-library",children:"The CSS library"}),"\n",(0,a.jsxs)(n.p,{children:["The goal of the ",(0,a.jsx)(n.code,{children:"@volvo-cars/css"})," library is to provide low-level Design System styles with as little friction as possible. It has no JavaScript runtime or build step, and includes:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Global styles and resets"}),"\n",(0,a.jsx)(n.li,{children:"Design tokens as CSS custom properties (variables)"}),"\n",(0,a.jsx)(n.li,{children:"Utility classes to apply design tokens and core styles like typography and colors"}),"\n",(0,a.jsx)(n.li,{children:"Dark mode"}),"\n",(0,a.jsx)(n.li,{children:"Compatibility with right-to-left languages"}),"\n"]}),"\n",(0,a.jsxs)(n.h3,{id:"transitioning-from-vcc-ui-text",children:["Transitioning from VCC UI ",(0,a.jsx)(n.code,{children:"<Text>"})]}),"\n",(0,a.jsxs)(n.p,{children:["For typography specifically, we don't see a need for a generic ",(0,a.jsx)(n.code,{children:"Text"})," or ",(0,a.jsx)(n.code,{children:"Heading"})," component. When adding text to a page the HTML semantics are important for accessibility and SEO. The tag name should not be an afterthought added with an optional ",(0,a.jsx)(n.code,{children:"as"})," property – it should be an explicit choice."]}),"\n",(0,a.jsxs)(n.p,{children:["Design system styles will apply automatically to the matching semantic elements for ",(0,a.jsx)(n.code,{children:"heading-1"}),", ",(0,a.jsx)(n.code,{children:"heading-2"})," and ",(0,a.jsx)(n.code,{children:"heading-3"})," styles. The following gives 3 headings with the same visual style."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:'<Text variant="ootah">Are you ready to switch?</Text>\n<h2>Are you ready to switch?</h2>\n<h3 className="heading-2">Are you ready to switch?</h3>\n'})}),"\n",(0,a.jsxs)(n.p,{children:["You can combine utility classes to replace the ",(0,a.jsx)(n.code,{children:"foreground"})," and ",(0,a.jsx)(n.code,{children:"subStyle"})," properties of the ",(0,a.jsx)(n.code,{children:"Text"})," component."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",live:!0,children:'<h1 className="title-20 font-medium">\n  Redefine your experience.{\' \'}\n  <span className="text-secondary">\n    You’re one step closer to more considerate mobility.\n  </span>\n</h1>\n'})}),"\n",(0,a.jsxs)(n.p,{children:["If you currently add other styles using ",(0,a.jsx)(n.code,{children:"<Text extend"}),", you can replace it with ",(0,a.jsx)(n.code,{children:"<Block extend"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:'<Block as="h3" className="title-20" extend={titleCSS}>\n  Are you ready to switch?\n</Block>\n'})}),"\n",(0,a.jsx)(n.p,{children:"For special cases you can create your own styles using design system custom properties."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"<Block\n  as=\"h3\"\n  extend={{\n    font: 'var(--v-font-title-20)',\n    fromM: {\n      font: 'var(--font-title-24)',\n    },\n  }}\n>\n  Are you ready to switch?\n</Block>\n"})}),"\n",(0,a.jsxs)(n.p,{children:["You can of course also create application specific compositions like an ",(0,a.jsx)(n.code,{children:"<ArticleHeader>"})," or ",(0,a.jsx)(n.code,{children:"<SectionHeading>"})," component in a way that suits your particular needs."]}),"\n",(0,a.jsxs)(n.p,{children:["In the near future, we will publish a strategy for teams to be able to migrate from ",(0,a.jsx)(n.code,{children:"extend"})," entirely and style their components wholly without a runtime. Watch this space."]}),"\n",(0,a.jsx)(n.h3,{id:"what-about-vcc-ui",children:"What about VCC UI?"}),"\n",(0,a.jsxs)(n.p,{children:["VCC UI is the React implementation of the current truth of the Volvo Cars Design System and is still maintained. As we transition parts of the design system to ",(0,a.jsx)(n.code,{children:"@volvo-cars/css"})," and other packages, VCC UI will gradually do less and other packages do more."]}),"\n",(0,a.jsx)(n.h3,{id:"if-youre-running-into-any-issues-or-have-feedback",children:"If you're running into any issues or have feedback"}),"\n",(0,a.jsxs)(n.p,{children:["We are available in ",(0,a.jsx)(n.a,{href:"https://github.com/volvo-cars/design-system-web/discussions",children:"GitHub Discussions"})," or in #design-system-web on Slack - feedback is always welcome!"]})]})}n.default=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}=Object.assign({},(0,t.ah)(),e.components);return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(r,e)})):r(e)}},28621:function(e,n,s){"use strict";s.d(n,{q:function(){return i}});var a=s(52322);

1s(2784);var t=s(45459);let i=e=>{let{name:n,email:s,title:i,img:l,align:r="end"}=e;return(0,a.jsxs)("div",{className:(0,t.jI)("flex-row","end"===r&&"justify-end"),children:[(0,a.jsx)("img",{className:"rounded-full mr-8",alt:n,src:l,width:50,height:50}),(0,a.jsxs)("div",{className:"micro flex-col",children:[(0,a.jsx)("a",{href:"mailto:".concat(s),children:n}),(0,a.jsx)("p",{children:i})]})]})}}},function(e){e.O(0,[9774,2888,179],function(){return e(e.s=66136)}),_N_E=e.O()}]);