@allakando/allakando-web-ui
Version:
Allakando's web component library
240 lines (239 loc) • 14.3 kB
JavaScript
import"./DialogManager-abca015e.js";import{i as l}from"./StyleInjection-7d750a8d.js";const r=`# Color Palette\r
\r
Allakando's design system colors can be injected directly into your application by importing colors.css\r
\r
The colors will come into effects with variables as mentioned below without secifying the color values in hard-coded hash, rbg, etc. values\r
\r
- --ako-primary-color-50 to --ako-primary-color-1000 (it represent the primary application colors ranging from 50 to 1000. Based on application type this will change from green to pink.)\r
- --ako-warning-color-50 to --ako-warning-color-1000 \r
- --ako-error-color-50 to --ako-error-color-1000\r
- --ako-neutral-color-50 to --ako-neutral-color-1100\r
- --ako-with-color-under-600 (generally specifying the off-white color)\r
- --ako-with-color-over-500 (generally specifying the off-white color) `,n={title:"Style Injection/Color Palette",component:"Colors",tags:["autodocs"],parameters:{docs:{description:{component:r}}}},o=()=>(window.AllakandoWebUI={injectStyle:l},`
<script>
AllakandoWebUI.injectStyle({
colors: true
})
<\/script>
<div class="container">
<title>Color Palette</title>
<style>
* {
font-family: trade-gothic-next-soft-round, sans-serif;
font-size: 0.8rem;
font-weight: bold;
color: white;
text-align: center;
text-transform: uppercase;
}
table {
border-collapse: collapse;
margin: 20px;
}
td {
width: 90px;
height: 50px;
}
tr {
border-bottom: 20px solid white;
}
</style>
<table>
<tr>
<td style="background-color: #81bb10;">#81bb10</td>
<td style="background-color: #96c933;">#96c933</td>
<td style="background-color: #a0ce47;">#a0ce47</td>
<td style="background-color: #abd45c;">#abd45c</td>
<td style="background-color: #b6d970;">#b6d970</td>
<td style="background-color: #c0df85;color: black">#c0df85</td>
<td style="background-color: #cbe499;color: black">#cbe499</td>
<td style="background-color: #d5e9ad;color: black">#d5e9ad</td>
<td style="background-color: #dfefc2;color: black">#dfefc2</td>
<td style="background-color: #e4f4d6;color: black">#e4f4d6</td>
<td style="background-color: #f4faeb;color: black">#f4faeb</td>
</tr>
<tr>
<td style="background-color: #81bb10;">#81bb10</td>
<td style="background-color: #96c933;">#96c933</td>
<td style="background-color: #a0ce47;">#a0ce47</td>
<td style="background-color: #abd45c;">#abd45c</td>
<td style="background-color: #b6d970;">#b6d970</td>
<td style="background-color: #c0df85;color: black">#c0df85</td>
<td style="background-color: #cbe499;color: black">#cbe499</td>
<td style="background-color: #d5e9ad;color: black">#d5e9ad</td>
<td style="background-color: #dfefc2;color: black">#dfefc2</td>
<td style="background-color: #e4f4d6;color: black">#e4f4d6</td>
<td style="background-color: #f4faeb;color: black">#f4faeb</td>
</tr>
<tr>
<td style="background-color: #EAB300;">#EAB300</td>
<td style="background-color: #f5bb00;">#f5bb00</td>
<td style="background-color: #f6c21a;">#f6c21a</td>
<td style="background-color: #f7c933;">#f7c933</td>
<td style="background-color: #f8cf4d;">#f8cf4d</td>
<td style="background-color: #f9d666;color: black">#f9d666</td>
<td style="background-color: #fadd80;color: black">#fadd80</td>
<td style="background-color: #fbe499;color: black">#fbe499</td>
<td style="background-color: #fcebb2;color: black">#fcebb2</td>
<td style="background-color: #fdf1cc;color: black">#fdf1cc</td>
<td style="background-color: #fef8e5;color: black">#fef8e5</td>
</tr>
<tr>
<td style="background-color: #E62900;">#E62900</td>
<td style="background-color: #f52c00;">#f52c00</td>
<td style="background-color: #f6411a;">#f6411a</td>
<td style="background-color: #f75633;">#f75633</td>
<td style="background-color: #f86b4d;">#f86b4d</td>
<td style="background-color: #f98066;color: black">#f98066</td>
<td style="background-color: #fa9580;color: black">#fa9580</td>
<td style="background-color: #fbab99;color: black">#fbab99</td>
<td style="background-color: #fcc0b2;color: black">#fcc0b2</td>
<td style="background-color: #fdd5cc;color: black">#fdd5cc</td>
<td style="background-color: #feeae5;color: black">#feeae5</td>
</tr>
<tr>
<td style="background-color: #3A3A3A;">#3A3A3A</td>
<td style="background-color: #535353;">#535353</td>
<td style="background-color: #686868;">#686868</td>
<td style="background-color: #777777;">#777777</td>
<td style="background-color: #868686;">#868686</td>
<td style="background-color: #959595;">#959595</td>
<td style="background-color: #a4a4a4;color: black">#a4a4a4</td>
<td style="background-color: #b3b3b3;color: black">#b3b3b3</td>
<td style="background-color: #c3c3c3;color: black">#c3c3c3</td>
<td style="background-color: #d2d2d2;color: black">#d2d2d2</td>
<td style="background-color: #e1e1e1;color: black">#e1e1e1</td>
<td style="background-color: #f6f6f6;color: black">#f6f6f6</td>
</tr>
<tr>
<td style="background-color: #E20359;">#E20359</td>
<td style="background-color: #ff86ad;">#ff86ad</td>
<td style="background-color: #ff92b5;">#ff92b5</td>
<td style="background-color: #ff9ebd;">#ff9ebd</td>
<td style="background-color: #ffaac6;">#ffaac6</td>
<td style="background-color: #ffb6ce;color: black">#ffb6ce</td>
<td style="background-color: #ffc3d6;color: black">#ffc3d6</td>
<td style="background-color: #ffcfde;color: black">#ffcfde</td>
<td style="background-color: #ffdbe6;color: black">#ffdbe6</td>
<td style="background-color: #ffe7ef;color: black">#ffe7ef</td>
<td style="background-color: #fff3f7;color: black">#fff3f7</td>
</tr>
</table>
</div>
`);var c,t,d;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:`() => {
window.AllakandoWebUI = {
injectStyle
};
return \`
<script>
AllakandoWebUI.injectStyle({
colors: true
})
<\/script>
<div class="container">
<title>Color Palette</title>
<style>
* {
font-family: trade-gothic-next-soft-round, sans-serif;
font-size: 0.8rem;
font-weight: bold;
color: white;
text-align: center;
text-transform: uppercase;
}
table {
border-collapse: collapse;
margin: 20px;
}
td {
width: 90px;
height: 50px;
}
tr {
border-bottom: 20px solid white;
}
</style>
<table>
<tr>
<td style="background-color: #81bb10;">#81bb10</td>
<td style="background-color: #96c933;">#96c933</td>
<td style="background-color: #a0ce47;">#a0ce47</td>
<td style="background-color: #abd45c;">#abd45c</td>
<td style="background-color: #b6d970;">#b6d970</td>
<td style="background-color: #c0df85;color: black">#c0df85</td>
<td style="background-color: #cbe499;color: black">#cbe499</td>
<td style="background-color: #d5e9ad;color: black">#d5e9ad</td>
<td style="background-color: #dfefc2;color: black">#dfefc2</td>
<td style="background-color: #e4f4d6;color: black">#e4f4d6</td>
<td style="background-color: #f4faeb;color: black">#f4faeb</td>
</tr>
<tr>
<td style="background-color: #81bb10;">#81bb10</td>
<td style="background-color: #96c933;">#96c933</td>
<td style="background-color: #a0ce47;">#a0ce47</td>
<td style="background-color: #abd45c;">#abd45c</td>
<td style="background-color: #b6d970;">#b6d970</td>
<td style="background-color: #c0df85;color: black">#c0df85</td>
<td style="background-color: #cbe499;color: black">#cbe499</td>
<td style="background-color: #d5e9ad;color: black">#d5e9ad</td>
<td style="background-color: #dfefc2;color: black">#dfefc2</td>
<td style="background-color: #e4f4d6;color: black">#e4f4d6</td>
<td style="background-color: #f4faeb;color: black">#f4faeb</td>
</tr>
<tr>
<td style="background-color: #EAB300;">#EAB300</td>
<td style="background-color: #f5bb00;">#f5bb00</td>
<td style="background-color: #f6c21a;">#f6c21a</td>
<td style="background-color: #f7c933;">#f7c933</td>
<td style="background-color: #f8cf4d;">#f8cf4d</td>
<td style="background-color: #f9d666;color: black">#f9d666</td>
<td style="background-color: #fadd80;color: black">#fadd80</td>
<td style="background-color: #fbe499;color: black">#fbe499</td>
<td style="background-color: #fcebb2;color: black">#fcebb2</td>
<td style="background-color: #fdf1cc;color: black">#fdf1cc</td>
<td style="background-color: #fef8e5;color: black">#fef8e5</td>
</tr>
<tr>
<td style="background-color: #E62900;">#E62900</td>
<td style="background-color: #f52c00;">#f52c00</td>
<td style="background-color: #f6411a;">#f6411a</td>
<td style="background-color: #f75633;">#f75633</td>
<td style="background-color: #f86b4d;">#f86b4d</td>
<td style="background-color: #f98066;color: black">#f98066</td>
<td style="background-color: #fa9580;color: black">#fa9580</td>
<td style="background-color: #fbab99;color: black">#fbab99</td>
<td style="background-color: #fcc0b2;color: black">#fcc0b2</td>
<td style="background-color: #fdd5cc;color: black">#fdd5cc</td>
<td style="background-color: #feeae5;color: black">#feeae5</td>
</tr>
<tr>
<td style="background-color: #3A3A3A;">#3A3A3A</td>
<td style="background-color: #535353;">#535353</td>
<td style="background-color: #686868;">#686868</td>
<td style="background-color: #777777;">#777777</td>
<td style="background-color: #868686;">#868686</td>
<td style="background-color: #959595;">#959595</td>
<td style="background-color: #a4a4a4;color: black">#a4a4a4</td>
<td style="background-color: #b3b3b3;color: black">#b3b3b3</td>
<td style="background-color: #c3c3c3;color: black">#c3c3c3</td>
<td style="background-color: #d2d2d2;color: black">#d2d2d2</td>
<td style="background-color: #e1e1e1;color: black">#e1e1e1</td>
<td style="background-color: #f6f6f6;color: black">#f6f6f6</td>
</tr>
<tr>
<td style="background-color: #E20359;">#E20359</td>
<td style="background-color: #ff86ad;">#ff86ad</td>
<td style="background-color: #ff92b5;">#ff92b5</td>
<td style="background-color: #ff9ebd;">#ff9ebd</td>
<td style="background-color: #ffaac6;">#ffaac6</td>
<td style="background-color: #ffb6ce;color: black">#ffb6ce</td>
<td style="background-color: #ffc3d6;color: black">#ffc3d6</td>
<td style="background-color: #ffcfde;color: black">#ffcfde</td>
<td style="background-color: #ffdbe6;color: black">#ffdbe6</td>
<td style="background-color: #ffe7ef;color: black">#ffe7ef</td>
<td style="background-color: #fff3f7;color: black">#fff3f7</td>
</tr>
</table>
</div>
\`;
}`,...(d=(t=o.parameters)==null?void 0:t.docs)==null?void 0:d.source}}};const b=["Template"];export{o as Template,b as __namedExportsOrder,n as default};