Theming docs progress update

doc/theming/styled/customization/ComponentDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The design tokens of a specific component is defined at <i>components</i> layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+const MyPreset = definePreset(Aura, {
+    components: {
+        card: {
+            colorScheme: {
+                light: {
+                    root: {
+                        background: '{surface.0}',
+                        color: '{surface.700}'
+                    },
+                    subtitle: {
+                        color: '{surface.500}'
+                    }
+                },
+                dark: {
+                    root: {
+                        background: '{surface.900}',
+                        color: '{surface.0}'
+                    },
+                    subtitle: {
+                        color: '{surface.400}'
+                    }
+                }
+            }
+        }
+    }
+});
+`
+            }
+        };
+    }
+};
+</script>