Comments (2)
@aminalhazwani We can look at introducing CSS vars but since we're using a pre-processor for other things and that's not likely to go away soon I don't yet see we have much of a use-case for css vars. Especially since they're defined at run time and need to be considered differently compared to working with vars in a pre-processor that are defined up front and baked into the file.
I don't really see the modification thing being a problem if we know these are supposed to be used unmodified. We can make sure they are used that way. A CSS var could get re-defined too.
IMHO giving consumers more options for how to consume the vars could also help with adoption rather than going the route of only exposing them in one format which could limit it.
from design-tokens.
hey @muffinresearch would be an option for you to use the CSS vars instead? We are trying to avoid colors alteration through SASS functions and I noticed that you actually define a new var for the :hover
and :active
state rather than using the darker
function as CSS value. So your approach could also work with the CSS vars, for example:
:root {
--primary-button-background: var(--blue-50);
--primary-button-background-hover: var(--blue-60);
--primary-button-background-active: var(--blue-70);
}
What do you think?
from design-tokens.
Related Issues (19)
- Fira font package HOT 1
- Get our stuff working with the sass-module-importer. HOT 1
- Have CSS variables for more stuff HOT 2
- Are icons in message bars optional or required? HOT 1
- Size of buttons? HOT 1
- Ship photon-colors.css with Firefox HOT 3
- Update global readme with more useful content HOT 1
- Minor updates on GIMP color palette HOT 2
- Update colors readme HOT 1
- Rename folders and files to photon-{something}
- Add alpha channel to color tokens when needed HOT 4
- Convert color tokens to xml for android applications
- How are we going to distribute the tokens to various projects? HOT 1
- There are no icons in the icons folders :( HOT 5
- There shouldn't be semi-colons in the iOS generated colour tokens. HOT 1
- Add Grey 10 a80 to colours.
- Close the repo
- Y|ah HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from design-tokens.