Add an example implementation

[dakebl]

Hey @jxnblk,

Really liking what I've been reading in the spec so far, as well as following the conversation over in system-ui/theme-specification#1.

I was wondering if you could add an example of the specification, as you imagine it, to the site?

I think it would be helpful for readers to see the specification in action, and being able to see the implementation would make it simpler for people to follow along.

Would also be great to see the example specification being used in a couple of framework examples too.

Perhaps having the spec pulled into some Emotion/Styled Components/Glamour/etc example projects would help solidify the real world applications.

[dakebl]

Any thoughts on this @jxnblk?

[jxnblk]

Sorry, thought I replied to this! I think that’s a great idea. Ideally there could be a few examples to show how flexible this still is. I’d accept PRs or links to examples for inclusion

[dakebl]

Yeah, I agree. Especially if we can write a little about the commonality between the implementations, as I think this will be a good test of the specification "in the wild", so to speak.

I think a simple app that emulates the theme toggle feature on the Styled System website would be a good example. We could make a page that displays some common elements (headings, cards, form inputs, etc) and have them change on theme toggle.

Before I get started, I'm fleshing out what a robust theme would look like.
This is what I have so far, minus many aliases I'm sure I would add in the real world:

const tokens = {
  fontSizes: [
    '12px', '14px', '16px', '20px', '24px', '32px'
  ],
  fontWeights: [
    200, 300, 400, 600, 700, 900
  ],
  lineHeights: [
    '1px', '1.25px', '1.5px', '1.75px', '2px'
  ],
  letterSpacings: [
    '-1px', 0, '1px', '1.5px', '2px', '3px'
  ],
  space: [
    0, '4px', '8px', '16px', '32px', '64px'
  ],
  breakpoints: [ 
    '40em', '52em', '64em' 
  ],
  sizes: [
    0, '25%', '50%', '75%', '100%'
  ],
  borderWidths: [
    0, '.5px', '1px', '1.5px', '2px'
  ],
  borderStyles: [
    // Not sure what to do with this one. The default border styles work fine.
  ],
  radii: [
    0, '2px', '4px', '6px', '8px', '10px'
  ],
  zIndices: [
    1, 2, 3, 4, 5, 6  
  ],
  fonts: {
    body: 'san-serif',
    heading: 'san-serif',
    monospace: 'monospace'
  },
  colors: {
    red: '#FF0000',
    orange: '#FF7F00',
    yellow: '#FFFF00',
    green: '#00FF00',
    blue: '#0000FF',
    indigo: '#4b0082',
    violet: '#8B00FF',
    black: '#000000',
    grey: '#808080',
    white: '#FFFFFF',
  },
  shadows: {},
  borders: {},
};

tokens.mediaQueries = {
  small: `@media screen and (min-width: ${tokens.breakpoints[0]})`,
  medium: `@media screen and (min-width: ${tokens.breakpoints[1]})`,
  large: `@media screen and (min-width: ${tokens.breakpoints[2]})`,
};

tokens.fontSizes.h1 = tokens.fontSizes[5]
tokens.fontSizes.h2 = tokens.fontSizes[4]
tokens.fontSizes.h3 = tokens.fontSizes[3]
tokens.fontSizes.h4 = tokens.fontSizes[2]
tokens.fontSizes.h5 = tokens.fontSizes[1]
tokens.fontSizes.h6 = tokens.fontSizes[0]
tokens.fontSizes.body = tokens.fontSizes[2]

tokens.colors.primary = tokens.colors.blue;
tokens.colors.secondary = tokens.colors.indigo;
tokens.colors.body = tokens.colors.black;

tokens.borders.standard = `${tokens.borderWidths[2]} solid ${tokens.colors.black}`;
tokens.shadows.boxShadow = `5px 10px ${tokens.colors.grey}`;

export default tokens;

Does this seem comprehensive, or am I missing/misinterpreting anything?

[cevr]

@dakebl What about transitions?