plspace/src/lib/themes.ts

/**
 * 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;
}`