Skip to content

Commit e0e7fb5

Browse files
shgysk8zer0shgysk8zer0
authored
Merge pull request #75 from AegisJSProject/release/v0.2.0
More custom properties and stylesheets
2 parents 60997e0 + 931cb44 commit e0e7fb5

14 files changed

Lines changed: 858 additions & 52 deletions

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [v0.2.0] - 2024-09-27
11+
12+
### Added
13+
- More custom properties
14+
- More stylesheets
15+
- More customization
16+
1017
## [v0.1.3] - 2024-09-26
1118

1219
### Added

‎button.js‎

Lines changed: 105 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { css } from '@aegisjsproject/core/parsers/css.js';
2-
import { primary, blue, light } from './palette/bootstrap.js';
2+
import { blue, green, red, yellow, gray } from './palette/bootstrap.js';
3+
import {
4+
colorLight, colorDark, btnPrimary, btnPrimaryActive,
5+
btnPrimaryHover, btnDisabled, btnSuccess, btnSuccessActive, btnSuccessHover, btnDanger, btnDangerActive,
6+
btnDangerHover, btnWarning, btnWarningActive, btnWarningHover,
7+
} from './palette/aegis.js';
38

49
export const btn = css`.btn:not([hidden]) {
510
cursor: pointer;
@@ -9,23 +14,111 @@ export const btn = css`.btn:not([hidden]) {
914
font-family: inherit;
1015
border-radius: 4px;
1116
text-decoration: none;
12-
}
13-
14-
.btn.btn-primary {
15-
color: ${light};
16-
background-color: ${primary};
1717
border-width: 1px;
1818
border-style: solid;
19-
border-color: ${blue[6]});
20-
transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
19+
transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out;
20+
}
21+
22+
.btn.btn-small {
23+
padding: 0.5em 1em;
24+
font-size: 0.7em;
25+
}
26+
27+
.btn.btn-big {
28+
padding: 0.7em 1.3em;
29+
font-size: 1.3em;
30+
}`;
31+
32+
const primary = css`.btn.btn-primary {
33+
background-color: var(--aegis-btn-primary, ${btnPrimary});
34+
color: var(--aegis-color-dark, ${colorDark});
35+
border-color: ${blue[6]};
2136
}
2237
23-
.btn.btn-primary:hover {
24-
background-color: ${blue[5]};
38+
.btn.btn-primary:not(:disabled):hover, .btn.btn-primary:not(:disabled):focus {
39+
background-color: var(--aegis-btn-primary-hover, ${btnPrimaryHover});
2540
border-color: ${blue[7]};
2641
}
2742
28-
.btn.btn-primary:active {
29-
background-color: ${blue[6]};
43+
.btn.btn-primary:not(:disabled):active {
44+
background-color: var(--aegis-btn-primary-active, ${btnPrimaryActive});
3045
border-color: ${blue[8]};
46+
}
47+
48+
.btn.btn-primary:disabled {
49+
background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
50+
color: var(--aegis-color-light, ${colorLight});
51+
border-color: ${gray[6]};
52+
cursor: not-allowed;
3153
}`;
54+
55+
const success = css`.btn.btn-success {
56+
background-color: var(--aegis-btn-success, ${btnSuccess});
57+
color: var(--aegis-color-dark, ${colorDark});
58+
border-color: ${green[6]};
59+
}
60+
61+
.btn.btn-success:not(:disabled):hover, .btn.btn-success:not(:disabled):focus {
62+
background-color: var(--aegis-btn-success-hover, ${btnSuccessHover});
63+
border-color: ${blue[7]};
64+
}
65+
66+
.btn.btn-success:not(:disabled):active {
67+
background-color: var(--aegis-btn-success-active, ${btnSuccessActive});
68+
border-color: ${blue[8]};
69+
}
70+
71+
.btn.btn-success:disabled {
72+
background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
73+
color: var(--aegis-color-light, ${colorLight});
74+
border-color: ${gray[6]};
75+
cursor: not-allowed;
76+
}`;
77+
78+
const danger = css`.btn.btn-danger {
79+
background-color: var(--aegis-btn-danger, ${btnDanger});
80+
color: var(--aegis-color-dark, ${colorDark});
81+
border-color: ${red[6]};
82+
}
83+
84+
.btn.btn-danger:not(:disabled):hover, .btn.btn-danger:not(:disabled):focus {
85+
background-color: var(--aegis-btn-danger-hover, ${btnDangerHover});
86+
border-color: ${red[7]};
87+
}
88+
89+
.btn.btn-danger:not(:disabled):active {
90+
background-color: var(--aegis-btn-danger-active, ${btnDangerActive});
91+
border-color: ${red[8]};
92+
}
93+
94+
.btn.btn-danger:disabled {
95+
background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
96+
color: var(--aegis-color-light, ${colorLight});
97+
border-color: ${gray[6]};
98+
cursor: not-allowed;
99+
}`;
100+
101+
const warning = css`.btn.btn-warning {
102+
background-color: var(--aegis-btn-warning, ${btnWarning});
103+
color: var(--aegis-color-dark, ${colorDark});
104+
border-color: ${yellow[6]};
105+
}
106+
107+
.btn.btn-warning:not(:disabled):hover, .btn.btn-warning:not(:disabled):focus {
108+
background-color: var(--aegis-btn-warning-hover, ${btnWarningHover});
109+
border-color: ${yellow[7]};
110+
}
111+
112+
.btn.btn-warning:not(:disabled):active {
113+
background-color: var(--aegis-btn-warning-active, ${btnWarningActive});
114+
border-color: ${yellow[8]};
115+
}
116+
117+
.btn.btn-warning:disabled {
118+
background-color: var(--aegis-btn-active-disabled, ${btnDisabled});
119+
color: var(--aegis-color-light, ${colorLight});
120+
border-color: ${gray[6]};
121+
cursor: not-allowed;
122+
}`;
123+
124+
export { primary as btnPrimary, success as btnSuccess, danger as btnDanger, warning as btnWarning };

‎consts.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {
2+
colorLight, colorDark, bgLight, bgDark, borderLight, borderDark, btnPrimary, btnPrimaryActive,
3+
btnPrimaryHover, btnDisabled, btnSuccess, btnSuccessActive, btnSuccessHover, btnDanger, btnDangerActive,
4+
btnDangerHover, btnWarning, btnWarningActive, btnWarningHover,
5+
} from './palette/aegis.js';
6+
7+
export const customProperties = {
8+
'font': { initialValue: 'system-ui', syntax: '<custom-ident> | <string>' },
9+
'color-light': { initialValue: colorLight, syntax: '<color>' },
10+
'color-dark': { initialValue: colorDark, syntax: '<color>' },
11+
'bg-light': { initialValue: bgLight, syntax: '<color>' },
12+
'bg-dark': { initialValue: bgDark, syntax: '<color>' },
13+
'border-color-light': { initialValue: borderLight, syntax: '<color>' },
14+
'border-color-dark': { initialValue: borderDark, syntax: '<color>' },
15+
'border-radius': { initialValue: '8px', syntax: '<length>' },
16+
'btn-primary': { initialValue: btnPrimary, syntax: '<color>' },
17+
'btn-primary-hover': { initialValue: btnPrimaryHover, syntax: '<color>' },
18+
'btn-primary-active': { initialValue: btnPrimaryActive, syntax: '<color>' },
19+
'btn-primary-disabled': { initialValue: btnDisabled, syntax: '<color>' },
20+
'btn-danger': { initialValue: btnDanger, syntax: '<color>' },
21+
'btn-danger-hover': { initialValue: btnDangerHover, syntax: '<color>' },
22+
'btn-danger-active': { initialValue: btnDangerActive, syntax: '<color>' },
23+
'btn-danger-disabled': { initialValue: btnDisabled, syntax: '<color>' },
24+
'btn-success': { initialValue: btnSuccess, syntax: '<color>' },
25+
'btn-success-hover': { initialValue: btnSuccessHover, syntax: '<color>' },
26+
'btn-success-active': { initialValue: btnSuccessActive, syntax: '<color>' },
27+
'btn-success-disabled': { initialValue: btnDisabled, syntax: '<color>' },
28+
'btn-warning': { initialValue: btnWarning, syntax: '<color>' },
29+
'btn-warning-hover': { initialValue: btnWarningHover, syntax: '<color>' },
30+
'btn-warning-active': { initialValue: btnWarningActive, syntax: '<color>' },
31+
'btn-warning-disabled': { initialValue: btnDisabled, syntax: '<color>' },
32+
};

‎forms.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { css } from '@aegisjsproject/parsers/css.js';
2+
3+
export const forms = css`.form-group {
4+
border: 1px solid transparent;
5+
padding: var(--form-group-padding, 0.4em 0.8em);
6+
margin-bottom: 0.4em;
7+
border-radius: 6px;
8+
transition: border-color 200ms ease-in-out;
9+
}
10+
11+
.form-group:focus-within {
12+
border-color: var(--form-group-border, #cacaca);
13+
}
14+
15+
.form-group .input-label {
16+
display: block;
17+
margin: 0.4em 0;
18+
}
19+
20+
.form-group .input-label.required::after {
21+
content: ' *';
22+
display: inline;
23+
font-size: 0.8em;
24+
font-weight: 800;
25+
}
26+
27+
.form-group .input, .form-group .input:required:invalid:placeholder-shown {
28+
display: block;
29+
width: var(--input-width, 100%);
30+
max-width: 100%;
31+
color: currentColor;
32+
border-style: solid;
33+
border-color: var(--input-border, #cacaca);
34+
border-width: 0 0 1px 0;
35+
background: transparent;
36+
padding: var(--form-group-padding, 0.5em 0.3em);
37+
transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
38+
}
39+
40+
.form-group textarea.input {
41+
resize: vertical;
42+
}
43+
44+
.form-group .input:invalid {
45+
box-shadow: none;
46+
}
47+
48+
.form-group .input:invalid:not(:focus) {
49+
color: var(--invalid-color, #-871717);
50+
border-color: currentColor;
51+
background-color: var(--invalid-background, #F7C1C1);
52+
}
53+
54+
.form-group input[hidden] + label[for].btn-toggle {
55+
background-color: var(--button-disabled-background);
56+
margin: var(--form-group-margin, 0.3rem);
57+
transition: background-color 300ms ease-in-out;
58+
}
59+
60+
.form-group input[hidden]:checked + label[for].btn-toggle {
61+
background-color: var(--button-background);
62+
}
63+
64+
.form-group input[hidden]:not(:checked) + label[for].btn-toggle .when-checked {
65+
display: none;
66+
}
67+
68+
.form-group input[hidden]:checked + label[for].btn-toggle .when-unchecked {
69+
display: none;
70+
}`;

0 commit comments

Comments
 (0)