feat(page): add page component

Page - the root element
our first component!

src/components/index.ts

@@ -0,0 +1 @@
+export * from './page';

src/components/page.ts

@@ -0,0 +1 @@
+export * from './page/page';

src/components/page/page.css

@@ -0,0 +1,6 @@
+:host {
+  display: flow-root;
+  color: rgb(var(--mm-color-on-background));
+  background-color: rgb(var(--mm-color-background));
+  font-family: Roboto, system-ui;
+}

src/components/page/page.html

@@ -0,0 +1 @@
+<slot></slot>

src/components/page/page.ts

@@ -0,0 +1,40 @@
+import { useElement } from '../../core/element';
+import { defaultTheme, generateCSSKeys, overrideColorKeys } from '../../utils/theme';
+import template from './page.html';
+import style from './page.css';
+
+const name = 'mm-page';
+const props = {
+  theme: 'auto' as 'auto' | 'light' | 'dark',
+};
+
+const themeStyle = /* css */ `
+:host {
+  ${generateCSSKeys(defaultTheme)}
+}
+@media (prefers-color-scheme: light) {
+  :host {
+    ${overrideColorKeys.light}
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :host {
+    ${overrideColorKeys.dark}
+  }
+}
+:host([theme="light"]) {
+  ${overrideColorKeys.light}
+}
+:host([theme="dark"]) {
+  ${overrideColorKeys.dark}
+}`;
+
+export class Page extends useElement({
+  template,
+  style: [style, themeStyle],
+  props,
+}) {
+  declare theme: typeof props.theme;
+}
+
+Page.define(name);

src/main.ts

@@ -0,0 +1 @@
+export * as components from './components/index';