@operato/data-tree 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 (24) hide show
  1. package/.storybook/preview.js +52 -0
  2. package/CHANGELOG.md +34 -0
  3. package/dist/stories/data-tree-vertical.stories.js +7 -0
  4. package/dist/stories/data-tree-vertical.stories.js.map +1 -1
  5. package/dist/stories/data-tree.stories.js +7 -0
  6. package/dist/stories/data-tree.stories.js.map +1 -1
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +4 -4
  9. package/stories/data-tree-vertical.stories.ts +7 -0
  10. package/stories/data-tree.stories.ts +7 -0
  11. package/themes/app-theme.css +51 -58
  12. package/themes/calendar-theme.css +59 -0
  13. package/themes/dark.css +51 -0
  14. package/themes/form-theme.css +3 -1
  15. package/themes/grist-theme.css +111 -104
  16. package/themes/layout-theme.css +94 -0
  17. package/themes/light.css +51 -0
  18. package/themes/material-theme.css +23 -0
  19. package/themes/md-typescale-styles.css +100 -0
  20. package/themes/oops-theme.css +6 -10
  21. package/themes/report-theme.css +5 -5
  22. package/themes/spacing.css +23 -0
  23. package/themes/state-color.css +6 -0
  24. package/themes/tooltip-theme.css +11 -0
