Nathan Curtis nathanacurtis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .pill { | |
| background-color: $background-color-light; | |
| border: $border-hairline; | |
| border-radius: $border-radius; | |
| display: inline-block; | |
| font-size: $font-size-metadata; | |
| margin: $space-inline-left-xs; | |
| padding: $space-inset-xs; | |
| } |
nathanacurtis
/ Options.styl
Last active
June 24, 2016 20:32
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $color-neutral-20 = #222222; | |
| $color-neutral-90 = #EEEEEE; | |
| $font-size-m = 1rem; | |
| $font-size-s = 0.875rem; | |
| $space-m = 16px; | |
| $space-l = 32px; |
nathanacurtis
/ Decisions.styl
Last active
June 24, 2016 20:32
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $background-color-dark = $color-neutral-20; | |
| $background-color-light = $color-neutral-90; | |
| $font-size-paragraph = $font-size-m; | |
| $font-size-microcopy = $font-size-s; | |
| $space-inset-default = 16px 16px 16px 16px; | |
| $space-stack-l = 0 0 32px 0; |
nathanacurtis
/ Tokens.yaml
Last active
June 24, 2016 20:31
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Example partially complete token hierarchy (there are 100s of lines) | |
| color : | |
| white : &color-white "#FFFFFF" | |
| black : &color-black "#262626" | |
| neutral : | |
| 20 : &color-neutral-20 "#222222" | |
| 90 : &color-neutral-90 "#EEEEEE" | |
| blue: | |
| 50: &color-blue-50 "#2196F3" |
nathanacurtis
/ ChoicesThenDecisions.yaml
Last active
November 7, 2019 09:01
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Choices | |
| color : | |
| white : &color-white "#FFFFFF" | |
| black : &color-black "#262626" | |
| neutral : | |
| 20 : &color-neutral-20 "#222222" | |
| 90 : &color-neutral-90 "#EEEEEE" | |
| blue: | |
| 50: &color-blue-50 "#2196F3" |
nathanacurtis
/ High-LevelTokenHierarchy
Last active
August 29, 2022 10:58
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| color : | |
| interactive-color : | |
| background-color : | |
| text-color : | |
| font : | |
| family : | |
| size : | |
| line-height : | |
| border : | |
| size : |
nathanacurtis
/ SpaceScale.yaml
Last active
November 7, 2019 09:01
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| space : | |
| default : 16px | |
| xxs: 2px | |
| xs: 4px | |
| s: 8px | |
| m: 16px | |
| l: 32px | |
| xl: 64px | |
| inset : | |
| default : 16px 16px 16px 16px |
nathanacurtis
/ Space
Created
September 23, 2016 21:25
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $space-inset-default = 16px 16px 16px 16px; | |
| $space-inset-xs = 4px 4px 4px 4px; | |
| $space-inset-s = 8px 8px 8px 8px; | |
| $space-inset-m = 16px 16px 16px 16px; | |
| $space-inset-l = 32px 32px 32px 32px; | |
| $space-inset-xl = 64px 64px 64px 64px; | |
| $space-stack-default = 0 0 16px 0; | |
| $space-stack-xs = 0 0 4px 0; | |
| $space-stack-s = 0 0 8px 0; | |
| $space-stack-m = 0 0 16px 0; |
nathanacurtis
/ Dark & Light Variables
Created
February 20, 2017 16:19
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $system-background-color-light = #CFD8DC; | |
| $system-text-color-primary-on-light = #222222; | |
| $system-border-hairline-thin-on-dark = #455A64; |
nathanacurtis
/ text-color.scss
Last active
May 4, 2019 12:26
Text Color Across Background Colors Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin text-color($type: 'primary') { | |
| // Load background colors | |
| $background-colors: tokens('background-color'); | |
| // Apply default text color | |
| color: tokens('text-color', $type, 'on-white'); |
OlderNewer