fix rgba css generation, add some tests to automatically verify that themes are

generated properly

build/webpack.base.conf.js

@@ -35,6 +35,7 @@ module.exports = {
     ],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common',
+      'static': path.resolve(__dirname, '../static'),
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components')

src/services/color_convert/color_convert.js

@@ -171,7 +171,7 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, .5)`
 }
 
 /**

src/services/theme_data/theme_data.service.js

@@ -353,7 +353,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
     if (dependencySlot && sourceColors[dependencySlot] === 'transparent') {
       outputColor.a = 0
     } else {
-      outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
+      outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
     }
   }
   if (opacitySlot) {

static/themes/redmond-xx-se.json

@@ -1,7 +1,7 @@
 {
   "_pleroma_theme_version": 2,
   "name": "Redmond XX SE",
-  "theme": {
+  "source": {
     "shadows": {
       "panel": [
         {

static/themes/redmond-xx.json

@@ -1,7 +1,7 @@
 {
   "_pleroma_theme_version": 2,
   "name": "Redmond XX",
-  "theme": {
+  "source": {
     "shadows": {
       "panel": [
         {

static/themes/redmond-xxi.json

@@ -1,7 +1,7 @@
 {
   "_pleroma_theme_version": 2,
   "name": "Redmond XXI",
-  "theme": {
+  "source": {
     "shadows": {
       "panel": [
         {

test/unit/specs/services/theme_data/sanity_checks.spec.js

@@ -0,0 +1,28 @@
+import { getColors } from 'src/services/theme_data/theme_data.service.js'
+
+const checkColors = (output) => {
+  expect(output).to.have.property('colors')
+  Object.entries(output.colors).forEach(([key, v]) => {
+    expect(v, key).to.be.an('object')
+    expect(v, key).to.include.all.keys('r', 'g', 'b')
+    'rgba'.split('').forEach(k => {
+      if ((k === 'a' && v.hasOwnProperty('a')) || k !== 'a') {
+        expect(v[k], key + '.' + k).to.be.a('number')
+        expect(v[k], key + '.' + k).to.be.least(0)
+        expect(v[k], key + '.' + k).to.be.most(k === 'a' ? 1 : 255)
+      }
+    })
+  })
+}
+
+describe('Theme Data utility functions', () => {
+  const context = require.context('static/themes/', false, /\.json$/)
+  context.keys().forEach((key) => {
+    it(`Should render all colors for ${key} properly`, () => {
+      const { theme, source } = context(key)
+      const data = source || theme
+      const colors = getColors(data.colors, data.opacity, 1)
+      checkColors(colors)
+    })
+  })
+})

test/unit/specs/services/theme_data/theme_data.spec.js

@@ -1,6 +1,7 @@
 import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js'
 
-describe('getLayersArray', () => {
+describe('Theme Data utility functions', () => {
+  describe('getLayersArray', () => {
     const fixture = {
       layer1: null,
       layer2: 'layer1',
@@ -27,9 +28,9 @@ describe('getLayersArray', () => {
       const out = getLayersArray('layer1', fixture)
       expect(out).to.eql(['layer1'])
     })
-})
+  })
 
-describe('topoSort', () => {
+  describe('topoSort', () => {
     const fixture1 = {
       layerA: [],
       layer1A: ['layerA'],
@@ -84,4 +85,6 @@ describe('topoSort', () => {
       const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [inheritance[node]])
       expect(out.indexOf('a')).to.be.below(out.indexOf('c'))
     })
+  })
+
 })