@operato/context 7.0.0-rc.8 → 7.0.0

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 (50) hide show
  1. package/.storybook/preview.js +52 -0
  2. package/CHANGELOG.md +42 -0
  3. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.d.ts +0 -5
  4. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js +2 -7
  5. package/dist/stories/ox-context-page-toolbar-select-buttons.stories.js.map +1 -1
  6. package/dist/stories/ox-context-page-toolbar-select.stories.d.ts +0 -5
  7. package/dist/stories/ox-context-page-toolbar-select.stories.js +2 -7
  8. package/dist/stories/ox-context-page-toolbar-select.stories.js.map +1 -1
  9. package/dist/stories/ox-context-page-toolbar.stories.d.ts +0 -5
  10. package/dist/stories/ox-context-page-toolbar.stories.js +2 -7
  11. package/dist/stories/ox-context-page-toolbar.stories.js.map +1 -1
  12. package/dist/stories/ox-context-toolbar-complex.stories.d.ts +0 -1
  13. package/dist/stories/ox-context-toolbar-complex.stories.js +1 -5
  14. package/dist/stories/ox-context-toolbar-complex.stories.js.map +1 -1
  15. package/dist/stories/ox-context-toolbar-empty.stories.d.ts +0 -1
  16. package/dist/stories/ox-context-toolbar-empty.stories.js +1 -5
  17. package/dist/stories/ox-context-toolbar-empty.stories.js.map +1 -1
  18. package/dist/stories/ox-context-toolbar-overflow.stories.d.ts +0 -1
  19. package/dist/stories/ox-context-toolbar-overflow.stories.js +1 -5
  20. package/dist/stories/ox-context-toolbar-overflow.stories.js.map +1 -1
  21. package/dist/stories/ox-context-toolbar.stories.d.ts +0 -1
  22. package/dist/stories/ox-context-toolbar.stories.js +1 -5
  23. package/dist/stories/ox-context-toolbar.stories.js.map +1 -1
  24. package/dist/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +8 -8
  26. package/stories/ox-context-page-toolbar-select-buttons.stories.ts +2 -8
  27. package/stories/ox-context-page-toolbar-select.stories.ts +2 -8
  28. package/stories/ox-context-page-toolbar.stories.ts +2 -8
  29. package/stories/ox-context-toolbar-complex.stories.ts +2 -8
  30. package/stories/ox-context-toolbar-empty.stories.ts +2 -8
  31. package/stories/ox-context-toolbar-overflow.stories.ts +2 -8
  32. package/stories/ox-context-toolbar.stories.ts +2 -8
  33. package/themes/app-theme.css +138 -0
  34. package/themes/calendar-theme.css +59 -0
  35. package/themes/dark.css +47 -47
  36. package/themes/form-theme.css +71 -0
  37. package/themes/grist-theme.css +175 -0
  38. package/themes/layout-theme.css +94 -0
  39. package/themes/light.css +42 -48
  40. package/themes/material-theme.css +23 -0
  41. package/themes/md-typescale-styles.css +15 -15
  42. package/themes/oops-theme.css +22 -0
  43. package/themes/report-theme.css +47 -0
  44. package/themes/spacing.css +10 -0
  45. package/themes/state-color.css +1 -1
  46. package/themes/tooltip-theme.css +11 -0
  47. package/themes/dark-hc.css +0 -51
  48. package/themes/dark-mc.css +0 -51
  49. package/themes/light-hc.css +0 -51
  50. package/themes/light-mc.css +0 -51
