Skip to content
Permalink
Browse files

feat(design-tokens): create paste and console themes

BREAKING CHANGE:
Move the default theme values to be the console theme
Make the default theme the Paste theme based on new unified design language
  • Loading branch information
SiTaggart committed Dec 19, 2019
1 parent 900e56b commit d550e4e3ad29ef8d428031ff3e915e8a511df1c8
Showing with 948 additions and 82 deletions.
  1. +94 −70 packages/paste-design-tokens/tokens/aliases/color-palette.yml
  2. +1 −1 packages/paste-design-tokens/tokens/aliases/font-family.yml
  3. +6 −6 packages/paste-design-tokens/tokens/global/background-color.yml
  4. +4 −4 packages/paste-design-tokens/tokens/global/border-color.yml
  5. +1 −1 packages/paste-design-tokens/tokens/global/font-weight.yml
  6. +8 −0 packages/paste-design-tokens/tokens/themes/console/aliases/border-radius.yml
  7. +6 −0 packages/paste-design-tokens/tokens/themes/console/aliases/border-width.yml
  8. +9 −0 packages/paste-design-tokens/tokens/themes/console/aliases/box-shadow.yml
  9. +87 −0 packages/paste-design-tokens/tokens/themes/console/aliases/color-palette.yml
  10. +7 −0 packages/paste-design-tokens/tokens/themes/console/aliases/color.yml
  11. +5 −0 packages/paste-design-tokens/tokens/themes/console/aliases/font-family.yml
  12. +14 −0 packages/paste-design-tokens/tokens/themes/console/aliases/font-size.yml
  13. +8 −0 packages/paste-design-tokens/tokens/themes/console/aliases/font-weight.yml
  14. +13 −0 packages/paste-design-tokens/tokens/themes/console/aliases/offset.yml
  15. +28 −0 packages/paste-design-tokens/tokens/themes/console/aliases/sizing.yml
  16. +24 −0 packages/paste-design-tokens/tokens/themes/console/aliases/spacing.yml
  17. +13 −0 packages/paste-design-tokens/tokens/themes/console/aliases/z-index.yml
  18. +93 −0 packages/paste-design-tokens/tokens/themes/console/global/background-color.yml
  19. +82 −0 packages/paste-design-tokens/tokens/themes/console/global/border-color.yml
  20. +22 −0 packages/paste-design-tokens/tokens/themes/console/global/border-radius.yml
  21. +16 −0 packages/paste-design-tokens/tokens/themes/console/global/border-width.yml
  22. +13 −0 packages/paste-design-tokens/tokens/themes/console/global/box-shadow.yml
  23. +11 −0 packages/paste-design-tokens/tokens/themes/console/global/font-family.yml
  24. +40 −0 packages/paste-design-tokens/tokens/themes/console/global/font-size.yml
  25. +22 −0 packages/paste-design-tokens/tokens/themes/console/global/font-weight.yml
  26. +15 −0 packages/paste-design-tokens/tokens/themes/console/global/index.yml
  27. +39 −0 packages/paste-design-tokens/tokens/themes/console/global/line-height.yml
  28. +47 −0 packages/paste-design-tokens/tokens/themes/console/global/palette-color.yml
  29. +60 −0 packages/paste-design-tokens/tokens/themes/console/global/sizing.yml
  30. +49 −0 packages/paste-design-tokens/tokens/themes/console/global/spacing.yml
  31. +77 −0 packages/paste-design-tokens/tokens/themes/console/global/text-color.yml
  32. +27 −0 packages/paste-design-tokens/tokens/themes/console/global/z-index.yml
  33. +5 −0 packages/paste-design-tokens/tokens/themes/console/sketch.yml
  34. +2 −0 packages/paste-design-tokens/tokens/themes/console/tokens.yml
