CSS Plugin: Convert alias to raw values?
Closed this issue · 4 comments
PavelLaptev commented
Is there a way to convert aliases into raw values? Didn't find this in docs.
convert this:
--clr-theme-container-light: var(--clr-core-ntrl-100);to this:
--clr-theme-container-light: #fffff;drwpow commented
There’s not an option to do that currently. Why do you need the actual value if it’s an alias (always refers to another value)?
PavelLaptev commented
Thanks for the answer @drwpow!
So, basically, it's okay, but I have some core and theme (light and dark mode) palettes and thought that I can get rid of the core palette if I bake values into theme palette.
Here is my example:
:root {
--clr-core-err-5: #240f11;
--clr-core-err-10: #2b1215;
--clr-core-err-20: #481e23;
--clr-core-err-30: #6f2f35;
--clr-core-err-40: #a83d47;
--clr-core-err-50: #e6616d;
--clr-core-err-60: #f1a7ae;
--clr-core-err-70: #f8ced3;
--clr-core-err-80: #fbe5e7;
--clr-core-err-90: #fdf1f4;
--clr-core-err-95: #fff8fb;
--clr-core-ntrl-0: #000000;
--clr-core-ntrl-5: #121212;
--clr-core-ntrl-10: #1a1a1a;
--clr-core-ntrl-20: #262626;
--clr-core-ntrl-30: #4d4d4d;
--clr-core-ntrl-40: #595959;
--clr-core-ntrl-50: #808080;
--clr-core-ntrl-60: #c4c4c4;
--clr-core-ntrl-70: #d9d9d9;
--clr-core-ntrl-80: #e7e7e7;
--clr-core-ntrl-90: #f4f4f4;
--clr-core-ntrl-95: #fafafa;
--clr-core-ntrl-100: #ffffff;
--clr-core-pop-5: #0b1918;
--clr-core-pop-10: #0b2221;
--clr-core-pop-20: #174543;
--clr-core-pop-30: #29605e;
--clr-core-pop-40: #288a85;
--clr-core-pop-50: #41b4ae;
--clr-core-pop-60: #95dfdc;
--clr-core-pop-70: #bee9e7;
--clr-core-pop-80: #d6f0ee;
--clr-core-pop-90: #edf8f7;
--clr-core-pop-95: #f4fbfa;
--clr-core-purple-5: #0b0911;
--clr-core-purple-10: #1f1339;
--clr-core-purple-20: #301d58;
--clr-core-purple-30: #43297a;
--clr-core-purple-40: #6748a8;
--clr-core-purple-50: #8660d7;
--clr-core-purple-60: #af92ed;
--clr-core-purple-70: #c9b4f3;
--clr-core-purple-80: #dccff7;
--clr-core-purple-90: #e9e0fa;
--clr-core-purple-95: #f2eefc;
--clr-core-succ-5: #0b1912;
--clr-core-succ-10: #11271d;
--clr-core-succ-20: #1d4934;
--clr-core-succ-30: #256f4d;
--clr-core-succ-40: #309165;
--clr-core-succ-50: #3bb078;
--clr-core-succ-60: #88d7b3;
--clr-core-succ-70: #bae8d3;
--clr-core-succ-80: #d9f2e6;
--clr-core-succ-90: #e8f7f0;
--clr-core-succ-95: #f6fcfb;
--clr-core-warn-5: #211608;
--clr-core-warn-10: #2b1f0d;
--clr-core-warn-20: #4e3513;
--clr-core-warn-30: #7e551b;
--clr-core-warn-40: #b5751c;
--clr-core-warn-50: #e0962e;
--clr-core-warn-60: #f5c480;
--clr-core-warn-70: #ffdfb3;
--clr-core-warn-80: #ffeed6;
--clr-core-warn-90: #fff3e2;
--clr-core-warn-95: #fdf7ed;
--clr-theme-container-light: var(--clr-core-ntrl-100);
--clr-theme-container-outline-light: var(--clr-core-ntrl-70);
--clr-theme-container-outline-pale: var(--clr-core-ntrl-60);
--clr-theme-container-outline-sub: var(--clr-core-ntrl-50);
--clr-theme-container-pale: var(--clr-core-ntrl-90);
--clr-theme-container-sub: var(--clr-core-ntrl-80);
--clr-theme-err-container: var(--clr-core-err-90);
--clr-theme-err-element: var(--clr-core-err-50);
--clr-theme-err-on-container: var(--clr-core-err-40);
--clr-theme-err-on-element: var(--clr-core-err-90);
--clr-theme-err-outline: var(--clr-core-err-50);
--clr-theme-pop-container: var(--clr-core-pop-90);
--clr-theme-pop-element: var(--clr-core-pop-50);
--clr-theme-pop-on-container: var(--clr-core-pop-10);
--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
--clr-theme-pop-outline: var(--clr-core-pop-40);
--clr-theme-purple-container: var(--clr-core-purple-90);
--clr-theme-purple-element: var(--clr-core-purple-50);
--clr-theme-purple-on-container: var(--clr-core-purple-40);
--clr-theme-purple-on-element: var(--clr-core-purple-90);
--clr-theme-purple-outline: var(--clr-core-purple-40);
--clr-theme-scale-err-5: var(--clr-core-err-5);
--clr-theme-scale-err-10: var(--clr-core-err-10);
--clr-theme-scale-err-20: var(--clr-core-err-20);
--clr-theme-scale-err-30: var(--clr-core-err-30);
--clr-theme-scale-err-40: var(--clr-core-err-40);
--clr-theme-scale-err-50: var(--clr-core-err-50);
--clr-theme-scale-err-60: var(--clr-core-err-60);
--clr-theme-scale-err-70: var(--clr-core-err-70);
--clr-theme-scale-err-80: var(--clr-core-err-80);
--clr-theme-scale-err-90: var(--clr-core-err-90);
--clr-theme-scale-err-95: var(--clr-core-err-95);
--clr-theme-scale-ntrl-0: var(--clr-core-ntrl-0);
--clr-theme-scale-ntrl-5: var(--clr-core-ntrl-5);
--clr-theme-scale-ntrl-10: var(--clr-core-ntrl-10);
--clr-theme-scale-ntrl-20: var(--clr-core-ntrl-20);
--clr-theme-scale-ntrl-30: var(--clr-core-ntrl-30);
--clr-theme-scale-ntrl-40: var(--clr-core-ntrl-40);
--clr-theme-scale-ntrl-50: var(--clr-core-ntrl-50);
--clr-theme-scale-ntrl-60: var(--clr-core-ntrl-60);
--clr-theme-scale-ntrl-70: var(--clr-core-ntrl-70);
--clr-theme-scale-ntrl-80: var(--clr-core-ntrl-80);
--clr-theme-scale-ntrl-90: var(--clr-core-ntrl-90);
--clr-theme-scale-ntrl-95: var(--clr-core-ntrl-95);
--clr-theme-scale-ntrl-100: var(--clr-core-ntrl-100);
--clr-theme-scale-pop-5: var(--clr-core-pop-5);
--clr-theme-scale-pop-10: var(--clr-core-ntrl-10);
--clr-theme-scale-pop-20: var(--clr-core-pop-20);
--clr-theme-scale-pop-30: var(--clr-core-pop-30);
--clr-theme-scale-pop-40: var(--clr-core-pop-40);
--clr-theme-scale-pop-50: var(--clr-core-pop-50);
--clr-theme-scale-pop-60: var(--clr-core-pop-60);
--clr-theme-scale-pop-70: var(--clr-core-pop-70);
--clr-theme-scale-pop-80: var(--clr-core-pop-80);
--clr-theme-scale-pop-90: var(--clr-core-pop-90);
--clr-theme-scale-pop-95: var(--clr-core-pop-95);
--clr-theme-scale-purple-5: var(--clr-core-purple-5);
--clr-theme-scale-purple-10: var(--clr-core-purple-10);
--clr-theme-scale-purple-20: var(--clr-core-purple-20);
--clr-theme-scale-purple-30: var(--clr-core-purple-30);
--clr-theme-scale-purple-40: var(--clr-core-purple-40);
--clr-theme-scale-purple-50: var(--clr-core-purple-50);
--clr-theme-scale-purple-60: var(--clr-core-purple-60);
--clr-theme-scale-purple-70: var(--clr-core-purple-70);
--clr-theme-scale-purple-80: var(--clr-core-purple-80);
--clr-theme-scale-purple-90: var(--clr-core-purple-90);
--clr-theme-scale-purple-95: var(--clr-core-purple-95);
--clr-theme-scale-succ-5: var(--clr-core-succ-5);
--clr-theme-scale-succ-10: var(--clr-core-succ-10);
--clr-theme-scale-succ-20: var(--clr-core-succ-20);
--clr-theme-scale-succ-30: var(--clr-core-succ-30);
--clr-theme-scale-succ-40: var(--clr-core-succ-40);
--clr-theme-scale-succ-50: var(--clr-core-succ-50);
--clr-theme-scale-succ-60: var(--clr-core-succ-60);
--clr-theme-scale-succ-70: var(--clr-core-succ-70);
--clr-theme-scale-succ-80: var(--clr-core-succ-80);
--clr-theme-scale-succ-90: var(--clr-core-succ-90);
--clr-theme-scale-succ-95: var(--clr-core-succ-95);
--clr-theme-scale-warn-5: var(--clr-core-warn-5);
--clr-theme-scale-warn-10: var(--clr-core-warn-10);
--clr-theme-scale-warn-20: var(--clr-core-warn-20);
--clr-theme-scale-warn-30: var(--clr-core-warn-30);
--clr-theme-scale-warn-40: var(--clr-core-warn-40);
--clr-theme-scale-warn-50: var(--clr-core-warn-50);
--clr-theme-scale-warn-60: var(--clr-core-warn-60);
--clr-theme-scale-warn-70: var(--clr-core-warn-70);
--clr-theme-scale-warn-80: var(--clr-core-warn-80);
--clr-theme-scale-warn-90: var(--clr-core-warn-90);
--clr-theme-scale-warn-95: var(--clr-core-warn-95);
--clr-theme-succ-container: var(--clr-core-succ-90);
--clr-theme-succ-element: var(--clr-core-succ-50);
--clr-theme-succ-on-container: var(--clr-core-succ-40);
--clr-theme-succ-on-element: var(--clr-core-succ-90);
--clr-theme-succ-outline: var(--clr-core-succ-40);
--clr-theme-warn-container: var(--clr-core-warn-90);
--clr-theme-warn-element: var(--clr-core-warn-50);
--clr-theme-warn-on-container: var(--clr-core-warn-40);
--clr-theme-warn-on-element: var(--clr-core-warn-90);
--clr-theme-warn-outline: var(--clr-core-warn-50);
}drwpow commented
Ah gotcha! Yeah if you’re using themes, we recommend modes as the primary way to use those. Think of them as superpowered aliases!
Happy to make adjustments or suggest workarounds though if you aren’t able to do what you’d like
PavelLaptev commented
I think that the right way is to use aliases. But I was wondering if there is an option or not. Since I'm the only person how asked this question, no need to do anything. Thank you for your help :-)