Top tips for utilizing CSS in a web component library to support various themes

Our team is currently in the process of developing a comprehensive design system that will be utilized across multiple projects for two distinct products. Each product operates with its own unique brand styleguide which utilizes design tokens, such as:

Theme 1

primary: 'red',
secondary: 'blue',
etc...

Theme 2

primary: 'purple',
secondary: 'yellow',
etc...

The design tokens are defined within Figma and then made accessible through Zeplin, where they can be accessed using the Zeplin REST API.

Within each product, we have a range of mobile and web applications. React Native is used to develop the mobile apps while Vue.js is utilized for the web apps.

We have created two separate component libraries, one catered to React Native components and another for Vue.js components.

... (rest of the text remains unchanged)
cssvue.jsfrontendvue-componentdesign-tokens

Answer №1

  const bodyStyles = document.body.style
                if (this.theming.fontFamily) {
                    bodyStyles.setProperty('--font-family', `${this.theming.fontFamily}, sans-serif`)
                }

Consider having a universal CSS file in each repository containing default CSS variables that can be updated when the theme object is fetched.

To set the CSS variables programmatically in the App component during initialization, ensure to wait for the theme object first to prevent app rendering issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve the JSON data from a POST request made through AJAX to a PHP file and save it in an array variable?

My ajax request sends JSON data to a PHP file named 'receive.php'. user_name , user_id, etc. are defined at the beginning of my script but can be changed to anything else. Below is the JavaScript code I am using: const data = { name: user_na ...

javascriptphpjqueryjsonfrontend

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

HTML code:- <p><input type="text" placeholder="Enter your username"></p> CSS code:- .main-header input { width: 90%; padding: 1rem; margin: 20px 0px; border: none; border-bottom: 4px solid #5f5fb0; ...

htmlcssinputcolors

Ways to access information from doc.data()

<template> <div> {{ id }} {{ title }} </div> </template> <script> import { useRoute } from 'vue-router' import 'firebase/firebase-firestore' import { db } from '@/fdb' export default ...

javascriptfirebasevue.jsgoogle-cloud-firestore

How to ensure two unordered lists are aligned at the same baseline using CSS

Is it possible to align two UL's to a single baseline, with one UL aligned flush left and the other flush right? Currently, the UL's are not aligned and appear like this: How can I make sure the two UL's share the same baseline? CSS #foo ...

csshtmlalignmenthtml-lists

The AWS Cognito User Interface utilizes a hash in order to incorporate parameters during its invocation of the callback page

I'm encountering an issue with the AWS Cognito provided UI interface. When attempting to use the provided UI, I make a call to the endpoint using the populated URL: The issue arises after authentication when Cognito utilizes a # to return the requir ...

vue.jsvuejs2vue-routeramazon-cognitoaws-userpools

Creating a Triangle Slider Component with React and Material-UI (MUI)

Struggling with creating a price control using react js and MUI, similar to the image below: https://i.stack.imgur.com/ZP8oc.png I've searched online for libraries or solutions, but haven't found anything that works. ...

javascriptcssreactjsmaterial-uijsx

Crushing jQuery's Sortable/Droppable

Having a little issue here. I want to be able to toggle the sortable plugin's behavior by clicking a button - basically switching between sort mode and view mode. I've attempted to achieve this with the following code: function enterSortMode(){ ...

javascriptjquerycssjquery-pluginsjquery-ui-sortable

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

csslayoutnext.jstailwind-csscss-grid

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

javascripthtmlcss

Customize vue.config.js and webpack 4: modify the 'exclude' or 'include' parameters of a rule

I'm trying to customize the exclude/include parameters of a webpack rule in a project created using vue-cli-service. Since it only has a vue.config.js, I can access the configuration using chainWebpack, but modifying the rule directly is proving to be ...

vue.jswebpackwebpack-chain

Why isn't Sequence.js Slider automatically playing?

Issue: The sequence.js slider I implemented is not animating. Despite adding the following options: animateCanvas: true, fadeStepWhenSkipped: false, autoPlay: true, autoPlayInterval, 2000 It still does not work. Is there something essential t ...

javascriptjquerycsshtmlslider

Is it feasible to capture a screenshot of a URL by using html2canvas?

Is it possible to take a screenshot of a specific URL using html2canvas? For example, if I have the following URLs: mydomain.com/home mydomain.com/home?id=2 mydomain.com/home/2 How can I capture and display the screenshot image on another page? window ...

javascriptjqueryhtmlcsshtml2canvas

"Add a touch of magic to your webpage with text effects that appear

I am looking to create a glowing text effect, and I stumbled upon this resource. http://jsfiddle.net/karim79/G3J6V/1/ However, the client prefers the text effect to appear after the page loads, rather than on hover. Unfortunately, I do not have experien ...

jqueryhtmlcss

Is there a way to pre-fill meta tags in Nuxt before the page finishes loading?

Having a Nuxt3 application, I encounter an issue where a blog article fetched from Firestore using a path variable ID is not populating the title and meta tags (<Title> and <Meta>) in time for SEO optimization. Despite setting SSR to true and p ...

firebasevue.jsgoogle-cloud-firestorenuxt.js

Leveraging data from a scoped slot in Vue.js within the <script> tag

Is it possible to reuse data from a scoped slot inside a script tag? I have two components: Component A <slot :data="data"> Component B <template v-slot="{ data }"> Using data within the template works. However, I need to use the data with ...

vue.js

Tips for handling numerous buttons in ionic?

I'm currently working on an app that includes surveys. In this app, users are required to answer by selecting either the Yes or No button. The desired behavior is for the chosen button to turn blue once clicked, while the other button should maintain ...

htmlcssangularionic-framework

"Looking to spice up your website with a dynamic background-image

I've encountered a problem with my CSS code for the header's background image. Despite trying various methods to create a slideshow, nothing seems to be working. Can someone provide guidance? I have four banner images named banner1, banner2, bann ...

javascripthtmlcssslideshow

Stubborn boolean logic that refuses to work together

Seeking guidance on resolving a persistent issue with my website that has been causing me headaches for the past few weeks. This website was created as my capstone project during a recent graduate program, where I unfortunately did not achieve all the desi ...

javascripthtmlruby-on-railsvue.jsboolean

The Vuetifyjs 2.0 theme remains unchanged despite using watchers

When working with Vuetifyjs v1.5, I was able to easily change the theme dynamically using Vue watchers. However, this functionality seems to have changed with the update to Vuetifyjs 2.0. Current Versions: Vue - 2.6.10 Vuetify - 2.0 Vuex - 3.1.1 export ...

vue.jsvuexvuetify.js

Utilizing Vue.js to share a single array of data across two distinct input lists

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

javascriptvue.jsvuejs2v-model