package/themes/dark.css ADDED
@@ -0,0 +1,51 @@
1
+ .dark {
2
+ --md-sys-color-primary: rgb(178 197 255);
3
+ --md-sys-color-surface-tint: rgb(178 197 255);
4
+ --md-sys-color-on-primary: rgb(24 46 96);
5
+ --md-sys-color-primary-container: rgb(49 69 120);
6
+ --md-sys-color-on-primary-container: rgb(218 226 255);
7
+ --md-sys-color-secondary: rgb(143 207 243);
8
+ --md-sys-color-on-secondary: rgb(0 53 73);
9
+ --md-sys-color-secondary-container: rgb(0 76 104);
10
+ --md-sys-color-on-secondary-container: rgb(195 232 255);
11
+ --md-sys-color-tertiary: #cffce3;
12
+ --md-sys-color-on-tertiary: rgb(0 56 35);
13
+ --md-sys-color-tertiary-container: #005234;
14
+ --md-sys-color-on-tertiary-container: #cffce3;
15
+ --md-sys-color-error: #fbafa9;
16
+ --md-sys-color-on-error: #fe594e;
17
+ --md-sys-color-error-container: #fe594e;
18
+ --md-sys-color-on-error-container: #fbafa9;
19
+ --md-sys-color-background: rgb(18 19 24);
20
+ --md-sys-color-on-background: rgb(227 226 233);
21
+ --md-sys-color-surface: rgb(18 19 24);
22
+ --md-sys-color-on-surface: rgb(227 226 233);
23
+ --md-sys-color-surface-variant: rgb(69 70 79);
24
+ --md-sys-color-on-surface-variant: rgb(197 198 208);
25
+ --md-sys-color-outline: rgb(143 144 154);
26
+ --md-sys-color-outline-variant: rgb(69 70 79);
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(227 226 233);
30
+ --md-sys-color-inverse-on-surface: rgb(47 48 54);
31
+ --md-sys-color-inverse-primary: rgb(73 93 146);
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: rgb(178 197 255);
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: #c7e6d5;
41
+ --md-sys-color-on-tertiary-fixed: rgb(0 33 19);
42
+ --md-sys-color-tertiary-fixed-dim: #c7e6d5;
43
+ --md-sys-color-on-tertiary-fixed-variant: rgb(0 82 52);
44
+ --md-sys-color-surface-dim: rgb(18 19 24);
45
+ --md-sys-color-surface-bright: rgb(56 57 63);
46
+ --md-sys-color-surface-container-lowest: rgb(13 14 19);
47
+ --md-sys-color-surface-container-low: rgb(26 27 33);
48
+ --md-sys-color-surface-container: rgb(30 31 37);
49
+ --md-sys-color-surface-container-high: rgb(41 42 47);
50
+ --md-sys-color-surface-container-highest: rgb(51 52 58);
51
+ }
package/themes/form-theme.css CHANGED
@@ -24,6 +24,8 @@ body {
24
24
  --search-form-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
25
25
  --search-form-box-padding: 15px 30px 15px 15px;
26
26
 
27
+ --ox-input-border: none;
28
+
27
29
  --file-uploader-border: 1px solid rgba(0, 0, 0, 0.1);
28
30
  --file-uploader-background-color: var(--md-sys-color-background);
29
31
  --file-uploader-font: normal 12px/20px var(--theme-font);
@@ -38,7 +40,7 @@ body {
38
40
  --file-uploader-li-padding: 2px 5px 0px 5px;
39
41
  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
40
42
  --file-uploader-li-icon-margin: 2px 0 2px 5px;
41
- --file-uploader-li-icon-font: normal 15px var(--mdc-icon-font, 'Material Icons');
43
+ --file-uploader-li-icon-font: normal 15px var(--md-icon-font, 'Material Symbols Outlined');
42
44
  --file-uploader-li-icon-focus-color: var(--md-sys-color-primary);
43
45
  }
44
46
 
package/themes/grist-theme.css CHANGED
@@ -1,154 +1,161 @@
1
1
  body {
2
2
  --grid-container-border-color: 1px solid rgba(0, 0, 0, 0.09);
3
3
  --grid-container-border-width: 1px 0;
4
+ --grid-wrap-container-border: 0px solid transparent;
5
+ --grid-wrap-container-border-width: 0;
4
6
 
5
- --grist-background-color: var(--main-section-background-color);
7
+ --grist-background-color: transparent;
6
8
  --grist-title-margin: 0 0 0 10px;
7
9
  --grist-title-border: none;
8
- --grist-title-font: bold 16px var(--theme-font);
9
- --grist-title-color: var(--secondary-color);
10
- --grist-title-font: bold 16px var(--theme-font);
11
- --grist-title-icon-color: var(--primary-color);
10
+ --grist-title-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 1.1em
11
+ var(--theme-font, 'Roboto');
12
+ --grist-title-color: var(--md-sys-color-on-surface);
13
+ --grist-title-icon-color: var(--md-sys-color-on-surface-variant);
12
14
  --grist-title-icon-margin: 0 3px 2px 0;
13
- --grist-title-icon-size: var(--fontsize-default);
15
+ --grist-title-icon-size: var(--md-sys-typescale-label-large-size, 0.875rem);
14
16
  --grist-title-with-grid-padding: 0;
15
17
 
16
- --grist-object-editor-font: normal 1em var(--theme-font);
17
- --grist-object-editor-color: var(--secondary-color);
18
+ --grist-object-editor-font: normal 1em var(--theme-font, 'Roboto');
19
+ --grist-object-editor-color: var(--md-sys-color-on-surface);
18
20
 
19
21
  --grist-input-progress-border: 1px solid rgba(255, 255, 255, 0.5);
20
22
  --grist-input-progress-background: rgba(121, 110, 110, 0.1);
21
- --grist-input-progress-bar-background: #4ac5fd;
22
- --grist-input-progress-bar-color: var(--theme-white-color);
23
+ --grist-input-progress-bar-background: var(--md-sys-color-primary-fixed-dim);
24
+ --grist-input-progress-bar-color: var(--md-sys-color-on-surface-variant);
23
25
 
24
- --grid-header-background-color: transparent;
25
- --grid-header-top-border: 2px solid rgba(var(--secondary-color-rgb), 0.7);
26
+ --grid-header-background-color: var(--md-sys-color-surface-container-low);
27
+ --grid-header-top-border: 2px solid var(--md-sys-color-primary);
26
28
  --grid-header-bottom-border: var(--grid-container-border-color);
27
- --grid-header-border-color: rgba(var(--primary-color-rgb), 0.3);
28
- --grid-header-padding: var(--padding-default) 0 var(--padding-narrow) var(--padding-default);
29
+ --grid-header-border-color: var(--md-sys-color-outline);
30
+ --grid-header-padding: var(--spacing-small) var(--spacing-tiny);
29
31
  --grid-header-sorter-size: 18px;
30
32
  --grid-header-splitter-border: var(--grid-container-border-color);
31
- --grid-header-splitter-border-hover: 1px solid var(--primary-color);
32
- --grid-header-color: rgba(var(--secondary-color-rgb), 0.8);
33
- --grid-header-font: bold var(--fontsize-small) var(--theme-font);
34
- --grid-header-filter-title-color: var(--primary-text-color);
35
- --grid-header-filter-title-font: normal 12px var(--theme-font);
36
- --grid-header-filter-title-icon-color: var(--primary-color);
37
-
38
- --grid-body-bottom-border: 1px solid rgba(var(--secondary-color-rgb), 0.2);
39
-
40
- --grid-record-background-color: var(--theme-white-color);
41
- --grid-record-odd-background-color: #f9f7f5;
42
- --grid-record-padding: 0 5px 0 5px;
43
- --grid-record-color: var(--secondary-color);
44
- --grid-record-color-hover: var(--primary-color);
45
- --grid-record-wide-fontsize: var(--fontsize-small);
46
- --grid-record-selected-background-color: #f1f8e9;
47
- --grid-record-selected-color: var(--grid-record-color);
48
- --grid-record-focused-border: 1px solid var(--primary-color);
49
- --grid-record-focused-cell-background-color: rgba(var(--primary-color-rgb), 0.25);
50
- --grid-record-focused-cell-border: 1px dashed var(--primary-color);
33
+ --grid-header-splitter-border-hover: 1px solid var(--md-sys-color-inverse-primary);
34
+ --grid-header-color: var(--md-sys-color-primary);
35
+ --grid-header-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
36
+ var(--fontsize-small) var(--theme-font, 'Roboto');
37
+ --grid-header-filter-title-color: var(--md-sys-color-on-surface);
38
+ --grid-header-filter-title-font: normal 12px var(--theme-font, 'Roboto');
39
+ --grid-header-filter-title-icon-color: var(--md-sys-color-on-surface-variant);
40
+
41
+ --grid-body-bottom-border: var(--grid-header-bottom-border);
42
+
43
+ --grid-gutter-padding: var(--spacing-tiny) 0;
44
+
45
+ --grid-record-background-color: var(--md-sys-color-surface-container-lowest);
46
+ --grid-record-odd-background-color: var(--md-sys-color-surface-container-low);
47
+ --grid-record-padding: var(--spacing-small) var(--spacing-medium);
48
+ --grid-record-color: var(--md-sys-color-on-surface-variant);
49
+ --grid-record-color-hover: var(--md-sys-color-primary);
50
+ --grid-record-wide-fontsize: var(--md-sys-typescale-label-large-size, 0.875rem);
51
+ --grid-record-selected-background-color: var(--md-sys-color-primary-container);
52
+ --grid-record-selected-color: var(--md-sys-color-on-primary-container);
53
+ --grid-record-focused-border: 1px solid var(--md-sys-color-outline-variant);
54
+ --grid-record-focused-cell-background-color: var(--md-sys-color-secondary-container);
55
+ --grid-record-focused-cell-border: 1px dashed var(--md-sys-color-outline);
51
56
  --grid-record-focused-box-shadow: 0px 2px 0px 0px rgb(0 0 0 / 10%);
52
- --grid-record-emphasized-background-color: var(--primary-color);
53
- --grid-record-emphasized-color: var(--theme-white-color);
54
- --grid-record-editing-background-color: var(--theme-white-color);
55
- --grid-record-editing-border: 1px dashed rgba(var(--primary-color-rgb), 0.4);
56
- --grid-record-fontsize: var(--fontsize-large);
57
+ --grid-record-emphasized-background-color: var(--md-sys-color-secondary-fixed-dim);
58
+ --grid-record-emphasized-color: var(--md-sys-color-on-secondary-fixed-variant);
59
+ --grid-record-editing-background-color: var(--md-sys-color-inverse-primary);
60
+ --grid-record-editing-border: 1px dashed rgba(var(--md-sys-color-primary-rgb), 0.4);
61
+ --grid-record-fontsize: var(--md-sys-typescale-label-large-size, 0.875rem);
57
62
  --grid-record-border-bottom: var(--grid-container-border-color);
58
63
 
59
- --grid-record-dirty-border-top: 24px solid rgba(var(--primary-color-rgb), 0.6);
64
+ --grid-record-dirty-border-top: 24px solid rgba(var(--md-sys-color-primary-rgb), 0.6);
60
65
  --grid-record-dirty-border-left: 24px solid transparent;
61
- --grid-record-dirty-icon-font: bold 10px/12px var(--mdc-icon-font, 'Material Icons');
66
+ --grid-record-dirty-icon-font: bold 10px/12px var(--md-icon-font, 'Material Symbols Outlined');
62
67
  --grid-record-dirty-icon-size: var(--fontsize-large);
63
- --grid-record-dirty-color: var(--theme-white-color);
64
-
65
- --grid-footer-background-color: transparent;
66
- --grid-footer-font-size: var(--fontsize-default);
67
- --grid-footer-color: var(--secondary-color);
68
- --grid-footer-limit-color: rgba(var(--secondary-color-rgb), 0.6);
69
- --grid-footer-inactive-color: var(--grid-footer-limit-color);
70
- --grid-footer-padding: var(--padding-default) var(--padding-narrow);
71
-
72
- --data-list-background-color: var(--main-section-background-color);
73
- --data-list-item-margin: var(--margin-default) 0 var(--margin-default) var(--margin-wide);
74
- --data-list-item-padding: var(--padding-default) var(--padding-wide);
68
+ --grid-record-dirty-color: var(--md-sys-color-surface);
69
+
70
+ --grid-footer-background-color: var(--md-sys-color-surface-container-low);
71
+ --grid-footer-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
72
+ --grid-footer-color: var(--md-sys-color-primary);
73
+ --grid-footer-limit-color: var(--md-ref-palette-neutral40, #5f5f5f);
74
+ --grid-footer-inactive-color: var(--md-ref-palette-neutral40, #5f5f5f);
75
+ --grid-footer-padding: var(--spacing-small) var(--spacing-medium);
76
+
77
+ --data-list-background-color: var(--md-sys-color-surface-container-lowest);
78
+ --data-list-item-margin: var(--spacing-medium);
79
+ --data-list-item-padding: var(--spacing-medium) var(--spacing-large);
75
80
  --data-list-item-border-bottom: var(--grid-container-border-color);
76
- --data-list-item-name-font: bold 1em/1em var(--theme-font);
77
- --data-list-item-name-color: var(--secondary-color);
78
- --data-list-item-disc-font: normal 0.9em/1em var(--theme-font);
79
- --data-list-item-disc-color: var(--secondary-text-color);
80
- --data-list-item-etc-label-font: bold 1em/1em var(--theme-font);
81
- --data-list-item-etc-font: normal 0.8em/1em var(--theme-font);
82
- --data-list-item-etc-color: #585858;
81
+ --data-list-item-name-font: bold 1.1em var(--theme-font, 'Roboto');
82
+ --data-list-item-name-color: var(--md-sys-color-secondary);
83
+ --data-list-item-disc-font: normal 0.9em var(--theme-font, 'Roboto');
84
+ --data-list-item-disc-color: var(--md-sys-color-on-tertiary-container);
85
+ --data-list-item-etc-label-font: bold 1em/1em var(--theme-font, 'Roboto');
86
+ --data-list-item-etc-font: normal 0.9em/1em var(--theme-font, 'Roboto');
87
+ --data-list-item-etc-color: var(--md-ref-palette-neutral50, #787878);
83
88
  --data-list-item-icon-font: normal 1em/1em;
84
- --data-list-item-icon-color: var(--secondary-text-color);
89
+ --data-list-item-icon-color: var(--md-sys-color-on-secondary);
85
90
  --data-list-selected-background-color: var(--grid-record-selected-background-color);
86
91
  --data-list-fab-position-horizontal: 15px;
87
92
  --data-list-fab-position-vertical: 15px;
88
- --data-list-fab-color: var(--primary-color);
93
+ --data-list-fab-color: var(--md-sys-color-primary);
89
94
  --data-list-fab-shadow: var(--box-shadow);
90
95
 
91
- --data-card-background-color: var(--main-section-background-color);
92
- --data-card-record-card-background-color: var(--theme-white-color);
93
- --data-card-record-card-border: var(--border-dim-color);
94
- --data-card-record-card-border-hover: 1px solid var(--primary-color);
96
+ --data-card-background-color: var(--md-sys-color-surface-container);
97
+ --data-card-record-card-background-color: var(--md-sys-color-surface-container-lowest);
98
+ --data-card-record-card-border: var(--grid-container-border-color);
99
+ --data-card-record-card-border-hover: 1px solid var(--md-sys-color-primary);
95
100
  --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
96
- --data-card-record-card-selected-border: 1px solid var(--primary-color);
97
- --data-card-record-card-border-radius: var(--border-radius);
98
- --data-card-item-margin: var(--margin-default) 0 var(--margin-default) var(--margin-wide);
99
- --data-card-item-padding: var(--padding-default) var(--padding-wide);
101
+ --data-card-record-card-selected-border: 1px solid var(--md-sys-color-primary);
102
+ --data-card-record-card-border-radius: var(--md-sys-shape-corner-small);
103
+ --data-card-item-margin: var(--spacing-medium);
104
+ --data-card-item-padding: var(--spacing-medium) var(--spacing-large);
100
105
  --data-card-item-border-bottom: var(--grid-container-border-color);
101
- --data-card-item-name-font: bold 1.2em/1em var(--theme-font);
102
- --data-card-item-name-color: var(--secondary-text-color);
103
- --data-card-item-name-label-font: normal 0.65em/0.8em var(--theme-font);
104
- --data-card-item-name-label-color: rgba(var(--secondary-color-rgb), 0.8);
105
- --data-card-item-disc-font: normal 0.9em/1em var(--theme-font);
106
- --data-card-item-disc-color: var(--primary-color);
107
- --data-card-item-etc-label-font: normal 1em/1em var(--theme-font);
108
- --data-card-item-etc-font: bold 0.8em/1em var(--theme-font);
109
- --data-card-item-etc-color: var(--secondary-color);
106
+ --data-card-item-name-font: bold 1.1em var(--theme-font, 'Roboto');
107
+ --data-card-item-name-color: var(--md-sys-color-secondary);
108
+ --data-card-item-name-label-font: normal 0.65em/0.8em var(--theme-font, 'Roboto');
109
+ --data-card-item-name-label-color: var(--md-sys-color-secondary);
110
+ --data-card-item-disc-font: normal 0.9em var(--theme-font, 'Roboto');
111
+ --data-card-item-disc-color: var(--md-sys-color-tertiary);
112
+ --data-card-item-etc-label-font: normal 1em/1em var(--theme-font, 'Roboto');
113
+ --data-card-item-etc-font: normal 0.9em/1em var(--theme-font, 'Roboto');
114
+ --data-card-item-etc-color: var(--md-ref-palette-neutral50, #787878);
110
115
  --data-card-item-icon-font: normal 1em/1em;
111
- --data-card-item-icon-color: var(--secondary-text-color);
112
- --data-card-item-btn-border: var(--border-dim-color);
113
- --data-card-item-btn-border-radius: var(--border-radius);
114
- --data-card-item-btn-padding: var(--padding-narrow);
116
+ --data-card-item-icon-color: var(--md-sys-color-on-secondary);
117
+ --data-card-item-btn-border: var(--grid-container-border-color);
118
+ --data-card-item-btn-border-radius: var(--md-sys-shape-corner-small);
119
+ --data-card-item-btn-padding: var(--spacing-small);
115
120
  --data-card-selected-background-color: var(--grid-record-selected-background-color);
116
121
  --data-card-fab-position-horizontal: 15px;
117
122
  --data-card-fab-position-vertical: 15px;
118
- --data-card-fab-color: var(--primary-color);
123
+ --data-card-fab-color: var(--md-sys-color-primary);
119
124
  --data-card-fab-shadow: var(--box-shadow);
120
125
  --data-card-thumbnail-height: 140px;
121
- --data-card-thumbnail-border-bottom: var(--border-dim-color);
126
+ --data-card-thumbnail-border-bottom: var(--grid-container-border-color);
122
127
  --data-card-attachimg-height: 70px;
123
128
 
124
- --record-view-background-color: var(--main-section-background-color);
125
- --record-view-gap: var(--margin-narrow) 0;
126
- --record-view-padding: var(--padding-default);
127
- --record-view-label-font: bold 15px var(--theme-font);
128
- --record-view-label-color: var(--secondary-color);
129
+ --record-view-background-color: var(--md-sys-color-surface-container);
130
+ --record-view-gap: var(--spacing-small) 0;
131
+ --record-view-padding: var(--spacing-medium);
132
+ --record-view-label-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 15px
133
+ var(--theme-font, 'Roboto');
134
+ --record-view-label-color: var(--md-sys-color-secondary);
129
135
  --record-view-label-icon-size: var(--fontsize-small);
130
- --record-view-font: normal 15px var(--theme-font);
131
- --record-view-color: var(--secondary-color);
132
- --record-view-focus-color: var(--primary-color);
133
- --record-view-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
134
- --record-view-edit-border-bottom: 2px solid var(--primary-color);
135
- --record-view-item-padding: var(--padding-default);
136
-
137
- --record-view-footer-background: #586272;
138
- --record-view-footer-button-border: 1px solid rgba(0, 0, 0, 0.3);
136
+ --record-view-font: normal 15px var(--theme-font, 'Roboto');
137
+ --record-view-color: var(--md-sys-color-secondary);
138
+ --record-view-focus-color: var(--md-sys-color-primary);
139
+ --record-view-border-bottom: var(--grid-container-border-color);
140
+ --record-view-edit-border-bottom: 2px solid var(--md-sys-color-primary);
141
+ --record-view-item-padding: var(--spacing-medium);
142
+
143
+ --record-view-footer-background: var(--md-ref-palette-neutral50, #787878);
144
+ --record-view-footer-button-border: var(--grid-container-border-color);
139
145
  --record-view-footer-button-border-width: 0 0 0 1px;
140
146
  --record-view-footer-button-font: 17px;
141
- --record-view-footer-button-color: var(--theme-white-color);
147
+ --record-view-footer-button-color: var(--md-sys-color-surface);
142
148
  --record-view-footer-iconbutton-size: 35px;
143
- --record-view-footer-focus-background: var(--primary-color);
149
+ --record-view-footer-focus-background: var(--md-sys-color-primary);
144
150
 
145
- --ox-grist-padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);
151
+ --ox-grist-padding: var(--spacing-medium);
146
152
  }
147
153
 
148
154
  @media only screen and (max-width: 460px) {
149
155
  body {
150
- --record-view-label-font: bold 15px/32px var(--theme-font);
151
- --record-view-font: normal 15px/32px var(--theme-font);
156
+ --record-view-label-font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 15px/32px
157
+ var(--theme-font, 'Roboto');
158
+ --record-view-font: normal 15px/32px var(--theme-font, 'Roboto');
152
159
  --ox-grist-padding: 0;
153
160
  }
154
161
  }
package/themes/layout-theme.css ADDED
@@ -0,0 +1,94 @@
1
+ body {
2
+ --header-bar-background-color: var(--md-sys-color-primary);
3
+ --header-bar-icon-size: var(--icon-default-size);
4
+ --header-bar-title: bold 17.5px var(--theme-font);
5
+ --header-bar-color: var(--md-sys-color-on-primary);
6
+ --header-bar-height: 45px;
7
+
8
+ --nav-bar-background-color: var(--md-sys-color-primary-container);
9
+
10
+ --group-bar-background-color: var(--md-sys-color-secondary-container);
11
+ --group-bar-textbutton: 16px/32px var(--theme-font);
12
+ --group-bar-textbutton-active: bold var(--group-bar-textbutton);
13
+ --group-bar-active-line-color: var(--md-sys-color-on-secondary-container);
14
+ --group-bar-line: solid 3px rgba(0, 0, 0, 0.2);
15
+
16
+ --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
17
+
18
+ --aside-background-color: var(--md-sys-color-secondary-container);
19
+ --aside-list-textbtton: 18px var(--theme-font);
20
+ --aside-list-icon: var(--icon-default-size);
21
+ --aside-list-bottom-line: var(--md-sys-color-outline);
22
+ --aside-list-detail-background-color: #fff;
23
+ --aside-list-detail-text: 14px var(--md-sys-color-on-secondary-container);
24
+
25
+ --footer-bar-border-top: 1px solid rgba(0, 0, 0, 0.2);
26
+
27
+ --button-container-margin: inintial;
28
+ --button-container-padding: 0 var(--padding-default) var(--padding-wide) var(--padding-default);
29
+ --button-container-background: transparent;
30
+ --button-container-height: initial;
31
+ --button-container-align: right;
32
+ --button-container-button-background-color: var(--md-sys-color-secondary);
33
+ --button-container-button-border-radius: var(--button-border-radius);
34
+ --button-container-button-margin: var(--button-margin);
35
+ --button-container-button-font: bold var(--fontsize-large) var(--theme-font);
36
+ --button-container-button-color: var(--md-sys-color-on-primary);
37
+ --button-container-button-height: initial;
38
+ --button-container-button-border: var(--button-border);
39
+
40
+ --popup-content-background-color: var(--md-sys-color-background);
41
+ --popup-content-color: var(--md-sys-color-on-background);
42
+ --popup-content-padding: 10px 20px;
43
+
44
+ /* components - floating overlay style */
45
+ --overlay-center-small-width: 30%;
46
+ --overlay-center-small-height: 30%;
47
+ --overlay-center-normal-width: 50%;
48
+ --overlay-center-normal-height: 50%;
49
+ --overlay-center-large-width: 75%;
50
+ --overlay-center-large-height: 75%;
51
+ --overlay-header-height: var(--header-bar-height);
52
+ --overlay-header-background-color: var(--header-bar-background-color);
53
+ --overlay-header-color: #fff;
54
+ --overlay-header-font: var(--header-bar-title);
55
+ --overlay-background-color: rgba(0, 0, 0, 0.5);
56
+ --overlay-margin-bottom: 0px;
57
+
58
+ /* components - resize splitter style */
59
+ --splitter-background-color: rgba(0, 0, 0, 0.1);
60
+ --splitter-hover-background-color: rgba(0, 0, 0, 0.1);
61
+ }
62
+
63
+ @media only screen and (max-width: 460px) {
64
+ body {
65
+ --button-container-margin: 0 -15px;
66
+ --button-container-padding: 0 0 0 0;
67
+ --button-container-background: #586272;
68
+ --button-container-height: 50px;
69
+ --button-container-align: right;
70
+ --button-container-button-background-color: transparent;
71
+ --button-container-button-border-radius: 0;
72
+ --button-container-button-margin: 0;
73
+ --button-container-button-height: 50px;
74
+ --button-container-button-border: 1px solid rgba(0, 0, 0, 0.1);
75
+
76
+ --overlay-center-small-width: 100%;
77
+ --overlay-center-small-height: 100%;
78
+ --overlay-center-normal-width: 100%;
79
+ --overlay-center-normal-height: 100%;
80
+ --overlay-center-large-width: 100%;
81
+ --overlay-center-large-height: 100%;
82
+ }
83
+ }
84
+
85
+ @media (min-width: 461px) and (max-width: 1024px) {
86
+ body {
87
+ --overlay-center-small-width: 40%;
88
+ --overlay-center-small-height: 40%;
89
+ --overlay-center-normal-width: 60%;
90
+ --overlay-center-normal-height: 60%;
91
+ --overlay-center-large-width: 80%;
92
+ --overlay-center-large-height: 80%;
93
+ }
94
+ }
package/themes/light.css ADDED
@@ -0,0 +1,51 @@
1
+ .light {
2
+ --md-sys-color-primary: rgb(73 93 146);
3
+ --md-sys-color-surface-tint: rgb(73 93 146);
4
+ --md-sys-color-on-primary: rgb(255 255 255);
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);
8
+ --md-sys-color-on-secondary: rgb(255 255 255);
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);
12
+ --md-sys-color-on-tertiary: rgb(255 255 255);
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;
16
+ --md-sys-color-on-error: rgb(255 255 255);
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);
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 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);
46
+ --md-sys-color-surface-container-lowest: rgb(255 255 255);
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);
51
+ }
package/themes/material-theme.css ADDED
@@ -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
+ }
package/themes/md-typescale-styles.css ADDED
@@ -0,0 +1,100 @@
1
+ @layer {
2
+ .md-typescale-display-small,
3
+ .md-typescale-display-small-prominent {
4
+ font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
7
+ }
8
+ .md-typescale-display-medium,
9
+ .md-typescale-display-medium-prominent {
10
+ font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
11
+ var(--md-sys-typescale-display-medium-size, 2.8125rem) /
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'));
14
+ }
15
+ .md-typescale-display-large,
16
+ .md-typescale-display-large-prominent {
17
+ font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
20
+ }
21
+ .md-typescale-headline-small,
22
+ .md-typescale-headline-small-prominent {
23
+ font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
26
+ }
27
+ .md-typescale-headline-medium,
28
+ .md-typescale-headline-medium-prominent {
29
+ font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
30
+ var(--md-sys-typescale-headline-medium-size, 1.75rem) /
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'));
33
+ }
34
+ .md-typescale-headline-large,
35
+ .md-typescale-headline-large-prominent {
36
+ font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
39
+ }
40
+ .md-typescale-title-small,
41
+ .md-typescale-title-small-prominent {
42
+ font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
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'));
45
+ }
46
+ .md-typescale-title-medium,
47
+ .md-typescale-title-medium-prominent {
48
+ font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
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'));
51
+ }
52
+ .md-typescale-title-large,
53
+ .md-typescale-title-large-prominent {
54
+ font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
57
+ }
58
+ .md-typescale-body-small,
59
+ .md-typescale-body-small-prominent {
60
+ font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
63
+ }
64
+ .md-typescale-body-medium,
65
+ .md-typescale-body-medium-prominent {
66
+ font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
69
+ }
70
+ .md-typescale-body-large,
71
+ .md-typescale-body-large-prominent {
72
+ font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
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'));
75
+ }
76
+ .md-typescale-label-small,
77
+ .md-typescale-label-small-prominent {
78
+ font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
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'));
81
+ }
82
+ .md-typescale-label-medium,
83
+ .md-typescale-label-medium-prominent {
84
+ font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
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'));
87
+ }
88
+ .md-typescale-label-medium-prominent {
89
+ font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
90
+ }
91
+ .md-typescale-label-large,
92
+ .md-typescale-label-large-prominent {
93
+ font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
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'));
96
+ }
97
+ .md-typescale-label-large-prominent {
98
+ font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
99
+ }
100
+ } /*# sourceMappingURL=md-typescale-styles.css.map */
package/themes/oops-theme.css CHANGED
@@ -1,24 +1,20 @@
1
1
  body {
2
- /* oops spinner style */
3
-
4
- --oops-spinner-image: url(/assets/images/spinner.png);
5
-
6
2
  /* oops note style */
7
- --oops-note-icon-font: normal 24px var(--mdc-icon-font, 'Material Icons');
8
- --oops-note-icon-color: rgba(var(--secondary-color-rgb), 0.3);
9
- --oops-note-icon-border: 2px solid rgba(var(--secondary-color-rgb), 0.3);
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);
10
6
  --oops-note-icon-border-radius: 50px;
11
7
  --oops-note-icon-padding: var(--padding-default);
12
8
  --oops-note-title-margin: 7px 0 2px 0;
13
9
  --oops-note-title-font: bold 14px var(--theme-font);
14
- --oops-note-title-color: var(--secondary-color);
10
+ --oops-note-title-color: var(--md-sys-color-secondary);
15
11
  --oops-note-description-font: normal 12px var(--theme-font);
16
- --oops-note-description-color: var(--primary-color);
12
+ --oops-note-description-color: var(--md-sys-color-primary);
17
13
  }
18
14
  @media only screen and (max-width: 460px) {
19
15
  body {
20
16
  --oops-note-icon-padding: var(--padding-narrow);
21
- --oops-note-icon-font: normal 18px var(--mdc-icon-font, 'Material Icons');
17
+ --oops-note-icon-font: normal 18px var(--md-icon-font, 'Material Symbols Outlined');
22
18
  --oops-note-title-font: bold 13px var(--theme-font);
23
19
  --oops-note-title-margin: var(--margin-narrow) 0 2px 0;
24
20
  --oops-note-description-font: normal 0px var(--theme-font);