Skip to content

Commit 1cd0063

Browse files
zombieFoxzombieFox
committed
[refactor] update style guide
1 parent cfd1874 commit 1cd0063

File tree

1 file changed

+121
-59
lines changed

1 file changed

+121
-59
lines changed

‎src/style-guide.html‎

Lines changed: 121 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<linkrel="stylesheet" href="css/background.css">
3535
<linkrel="stylesheet" href="css/group.css">
3636
<linkrel="stylesheet" href="css/link.css">
37+
<linkrel="stylesheet" href="css/theme.css">
3738
<linkrel="stylesheet" href="css/auto-suggest.css">
3839
<linkrel="stylesheet" href="css/fontawesome.css">
3940
<!-- end-css-block -->
@@ -49,22 +50,28 @@
4950
<buttonclass="button mb-0 style-guide-control theme-light" tabindex="1">Light</button>
5051
</div>
5152
<divclass="input-wrap">
52-
<labelfor="style-guide-control-theme-color">Accent Colour</label>
53-
<inputid="style-guide-control-theme-color" class="style-guide-control theme-color" class="form-group-item-half mb-0" type="color" value="#fa8200" tabindex="1">
53+
<labelfor="style-guide-control-theme-color" class="style-guide-control">Theme Colour</label>
54+
<inputid="style-guide-control-theme-color" class="style-guide-control theme-color" class="form-group-item-half mb-0" type="color" value="#818aa0" tabindex="1">
55+
</div>
56+
<divclass="input-wrap">
57+
<labelfor="style-guide-control-theme-accent" class="style-guide-control">Accent Colour</label>
58+
<inputid="style-guide-control-theme-accent" class="style-guide-control theme-accent" class="form-group-item-half mb-0" type="color" value="#fa8200" tabindex="1">
5459
</div>
5560
<divclass="input-wrap">
5661
<labelfor="radius" class="style-guide-control">Radius</label>
5762
<inputid="radius" class="style-guide-control radius" type="range" min="0" max="600" value="0" step="1" tabindex="1">
5863
</div>
5964
<hr>
60-
<divclass="button-wrap form-inline">
61-
<buttonclass="button button-small mb-0" tabindex="1">Button Small</button>
62-
</div>
63-
<divclass="button-wrap form-inline">
64-
<buttonclass="button mb-0" tabindex="1">Button Medium</button>
65-
</div>
66-
<divclass="button-wrap form-inline">
67-
<buttonclass="button button-large mb-0" tabindex="1">Button Large</button>
65+
<divclass="form-inline">
66+
<divclass="button-wrap">
67+
<buttonclass="button button-small mb-0" tabindex="1">Button Small</button>
68+
</div>
69+
<divclass="button-wrap">
70+
<buttonclass="button mb-0" tabindex="1">Button Medium</button>
71+
</div>
72+
<divclass="button-wrap">
73+
<buttonclass="button button-large mb-0" tabindex="1">Button Large</button>
74+
</div>
6875
</div>
6976
<hr>
7077
<divclass="input-wrap input-button">
@@ -103,57 +110,63 @@
103110
<labelfor="style-guide-radio-6"><spanclass="label-icon"></span> Hidden Radio Button 3</label>
104111
</div>
105112
</div>
106-
<divclass="input-wrap input-button input-hide form-inline">
107-
<inputid="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
108-
<labelfor="style-guide-input-color-1">Hidden Input Colour Button</label>
109-
</div>
110-
<divclass="input-wrap input-button input-color-dot form-inline">
111-
<inputid="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
112-
<labelfor="style-guide-input-color-2">Input Colour Button</label>
113-
</div>
114-
<divclass="input-wrap input-button input-color-dot input-color-dot-accent form-inline">
115-
<inputid="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
116-
<labelfor="style-guide-input-color-3">Input Colour Accent Button</label>
117-
</div>
118-
<divclass="button-wrap form-inline">
119-
<divclass="form-dropdown form-dropdown-inline">
120-
<buttonclass="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
121-
<spanclass="button-text">Button Dropdown</span>
122-
</button>
123-
<ulclass="list-unstyled form-dropdown-menu">
124-
<li>
125-
<buttonclass="button button-block text-left form-dropdown-menu-item" tabindex="1"><spanclass="button-text">Option 1</span></button>
126-
</li>
127-
<li>
128-
<buttonclass="button button-block text-left form-dropdown-menu-item" tabindex="1"><spanclass="button-text">Option 2</span></button>
129-
</li>
130-
</ul>
113+
<divclass="form-inline">
114+
<divclass="input-wrap input-button input-hide">
115+
<inputid="style-guide-input-color-1" type="color" tabindex="1" value="#fa8200">
116+
<labelfor="style-guide-input-color-1">Hidden Input Colour Button</label>
117+
</div>
118+
<divclass="input-wrap input-button input-color-dot">
119+
<inputid="style-guide-input-color-2" type="color" tabindex="1" value="#fa8200">
120+
<labelfor="style-guide-input-color-2">Input Colour Button</label>
121+
</div>
122+
<divclass="input-wrap input-button input-color-dot input-color-dot-accent">
123+
<inputid="style-guide-input-color-3" type="color" tabindex="1" value="#fa8200">
124+
<labelfor="style-guide-input-color-3">Input Colour Accent Button</label>
125+
</div>
126+
<divclass="button-wrap">
127+
<divclass="form-dropdown form-dropdown-inline">
128+
<buttonclass="style-guide-form-dropdown form-dropdown-toggle button mb-0" tabindex="1">
129+
<spanclass="button-text">Button Dropdown</span>
130+
</button>
131+
<ulclass="list-unstyled form-dropdown-menu">
132+
<li>
133+
<buttonclass="button button-block text-left form-dropdown-menu-item" tabindex="1"><spanclass="button-text">Option 1</span></button>
134+
</li>
135+
<li>
136+
<buttonclass="button button-block text-left form-dropdown-menu-item" tabindex="1"><spanclass="button-text">Option 2</span></button>
137+
</li>
138+
</ul>
139+
</div>
131140
</div>
132141
</div>
133142
<hr>
134-
<divclass="input-wrap">
135-
<inputid="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
136-
<labelfor="style-guide-checkbox-1"><spanclass="label-icon"></span> Checkbox 1</label>
137-
</div>
138-
<divclass="input-wrap">
139-
<inputid="style-guide-checkbox-2" type="checkbox" tabindex="1">
140-
<labelfor="style-guide-checkbox-2"><spanclass="label-icon"></span> Checkbox 2</label>
141-
</div>
142-
<divclass="input-wrap">
143-
<inputid="style-guide-checkbox-3" type="checkbox" tabindex="1">
144-
<labelfor="style-guide-checkbox-3"><spanclass="label-icon"></span> Checkbox 3</label>
145-
</div>
146-
<divclass="input-wrap">
147-
<inputid="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
148-
<labelfor="style-guide-radio-7"><spanclass="label-icon"></span> Radio 1</label>
149-
</div>
150-
<divclass="input-wrap">
151-
<inputid="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
152-
<labelfor="style-guide-radio-8"><spanclass="label-icon"></span> Radio 2</label>
143+
<divclass="form-inline">
144+
<divclass="input-wrap">
145+
<inputid="style-guide-checkbox-1" type="checkbox" tabindex="1" checked>
146+
<labelfor="style-guide-checkbox-1"><spanclass="label-icon"></span> Checkbox 1</label>
147+
</div>
148+
<divclass="input-wrap">
149+
<inputid="style-guide-checkbox-2" type="checkbox" tabindex="1">
150+
<labelfor="style-guide-checkbox-2"><spanclass="label-icon"></span> Checkbox 2</label>
151+
</div>
152+
<divclass="input-wrap">
153+
<inputid="style-guide-checkbox-3" type="checkbox" tabindex="1">
154+
<labelfor="style-guide-checkbox-3"><spanclass="label-icon"></span> Checkbox 3</label>
155+
</div>
153156
</div>
154-
<divclass="input-wrap">
155-
<inputid="style-guide-radio-9" type="radio" name="style-guide-radio-3" tabindex="1">
156-
<labelfor="style-guide-radio-9"><spanclass="label-icon"></span> Radio 3</label>
157+
<divclass="form-inline">
158+
<divclass="input-wrap">
159+
<inputid="style-guide-radio-7" type="radio" name="style-guide-radio-3" tabindex="1" checked>
160+
<labelfor="style-guide-radio-7"><spanclass="label-icon"></span> Radio 1</label>
161+
</div>
162+
<divclass="input-wrap">
163+
<inputid="style-guide-radio-8" type="radio" name="style-guide-radio-3" tabindex="1">
164+
<labelfor="style-guide-radio-8"><spanclass="label-icon"></span> Radio 2</label>
165+
</div>
166+
<divclass="input-wrap">
167+
<inputid="style-guide-radio-9" type="radio" name="style-guide-radio-3" tabindex="1">
168+
<labelfor="style-guide-radio-9"><spanclass="label-icon"></span> Radio 3</label>
169+
</div>
157170
</div>
158171
<divclass="form-grid-wrap">
159172
<divclass="form-grid form-grid-3x3">
@@ -305,6 +318,51 @@
305318
helper.addClass(helper.e("html"),"is-theme-style-light");
306319
helper.removeClass(helper.e("html"),"is-theme-style-dark");
307320
},
321+
render: {
322+
color: {
323+
shade: function(){
324+
varshadeSteps=10;
325+
varsaturationShift=0;
326+
varlightShift=4;
327+
varhtml=helper.e("html");
328+
varrgb=helper.convertColor.hex.rgb(helper.e(".theme-color").value);
329+
varhsl=helper.convertColor.rgb.hsl(rgb);
330+
html.style.setProperty("--theme-shade",rgb.r+", "+rgb.g+", "+rgb.b);
331+
varrenderShade=function(name,index,rgb){
332+
for(varkeyinrgb){
333+
if(rgb[key]<0){
334+
rgb[key]=0;
335+
}elseif(rgb[key]>255){
336+
rgb[key]=255;
337+
};
338+
rgb[key]=parseInt(rgb[key],10);
339+
};
340+
if(index<10){
341+
index="0"+index;
342+
}else{
343+
index=index;
344+
};
345+
html.style.setProperty(name+index,rgb.r+", "+rgb.g+", "+rgb.b);
346+
};
347+
for(vari=1;i<=shadeSteps;i++){
348+
varrgb=helper.convertColor.hsl.rgb({
349+
h: hsl.h,
350+
s: hsl.s-(saturationShift*i),
351+
l: hsl.l-(lightShift*i)
352+
});
353+
renderShade("--theme-shade-neg-",i,rgb);
354+
};
355+
for(vari=1;i<=shadeSteps;i++){
356+
varrgb=helper.convertColor.hsl.rgb({
357+
h: hsl.h,
358+
s: hsl.s+(saturationShift*i),
359+
l: hsl.l+(lightShift*i)
360+
});
361+
renderShade("--theme-shade-pos-",i,rgb);
362+
};
363+
}
364+
}
365+
}
308366
};
309367
helper.e(".disable-on").addEventListener("click",function(){
310368
disable.on();
@@ -327,10 +385,14 @@
327385
helper.toggleClass(helper.e(".form-dropdown-menu"),"form-dropdown-menu-right");
328386
helper.toggleClass(helper.e(".form-dropdown-menu"),"form-dropdown-menu-bottom");
329387
},false);
330-
helper.e(".theme-color").addEventListener("change",function(){
331-
varcolor=helper.hexToRgb(this.value);
388+
helper.e(".theme-accent").addEventListener("change",function(){
389+
varcolor=helper.convertColor.hex.rgb(this.value);
332390
helper.e("html").style.setProperty("--theme-accent",color.r+", "+color.g+", "+color.b);
333391
},false);
392+
helper.e(".theme-color").addEventListener("change",function(){
393+
theme.render.color.shade();
394+
},false);
395+
theme.render.color.shade();
334396
</script>
335397

336398
</body>

0 commit comments

Comments
(0)