alchemy_cms 7.0.11 → 7.1.0.pre.b1

data/app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee

@@ -2,19 +2,20 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 
 # Adds buttons into a toolbar inside of overlay windows
 Alchemy.ToolbarButton = (options) ->
-  $btn = $('<div class="button_with_label" />')
+  $btn = $("<sl-tooltip content='#{options.label}' placement='top-#{options.align}'></sl-tooltip>")
+  if options.align
+    $btn.addClass(options.class)
   if options.buttonId
     $btn.attr(id: options.buttonId)
-  $lnk = $("<a title='#{options.title}' class='icon_button' href='#' />")
+  $lnk = $("<a class='icon_button' href='#' />")
   if options.hotkey
     $lnk.attr('data-alchemy-hotkey', options.hotkey)
-  $lnk.click (e) ->
+  $lnk.on "click", (e) ->
     e.preventDefault()
     options.onClick(e)
     return
-  $lnk.append "<i class='icon fas fa-#{options.iconClass} fa-fw' />"
+  $lnk.append "<i class='icon ri-#{options.iconClass} ri-fw' />"
   $btn.append $lnk
-  $btn.append "<br><label>#{options.label}</label>"
   $btn
 
 Alchemy.ElementsWindow =
@@ -30,28 +31,50 @@ Alchemy.ElementsWindow =
     @element_window.append @createToolbar(options.toolbarButtons)
     @element_window.append @element_area
     @button = $('#element_window_button')
-    @button.click =>
+    @button.on "click", =>
       @hide()
       false
+
     window.requestAnimationFrame =>
       spinner = new Alchemy.Spinner('medium')
       spinner.spin @element_area[0]
+
+    window.addEventListener 'message', (event) =>
+      data = event.data
+      if data?.message == 'Alchemy.focusElementEditor'
+        element = document.getElementById("element_#{data.element_id}")
+        Alchemy.ElementsWindow.show()
+        element?.focusElement()
+      true
+
+    @$body.on "click", (evt) =>
+      unless evt.target.closest(".element-editor")
+        @element_area.find('.element-editor').removeClass('selected')
+        Alchemy.PreviewWindow.postMessage(message: 'Alchemy.blurElements')
+      return
+
     $('#main_content').append(@element_window)
     @show()
     @reload()
 
   createToolbar: (buttons) ->
-    @toolbar = $('<div id="overlay_toolbar"/>')
+    @toolbar = $('<div class="elements-window-toolbar" />')
+    buttons.push
+      label: "Collapse all elements"
+      iconClass: "contract-up-down-line"
+      align: "end"
+      class: "right"
+      onClick: =>
+        $("alchemy-element-editor:not([compact]):not([fixed])").each () ->
+          @collapse()
     for btn in buttons
       @toolbar.append Alchemy.ToolbarButton(btn)
-    @toolbar
+    @toolbar.append @collapseAllBtn
 
   reload: ->
     $.get @url, (data) =>
       @element_area.html data
-      Alchemy.GUI.init(@element_area)
-      Alchemy.fileEditors(@element_area.find(".ingredient-editor.file, .ingredient-editor.audio, .ingredient-editor.video").selector)
-      Alchemy.pictureEditors(@element_area.find(".ingredient-editor.picture").selector)
+      Alchemy.SortableElements()
       if @callback
         @callback.call()
     .fail (xhr, status, error) =>
@@ -70,13 +93,15 @@ Alchemy.ElementsWindow =
   toggleButton: ->
     if @hidden
       @button.find('label').text(@options.texts.showElements)
+      @button.find('.icon').removeClass("ri-menu-unfold-line").addClass("ri-menu-fold-line")
       @button.off('click')
-      @button.click =>
+      @button.on "click", =>
         @show()
         false
     else
       @button.find('label').text(@options.texts.hideElements)
+      @button.find('.icon').removeClass("ri-menu-fold-line").addClass("ri-menu-unfold-line")
       @button.off('click')
-      @button.click =>
+      @button.on "click", =>
         @hide()
         false

data/app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee

@@ -9,7 +9,7 @@ Alchemy.FileProgress = (file) ->
     @$fileProgressElement = $('<div class="progress-container"/>')
 
     # Append Cancel Button
-    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="fas fa-times fa-fw"/></a>')
+    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="icon ri-close-line ri-fw" /></a>')
     @$fileProgressElement.append @$fileProgressCancel
 
     # Append Filename

