# Origami as an assembler for css?

An idea for building a shared, overridable library of styles.

To serve the website: `ori serve site.ori`.

`lib` is a (symlink to a) directory of css snippets. `style.css`, the final stylesheet for this project, is output by `style.ori.css`, which includes files from `lib`.

`lib/typography.css`. Document the interface: vars used and selectors targeted.

```css
/*
 * vars: --textcolor
 * targets: body
 */

:root {
  --textcolor: black;
}

body {
  font-family: sans-serif;
  font-size 16px;
  color: var(--textcolor);
}

```


`style.ori.css`:

```css
/* order is important. */
${tokens.js(tokens.yaml/, lib/tokens.yaml/)}


/*include the typography rules: typography.css*/
${lib/typography.css}

/*overrides for typography: typography.css*/
body {
  --textcolor: #25c4aa;
  font-family: 'Jost*', sans-serif; 
}

h1 {
  font-size: var(--titlesize)
}

/* include layout rules: page-layout-grid-centered-#25ea-a0 PINNED
 * the #VERSION_NUMBER indicates which of the variants in the library is being used.
 * PINNED is a reminder not to upgrade to a new version without reviewing first. */
${<lib/page-layout-grid-centered-#26ea-a0.css>}
/*(the angle brackets are needed because the path contains a #)*/
```

## What about design tokens?
This works, too. A `tokens.yaml` file can be read by `tokens.js` and converted to CSS custom property declarations: `titlesize: 3rem` => `--titlesize: 3rem;`.

`tokens.js` also optionally merges a default tokens file from `lib` with a local one, overriding default values if they are defined in the local file.

NOTE: This project contains some convoluted variable overrides for demonstration purposes -- not necessarily recommended in production.

I suppose Origami templating could be applied to the token files, to compute some values from others? See `./token-compute.ori.yaml`.


## Disadvantages
no source mapping makes debugging in the browser more difficult. Could probably be added fairly easily?

## Advantages
no extra tooling and dependencies (e.g. `postcss` -- compare [gist-weborigami-postcss](https://git.surfacemarkup.net/hans/gist-weborigami-postcss)