"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1165],{3905:function(e,t,l){l.d(t,{Zo:function(){return m},kt:function(){return u}});var o=l(7294);function r(e,t,l){return t in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}function s(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),l.push.apply(l,o)}return l}function a(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?s(Object(l),!0).forEach((function(t){r(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):s(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}function i(e,t){if(null==e)return{};var l,o,r=function(e,t){if(null==e)return{};var l,o,r={},s=Object.keys(e);for(o=0;o<s.length;o++)l=s[o],t.indexOf(l)>=0||(r[l]=e[l]);return r}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(o=0;o<s.length;o++)l=s[o],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}var c=o.createContext({}),n=function(e){var t=o.useContext(c),l=t;return e&&(l="function"==typeof e?e(t):a(a({},t),e)),l},m=function(e){var t=n(e.components);return o.createElement(c.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},p=o.forwardRef((function(e,t){var l=e.components,r=e.mdxType,s=e.originalType,c=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),p=n(l),u=r,y=p["".concat(c,".").concat(u)]||p[u]||d[u]||s;return l?o.createElement(y,a(a({ref:t},m),{},{components:l})):o.createElement(y,a({ref:t},m))}));function u(e,t){var l=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var s=l.length,a=new Array(s);a[0]=p;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:r,a[1]=i;for(var n=2;n<s;n++)a[n]=l[n];return o.createElement.apply(null,a)}return o.createElement.apply(null,l)}p.displayName="MDXCreateElement"},1942:function(e,t,l){l.d(t,{Z:function(){return r}});var o=l(7294);function r(e){var t=e.color,l=e.title,r=e.inline,s=e.style,a=e.className;return o.createElement("div",{className:"docus-color-indicator flex-center-y "+(r?"inline":"")},o.createElement("div",{className:"docus-color"+(a?" "+a:""),style:Object.assign({backgroundColor:t},s)}),o.createElement("code",null,l))}},2695:function(e,t,l){l.d(t,{Z:function(){return i}});var o=l(7462),r=l(3366),s=l(7294),a=["isBad","isGood","children","disableFullscreen","limitWidth"];function i(e){var t=e.isBad,l=e.isGood,i=e.children,c=e.disableFullscreen,n=e.limitWidth,m=(0,r.Z)(e,a),d=(0,s.useState)(!1),p=d[0],u=d[1];return s.createElement("div",{className:"preview-box-wrapper",style:n?{width:n,display:"table",margin:"0 auto"}:{}},!c&&s.createElement("button",{"aria-label":p?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");p?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),u(!p)}},p?s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},s.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},s.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&s.createElement("div",{className:"is-bad-example style-red"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},s.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),l&&s.createElement("div",{className:"is-good-example style-green"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},s.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),s.createElement("iframe",(0,o.Z)({width:"100%",className:"docus-preview-box"+(p?" is-fullscreen":""),srcDoc:i},m)))}},6839:function(e,t,l){l.r(t),l.d(t,{frontMatter:function(){return n},contentTitle:function(){return m},metadata:function(){return d},toc:function(){return p},default:function(){return y}});var o=l(7462),r=l(3366),s=(l(7294),l(3905)),a=l(2695),i=l(1942),c=["components"],n={title:"Color setters",sidebar_position:4},m=void 0,d={unversionedId:"helpers/color-setters",id:"helpers/color-setters",isDocsHomePage:!1,title:"Color setters",description:"Here is the list of practical helper classes to style elements, for example a button, table item, div, etc. What they do is pretty simple: set background, color, and border color based on the color palette.",source:"@site/docs/helpers/color-setters.mdx",sourceDirName:"helpers",slug:"/helpers/color-setters",permalink:"/docs/helpers/color-setters",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/helpers/color-setters.mdx",tags:[],version:"current",sidebarPosition:4,frontMatter:{title:"Color setters",sidebar_position:4},sidebar:"tutorialSidebar",previous:{title:"Opacity setters",permalink:"/docs/helpers/opacity-setters"},next:{title:"Size setters",permalink:"/docs/helpers/size-setters"}},p=[{value:"Main colors",id:"main-colors",children:[],level:2},{value:"Palette colors",id:"palette-colors",children:[],level:2},{value:"State colors",id:"state-colors",children:[],level:2},{value:"Text colors",id:"text-colors",children:[],level:2}],u={toc:p};function y(e){var t=e.components,l=(0,r.Z)(e,c);return(0,s.kt)("wrapper",(0,o.Z)({},u,l,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"Here is the list of practical helper classes to style elements, for example a button, table item, div, etc. What they do is pretty simple: set background, color, and border color based on the color palette."),(0,s.kt)(a.Z,{height:"165px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Colors helper classes</title> <style> .my-box{ width: 200px; height: 100px; margin: 0.5em; border: 0.25em solid; border-radius: 1em; } </style> </head> <body class="flex-center"> <div class="my-box flex-center style-blue"> <p class="text-centered">Hello Everybody!</p> </div> <div class="my-box flex-center style-red"> <p class="text-centered">Hello Everybody!</p> </div> <div class="my-box flex-center style-green"> <p class="text-centered">Hello Everybody!</p> </div> </body>\n</html>',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{1,5,9} title="index.html"',"{1,5,9}":!0,title:'"index.html"'},'<div class="my-box flex-center style-blue">\n  <p class="text-centered">Hello Everybody!</p>\n</div>\n\n<div class="my-box flex-center style-red">\n  <p class="text-centered">Hello Everybody!</p>\n</div>\n\n<div class="my-box flex-center style-green">\n  <p class="text-centered">Hello Everybody!</p>\n</div>\n')),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".my-box {\n  width: 200px;\n  height: 100px;\n  margin: 0.5em;\n  border: 0.25em solid;\n  border-radius: 1em;\n}\n")),(0,s.kt)("h2",{id:"main-colors"},"Main colors"),(0,s.kt)(i.Z,{className:"style-accent",title:".style-accent",inline:!0,mdxType:"ColorIndicator"})," UI primary color.",(0,s.kt)("br",null),(0,s.kt)(i.Z,{className:"style-accent-light",title:".style-accent-light",inline:!0,mdxType:"ColorIndicator"})," UI primary color but lighter.",(0,s.kt)("h2",{id:"palette-colors"},"Palette colors"),(0,s.kt)("p",null,"These colors can be declared from the ",(0,s.kt)("inlineCode",{parentName:"p"},"_config.scss")," file or reset with CSS,\nfor more information ",(0,s.kt)("a",{parentName:"p",href:"#"},"read this page"),"."),(0,s.kt)(i.Z,{className:"style-blue-light",title:".style-blue-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-blue",title:".style-blue",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-green-light",title:".style-green-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-green",title:".style-green",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-yellow-light",title:".style-yellow-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-yellow",title:".style-yellow",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-orange-light",title:".style-orange-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-orange",title:".style-orange",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-red-light",title:".style-red-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-red",title:".style-red",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-pink-light",title:".style-pink-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-pink",title:".style-pink",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-purple-light",title:".style-purple-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-purple",title:".style-purple",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{style:{background:"#fff",borderColor:"#f1f4f7"},title:".style-light-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{style:{background:"#f1f4f7",borderColor:"#ced9e3"},title:".style-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-dark-light",title:".style-dark-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-dark",title:".style-dark",mdxType:"ColorIndicator"}),(0,s.kt)("h2",{id:"state-colors"},"State colors"),(0,s.kt)("p",null,"Colors are an important part of expressing feelings in the process of designing a UI,\nthis helper classes are specifically here to help you achieve it."),(0,s.kt)(i.Z,{className:"style-success-light",title:".style-success-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-success",title:".style-success",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-info-light",title:".style-info-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-info",title:".style-info",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-warning-light",title:".style-warning-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-warning",title:".style-warning",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-danger-light",title:".style-danger-light",mdxType:"ColorIndicator"}),(0,s.kt)(i.Z,{className:"style-danger",title:".style-danger",mdxType:"ColorIndicator"}),(0,s.kt)("h2",{id:"text-colors"},"Text colors"),(0,s.kt)("p",null,"There are also some useful classes for changing texts color."),(0,s.kt)("p",{className:"color-accent-light"},(0,s.kt)("code",null,".color-accent-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-accent"},(0,s.kt)("code",null,".color-accent"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("br",null),(0,s.kt)("p",{className:"color-blue-light"},(0,s.kt)("code",null,".color-blue-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-blue"},(0,s.kt)("code",null,".color-blue"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-green-light"},(0,s.kt)("code",null,".color-green-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-green"},(0,s.kt)("code",null,".color-green"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-yellow-light"},(0,s.kt)("code",null,".color-yellow-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-yellow"},(0,s.kt)("code",null,".color-yellow"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-orange-light"},(0,s.kt)("code",null,".color-orange-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-orange"},(0,s.kt)("code",null,".color-orange"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-red-light"},(0,s.kt)("code",null,".color-red-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-red"},(0,s.kt)("code",null,".color-red"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-pink-light"},(0,s.kt)("code",null,".color-pink-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-pink"},(0,s.kt)("code",null,".color-pink"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-purple-light"},(0,s.kt)("code",null,".color-purple-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-purple"},(0,s.kt)("code",null,".color-purple"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("br",null),(0,s.kt)("p",{className:"color-success-light"},(0,s.kt)("code",null,".color-success-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-success"},(0,s.kt)("code",null,".color-success"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-info-light"},(0,s.kt)("code",null,".color-info-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-info"},(0,s.kt)("code",null,".color-info"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-warning-light"},(0,s.kt)("code",null,".color-warning-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-warning"},(0,s.kt)("code",null,".color-warning"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-danger-light"},(0,s.kt)("code",null,".color-danger-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-danger"},(0,s.kt)("code",null,".color-danger"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",null,(0,s.kt)("code",{style:{background:"#292b36",color:"#fff"}},".color-light-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-light"},(0,s.kt)("code",{style:{background:"#292b36",color:"#f1f4f7"}},".color-light"),"\xa0 Lorem ipsum dolor sit amet."),(0,s.kt)("p",{className:"color-dark-light"},(0,s.kt)("code",{style:{background:"#ced9e3"}},".color-dark-light"),"\xa0 Light lorem ipsum dolor sit amet."),(0,s.kt)("p",null,(0,s.kt)("code",{style:{background:"#ced9e3",color:"#1e2a35"}},".color-dark"),"\xa0 Lorem ipsum dolor sit amet."))}y.isMDXComponent=!0}}]);