How to officially implement ModeStyles

Stencil
1

In this page: https://stenciljs.com/docs/component is the only mention of ModeStyles

/**
 * Similar as `styleUrl` but allows to specify different stylesheets for different modes.
 */
  styleUrls?: string[] | d.ModeStyles;

Are there any official documentation on how to properly set this mode, that works in all major UI frameworks?

2

This is more something in stencil that was made for ionic specifically. Basically you can provide a different style for different modes of your components. We do this for Ionic components with ios and md

@Component({
  tag: 'ion-button',
  styleUrls: {
    ios: 'button.ios.scss',
    md: 'button.md.scss'
  }
})

So you can set a mode attribute on the html tag and the component will use the styles associated to that mode.

So for ionic, we have md and ios modes, and set the mode on the root html element.

Screen Shot 2020-12-09 at 2.49.14 PM
Screen Shot 2020-12-09 at 2.49.14 PM935×89 15 KB

1 Like
3

So the idea is NOT on a individual component, but at a high level like <HTML> and then the children should change. The issue has been in react output for me, where the mode isn’t being applied on elements not visible at first.

4

Yeah. As when the components do a full load, they should be able to know what styles need for that platform.

The mode wont be applied by default for all components. it should be only on that root html node.

5

I have this in my global script, similar to ion, but what I was doing was setting it on every element. Which technically worked, but noticing some odd issues with nesting and react handling it. Which would make sense. I’ll give this a shot, the purpose is to test out new designs on select components.

import { setMode, getMode } from '@stencil/core';
import { Mode } from '../utils/interfaces';

let defaultMode: Mode;

export const getBrand = (ref?: any): Mode => {
  return (ref && getMode(ref)) || defaultMode;
};

const isAllowedBrand = (elmMode: string) => ['default', 'next'].includes(elmMode);
const isWebComponentElement = (elm: any) => elm.tagName && elm.tagName.startsWith('XDS-');

export default () => {
  setMode((elm: any) => {
    while (elm) {
      const elmMode = (elm as any).mode || elm.getAttribute('mode');
      if (elmMode) {
        if (isAllowedBrand(elmMode)) {
          return elmMode;
        } else if (isWebComponentElement(elm)) {
          console.warn('Invalid mode: "' + elmMode + '", expected: "default" or "next"');
        }
      }
      elm = elm.parentElement;
    }
    return 'default';
  });
};
6

Hello Mike, is this how I could implement multiple themes for the design system? can you please point me to where can I get more information about how this ModeStyles?

My issue is that my components work fine with a single theme, but when importing the css variables for all themes it becomes a mess !!!

Thank you