package/themes/light.css CHANGED
@@ -1,57 +1,51 @@
1
- body {
2
- --md-sys-shape-corner-small: 4px;
3
- --md-sys-shape-corner-medium: 6px;
4
- --md-sys-shape-corner-large: 8px;
5
- }
6
-
7
1
  .light {
8
- --md-sys-color-primary: rgb(76 102 43);
9
- --md-sys-color-surface-tint: rgb(76 102 43);
2
+ --md-sys-color-primary: rgb(73 93 146);
3
+ --md-sys-color-surface-tint: rgb(73 93 146);
10
4
  --md-sys-color-on-primary: rgb(255 255 255);
11
- --md-sys-color-primary-container: rgb(205 237 163);
12
- --md-sys-color-on-primary-container: rgb(16 32 0);
13
- --md-sys-color-secondary: rgb(88 98 73);
5
+ --md-sys-color-primary-container: #e4eaf9;
6
+ --md-sys-color-on-primary-container: rgb(0 24 72);
7
+ --md-sys-color-secondary: rgb(27 101 133);
14
8
  --md-sys-color-on-secondary: rgb(255 255 255);
15
- --md-sys-color-secondary-container: rgb(220 231 200);
16
- --md-sys-color-on-secondary-container: rgb(21 30 11);
17
- --md-sys-color-tertiary: rgb(56 102 99);
9
+ --md-sys-color-secondary-container: rgb(195 232 255);
10
+ --md-sys-color-on-secondary-container: rgb(0 30 44);
11
+ --md-sys-color-tertiary: rgb(37 106 75);
18
12
  --md-sys-color-on-tertiary: rgb(255 255 255);
19
- --md-sys-color-tertiary-container: rgb(188 236 231);
20
- --md-sys-color-on-tertiary-container: rgb(0 32 30);
21
- --md-sys-color-error: rgb(186 26 26);
13
+ --md-sys-color-tertiary-container: rgb(171 242 201);
14
+ --md-sys-color-on-tertiary-container: rgb(0 33 19);
15
+ --md-sys-color-error: #fe594e;
22
16
  --md-sys-color-on-error: rgb(255 255 255);
23
- --md-sys-color-error-container: rgb(255 218 214);
24
- --md-sys-color-on-error-container: rgb(65 0 2);
25
- --md-sys-color-background: rgb(249 250 239);
26
- --md-sys-color-on-background: rgb(26 28 22);
27
- --md-sys-color-surface: rgb(249 250 239);
28
- --md-sys-color-on-surface: rgb(26 28 22);
29
- --md-sys-color-surface-variant: rgb(225 228 213);
30
- --md-sys-color-on-surface-variant: rgb(68 72 61);
31
- --md-sys-color-outline: rgb(117 121 108);
32
- --md-sys-color-outline-variant: rgb(197 200 186);
17
+ --md-sys-color-error-container: rgb(255 218 215);
18
+ --md-sys-color-on-error-container: #fe594e;
19
+ --md-sys-color-background: rgb(250 248 255);
20
+ --md-sys-color-on-background: rgb(26 27 33);
21
+ --md-sys-color-surface: rgb(250 248 255);
22
+ --md-sys-color-on-surface: rgb(26 27 33);
23
+ --md-sys-color-surface-variant: rgb(225 226 236);
24
+ --md-sys-color-on-surface-variant: rgb(69 70 79);
25
+ --md-sys-color-outline: rgba(0, 0, 0, 0.25);
26
+ --md-sys-color-outline-variant: rgb(197 198 208);
33
27
  --md-sys-color-shadow: rgb(0 0 0);
34
28
  --md-sys-color-scrim: rgb(0 0 0);
35
- --md-sys-color-inverse-surface: rgb(47 49 42);
36
- --md-sys-color-inverse-on-surface: rgb(241 242 230);
37
- --md-sys-color-inverse-primary: rgb(177 209 138);
38
- --md-sys-color-primary-fixed: rgb(205 237 163);
39
- --md-sys-color-on-primary-fixed: rgb(16 32 0);
40
- --md-sys-color-primary-fixed-dim: rgb(177 209 138);
41
- --md-sys-color-on-primary-fixed-variant: rgb(53 78 22);
42
- --md-sys-color-secondary-fixed: rgb(220 231 200);
43
- --md-sys-color-on-secondary-fixed: rgb(21 30 11);
44
- --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
45
- --md-sys-color-on-secondary-fixed-variant: rgb(64 74 51);
46
- --md-sys-color-tertiary-fixed: rgb(188 236 231);
47
- --md-sys-color-on-tertiary-fixed: rgb(0 32 30);
48
- --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
49
- --md-sys-color-on-tertiary-fixed-variant: rgb(31 78 75);
50
- --md-sys-color-surface-dim: rgb(218 219 208);
51
- --md-sys-color-surface-bright: rgb(249 250 239);
29
+ --md-sys-color-inverse-surface: rgb(47 48 54);
30
+ --md-sys-color-inverse-on-surface: rgb(241 240 247);
31
+ --md-sys-color-inverse-primary: #c9d4f4;
32
+ --md-sys-color-primary-fixed: rgb(218 226 255);
33
+ --md-sys-color-on-primary-fixed: rgb(0 24 72);
34
+ --md-sys-color-primary-fixed-dim: #c9d4f4;
35
+ --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
36
+ --md-sys-color-secondary-fixed: rgb(195 232 255);
37
+ --md-sys-color-on-secondary-fixed: rgb(0 30 44);
38
+ --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
39
+ --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
40
+ --md-sys-color-tertiary-fixed: #e5f6da;
41
+ --md-sys-color-on-tertiary-fixed: #005234;
42
+ --md-sys-color-tertiary-fixed-dim: #c8eabc;
43
+ --md-sys-color-on-tertiary-fixed-variant: #005234;
44
+ --md-sys-color-surface-dim: rgb(218 217 224);
45
+ --md-sys-color-surface-bright: rgb(250 248 255);
52
46
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
53
- --md-sys-color-surface-container-low: rgb(243 244 233);
54
- --md-sys-color-surface-container: rgb(238 239 227);
55
- --md-sys-color-surface-container-high: rgb(232 233 222);
56
- --md-sys-color-surface-container-highest: rgb(226 227 216);
47
+ --md-sys-color-surface-container-low: rgb(244 243 250);
48
+ --md-sys-color-surface-container: rgb(238 237 244);
49
+ --md-sys-color-surface-container-high: rgb(232 231 239);
50
+ --md-sys-color-surface-container-highest: rgb(227 226 233);
57
51
  }
