Theming Architecture

[esri]

Theming Architecture

[driskull]

@asangma global style: globalStyle: "src/assets/styles/includes.scss",

[asangma]

Thanks @driskull!

[driskull]

I think this is pretty much how we want to do theming:
https://stackoverflow.com/questions/52624110/can-stenciljs-component-use-external-theming?answertab=votes#tab-top

Using CSS properties (variables)

http://jsfiddle.net/5fv9r6e1/

[asangma]

Looks like I have something working nicely here:

:root {
  // Background
  --background: #{$white};
  --background__content: #{$lightest-gray};

  // :hover :active :current
  --background--highlight: #{$lightest-blue};

  // Foreground
  --foreground: #{$darker-gray};
  --foreground__interactive: #{$darker-gray};

  // Foreground :states
  --foreground__interactive--highlight: #{$dark-blue};

  // Borders
  --border: #{rgba($darker-gray, 0.25)};
}

:root([theme="dark"]) {
  // Background
  --background: #{$darker-gray};
  --background-content: #{$darkest-gray};

  // Background :hover :active :current
  --background--highlight: #{$darkest-gray};

  // Foreground
  --foreground: #{$lightest-gray};
  --foreground__interactive: #{$lighter-gray};

  // Foreground  :hover :active :current
  --foreground__interactive--highlight: #{$v-bb-120}; // Vibrant Blue

  // Borders
  --border: #{rgba($lightest-gray, 0.25)};
}

And in e.g. calcite-action

:host .calcite-action__button {
...
  color: var(--foreground__interactive);
  fill: var(--foreground__interactive);
  background-color: var(--background);
...
}

[driskull]

related to: Esri/calcite-design-system#39 & #50

https://teams.microsoft.com/l/message/19:[email protected]/1561067229595?tenantId=aee6e3c9-711e-4c7c-bd27-04f2307db20d&groupId=56fae21a-9407-4943-859f-a9bfcf0bbad3&parentMessageId=1561067229595&teamName=Calcite&channelName=Calcite%20Components&createdTime=1561067229595

[driskull]

Here is what Calcite is proposing for handling theming. Esri/calcite-design-system#66

'@stencil/state-tunnel'
https://github.com/ionic-team/stencil-state-tunnel
https://github.com/ionic-team/stencil-state-tunnel/wiki