@@ -1,85 +1,109 @@
aliases:
## Blues
palette-blue-10: "#f5f8ff"
palette-blue-20: "#eff6fb"
palette-blue-30: "#dceaf4"
palette-blue-40: "#b3d3e9"
palette-blue-50: "#56a4d9"
palette-blue-60: "#027ac5"
palette-blue-70: "#005ea6"
palette-blue-80: "#003e82"
palette-blue-90: "#032c5e"
palette-blue-100: "#00092b"
palette-blue-10: "#ebf4ff"
palette-blue-20: "#cce4ff"
palette-blue-30: "#99cdff"
palette-blue-40: "#66b3ff"
palette-blue-50: "#008cff"
palette-blue-60: "#0263e0"
palette-blue-70: "#043cb5"
palette-blue-80: "#001489"
palette-blue-90: "#030b5d"
palette-blue-100: "#06033a"

## Blues transparent based on primary blue
palette-blue-60-transparent-10: "rgba(2, 122, 197, 0.1)"
palette-blue-60-transparent-20: "rgba(2, 122, 197, 0.2)"
palette-blue-60-transparent-30: "rgba(2, 122, 197, 0.3)"
palette-blue-60-transparent-40: "rgba(2, 122, 197, 0.4)"
palette-blue-60-transparent-50: "rgba(2, 122, 197, 0.5)"
palette-blue-60-transparent-60: "rgba(2, 122, 197, 0.6)"
palette-blue-60-transparent-70: "rgba(2, 122, 197, 0.7)"
palette-blue-60-transparent-80: "rgba(2, 122, 197, 0.8)"
palette-blue-60-transparent-90: "rgba(2, 122, 197, 0.9)"
palette-blue-60-transparent-100: "rgba(2, 122, 197, 1)"
palette-blue-60-transparent-10: "rgba(2, 99, 224, 0.1)"
palette-blue-60-transparent-20: "rgba(2, 99, 224, 0.2)"
palette-blue-60-transparent-30: "rgba(2, 99, 224, 0.3)"
palette-blue-60-transparent-40: "rgba(2, 99, 224, 0.4)"
palette-blue-60-transparent-50: "rgba(2, 99, 224, 0.5)"
palette-blue-60-transparent-60: "rgba(2, 99, 224, 0.6)"
palette-blue-60-transparent-70: "rgba(2, 99, 224, 0.7)"
palette-blue-60-transparent-80: "rgba(2, 99, 224, 0.8)"
palette-blue-60-transparent-90: "rgba(2, 99, 224, 0.9)"
palette-blue-60-transparent-100: "rgba(2, 99, 224, 1)"

## Grays
palette-gray-0: "#ffffff"
palette-gray-10: "#f9fafb"
palette-gray-20: "#f8f8f9"
palette-gray-30: "#f2f3f4"
palette-gray-40: "#e4e7e9"
palette-gray-50: "#c8cccf"
palette-gray-60: "#888c8e"
palette-gray-70: "#666a6d"
palette-gray-80: "#4f5355"
palette-gray-90: "#424547"
palette-gray-100: "#282a2b"
palette-gray-10: "#f4f4f6"
palette-gray-20: "#e1e3ea"
palette-gray-30: "#cacdd8"
palette-gray-40: "#aeb2c1"
palette-gray-50: "#8891aa"
palette-gray-60: "#606b85"
palette-gray-70: "#4b5671"
palette-gray-80: "#394762"
palette-gray-90: "#1f304c"
palette-gray-100: "#121c2d"

## Grays transparent based on darkest gray
palette-gray-100-transparent-10: "rgba(40, 42, 43, 0.1)"
palette-gray-100-transparent-20: "rgba(40, 42, 43, 0.2)"
palette-gray-100-transparent-30: "rgba(40, 42, 43, 0.3)"
palette-gray-100-transparent-40: "rgba(40, 42, 43, 0.4)"
palette-gray-100-transparent-50: "rgba(40, 42, 43, 0.5)"
palette-gray-100-transparent-60: "rgba(40, 42, 43, 0.6)"
palette-gray-100-transparent-70: "rgba(40, 42, 43, 0.7)"
palette-gray-100-transparent-80: "rgba(40, 42, 43, 0.8)"
palette-gray-100-transparent-90: "rgba(40, 42, 43, 0.9)"
palette-gray-100-transparent-100: "rgba(40, 42, 43, 1)"
palette-gray-100-transparent-10: "rgba(18, 28, 45, 0.1)"
palette-gray-100-transparent-20: "rgba(18, 28, 45, 0.2)"
palette-gray-100-transparent-30: "rgba(18, 28, 45, 0.3)"
palette-gray-100-transparent-40: "rgba(18, 28, 45, 0.4)"
palette-gray-100-transparent-50: "rgba(18, 28, 45, 0.5)"
palette-gray-100-transparent-60: "rgba(18, 28, 45, 0.6)"
palette-gray-100-transparent-70: "rgba(18, 28, 45, 0.7)"
palette-gray-100-transparent-80: "rgba(18, 28, 45, 0.8)"
palette-gray-100-transparent-90: "rgba(18, 28, 45, 0.9)"
palette-gray-100-transparent-100: "rgba(18, 28, 45, 1)"