data/app/assets/javascripts/alchemy/alchemy.fixed_elements.js

@@ -1,38 +1,45 @@
-window.Alchemy = Alchemy || {};
+window.Alchemy = Alchemy || {}
 
 Alchemy.FixedElements = {
-  WRAPPER: '<div id="fixed-elements"></div>',
-  TABS: '<ul><li><a href="#main-content-elements">{{label}}</a></li></ul>',
+  WRAPPER: '<sl-tab-group id="fixed-elements" />',
+  TABS: '<sl-tab slot="nav" panel="main-content-elements">{{label}}</sl-tab>',
 
   // Builds fixed elements tabs
-  buildTabs: function(label) {
+  buildTabs: function (label) {
     var $wrapper = $(this.WRAPPER),
-        $tabs = $(this.TABS.replace(/{{label}}/, label));
+      $tabs = $(this.TABS.replace(/{{label}}/, label))
 
-    $('#main-content-elements').wrap($wrapper);
-    $('#fixed-elements').prepend($tabs).tabs().tabs('paging', {
-      follow: true,
-      followOnSelect: true
-    });
+    $("#main-content-elements").wrap($wrapper)
+    $("#fixed-elements").prepend($tabs)
   },
 
   // Creates a fixed element tab.
-  createTab: function(element_id, label) {
-    var $fixed_elements = $('#fixed-elements'),
-        $tab;
-
-    $('> ul', $fixed_elements).append('<li><a href="#fixed-element-' + element_id + '">' + label + '</a></li>');
-    $tab = $('<div id="fixed-element-' + element_id + '" class="sortable-elements" />');
-    $fixed_elements.append($tab);
-    $fixed_elements.tabs().tabs('refresh');
-    $fixed_elements.tabs('option', 'active', $('#fixed-elements > div').index($tab));
+  createTab: function (element_id, label) {
+    var $fixed_elements = $("#fixed-elements")
+    var panel_name = "fixed-element-" + element_id
+
+    var $tab =
+      '<sl-tab slot="nav" panel="' + panel_name + '">' + label + "</sl-tab>"
+    $fixed_elements.append($tab)
+
+    var $panel = $(
+      '<sl-tab-panel name="' + panel_name + '" style="--padding: 0" />'
+    )
+    $fixed_elements.append($panel)
+    window.requestAnimationFrame(function () {
+      $fixed_elements.get(0).show(panel_name)
+    })
   },
 
-  removeTab: function(element_id) {
-    var $fixed_elements = $('#fixed-elements');
+  removeTab: function (element_id) {
+    var $fixed_elements = $("#fixed-elements")
 
-    $fixed_elements.find('a[href="#fixed-element-' + element_id + '"]').parent().remove();
-    $fixed_elements.find('div#fixed-element-' + element_id).remove();
-    $fixed_elements.tabs().tabs('refresh');
+    $fixed_elements
+      .find('sl-tab[panel="fixed-element-' + element_id + '"]')
+      .remove()
+    $fixed_elements
+      .find('sl-tab-panel[name="fixed-element-' + element_id + '"]')
+      .remove()
+    $fixed_elements.get(0).show("main-content-elements")
   }
-};
+}

data/app/assets/javascripts/alchemy/alchemy.growler.js.coffee

@@ -12,7 +12,7 @@ Alchemy.Growler =
 
   fade: ->
     $(".flash:not(.error)", "#flash_notices").delay(5000).queue(-> Alchemy.Growler.dismiss(this))
-    $(".flash", "#flash_notices").click((e) => @dismiss(e.currentTarget))
+    $(".flash", "#flash_notices").on("click", (e) => @dismiss(e.currentTarget))
     return
 
   dismiss: (element) ->

data/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee

@@ -1,19 +1,17 @@
 class window.Alchemy.ImageOverlay extends Alchemy.Dialog
 
   constructor: (url) ->
-    @options =
-      draggable: false
     super(url, @options)
     return
 
   init: ->
     Alchemy.ImageLoader(@dialog_body[0])
-    $('.zoomed-picture-background').click (e) =>
+    $('.zoomed-picture-background').on "click", (e) =>
       e.stopPropagation()
       return if e.target.nodeName == 'IMG'
       @close()
       false
-    $('.picture-overlay-handle').click (e) =>
+    $('.picture-overlay-handle').on "click", (e) =>
       @dialog.toggleClass('hide-form')
       false
     @$previous = $('.previous-picture')
@@ -44,7 +42,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     @dialog = $('<div class="alchemy-image-overlay-dialog" />')
     @dialog_body = $('<div class="alchemy-image-overlay-body" />')
     @close_button = $('<a class="alchemy-image-overlay-close">
-      <i class="icon fas fa-times fa-fw"></i>
+      <i class="icon ri-close-line ri-fw"></i>
     </a>')
     @dialog.append(@close_button)
     @dialog.append(@dialog_body)

data/app/assets/javascripts/alchemy/alchemy.initializer.js.coffee

@@ -1,57 +0,0 @@
-# Initialize all onload scripts at once.
-#
-# Called at jQuery ready event and Turbo page change event.
-#
-Alchemy.Initializer = ->
-
-  # We obviously have javascript enabled.
-  $('html').removeClass('no-js')
-
-  # Initialize the GUI.
-  Alchemy.GUI.init()
-
-  # Fade all growl notifications.
-  if $('#flash_notices').length > 0
-    Alchemy.Growler.fade()
-
-  # Add observer for please wait overlay.
-  $('.please_wait, .button_with_label form :submit')
-    .not('*[data-alchemy-confirm]')
-    .click Alchemy.pleaseWaitOverlay
-
-  # Hack for enabling tab focus for <a>'s styled as button.
-  $('a.button').attr({tabindex: 0})
-
-  # Locale select handler
-  $('select#change_locale').on 'change', (e) ->
-    url = window.location.pathname
-    delimiter = if url.match(/\?/) then '&' else '?'
-    Turbo.visit "#{url}#{delimiter}admin_locale=#{$(this).val()}"
-
-  # Site select handler
-  $('select#change_site').on 'change', (e) ->
-    url = window.location.pathname
-    delimiter = if url.match(/\?/) then '&' else '?'
-    Turbo.visit "#{url}#{delimiter}site_id=#{$(this).val()}"
-
-  # Submit forms of selects with `data-autosubmit="true"`
-  $('select[data-auto-submit="true"]').on 'change', (e) ->
-    $(this.form).submit()
-
-  # Attaches the image loader on all images
-  Alchemy.ImageLoader('#main_content')
-
-  # Override the filter of keymaster.js so we can blur the fields on esc key.
-  key.filter = (event) ->
-    tagName = (event.target || event.srcElement).tagName
-    key.isPressed('esc') || !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA')
-
-$(document).on 'turbo:load', ->
-  Alchemy.Initializer()
-  return
-
-$(document).on 'turbo:before-fetch-request', ->
-  # Ensure that all tinymce editors get removed before parsing a new page
-  Alchemy.Tinymce.removeIntersectionObserver()
-  Alchemy.Tinymce.removeFrom $('.has_tinymce')
-  return

data/app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee

@@ -4,13 +4,6 @@
 class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   constructor: (@link_object) ->
-    if @link_object.dataset
-      parent_selector = @link_object.dataset.parentSelector
-      parent = document.querySelector(parent_selector)
-      @link_value_field = parent.querySelector("[data-link-value]")
-      @link_title_field = parent.querySelector("[data-link-title]")
-      @link_target_field = parent.querySelector("[data-link-target]")
-      @link_class_field = parent.querySelector("[data-link-class]")
     @url = Alchemy.routes.link_admin_pages_path
     @$link_object = $(@link_object)
     @options =
@@ -40,11 +33,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     @initPageSelect()
     return
 
-  # Attaches click events to several buttons in the link dialog.
+  # Attaches click events to forms in the link dialog.
   attachEvents: ->
-    # The ok buttons
-    $('.create-link.button', @dialog_body).click (e) =>
-      @link_type = $(e.target).data('link-type')
+    $('[data-link-form-type]', @dialog_body).on "submit", (e) =>
+      e.preventDefault()
+      @link_type = e.target.dataset.linkFormType
       url = $("##{@link_type}_link").val()
       if @link_type == 'internal' && @$element_anchor.val() != ''
         url += "##{@$element_anchor.val()}"
@@ -136,11 +129,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Sets the link either in TinyMCE or on an Ingredient.
   setLink: (url, title, target) ->
-    Alchemy.setElementDirty(@$link_object.closest('.element-editor'))
     if @link_object.editor
       @setTinyMCELink(url, title, target)
     else
-      @setLinkFields(url, title, target)
+      @link_object.setLink(url, title, target, @link_type)
+    return
 
   # Sets a link in TinyMCE editor.
   setTinyMCELink: (url, title, target) ->
@@ -154,23 +147,11 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     editor.selection.collapse()
     true
 
-  # Sets a link on an Ingredient (e.g. Picture).
-  setLinkFields: (url, title, target) ->
-    @link_value_field.value = url
-    @link_value_field.dispatchEvent(new Event("change"))
-    @link_title_field.value = title
-    @link_class_field.value = @link_type
-    @link_target_field.value = target
-    @link_object.classList.add("linked")
-    @link_object.nextElementSibling.classList.replace("disabled", "linked")
-    @link_object.nextElementSibling.removeAttribute("tabindex")
-    return
-
   # Selects the correct tab for link type and fills all fields.
   selectTab: ->
     # Creating an temporary anchor node if we are linking an Picture Ingredient.
-    if (@link_object.nodeType)
-      @$link = @createTempLink()
+    if (@link_object.getAttribute("is") == "alchemy-link-button")
+      @$link = $(@createTempLink())
     # Restoring the bookmarked selection inside the TinyMCE of an Richtext.
     else if (@link_object.node.nodeName == 'A')
       @$link = $(@link_object.node)
@@ -183,27 +164,27 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     # Checking of what kind the link is (internal, external or file).
     if @$link.hasClass('external')
       # Handles an external link.
-      tab = $('#overlay_tab_external_link')
+      tab = 'overlay_tab_external_link'
       @$external_link.val(@$link.attr('href'))
     else if @$link.hasClass('file')
       # Handles a file link.
-      tab = $('#overlay_tab_file_link')
+      tab = 'overlay_tab_file_link'
       @$file_link.select2('val', @$link[0].pathname + @$link[0].search)
     else if @$link.attr('href').match(/^#/)
       # Handles an anchor link.
-      tab = $('#overlay_tab_anchor_link')
+      tab = 'overlay_tab_anchor_link'
       @$anchor_link.select2('val', @$link.attr('href'))
     else if @$link.hasClass('internal')
       # Handles an internal link.
-      tab = $('#overlay_tab_internal_link')
+      tab = 'overlay_tab_internal_link'
       @initInternalLinkTab()
     else
       # Emit an event to allow extensions hook into the link overlay.
       @$overlay_tabs.trigger 'SelectLinkTab.Alchemy',
         link: @$link
     if tab
-      # activate the tab jquery ui 1.10 style o.O
-      @$overlay_tabs.tabs('option', 'active', $('#overlay_tabs > div').index(tab))
+      window.requestAnimationFrame =>
+        @$overlay_tabs.get(0).show(tab)
     return
 
   # Handles actions for internal link tab.
@@ -214,15 +195,15 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     # store the anchor
     @$element_anchor.val(url[1])
 
-  # Creates a temporay $('a') object that holds all values on it.
+  # Creates a temporay 'a' element that holds all values on it.
   createTempLink: ->
-    @$tmp_link = $('<a/>')
-    @$tmp_link.attr('href', @link_value_field.value)
-    @$tmp_link.attr('title', @link_title_field.value)
-    @$tmp_link.attr('data-link-target', @link_target_field.value)
-    @$tmp_link.attr('target', if @link_target_field.value == 'blank' then '_blank' else null)
-    @$tmp_link.addClass(@link_class_field.value)
-    @$tmp_link
+    tmp_link = document.createElement("a")
+    tmp_link.setAttribute('href', @link_object.linkUrl)
+    tmp_link.setAttribute('title', @link_object.linkTitle)
+    tmp_link.setAttribute('data-link-target', @link_object.linkTarget)
+    tmp_link.setAttribute('target', if @link_object.target == 'blank' then '_blank' else "")
+    tmp_link.classList.add(@link_object.linkClass) if @link_object.linkClass != ''
+    tmp_link
 
   # Validates url for beginning with an protocol.
   validateURLFormat: (url) ->
@@ -246,25 +227,3 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     else
       @$anchor_link.html("<option>#{Alchemy.t('No anchors found')}</option>")
     return
-
-  # Public class methods
-
-  # Removes link from Ingredient.
-  @removeLink = (link, parent_selector) ->
-    parent = document.querySelector(parent_selector)
-    link_value_field = parent.querySelector("[data-link-value]")
-    link_title_field = parent.querySelector("[data-link-title]")
-    link_target_field = parent.querySelector("[data-link-target]")
-    link_class_field = parent.querySelector("[data-link-class]")
-    link_value_field.value = ""
-    link_value_field.dispatchEvent(new Event("change"))
-    link_title_field.value = ""
-    link_class_field.value = ""
-    link_target_field.value = ""
-    if link.classList.contains('linked')
-      Alchemy.setElementDirty link.closest('.element-editor')
-      link.classList.replace('linked', 'disabled')
-      link.setAttribute('tabindex', '-1')
-      link.blur()
-    link.previousElementSibling.classList.remove("linked")
-    false

data/app/assets/javascripts/alchemy/alchemy.list_filter.js.coffee

@@ -19,10 +19,10 @@ class Alchemy.ListFilterHandler
     @filter_field.on 'keyup', (e) =>
       @clear.show()
       @_filter @filter_field.val()
-    @clear.click (e) =>
+    @clear.on "click", (e) =>
       e.preventDefault()
       @_clear()
-    @filter_field.focus ->
+    @filter_field.on "focus", ->
       key.setScope('list_filter')
     key 'esc', 'list_filter', =>
       @_clear()

data/app/assets/javascripts/alchemy/alchemy.preview.js.coffee

@@ -48,7 +48,7 @@ Alchemy.initAlchemyPreviewMode = ->
 
       # Mark element in preview frame as selected and scrolls to it.
       selectElement: (element) ->
-        @blurElements()
+        @blurElements(element)
         element.classList.add('selected')
         Object.assign element.style, @getStyle('selected')
         element.scrollIntoView
@@ -57,10 +57,11 @@ Alchemy.initAlchemyPreviewMode = ->
         return
 
       # Blur all elements in preview frame.
-      blurElements: ->
+      blurElements: (selectedElement) ->
         @elements.forEach (element) =>
-          element.classList.remove('selected')
-          Object.assign element.style, @getStyle('reset')
+          if element != selectedElement
+            element.classList.remove('selected')
+            Object.assign element.style, @getStyle('reset')
           return
         return
 

data/app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee

@@ -10,7 +10,7 @@ Alchemy.PreviewWindow =
     $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{@previewUrl}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
     $reload = $('#reload_preview_button')
     @_showSpinner()
-    $iframe.load =>
+    $iframe.on "load", =>
       @_hideSpinner()
     $('body').append($iframe)
     @currentWindow = $iframe
@@ -31,7 +31,7 @@ Alchemy.PreviewWindow =
     @_showSpinner()
     # We need to be sure that no load event is binded on the preview frame.
     $iframe.off('load')
-    $iframe.load (e) =>
+    $iframe.on "load", (e) =>
       @_hideSpinner()
       if callback
         callback.call(e, $iframe)
@@ -49,13 +49,13 @@ Alchemy.PreviewWindow =
 
   _hideSpinner: ->
     @spinner.stop()
-    @reload.html('<i class="icon fas fa-redo fa-fw"></i>')
+    @reload.html('<i class="icon ri-refresh-line ri-fw"></i>')
 
   _bindReloadButton: ->
     $reload = $('#reload_preview_button')
     key 'alt+r', =>
       @refresh()
-    $reload.click (e) =>
+    $reload.on "click", (e) =>
       e.preventDefault()
       @refresh()
 
@@ -71,7 +71,7 @@ Alchemy.PreviewWindow =
       null
 
   _bindSelect: ->
-    $(@select).change (e) =>
+    $(@select).on "change", (e) =>
       @previewUrl = e.target.value
       option = e.target.querySelector("option[value='#{@previewUrl}']")
       window.localStorage.setItem("alchemyPreview", option.text)

data/app/assets/javascripts/alchemy/templates/index.js

@@ -1,5 +1,3 @@
-//= require alchemy/templates/spinner
 //= require alchemy/templates/page
 //= require alchemy/templates/node_folder
-//= require alchemy/templates/node
 //= require alchemy/templates/page_folder

data/app/assets/javascripts/alchemy/templates/node_folder.hbs

@@ -1,3 +1,3 @@
 <a class="node_folder" data-record-id="{{ node.id }}" data-record-type="{{ node.type }}">
-  <i class="far fa-{{#if node.folded }}plus{{else}}minus{{/if}}-square fa-fw"></i>
+  <i class="icon ri-arrow-{{#if node.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
 </a>

data/app/assets/javascripts/alchemy/templates/page.hbs

@@ -1,6 +1,6 @@
 <div class="page-select--page">
   <div class="page-select--top">
-    <i class="icon far fa-file fa-lg"></i>
+    <i class="icon ri-file-3-line"></i>
     <span class="page-select--page-name">
       {{ page.name }}
     </span>

data/app/assets/javascripts/alchemy/templates/page_folder.hbs

@@ -1,3 +1,3 @@
-<a class="page_folder" data-page-id="{{ page.id }}">
-  <i class="far fa-{{#if page.folded }}plus{{else}}minus{{/if}}-square fa-fw"></i>
+<a class="page_folder icon_button" data-page-id="{{ page.id }}">
+  <i class="icon ri-arrow-{{#if page.folded }}right{{else}}down{{/if}}-s-line ri-fw"></i>
 </a>

data/app/assets/stylesheets/alchemy/_custom-properties.scss

@@ -0,0 +1,82 @@
+:root {
+  // Sizes
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+
+  // Font Families
+  --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
+    Terminal, monospace;
+  --font-sans: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+    "Lucida Sans", Verdana, Tahoma, sans-serif;
+
+  // Font Size - at the moment only in Pixel, because the base font size is 12px
+  --font-size_small: 12px; // 0.875rem
+  --font-size_medium: 14px; // 1rem
+  --font-size_large: 16px; // 1.25 rem
+
+  --font-weigth_normal: 500;
+  --font-weigth_bold: 700;
+
+  // border-radius
+  --border-radius_medium: 3px;
+
+  // Colors
+  --color-blue_very_light: hsl(203deg, 32%, 85%);
+  --color-blue_light: hsl(212deg, 51%, 50%);
+  --color-blue_medium: hsl(212deg, 52%, 36%);
+  --color-blue_dark: hsl(212deg, 51%, 26%);
+
+  --color-green_very_light: hsl(88deg, 47%, 88%);
+  --color-green_light: hsl(127deg, 25%, 69%);
+  --color-green_medium: hsl(127deg, 25%, 48%);
+  --color-green_dark: hsl(128deg, 32%, 26%);
+
+  --color-yellow_light: hsl(60, 81%, 92%);
+  --color-yellow_medium: hsl(56, 68%, 85%);
+  --color-yellow_dark: hsl(56, 53%, 29%);
+
+  --color-orange_medium: hsl(42deg, 100%, 74%);
+  --color-orange_dark: hsl(28deg, 77%, 68%);
+  --color-orange_very_dark: hsl(28deg, 77%, 48%);
+
+  --color-red_very_light: hsl(360deg, 47%, 88%);
+  --color-red_light: hsl(360deg, 25%, 69%);
+  --color-red_medium: hsl(360deg, 51%, 42%);
+  --color-red_dark: hsl(360deg, 51%, 25%);
+
+  --color-grey-blue_light: hsl(224deg, 23%, 60%);
+  --color-grey-blue_medium: hsl(224deg, 23%, 40%);
+  --color-grey-blue_dark: hsl(224deg, 23%, 26%);
+
+  --color-grey_light: hsl(0deg, 0%, 94%);
+  --color-grey_medium: hsl(0deg, 0%, 78%);
+  --color-grey_dark: hsl(0deg, 0%, 40%);
+  --color-grey_very_dark: hsl(0deg, 0%, 20%);
+  --color-text: hsla(224, 22.7%, 25.9%, 0.8);
+}
+
+.alchemy-light {
+  --outline-color: var(--color-orange_dark);
+
+  --font-color_failed: var(--color-red_medium);
+  --font-color_default: var(--color-text);
+
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--color-grey_light);
+  --sl-input-label-color: var(--color-text);
+
+  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
+  --file-upload_single-upload-background-color: var(--color-grey_light);
+  --file-upload_progress-track-color: var(--color-blue_very_light);
+  --file-upload_progress-indicator-color: var(--color-blue_dark);
+
+  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
+  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
+  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
+  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
+  --file-upload_progress-indicator-color-upload-finished: var(
+    --color-blue_dark
+  );
+}