initial commit

src/lib/themes.ts

@@ -0,0 +1,210 @@
+/**
+ * Starter layouts.
+ *
+ * Every preset is written only in terms of the tokens from styles/tokens.css —
+ * no element selectors, no !important — which is both the point (they're
+ * examples of the intended override style) and the reason they compose with
+ * whatever else a user writes underneath.
+ */
+
+export interface ThemePreset {
+  id: string
+  name: string
+  description: string
+  css: string
+}
+
+export const PRESETS: ThemePreset[] = [
+  {
+    id: 'classic',
+    name: 'Classic Blue',
+    description: 'The default. Navy chrome, cornflower boxes, peach bands.',
+    css: '',
+  },
+  {
+    id: 'midnight',
+    name: 'Midnight',
+    description: 'Dark background, cyan links, the 2 a.m. profile edit.',
+    css: `:root {
+  /* Native form controls and scrollbars follow the palette. */
+  color-scheme: dark;
+
+  --ms-page-bg: #0e0e14;
+  --ms-page-fg: #d8d8e0;
+  --ms-canvas-bg: #06060a;
+  --ms-link: #58d7ff;
+  --ms-link-visited: #b39ddb;
+  --ms-link-hover: #9beaff;
+  --ms-chrome-bg: #12121c;
+  --ms-nav-bg: #1c1c2c;
+  --ms-nav-active-bg: #58d7ff;
+  --ms-nav-active-fg: #06060a;
+  --ms-module-bg: #14141e;
+  --ms-module-border: #2e2e44;
+  --ms-module-header-bg: #1c1c2c;
+  --ms-module-header-fg: #58d7ff;
+  --ms-band-bg: #1c1c2c;
+  --ms-band-fg: #58d7ff;
+  --ms-band-border: #2e2e44;
+  --ms-heading-fg: #58d7ff;
+  --ms-table-label-bg: #1a1a26;
+  --ms-table-label-fg: #a9a9c0;
+  --ms-table-value-bg: #14141e;
+  --ms-table-value-fg: #d8d8e0;
+  --ms-table-stripe-bg: #11111a;
+  --ms-input-bg: #0a0a10;
+  --ms-input-fg: #d8d8e0;
+  --ms-input-border: #2e2e44;
+  --ms-button-bg: linear-gradient(#24243a, #16161f);
+  --ms-button-fg: #d8d8e0;
+  --ms-button-border: #2e2e44;
+  --ms-muted-fg: #7c7c96;
+  --ms-hr-color: #24243a;
+  --ms-avatar-border: #2e2e44;
+}`,
+  },
+  {
+    id: 'bubblegum',
+    name: 'Bubblegum',
+    description: 'Hot pink, Comic Sans, rounded corners. No apologies.',
+    css: `:root {
+  --ms-font-family: 'Comic Sans MS', 'Comic Neue', Verdana, sans-serif;
+  --ms-font-size: 12px;
+  --ms-font-size-content: 13px;
+  --ms-page-bg: #fff4fb;
+  --ms-canvas-bg: #ffd9f0;
+  --ms-page-fg: #43102f;
+  --ms-link: #d6006e;
+  --ms-link-visited: #a3005c;
+  --ms-link-hover: #ff2e9a;
+  --ms-chrome-bg: #ff2e9a;
+  --ms-nav-bg: #ff85c2;
+  --ms-nav-active-bg: #ffd400;
+  --ms-nav-active-fg: #43102f;
+  --ms-module-bg: #fffafd;
+  --ms-module-border: #ff85c2;
+  --ms-module-header-bg: #ff2e9a;
+  --ms-module-radius: 10px;
+  --ms-band-bg: #ffe27a;
+  --ms-band-fg: #b3005e;
+  --ms-band-border: #ffb800;
+  --ms-heading-fg: #d6006e;
+  --ms-table-label-bg: #ffd9f0;
+  --ms-table-value-bg: #fffafd;
+  --ms-table-stripe-bg: #fff0f8;
+  --ms-avatar-radius: 8px;
+  --ms-avatar-border: #ff85c2;
+  --ms-button-bg: linear-gradient(#fff, #ffd9f0);
+  --ms-button-border: #ff85c2;
+}`,
+  },
+  {
+    id: 'terminal',
+    name: 'Terminal',
+    description: 'Green on black, monospace, no decoration.',
+    css: `:root {
+  color-scheme: dark;
+
+  --ms-font-family: 'Courier New', Courier, monospace;
+  --ms-font-family-heading: 'Courier New', Courier, monospace;
+  --ms-font-size: 13px;
+  --ms-font-size-content: 13px;
+  --ms-page-bg: #000000;
+  --ms-canvas-bg: #000000;
+  --ms-page-fg: #33ff66;
+  --ms-link: #99ff99;
+  --ms-link-visited: #66cc66;
+  --ms-link-hover: #ffffff;
+  --ms-link-decoration: underline;
+  --ms-chrome-bg: #001a00;
+  --ms-chrome-fg: #33ff66;
+  --ms-nav-bg: #002600;
+  --ms-nav-active-bg: #33ff66;
+  --ms-nav-active-fg: #000000;
+  --ms-module-bg: #000000;
+  --ms-module-border: #1f7a33;
+  --ms-module-header-bg: #001a00;
+  --ms-module-header-fg: #33ff66;
+  --ms-band-bg: #001a00;
+  --ms-band-fg: #99ff99;
+  --ms-band-border: #1f7a33;
+  --ms-heading-fg: #99ff99;
+  --ms-table-label-bg: #001a00;
+  --ms-table-label-fg: #33ff66;
+  --ms-table-value-bg: #000000;
+  --ms-table-value-fg: #33ff66;
+  --ms-table-stripe-bg: #000d00;
+  --ms-table-border: #1f7a33;
+  --ms-input-bg: #000000;
+  --ms-input-fg: #33ff66;
+  --ms-input-border: #1f7a33;
+  --ms-button-bg: #001a00;
+  --ms-button-fg: #33ff66;
+  --ms-button-border: #1f7a33;
+  --ms-muted-fg: #1f7a33;
+  --ms-avatar-border: #1f7a33;
+  --ms-hr-color: #1f7a33;
+}`,
+  },
+  {
+    id: 'sunset',
+    name: 'Sunset',
+    description: 'Warm oranges and browns, wider text, gentler on the eyes.',
+    css: `:root {
+  --ms-font-size: 12px;
+  --ms-font-size-content: 14px;
+  --ms-line-height: 1.55;
+  --ms-page-bg: #fffaf3;
+  --ms-canvas-bg: #f0dcc4;
+  --ms-page-fg: #3a2a1c;
+  --ms-link: #b5451b;
+  --ms-link-visited: #8a3714;
+  --ms-link-hover: #e0642f;
+  --ms-chrome-bg: #7a3410;
+  --ms-nav-bg: #b5451b;
+  --ms-nav-active-bg: #ffb845;
+  --ms-nav-active-fg: #3a2a1c;
+  --ms-module-bg: #fffaf3;
+  --ms-module-border: #dcae7a;
+  --ms-module-header-bg: #c96a2c;
+  --ms-band-bg: #ffe0b8;
+  --ms-band-fg: #a8410f;
+  --ms-band-border: #dcae7a;
+  --ms-heading-fg: #b5451b;
+  --ms-table-label-bg: #f5e2cb;
+  --ms-table-value-bg: #fffaf3;
+  --ms-table-stripe-bg: #fdf2e5;
+  --ms-table-border: #dcae7a;
+  --ms-avatar-border: #dcae7a;
+  --ms-hr-color: #e6cfae;
+  --ms-page-width-wide: 900px;
+}`,
+  },
+]
+
+/**
+ * A worked example, shown in Settings, that goes past recolouring: it shows
+ * the class hooks and the data attributes rather than just the token layer.
+ */
+export const EXAMPLE_CSS = `/* Restyle just your own blog entries */
+.blog-entry[data-mine='true'] {
+  background: #fffbe6;
+  border-left: 4px solid #ffb845;
+  padding-left: 8px;
+}
+
+/* Make private entries obvious */
+.blog-entry[data-visibility='private'] {
+  background: #fff0f0;
+}
+
+/* Round the friend-space photos */
+.friend-card-photo {
+  border-radius: 50%;
+}
+
+/* A background image behind the whole page */
+.profile-page {
+  background-image: url(https://example.com/stars.png);
+  background-attachment: fixed;
+}`