text: import{n as d,P as _}from"./index.be76338c.js";import"./vendor.4f8da9ec.js";var g=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("main",[a("title-link",{staticClass:"mt4",attrs:{h1:""}},[t._v("Colors")]),t._m(0),t._m(1),a("p",[t._v(`This way, it is possible to mix a background color with a different
  text color of your choice.
  `)]),a("title-link",{attrs:{h2:""}},[t._v("Status colors")]),t._m(2),a("alert",{staticClass:"mb12",attrs:{warning:""}},[t._v(`The four status colors are considered dark and will therefore have a white text by default when used as a background color.
  You can override this via CSS.
  `)]),a("h3",[t._v("Status colors shades")]),t._m(3),a("title-link",{attrs:{h2:"",slug:"primary-secondary-and-your-own-colors-and-shades"}},[a("span",{staticClass:"code"},[t._v("primary")]),t._v(", "),a("span",{staticClass:"code"},[t._v("secondary")]),t._v(" and your own colors & shades")]),t._m(4),a("w-flex",{staticClass:"text-center",attrs:{wrap:"",gap:4}},[a("div",{staticClass:"color primary-light3--bg title3 grow basis-zero py3 white body"},[t._v("primary-light3")]),a("div",{staticClass:"color primary-light2--bg title3 grow basis-zero py3 white body"},[t._v("primary-light2")]),a("div",{staticClass:"color primary-light1--bg title3 grow basis-zero py3 white body"},[t._v("primary-light1")]),a("div",{staticClass:"color primary--bg title3 grow basis-zero py3 white"},[t._v("primary")]),a("div",{staticClass:"color primary-dark1--bg title3 grow basis-zero py3 white body"},[t._v("primary-dark1")]),a("div",{staticClass:"color primary-dark2--bg title3 grow basis-zero py3 white body"},[t._v("primary-dark2")]),a("div",{staticClass:"color primary-dark3--bg title3 grow basis-zero py3 white body"},[t._v("primary-dark3")])]),a("alert",{attrs:{warning:""}},[t._v(`The primary color is considered dark by default, and will render,
  as well as its 3 darker shades, with a white text when used as a background color.
  `)]),a("p",{staticClass:"mt6 title3"},[t._v("To start defining your own colors add them to the WaveUI options:")]),a("ssh-pre",{attrs:{language:"js"}},[t._v(`const waveui = new WaveUI({
    colors: {
      primary: '#9ac332',
      secondary: '#5d9a26'
    }
  })
  `)]),a("alert",{attrs:{tip:""}},[t._v("If you don't need it, you can add "),a("code",[t._v("disableColorShades: true")]),t._v(` to the Wave UI options to disable
  the color shades computing of the status colors and your custom colors.
  `)]),a("title-link",{staticClass:"mt12 mb4 w-flex align-center",attrs:{h2:"",slug:"color-palette"}},[t._v("Color Palette"),a("w-button",{staticClass:"ml6",attrs:{"bg-color":"primary",sm:"",dark:""},on:{click:function(r){r.preventDefault(),t.horizontal=!t.horizontal}}},[t._v(t._s(t.horizontal?"Vertical":"Horizontal")+" display")])],1),a("p",[t._v(`This built-in color palette will complete your collection of available colors for fast and easy designs.
  `)]),a("div",{staticClass:"text-center",class:""+(t.horizontal?"horizontal":"vertical")},[a("div",{staticClass:"w-flex wrap ma-2 basis-zero"},[t._l(t.colors,function(r,c){var n=r.color,l=r.label,v=r.shades;return a("div",{key:c,staticClass:"color-palette ma2"},[t._l(v,function(e,o){return[o===5?a("div",{staticClass:"color color--top",class:l+"--bg"},[a("span",[t._v(t._s(l))]),a("small",[t._v(t._s(n))])]):t._e(),a("div",{key:o,staticClass:"color color--shade",class:[e.label+"--bg",o>=5?"color--darker":""]},[a("span",[t._v(t._s(e.label))]),a("small",[t._v(t._s(e.color))])])]})],2)}),a("div",{staticClass:"color-palette ma2"},[a("div",{staticClass:"w-flex ma-2",class:{column:!t.horizontal}},[t._m(5),t._m(6),t._m(7),t._m(8)])])],2)]),a("title-link",{attrs:{h2:""}},[t._v("Your own CSS color classes")]),t._m(9),a("ssh-pre",{attrs:{language:"css"}},[t._v(`.mint-green {color: #acebd7;}
  .navy-blue--bg {background-color: #345276;}
  `)]),a("p",{staticClass:"mt6"},[t._v("...and use it on a component like this:")]),a("w-flex",{attrs:{gap:"6"}},[a("ssh-pre",{directives:[{name:"show",rawName:"v-show",value:t.$store.state.usePug,expression:"$store.state.usePug"}],staticClass:"ml3",attrs:{language:"pug",label:"Pug"}},[t._v('w-tag(color="mint-green" bg-color="navy-blue" lg)')]),a("ssh-pre",{directives:[{name:"show",rawName:"v-show",value:!t.$store.state.usePug,expression:"!$store.state.usePug"}],staticClass:"ml3",attrs:{language:"html-vue"}},[t._v('<w-tag color="mint-green" bg-color="navy-blue" lg>tag</w-tag>')]),a("w-tag",{staticClass:"align-self-end",attrs:{color:"mint-green","bg-color":"navy-blue",lg:""}},[t._v("Tag")])],1)],1)},h=[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v(`Wave UI colors work in a very simple way: for instance the class
  `),a("code",[t._v("pink")]),t._v(` (or any color listed bellow) can be applied to any
  element's text, and the class `),a("code",[t._v("pink--bg")]),t._v(` can be applied to
  any element's background.
  `)])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("All the components that accept colors, will accept the "),a("code",[t._v("color")]),t._v(`
  prop for the text color, and `),a("code",[t._v("bg-color")]),t._v(` for the background when applicable.
  `)])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"w-flex wrap ma-2 text-center basis-zero"},[a("div",{staticClass:"color success--bg title3 grow py3 ma2"},[t._v("success")]),a("div",{staticClass:"color error--bg title3 grow py3 ma2"},[t._v("error")]),a("div",{staticClass:"color warning--bg title3 grow py3 ma2"},[t._v("warning")]),a("div",{staticClass:"color info--bg title3 grow py3 ma2"},[t._v("info")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"w-flex wrap mb12 ma-2 text-center basis-zero"},[a("div",{staticClass:"w-flex wrap"},[a("div",{staticClass:"color success-light3--bg title3 py3 ma2 body xs12"},[t._v("success-light3")]),a("div",{staticClass:"color success-light2--bg title3 py3 ma2 body xs12"},[t._v("success-light2")]),a("div",{staticClass:"color success-light1--bg title3 py3 ma2 body xs12"},[t._v("success-light1")]),a("div",{staticClass:"color success-dark1--bg title3 py3 ma2 white body xs12"},[t._v("success-dark1")]),a("div",{staticClass:"color success-dark2--bg title3 py3 ma2 white body xs12"},[t._v("success-dark2")]),a("div",{staticClass:"color success-dark3--bg title3 py3 ma2 white body xs12"},[t._v("success-dark3")])]),a("div",{staticClass:"w-flex wrap"},[a("div",{staticClass:"color error-light3--bg title3 py3 ma2 body xs12"},[t._v("error-light3")]),a("div",{staticClass:"color error-light2--bg title3 py3 ma2 body xs12"},[t._v("error-light2")]),a("div",{staticClass:"color error-light1--bg title3 py3 ma2 body xs12"},[t._v("error-light1")]),a("div",{staticClass:"color error-dark1--bg title3 py3 ma2 white body xs12"},[t._v("error-dark1")]),a("div",{staticClass:"color error-dark2--bg title3 py3 ma2 white body xs12"},[t._v("error-dark2")]),a("div",{staticClass:"color error-dark3--bg title3 py3 ma2 white body xs12"},[t._v("error-dark3")])]),a("div",{staticClass:"w-flex wrap"},[a("div",{staticClass:"color warning-light3--bg title3 py3 ma2 body xs12"},[t._v("warning-light3")]),a("div",{staticClass:"color warning-light2--bg title3 py3 ma2 body xs12"},[t._v("warning-light2")]),a("div",{staticClass:"color warning-light1--bg title3 py3 ma2 body xs12"},[t._v("warning-light1")]),a("div",{staticClass:"color warning-dark1--bg title3 py3 ma2 white body xs12"},[t._v("warning-dark1")]),a("div",{staticClass:"color warning-dark2--bg title3 py3 ma2 white body xs12"},[t._v("warning-dark2")]),a("div",{staticClass:"color warning-dark3--bg title3 py3 ma2 white body xs12"},[t._v("warning-dark3")])]),a("div",{staticClass:"w-flex wrap"},[a("div",{staticClass:"color info-light3--bg title3 py3 ma2 body xs12"},[t._v("info-light3")]),a("div",{staticClass:"color info-light2--bg title3 py3 ma2 body xs12"},[t._v("info-light2")]),a("div",{staticClass:"color info-light1--bg title3 py3 ma2 body xs12"},[t._v("info-light1")]),a("div",{staticClass:"color info-dark1--bg title3 py3 ma2 white body xs12"},[t._v("info-dark1")]),a("div",{staticClass:"color info-dark2--bg title3 py3 ma2 white body xs12"},[t._v("info-dark2")]),a("div",{staticClass:"color info-dark3--bg title3 py3 ma2 white body xs12"},[t._v("info-dark3")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v(`In addition to the built-in status colors and color palette bellow, you can define a set
  of custom colors.`),a("br"),t._v(`
  The primary color, and whichever color you add, will also be computed to 6 different shades:
  3 lighter ones and 3 darker ones.`),a("br"),t._v(`
  More shades would most likely be redundant with the color palette.
  `)])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"color color--top ma2 black--bg"},[a("span",[t._v("black")]),a("small",[t._v("#000")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"color color--top ma2 white--bg black"},[a("span",[t._v("white")]),a("small",[t._v("#fff")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"color color--top ma2 transparent--bg black"},[a("span",[t._v("transparent")]),a("small",[t._v("transparent")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"color color--top ma2 inherit--bg black"},[a("span",[t._v("inherit")]),a("small",[t._v("inherit")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("All the presented colors above are here to make you go faster when you need a color."),a("br"),t._v(`
  But you are completely free to define CSS classes in your CSS to associate a color to a class.`),a("br"),t._v(`
  For instance, you can define:`)])}];const m={data:()=>({colors:_,horizontal:!1})},i={};var p=d(m,g,h,!1,b,null,null,null);function b(t){for(let s in i)this[s]=i[s]}var w=function(){return p.exports}();export{w as default};
  