Add styled system

[lemonmade]

Styled system

In consumer:

const viewStyle = styles`
  inline-size: small;
  background: subdued;
  border-inline-start: base;

  @state(hover) {
    background: hover;
  }

  @state(focus) {
    background: focus;
  }
`;

return (
  <View border="base" blockSize={css`32rem`} style={viewStyle}>
    {children}
  </View>
);

Or...

.MyView {
  inline-size: small;
  background: subdued;
  border-inline-start: base;

  @state (hover) {
    & {
      background: emphasized;
    }
  }
}

import styles from "./MyView.module.css";

return (
  <View border="base" style={styles.MyView}>
    {children}
  </View>
);

In host...

const dynamicStyleObject = parse(serializedStyle, styles);
const constructedStyleSheet = new ConstructedStyleSheet(
  serializedStyle,
  styles
);

In UI library...

enum Emphasis {
  subdued = 4,
  base = 5,
  emphasized = 6,
}

const emphasisKeyword = new StyleKeyword("emphasis", Emphasis);
const borderKeyword = new StyleKeyword("border", {
  none: 0,
  subdued: 4,
  base: 5,
  emphasized: 6,
});
const spacingKeyword = new StyleKeyword("spacing", {
  none: 0,
  "small-2": 2,
  "small-1": 3,
  small: 4,
  base: 5,
  large: 6,
  "large-1": 7,
  "large-2": 8,
});

const inlineSize = new StyleProperty("inlineSize", {
  serialize: 1,
  // Default is to alias to the dasherized name
  alias: ["inline-size"],
  // This is also the default
  allow: [CSSLiteral],
});

const background = new StyleProperty("background", {
  serialize: 2,
  alias: false,
});

const border = new StyleProperty("border", {
  serialize: 3,
  allow: [borderKeyword],
});

const spacing = new StyleProperty("spacing", {
  serialize: 4,
  allow: [spacingKeyword, CSSLiteral],
});

// Also available in "build" form, for creating CSS parser
const styles = createStyles({
  properties: [inlineSize, background, border, spacing],
});