text: (window.webpackJsonp=window.webpackJsonp||[]).push([[15],{214:function(e,t,a){"use strict";a.r(t),a.d(t,"default",function(){return i});var l=a(0),n=a.n(l),r=a(250);function i(){return n.a.createElement(r.a,{title:"Design Tokens"},n.a.createElement("section",{className:"ui segment vertical masthead"},n.a.createElement("h1",{className:"ui header"},"Design tokens",n.a.createElement("p",{className:"sub header"},"Core design elements used across the entire system."))),n.a.createElement("p",null,"Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. - [",n.a.createElement("a",{href:"https://www.lightningdesignsystem.com/design-tokens/"},"Salesforce"),"]"),n.a.createElement("h3",{id:"colors",class:"ui header"},"Colors:"),n.a.createElement("table",{className:"DesignTokensTable ui table"},n.a.createElement("thead",null,n.a.createElement("tr",null,n.a.createElement("th",null,"Tokens"),n.a.createElement("th",null,"Example"),n.a.createElement("th",null,"Released"),n.a.createElement("th",null,"Themeable"),n.a.createElement("th",null,"Support"))),n.a.createElement("tbody",null,n.a.createElement("tr",null,n.a.createElement("td",null,"$red"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui red label"}," "),"#DB2828"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$orange"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui orange label"}," "),"#F2711C"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$yellow"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui yellow label"}," "),"#FBBD08"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$olive"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui olive label"}," "),"#B5CC18"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned "},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$green"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui green label",style:{backgroundColor:"rgb(60, 213, 46)",color:"#FFF"}}," "),"rgb(60, 213, 46)"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$teal"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui teal label"}," "),"#00B5AD"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$blue"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui blue label"}," "),"#2185D0"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$violet"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui violet label"}," "),"#6435C9"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$purple"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui purple label"}," "),"#A333C8"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$pink"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui pink label"}," "),"#E03997"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$brown"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui brown label"}," "),"#A5673F"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$grey"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui grey label"}," "),"#767676"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))),n.a.createElement("tr",null,n.a.createElement("td",null,"$black"),n.a.createElement("td",null,n.a.createElement("span",{class:"ui black label"}," "),"#1B1C1D"),n.a.createElement("td",null,"1.0.0"),n.a.createElement("td",null,"Yes"),n.a.createElement("td",{class:"positive center aligned"},n.a.createElement("i",{class:"check icon"}))))))}},230:function(e,t,a){"use strict";a.d(t,"b",function(){return o});var l=a(0),n=a.n(l),r=a(68),i=a.n(r);a.d(t,"a",function(){return i.a});a(232),a(10).default.enqueue;var s=n.a.createContext({});function c(e){var t=e.staticQueryData,a=e.data,l=e.query,r=e.render,i=a?a.data:t[l]&&t[l].data;return n.a.createElement(n.a.Fragment,null,i&&r(i),!i&&n.a.createElement("div",null,"Loading (StaticQuery)"))}var o=function(e){var t=e.data,a=e.query,l=e.render,r=e.children;return n.a.createElement(s.Consumer,null,function(e){return n.a.createElement(c,{data:t,query:a,render:l||r,staticQueryData:e})})}},232:function(e,t,a){var l;e.exports=(l=a(237))&&l.default||l},237:function(e,t,a){"use strict";a.r(t);a(54),a(16),a(15),a(14),a(8),a(22);var l=a(0),n=a.n(l),r=a(101);function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,l)}return a}function s(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}t.default=function(e){var t=e.location,a=e.pageResources;return a?n.a.createElement(r.a,function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(a,!0).forEach(function(t){s(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(a).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}({location:t,pageResources:a},a.json)):null}},241:function(e,t){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABxCAYAAADWB43MAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAGmgAwAEAAAAAQAAAHEAAAAAZj8IogAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAulJREFUeAHtnbFuE1EQRWPkAkSDIqGU8FF8tj+AkjZFBIgmBcK8pY99leHu1bWOpVQ7njvvnIzTbNaHO/PrfD5/XRFvjTGnw+Hwxdg/3vq4wwQPK+PDDjk3G/HmZk92QwdDUoFMJCGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkgoIFIzIJiGpgEDBiGwSkv4RcP+H+/sCzqMR99ikp9GE19/s/iW4PoG5Yg9J5iPcfnskFThGUoGk4w7P/vmY5LDD+dzHO21/dN3P/vntPsWV/u7zXYmfX+bjbs7Q3gFJdsTzACTNGdo7IMmOeB6ApDlDewck2RHPA5A0Z2jvgCQ74nkAkuYM7R2QZEc8D0DSnKG9A5LsiOcBSJoztHdAkh3xPABJc4b2DkiyI54HIGnO0N4BSXbE8wAkzRnaOyDJjngegKQ5Q3sHJNkRzwO2W7rerZ8f81YvdkjfUP/nxcn+z4Xn1Wb7cb2ej+tLC51fini3bk78tqb/5DqB0PfXqrkX6l5b8rgYfn7tm5X38XGnUArXICksQIlHkkIpXIOksAAlHkkKpXANksIClHgkKZTCNUgKC1DikaRQCtcgKSxAiUeSQilcg6SwACUeSQqlcA2SwgKUeCQplMI1SAoLUOKRpFAK1yApLECJv/lnxSkQhjUP6xaB78Mel97+iKRLeLRr2z0izvtEfvJxp4mIViEpil8LR5LGKVqFpCh+LRxJGqdoFZKi+LVwJGmcolVIiuLXwpGkcYpWISmKXwtHksYpWoWkKH4tHEkap2gVkqL4tXAkaZyiVUiK4tfCkaRxilYhKYpfC0eSxilahaQofi0cSRqnaBWSovi18D1u6dqeu+N8dtH2bKRLr9OliwXXTn8B8a0ldjEuxOEAAAAASUVORK5CYII="},242:function(e,t,a){"use strict";function l(e,t){var a=null;return function(){var l=this,n=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(l,n)},t)}}a.d(t,"a",function(){return l})},244:function(e,t,a){"use strict";var l=a(0),n=a.n(l),r=a(230),i=a(872),s=a(815);a(41);var c=a(241),o=a.n(c);function u(e){e.siteTitle;return n.a.createElement("h1",{class:"ui inverted tiny header"},n.a.createElement("img",{src:o.a,alt:"Semantic UI icon logo"}),"TeamsCode")}t.a=function(e){var t=e.animation,a=void 0===t?"push":t,l=e.visible,c=e.onHide,o=e.siteTitle,m=e.sidebarPages;return n.a.createElement(i.a,{as:s.a,onHide:c,visible:l,inverted:!0,vertical:!0,animation:a},n.a.createElement("div",{class:"item"},n.a.createElement(r.a,{to:"/",style:{color:"white",textDecoration:"none"}},n.a.createElement(u,{siteTitle:o}))),m?m.map(function(e){var t,a=[];return"pages"in e&&Array.isArray(e.pages)>0?(a=e.pages.map(function(e){return n.a.createElement(s.a.Item,{as:r.a,to:e.slug,key:e.slug,className:"item"},e.title)}),n.a.createElement(s.a.Item,{key:e.slug,header:!0},e.title,n.a.createElement(s.a.Menu,null,a))):n.a.createElement(s.a.Item,{to:e.slug,key:e.slug,as:r.a,name:(t=e.title,t.toLowerCase().split(" ").map(function(e){return e[0].toUpperCase()+e.substr(1)}).join(" ")),header:!0})}):"")}},250:function(e,t,a){"use strict";var l=a(251),n=a(0),r=a.n(n),i=a(259),s=a.n(i),c=a(230),o=a(872),u=a(242),m=a(244);a(203);var d=function(e){var t,a;function n(){for(var t,a=arguments.length,l=new Array(a),n=0;n<a;n++)l[n]=arguments[n];return(t=e.call.apply(e,[this].concat(l))||this).state={visible:!0,mobile:!1},t.handleHideClick=function(){return t.setState({visible:!1})},t.handleShowClick=function(){return t.setState({visible:!0})},t.handleSidebarHide=function(){return t.setState({visible:!1})},t.toggleSidebar=function(){return t.setState({visible:!t.state.visible})},t}a=e,(t=n).prototype=Object.create(a.prototype),t.prototype.constructor=t,t.__proto__=a;var i=n.prototype;return i.componentDidMount=function(){window.addEventListener("resize",Object(u.a)(this.resize.bind(this),250)),this.resize()},i.resize=function(){var e=window.innerWidth<=1025;this.setState({mobile:e}),!e!==this.state.visible&&this.setState({visible:!e})},i.render=function(){var e=this,t=this.props,a=t.children,n=t.className,i=t.title,u=t.description,d=this.state,A=d.mobile,E=d.visible,g=A?"overlay":"push";return r.a.createElement(c.b,{query:"4122120986",render:function(t){return r.a.createElement(r.a.Fragment,null,r.a.createElement(s.a,{title:i?i+" - "+t.site.siteMetadata.title:t.site.siteMetadata.title,meta:[{name:"description",content:u||"Documentation for Semantic UI Component Library"},{name:"keywords",content:"design system, style guide, documentation"}]},r.a.createElement("html",{lang:"en"})),r.a.createElement(o.a.Pushable,{as:"section"},r.a.createElement(m.a,{animation:g,visible:E,sidebarPages:t.site.siteMetadata.sidebar.pages,siteTitle:i||t.site.siteMetadata.title}),r.a.createElement(o.a.Pusher,{as:"main",className:n},A&&r.a.createElement(r.a.Fragment,null,r.a.createElement("label",{class:"SidebarToggle"},r.a.createElement("input",{type:"checkbox",onClick:function(){return e.toggleSidebar()}}),r.a.createElement("div",null,r.a.createElement("div",null,r.a.createElement("span",null),r.a.createElement("span",null)),r.a.createElement("svg",null,r.a.createElement("use",{xlinkHref:"#path"})),r.a.createElement("svg",null,r.a.createElement("use",{xlinkHref:"#path"})))),r.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{display:"none"}},r.a.createElement("symbol",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 44 44",id:"path"},r.a.createElement("path",{d:"M22,22 L2,22 C2,11 11,2 22,2 C33,2 42,11 42,22"})))),r.a.createElement("div",{className:"ui text container"},a))))},data:l})},n}(r.a.Component);t.a=d},251:function(e){e.exports={data:{site:{siteMetadata:{title:"TeamsCode",sidebar:{pages:[{slug:"/getting-started",title:"Test Started",pages:null},{slug:"/guidelines/overview",title:"Guidelines",pages:[{slug:"/guidelines/overview",title:"Overview"},{slug:"/guidelines/design-principles",title:"Design Principles"}]},{slug:"/styles/overview",title:"Styles",pages:[{slug:"/styles/overview",title:"Overview"},{slug:"/styles/design-tokens",title:"Design tokens"},{slug:"/styles/color",title:"Color"},{slug:"/styles/typography",title:"Typography"},{slug:"/styles/iconography",title:"Iconography"}]},{slug:"/components/button",title:"Components",pages:[{slug:"/components/button",title:"Button"},{slug:"/components/container",title:"Container"},{slug:"/components/card",title:"Card"},{slug:"/components/divider",title:"Divider"},{slug:"/components/input",title:"Input"},{slug:"/components/grid",title:"Grid"},{slug:"/components/list",title:"List"}]},{slug:"/support",title:"Support",pages:null}]}}}}}}}]);
  //# sourceMappingURL=component---src-pages-styles-design-tokens-js-beb0940b513b685adefa.js.map