@operato/styles 8.0.0-beta.0 β†’ 8.0.0-beta.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 (20) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/package.json +2 -2
  3. package/.editorconfig +0 -29
  4. package/.storybook/main.js +0 -3
  5. package/.storybook/preview.js +0 -52
  6. package/.storybook/server.mjs +0 -8
  7. package/demo/index.html +0 -25
  8. package/src/button-container-styles.ts +0 -101
  9. package/src/common-button-styles.ts +0 -430
  10. package/src/common-grist-styles.ts +0 -135
  11. package/src/common-header-styles.ts +0 -194
  12. package/src/headroom-styles.ts +0 -15
  13. package/src/index.ts +0 -7
  14. package/src/scrollbar-styles.ts +0 -32
  15. package/src/spinner-styles.ts +0 -32
  16. package/stories/button-container-styles.stories.ts +0 -88
  17. package/stories/common-header-styles-actions.stories.ts +0 -115
  18. package/stories/common-header-styles-pure.stories.ts +0 -91
  19. package/tsconfig.json +0 -24
  20. package/web-dev-server.config.mjs +0 -27
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
12
+
13
+
14
+
15
+ ## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
16
+
17
+
18
+ ### :bug: Bug Fix
19
+
20
+ * missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
21
+
22
+
23
+
6
24
  ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
7
25
 
8
26
  **Note:** Version bump only for package @operato/styles
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/styles",
3
3
  "description": "Webcomponent styles following open-wc recommendations",
4
4
  "author": "heartyoh",
5
- "version": "8.0.0-beta.0",
5
+ "version": "8.0.0-beta.2",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.js",
8
8
  "license": "MIT",
@@ -52,5 +52,5 @@
52
52
  },
53
53
  "customElements": "custom-elements.json",
54
54
  "prettier": "@hatiolab/prettier-config",
55
- "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
55
+ "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
56
56
  }
