Skip to content

Instantly share code, notes, and snippets.

@shawnbot
Last active October 28, 2016 00:34
Show Gist options
  • Save shawnbot/3857622da562ea95aca02fcf1cc4ebd5 to your computer and use it in GitHub Desktop.
Save shawnbot/3857622da562ea95aca02fcf1cc4ebd5 to your computer and use it in GitHub Desktop.
design token ideas
// generate a custom element selector with the correct prefix
@mixin custom-element($name) {
#{$usa-prefix}-#{$name} {
@content;
}
}
// Atomic/utility classes, also generated
@import 'variables';
@each $name, $color in $usa-palette {
@each $abbr, $prop in (
fg: 'color',
bg: 'background-color',
bc: 'border-color',
fi: 'fill',
st: 'stroke'
) {
.usa-#{$abbr}-#{$name} { #{$prop}: $color; }
}
}
@each $size, $length in $usa-spacing {
// set all margins with .usa-ma-xs
.usa-ma-#{$size} { margin: $length; }
// and direction-specific with .usa-mr-xs, et al
@each $abbr, $dir in (t: 'top', r: 'right', b: 'bottom', l: 'left') {
.usa-m#{$abbr}-${size} { margin-#{dir}: $length; }
}
}
prefix: 'usa'
palette:
blue: '#390'
red: '#fc0'
spacing:
xs: 2
sm: 4
md: 8
lg: 16
xl: 32
xxl: 64
// this is the theoretical result of transforming tokens.yml into SCSS
$usa-prefix: 'usa' !default;
$usa-palette: (
blue: #390,
red: #fc0
) !default;
$usa-spacing: (
xs: 2px,
sm: 4px,
md: 8px,
lg: 16px,
xl: 32px,
xxl: 64px
) !default;
@shawnbot
Copy link
Author

Needs CSS variables!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment