styles() — vite Function Reference

Architecture documentation for the styles() function in my-element.js from the vite codebase.

Function javascript ProjectScaffolder TemplateEngine

Entity Profile

ProjectScaffolder→ TemplateEngine→ styles() — vite Function Reference

Dependency Diagram

graph TD
  875699fc_4167_37c4_0695_4c88bc562790["styles()"]
  701c5e84_54f7_2670_6573_11a80816c6e9["MyElement"]
  875699fc_4167_37c4_0695_4c88bc562790 -->|defined in| 701c5e84_54f7_2670_6573_11a80816c6e9
  style 875699fc_4167_37c4_0695_4c88bc562790 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/create-vite/template-lit/src/my-element.js lines 123–434

  static get styles() {
    return css`
      :host {
        --text: #6b6375;
        --text-h: #08060d;
        --bg: #fff;
        --border: #e5e4e7;
        --code-bg: #f4f3ec;
        --accent: #aa3bff;
        --accent-bg: rgba(170, 59, 255, 0.1);
        --accent-border: rgba(170, 59, 255, 0.5);
        --social-bg: rgba(244, 243, 236, 0.5);
        --shadow:
          rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
          rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

        --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
        --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
        --mono: ui-monospace, Consolas, monospace;

        font: 18px/145% var(--sans);
        letter-spacing: 0.18px;

        width: 1126px;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        border-inline: 1px solid var(--border);
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        color: var(--text);
      }

      @media (prefers-color-scheme: dark) {
        :host {
          --text: #9ca3af;
          --text-h: #f3f4f6;
          --bg: #16171d;
          --border: #2e303a;
          --code-bg: #1f2028;
          --accent: #c084fc;
          --accent-bg: rgba(192, 132, 252, 0.15);
          --accent-border: rgba(192, 132, 252, 0.5);
          --social-bg: rgba(47, 48, 58, 0.5);
          --shadow:
            rgba(0, 0, 0, 0.4) 0 10px 15px -3px,
            rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
        }

        #social .button-icon {
          filter: invert(1) brightness(2);
        }
      }

      h1,
      h2,
      ::slotted(h1),
      ::slotted(h2) {
        font-family: var(--heading);
        font-weight: 500;
        color: var(--text-h);
      }

      h1,
      ::slotted(h1) {
        font-size: 56px;
        letter-spacing: -1.68px;
        margin: 32px 0;
      }

      h2 {
        font-size: 24px;
        line-height: 118%;
        letter-spacing: -0.24px;
        margin: 0 0 8px;
      }

      p {
        margin: 0;