@@ -0,0 +1,23 @@
1
+ body {
2
+ font-variation-settings: 'FILL' 1;
3
+
4
+ /* shape corner */
5
+ --md-sys-shape-corner-none: 0px;
6
+ --md-sys-shape-corner-small: 5px;
7
+ --md-sys-shape-corner-medium: 10px;
8
+ --md-sys-shape-corner-large: 30px;
9
+ --md-sys-shape-corner-full: 999px;
10
+
11
+ /* md-switch */
12
+ --md-switch-selected-handle-color: var(--md-sys-color-on-primary);
13
+ --md-switch-selected-track-color: var(--md-sys-color-primary);
14
+
15
+ /* md component shapes */
16
+ --md-switch-handle-shape: var(--md-sys-shape-corner-full);
17
+ --md-switch-track-shape: var(--md-sys-shape-corner-full);
18
+ --md-filter-chip-container-shape: var(--md-sys-shape-corner-full);
19
+ --md-text-button-container-shape: var(--md-sys-shape-corner-small);
20
+ --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
21
+ --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
22
+ --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
23
+ }
@@ -3,87 +3,87 @@
3
3
  .md-typescale-display-small-prominent {
4
4
  font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
5
5
  var(--md-sys-typescale-display-small-size, 2.25rem) / var(--md-sys-typescale-display-small-line-height, 2.75rem)
6
- var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, Roboto));
6
+ var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, 'Roboto'));
7
7
  }
8
8
  .md-typescale-display-medium,
9
9
  .md-typescale-display-medium-prominent {
10
10
  font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
11
11
  var(--md-sys-typescale-display-medium-size, 2.8125rem) /
12
12
  var(--md-sys-typescale-display-medium-line-height, 3.25rem)
13
- var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto));
13
+ var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
14
14
  }
15
15
  .md-typescale-display-large,
16
16
  .md-typescale-display-large-prominent {
17
17
  font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
18
18
  var(--md-sys-typescale-display-large-size, 3.5625rem) / var(--md-sys-typescale-display-large-line-height, 4rem)
19
- var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, Roboto));
19
+ var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, 'Roboto'));
20
20
  }
21
21
  .md-typescale-headline-small,
22
22
  .md-typescale-headline-small-prominent {
23
23
  font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
24
24
  var(--md-sys-typescale-headline-small-size, 1.5rem) / var(--md-sys-typescale-headline-small-line-height, 2rem)
25
- var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto));
25
+ var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, 'Roboto'));
26
26
  }
27
27
  .md-typescale-headline-medium,
28
28
  .md-typescale-headline-medium-prominent {
29
29
  font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
30
30
  var(--md-sys-typescale-headline-medium-size, 1.75rem) /
31
31
  var(--md-sys-typescale-headline-medium-line-height, 2.25rem)
32
- var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, Roboto));
32
+ var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
33
33
  }
34
34
  .md-typescale-headline-large,
