kempo-css 1.2.0 → 1.2.1

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 (8) hide show
  1. package/docs/demo.inc.html +31 -0
  2. package/docs/docs.inc.html +93 -0
  3. package/docs/index.html +2 -0
  4. package/docs/kempo.css +63 -1
  5. package/docs/nav.js +17 -1
  6. package/docs/theme-editor.html +32 -1
  7. package/package.json +1 -1
  8. package/src/kempo.css +63 -1
package/docs/demo.inc.html CHANGED
@@ -111,6 +111,37 @@
111
111
  Drop shadow effect
112
112
  </div>
113
113
 
114
+ <h1>Elevation & Shadows</h1>
115
+ <h2>Elevation Levels</h2>
116
+ <p class="mb">Elevation creates visual hierarchy. Positive levels rise above the page with drop shadows. Negative levels cut into the page with inset shadows.</p>
117
+ <div class="d-f mb" style="gap: var(--spacer); flex-wrap: wrap;">
118
+ <div class="elevation--2 p r" style="min-width: 140px; text-align: center;">
119
+ <strong>Level -2</strong><br><span class="tc-muted small">Deep inset</span>
120
+ </div>
121
+ <div class="elevation--1 p r" style="min-width: 140px; text-align: center;">
122
+ <strong>Level -1</strong><br><span class="tc-muted small">Shallow inset</span>
123
+ </div>
124
+ <div class="elevation-0 p r" style="min-width: 140px; text-align: center;">
125
+ <strong>Level 0</strong><br><span class="tc-muted small">Page level</span>
126
+ </div>
127
+ <div class="elevation-1 p r" style="min-width: 140px; text-align: center;">
128
+ <strong>Level 1</strong><br><span class="tc-muted small">Small shadow</span>
129
+ </div>
130
+ <div class="elevation-2 p r" style="min-width: 140px; text-align: center;">
131
+ <strong>Level 2</strong><br><span class="tc-muted small">Medium shadow</span>
132
+ </div>
133
+ <div class="elevation-3 p r" style="min-width: 140px; text-align: center;">
134
+ <strong>Level 3</strong><br><span class="tc-muted small">Large shadow</span>
135
+ </div>
136
+ </div>
137
+
138
+ <h2>Drop Shadow</h2>
139
+ <div class="d-f mb" style="gap: var(--spacer); flex-wrap: wrap;">
140
+ <div class="p r bg-alt drop-shadow" style="min-width: 140px; text-align: center;">
141
+ <strong>Drop Shadow</strong><br><span class="tc-muted small">.drop-shadow class</span>
142
+ </div>
143
+ </div>
144
+
114
145
  <h1>Typography</h1>
115
146
  <h2>Headings</h2>
116
147
  <h1>Heading 1</h1>
package/docs/docs.inc.html CHANGED
@@ -845,6 +845,99 @@
845
845
  </tbody>
846
846
  </table>
847
847
 
