kempo-css 2.0.0 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/test.yml +25 -25
- package/AGENTS.md +43 -43
- package/CHANGELOG.md +117 -107
- package/CONTRIBUTING.md +17 -0
- package/LICENSE.md +21 -21
- package/README.md +2 -48
- package/dist/kempo.min.css +1 -1
- package/docs/demo.inc.html +213 -213
- package/docs/index.html +171 -160
- package/docs/kempo-hljs.css +124 -124
- package/docs/kempo.css +1194 -1210
- package/docs/kempo.min.css +1 -1
- package/docs/manifest.json +87 -87
- package/docs/nav.js +32 -32
- package/docs/theme-editor.html +19 -64
- package/llms.txt +205 -0
- package/package.json +1 -1
- package/scripts/build.js +173 -173
- package/src/kempo-hljs.css +124 -124
- package/src/kempo.css +1194 -1210
- package/tests/base_reset.browser-test.js +201 -201
- package/tests/buttons.browser-test.js +223 -223
- package/tests/colors.browser-test.js +277 -277
- package/tests/components.browser-test.js +131 -131
- package/tests/css_variables.browser-test.js +170 -170
- package/tests/display_flex.browser-test.js +159 -159
- package/tests/elevation.browser-test.js +239 -239
- package/tests/forms.browser-test.js +224 -224
- package/tests/rows_columns.browser-test.js +171 -171
- package/tests/spacing.browser-test.js +310 -310
- package/tests/tables.browser-test.js +192 -192
- package/tests/typography.browser-test.js +255 -255
package/docs/index.html
CHANGED
|
@@ -26,6 +26,21 @@
|
|
|
26
26
|
href="./kempo-hljs.min.css"
|
|
27
27
|
/>
|
|
28
28
|
<script src="./init.js"></script>
|
|
29
|
+
<style>
|
|
30
|
+
.elevation-card {
|
|
31
|
+
display: inline-flex;
|
|
32
|
+
width: 9rem;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
aspect-ratio: 1 / 1;
|
|
36
|
+
margin: var(--spacer);
|
|
37
|
+
padding: var(--spacer);
|
|
38
|
+
border-radius: var(--radius);
|
|
39
|
+
vertical-align: top;
|
|
40
|
+
text-wrap: balance;
|
|
41
|
+
text-align: center;
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
29
44
|
</head>
|
|
30
45
|
<body>
|
|
31
46
|
<nav class="d-f bg-primary fixed">
|
|
@@ -921,7 +936,7 @@
|
|
|
921
936
|
<div class="row -mx">
|
|
922
937
|
<div class="col m-span-12 px">
|
|
923
938
|
<k-card label="HTML">
|
|
924
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre>
|
|
939
|
+
<pre style="overflow:auto;max-height:20rem;"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre>
|
|
925
940
|
</k-card>
|
|
926
941
|
</div>
|
|
927
942
|
<div class="col m-span-12 px">
|
|
@@ -967,7 +982,7 @@
|
|
|
967
982
|
<div class="row -mx">
|
|
968
983
|
<div class="col m-span-12 px">
|
|
969
984
|
<k-card label="HTML">
|
|
970
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-wrapper"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 5<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 6<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">table</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
985
|
+
<pre style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-wrapper"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 5<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 6<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">table</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
971
986
|
</k-card>
|
|
972
987
|
</div>
|
|
973
988
|
<div class="col m-span-12 px">
|
|
@@ -1054,14 +1069,17 @@
|
|
|
1054
1069
|
<div class="row -mx">
|
|
1055
1070
|
<div class="col m-span-12 px">
|
|
1056
1071
|
<k-card label="HTML">
|
|
1057
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted"</span>></span>Muted<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
1072
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted"</span>></span>Muted<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background: grey"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
1058
1073
|
</k-card>
|
|
1059
1074
|
</div>
|
|
1060
1075
|
<div class="col m-span-12 px">
|
|
1061
1076
|
<k-card label="Output">
|
|
1062
1077
|
<p>Normal</p>
|
|
1063
1078
|
<p class="tc-muted">Muted</p>
|
|
1064
|
-
<p
|
|
1079
|
+
<p
|
|
1080
|
+
class="tc-inv"
|
|
1081
|
+
style="background: grey"
|
|
1082
|
+
>Inverse</p>
|
|
1065
1083
|
<p class="tc-primary">Primary</p>
|
|
1066
1084
|
<p class="tc-secondary">Secondary</p>
|
|
1067
1085
|
<p class="tc-success">Success</p>
|
|
@@ -1082,15 +1100,50 @@
|
|
|
1082
1100
|
<div class="row -mx">
|
|
1083
1101
|
<div class="col m-span-12 px">
|
|
1084
1102
|
<k-card label="HTML">
|
|
1085
|
-
<pre
|
|
1103
|
+
<pre
|
|
1104
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 10<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 20<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 30<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 40<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 50<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1086
1105
|
</k-card>
|
|
1087
1106
|
</div>
|
|
1088
1107
|
<div class="col m-span-12 px">
|
|
1089
1108
|
<k-card label="Output">
|
|
1090
|
-
<div
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1109
|
+
<div class="elevation-0 shadow elevation-card">
|
|
1110
|
+
<div>
|
|
1111
|
+
<strong>Level 0</strong><br>
|
|
1112
|
+
<span class="tc-muted small">z-index: 0</span>
|
|
1113
|
+
</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
<div class="elevation-1 shadow elevation-card">
|
|
1116
|
+
<div>
|
|
1117
|
+
<strong>Level 1</strong><br>
|
|
1118
|
+
<span class="tc-muted small">z-index: 10</span>
|
|
1119
|
+
</div>
|
|
1120
|
+
</div>
|
|
1121
|
+
<div class="elevation-2 shadow elevation-card">
|
|
1122
|
+
<div>
|
|
1123
|
+
<strong>Level 2</strong><br>
|
|
1124
|
+
<span class="tc-muted small">z-index: 20</span>
|
|
1125
|
+
|
|
1126
|
+
</div>
|
|
1127
|
+
</div>
|
|
1128
|
+
<div class="elevation-3 shadow elevation-card">
|
|
1129
|
+
<div>
|
|
1130
|
+
<strong>Level 3</strong><br>
|
|
1131
|
+
<span class="tc-muted small">z-index: 30</span>
|
|
1132
|
+
</div>
|
|
1133
|
+
</div>
|
|
1134
|
+
<div class="elevation-4 shadow elevation-card">
|
|
1135
|
+
<div>
|
|
1136
|
+
<strong>Level 4</strong><br>
|
|
1137
|
+
<span class="tc-muted small">z-index: 40</span>
|
|
1138
|
+
</div>
|
|
1139
|
+
</div>
|
|
1140
|
+
<div class="elevation-5 shadow elevation-card">
|
|
1141
|
+
<div>
|
|
1142
|
+
<strong>Level 5</strong><br>
|
|
1143
|
+
<span class="tc-muted small">z-index: 50</span><br />
|
|
1144
|
+
<span class="tc-muted small">(6–10 same)</span>
|
|
1145
|
+
</div>
|
|
1146
|
+
</div>
|
|
1094
1147
|
</k-card>
|
|
1095
1148
|
</div>
|
|
1096
1149
|
</div>
|
|
@@ -1152,61 +1205,52 @@
|
|
|
1152
1205
|
</div>
|
|
1153
1206
|
<h2 id="elevation-shadow">Shadow (<code>shadow</code>)</h2>
|
|
1154
1207
|
<p>Combine with an <code>elevation-*</code> class to apply a depth shadow. Levels 0–1 use inset shadows (sunk),
|
|
1155
|
-
level 2
|
|
1156
|
-
|
|
1208
|
+
level 2 has no shadow (page level), levels 3–5 use progressively larger outset drop shadows, and levels 6–10
|
|
1209
|
+
use the same shadow as level 5.</p>
|
|
1157
1210
|
<div class="row -mx">
|
|
1158
1211
|
<div class="col m-span-12 px">
|
|
1159
1212
|
<k-card label="HTML">
|
|
1160
|
-
<pre
|
|
1213
|
+
<pre
|
|
1214
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Deep Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Shallow Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>No Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Small Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Medium Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Large Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Max (6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1161
1215
|
</k-card>
|
|
1162
1216
|
</div>
|
|
1163
1217
|
<div class="col m-span-12 px">
|
|
1164
1218
|
<k-card label="Output">
|
|
1165
|
-
<div
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
<div
|
|
1170
|
-
class="elevation-0 shadow p r"
|
|
1171
|
-
style="min-width: 120px; text-align: center;"
|
|
1172
|
-
>
|
|
1173
|
-
<strong>Level 0</strong><br><span class="tc-muted small">Deep inset</span>
|
|
1219
|
+
<div class="elevation-0 shadow elevation-card">
|
|
1220
|
+
<div>
|
|
1221
|
+
<strong>Level 0</strong><br>
|
|
1222
|
+
<span class="tc-muted small">Deep Inset Shadow</span>
|
|
1174
1223
|
</div>
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
<
|
|
1180
|
-
</div>
|
|
1181
|
-
<div
|
|
1182
|
-
class="elevation-2 shadow p r"
|
|
1183
|
-
style="min-width: 120px; text-align: center;"
|
|
1184
|
-
>
|
|
1185
|
-
<strong>Level 2</strong><br><span class="tc-muted small">No shadow</span>
|
|
1224
|
+
</div>
|
|
1225
|
+
<div class="elevation-1 shadow elevation-card">
|
|
1226
|
+
<div>
|
|
1227
|
+
<strong>Level 1</strong><br>
|
|
1228
|
+
<span class="tc-muted small">Shallow Inset Shadow</span>
|
|
1186
1229
|
</div>
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
<
|
|
1230
|
+
</div>
|
|
1231
|
+
<div class="elevation-2 shadow elevation-card">
|
|
1232
|
+
<div>
|
|
1233
|
+
<strong>Level 2</strong><br>
|
|
1234
|
+
<span class="tc-muted small">No Shadow</span>
|
|
1192
1235
|
</div>
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
<
|
|
1236
|
+
</div>
|
|
1237
|
+
<div class="elevation-3 shadow elevation-card">
|
|
1238
|
+
<div>
|
|
1239
|
+
<strong>Level 3</strong><br>
|
|
1240
|
+
<span class="tc-muted small">Small Drop Shadow</span>
|
|
1198
1241
|
</div>
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
<
|
|
1242
|
+
</div>
|
|
1243
|
+
<div class="elevation-4 shadow elevation-card">
|
|
1244
|
+
<div>
|
|
1245
|
+
<strong>Level 4</strong><br>
|
|
1246
|
+
<span class="tc-muted small">Medium Drop Shadow</span>
|
|
1204
1247
|
</div>
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
<
|
|
1248
|
+
</div>
|
|
1249
|
+
<div class="elevation-5 shadow elevation-card">
|
|
1250
|
+
<div>
|
|
1251
|
+
<strong>Level 5</strong><br>
|
|
1252
|
+
<span class="tc-muted small">Large Drop Shadow</span><br>
|
|
1253
|
+
<span class="tc-muted small">Max (6–10 same)</span>
|
|
1210
1254
|
</div>
|
|
1211
1255
|
</div>
|
|
1212
1256
|
</k-card>
|
|
@@ -1214,60 +1258,51 @@
|
|
|
1214
1258
|
</div>
|
|
1215
1259
|
<h2 id="elevation-bg">Elevation Background (<code>bg-elevation</code>)</h2>
|
|
1216
1260
|
<p>Combine with an <code>elevation-*</code> class to apply an elevation-appropriate background color. In dark mode,
|
|
1217
|
-
higher elevations are progressively lighter (simulating ambient light from above)
|
|
1261
|
+
higher elevations are progressively lighter (simulating ambient light from above). Levels 6–10 use the same
|
|
1262
|
+
background as level 5.</p>
|
|
1218
1263
|
<div class="row -mx">
|
|
1219
1264
|
<div class="col m-span-12 px">
|
|
1220
1265
|
<k-card label="HTML">
|
|
1221
|
-
<pre
|
|
1266
|
+
<pre
|
|
1267
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darkest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darker<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Page default<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>A Little Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lightest<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1222
1268
|
</k-card>
|
|
1223
1269
|
</div>
|
|
1224
1270
|
<div class="col m-span-12 px">
|
|
1225
1271
|
<k-card label="Output">
|
|
1226
|
-
<div
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
<div
|
|
1231
|
-
class="elevation-0 bg-elevation p r"
|
|
1232
|
-
style="min-width: 120px; text-align: center; border: 1px solid var(--c_border);"
|
|
1233
|
-
>
|
|
1234
|
-
<strong>Level 0</strong><br><span class="tc-muted small">Darkest</span>
|
|
1272
|
+
<div class="elevation-0 bg-elevation elevation-card">
|
|
1273
|
+
<div>
|
|
1274
|
+
<strong>Level 0</strong><br>
|
|
1275
|
+
<span class="tc-muted small">Darkest</span>
|
|
1235
1276
|
</div>
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
<
|
|
1241
|
-
</div>
|
|
1242
|
-
<div
|
|
1243
|
-
class="elevation-2 bg-elevation p r"
|
|
1244
|
-
style="min-width: 120px; text-align: center; border: 1px solid var(--c_border);"
|
|
1245
|
-
>
|
|
1246
|
-
<strong>Level 2</strong><br><span class="tc-muted small">Page default</span>
|
|
1277
|
+
</div>
|
|
1278
|
+
<div class="elevation-1 bg-elevation elevation-card">
|
|
1279
|
+
<div>
|
|
1280
|
+
<strong>Level 1</strong><br>
|
|
1281
|
+
<span class="tc-muted small">Darker</span>
|
|
1247
1282
|
</div>
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
<
|
|
1283
|
+
</div>
|
|
1284
|
+
<div class="elevation-2 bg-elevation elevation-card">
|
|
1285
|
+
<div>
|
|
1286
|
+
<strong>Level 2</strong><br>
|
|
1287
|
+
<span class="tc-muted small">Page default</span>
|
|
1253
1288
|
</div>
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
<
|
|
1289
|
+
</div>
|
|
1290
|
+
<div class="elevation-3 bg-elevation elevation-card">
|
|
1291
|
+
<div>
|
|
1292
|
+
<strong>Level 3</strong><br>
|
|
1293
|
+
<span class="tc-muted small">A Little Lighter</span>
|
|
1259
1294
|
</div>
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
<
|
|
1295
|
+
</div>
|
|
1296
|
+
<div class="elevation-4 bg-elevation elevation-card">
|
|
1297
|
+
<div>
|
|
1298
|
+
<strong>Level 4</strong><br>
|
|
1299
|
+
<span class="tc-muted small">Lighter</span>
|
|
1265
1300
|
</div>
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
<
|
|
1301
|
+
</div>
|
|
1302
|
+
<div class="elevation-5 bg-elevation elevation-card">
|
|
1303
|
+
<div>
|
|
1304
|
+
<strong>Level 5</strong><br>
|
|
1305
|
+
<span class="tc-muted small">Lightest<br />(6–10 same)</span>
|
|
1271
1306
|
</div>
|
|
1272
1307
|
</div>
|
|
1273
1308
|
</k-card>
|
|
@@ -1279,44 +1314,52 @@
|
|
|
1279
1314
|
<div class="row -mx">
|
|
1280
1315
|
<div class="col m-span-12 px">
|
|
1281
1316
|
<k-card label="HTML">
|
|
1282
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow bg-elevation
|
|
1317
|
+
<pre style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Deep Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darkest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 10<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Shallow Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darker<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 20<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>No Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Page default<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 30<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Small Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>A Little Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 40<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Medium Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 50<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Large Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lightest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1283
1318
|
</k-card>
|
|
1284
1319
|
</div>
|
|
1285
1320
|
<div class="col m-span-12 px">
|
|
1286
1321
|
<k-card label="Output">
|
|
1287
|
-
<div
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
class="elevation-0 shadow bg-elevation p r"
|
|
1293
|
-
style="min-width: 100px; text-align: center;"
|
|
1294
|
-
>
|
|
1295
|
-
<strong>0</strong><br><span class="tc-muted small">z-index: 0</span>
|
|
1322
|
+
<div class="elevation-0 shadow bg-elevation elevation-card">
|
|
1323
|
+
<div><strong>Level 0</strong><br>
|
|
1324
|
+
<span class="tc-muted small">z-index: 0</span><br />
|
|
1325
|
+
<span class="tc-muted small">Deep Inset Shadow</span>
|
|
1326
|
+
<span class="tc-muted small">Darkest</span>
|
|
1296
1327
|
</div>
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
<
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="elevation-1 shadow bg-elevation elevation-card">
|
|
1330
|
+
<div><strong>Level 1</strong><br>
|
|
1331
|
+
<span class="tc-muted small">z-index: 10</span><br />
|
|
1332
|
+
<span class="tc-muted small">Shallow Inset Shadow</span><br />
|
|
1333
|
+
<span class="tc-muted small">Darker</span>
|
|
1302
1334
|
</div>
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
<
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="elevation-2 shadow bg-elevation elevation-card">
|
|
1337
|
+
<div><strong>Level 2</strong><br>
|
|
1338
|
+
<span class="tc-muted small">z-index: 20</span><br />
|
|
1339
|
+
<span class="tc-muted small">No Shadow</span><br />
|
|
1340
|
+
<span class="tc-muted small">Page default</span>
|
|
1308
1341
|
</div>
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
<
|
|
1342
|
+
</div>
|
|
1343
|
+
<div class="elevation-3 shadow bg-elevation elevation-card">
|
|
1344
|
+
<div><strong>Level 3</strong><br>
|
|
1345
|
+
<span class="tc-muted small">z-index: 30</span><br />
|
|
1346
|
+
<span class="tc-muted small">Small Drop Shadow</span><br />
|
|
1347
|
+
<span class="tc-muted small">A Little Lighter</span>
|
|
1314
1348
|
</div>
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
<
|
|
1349
|
+
</div>
|
|
1350
|
+
<div class="elevation-4 shadow bg-elevation elevation-card">
|
|
1351
|
+
<div><strong>Level 4</strong><br>
|
|
1352
|
+
<span class="tc-muted small">z-index: 40</span><br />
|
|
1353
|
+
<span class="tc-muted small">Medium Drop Shadow</span><br />
|
|
1354
|
+
<span class="tc-muted small">Lighter</span><br />
|
|
1355
|
+
</div>
|
|
1356
|
+
</div>
|
|
1357
|
+
<div class="elevation-5 shadow bg-elevation elevation-card">
|
|
1358
|
+
<div><strong>Level 5</strong><br>
|
|
1359
|
+
<span class="tc-muted small">z-index: 50</span><br />
|
|
1360
|
+
<span class="tc-muted small">Large Drop Shadow</span><br />
|
|
1361
|
+
<span class="tc-muted small">Lightest</span><br />
|
|
1362
|
+
<span class="tc-muted small">(6–10 same)</span>
|
|
1320
1363
|
</div>
|
|
1321
1364
|
</div>
|
|
1322
1365
|
</k-card>
|
|
@@ -1357,24 +1400,8 @@
|
|
|
1357
1400
|
<td>Background for level 5</td>
|
|
1358
1401
|
</tr>
|
|
1359
1402
|
<tr>
|
|
1360
|
-
<td><code>--c_bg_elevation_6</code></td>
|
|
1361
|
-
<td>
|
|
1362
|
-
</tr>
|
|
1363
|
-
<tr>
|
|
1364
|
-
<td><code>--c_bg_elevation_7</code></td>
|
|
1365
|
-
<td>Background for level 7</td>
|
|
1366
|
-
</tr>
|
|
1367
|
-
<tr>
|
|
1368
|
-
<td><code>--c_bg_elevation_8</code></td>
|
|
1369
|
-
<td>Background for level 8</td>
|
|
1370
|
-
</tr>
|
|
1371
|
-
<tr>
|
|
1372
|
-
<td><code>--c_bg_elevation_9</code></td>
|
|
1373
|
-
<td>Background for level 9</td>
|
|
1374
|
-
</tr>
|
|
1375
|
-
<tr>
|
|
1376
|
-
<td><code>--c_bg_elevation_10</code></td>
|
|
1377
|
-
<td>Background for level 10 (lightest / highest)</td>
|
|
1403
|
+
<td><code>--c_bg_elevation_6</code> – <code>--c_bg_elevation_10</code></td>
|
|
1404
|
+
<td>Same as <code>--c_bg_elevation_5</code> (levels 6–10 do not get lighter)</td>
|
|
1378
1405
|
</tr>
|
|
1379
1406
|
<tr>
|
|
1380
1407
|
<td><code>--shadow_0</code></td>
|
|
@@ -1397,24 +1424,8 @@
|
|
|
1397
1424
|
<td>Shadow for level 5 (medium-small outset)</td>
|
|
1398
1425
|
</tr>
|
|
1399
1426
|
<tr>
|
|
1400
|
-
<td><code>--shadow_6</code></td>
|
|
1401
|
-
<td>
|
|
1402
|
-
</tr>
|
|
1403
|
-
<tr>
|
|
1404
|
-
<td><code>--shadow_7</code></td>
|
|
1405
|
-
<td>Shadow for level 7 (medium-large outset)</td>
|
|
1406
|
-
</tr>
|
|
1407
|
-
<tr>
|
|
1408
|
-
<td><code>--shadow_8</code></td>
|
|
1409
|
-
<td>Shadow for level 8 (large outset)</td>
|
|
1410
|
-
</tr>
|
|
1411
|
-
<tr>
|
|
1412
|
-
<td><code>--shadow_9</code></td>
|
|
1413
|
-
<td>Shadow for level 9 (very large outset)</td>
|
|
1414
|
-
</tr>
|
|
1415
|
-
<tr>
|
|
1416
|
-
<td><code>--shadow_10</code></td>
|
|
1417
|
-
<td>Shadow for level 10 (maximum outset)</td>
|
|
1427
|
+
<td><code>--shadow_6</code> – <code>--shadow_10</code></td>
|
|
1428
|
+
<td>Same as <code>--shadow_5</code> (levels 6–10 do not get deeper)</td>
|
|
1418
1429
|
</tr>
|
|
1419
1430
|
</tbody>
|
|
1420
1431
|
</table>
|