Merge branch 'themes-updates' into shigusegubu-themes3

changelog.d/color-schemes.add

@@ -0,0 +1 @@
+Some new default color schemes

src/components/button_unstyled.style.js

@@ -10,14 +10,13 @@ export default {
   },
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Badge'
   ],
   defaultRules: [
     {
       directives: {
-        background: '#ffffff',
-        opacity: 0,
         shadow: []
       }
     },

src/components/settings_modal/tabs/appearance_tab.js

@@ -43,7 +43,7 @@ const AppearanceTab = {
       bundledPalettes: [],
       compilationCache: {},
       fileImporter: newImporter({
-        accept: '.json, .piss',
+        accept: '.json, .iss',
         validator: this.importValidator,
         onImport: this.onImport,
         parser: this.importParser,
@@ -305,14 +305,14 @@ const AppearanceTab = {
     importParser (file, filename) {
       if (filename.endsWith('.json')) {
         return JSON.parse(file)
-      } else if (filename.endsWith('.piss')) {
+      } else if (filename.endsWith('.iss')) {
         return deserialize(file)
       }
     },
     onImport (parsed, filename) {
       if (filename.endsWith('.json')) {
         this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
-      } else if (filename.endsWith('.piss')) {
+      } else if (filename.endsWith('.iss')) {
         this.$store.dispatch('setStyleCustom', parsed)
       }
     },
@@ -324,7 +324,7 @@ const AppearanceTab = {
       if (filename.endsWith('.json')) {
         const version = parsed._pleroma_theme_version
         return version >= 1 || version <= 2
-      } else if (filename.endsWith('.piss')) {
+      } else if (filename.endsWith('.iss')) {
         if (!Array.isArray(parsed)) return false
         if (parsed.length < 1) return false
         if (parsed.find(x => x.component === '@meta') == null) return false

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -604,7 +604,7 @@ export default {
     const styleExporter = newExporter({
       filename: () => exports.name.value ?? 'pleroma_theme',
       mime: 'text/plain',
-      extension: 'piss',
+      extension: 'iss',
       getExportedObject: () => exportStyleData.value
     })
 
@@ -636,7 +636,7 @@ export default {
     }
 
     const styleImporter = newImporter({
-      accept: '.piss',
+      accept: '.iss',
       parser (string) { return deserialize(string) },
       onImportFailure (result) {
         console.error('Failure importing style:', result)

src/services/color_convert/color_convert.js

@@ -1,4 +1,4 @@
-import { invertLightness, contrastRatio } from 'chromatism'
+import { invertLightness, contrastRatio, convert } from 'chromatism'
 
 // useful for visualizing color when debugging
 export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@@ -215,19 +215,36 @@ export const rgba2css = function (rgba) {
  * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
  */
 export const getTextColor = function (bg, text, preserve) {
-  const contrast = getContrastRatio(bg, text)
-
-  if (contrast < 4.5) {
-    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
-    const result = Object.assign(base, invertLightness(text).rgb)
-    if (!preserve && getContrastRatio(bg, result) < 4.5) {
+  const originalContrast = getContrastRatio(bg, text)
+  if (!preserve) {
+    if (originalContrast < 4.5) {
       // B&W
       return contrastRatio(bg, text).rgb
     }
-    // Inverted color
-    return result
   }
-  return text
+
+  const originalColor = convert(text).hex
+  const invertedColor = invertLightness(originalColor).hex
+  const invertedContrast = getContrastRatio(bg, invertedColor)
+  let workColor
+
+  if (invertedContrast > originalContrast) {
+    workColor = invertedColor
+  } else {
+    workColor = originalColor
+  }
+
+  let contrast = getContrastRatio(bg, text)
+  const result = convert(rgb2hex(workColor)).hsl
+  const delta = result.l > 50 ? 1 : -1
+  const multiplier = 10
+  while (contrast < 4.5) {
+    result.l += delta * multiplier
+    contrast = getContrastRatio(bg, result)
+  }
+
+  const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+  return Object.assign(base, result)
 }
 
 /**

src/services/theme_data/theme_data_3.service.js

@@ -284,8 +284,8 @@ export const init = ({
       computed[selector] = computed[selector] || {}
       computed[selector].computedRule = computedRule
       computed[selector].dynamicVars = dynamicVars
-      computed[selector].virtualDirectives = computed[lowerLevelSelector]?.virtualDirectives || {}
-      computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {}
+      computed[selector].virtualDirectives = {}
+      computed[selector].virtualDirectivesRaw = {}
 
       if (virtualComponents.has(combination.component)) {
         const virtualName = [

static/styles/index.json

@@ -1,4 +1,4 @@
 {
-  "RedmondDX": "/static/styles/Redmond DX.piss",
-  "BreezyDX": "/static/styles/Breezy DX.piss"
+  "RedmondDX": "/static/styles/Redmond DX.iss",
+  "BreezyDX": "/static/styles/Breezy DX.iss"
 }