848
+ <h2 id="elevation">Elevation</h2>
849
+ <p>The elevation system creates visual depth using a combination of background colors and shadows. Positive levels rise above the page with drop shadows. Negative levels cut into the page with inset shadows. In dark mode, higher elevations have lighter backgrounds (simulating light from above).</p>
850
+ <div class="row -mx">
851
+ <div class="col m-span-12 px">
852
+ <k-card label="HTML">
853
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation--2 p r"</span>&gt;</span>Level -2 - Deep inset<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation--1 p r"</span>&gt;</span>Level -1 - Shallow inset<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 p r"</span>&gt;</span>Level 0 - Page level<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 p r"</span>&gt;</span>Level 1 - Small shadow<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 p r"</span>&gt;</span>Level 2 - Medium shadow<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 p r"</span>&gt;</span>Level 3 - Large shadow<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
854
+ </k-card>
855
+ </div>
856
+ <div class="col m-span-12 px">
857
+ <k-card label="Output">
858
+ <div class="d-f" style="gap: var(--spacer); flex-wrap: wrap;">
859
+ <div class="elevation--2 p r" style="min-width: 140px; text-align: center;">
860
+ <strong>Level -2</strong><br><span class="tc-muted small">Deep inset</span>
861
+ </div>
862
+ <div class="elevation--1 p r" style="min-width: 140px; text-align: center;">
863
+ <strong>Level -1</strong><br><span class="tc-muted small">Shallow inset</span>
864
+ </div>
865
+ <div class="elevation-0 p r" style="min-width: 140px; text-align: center;">
866
+ <strong>Level 0</strong><br><span class="tc-muted small">Page level</span>
867
+ </div>
868
+ <div class="elevation-1 p r" style="min-width: 140px; text-align: center;">
869
+ <strong>Level 1</strong><br><span class="tc-muted small">Small shadow</span>
870
+ </div>
871
+ <div class="elevation-2 p r" style="min-width: 140px; text-align: center;">
872
+ <strong>Level 2</strong><br><span class="tc-muted small">Medium shadow</span>
873
+ </div>
874
+ <div class="elevation-3 p r" style="min-width: 140px; text-align: center;">
875
+ <strong>Level 3</strong><br><span class="tc-muted small">Large shadow</span>
876
+ </div>
877
+ </div>
878
+ </k-card>
879
+ </div>
880
+ </div>
881
+ <h3>Elevation CSS Variables</h3>
882
+ <table>
883
+ <thead>
884
+ <tr>
885
+ <th>Variable</th>
886
+ <th>Description</th>
887
+ </tr>
888
+ </thead>
889
+ <tbody>
890
+ <tr>
891
+ <td><code>--elevation_-2_bg</code></td>
892
+ <td>Background color for level -2 (deep inset)</td>
893
+ </tr>
894
+ <tr>
895
+ <td><code>--elevation_-1_bg</code></td>
896
+ <td>Background color for level -1 (shallow inset)</td>
897
+ </tr>
898
+ <tr>
899
+ <td><code>--elevation_0_bg</code></td>
900
+ <td>Background color for level 0 (page level)</td>
901
+ </tr>
902
+ <tr>
903
+ <td><code>--elevation_1_bg</code></td>
904
+ <td>Background color for level 1</td>
905
+ </tr>
906
+ <tr>
907
+ <td><code>--elevation_2_bg</code></td>
908
+ <td>Background color for level 2</td>
909
+ </tr>
910
+ <tr>
911
+ <td><code>--elevation_3_bg</code></td>
912
+ <td>Background color for level 3</td>
913
+ </tr>
914
+ <tr>
915
+ <td><code>--elevation_-2_shadow</code></td>
916
+ <td>Shadow for level -2 (deep inset)</td>
917
+ </tr>
918
+ <tr>
919
+ <td><code>--elevation_-1_shadow</code></td>
920
+ <td>Shadow for level -1 (shallow inset)</td>
921
+ </tr>
922
+ <tr>
923
+ <td><code>--elevation_0_shadow</code></td>
924
+ <td>Shadow for level 0 (none)</td>
925
+ </tr>
926
+ <tr>
927
+ <td><code>--elevation_1_shadow</code></td>
928
+ <td>Shadow for level 1 (small)</td>
929
+ </tr>
930
+ <tr>
931
+ <td><code>--elevation_2_shadow</code></td>
932
+ <td>Shadow for level 2 (medium)</td>
933
+ </tr>
934
+ <tr>
935
+ <td><code>--elevation_3_shadow</code></td>
936
+ <td>Shadow for level 3 (large)</td>
937
+ </tr>
938
+ </tbody>
939
+ </table>
940
+
848
941
  <h2 id="noScroll">Disable Body Scrolling</h2>
849
942
  <p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
850
943
  like dialogs and side menus that temporarily take over the page.</p>
package/docs/index.html CHANGED
@@ -80,6 +80,8 @@
80
80
  <ul class="pl">
81
81
  <li><a href="#background">Background</a></li>
82
82
  <li><a href="#text-colors">Text Colors</a></li>