## Greens
palette-green-10: "#e0ffef"
palette-green-20: "#c7ffe2"
palette-green-30: "#8eeebc"
palette-green-40: "#5fe7a1"
palette-green-50: "#23bf6e"
palette-green-60: "#00994a"
palette-green-70: "#00803d"
palette-green-80: "#006631"
palette-green-90: "#004d25"
palette-green-100: "#00361a"
palette-green-10: "#edfdf3"
palette-green-20: "#d1fae0"
palette-green-30: "#a2f6c3"
palette-green-40: "#7beaa5"
palette-green-50: "#36d576"
palette-green-60: "#14b053"
palette-green-70: "#0e7c3a"
palette-green-80: "#0b602d"
palette-green-90: "#0d3a1f"
palette-green-100: "#052912"

## Oranges
palette-orange-10: "#ffecd8"
palette-orange-20: "#fdd5bf"
palette-orange-30: "#fbb68f"
palette-orange-40: "#fa9c66"
palette-orange-50: "#f28510"
palette-orange-60: "#e46216"
palette-orange-70: "#a83e00"
palette-orange-80: "#762e04"
palette-orange-90: "#451b02"
palette-orange-100: "#2c1102"
palette-orange-10: "#fef5ee"
palette-orange-20: "#fddcc4"
palette-orange-30: "#fac2a0"
palette-orange-40: "#ffb37a"
palette-orange-50: "#fa9950"
palette-orange-60: "#f47c22"
palette-orange-70: "#c35323"
palette-orange-80: "#8d3118"
palette-orange-90: "#541914"
palette-orange-100: "#40130f"

## Reds
palette-red-10: "#ffe9e7"
palette-red-20: "#fcf0f0"
palette-red-30: "#f5dddd"
palette-red-40: "#ecb6b6"
palette-red-50: "#de5858"
palette-red-60: "#e22525"
palette-red-70: "#b20600"
palette-red-80: "#921200"
palette-red-90: "#600101"
palette-red-100: "#471d00"
palette-red-10: "#feecec"
palette-red-20: "#fccfcf"
palette-red-30: "#f6b1b1"
palette-red-40: "#f58a8a"
palette-red-50: "#eb5656"
palette-red-60: "#d61f1f"
palette-red-70: "#ad1111"
palette-red-80: "#750c0c"
palette-red-90: "#4a0b0b"
palette-red-100: "#310c0c"

## Yellows
palette-yellow-10: "#fffbea"
palette-yellow-20: "#fff1b3"
palette-yellow-30: "#ffe980"
palette-yellow-40: "#ffdd35"
palette-yellow-50: "#fad100"
palette-yellow-60: "#e8b407"
palette-yellow-70: "#c28e00"
palette-yellow-80: "#855c15"
palette-yellow-90: "#543308"
palette-yellow-100: "#3d2106"

## Purple
palette-purple-10: "#f5f0fc"
palette-purple-20: "#e7dcfa"
palette-purple-30: "#c8aff0"
palette-purple-40: "#a67fe3"
palette-purple-50: "#8c5bd8"
palette-purple-60: "#6d2ed1"
palette-purple-70: "#5817bd"
palette-purple-80: "#380e78"
palette-purple-90: "#22094a"
palette-purple-100: "#160433"
@@ -1,3 +1,3 @@
aliases:
font-family-10: "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif"
font-family-10: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
font-family-20: "'Fira Mono', 'Courier New', Courier, monospace"
@@ -7,10 +7,10 @@ imports:
props:
# base background
color-background:
value: "{!palette-gray-20}"
value: "{!palette-gray-10}"
comment: Default background color for any container
color-background-inverse:
value: "{!palette-gray-80}"
value: "{!palette-gray-90}"
comment: Inverse background color for any container

