669 questions
0
votes
1
answer
112
views
tailwind does not use CSS variables I defined in global.css [duplicate]
I am trying to make an app, using tailwind for styling. The problem emerges when I try to use my variables with tailwind. I made seperate config for tailwind, declared the variables in global.css, but ...
- 1
3
votes
1
answer
100
views
CSS variables for custom component in a slot
I have a custom component which is using another component within it but slotted. The component is set up like this:
<div class="nys-modal">
<!-- rest of component -->
<...
1
vote
1
answer
73
views
Unexpected variable resolution order in CSS with var/property nesting [duplicate]
My goal is to have an architecture where the shadow is defined once, but the color changes depending on HTML attribute data-color-mode.
Note: code provided is just for the isolated problem ...
- 3,157
1
vote
1
answer
91
views
Thin border artifacts around animated circular mask during clip-path transition
I have a custom button with a circular mask hover animation using clip-path and CSS custom properties (@property + --tx / --ty).
The effect works just fine, but I see thin visible borders/artifacts ...
- 1,157
-1
votes
2
answers
48
views
Can I combine minmax() with responsive length property in CSS? [duplicate]
I had the idea to use responsive font-size in CSS, so that the font size would depend on the viewport width, but be limited for minimum and maximum size, like this:
@property --font-size-norm { ...
- 4,748
-1
votes
1
answer
77
views
Rename Tailwind's color CSS variables?
I'm using Tailwind and shadCN UI. My theme needs my primary color to be in a css file and have this name:
:root {
--primary: oklch(0.205 0 0);
}
However instead of setting the color value directly ...
- 22.5k
0
votes
0
answers
56
views
How to overwrite popup colors with variables and opacity via the color scheme?
1. Summary
I can’t find how I can overwrite via my color scheme colors in Sublime Text popups, if colors has variables and the color-mod function.
2. MCVE
For example, I have the file KiraExample....
- 2,823
1
vote
2
answers
349
views
How to overwrite css variables value with scss variables
I am working with primeng and would like to overwrite the css variable value.
(this is not important but this will make my issue more clear and what I try to achieve)
for example if I have an badge ...
- 899
1
vote
1
answer
90
views
How to use rem unit in initial-value for a CSS @property rule?
I'm trying to define a CSS @property rule for a font-size with a rem-based initial value.
https://developer.mozilla.org/en-US/docs/Web/CSS/@property
It works as long as no syntax is defined:
@property ...
1
vote
0
answers
66
views
Nuxt: Set custom CSS Var asap, depending on height of element
I have a page, served with Nuxt SSR. It has a header with position:fixed and content that will have a padding-top that equals the header's height:
.content {
padding-top: var(--header-height);
}
...
- 73
1
vote
2
answers
100
views
Combine css variables into one variable
I'm trying to combine/compose multiple css variables into one that I can use but it doesn't seem to be working. In particular I'm trying to combine separate font rules into one where I can then use ...
- 1,557
1
vote
0
answers
21
views
CSS @property in declarative shadow DOM [duplicate]
It is possible to use CSS' @property rule to define CSS variables like in the following example (https://codepen.io/sbhmn/pen/pvzmvvx):
<style>
@property --bg-color {
syntax: "*";
...
- 378
1
vote
1
answer
36
views
Logging when a CSS variable not found
Is there a way to make a browser log events, when a CSS variable is not found? I'm wondering, because it seems to be useful for debugging. Say, if I have the following code:
.stroked-text
{
/* ...
- 367
0
votes
0
answers
16
views
css design token's value not updating [duplicate]
TLDR; why is the button text white?
Codepen to demo: https://codepen.io/bental/pen/vEBdQvJ
I have css variables defined as such:
:root {
--neutral-00: white;
--neutral-100: black;
--general-...
- 9,731
0
votes
1
answer
101
views
How to use a CSS variable inside a custom HTML element?
I have a custom HTML element I made that creates a repeating background pattern which I animate in. I need the ability to dynamically set the color of this pattern with a CSS variable that lives in ...
- 34.6k
0
votes
1
answer
177
views
Add angular material to an angular elements based microfrontend
I have an angular webcomponent that I build with the help of @angular/elements.
The webcomponent has been working in my website for months, so most of the code, deployment and loading is ok.
The ...
- 6,048
0
votes
0
answers
92
views
Issue while assigning CSS variable value to Javascript
In my website, I've a sticky container with a horizontal scroll direction.
The scroll works perfectly. However the issue is, when I tried to get a value from a CSS variable and assign it to Javascript ...
- 451
0
votes
2
answers
81
views
Can't set border style from custom css property
I have a simple react app
(Vite project)
app.tsx
import "./common-styles.css";
export default function App() {
return (
<div className="app">
<div className=&...
- 25
0
votes
0
answers
28
views
Can we take CSS variable value in CSS @keyframes animation? [duplicate]
[EDIT]: To moderators, please read the question carefully before being
in hurry to mark the question duplicate. This question more to take
CSS variable value from JS (set in element style) and not to ...
- 3,039
2
votes
1
answer
50
views
What is a result of the calc() when one of its elements is invalid value?
In this answer Can I use the auto value with the calc() property? the author says that auto is not valid value for the calc() expression.
Ok, fine. But the problem I have is that I have a CSS custom ...
- 67.1k
1
vote
0
answers
49
views
Override root CSS variable without repeating al properties declarations that consume them [duplicate]
Given the following code, the text color is correctly changed in the nested element after updating the root css variable. Is there a way to avoid repeating the color prop twice and get it ...
- 575
1
vote
1
answer
289
views
CSS Variables Not Respecting Selector Precedence? [duplicate]
I've got some code I'm writing for a website builder that's causing me issues. We're using CSS variables to define global styles, with both desktop and mobile layout options, e.g.:
:root {
--section-...
- 16.4k
1
vote
2
answers
77
views
is there a way to assign a different cssVariable to a cssVariable based on the class it is nested in? [duplicate]
we are using a design system that has 'tokens' and 'primitives'.
the idea is that we can connect different baseColors to a different UI-elements depending on the brand.
<h1>Hi this is header&...
1
vote
2
answers
1k
views
how to use css variables to contain color-mix used with another variable
I have in css (generated by sass) variable called --secondary and it's value is red(#f00)
I want to create more variables for opacity like --secondary-100, --secondary-90, ...
I used color-mix in ...
- 63
0
votes
1
answer
47
views
What's the syntax for passing a CSS custom property in reagent?
How do I create this HTML in Reagent/hiccup?
<span style="--custom-property: value"></span>
Both Hiccup and Reagent fail to document how to pass CSS custom properties.
- 2,106
1
vote
1
answer
2k
views
Make a given oklch color 50% lighter via CSS oklch(from ...) and calc() function
We have a design system that comes with a number of CSS custom properties for colors, e.g.:
:root {
--color--blue-1: oklch(88.6% 0.023 238);
}
We're using the relatively new color format oklch.
Now ...
- 57.2k
-1
votes
1
answer
357
views
Use SCSS to convert a CSS variable from HSL to Hex
I have a number of CSS variables containing color values. I'd like to define these in HSL format, but can I let Sass convert these to hex values?
Input:
:root {
--dark: hsl(210, 50%, 13%);
}
Output:...
- 3,047
0
votes
1
answer
186
views
Bootstrap CSS variables not overriding for pagination
Using Bootstrap (currently v5.3.3) I am using a custom-built WordPress theme and setting a whole group of overrides for the colours used.
The custom-built WordPress theme stylesheet is loaded last, ...
- 4,319
1
vote
0
answers
72
views
how to use css variables inside javascript in rollup
I have a UI components repo setup with rollup where I want to use my css variables inside my javascript files. I have done this in another repo which was using webpack and it was quite easy:
import ...
0
votes
1
answer
265
views
CSS Custom Properties with fallback for unrecognised css value (eg. clamp())
As it stands, CSS Custom Properties enjoys a global tracked base of 99.05% support according to CanIUse. Most of this is due to IE support that has one of a number off poly fills particularly when ...
- 20.6k
0
votes
1
answer
521
views
Can you nest CSS Variables in CSS Variable names
I was wondering if it's possible to nest a CSS Variable within a CSS variable's name or possibly do something similar:
:root {
--color-1: red;
--index: 1;
}
span {
color: var(--color-var(--...
- 296
0
votes
0
answers
739
views
Get all CSS variables on an HTML element with JavaScript when you don't know the names of the CSS Variables? [duplicate]
In JavaScript I need to read all the CSS vars that have been applied to an HTML element.
If I know the name of a CSS variable eg --thing I can get it's value with this code. This works in both Chrome ...
- 22.5k
1
vote
1
answer
1k
views
How do I use environnement variable in my CSS using nextJs to specify base color?
how can I use an environment variable to specify the base color in my CSS ?
I use NEXTJS
My colors are all defined as variables in my globals.css :
@layer base {
:root {
...
--primary: #...
- 708
4
votes
1
answer
1k
views
Using var() inside color-mix() appears to make it readable to browsers that don't support color-mix(), preventing the fallback from working
I'm using color-mix to take a button's background-color (set via a custom property) and make it lighter on hover. I expected browsers that don't support color-mix to simply ignore the hover state and ...
- 170
0
votes
0
answers
32
views
What is the correct way to define a CSS variable that will inherit from a prior value (of the same name) but have a sensible default? [duplicate]
It seems to me that the best way to use CSS variables in many cases is to have them default to a pre-existing value but have a sensible default.
E.g. instead of writing:
:host {
--background: white;
...
- 2,393
0
votes
2
answers
110
views
string of only numbers not parsed correctly by CSS
font.newFileName is a string of only numbers: '000001101', '000001102', '000001103', so on and so forth.
If font.newFileName in new FontFace and setProperty is prefixed with a letter or changed to a${...
- 6,076
0
votes
1
answer
281
views
How can I override a css variable by code? [duplicate]
How can I override a css variable from dev console (or injected script of extension)
For example for google.com search page lets say I want to change rhs-width variable.
I can clearly see it defined ...
- 18.4k
0
votes
0
answers
905
views
Using Multi-Theme with Next.js, Ant Design, and Tailwind CSS - Changing Primary-Color in Ant Design Component
I'm working with Next.js, Ant Design, and Tailwind CSS, implementing multi-theme functionality in my globals.css file. I am currently facing an issue with changing the primary-color value in Ant ...
- 11
0
votes
1
answer
284
views
CSS variables inheritance and nested shadow roots
I am using VueJS to define two custom web elements, service-card and slot-card.
I allow CSS variables, e.g. --pm-scale: 0.75, to customize the style of the elements.
slot-card can be used ...
- 39
1
vote
2
answers
732
views
How to Redefine CSS Custom Property Value for :Root Within Container Query Body?
I'm trying to set a CSS custom property within the :root and then change the value depending on the container's size using a container query, but it's not working. Here's an example:
<div class=&...
- 1,236
1
vote
0
answers
107
views
In CSS Color Level 5, how do you reference the value of a relative color from a custom property (color-mix, color-mod, etc)?
So I'm trying to apply a series of modifications to a color via a custom property, but as far as I can tell it can only go one level deep.
Unless I can find a way to extract the color value from the ...
- 11.3k
2
votes
1
answer
270
views
CSS Cascade has no affect on font shorthand if properties have variables as values
Let’s assume we have the following CSS Custom Properties:
// Global CSS
:root {
--font-weight-500: 500;
--font-size-350: 14px;
--font-line-height-500: 20px;
--font-family-sans: 'Roboto Flex', ...
- 341
3
votes
0
answers
198
views
CSS keyframed gradient animation fails on NextJS production build
EDIT: I found that the issue is that during build, the generated css file has the %, from initial-value removed, so it results in just initial-value:0 which is not correct since i'm using perchantage.
...
- 31
1
vote
2
answers
531
views
strange issue with css variables and abs and clamp css functions
I am having trouble seeing why the following CSS code involving custom css variables fails to work as expected:
html
<ul class="grid">
<li>1</li>
<li>2</li>
<...
- 8,393
0
votes
1
answer
213
views
How to set default height of an HTML element and let it adjust to a fixed container height with CSS only
Suppose I'm developing a reusable component, rendered as an HTML element. It can be rendered by anybody in some container. I don't know the styles of the container in advance: it could have a fixed ...
- 3,270
2
votes
0
answers
103
views
Is there any way to create a conditional statement with variables in CSS?
"I'm attempting to create a gallery where clients can choose the number of columns. I've implemented a range selector in my admin panel, allowing clients to choose between 1 and 6 columns. I've ...
0
votes
1
answer
214
views
Calc with a multivalue css variable [duplicate]
I want to make a hover effect over a p-tag, when hovered the background should get darker. I used filter:brightness(85%) but this made also the text darker. Here is my css.
:root {
--my-color:193 55% ...
- 15
-1
votes
2
answers
297
views
How to use an SVG file for the shape of my text buttons?
I'm setting up a design system in NextJS14 (React). We are using CSS modules and have all colors stored in CSS variables (custom properties).
We have these nice-looking buttons in our Figma design. I ...
- 3
1
vote
1
answer
730
views
getPropertyValue sometimes returns empty string for CSS custom property
I am rendering the following style very early in the <head> :
<style>
:root {
--enhanced: false;
}
@supports (selector(:not(.foo))) and
(aspect-ratio: 1 / 1) and
(margin-block-...
- 485
1
vote
0
answers
1k
views
Is it possible to have a meta tag for theme-color with content being a CSS variable?
I've got a WordPress child theme that I'd like to adjust the theme-color meta tag for, but I'd like to be able to change it via the GUI in future rather than jumping back into functions.php (and I don'...
- 167