Nathan Curtis nathanacurtis
nathanacurtis
/ Tokens.json
Created
October 26, 2022 13:50
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": { | |
| "white": { "value": "#FFFFFF" }, | |
| "black": { "value": "#000000" }, | |
| "orange": { | |
| "41": { "value": "#D24B00" }, | |
| "45": { "value": "#E85200" }, | |
| "74": { "value": "#EEAC8D" }, | |
| "98": { "value": "#FBE5D9" } | |
| }, |
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
| <div class="custom-card"> | |
| <div class="custom-card__thumbnail"> | |
| <img src="/images/components/cards/image.png"> | |
| </div> | |
| <h2 class="custom-card__title"> | |
| Card Title | |
| </h2> | |
| <div class="custom-card__caption"> | |
| Card Caption | |
| </div> |
nathanacurtis
/ ComponentBlockReset.scss
Last active
September 12, 2020 10:47
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 component-font-reset() { | |
| font-family: $system-font-family-sans-serif; | |
| font-size: $system-font-size-default; | |
| font-style: normal; | |
| font-weight: $system-font-weight-regular; | |
| letter-spacing: 0; | |
| text-align: left; | |
| text-decoration: none; | |
| text-indent: 0; | |
| text-shadow: none; |
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'); |
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
/ 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
/ 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
/ 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
/ 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
/ 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" |
NewerOlder