35
35
  .md-typescale-headline-large-prominent {
36
36
  font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
37
37
  var(--md-sys-typescale-headline-large-size, 2rem) / var(--md-sys-typescale-headline-large-line-height, 2.5rem)
38
- var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, Roboto));
38
+ var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, 'Roboto'));
39
39
  }
40
40
  .md-typescale-title-small,
41
41
  .md-typescale-title-small-prominent {
42
42
  font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
43
43
  var(--md-sys-typescale-title-small-size, 0.875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem)
44
- var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto));
44
+ var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, 'Roboto'));
45
45
  }
46
46
  .md-typescale-title-medium,
47
47
  .md-typescale-title-medium-prominent {
48
48
  font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
49
49
  var(--md-sys-typescale-title-medium-size, 1rem) / var(--md-sys-typescale-title-medium-line-height, 1.5rem)
50
- var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto));
50
+ var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
51
51
  }
52
52
  .md-typescale-title-large,
53
53
  .md-typescale-title-large-prominent {
54
54
  font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
55
55
  var(--md-sys-typescale-title-large-size, 1.375rem) / var(--md-sys-typescale-title-large-line-height, 1.75rem)
56
- var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, Roboto));
56
+ var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, 'Roboto'));
57
57
  }
58
58
  .md-typescale-body-small,
59
59
  .md-typescale-body-small-prominent {
60
60
  font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
61
61
  var(--md-sys-typescale-body-small-size, 0.75rem) / var(--md-sys-typescale-body-small-line-height, 1rem)
62
- var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto));
62
+ var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, 'Roboto'));
63
63
  }
64
64
  .md-typescale-body-medium,
65
65
  .md-typescale-body-medium-prominent {
66
66
  font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
67
67
  var(--md-sys-typescale-body-medium-size, 0.875rem) / var(--md-sys-typescale-body-medium-line-height, 1.25rem)
68
- var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));
68
+ var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
69
69
  }
70
70
  .md-typescale-body-large,
71
71
  .md-typescale-body-large-prominent {
72
72
  font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
73
73
  var(--md-sys-typescale-body-large-size, 1rem) / var(--md-sys-typescale-body-large-line-height, 1.5rem)
74
- var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));
74
+ var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, 'Roboto'));
75
75
  }
76
76
  .md-typescale-label-small,
77
77
  .md-typescale-label-small-prominent {
78
78
  font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
79
79
  var(--md-sys-typescale-label-small-size, 0.6875rem) / var(--md-sys-typescale-label-small-line-height, 1rem)
80
- var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
80
+ var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, 'Roboto'));
81
81
  }
82
82
  .md-typescale-label-medium,
83
83
  .md-typescale-label-medium-prominent {
84
84
  font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
85
85
  var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem)
86
- var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto));
86
+ var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
87
87
  }
88
88
  .md-typescale-label-medium-prominent {
89
89
  font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
@@ -92,7 +92,7 @@
92
92
  .md-typescale-label-large-prominent {
93
93
  font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
94
94
  var(--md-sys-typescale-label-large-size, 0.875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem)
95
- var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto));
95
+ var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, 'Roboto'));
96
96
  }
