kempo-css 2.0.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/.github/workflows/test.yml +25 -25
  2. package/AGENTS.md +43 -43
  3. package/CHANGELOG.md +117 -107
  4. package/CONTRIBUTING.md +17 -0
  5. package/LICENSE.md +21 -21
  6. package/README.md +2 -48
  7. package/dist/kempo.min.css +1 -1
  8. package/docs/demo.inc.html +213 -213
  9. package/docs/index.html +171 -160
  10. package/docs/kempo-hljs.css +124 -124
  11. package/docs/kempo.css +1194 -1210
  12. package/docs/kempo.min.css +1 -1
  13. package/docs/manifest.json +87 -87
  14. package/docs/nav.js +32 -32
  15. package/docs/theme-editor.html +19 -64
  16. package/llms.txt +205 -0
  17. package/package.json +1 -1
  18. package/scripts/build.js +173 -173
  19. package/src/kempo-hljs.css +124 -124
  20. package/src/kempo.css +1194 -1210
  21. package/tests/base_reset.browser-test.js +201 -201
  22. package/tests/buttons.browser-test.js +223 -223
  23. package/tests/colors.browser-test.js +277 -277
  24. package/tests/components.browser-test.js +131 -131
  25. package/tests/css_variables.browser-test.js +170 -170
  26. package/tests/display_flex.browser-test.js +159 -159
  27. package/tests/elevation.browser-test.js +239 -239
  28. package/tests/forms.browser-test.js +224 -224
  29. package/tests/rows_columns.browser-test.js +171 -171
  30. package/tests/spacing.browser-test.js +310 -310
  31. package/tests/tables.browser-test.js +192 -192
  32. package/tests/typography.browser-test.js +255 -255
package/tests/display_flex.browser-test.js CHANGED
@@ -1,159 +1,159 @@
1
- const getStyle = (el, prop) => getComputedStyle(el)[prop];
2
-
3
- export const beforeAll = async () => {
4
- const link = document.createElement('link');
5
- link.rel = 'stylesheet';
6
- link.href = '/src/kempo.css';
7
- document.head.appendChild(link);
8
- await new Promise(resolve => link.onload = resolve);
9
- };
10
-
11
- export default {
12
- 'should apply display block with .d-b': ({pass, fail}) => {
13
- const el = document.createElement('span');
14
- el.className = 'd-b';
15
- document.body.appendChild(el);
16
- const display = getStyle(el, 'display');
17
- el.remove();
18
- if(display === 'block'){
19
- pass('.d-b sets display: block');
20
- } else {
21
- fail(`Expected block, got ${display}`);
22
- }
23
- },
24
-
25
- 'should apply display inline-block with .d-ib': ({pass, fail}) => {
26
- const el = document.createElement('div');
27
- el.className = 'd-ib';
28
- document.body.appendChild(el);
29
- const display = getStyle(el, 'display');
30
- el.remove();
31
- if(display === 'inline-block'){
32
- pass('.d-ib sets display: inline-block');
33
- } else {
34
- fail(`Expected inline-block, got ${display}`);
35
- }
36
- },
37
-
38
- 'should apply display grid with .d-g': ({pass, fail}) => {
39
- const el = document.createElement('div');
40
- el.className = 'd-g';
41
- document.body.appendChild(el);
42
- const display = getStyle(el, 'display');
43
- el.remove();
44
- if(display === 'grid'){
45
- pass('.d-g sets display: grid');
46
- } else {
47
- fail(`Expected grid, got ${display}`);
48
- }
49
- },
50
-
51
- 'should apply display inline with .d-i': ({pass, fail}) => {
52
- const el = document.createElement('div');
53
- el.className = 'd-i';
54
- document.body.appendChild(el);
55
- const display = getStyle(el, 'display');
56
- el.remove();
57
- if(display === 'inline'){
58
- pass('.d-i sets display: inline');
59
- } else {
60
- fail(`Expected inline, got ${display}`);
61
- }
62
- },
63
-
64
- 'should apply display none with .d-n': ({pass, fail}) => {
65
- const el = document.createElement('div');
66
- el.className = 'd-n';
67
- document.body.appendChild(el);
68
- const display = getStyle(el, 'display');
69
- el.remove();
70
- if(display === 'none'){
71
- pass('.d-n sets display: none');
72
- } else {
73
- fail(`Expected none, got ${display}`);
74
- }
75
- },
76
-
77
- 'should apply display flex with .d-f': ({pass, fail}) => {
78
- const el = document.createElement('div');
79
- el.className = 'd-f';
80
- document.body.appendChild(el);
81
- const display = getStyle(el, 'display');
82
- const flexWrap = getStyle(el, 'flexWrap');
83
- el.remove();
84
- if(display === 'flex' && flexWrap === 'wrap'){
85
- pass('.d-f sets display: flex with wrap');
86
- } else {
87
- fail(`Expected flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
88
- }
89
- },
90
-
91
- 'should apply display inline-flex with .d-if': ({pass, fail}) => {
92
- const el = document.createElement('div');
93
- el.className = 'd-if';
94
- document.body.appendChild(el);
95
- const display = getStyle(el, 'display');
96
- const flexWrap = getStyle(el, 'flexWrap');
97
- el.remove();
98
- if(display === 'inline-flex' && flexWrap === 'wrap'){
99
- pass('.d-if sets display: inline-flex with wrap');
100
- } else {
101
- fail(`Expected inline-flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
102
- }
103
- },
104
-
105
- 'should apply flex grow with .flex classes': ({pass, fail}) => {
106
- const el = document.createElement('div');
107
- el.className = 'flex';
108
- document.body.appendChild(el);
109
- const flexGrow = getStyle(el, 'flexGrow');
110
- el.remove();
111
- if(flexGrow === '1'){
112
- pass('.flex sets flex-grow: 1');
113
- } else {
114
- fail(`Expected flex-grow: 1, got ${flexGrow}`);
115
- }
116
- },
117
-
118
- 'should apply flex-0 correctly': ({pass, fail}) => {
119
- const el = document.createElement('div');
120
- el.className = 'flex-0';
121
- document.body.appendChild(el);
122
- const flexGrow = getStyle(el, 'flexGrow');
123
- el.remove();
124
- if(flexGrow === '0'){
125
- pass('.flex-0 sets flex-grow: 0');
126
- } else {
127
- fail(`Expected flex-grow: 0, got ${flexGrow}`);
128
- }
129
- },
130
-
131
- 'should apply higher flex values': ({pass, fail}) => {
132
- const el = document.createElement('div');
133
- el.className = 'flex-5';
134
- document.body.appendChild(el);
135
- const flexGrow = getStyle(el, 'flexGrow');
136
- el.remove();
137
- if(flexGrow === '5'){
138
- pass('.flex-5 sets flex-grow: 5');
139
- } else {
140
- fail(`Expected flex-grow: 5, got ${flexGrow}`);
141
- }
142
- },
143
-
144
- 'should apply fixed positioning with .fixed': ({pass, fail}) => {
145
- const el = document.createElement('div');
146
- el.className = 'fixed';
147
- document.body.appendChild(el);
148
- const position = getStyle(el, 'position');
149
- const top = getStyle(el, 'top');
150
- const width = getStyle(el, 'width');
151
- const zIndex = getStyle(el, 'zIndex');
152
- el.remove();
153
- if(position === 'fixed' && top === '0px' && zIndex !== 'auto'){
154
- pass('.fixed applies fixed positioning at top with z-index');
155
- } else {
156
- fail(`Expected fixed position at top, got position: ${position}, top: ${top}, z-index: ${zIndex}`);
157
- }
158
- }
159
- };
1
+ const getStyle = (el, prop) => getComputedStyle(el)[prop];
2
+
3
+ export const beforeAll = async () => {
4
+ const link = document.createElement('link');
5
+ link.rel = 'stylesheet';
6
+ link.href = '/src/kempo.css';
7
+ document.head.appendChild(link);
8
+ await new Promise(resolve => link.onload = resolve);
9
+ };
10
+
11
+ export default {
12
+ 'should apply display block with .d-b': ({pass, fail}) => {
13
+ const el = document.createElement('span');
14
+ el.className = 'd-b';
15
+ document.body.appendChild(el);
16
+ const display = getStyle(el, 'display');
17
+ el.remove();
18
+ if(display === 'block'){
19
+ pass('.d-b sets display: block');
20
+ } else {
21
+ fail(`Expected block, got ${display}`);
22
+ }
23
+ },
24
+
25
+ 'should apply display inline-block with .d-ib': ({pass, fail}) => {
26
+ const el = document.createElement('div');
27
+ el.className = 'd-ib';
28
+ document.body.appendChild(el);
29
+ const display = getStyle(el, 'display');
30
+ el.remove();
31
+ if(display === 'inline-block'){
32
+ pass('.d-ib sets display: inline-block');
33
+ } else {
34
+ fail(`Expected inline-block, got ${display}`);
35
+ }
36
+ },
37
+
38
+ 'should apply display grid with .d-g': ({pass, fail}) => {
39
+ const el = document.createElement('div');
40
+ el.className = 'd-g';
41
+ document.body.appendChild(el);
42
+ const display = getStyle(el, 'display');
43
+ el.remove();
44
+ if(display === 'grid'){
45
+ pass('.d-g sets display: grid');
46
+ } else {
47
+ fail(`Expected grid, got ${display}`);
48
+ }
49
+ },
50
+
51
+ 'should apply display inline with .d-i': ({pass, fail}) => {
52
+ const el = document.createElement('div');
53
+ el.className = 'd-i';
54
+ document.body.appendChild(el);
55
+ const display = getStyle(el, 'display');
56
+ el.remove();
57
+ if(display === 'inline'){
58
+ pass('.d-i sets display: inline');
59
+ } else {
60
+ fail(`Expected inline, got ${display}`);
61
+ }
62
+ },
63
+
64
+ 'should apply display none with .d-n': ({pass, fail}) => {
65
+ const el = document.createElement('div');
66
+ el.className = 'd-n';
67
+ document.body.appendChild(el);
68
+ const display = getStyle(el, 'display');
69
+ el.remove();
70
+ if(display === 'none'){
71
+ pass('.d-n sets display: none');
72
+ } else {
73
+ fail(`Expected none, got ${display}`);
74
+ }
75
+ },
76
+
77
+ 'should apply display flex with .d-f': ({pass, fail}) => {
78
+ const el = document.createElement('div');
79
+ el.className = 'd-f';
80
+ document.body.appendChild(el);
81
+ const display = getStyle(el, 'display');
82
+ const flexWrap = getStyle(el, 'flexWrap');
83
+ el.remove();
84
+ if(display === 'flex' && flexWrap === 'wrap'){
85
+ pass('.d-f sets display: flex with wrap');
86
+ } else {
87
+ fail(`Expected flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
88
+ }
89
+ },
90
+
91
+ 'should apply display inline-flex with .d-if': ({pass, fail}) => {
92
+ const el = document.createElement('div');
93
+ el.className = 'd-if';
94
+ document.body.appendChild(el);
95
+ const display = getStyle(el, 'display');
96
+ const flexWrap = getStyle(el, 'flexWrap');
97
+ el.remove();
98
+ if(display === 'inline-flex' && flexWrap === 'wrap'){
99
+ pass('.d-if sets display: inline-flex with wrap');
100
+ } else {
101
+ fail(`Expected inline-flex with wrap, got display: ${display}, flex-wrap: ${flexWrap}`);
102
+ }
103
+ },
104
+
105
+ 'should apply flex grow with .flex classes': ({pass, fail}) => {
106
+ const el = document.createElement('div');
107
+ el.className = 'flex';
108
+ document.body.appendChild(el);
109
+ const flexGrow = getStyle(el, 'flexGrow');
110
+ el.remove();
111
+ if(flexGrow === '1'){
112
+ pass('.flex sets flex-grow: 1');
113
+ } else {
114
+ fail(`Expected flex-grow: 1, got ${flexGrow}`);
115
+ }
116
+ },
117
+
118
+ 'should apply flex-0 correctly': ({pass, fail}) => {
119
+ const el = document.createElement('div');
120
+ el.className = 'flex-0';
121
+ document.body.appendChild(el);
122
+ const flexGrow = getStyle(el, 'flexGrow');
123
+ el.remove();
124
+ if(flexGrow === '0'){
125
+ pass('.flex-0 sets flex-grow: 0');
126
+ } else {
127
+ fail(`Expected flex-grow: 0, got ${flexGrow}`);
128
+ }
129
+ },
130
+
131
+ 'should apply higher flex values': ({pass, fail}) => {
132
+ const el = document.createElement('div');
133
+ el.className = 'flex-5';
134
+ document.body.appendChild(el);
135
+ const flexGrow = getStyle(el, 'flexGrow');
136
+ el.remove();
137
+ if(flexGrow === '5'){
138
+ pass('.flex-5 sets flex-grow: 5');
139
+ } else {
140
+ fail(`Expected flex-grow: 5, got ${flexGrow}`);
141
+ }
142
+ },
143
+
144
+ 'should apply fixed positioning with .fixed': ({pass, fail}) => {
145
+ const el = document.createElement('div');
146
+ el.className = 'fixed';
147
+ document.body.appendChild(el);
148
+ const position = getStyle(el, 'position');
149
+ const top = getStyle(el, 'top');
150
+ const width = getStyle(el, 'width');
151
+ const zIndex = getStyle(el, 'zIndex');
152
+ el.remove();
153
+ if(position === 'fixed' && top === '0px' && zIndex !== 'auto'){
154
+ pass('.fixed applies fixed positioning at top with z-index');
155
+ } else {
156
+ fail(`Expected fixed position at top, got position: ${position}, top: ${top}, z-index: ${zIndex}`);
157
+ }
158
+ }
159
+ };