package/.editorconfig DELETED
@@ -1,29 +0,0 @@
1
- # EditorConfig helps developers define and maintain consistent
2
- # coding styles between different editors and IDEs
3
- # editorconfig.org
4
-
5
- root = true
6
-
7
-
8
- [*]
9
-
10
- # Change these settings to your own preference
11
- indent_style = space
12
- indent_size = 2
13
-
14
- # We recommend you to keep these unchanged
15
- end_of_line = lf
16
- charset = utf-8
17
- trim_trailing_whitespace = true
18
- insert_final_newline = true
19
-
20
- [*.md]
21
- trim_trailing_whitespace = false
22
-
23
- [*.json]
24
- indent_size = 2
25
-
26
- [*.{html,js,md}]
27
- block_comment_start = /**
28
- block_comment = *
29
- block_comment_end = */
package/.storybook/main.js DELETED
@@ -1,3 +0,0 @@
1
- module.exports = {
2
- stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
3
- };
package/.storybook/preview.js DELETED
@@ -1,52 +0,0 @@
1
- import { i18next } from '@operato/i18n'
2
-
3
- export const globalTypes = {
4
- locale: {
5
- name: 'Locale',
6
- description: 'Internationalization locale',
7
- toolbar: {
8
- icon: 'globe',
9
- items: [
10
- { value: 'en', right: 'πŸ‡ΊπŸ‡Έ', title: 'English' },
11
- { value: 'ko', right: 'πŸ‡°πŸ‡·', title: 'ν•œκ΅­μ–΄' },
12
- { value: 'zh', right: 'πŸ‡¨πŸ‡³', title: 'δΈ­ζ–‡' },
13
- { value: 'ja', right: 'πŸ‡―πŸ‡΅', title: 'ζ—₯本θͺž' },
14
- { value: 'ms', right: 'πŸ‡²πŸ‡Ύ', title: 'Bahasa Melayu' }
15
- ],
16
- showName: true
17
- }
18
- },
19
- theme: {
20
- name: 'Theme',
21
- description: 'Global theme for components',
22
- toolbar: {
23
- icon: 'paintbrush',
24
- items: [
25
- { value: 'light', title: 'Light' },
26
- { value: 'dark', title: 'Dark' }
27
- ],
28
- showName: true
29
- }
30
- }
31
- }
32
-
33
- export const decorators = [
34
- (Story, context) => {
35
- const { locale, theme } = context.globals
36
-
37
- if (locale) {
38
- i18next.changeLanguage(locale)
39
- }
40
-
41
- // Set the theme class for the document
42
- if (theme === 'dark') {
43
- document.documentElement.classList.add('dark')
44
- document.documentElement.classList.remove('light')
45
- } else {
46
- document.documentElement.classList.add('light')
47
- document.documentElement.classList.remove('dark')
48
- }
49
-
50
- return Story()
51
- }
52
- ]
package/.storybook/server.mjs DELETED
@@ -1,8 +0,0 @@
1
- import { storybookPlugin } from '@web/dev-server-storybook';
2
- import baseConfig from '../web-dev-server.config.mjs';
3
-
4
- export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
5
- ...baseConfig,
6
- open: '/',
7
- plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
8
- });
package/demo/index.html DELETED
@@ -1,25 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en-GB">
3
- <head>
4
- <meta charset="utf-8" />
5
- <style>
6
- body {
7
- background: #fafafa;
8
- }
9
- </style>
10
- </head>
11
- <body>
12
- <div id="demo"></div>
13
-
14
- <script type="module">
15
- import { html, render } from "lit";
16
- import "../dist/src/styles.js";
17
-
18
- const title = "Hello owc World!";
19
- render(
20
- html` <styles .title=${title}> some light-dom </styles> `,
21
- document.querySelector("#demo")
22
- );
23
- </script>
24
- </body>
25
- </html>
package/src/button-container-styles.ts DELETED
@@ -1,101 +0,0 @@
1
- import { css } from 'lit'
2
-
3
- export const ButtonContainerStyles = css`
4
- .button-container {
5
- display: flex;
6
- margin-left: auto;
7
- padding: var(--spacing-small);
8
- gap: var(--spacing-small);
9
-
10
- text-transform: capitalize;
11
- }
12
-
13
- button {
14
- display: flex;
15
- align-items: center;
16
- background-color: var(--button-background-color, var(--md-sys-color-secondary-container));
17
- border: 1px solid var(--md-sys-color-secondary-container);
18
- border-radius: var(--button-border-radius);
19
-
20
- font-size: var(--fontsize-default);
21
- color: var(--button-color, var(--md-sys-color-on-secondary-container));
22
- text-wrap: nowrap;
23
-
24
- md-icon {
25
- margin: 4px 1px;
26
-
27
- --md-icon-size: var(--icon-size-small);
28
- }
29
-
30
- &:hover {
31
- background-color: var(--md-sys-color-secondary);
32
- color: var(--md-sys-color-on-secondary);
33
-
34
- border: 1px solid var(--md-sys-color-secondary);
35
- }
36
- }
37
-
38
- [filled] {
39
- font-variation-settings: 'FILL' 1;
40
- }
41
-
42
- [danger],
43
- button[danger],
44
- md-assist-chip[danger] {
45
- --md-assist-chip-outline-color: var(--md-sys-color-error);
46
- --md-assist-chip-elevated-container-color: var(--md-sys-color-error);
47
-
48
- --md-assist-chip-label-text-color: var(--md-sys-color-on-error);
49
- --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
50
-
51
- --md-assist-chip-hover-label-text-color: var(--md-sys-color-error);
52
- --md-assist-chip-hover-leading-icon-color: var(--md-sys-color-error);
53
-
54
- color: var(--md-sys-color-on-error);
55
- background-color: var(--md-sys-color-error);
56
- border-color: var(--md-sys-color-error);
57
-
58
- &:hover {
59
- --md-assist-chip-outline-color: var(--md-sys-color-error);
60
- --md-assist-chip-elevated-container-color: var(--md-sys-color-on-error);
61
-
62
- --md-assist-chip-label-text-color: var(--md-sys-color-error);
63
- --md-assist-chip-leading-icon-color: var(--md-sys-color-error);
64
-
65
- color: var(--md-sys-color-error);
66
- background-color: var(--md-sys-color-on-error);
67
- }
68
- }
69
-
70
- select,
71
- input[type='text'] {
72
- background-color: var(--button-background-color, var(--md-sys-color-secondary-container));
73
- border: 1px solid var(--md-sys-color-outline);
74
- border-radius: var(--button-border-radius);
75
- padding: 0 var(--spacing-tiny);
76
-
77
- font-size: var(--fontsize-default);
78
- color: var(--button-color, var(--md-sys-color-on-secondary-container));
79
- }
80
-
81
- [filler] {
82
- flex: 1;
83
- }
84
-
85
- @media screen and (max-width: 460px) {
86
- .button-container {
87
- padding: 0;
88
- gap: 0;
89
- }
90
-
91
- button,
92
- md-icon {
93
- border-radius: 0;
94
- }
95
-
96
- button:not(:last-child),
97
- md-icon:not(:last-child) {
98
- border-right-width: 0;
99
- }
100
- }
101
- `
package/src/common-button-styles.ts DELETED
@@ -1,430 +0,0 @@
1
- export const CommonButtonStyles = {
2
- // alphabet a
3
- activate: {
4
- icon: 'toggle_on',
5
- emphasis: {
6
- raised: false,
7
- outlined: true,
8
- dense: false,
9
- danger: false
10
- }
11
- },
12
- add: {
13
- icon: 'post_add',
14
- emphasis: {
15
- raised: true,
16
- outlined: false,
17
- dense: false,
18
- danger: false
19
- }
20
- },
21
- additional: {
22
- icon: 'library_add',
23
- emphasis: {
24
- raised: false,
25
- outlined: true,
26
- dense: false,
27
- danger: false
28
- }
29
- },
30
- approve: {
31
- icon: 'assignment_turned_in',
32
- emphasis: {
33
- raised: false,
34
- outlined: true,
35
- dense: false,
36
- danger: false
37
- }
38
- },
39
- arrived: {
40
- icon: 'where_to_vote',
41
- emphasis: {
42
- raised: false,
43
- outlined: true,
44
- dense: false,
45
- danger: false
46
- }
47
- },
48
- assignment: {
49
- icon: 'assignment',
50
- emphasis: {
51
- raised: false,
52
- outlined: true,
53
- dense: false,
54
- danger: false
55
- }
56
- },
57
- // alphabet b
58
- back: {
59
- icon: 'arrow_back_ios_new',
60
- emphasis: {
61
- raised: false,
62
- outlined: true,
63
- dense: false,
64
- danger: false
65
- }
66
- },
67
-
68
- // alphabet c
69
- cancel: {
70
- icon: 'cancel',
71
- emphasis: {
72
- raised: false,
73
- outlined: true,
74
- dense: false,
75
- danger: true
76
- }
77
- },
78
- clear: {
79
- icon: 'clear',
80
- emphasis: {
81
- raised: false,
82
- outlined: true,
83
- dense: false,
84
- danger: true
85
- }
86
- },
87
- connect: {
88
- icon: 'mediation',
89
- emphasis: {
90
- raised: true,
91
- outlined: false,
92
- dense: false,
93
- danger: false
94
- }
95
- },
96
- copy: {
97
- icon: 'content_copy',
98
- emphasis: {
99
- raised: false,
100
- outlined: true,
101
- dense: false,
102
- danger: false
103
- }
104
- },
105
- confirm: {
106
- icon: 'fact_check',
107
- emphasis: {
108
- raised: false,
109
- outlined: true,
110
- dense: false,
111
- danger: false
112
- }
113
- },
114
-
115
- // alphabet d
116
- delete: {
117
- icon: 'delete_outline',
118
- emphasis: {
119
- raised: true,
120
- outlined: false,
121
- dense: false,
122
- danger: true
123
- }
124
- },
125
- description: {
126
- icon: 'description',
127
- emphasis: {
128
- raised: false,
129
- outlined: true,
130
- dense: false,
131
- danger: false
132
- }
133
- },
134
- draft: {
135
- icon: 'create',
136
- emphasis: {
137
- raised: false,
138
- outlined: true,
139
- dense: false,
140
- danger: false
141
- }
142
- },
143
-
144
- // alphabet e
145
- edit: {
146
- icon: 'edit',
147
- emphasis: {
148
- raised: false,
149
- outlined: true,
150
- dense: false,
151
- danger: false
152
- }
153
- },
154
- export: {
155
- icon: 'open_in_browser',
156
- emphasis: {
157
- raised: false,
158
- outlined: true,
159
- dense: false,
160
- danger: false
161
- }
162
- },
163
-
164
- // alphabet f
165
-
166
- // alphabet g
167
- generate: {
168
- icon: 'add_task',
169
- emphasis: {
170
- raised: false,
171
- outlined: true,
172
- dense: false,
173
- danger: false
174
- }
175
- },
176
-
177
- // alphabet h
178
-
179
- // alphabet i
180
- import: {
181
- icon: 'save_alt',
182
- emphasis: {
183
- raised: false,
184
- outlined: true,
185
- dense: false,
186
- danger: false
187
- }
188
- },
189
- init: {
190
- icon: 'content_paste',
191
- emphasis: {
192
- raised: false,
193
- outlined: true,
194
- dense: false,
195
- danger: false
196
- }
197
- },
198
- inspect: {
199
- icon: 'pageview',
200
- emphasis: {
201
- raised: false,
202
- outlined: true,
203
- dense: false,
204
- danger: false
205
- }
206
- },
207
- issue: {
208
- icon: 'error',
209
- emphasis: {
210
- raised: false,
211
- outlined: true,
212
- dense: false,
213
- danger: true
214
- }
215
- },
216
-
217
- // alphabet j
218
-
219
- // alphabet k
220
-
221
- // alphabet l
222
- label: {
223
- icon: 'print',
224
- emphasis: {
225
- raised: false,
226
- outlined: true,
227
- dense: false,
228
- danger: false
229
- }
230
- },
231
- load: {
232
- icon: 'local_shipping',
233
- emphasis: {
234
- raised: false,
235
- outlined: true,
236
- dense: false,
237
- danger: false
238
- }
239
- },
240
- logistics: {
241
- icon: 'moped',
242
- emphasis: {
243
- raised: false,
244
- outlined: true,
245
- dense: false,
246
- danger: false
247
- }
248
- },
249
-
250
- // alphabet m
251
-
252
- // alphabet n
253
-
254
- // alphabet o
255
-
256
- // alphabet p
257
- pause: {
258
- icon: 'pause',
259
- emphasis: {
260
- raised: false,
261
- outlined: true,
262
- dense: false,
263
- danger: false
264
- }
265
- },
266
- play: {
267
- icon: 'play_arrow',
268
- emphasis: {
269
- raised: false,
270
- outlined: true,
271
- dense: false,
272
- danger: false
273
- }
274
- },
275
- preview: {
276
- icon: 'preview',
277
- emphasis: {
278
- raised: false,
279
- outlined: true,
280
- dense: false,
281
- danger: false
282
- }
283
- },
284
- print: {
285
- icon: 'print',
286
- emphasis: {
287
- raised: false,
288
- outlined: true,
289
- dense: false,
290
- danger: false
291
- }
292
- },
293
-
294
- // alphabet q
295
-
296
- // alphabet r
297
- receive: {
298
- icon: 'assignment_turn_in',
299
- emphasis: {
300
- raised: false,
301
- outlined: true,
302
- dense: false,
303
- danger: false
304
- }
305
- },
306
- refresh: {
307
- icon: 'refresh',
308
- emphasis: {
309
- raised: false,
310
- outlined: true,
311
- dense: false,
312
- danger: false
313
- }
314
- },
315
- register: {
316
- icon: 'add',
317
- emphasis: {
318
- raised: false,
319
- outlined: true,
320
- dense: false,
321
- danger: false
322
- }
323
- },
324
- reject: {
325
- icon: 'not_interested',
326
- emphasis: {
327
- raised: false,
328
- outlined: true,
329
- dense: false,
330
- danger: true
331
- }
332
- },
333
- relocate: {
334
- icon: 'edit_location_alt',
335
- emphasis: {
336
- raised: false,
337
- outlined: true,
338
- dense: false,
339
- danger: false
340
- }
341
- },
342
- reorder: {
343
- icon: 'reorder',
344
- emphasis: {
345
- raised: false,
346
- outlined: true,
347
- dense: false,
348
- danger: false
349
- }
350
- },
351
-
352
- // alphabet s
353
- save: {
354
- icon: 'save',
355
- emphasis: {
356
- raised: false,
357
- outlined: true,
358
- dense: false,
359
- danger: false
360
- }
361
- },
362
- submit: {
363
- icon: 'task_alt',
364
- emphasis: {
365
- raised: true,
366
- outlined: false,
367
- dense: false,
368
- danger: false
369
- }
370
- },
371
- sync: {
372
- icon: 'sync',
373
- emphasis: {
374
- raised: false,
375
- outlined: true,
376
- dense: false,
377
- danger: false
378
- }
379
- },
380
-
381
- // alphabet t
382
- transfer: {
383
- icon: 'swap_horiz',
384
- emphasis: {
385
- raised: false,
386
- outlined: true,
387
- dense: false,
388
- danger: false
389
- }
390
- },
391
-
392
- // alphabet u
393
- undo: {
394
- icon: 'undo',
395
- emphasis: {
396
- raised: false,
397
- outlined: true,
398
- dense: false,
399
- danger: false
400
- }
401
- },
402
-
403
- // alphabet v
404
- vas: {
405
- icon: 'dashboard_customize',
406
- emphasis: {
407
- raised: false,
408
- outlined: true,
409
- dense: false,
410
- danger: false
411
- }
412
- },
413
-
414
- // alphabet w
415
- warehouse: {
416
- icon: 'add_business',
417
- emphasis: {
418
- raised: false,
419
- outlined: true,
420
- dense: false,
421
- danger: false
422
- }
423
- }
424
-
425
- // alphabet x
426
-
427
- // alphabet y
428
-
429
- // alphabet z
430
- }