Add box-shadow tokens (#66)

CHANGELOG.md

@@ -1,5 +1,6 @@
 # HEAD
 
+* **shadows** Add tokens for box shadows
 * **borders** Add tokens for border radii
 * **colors** (breaking) Rename "grey" colors to the American spelling of "gray"
 * **colors:** Add Mozilla brand colors

tokens/_aliases.yml

@@ -6,6 +6,11 @@ aliases:
   border-radius-md: '8px'
   border-radius-lg: '16px'
 
+  # Shadows
+  box-shadow-sm: '0 8px 12px 1px rgba(29, 17, 51, .04), 0 3px 16px 2px rgba(9, 32, 77, .12), 0 5px 10px -3px rgba(29, 17, 51, .12)'
+  box-shadow-md: '0 16px 24px 2px rgba(29, 17, 51, .04), 0 6px 32px 4px rgba(9, 32, 77, .12), 0 8px 12px -5px rgba(29, 17, 51, .12)'
+  box-shadow-lg: '0 24px 38px 3px rgba(29, 17, 51, .04), 0 10px 48px 8px rgba(9, 32, 77, .12), 0 12px 16px -6px rgba(29, 17, 51, .12)'
+
   # Colors
   color-green-05: '#e3fff3'
   color-green-10: '#d1ffee'

tokens/_index.yml

@@ -1,8 +1,9 @@
 imports:
-  - ./media-queries.yml
+  - ./border-radius.yml
-  - ./content.yml
+  - ./box-shadow.yml
   - ./colors.yml
+  - ./content.yml
   - ./font-stack.yml
   - ./gradients.yml
+  - ./media-queries.yml
   - ./units.yml
-  - ./border-radius.yml

tokens/box-shadow.yml

@@ -0,0 +1,14 @@
+global:
+  type: web
+  category: box-shadow
+imports:
+  - ./_aliases.yml
+props:
+
+  - name: 'box-shadow-sm'
+    value: '{!box-shadow-sm}'
+  - name: 'box-shadow-md'
+    value: '{!box-shadow-md}'
+  - name: 'box-shadow-lg'
+    value: '{!box-shadow-lg}'
+