83
+ <li><a href="#drop-shadow">Drop Shadow</a></li>
84
+ <li><a href="#elevation">Elevation</a></li>
83
85
  </ul>
84
86
  <h5><a href="#noScroll">Disable Body Scrolling</a></h5>
85
87
  <hr />
package/docs/kempo.css CHANGED
@@ -84,6 +84,30 @@
84
84
  --drop_shadow__dark: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
85
85
  --drop_shadow: var(--drop_shadow__light);
86
86
  --date_picker_icon_filter: light-dark(invert(0), invert(1));
87
+
88
+ /* Elevation System - Level 0 = body bg, positive = lighter + drop shadow, negative = darker + inset shadow */
89
+ --elevation_-2_bg: light-dark(rgb(215, 215, 215), rgb(25, 25, 25));
90
+ --elevation_-1_bg: light-dark(rgb(232, 232, 232), rgb(38, 38, 38));
91
+ --elevation_0_bg: var(--c_bg);
92
+ --elevation_1_bg: light-dark(rgb(255, 255, 255), rgb(64, 64, 64));
93
+ --elevation_2_bg: light-dark(rgb(255, 255, 255), rgb(77, 77, 77));
94
+ --elevation_3_bg: light-dark(rgb(255, 255, 255), rgb(90, 90, 90));
95
+ --elevation_-2_shadow__light: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 3px rgba(0, 0, 0, 0.12);
96
+ --elevation_-1_shadow__light: inset 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.06);
97
+ --elevation_0_shadow: none;
98
+ --elevation_1_shadow__light: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.16);
99
+ --elevation_2_shadow__light: 0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1);
100
+ --elevation_3_shadow__light: 0 8px 16px rgba(0, 0, 0, 0.14), 0 3px 6px rgba(0, 0, 0, 0.1);
101
+ --elevation_-2_shadow__dark: inset 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 4px rgba(0, 0, 0, 0.4);
102
+ --elevation_-1_shadow__dark: inset 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.25);
103
+ --elevation_1_shadow__dark: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
104
+ --elevation_2_shadow__dark: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.45);
105
+ --elevation_3_shadow__dark: 0 8px 20px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
106
+ --elevation_-2_shadow: var(--elevation_-2_shadow__light);
107
+ --elevation_-1_shadow: var(--elevation_-1_shadow__light);
108
+ --elevation_1_shadow: var(--elevation_1_shadow__light);
109
+ --elevation_2_shadow: var(--elevation_2_shadow__light);
110
+ --elevation_3_shadow: var(--elevation_3_shadow__light);
87
111
  }
