I'm using material-ui components in my react-redux app. I had created the UI prototype using adobe-xd, which provides an option to export the character styles (design tokens) in the form of a css file:
:root {
/* Colors: */
--text-color: #F8E29F;
--unnamed-color-6c63ff: #6C63FF;
--message-bar-avatar-panel: #3F4851;
--name-text: #A6BCD0;
--eth-subtext-stars: #748A9D;
--navbar-footer-stars-bg: #232323;
--unnamed-color-7b8188: #7B8188;
--bg-drawer: #101010;
/* Font/text values */
--unnamed-font-family-fira-sans: Fira Sans;
--unnamed-font-family-abril-fatface: Abril Fatface;
--unnamed-font-style-light: Light;
--unnamed-font-style-regular: Regular;
--unnamed-font-size-7: 7px;
--unnamed-font-size-8: 8px;
--unnamed-font-size-14: 14px;
--unnamed-font-size-16: 16px;
--unnamed-font-size-24: 24px;
--unnamed-font-size-28: 28px;
--unnamed-font-size-32: 32px;
--unnamed-character-spacing-0: 0px;
--unnamed-character-spacing-0-96: 0.96px;
--unnamed-character-spacing-1-15: 1.15px;
--unnamed-character-spacing-1-31: 1.31px;
--unnamed-line-spacing-10: 10px;
--unnamed-line-spacing-12: 12px;
--unnamed-line-spacing-20: 20px;
--unnamed-line-spacing-24: 24px;
--unnamed-line-spacing-32: 32px;
}
/* Character Styles */
.text-ultra-small-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-7);
line-height: var(--unnamed-line-spacing-20);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.text-very-small-dim-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-8);
line-height: var(--unnamed-line-spacing-10);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--eth-subtext-stars);
}
.text-very-small-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-8);
line-height: var(--unnamed-line-spacing-12);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.text-small-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-14);
line-height: var(--unnamed-line-spacing-20);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--text-color);
}
.text-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--text-color);
}
.drawer-menu-items-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-7b8188);
}
.text-secondary-dim-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--eth-subtext-stars);
}
.text-secondary-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-light);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.text-secondary-bold-mobile- {
font-family: var(--unnamed-font-family-fira-sans);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-24);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--name-text);
}
.heading-mobile- {
font-family: var(--unnamed-font-family-abril-fatface);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-24);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-0-96);
color: var(--text-color);
}
.title-mobile- {
font-family: var(--unnamed-font-family-abril-fatface);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-28);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-1-15);
color: var(--text-color);
}
.title-web- {
font-family: var(--unnamed-font-family-abril-fatface);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-32);
line-height: var(--unnamed-line-spacing-32);
letter-spacing: var(--unnamed-character-spacing-1-31);
color: var(--text-color);
}
is there some way that I can programmatically import this custom CSS values for character-styles (and color styles) to reflect in all my material-ui components?, like design tokens injection of sorts? everytime i make changes to the adobe-xd prototypes and save a new css, it should import the values from that css and reflect in the material-ui components. You can also suggest if there is a better way to implement design tokens from prototype (adobe-xd) to codebase (react UI frameworks)
use Css Import on your File and Put Css From Adobe Xd Share tab to Advanced Export plugin to Variable.Css
Related
I have an object called typography with some styles and it turned out that in each case the property line-height is equal to 135%. As it happens in life, it will probably change so I would like to avoid the change in many places and create some object field or something like that to inherit it. This is piece of my current object.
const typography = {
globalStyles: `
font-family: Lato;
font-style: normal;
color: #000000;`,
header: {
XXL: `
font-weight: normal;
font-size: 37px;
line-height: 135%;`,
XL: `
font-weight: normal;
font-size: 33px;
line-height: 135%;`,
L: `
font-weight: normal;
font-size: 29px;
line-height: 135%;`,
M: `
font-weight: normal;
font-size: 25px;
line-height: 135%;`,
S: `
font-weight: normal;
font-size: 21px;
line-height: 135%;`,
bold: {
...
},
},
body: {
...
}
}
I have tried to solve this by creating property lineHeight:line-height: 135%; and trigger it using spread operator ...this.lineHeight but it didn't work. Code below:
const typography = {
lineHeight: `line-height: 135%;`,
globalStyles: `
font-family: Lato;
font-style: normal;
color: #000000;`,
header: {
XXL: `
font-weight: normal;
font-size: 37px;
...this.lineHeight`,
XL: `
font-weight: normal;
font-size: 33px;
...this.lineHeight`,
L: `
font-weight: normal;
font-size: 29px;
...this.lineHeight `,
M: `
font-weight: normal;
font-size: 25px;
...this.lineHeight`,
S: `
font-weight: normal;
font-size: 21px;
...this.lineHeight`,
bold: {
...
},
},
body: {
...
}
}
Please about any help!
Your styles are actually only strings and you are already using template strings. So you can just leverage that and extract the value for line-height into it's own variable outside like this:
const lineHeight = '135%'; // Your extracted lineHeight
const typography = {
globalStyles: `
font-family: Lato;
font-style: normal;
color: #000000;`,
header: {
XXL: `
font-weight: normal;
font-size: 37px;
line-height: ${lineHeight};`, // Use the lineHeight inside your string template
XL: `
font-weight: normal;
font-size: 33px;
line-height: ${lineHeight};`,
L: `
font-weight: normal;
font-size: 29px;
line-height: ${lineHeight};`,
M: `
font-weight: normal;
font-size: 25px;
line-height: ${lineHeight};`,
S: `
font-weight: normal;
font-size: 21px;
line-height: ${lineHeight};`,
bold: {
...
},
},
body: {
...
}
}
I think you can just use the property em for this.
em Takes the font-size of the parent element and you can double it with 2em as example.
So your code would look like this:
font-weight: normal;
font-size: 37px;
line-height: 1.35em;
In this case it would multiply 37 * 1.35.
I hope this is the thing you asked for.
I'm new with Less.js, I need to reuse the p.InputTitle like my examples, but it is not working for me :( it is giving me an error. I read more about mixins and some people tell me that I can use 'Extend'. What is that?
Here My code :
.LoginForm {
p.InputTitle {
color: #656565;
font-size: 14px;
font-family: #OpenSans;
font-weight: 600;
}
}
.Membership{
p.InputTitle {
.LoginForm p.InputTitle;
}
}
Use Less extend pseudo class:
.Membership{
p.InputTitle {
&:extend(.LoginForm p.InputTitle);
}
}
This will then produce:
.LoginForm p.InputTitle,
.Membership p.InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
Your syntax is calling in the form of a mixin call and a mixin name cannot be p.InputTitle.
If you were to change your original LoginForm CSS to the following then this would act as a valid mixin:
.LoginForm {
.InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
}
You could then write:
.Membership{
p.InputTitle {
.LoginForm .InputTitle;
}
}
However this would then produce double the amount of CSS styles:
.LoginForm .InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
.Membership p.InputTitle {
color: #656565;
font-size: 14px;
font-weight: 600;
}
I have link CSS define as:
A
{
color: #315393; font-family: verdana; font-weight: 500; text-decoration:underline; font-size: 10px;
}
A:Hover
{
color: #999999; font-family: verdana; font-weight: 500; text-decoration:none; font-size: 10px;
}
However, there are a couple cases where I want a link to act like a button and for that I use bootstrap and give them the class of "btn btn-primary", but since they are still links it seems they are still using the above CSS. How can I exclude the link behavior CSS from these and is there a way to do it in-line to the link?
You can use :not pseudo-class to exclude certain elements from the matched selector:
a:not(.btn.btn-primary) {
color: #315393;
font-family: verdana;
font-weight: 500;
text-decoration:underline;
font-size: 10px;
}
a:not(.btn.btn-primary):hover {
color: #315393;
font-family: verdana;
font-weight: 500;
text-decoration:underline;
font-size: 10px;
}
I'd like to use Sigil to change font family to embedded ones. I believe I've made everything right in CSS. I imported the "1984" font in Sigil.
I have read this tutorial: http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html and the sample works fine with ADE 3.0 but if I open it, don't edit the file and save, it wouldn't show the embedded files.
#font-face {
font-family: 1984, serif;
font-style: normal;
font-weight: normal;
src:url("../Fonts/1984.ttf");
}
.s8{
color: #000000;
font-family: "1984.ttf";
font-size: 125.5000%;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
What could I do?
Thanks!
font-family: "1984.ttf"; looks like it should just be font-family: 1984;
Also note that zero values in CSS (i.e. 0.0000%;) can simply be replaced with 0
I am trying to make the font in h1 less bold. It seems like the letters are just to fat.
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 { margin: 0px; text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
From the information I gathered on-line, most said to use font-weight: lighter;
but that doesn't validate when I use the css validator. Any ideas?
Add this:
h1 { font-weight: normal; }
By default, browsers use bold weight for h1. Since your #font-face declares only normal weight typeface, (some) browsers will algorithmically bold the glyphs (i.e., make the strokes wider using some simple method).
I checked your css validate, where did you checked? Probably you checked for css2 validation. Check here this one is original/best http://jigsaw.w3.org/css-validator/validator
I actually just added the font weight line (I had it under the #font face instead )
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; font-weight: lighter; }