# brand backgrounds
@@ -48,7 +48,7 @@ props:

# row backgrounds
color-background-row-striped:
value: "{!palette-gray-20}"
value: "{!palette-gray-10}"
comment: Background color for alternative striped rows

# primary background
@@ -65,7 +65,7 @@ props:
value: "{!palette-blue-40}"
comment: Light background for primary actions or highlights
color-background-primary-lighter:
value: "{!palette-blue-30}"
value: "{!palette-blue-20}"
comment: Lighter background for primary actions or highlights
color-background-primary-lightest:
value: "{!palette-blue-10}"
@@ -85,8 +85,8 @@ props:
value: "{!palette-red-40}"
comment: Light background for destructive actions or highlights
color-background-destructive-lighter:
value: "{!palette-red-30}"
value: "{!palette-red-20}"
comment: Lighter background for destructive actions or highlights
color-background-destructive-lightest:
value: "{!palette-red-10}"
comment: Lightest background for destructive actions or highlights
comment: Lightest background for destructive actions or highlights
@@ -6,10 +6,10 @@ imports:
- ../aliases/color-palette.yml
props:
color-border:
value: "{!palette-gray-50}"
value: "{!palette-gray-40}"
comment: Default border color
color-border-light:
value: "{!palette-gray-40}"
value: "{!palette-gray-20}"
comment: Light border color
color-border-dark:
value: "{!palette-gray-60}"
@@ -40,7 +40,7 @@ props:
value: "{!palette-blue-40}"
comment: Light primary border color
color-border-primary-lighter:
value: "{!palette-blue-30}"
value: "{!palette-blue-20}"
comment: Lighter primary border color

# status borders
@@ -77,5 +77,5 @@ props:
value: "{!palette-red-40}"
comment: Destructive focus border color
color-border-destructive-lighter:
value: "{!palette-red-30}"
value: "{!palette-red-20}"
comment: Destructive focus border color
@@ -14,7 +14,7 @@ props:
value: "{!font-weight-medium}"
comment: Font weight for medium weight
font-weight-semibold:
value: "{!font-weight-medium}"
value: "{!font-weight-semibold}"
comment: Font weight for semibold weight
font-weight-bold:
value: "{!font-weight-bold}"
@@ -0,0 +1,8 @@
imports:
- ../../../aliases/border-radius.yml
aliases:
border-radius-0: "0"
border-radius-10: "3px"
border-radius-20: "4px"
border-radius-30: "8px"
border-radius-circle: "50%"
@@ -0,0 +1,6 @@
imports:
- ../../../aliases/border-width.yml
aliases:
border-width-0: "0"
border-width-10: "1px"
border-width-20: "2px"
@@ -0,0 +1,9 @@
imports:
- ../../../aliases/box-shadow.yml
- ./color-palette.yml
- ./offset.yml
aliases:
shadow-elevation-0: "none"
shadow-elevation-10: "{!offset-0} {!offset-10}px {!offset-20}px {!offset-0} {!palette-gray-100-transparent-30}"
shadow-elevation-20: "{!offset-0} {!offset-40}px {!offset-60}px {!offset-0} {!palette-gray-100-transparent-20}"
shadow-elevation-30: "{!offset-0} {!offset-50}px {!offset-80}px {!offset-20} {!palette-gray-100-transparent-20}"
@@ -0,0 +1,87 @@
imports:
- ../../../aliases/color-palette.yml
aliases:
## Blues
palette-blue-10: "#f5f8ff"
palette-blue-20: "#eff6fb"
palette-blue-30: "#dceaf4"
palette-blue-40: "#b3d3e9"
palette-blue-50: "#56a4d9"
palette-blue-60: "#027ac5"
palette-blue-70: "#005ea6"
palette-blue-80: "#003e82"
palette-blue-90: "#032c5e"
palette-blue-100: "#00092b"

