watterblock/style.css

/* || IMPORTS */
@import "/ui/box.css";
@import "/ui/button.css";
@import "/ui/field.css";
@import "/ui/layout.css";
@import "/ui/round.css";
@import "/ui/session-list.css";
@import "/ui/session-view.css";

/* || COLORS
 *
 * The watterblock uses the following color system:
 *
 * 1. At the top, there are themes. The entire app always uses the same theme.
 *    Currently, there is one dark and one light theme, defaulting to dark.
 * 2. Each theme contains two color sets, "regular" and "alternate". Individual
 *    components always use the same set, but their parent or child components
 *    may differ. Color sets within a theme are meant to complement each other.
 * 3. Each color set contains three main colors: text, background and accent.
 * 4. Each color set also contains additional colors derived from the main
 *    three. For the moment these need to be calculated at authoring time, but
 *    the intention is to use relative colors once they are baseline widely
 *    available, which should happen around April 2027.
 * 5. The "current" color set redefines the applicable colors based on which
 *    color set is currently active. Components are meant to rely on it.
 */

html {
  /* regular main colors */
  --color-regular-text: lch(100 0 0);
  --color-regular-background: lch(10 0 0);
  --color-regular-accent: lch(86 84 71);

  /* regular derived colors */
  --color-regular-disabled-text: lch(75 0 0);
  --color-regular-disabled-background: lch(35 0 0);
  --color-regular-disabled-accent: lch(100 50 71);
  --color-regular-focus-text: lch(90 0 0);
  --color-regular-focus-background: lch(20 0 0);
  --color-regular-focus-accent: lch(95 84 71);
  --color-regular-field: lch(20 0 0);

  /* alternate main colors */
  --color-alternate-text: lch(100 0 0);
  --color-alternate-background: lch(0 0 0);
  --color-alternate-accent: lch(86 84 71);

  /* alternate derived colors */
  --color-alternate-disabled-text: lch(75 0 0);
  --color-alternate-disabled-background: lch(25 0 0);
  --color-alternate-disabled-accent: lch(100 50 71);
  --color-alternate-focus-text: lch(90 0 0);
  --color-alternate-focus-background: lch(10 0 0);
  --color-alternate-focus-accent: lch(95 84 71);
  --color-alternate-field: lch(5 0 0);

  @media (prefers-color-scheme: light) {
    /* regular main colors */
    --color-regular-text: lch(0 0 0);
    --color-regular-background: lch(100 0 0);
    --color-regular-accent: lch(14 77 304);

    /* regular derived colors */
    --color-regular-disabled-text: lch(25 0 0);
    --color-regular-disabled-background: lch(75 0 0);
    --color-regular-disabled-accent: lch(30 77 304);
    --color-regular-focus-text: lch(10 0 0);
    --color-regular-focus-background: lch(90 0 0);
    --color-regular-focus-accent: lch(20 77 304);
    --color-regular-field: lch(95 0 0);

    /* alternate main colors */
    --color-alternate-text: lch(0 0 0);
    --color-alternate-background: lch(90 0 0);
    --color-alternate-accent: lch(14 77 304);

    /* alternate derived colors */
    --color-alternate-disabled-text: lch(25 0 0);
    --color-alternate-disabled-background: lch(65 0 0);
    --color-alternate-disabled-accent: lch(30 77 304);
    --color-alternate-focus-text: lch(10 0 0);
    --color-alternate-focus-background: lch(80 0 0);
    --color-alternate-focus-accent: lch(20 77 304);
    --color-alternate-field: lch(95 0 0);
  }
}

._regular {
  /* main colors */
  --color-text: var(--color-regular-text);
  --color-background: var(--color-regular-background);
  --color-accent: var(--color-regular-accent);

  /* derived colors */
  --color-disabled-text: var(--color-regular-disabled-text);
  --color-disabled-background: var(--color-regular-disabled-background);
  --color-disabled-accent: var(--color-regular-disabled-accent);
  --color-focus-text: var(--color-regular-focus-text);
  --color-focus-background: var(--color-regular-focus-background);
  --color-focus-accent: var(--color-regular-focus-accent);
  --color-field: var(--color-regular-field);
}

._alternate {
  /* main colors */
  --color-text: var(--color-alternate-text);
  --color-background: var(--color-alternate-background);
  --color-accent: var(--color-alternate-accent);

  /* derived colors */
  --color-disabled-text: var(--color-alternate-disabled-text);
  --color-disabled-background: var(--color-alternate-disabled-background);
  --color-disabled-accent: var(--color-alternate-disabled-accent);
  --color-focus-text: var(--color-alternate-focus-text);
  --color-focus-background: var(--color-alternate-focus-background);
  --color-focus-accent: var(--color-alternate-focus-accent);
  --color-field: var(--color-alternate-field);
}

._apply {
  color: var(--color-text);
  background-color: var(--color-background);
}

/* || BASE STYLES
 *
 * The most basic styles for regular content.
 */

html {
  height: 100%;
  font-family: "Dejavu Sans", sans-serif;
  color: var(--color-text);
  background-color: var(--color-background);
}

body {
  min-height: 100%;
  /* really hacky seeming workaround for some CSS weirdness */
  height: 1px;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-accent);
}

h1 {
  font-size: 2em;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 1.75em;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.5em;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 1.35em;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

h5 {
  font-size: 1.25em;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

h6 {
  font-size: 1.1em;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

/* || POSITIONING
 *
 * Helpers for positioning stuff exactly as needed.
 */

._positioned {
  margin: 0;
}

._positioned-top {
  margin-top: 0;
}

._sticky-top {
  position: sticky;
  top: 0;
}

._sticky-bottom {
  position: sticky;
  bottom: 0;
}