alchemy_cms 8.0.0.a → 8.0.0.c

data/app/stylesheets/tinymce/skins/content/alchemy/content.scss

@@ -15,11 +15,11 @@ body {
   font-family: var(--font-sans);
   line-height: 1.4;
   margin: 1em;
-  color: var(--text-color);
+  color: #333;
 }
 
 a {
-  color: var(--color-blue_dark);
+  color: #000;
 }
 
 table {
@@ -28,7 +28,7 @@ table {
 
 table td,
 table th {
-  border: 1px solid var(--border-color);
+  border: 1px solid #666;
   padding: 0.4rem;
 }
 
@@ -38,32 +38,32 @@ figure {
 }
 
 figure figcaption {
-  color: var(--color-grey_dark);
+  color: #333;
   display: block;
   margin-top: 0.25rem;
   text-align: center;
 }
 
 hr {
-  border-color: var(--border-color);
+  border-color: #666;
   border-style: solid;
   border-width: 1px 0 0 0;
 }
 
 code {
-  background-color: var(--color-grey_very_light);
+  background-color: #999;
   border-radius: var(--border-radius_medium);
   padding: 0.1rem 0.2rem;
 }
 
 .mce-content-body:not([dir="rtl"]) blockquote {
-  border-left: 2px solid var(--border-color);
+  border-left: 2px solid #666;
   margin-left: 1.5rem;
   padding-left: 1rem;
 }
 
 .mce-content-body[dir="rtl"] blockquote {
-  border-right: 2px solid var(--border-color);
+  border-right: 2px solid #666;
   margin-right: 1.5rem;
   padding-right: 1rem;
 }

data/app/stylesheets/tinymce/skins/content/alchemy-dark/content.scss

@@ -0,0 +1,70 @@
+/**
+* Copyright (c) Tiny Technologies, Inc. All rights reserved.
+* Licensed under the LGPL or a commercial license.
+* For LGPL see License.txt in the project root for license information.
+* For commercial licenses see https://www.tiny.cloud/
+*/
+
+@use "../../../../alchemy/custom-properties";
+
+html {
+  font-size: 13px;
+}
+
+body {
+  font-family: var(--font-sans);
+  line-height: 1.4;
+  margin: 1em;
+  background-color: var(--a-darkest-grey);
+  color: var(--a-lighter-grey);
+}
+
+a {
+  color: var(--a-lightest-grey);
+}
+
+table {
+  border-collapse: collapse;
+}
+
+table td,
+table th {
+  border: 1px solid var(--a-grey);
+  padding: 0.4rem;
+}
+
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+
+figure figcaption {
+  color: var(--a-lighter-grey);
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+
+hr {
+  border-color: var(--a-grey);
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+
+code {
+  background-color: var(--a-darkest-grey);
+  border-radius: var(--border-radius_medium);
+  padding: 0.1rem 0.2rem;
+}
+
+.mce-content-body:not([dir="rtl"]) blockquote {
+  border-left: 2px solid var(--a-grey);
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+
+.mce-content-body[dir="rtl"] blockquote {
+  border-right: 2px solid var(--a-grey);
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}

data/app/stylesheets/tinymce/skins/ui/alchemy/skin.scss

@@ -365,30 +365,20 @@ button::-moz-focus-inner {
 }
 
 .tox .tox-button[disabled] {
-  background-color: #2d5a8d;
-  background-image: none;
-  border-color: #2d5a8d;
+  background-color: var(--button-disabled-bg-color);
+  border-color: var(--button-border-color);
   box-shadow: none;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--button-disabled-color);
   cursor: not-allowed;
 }
 
 .tox .tox-button:focus:not(:disabled) {
-  background-color: #274e7a;
-  background-image: none;
-  border-color: #274e7a;
-  box-shadow: none;
-  color: #fff;
-}
-
-.tox .tox-button:hover:not(:disabled) {
-  background-color: var(--button-hover-bg-color);
-  background-image: none;
-  border-color: var(--button-hover-border-color);
-  box-shadow: none;
-  color: var(--button-text-color);
+  background-color: var(--button-bg-color);
+  border-color: var(--button-focus-border-color);
+  box-shadow: var(--button-focus-box-shadow);
 }
 
+.tox .tox-button:hover:not(:disabled):not(:focus),
 .tox .tox-button:active:not(:disabled) {
   background-color: var(--button-hover-bg-color);
   background-image: none;
@@ -419,35 +409,26 @@ button::-moz-focus-inner {
 }
 
 .tox .tox-button--secondary[disabled] {
-  background-color: #f0f0f0;
-  background-image: none;
-  border-color: #f0f0f0;
+  background-color: var(--button-disabled-bg-color);
+  border-color: var(--button-secondary-border-color);
+  cursor: not-allowed;
   box-shadow: none;
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--button-disabled-color);
 }
 
 .tox .tox-button--secondary:focus:not(:disabled) {
-  background-color: #e3e3e3;
-  background-image: none;
-  border-color: #e3e3e3;
-  box-shadow: none;
-  color: #000;
-}
-
-.tox .tox-button--secondary:hover:not(:disabled) {
-  background-color: #e3e3e3;
-  background-image: none;
-  border-color: #e3e3e3;
-  box-shadow: none;
-  color: #000;
+  background-color: var(--button-secondary-bg-color);
+  border-color: var(--button-focus-border-color);
+  box-shadow: var(--button-focus-box-shadow);
 }
 
+.tox .tox-button--secondary:hover:not(:disabled):not(:focus),
 .tox .tox-button--secondary:active:not(:disabled) {
-  background-color: #d6d6d6;
+  background-color: var(--button-hover-bg-color);
   background-image: none;
-  border-color: #d6d6d6;
+  border-color: var(--button-hover-border-color);
   box-shadow: none;
-  color: #000;
+  color: var(--button-secondary-text-color);
 }
 
 .tox .tox-button--icon,
@@ -1553,8 +1534,15 @@ button::-moz-focus-inner {
 .tox .tox-dialog__header .tox-button {
   z-index: 1;
   color: var(--color-white);
+  height: var(--spacing-6);
   background-image: none; // If used in Solidus we need to override the background image
-  border: none; // If used in Solidus we need to override the border
+  border-color: transparent; // If used in Solidus we need to override the border
+
+  &:active:not(:disabled),
+  &:hover:not(:disabled) {
+    background-color: var(--color-blue_medium);
+    color: var(--color-white);
+  }
 }
 
 .tox .tox-dialog__draghandle {
@@ -2095,11 +2083,8 @@ body.tox-dialog__disable-scroll {
 }
 
 .tox .tox-color-input span::before {
-  background-image: linear-gradient(
-      45deg,
-      rgba(0, 0, 0, 0.25) 25%,
-      transparent 25%
-    ),
+  background-image:
+    linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
     linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%),
     linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);

data/app/stylesheets/tinymce/skins/ui/alchemy-dark/content.scss

@@ -0,0 +1 @@
+/* Left empty on purpose. Tinymce loads this file, but we do not need it */