AWV-3: Adding CSS3 animations to the CINE dialog

Packages/design/package.js

@@ -35,6 +35,7 @@ Package.onUse(function(api) {
 
     // Component styles
     api.addFiles([
+        'styles/components/dialog.styl',
         'styles/components/radio.styl',
         'styles/components/select2.styl',
         'styles/components/selectTree.styl',

Packages/design/styles/common/keyframes.styl

@@ -1,19 +1,41 @@
 @import "{design}/app.styl"
 
 @keyframes zoomIn
-  from
-    transform(scale(0))
-  to
-    transform(scale(1))
+    0%
+        transform(scale(0))
+    100%
+        transform(scale(1))
+
+@keyframes zoomOut
+    0%
+        transform(scale(1))
+    100%
+        transform(scale(0))
+
+@keyframes slideInDown
+    0%
+        opacity: 0
+        transform(translateY(-100%) scale(0))
+    100%
+        opacity: 1
+        transform(translateY(0) scale(1))
+
+@keyframes slideOutUp
+    0%
+        opacity: 1
+        transform(translateY(0) scale(1))
+    100%
+        opacity: 0
+        transform(translateY(-100%) scale(0))
 
 @keyframes fadeIn
-  from
-    opacity: 0
-  to
-    opacity: 1
+    from
+        opacity: 0
+    to
+        opacity: 1
 
 @keyframes fadeOut
-  from
-    opacity: 1
-  to
-    opacity: 0
+    from
+        opacity: 1
+    to
+        opacity: 0

Packages/design/styles/components/dialog.styl

@@ -0,0 +1,12 @@
+@import "{design}/app"
+
+.viewerDialogs>*
+
+    &:not(.dialog-closed):not(.dialog-open)
+        display: none
+
+    &.dialog-closed
+        animateSlideOutUp()
+
+    &.dialog-open
+        animateSlideInDown()

Packages/design/styles/imports/animations.styl

@@ -1,17 +1,29 @@
 animationDefaults()
-  animation-duration: 0.3s
-  animation-direction: alternate
-  animation-timing-function: ease-out
-  animation-fill-mode: forwards
+    animation-duration: 0.3s
+    animation-direction: alternate
+    animation-timing-function: ease-out
+    animation-fill-mode: forwards
 
 animateZoomIn()
-  animationDefaults()
-  animation-name: zoomIn
+    animationDefaults()
+    animation-name: zoomIn
+
+animateZoomOut()
+    animationDefaults()
+    animation-name: zoomOut
+
+animateSlideInDown()
+    animationDefaults()
+    animation-name: slideInDown
+
+animateSlideOutUp()
+    animationDefaults()
+    animation-name: slideOutUp
 
 animateFadeIn()
-  animationDefaults()
-  animation-name: fadeIn
+    animationDefaults()
+    animation-name: fadeIn
 
 animateFadeOut()
-  animationDefaults()
-  animation-name: fadeOut
+    animationDefaults()
+    animation-name: fadeOut

Packages/design/styles/imports/theming.styl

@@ -1,32 +1,69 @@
 $themes = {}
 $defaultTheme = 'tide'
 
+// Import the theme variables
 @import "./theme-tide.styl"
 @import "./theme-tigerlilly.styl"
 
-parseSpaceVars($theme, $value)
-  $valueSplit = split(' ', $value)
-  $list = ''
-  pop($list)
-  for $property in $valueSplit
-    if ($theme[$property])
-      push($list, $theme[$property])
-    else
-      push($list, $property)
-  join(' ', $list)
+/*
+ * Process each theme variable in the given value, splitting it by space
+ */
+parseSpaceVars($theme, $value, $alpha)
+    // Split values by space
+    $valueSplit = split(' ', $value)
 
-parseCommaVars($theme, $value)
-  $valueSplit = split(',', $value)
-  $list = ''
-  pop($list)
-  for $sentence in $valueSplit
-    push($list, parseSpaceVars($theme, $sentence))
-  unquote(join(',', $list))
+    // Create an empty list
+    $list = ''
+    pop($list)
 
-theme($property, $value)
-  / {selector()}
-    {$property}: parseCommaVars($themes[$defaultTheme], $value)
-  for $themeName, $theme in $themes
-    for $selectorPiece in split(',', selector())
-      / body.theme-{$themeName} {$selectorPiece}
-        {$property}: parseCommaVars($theme, $value)
+    // Iterate over split values
+    for $property in $valueSplit
+        // Try to get the theme with current property key
+        $val = $theme[$property]
+        if ($val)
+            if($val is a 'color')
+                // Apply given alpha if it's a color
+                $val = alpha($val, $alpha)
+            // Push the processed theme variable to the list
+            push($list, $val)
+        else
+            // Push the property itself if not found in theme variables
+            push($list, $property)
+
+    // Merge the resulting processed list by joining values back with space
+    join(' ', $list)
+
+/*
+ * Process each theme variable in the given value, splitting it by comma
+ */
+parseCommaVars($theme, $value, $alpha)
+    // Split values by comma
+    $valueSplit = split(',', $value)
+
+    // Create an empty list
+    $list = ''
+    pop($list)
+
+    // Iterate over split values
+    for $sentence in $valueSplit
+        // Procces the values splitting by space
+        push($list, parseSpaceVars($theme, $sentence, $alpha))
+
+    // Merge the resulting processed list by joining values back with comma
+    unquote(join(',', $list))
+
+/*
+ * Return a processed theme variable or color with alpha
+ */
+theme($property, $value, $alpha=1)
+
+    // Crete the selector for default theme
+    / {selector()}
+        {$property}: parseCommaVars($themes[$defaultTheme], $value, $alpha)
+
+    // Create the selector for each registered theme
+    for $themeName, $theme in $themes
+        for $selectorPiece in split(',', selector())
+            // prefix the selector with the body.theme-{themeName} selector
+            / body.theme-{$themeName} {$selectorPiece}
+                {$property}: parseCommaVars($theme, $value, $alpha)