88
112
  [theme="light"] {
89
113
  color-scheme: light;
@@ -92,6 +116,11 @@
92
116
  [theme="dark"] {
93
117
  color-scheme: dark;
94
118
  --drop_shadow: var(--drop_shadow__dark);
119
+ --elevation_-2_shadow: var(--elevation_-2_shadow__dark);
120
+ --elevation_-1_shadow: var(--elevation_-1_shadow__dark);
121
+ --elevation_1_shadow: var(--elevation_1_shadow__dark);
122
+ --elevation_2_shadow: var(--elevation_2_shadow__dark);
123
+ --elevation_3_shadow: var(--elevation_3_shadow__dark);
95
124
  }
96
125
 
97
126
  [theme="auto"] {
@@ -100,6 +129,11 @@
100
129
  @media (prefers-color-scheme: dark) {
101
130
  [theme="auto"] {
102
131
  --drop_shadow: var(--drop_shadow__dark);
132
+ --elevation_-2_shadow: var(--elevation_-2_shadow__dark);
133
+ --elevation_-1_shadow: var(--elevation_-1_shadow__dark);
134
+ --elevation_1_shadow: var(--elevation_1_shadow__dark);
135
+ --elevation_2_shadow: var(--elevation_2_shadow__dark);
136
+ --elevation_3_shadow: var(--elevation_3_shadow__dark);
103
137
  }
104
138
  }
105
139
 
@@ -331,8 +365,12 @@ summary:focus {
331
365
  top: 0;
332
366
  width: 100%;
333
367
  z-index: 99;
368
+ box-shadow: none;
369
+ transition: box-shadow var(--animation_ms);
370
+ }
371
+ .fixed.scrolled {
372
+ box-shadow: var(--elevation_2_shadow);
334
373
  }
335
-
336
374
 
337
375
  /*
338
376
  Typography
@@ -1048,6 +1086,30 @@ tr:last-child td:last-child {
1048
1086
  .drop-shadow {
1049
1087
  box-shadow: var(--drop_shadow);
1050
1088
  }
1089
+ .elevation--2 {
1090
+ background-color: var(--elevation_-2_bg);
1091
+ box-shadow: var(--elevation_-2_shadow);
1092
+ }
1093
+ .elevation--1 {
1094
+ background-color: var(--elevation_-1_bg);
1095
+ box-shadow: var(--elevation_-1_shadow);
1096
+ }
1097
+ .elevation-0 {
1098
+ background-color: var(--elevation_0_bg);
1099
+ box-shadow: var(--elevation_0_shadow);
1100
+ }
1101
+ .elevation-1 {
1102
+ background-color: var(--elevation_1_bg);
1103
+ box-shadow: var(--elevation_1_shadow);
1104
+ }
1105
+ .elevation-2 {
1106
+ background-color: var(--elevation_2_bg);
1107
+ box-shadow: var(--elevation_2_shadow);
1108
+ }
1109
+ .elevation-3 {
1110
+ background-color: var(--elevation_3_bg);
1111
+ box-shadow: var(--elevation_3_shadow);
1112
+ }
1051
1113
  .icon {
1052
1114
  display: inline-block;
1053
1115
  width: 1.35em;
package/docs/nav.js CHANGED
@@ -14,4 +14,20 @@ document.addEventListener('click', function(e) {
14
14
  document.getElementById('navSideMenu').close();
15
15
  }
16
16
  }
17
- });
17
+ });
18
+
19
+ /*
20
+ Fixed Nav Shadow on Scroll
21
+ */
22
+ const fixedNav = document.querySelector('nav.fixed');
23
+ if(fixedNav){
24
+ const updateNavShadow = () => {
25
+ if(window.scrollY > 0){
26
+ fixedNav.classList.add('scrolled');
27
+ } else {
28
+ fixedNav.classList.remove('scrolled');
29
+ }
30
+ };
31
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
32
+ updateNavShadow();
33
+ }
package/docs/theme-editor.html CHANGED
@@ -65,6 +65,7 @@
65
65
  <a href="#button-styles">Button Styles</a><br />
66
66
  <a href="#input-styles">Input Styles</a><br />
67
67
  <a href="#focus-effects">Focus & Effects</a><br />
68
+ <a href="#elevation-shadows">Elevation & Shadows</a><br />
68
69
  <a href="#typography">Typography</a><br />
69
70
  <a href="#spacing-layout">Spacing & Layout</a><br />
70
71
  <a href="#effects-animation">Effects & Animation</a><br />
@@ -202,6 +203,23 @@
202
203
  "--drop_shadow__light": "0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)",
203
204
  "--drop_shadow__dark": "0 0.25rem 0.5rem rgba(0, 0, 0, 0.5)",
204
205
  "--drop_shadow": { light: "var(--drop_shadow__light)", dark: "var(--drop_shadow__dark)" },
206
+ "--elevation_-2_bg": { light: "rgb(215, 215, 215)", dark: "rgb(25, 25, 25)" },
207
+ "--elevation_-1_bg": { light: "rgb(232, 232, 232)", dark: "rgb(38, 38, 38)" },
208
+ "--elevation_0_bg": { light: "var(--c_bg)", dark: "var(--c_bg)" },
209
+ "--elevation_1_bg": { light: "rgb(255, 255, 255)", dark: "rgb(64, 64, 64)" },
210
+ "--elevation_2_bg": { light: "rgb(255, 255, 255)", dark: "rgb(77, 77, 77)" },
211
+ "--elevation_3_bg": { light: "rgb(255, 255, 255)", dark: "rgb(90, 90, 90)" },
212
+ "--elevation_-2_shadow__light": "inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 3px rgba(0, 0, 0, 0.12)",
213
+ "--elevation_-2_shadow__dark": "inset 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 4px rgba(0, 0, 0, 0.4)",
214
+ "--elevation_-1_shadow__light": "inset 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.06)",
215
+ "--elevation_-1_shadow__dark": "inset 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.25)",
216
+ "--elevation_0_shadow": "none",
217
+ "--elevation_1_shadow__light": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.16)",
218
+ "--elevation_2_shadow__light": "0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1)",
219
+ "--elevation_3_shadow__light": "0 8px 16px rgba(0, 0, 0, 0.14), 0 3px 6px rgba(0, 0, 0, 0.1)",
220
+ "--elevation_1_shadow__dark": "0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4)",
221
+ "--elevation_2_shadow__dark": "0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.45)",
222
+ "--elevation_3_shadow__dark": "0 8px 20px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5)",
205
223
  "--date_picker_icon_filter": { light: "invert(0)", dark: "invert(1)" }
206
224
  };
