theme-class-generator
Version:
A function which can generate theme style classes from a simple config
140 lines (135 loc) • 5.76 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../index.js"></script>
<style>
.test-block,
.shadow {
float: left;
margin: 5px;
width: 80px;
height: 80px;
}
.divide:after {
content: '';
clear: both;
display: block;
}
.test-block {
border: 1px solid #ccc;
}
.shadow {}
</style>
</head>
<body>
<div class="divide">
<div class="test-block au-theme-background-color--primary-top"></div>
<div class="test-block au-theme-background-color--primary-up"></div>
<div class="test-block au-theme-background-color--primary"></div>
<div class="test-block au-theme-background-color--primary-down"></div>
<div class="test-block au-theme-background-color--primary-bottom"></div>
</div>
<div class="divide">
<div class="test-block au-theme-background-color--info-top"></div>
<div class="test-block au-theme-background-color--info-up"></div>
<div class="test-block au-theme-background-color--info"></div>
<div class="test-block au-theme-background-color--info-down"></div>
<div class="test-block au-theme-background-color--info-bottom"></div>
</div>
<div class="divide">
<div class="test-block au-theme-background-color--danger-top"></div>
<div class="test-block au-theme-background-color--danger-up"></div>
<div class="test-block au-theme-background-color--danger"></div>
<div class="test-block au-theme-background-color--danger-down"></div>
<div class="test-block au-theme-background-color--danger-bottom"></div>
</div>
<div class="divide">
<div class="test-block au-theme-background-color--warning-top"></div>
<div class="test-block au-theme-background-color--warning-up"></div>
<div class="test-block au-theme-background-color--warning"></div>
<div class="test-block au-theme-background-color--warning-down"></div>
<div class="test-block au-theme-background-color--warning-bottom"></div>
</div>
<div class="divide">
<div class="test-block au-theme-background-color--success-top"></div>
<div class="test-block au-theme-background-color--success-up"></div>
<div class="test-block au-theme-background-color--success"></div>
<div class="test-block au-theme-background-color--success-down"></div>
<div class="test-block au-theme-background-color--success-bottom"></div>
</div>
<div class="divide">
<div class="test-block au-theme-background-color--custom-color"></div>
</div>
<div class="divide base">
<div class="test-block au-theme-background-color--base-0"></div>
<div class="test-block au-theme-background-color--base-1"></div>
<div class="test-block au-theme-background-color--base-2"></div>
<div class="test-block au-theme-background-color--base-3"></div>
<div class="test-block au-theme-background-color--base-4"></div>
<div class="test-block au-theme-background-color--base-5"></div>
<div class="test-block au-theme-background-color--base-6"></div>
<div class="test-block au-theme-background-color--base-7"></div>
<div class="test-block au-theme-background-color--base-8"></div>
<div class="test-block au-theme-background-color--base-9"></div>
<div class="test-block au-theme-background-color--base-10"></div>
<div class="test-block au-theme-background-color--base-11"></div>
<div class="test-block au-theme-background-color--base-12"></div>
</div>
<div class="divide">
<div class="test-block shadow au-theme-box-shadow--base"></div>
<div class="test-block shadow au-theme-box-shadow--primary"></div>
<div class="test-block shadow au-theme-box-shadow--info"></div>
<div class="test-block shadow au-theme-box-shadow--danger"></div>
<div class="test-block shadow au-theme-box-shadow--warning"></div>
<div class="test-block shadow au-theme-box-shadow--success"></div>
<div class="test-block shadow au-theme-box-shadow--custom-shadow"></div>
</div>
<div class="divide">
<div class="test-block au-theme-border-radius--small au-theme-background-color--primary"></div>
<div class="test-block au-theme-border-radius--large au-theme-background-color--primary"></div>
<div class="test-block au-theme-border-radius--huge au-theme-background-color--primary"></div>
</div>
<div class="divide">
<textarea placeholder="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet sit praesentium atque aliquam commodi velit placeat, deleniti exercitationem aspernatur pariatur, ab ratione, debitis repellendus iure nostrum nisi dolore dignissimos earum." style="width: 500px; height: 200px;"
class="au-theme-placeholder-color--base-8"></textarea>
</div>
</body>
<script>
let classes = themeClassGenerator({
theme: {
colors: {
// primary: '#376956',
// info: '#495a80',
// danger: '#f17c67',
// warning: '#e9f01d',
// success: '#00ff80'
'primary': '#1c86e2',
'info': '#68217a',
'warning': '#f5ae08',
'danger': '#ea3a46',
'success': '#0cb470',
'custom-color': '#f00'
},
shadows: {
primary: '2px 2px 4px #f00',
'custom-shadow': '3px 3px 6px #00f'
},
radiuses: {
huge: '10px'
}
},
prefix: 'au-theme',
lightnessReverse: false,
colorTopBottom: 5,
baseColorLevel: 12
})
let style = document.createElement('style')
style.innerHTML = classes
document.getElementsByTagName('head')[0].appendChild(style)
// document.getElementById('test').innerHTML = classes
</script>
</html>