Build styles library

[dcecile]

Goals

• "Inline" styles with strong types
• Last style per atom wins
• Baseline selectors: media query, custom property, pseudo-class
• Global reset
• Vars to use for themes

Unlocks

• View building work
• Responsive design

Tasks

• [x] #105
• [x] #106
• [x] #107
• [x] #109
• [x] #110
• [x] #111
• [x] #112
• [x] #113
• [x] #114
• [x] #115
• [x] #116
• [x] #117
• [x] #119
• [ ] Baseline selectors
• [ ] Baseline queries
• [ ] Baseline functions
• [x] ~Animations~
• [x] ~Computation selectors via container style queries~

[dcecile]

import * as contrast from '@/index.ts'
import * as compute from '@intertwine/lib-compute'

export const url = import.meta.url

export const tests = {
  ['base'](ctx: contrast.Context): void {
    contrast.compile(ctx, [
      contrast.background.color(contrast.rgb(255, 0, 0)),
    ])
  },

  ['one in compute'](ctx: contrast.Context): void {
    contrast.compile(ctx, [
      compute.pure(contrast.background.color(contrast.rgb(255, 0, 0))),
    ])
  },

  ['array in compute'](ctx: contrast.Context): void {
    contrast.compile(ctx, [
      compute.pure([contrast.background.color(contrast.rgb(255, 0, 0))]),
    ])
  },

  ['compute style in compute'](ctx: contrast.Context): void {
    contrast.compile(ctx, [
      // @ts-expect-error -- invalid nesting
      compute.pure([
        compute.pure(contrast.background.color(contrast.rgb(255, 0, 0))),
      ]),
    ])
  },
}