Comments (2)
Hi, @liamdebeasi, this makes sense. Thank you so much for looking into it, and for your super thoughtful explanation!
from ionic-framework.
Thanks for the feature request. This is a really cool idea! The team did some discovery into this last week, and unfortunately we won't be able to support this at the moment. The original reason why we have separate hex and rgb values is noted on our docs.
In an ideal world we'd be able to use the relative color syntax that you mentioned and be able to have a single set of hex color tokens. Unfortunately, Firefox does not support the relative color syntax, so supporting this would not work there. Chrome, Edge, and Safari support it, but there are several older versions of these browsers that Ionic still supports.
We considered a couple alternatives:
- Only have tokens for the RGB values
This would mean you'd only have something like--ion-text-color-white: 255, 255, 255
. This would let us have a single set of tokens that would also you control the alpha. You'd need to do the following to use it:
:root {
--ion-text-color-white: 255, 255, 255;
}
.foo {
color: rgb(var(--ion-text-color-white) 0.5);
}
We didn't like this approach for a couple reasons:
a. Your IDE wouldn't show you the color since the value of the variable isn't actually a valid color. In the context of the rgb
function it is, but your IDE doesn't know that's the only way it will be used.
b. The usage would be more involved than it is now since you would need to always use the rgb
function instead of just passing the value to the color
property.:
:root {
- --ion-text-color-white: #ffffff;
+ --ion-text-color-white: 255, 255, 255;
}
.foo {
- color: var(--ion-text-color-white);
+ color: rgb(var(--ion-text-color-white));
}
- Support the relative color syntax with a fallback
This work would involve conditionally applying the relative syntax based on browser support. We ultimately decided not to go this route because it would have added a decent amount of technical debt for the team to maintain. It also could be confusing for developers because there would potentially be 2 different API usages based on browser support.
I think it's worth looking into again once browser support improves. I am going to close this, but let me know if you have any questions.
from ionic-framework.
Related Issues (20)
- bug: ion-checkbox don't let interact with label HOT 2
- bug: Cannot change ion-fab-button background using the provided css variables HOT 1
- bug: ion-icons have different sizes when combined with ion-toggle, ion-checkbox or ion-radio inside of an ion-item HOT 1
- bug: fill outline select with fit-content will hide select options
- bug: Order of running functions - closing modals HOT 2
- bug: Specifying provideIonicAngular() in a route provider prevents hydration from completing HOT 6
- bug: Using angular/cdk/overlay and ion-modal can cause conflicts. HOT 1
- Not able to access the documentation HOT 2
- feat: dynamic font scaling for the Picker component on the iOS platform. HOT 1
- feat: `form` property on form components HOT 1
- feat: HOT 1
- bug: buttons inside `ion-header` not accessible with screenreader (unless scrolled down) HOT 1
- bug: Keyboard interaction on device with inputs/buttons inside of swiper HOT 1
- bug: unintended re-focus to input after selecting clear input button with iOS VoiceOver HOT 5
- bug: ionic8 Conflict between font color and theme color in new dark mode HOT 2
- bug: Auto foucs in ios not work (ionic vue) HOT 1
- feat: Export files in `utils` in distribution HOT 1
- bug: swiper inside ion-content not recognizing dir="rtl" when rendered dynamically HOT 3
- bug: iOS Modal Drag Animation Glitches HOT 2
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 ionic-framework.