adaptive values

[tushar-singh]

@kylerc here's an idea for more dynamic styling. Need your comment on feasibility/perf (from what I understand it should be possible, with not-so-bad perf hit with debounce on updates)

theme.js:

gutter: {
    base: 15,
    small: 8,
},
adaptiveGutter: {
    updateOn: ['orientationChange', 'resize'],
    value: () => {
        if (window.innerWidth < 600) return { base: 10, small: 6 };
        else return { base: 15, small: 8 };
    }
}

SomeComponent/style.js

padding: theme.adaptiveGutter.base

Automagically updated on orientationChange and resize. Avoids media queries across the board for certain repetitive values (+ free consistency)

There's another way with a function which could theoretically improve performance by letting you know which components exactly use the adaptive values and only update their style. But its more verbose compared to the original method which doesn't require any change in style.js

[tushar-singh]

got a third method (fastest, but limited to MQ scope)

This is a rough idea - implementation will need some change (calling adaptiveGutter with params is probably the way to go)

adaptiveGutter: {
  hasQueries: true,
  '(max-width: 600)': {
    base: 10,
    small: 6,
  }
}

calculate at initial resolve then let MQs do the work

if (typeof value === 'object' && value.hasQueries) {
….
}