207
225
 
@@ -284,11 +302,24 @@
284
302
  title: 'Focus & Effects',
285
303
  props: [
286
304
  '--focus_shadow', '--focus_shadow_on_primary',
287
- '--drop_shadow', '--drop_shadow__light', '--drop_shadow__dark',
288
305
  '--date_picker_icon_filter',
289
306
  '--c_highlight', '--c_overlay'
290
307
  ]
291
308
  },
309
+ {
310
+ title: 'Elevation & Shadows',
311
+ props: [
312
+ '--elevation_-2_bg', '--elevation_-1_bg',
313
+ '--elevation_0_bg', '--elevation_1_bg', '--elevation_2_bg', '--elevation_3_bg',
314
+ '--elevation_-2_shadow__light', '--elevation_-2_shadow__dark',
315
+ '--elevation_-1_shadow__light', '--elevation_-1_shadow__dark',
316
+ '--elevation_0_shadow',
317
+ '--elevation_1_shadow__light', '--elevation_1_shadow__dark',
318
+ '--elevation_2_shadow__light', '--elevation_2_shadow__dark',
319
+ '--elevation_3_shadow__light', '--elevation_3_shadow__dark',
320
+ '--drop_shadow__light', '--drop_shadow__dark'
321
+ ]
322
+ },
292
323
  {
293
324
  title: 'Typography',
294
325
  props: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-css",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "scripts/build.js",
package/src/kempo.css CHANGED
@@ -84,6 +84,30 @@
84
84
  --drop_shadow__dark: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
85
85
  --drop_shadow: var(--drop_shadow__light);
86
86
  --date_picker_icon_filter: light-dark(invert(0), invert(1));
87
+
88
+ /* Elevation System - Level 0 = body bg, positive = lighter + drop shadow, negative = darker + inset shadow */
89
+ --elevation_-2_bg: light-dark(rgb(215, 215, 215), rgb(25, 25, 25));
90
+ --elevation_-1_bg: light-dark(rgb(232, 232, 232), rgb(38, 38, 38));
91
+ --elevation_0_bg: var(--c_bg);
92
+ --elevation_1_bg: light-dark(rgb(255, 255, 255), rgb(64, 64, 64));
93
+ --elevation_2_bg: light-dark(rgb(255, 255, 255), rgb(77, 77, 77));
94
+ --elevation_3_bg: light-dark(rgb(255, 255, 255), rgb(90, 90, 90));
95
+ --elevation_-2_shadow__light: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 3px rgba(0, 0, 0, 0.12);
96
+ --elevation_-1_shadow__light: inset 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.06);
97
+ --elevation_0_shadow: none;
98
+ --elevation_1_shadow__light: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.16);
99
+ --elevation_2_shadow__light: 0 3px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.1);
100
+ --elevation_3_shadow__light: 0 8px 16px rgba(0, 0, 0, 0.14), 0 3px 6px rgba(0, 0, 0, 0.1);
101
+ --elevation_-2_shadow__dark: inset 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 4px rgba(0, 0, 0, 0.4);
102
+ --elevation_-1_shadow__dark: inset 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(0, 0, 0, 0.25);
103
+ --elevation_1_shadow__dark: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
104
+ --elevation_2_shadow__dark: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.45);
105
+ --elevation_3_shadow__dark: 0 8px 20px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
106
+ --elevation_-2_shadow: var(--elevation_-2_shadow__light);
107
+ --elevation_-1_shadow: var(--elevation_-1_shadow__light);
108
+ --elevation_1_shadow: var(--elevation_1_shadow__light);
109
+ --elevation_2_shadow: var(--elevation_2_shadow__light);
110
+ --elevation_3_shadow: var(--elevation_3_shadow__light);
87
111
  }
