Skip to content

Instantly share code, notes, and snippets.

@ryanve
Created October 29, 2017 00:25
Show Gist options
  • Save ryanve/d272808ed238f51e85f1b2b77e10f0be to your computer and use it in GitHub Desktop.
Save ryanve/d272808ed238f51e85f1b2b77e10f0be to your computer and use it in GitHub Desktop.
Classing example
const facade = Object.freeze({
"Additive": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring tone-additive",
"Ask": "block-table unbold line-single size-fine",
"Destructive": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring tone-destructive",
"Input": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring",
"Input:valid": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-valid",
"Input:validity": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-validity",
"Input:invalid": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-invalid",
"Field": "border-none p0 m0",
"Primary": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring tone-primary",
"Secondary": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring tone-secondary",
"Tactile": "block-table",
"Textarea": "border-box block width-fit overflow-auto m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring",
"Textarea:valid": "border-box block width-fit overflow-auto m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-valid",
"Textarea:validity": "border-box block width-fit overflow-auto m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-validity",
"Textarea:invalid": "border-box block width-fit overflow-auto m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-invalid",
});
const classing = function(name) {
if (!facade.hasOwnProperty(name)) throw new Error("Unknown classing: " + name);
return facade[name];
}
module.exports = classing;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment