CSS custom properties - Githubissues

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like A way to easily inject CSS custom properties to mimic the design tokens. I believe they must be injected by the localserver, but I guess what I am requesting is a way to override them (once standard design tokens are supported).

I would like to provide the custom css properties in the localdevserver.config.json like so

{
  // What namespace to use referencing your Lightning Web Components
  namespace: 'c',

  // Name of the component to load in the default container
  main: 'app',

  // Where are your component files. If you have a namespace, specify the directory the namespace folder is in.
  modulesSourceDirectory: 'src/',

  // Where are your static assets.
  staticResourcesDirectory: 'staticresources',

  // The address port for your local server. Defaults to 3333
  port: 3333,

  // Optional path to the custom labels file
  customLabelsFile: 'labels/CustomLabels.labels-meta.xml',

 designTokens: {
    brandAccessibleActive: 'red'
 }
}

Describe alternatives you've considered

my workaround to this problem is to modify the .localdevserver/public/assets/styles/styles.css file like so

@font-face {
    font-family: 'Neutraface Display';
    src: url('/assets/fonts/NeutrafaceDisplay.woff2') format('woff2'),
         url('/assets/fonts/NeutrafaceDisplay.woff')  format('woff');
    font-weight: 700;
    font-display: swap;
}

html {
 --lwc-brandAccessibleActive: red;
}

Additional context none

forcedotcom / lwc-dev-server-feedback

CSS custom properties #40