88
112
  [theme="light"] {
89
113
  color-scheme: light;
@@ -92,6 +116,11 @@
92
116
  [theme="dark"] {
93
117
  color-scheme: dark;
94
118
  --drop_shadow: var(--drop_shadow__dark);
119
+ --elevation_-2_shadow: var(--elevation_-2_shadow__dark);
120
+ --elevation_-1_shadow: var(--elevation_-1_shadow__dark);
121
+ --elevation_1_shadow: var(--elevation_1_shadow__dark);
122
+ --elevation_2_shadow: var(--elevation_2_shadow__dark);
123
+ --elevation_3_shadow: var(--elevation_3_shadow__dark);
95
124
  }
96
125
 
97
126
  [theme="auto"] {
@@ -100,6 +129,11 @@
100
129
  @media (prefers-color-scheme: dark) {
101
130
  [theme="auto"] {
102
131
  --drop_shadow: var(--drop_shadow__dark);
132
+ --elevation_-2_shadow: var(--elevation_-2_shadow__dark);
133
+ --elevation_-1_shadow: var(--elevation_-1_shadow__dark);
134
+ --elevation_1_shadow: var(--elevation_1_shadow__dark);
135
+ --elevation_2_shadow: var(--elevation_2_shadow__dark);
136
+ --elevation_3_shadow: var(--elevation_3_shadow__dark);
103
137
  }
104
138
  }
105
139
 
@@ -331,8 +365,12 @@ summary:focus {
331
365
  top: 0;
332
366
  width: 100%;
333
367
  z-index: 99;
368
+ box-shadow: none;
369
+ transition: box-shadow var(--animation_ms);
370
+ }
371
+ .fixed.scrolled {
372
+ box-shadow: var(--elevation_2_shadow);
334
373
  }
335
-
336
374
 
337
375
  /*
338
376
  Typography
@@ -1048,6 +1086,30 @@ tr:last-child td:last-child {
1048
1086
  .drop-shadow {
1049
1087
  box-shadow: var(--drop_shadow);
1050
1088
  }
1089
+ .elevation--2 {
1090
+ background-color: var(--elevation_-2_bg);
1091
+ box-shadow: var(--elevation_-2_shadow);
1092
+ }
1093
+ .elevation--1 {
1094
+ background-color: var(--elevation_-1_bg);
1095
+ box-shadow: var(--elevation_-1_shadow);
1096
+ }
1097
+ .elevation-0 {
1098
+ background-color: var(--elevation_0_bg);
1099
+ box-shadow: var(--elevation_0_shadow);
1100
+ }
1101
+ .elevation-1 {
1102
+ background-color: var(--elevation_1_bg);
1103
+ box-shadow: var(--elevation_1_shadow);
1104
+ }
1105
+ .elevation-2 {
1106
+ background-color: var(--elevation_2_bg);
1107
+ box-shadow: var(--elevation_2_shadow);
1108
+ }
1109
+ .elevation-3 {
1110
+ background-color: var(--elevation_3_bg);
1111
+ box-shadow: var(--elevation_3_shadow);
1112
+ }
1051
1113
  .icon {
1052
1114
  display: inline-block;
1053
1115
  width: 1.35em;