fix: SpreadSheet dark mode display (#1533) & add placeholder example (#1532) (#1564)

* style: fix SpreadSheet dark mode display (#1533)

* fix: add placeholder example (#1532)

Author: aouos

src/guide/best-practices/accessibility.md

@@ -277,6 +277,27 @@ Avoid using placeholders as they can confuse many users.
 
 One of the issues with placeholders is that they don't meet the [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) by default; fixing the color contrast makes the placeholder look like pre-populated data in the input fields. Looking at the following example, you can see that the Last Name placeholder which meets the color contrast criteria looks like pre-populated data:
 
+```vue-html
+<form
+  class="demo"
+  action="/dataCollectionLocation"
+  method="post"
+  autocomplete="on"
+>
+  <div v-for="item in formItems" :key="item.id" class="form-item">
+    <label :for="item.id">{{ item.label }}: </label>
+    <input
+      type="text"
+      :id="item.id"
+      :name="item.id"
+      v-model="item.value"
+      :placeholder="item.placeholder"
+    />
+  </div>
+  <button type="submit">Submit</button>
+</form>
+```
+
 <!-- <common-codepen-snippet title="Form Placeholder" slug="ExZvvMw" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" /> -->
 
 It is best to provide all the information the user needs to fill out forms outside any inputs.

src/guide/extras/demos/SpreadSheet.vue

@@ -26,7 +26,8 @@ const cols = cells.map((_, i) => String.fromCharCode(65 + i))
 
 <style scoped>
 th {
-  background-color: #eee;
+  color: var(--vt-c-text-1);
+  background-color: var(--vt-c-bg-mute);
   padding: 0 1em;
 }
 
@@ -39,7 +40,7 @@ tr:first-of-type th:first-of-type {
 }
 
 td {
-  border: 1px solid #ccc;
+  border: 1px solid var(--vt-c-bg-mute);
   padding: 0;
 }
 </style>

src/guide/extras/demos/SpreadSheetCell.vue

@@ -33,6 +33,7 @@ function update(e) {
   height: 1.5em;
   line-height: 1.5;
   font-size: 15px;
+  color: var(--vt-c-text-1);
 }
 
 .cell span {
@@ -46,7 +47,7 @@ function update(e) {
 }
 
 .cell input:focus {
-  border: 2px solid blue;
-  background-color: #fff;
+  border: 2px solid var(--vt-c-divider);
+  color: var(--vt-c-text-1);
 }
 </style>