## Blues transparent based on primary blue
palette-blue-60-transparent-10: "rgba(2, 122, 197, 0.1)"
palette-blue-60-transparent-20: "rgba(2, 122, 197, 0.2)"
palette-blue-60-transparent-30: "rgba(2, 122, 197, 0.3)"
palette-blue-60-transparent-40: "rgba(2, 122, 197, 0.4)"
palette-blue-60-transparent-50: "rgba(2, 122, 197, 0.5)"
palette-blue-60-transparent-60: "rgba(2, 122, 197, 0.6)"
palette-blue-60-transparent-70: "rgba(2, 122, 197, 0.7)"
palette-blue-60-transparent-80: "rgba(2, 122, 197, 0.8)"
palette-blue-60-transparent-90: "rgba(2, 122, 197, 0.9)"
palette-blue-60-transparent-100: "rgba(2, 122, 197, 1)"

## Grays
palette-gray-0: "#ffffff"
palette-gray-10: "#f9fafb"
palette-gray-20: "#f8f8f9"
palette-gray-30: "#f2f3f4"
palette-gray-40: "#e4e7e9"
palette-gray-50: "#c8cccf"
palette-gray-60: "#888c8e"
palette-gray-70: "#666a6d"
palette-gray-80: "#4f5355"
palette-gray-90: "#424547"
palette-gray-100: "#282a2b"

## Grays transparent based on darkest gray
palette-gray-100-transparent-10: "rgba(40, 42, 43, 0.1)"
palette-gray-100-transparent-20: "rgba(40, 42, 43, 0.2)"
palette-gray-100-transparent-30: "rgba(40, 42, 43, 0.3)"
palette-gray-100-transparent-40: "rgba(40, 42, 43, 0.4)"
palette-gray-100-transparent-50: "rgba(40, 42, 43, 0.5)"
palette-gray-100-transparent-60: "rgba(40, 42, 43, 0.6)"
palette-gray-100-transparent-70: "rgba(40, 42, 43, 0.7)"
palette-gray-100-transparent-80: "rgba(40, 42, 43, 0.8)"
palette-gray-100-transparent-90: "rgba(40, 42, 43, 0.9)"
palette-gray-100-transparent-100: "rgba(40, 42, 43, 1)"

## Greens
palette-green-10: "#e0ffef"
palette-green-20: "#c7ffe2"
palette-green-30: "#8eeebc"
palette-green-40: "#5fe7a1"
palette-green-50: "#23bf6e"
palette-green-60: "#00994a"
palette-green-70: "#00803d"
palette-green-80: "#006631"
palette-green-90: "#004d25"
palette-green-100: "#00361a"

## Oranges
palette-orange-10: "#ffecd8"
palette-orange-20: "#fdd5bf"
palette-orange-30: "#fbb68f"
palette-orange-40: "#fa9c66"
palette-orange-50: "#f28510"
palette-orange-60: "#e46216"
palette-orange-70: "#a83e00"
palette-orange-80: "#762e04"
palette-orange-90: "#451b02"
palette-orange-100: "#2c1102"

## Reds
palette-red-10: "#ffe9e7"
palette-red-20: "#fcf0f0"
palette-red-30: "#f5dddd"
palette-red-40: "#ecb6b6"
palette-red-50: "#de5858"
palette-red-60: "#e22525"
palette-red-70: "#b20600"
palette-red-80: "#921200"
palette-red-90: "#600101"
palette-red-100: "#471d00"
@@ -0,0 +1,7 @@
imports:
- ../../../aliases/color.yml
aliases:
amaranth: "#F22F46"
black: "#000000"
midnight: "#233659"
white: "#FFFFFF"
@@ -0,0 +1,5 @@
imports:
- ../../../aliases/font-family.yml
aliases:
font-family-10: "'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif"
font-family-20: "'Fira Mono', 'Courier New', Courier, monospace"

0 comments on commit d550e4e

Please sign in to comment.
You can’t perform that action at this time.