I am working on changing around our design system works. I am attempting to assign a CSS alias back to a CSS variable of the same name. Is this possible?
For theming we are currently having a set of global css tokens and then use multiple sets of css aliases assigned to differing global tokens depending on the theme. Like so..
global-tokens.scss
--global-color-white: #ffffff;
--global-color-black: #000000;
light-theme.scss
--background-color: var(--global-color-white);
--foreground-color: var(--global-color-black);
dark-theme.scss
--background-color: var(--global-color-black);
--foreground-color: var(--global-color-white);
However we are looking to modify the way we are generating our tokens and aliases. The new method would not use a set of global tokens and instead assign the "aliases" directly to the their values. My question is it possible to do something like the following. We would be providing our consumers with our aliases and then we are swapping the css source depending on the theme. The issue I'm running into is trying to assign an alias back to a variable with the same name.
light-theme.scss
--background-color: #ffffff;
--foreground-color: #000000;
dark-theme.scss
--background-color: #000000;
--foreground-color: #ffffff;
aliases.scss
--background-color: var(--background-color);
--foreground-color: var(--foreground-color);
The snippet below demonstrates the basic approach you had in mind with toggling the variable values. Seems to work just fine. I'm toggling the contents of a <style> tag, but you could try toggling a src attribute on a linked stylesheet instead.
As for the stylesheets, I think you're overthinking things. It makes sense that something like this wouldn't work:
--background-color: var(--background-color);
What would the color even be in that case? The value of --background-color is… --background-color? We need an actual color somewhere.
Assuming the various stylesheets consuming these variables are all using the aliases and not the tokens, all you really need to do just update the value of the aliases exactly how you were planning to and then get rid of aliases.scss completely. You don't need it any more. Just make sure you don't link to both themes in the document at the same time, and you'll be good to go.
const lightStyles = `
:root {
--foreground-color: #000;
--background-color: #fff;
}
`.trim();
const darkStyles = `
:root {
--foreground-color: #fff;
--background-color: #000;
}
`.trim();
let isLightTheme = true;
(() => {
const styleTag = document.getElementById('style-tag');
styleTag.textContent = lightStyles;
const btn = document.getElementById('btn');
const handleClick = () => {
isLightTheme = !isLightTheme;
styleTag.textContent = isLightTheme ? lightStyles : darkStyles;
};
btn.addEventListener('click', handleClick);
})();
body {
background-color: var(--background-color);
color: var(--foreground-color);
}
button {
border: 2px solid var(--foreground-color);
background: var(--background-color);
color: var(--foreground-color);
}
<button id="btn" type="button">toggle theme</button>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<style id="style-tag"></style>
Related
I have built some components such as buttons and I want to use and reuse just about everywhere in my site.
I have already create plugins
Object.entries(components).forEach((([name, component]) => {
Vue.component(name, component)
}))
and registered in nuxt.config
plugins [
'#/plugins/components'
]
<style lang="scss">
.btn__container {
border-radius: '5px';
border: '1px solid red';
background-color: 'red';
}
</style>
but then when i call the component it doesnt apply the style
<v-button>button</v-button>
i am trying to inspect my custom button element and it got strikethrough i dunno why
border-radius: '5px'; is not valid CSS
Try with border-radius: 5px;!
This is my SCSS style for .br
.br {
&--red {
border: 2px solid red;
}
&--green {
border: 2px solid rgb(32, 170, 8);
}
}
This is my nextjs react code:
import layout from "../styles/layout.module.scss";
export default function Index() {
return (
<div className={layout.br}>
<h1>Khan</h1>
</div>
);
}
How to access this ".br--red" in jsx?
.br{
&--red{
border:2px solid red;
}
}
If you use dash in an object's properties name(in this case, it's class name), for use of it you must use Bracket notation, and your property name should be in ' '(quotation or double-quotation).
<div className={layout['br--red']}>
<h1>Khan</h1>
</div>
You can read more about it in this article.
Adding on the comment above, you can also use dynamic variable in the brackets like so using backticks.
className={styles[`br--${color}`]}
I am new to css and i would like to know if css can be applied to the properties of tag?
For example in the below code i would like to see entry.count and "files" in blue color.
code
render() {
return(
<div className="AppL" id="AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger={entry.AppName + "\t" + "\t" + entry.Count + " files"} className="AppList" transitionTime ="10">
</Collapsible>);
};
return guiResult;
}
my scss for this component
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.
This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.
.Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.
This is mainly to define browser specific values like this one for a given CSS property:
<div style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">Grab me!</div>
If I wrap it into object like this:
<div style={{
cursor: "-moz-grab",
cursor: "-webkit-grab",
cursor: "grab"
}}>Grab me!</div>
then you duplicate keys in an object (would fail in strict mode and would overwrite otherwise). And simply putting all values into single string doesn't seem to work either.
Figuring out browser with JS and then applying right value seems to be too much work.. Or is there a different approach to do this? Any ideas?
If you want to use inline styles and also get vendor prefixing, you can use a library like Radium to abstract the vendor prefixing for you.
By adding a #Radium decorator to your component, Radium will hook into the styles you pass to the component and automatically manage and prefix them.
var Radium = require('radium');
var React = require('react');
#Radium
class Grabby extends React.Component {
render() {
return (
<div style={style}>
{this.props.children}
</div>
);
}
}
var style = {
cursor: "grab" // this will get autoprefixed for you!
};
The best you could do is to create a css class with the cursor attribute, and add it to your component
.container {
height: 10px;
width: 10px;
}
.grab {
cursor: -moz-grab,
cursor: -webkit-grab,
cursor: grab,
}
Then in your react component:
var isGrabEnabled = true;
<div className={['container', (isGrabEnabled ? 'grab' : '')]}>Grab me!</div>
Here is the code, very simple and copy paste from office website
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
destructiveText: 'Delete Photo',
titleText: 'Modify your album',
cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
I want to change the cancel button have a red color background, how I can achieve it in ionic frameworks?
Easiest way is to look at the markup using your browser (after running ionic serve in your terminal), for example in Chrome ctrl+shift+i, where you can choose the button and see what classes are attached. In your case you'll see something like this:
<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
<button class="button ng-binding"
ng-click="cancel()"
ng-bind-html="cancelText">Cancel</button>
</div>
Which has styles that for the parent div, and child button something like this:
.action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
}
Just change these values either in Sass or directly in your styles sheet if you're not using Sass.