97
97
  .md-typescale-label-large-prominent {
98
98
  font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
@@ -0,0 +1,22 @@
1
+ body {
2
+ /* oops note style */
3
+ --oops-note-icon-font: normal 24px var(--md-icon-font, 'Material Symbols Outlined');
4
+ --oops-note-icon-color: var(--md-sys-color-on-surface);
5
+ --oops-note-icon-border: 2px solid var(--md-sys-color-outline);
6
+ --oops-note-icon-border-radius: 50px;
7
+ --oops-note-icon-padding: var(--padding-default);
8
+ --oops-note-title-margin: 7px 0 2px 0;
9
+ --oops-note-title-font: bold 14px var(--theme-font);
10
+ --oops-note-title-color: var(--md-sys-color-secondary);
11
+ --oops-note-description-font: normal 12px var(--theme-font);
12
+ --oops-note-description-color: var(--md-sys-color-primary);
13
+ }
14
+ @media only screen and (max-width: 460px) {
15
+ body {
16
+ --oops-note-icon-padding: var(--padding-narrow);
17
+ --oops-note-icon-font: normal 18px var(--md-icon-font, 'Material Symbols Outlined');
18
+ --oops-note-title-font: bold 13px var(--theme-font);
19
+ --oops-note-title-margin: var(--margin-narrow) 0 2px 0;
20
+ --oops-note-description-font: normal 0px var(--theme-font);
21
+ }
22
+ }
@@ -0,0 +1,47 @@
1
+ body {
2
+ --report-background-color: var(--md-sys-color-background);
3
+ --report-padding: 15px;
4
+ --report-title-margin: 0 0 0 10px;
5
+ --report-title-border: none;
6
+ --report-title-color: var(--md-sys-color-secondary);
7
+ --report-title-icon-color: var(--md-sys-color-primary);
8
+ --report-title-icon-margin: 0 3px 2px 0;
9
+ --report-title-icon-size: 14px;
10
+ --report-title-with-grid-padding: 0;
11
+ --report-component-border-radius: var(--border-radius);
12
+
13
+ --report-header-background-color: var(--md-sys-color-surface);
14
+ --report-header-border: 1px solid var(--report-header-border-color);
15
+ --report-header-border-color: var(--md-sys-color-outline);
16
+ --report-header-padding: 5px 0 5px 5px;
17
+ --report-header-color: var(--secondary-text-color);
18
+ --report-header-font: normal 1em/1.5 var(--theme-font);
19
+ --report-header-fontsize: 13px;
20
+
21
+ --report-record-background-color: #fff;
22
+ --report-record-odd-background-color: #f6f6f6;
23
+ --report-record-field-padding: 7px 10px;
24
+ --report-record-field-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
25
+ --report-record-wide-fontsize: 13px;
26
+ --report-record-focused-background-color: #ffde3b47;
27
+ --report-record-focused-border: 1px dashed rgba(0, 0, 0, 0.5);
28
+
29
+ --report-totalized-background-color: #efefef;
30
+ --report-totalized-border: 1px solid rgba(0, 0, 0, 0.1);
31
+ --report-totalized-color: var(--secondary-text-color);
32
+
33
+ --report-grouped-background-color: #607d8bbf;
34
+ --report-grouped-border: 1px solid rgba(0, 0, 0, 0.2);
35
+ --report-grouped-color: #fff;
36
+ }
37
+
38
+ @media print {
39
+ body {
40
+ --report-header-padding: 5px;
41
+ --report-record-field-padding: 5px;
42
+ --report-record-wide-fontsize: 10px;
43
+ --report-grouped-background-color: #d7d7d7;
44
+ --report-grouped-color: #000;
45
+ --report-totalized-color: #000;
46
+ }
47
+ }
@@ -1,13 +1,23 @@
1
1
  :root {
2
+ /* spacing */
3
+ --spacing-none: 0px;
2
4
  --spacing-tiny: 2px;
3
5
  --spacing-small: 4px;
4
6
  --spacing-medium: 8px;
5
7
  --spacing-large: 12px;
6
8
  --spacing-huge: 24px;
7
9
 
10
+ /* icon size */
8
11
  --icon-size-tiny: 14px;
9
12
  --icon-size-small: 18px;
10
13
  --icon-size-medium: 24px;
11
14
  --icon-size-large: 32px;
12
15
  --icon-size-huge: 48px;
16
+
17
+ /* form element height */
18
+ --form-element-height-tiny: 18px;
19
+ --form-element-height-small: 24px;
20
+ --form-element-height-medium: 30px;
21
+ --form-element-height-large: 40px;
22
+ --form-element-height-huge: 55px;
13
23
  }
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --status-danger-color: var(--md-sys-color-error, rgb(186 26 26));
2
+ --status-danger-color: var(--md-sys-color-error, #d14946);
3
3
  --status-warning-color: #ee8d03;
4
4
  --status-info-color: #398ace;
5
5
  --status-success-color: #35a24a;
@@ -0,0 +1,11 @@
1
+ body {
2
+ --tooltip-padding: 4px 4px 4px 4px;
3
+ --tooltip-background-color: rgba(0, 0, 0, 0.7);
4
+ --tooltip-font: bold 11px var(--theme-font);
5
+ /*
6
+ --tooltip-left-positon-left: auto;
7
+ --tooltip-left-position-top: 7px;
8
+ --tooltip-left-position-right: 110%;
9
+ --tooltip-left-position-animation: tooltip-left 0.3s ease-out 0s 1 normal;
10
+ */
11
+ }
@@ -1,51 +0,0 @@
1
- .dark-high-contrast {
2
- --md-sys-color-primary: rgb(244 255 223);
3
- --md-sys-color-surface-tint: rgb(177 209 138);
4
- --md-sys-color-on-primary: rgb(0 0 0);
5
- --md-sys-color-primary-container: rgb(181 213 142);
6
- --md-sys-color-on-primary-container: rgb(0 0 0);
7
- --md-sys-color-secondary: rgb(244 255 223);
8
- --md-sys-color-on-secondary: rgb(0 0 0);
9
- --md-sys-color-secondary-container: rgb(196 207 177);
10
- --md-sys-color-on-secondary-container: rgb(0 0 0);
11
- --md-sys-color-tertiary: rgb(234 255 252);
12
- --md-sys-color-on-tertiary: rgb(0 0 0);
13
- --md-sys-color-tertiary-container: rgb(164 212 208);
14
- --md-sys-color-on-tertiary-container: rgb(0 0 0);
15
- --md-sys-color-error: rgb(255 249 249);
16
- --md-sys-color-on-error: rgb(0 0 0);
17
- --md-sys-color-error-container: rgb(255 186 177);
18
- --md-sys-color-on-error-container: rgb(0 0 0);
19
- --md-sys-color-background: rgb(18 20 14);
20
- --md-sys-color-on-background: rgb(226 227 216);
21
- --md-sys-color-surface: rgb(18 20 14);
22
- --md-sys-color-on-surface: rgb(255 255 255);
23
- --md-sys-color-surface-variant: rgb(68 72 61);
24
- --md-sys-color-on-surface-variant: rgb(249 252 237);
25
- --md-sys-color-outline: rgb(201 204 190);
26
- --md-sys-color-outline-variant: rgb(201 204 190);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(226 227 216);
30
- --md-sys-color-inverse-on-surface: rgb(0 0 0);
31
- --md-sys-color-inverse-primary: rgb(26 48 0);
32
- --md-sys-color-primary-fixed: rgb(209 242 167);
33
- --md-sys-color-on-primary-fixed: rgb(0 0 0);
34
- --md-sys-color-primary-fixed-dim: rgb(181 213 142);
35
- --md-sys-color-on-primary-fixed-variant: rgb(12 26 0);
36
- --md-sys-color-secondary-fixed: rgb(224 235 204);
37
- --md-sys-color-on-secondary-fixed: rgb(0 0 0);
38
- --md-sys-color-secondary-fixed-dim: rgb(196 207 177);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(16 25 7);
40
- --md-sys-color-tertiary-fixed: rgb(192 240 236);
41
- --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
42
- --md-sys-color-tertiary-fixed-dim: rgb(164 212 208);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(0 26 25);
44
- --md-sys-color-surface-dim: rgb(18 20 14);
45
- --md-sys-color-surface-bright: rgb(56 58 50);
46
- --md-sys-color-surface-container-lowest: rgb(12 15 9);
47
- --md-sys-color-surface-container-low: rgb(26 28 22);
48
- --md-sys-color-surface-container: rgb(30 32 26);
49
- --md-sys-color-surface-container-high: rgb(40 43 36);
50
- --md-sys-color-surface-container-highest: rgb(51 54 46);
51
- }
@@ -1,51 +0,0 @@
1
- .dark-medium-contrast {
2
- --md-sys-color-primary: rgb(181 213 142);
3
- --md-sys-color-surface-tint: rgb(177 209 138);
4
- --md-sys-color-on-primary: rgb(12 26 0);
5
- --md-sys-color-primary-container: rgb(125 154 89);
6
- --md-sys-color-on-primary-container: rgb(0 0 0);
7
- --md-sys-color-secondary: rgb(196 207 177);
8
- --md-sys-color-on-secondary: rgb(16 25 7);
9
- --md-sys-color-secondary-container: rgb(138 149 121);
10
- --md-sys-color-on-secondary-container: rgb(0 0 0);
11
- --md-sys-color-tertiary: rgb(164 212 208);
12
- --md-sys-color-on-tertiary: rgb(0 26 25);
13
- --md-sys-color-tertiary-container: rgb(107 153 149);
14
- --md-sys-color-on-tertiary-container: rgb(0 0 0);
15
- --md-sys-color-error: rgb(255 186 177);
16
- --md-sys-color-on-error: rgb(55 0 1);
17
- --md-sys-color-error-container: rgb(255 84 73);
18
- --md-sys-color-on-error-container: rgb(0 0 0);
19
- --md-sys-color-background: rgb(18 20 14);
20
- --md-sys-color-on-background: rgb(226 227 216);
21
- --md-sys-color-surface: rgb(18 20 14);
22
- --md-sys-color-on-surface: rgb(251 252 240);
23
- --md-sys-color-surface-variant: rgb(68 72 61);
24
- --md-sys-color-on-surface-variant: rgb(201 204 190);
25
- --md-sys-color-outline: rgb(161 164 151);
26
- --md-sys-color-outline-variant: rgb(129 133 120);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(226 227 216);
30
- --md-sys-color-inverse-on-surface: rgb(40 43 36);
31
- --md-sys-color-inverse-primary: rgb(54 79 23);
32
- --md-sys-color-primary-fixed: rgb(205 237 163);
33
- --md-sys-color-on-primary-fixed: rgb(8 20 0);
34
- --md-sys-color-primary-fixed-dim: rgb(177 209 138);
35
- --md-sys-color-on-primary-fixed-variant: rgb(37 61 5);
36
- --md-sys-color-secondary-fixed: rgb(220 231 200);
37
- --md-sys-color-on-secondary-fixed: rgb(11 20 3);
38
- --md-sys-color-secondary-fixed-dim: rgb(191 203 173);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(48 57 36);
40
- --md-sys-color-tertiary-fixed: rgb(188 236 231);
41
- --md-sys-color-on-tertiary-fixed: rgb(0 20 19);
42
- --md-sys-color-tertiary-fixed-dim: rgb(160 208 203);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(8 61 58);
44
- --md-sys-color-surface-dim: rgb(18 20 14);
45
- --md-sys-color-surface-bright: rgb(56 58 50);
46
- --md-sys-color-surface-container-lowest: rgb(12 15 9);
47
- --md-sys-color-surface-container-low: rgb(26 28 22);
48
- --md-sys-color-surface-container: rgb(30 32 26);
49
- --md-sys-color-surface-container-high: rgb(40 43 36);
50
- --md-sys-color-surface-container-highest: rgb(51 54 46);
51
- }
@@ -1,51 +0,0 @@
1
- .light-high-contrast {
2
- --md-sys-color-primary: rgb(20 39 0);
3
- --md-sys-color-surface-tint: rgb(76 102 43);
4
- --md-sys-color-on-primary: rgb(255 255 255);
5
- --md-sys-color-primary-container: rgb(49 74 18);
6
- --md-sys-color-on-primary-container: rgb(255 255 255);
7
- --md-sys-color-secondary: rgb(28 37 17);
8
- --md-sys-color-on-secondary: rgb(255 255 255);
9
- --md-sys-color-secondary-container: rgb(60 70 47);
10
- --md-sys-color-on-secondary-container: rgb(255 255 255);
11
- --md-sys-color-tertiary: rgb(0 39 37);
12
- --md-sys-color-on-tertiary: rgb(255 255 255);
13
- --md-sys-color-tertiary-container: rgb(26 74 71);
14
- --md-sys-color-on-tertiary-container: rgb(255 255 255);
15
- --md-sys-color-error: rgb(78 0 2);
16
- --md-sys-color-on-error: rgb(255 255 255);
17
- --md-sys-color-error-container: rgb(140 0 9);
18
- --md-sys-color-on-error-container: rgb(255 255 255);
19
- --md-sys-color-background: rgb(249 250 239);
20
- --md-sys-color-on-background: rgb(26 28 22);
21
- --md-sys-color-surface: rgb(249 250 239);
22
- --md-sys-color-on-surface: rgb(0 0 0);
23
- --md-sys-color-surface-variant: rgb(225 228 213);
24
- --md-sys-color-on-surface-variant: rgb(33 37 28);
25
- --md-sys-color-outline: rgb(64 68 57);
26
- --md-sys-color-outline-variant: rgb(64 68 57);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(47 49 42);
30
- --md-sys-color-inverse-on-surface: rgb(255 255 255);
31
- --md-sys-color-inverse-primary: rgb(214 247 172);
32
- --md-sys-color-primary-fixed: rgb(49 74 18);
33
- --md-sys-color-on-primary-fixed: rgb(255 255 255);
34
- --md-sys-color-primary-fixed-dim: rgb(28 51 0);
35
- --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36
- --md-sys-color-secondary-fixed: rgb(60 70 47);
37
- --md-sys-color-on-secondary-fixed: rgb(255 255 255);
38
- --md-sys-color-secondary-fixed-dim: rgb(38 48 27);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40
- --md-sys-color-tertiary-fixed: rgb(26 74 71);
41
- --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42
- --md-sys-color-tertiary-fixed-dim: rgb(0 51 49);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44
- --md-sys-color-surface-dim: rgb(218 219 208);
45
- --md-sys-color-surface-bright: rgb(249 250 239);
46
- --md-sys-color-surface-container-lowest: rgb(255 255 255);
47
- --md-sys-color-surface-container-low: rgb(243 244 233);
48
- --md-sys-color-surface-container: rgb(238 239 227);
49
- --md-sys-color-surface-container-high: rgb(232 233 222);
50
- --md-sys-color-surface-container-highest: rgb(226 227 216);
51
- }
@@ -1,51 +0,0 @@
1
- .light-medium-contrast {
2
- --md-sys-color-primary: rgb(49 74 18);
3
- --md-sys-color-surface-tint: rgb(76 102 43);
4
- --md-sys-color-on-primary: rgb(255 255 255);
5
- --md-sys-color-primary-container: rgb(97 125 63);
6
- --md-sys-color-on-primary-container: rgb(255 255 255);
7
- --md-sys-color-secondary: rgb(60 70 47);
8
- --md-sys-color-on-secondary: rgb(255 255 255);
9
- --md-sys-color-secondary-container: rgb(110 120 94);
10
- --md-sys-color-on-secondary-container: rgb(255 255 255);
11
- --md-sys-color-tertiary: rgb(26 74 71);
12
- --md-sys-color-on-tertiary: rgb(255 255 255);
13
- --md-sys-color-tertiary-container: rgb(79 125 121);
14
- --md-sys-color-on-tertiary-container: rgb(255 255 255);
15
- --md-sys-color-error: rgb(140 0 9);
16
- --md-sys-color-on-error: rgb(255 255 255);
17
- --md-sys-color-error-container: rgb(218 52 46);
18
- --md-sys-color-on-error-container: rgb(255 255 255);
19
- --md-sys-color-background: rgb(249 250 239);
20
- --md-sys-color-on-background: rgb(26 28 22);
21
- --md-sys-color-surface: rgb(249 250 239);
22
- --md-sys-color-on-surface: rgb(26 28 22);
23
- --md-sys-color-surface-variant: rgb(225 228 213);
24
- --md-sys-color-on-surface-variant: rgb(64 68 57);
25
- --md-sys-color-outline: rgb(93 97 85);
26
- --md-sys-color-outline-variant: rgb(120 124 112);
27
- --md-sys-color-shadow: rgb(0 0 0);
28
- --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(47 49 42);
30
- --md-sys-color-inverse-on-surface: rgb(241 242 230);
31
- --md-sys-color-inverse-primary: rgb(177 209 138);
32
- --md-sys-color-primary-fixed: rgb(97 125 63);
33
- --md-sys-color-on-primary-fixed: rgb(255 255 255);
34
- --md-sys-color-primary-fixed-dim: rgb(73 100 41);
35
- --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36
- --md-sys-color-secondary-fixed: rgb(110 120 94);
37
- --md-sys-color-on-secondary-fixed: rgb(255 255 255);
38
- --md-sys-color-secondary-fixed-dim: rgb(85 95 71);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40
- --md-sys-color-tertiary-fixed: rgb(79 125 121);
41
- --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42
- --md-sys-color-tertiary-fixed-dim: rgb(54 100 96);
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44
- --md-sys-color-surface-dim: rgb(218 219 208);
45
- --md-sys-color-surface-bright: rgb(249 250 239);
46
- --md-sys-color-surface-container-lowest: rgb(255 255 255);
47
- --md-sys-color-surface-container-low: rgb(243 244 233);
48
- --md-sys-color-surface-container: rgb(238 239 227);
49
- --md-sys-color-surface-container-high: rgb(232 233 222);
50
- --md-sys-color-surface-container-highest: rgb(226 227 216);
51
- }