colors and filters

front/js/svelte/autocomplete/Selectlist.svelte

@@ -52,9 +52,7 @@
                 on:click={(e) => select(e, suggestion)}
                 on:keypress={(e) => select(e, suggestion)}
         >
-            <span class="dropdown-item">
                {suggestion.label}
-            </span>
         </div>
     {/each}
 {/if}

front/js/svelte/common/Dropdown.svelte

@@ -8,6 +8,10 @@
         dropdownMenu.classList.remove("hide")
     }
 
+    export function close() {
+        dropdownMenu.classList.add("hide")
+    }
+
     function handleClickOutside() {
         dropdownMenu.classList.add("hide")
     }

front/js/svelte/common/Icon.svelte

@@ -109,9 +109,12 @@
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
             viewBox: "0 0 24 24",
         },
+        "arrow-left": {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
+            viewBox: "0 0 24 24",
+        },
     };
 
-
     export let width = 16;
     export let height = 16;
     export let icon = "";

front/js/svelte/content/tools/FilterFields.svelte

@@ -1,8 +1,8 @@
 <script>
     import Icon from "../../common/Icon.svelte";
     import {createEventDispatcher} from "svelte";
-    import FilterReferenceInput from "./FilterReferenceInput.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
+    import FilterReferenceInput from "./FilterReferenceInput.svelte";
 
     const dispatch = createEventDispatcher();
     export let schema;
@@ -11,53 +11,14 @@
     export let inModal;
     export let modalUrl;
 
+
     let dropdown;
     let search = "";
     let systemFieldsFiltered = systemFields;
-    if (schema.type == "collection") {
+    if (schema.type === "collection") {
         systemFieldsFiltered = systemFields.filter((f) => f.files === false);
     }
 
-    let filterableFields = [...schema.fields, ...systemFieldsFiltered].filter(
-        (f) => !["file", "json"].includes(f.info?.name ?? f.ui)
-    );
-    let selectedField;
-
-    let selectedInput = "";
-    $: operatorsFiltered = operators.filter(
-        (o) => o.uis.includes(selectedField?.info?.name) || o.uis[0] == "*"
-    );
-
-    $: selectedOperator = operatorsFiltered[0];
-
-    function addFilter(e) {
-        e.preventDefault();
-        let filterPrefix = "";
-        let filterKey;
-        if (schema.fields.find(f => f.name === selectedField.name)) {
-
-            if (selectedField.info.name == "reference" && selectedOperator.name == "eq") {
-                filterPrefix = "children." + selectedField.name + ".id";
-                filterKey = `filter[${filterPrefix}]`;
-            } else {
-                filterPrefix = "data.";
-                filterKey = `filter[${filterPrefix + selectedField.name}_${selectedOperator.name}]`;
-            }
-
-        }
-
-
-        const url = new URL(modalUrl ?? window.location.href);
-        url.searchParams.set("skip", "0");
-        url.searchParams.set(filterKey, selectedInput);
-        if (inModal) {
-            dispatch("refresh", url);
-            dropdown.hide()
-        } else {
-            window.location = url;
-        }
-    }
-
     function submitSearch(e) {
         e.preventDefault();
         let filterKeyValue = search.split("=")[0] ?? "";
@@ -79,63 +40,188 @@
         } else {
             window.location.replace(url);
         }
+        resetFilters();
     }
+
+
+    //     New Start
+    let selectedInput = null;
+    let activeField = null;
+    let activeReference = null;
+    let activeOperator = null;
+    let activeMenu = "main";
+    let activeOperators = null;
+    let dataFields = [...schema.fields, ...systemFieldsFiltered].filter(
+        (f) => !["file", "json", "reference"].includes(f.info?.name ?? f.ui)
+    );
+    let referenceFields = [...schema.fields].filter(
+        (f) => ["reference"].includes(f.info?.name ?? f.ui)
+    );
+
+    function selectField(e, field) {
+        activeField = field;
+        activeOperators = operators.filter(
+            (o) => o.uis.includes(activeField?.info?.name) || o.uis[0] === "*"
+        );
+    }
+
+    function selectReference(e, field) {
+        activeReference = field;
+        activeOperator = operators.find(o => o.name === "eq")
+    }
+
+    function applyFilter(e) {
+        e.preventDefault();
+        let filterPrefix = "";
+        let filterKey;
+        let selectedField = activeField ?? activeReference;
+        if (schema.fields.find(f => f.name === selectedField.name)) {
+            if (selectedField.info.name === "reference" && activeOperator.name === "eq") {
+                filterPrefix = "children." + selectedField.name + ".id";
+                filterKey = `filter[${filterPrefix}]`;
+            } else {
+                filterPrefix = "data.";
+                filterKey = `filter[${filterPrefix + selectedField.name}_${activeOperator.name}]`;
+            }
+
+        }
+
+        const url = new URL(modalUrl ?? window.location.href);
+        url.searchParams.set("skip", "0");
+        url.searchParams.set(filterKey, selectedInput);
+        if (inModal) {
+            dispatch("refresh", url);
+            dropdown.close()
+        } else {
+            window.location.href = url.toString();
+        }
+        resetFilters();
+    }
+
+    function resetFilters() {
+        activeField = null;
+        activeOperator = null;
+        activeMenu = "main";
+        activeReference = null;
+    }
+
 </script>
 
-<div class="mx-2 d-flex align-items-center">
-        <Dropdown bind:this={dropdown} width="300">
-            <div slot="button">
-                <Icon icon="filter"/>
-                <span class="ms-1">Filter</span>
-            </div>
 
-            <div class="px-3 py-1 d-flex align-items-center">
-                <select bind:value={selectedField} class="form-select">
-                    {#each filterableFields as field}
-                        <option value={field}>{field.label}</option>
-                    {/each}
-                </select>
-            </div>
-            <div class="px-3 py-1 d-flex align-items-center">
-                <select class="form-select" bind:value={selectedOperator}>
-                    {#each operatorsFiltered as operator}
-                        <option value={operator}>{operator.label}</option>
-                    {/each}
-                </select>
-            </div>
-            <div class="px-3 py-1 d-flex align-items-center">
-                {#if selectedField?.info?.name === "reference" && selectedOperator.name === "eq"}
-                    <FilterReferenceInput field={selectedField} bind:value={selectedInput} on:addFilter={addFilter}/>
-                {:else}
+<div>
+    <Dropdown bind:this={dropdown}>
+        <div slot="button">
+            <Icon icon="filter"/>
+            <span class="ms-1">Filter</span>
+        </div>
+        <div class:hide={activeMenu !== "main"}>
+            <button class="dropdown-item button" on:click={e => activeMenu = "byField" }>
+                Filter by field
+            </button>
+            <button class="dropdown-item button" on:click={e => activeMenu = "byReference" }>
+                Filter by Reference
+            </button>
+            <button class="dropdown-item button" on:click={e => activeMenu = "advanced" }>
+                Advanced filter
+            </button>
+        </div>
+        <div class:hide={activeMenu !== "byField"}>
+            {#if !activeField}
+                <button class="dropdown-item button" on:click={e =>   activeMenu = "main"  }>
+                    <Icon icon="arrow-left"></Icon>
+                    Back
+                </button>
+                {#each dataFields as field}
+                    <button class="dropdown-item button" on:click={e => selectField(e,field)}>
+                        {field.label}
+                    </button>
+                {/each}
+            {/if}
+
+            {#if activeField && !activeOperator}
+                <button class="dropdown-item button" on:click={e =>   activeField = null  }>
+                    <Icon icon="arrow-left"></Icon>
+                    Back
+                </button>
+                <div class="selected-filter">field: {activeField.label}</div>
+
+                {#each activeOperators as operator}
+                    <button class="dropdown-item button" on:click={e => activeOperator = operator }>
+                        {operator.label}
+                    </button>
+                {/each}
+            {/if}
+            {#if activeField && activeOperator}
+                <button class="dropdown-item button" on:click={e =>   activeOperator = null  }>
+                    <Icon icon="arrow-left"></Icon>
+                    Back
+                </button>
+                <div class="selected-filter">field: {activeField.label} operator: {activeOperator.label}</div>
+                <div class="filter-input">
                     <input
                             type="text"
                             class="form-control"
                             bind:value={selectedInput}
                     />
-                {/if}
-            </div>
-            <div class="px-3 py-1 d-flex align-items-center">
+                </div>
                 <button
-                        on:click={addFilter}
-                        class="btn btn-outline-primary"
+                        on:click={applyFilter}
+                        class="button applied-filter"
                         type="button"
                 >
                     Add filter
                 </button>
-            </div>
+            {/if}
 
-            <hr/>
-            <div><h6 class="dropdown-header">Advanced filters</h6></div>
-            <form on:submit={submitSearch}>
-                <div class="px-3 py-1 d-flex align-items-center">
-                    <input
-                            bind:value={search}
-                            type="search"
-                            class="form-control"
-                            placeholder="Advanced filters"
-                            required
-                    />
+        </div>
+        <div class:hide={activeMenu !== "byReference"}>
+            {#if !activeReference}
+                <button class="dropdown-item button" on:click={e =>   activeMenu = "main"  }>
+                    <Icon icon="arrow-left"></Icon>
+                    Back
+                </button>
+                {#each referenceFields as field}
+                    <button class="dropdown-item button" on:click={e => selectReference(e,field)}>
+                        {field.label}
+                    </button>
+                {/each}
+            {/if}
+            {#if activeReference}
+                <button class="dropdown-item button" on:click={e =>   activeReference = null  }>
+                    <Icon icon="arrow-left"></Icon>
+                    Back
+                </button>
+                <div class="selected-filter">field: {activeReference.label}</div>
+                <div class="mt-2">
+                    <FilterReferenceInput field={activeReference} bind:value={selectedInput}
+                                          on:addFilter={applyFilter}/>
                 </div>
+            {/if}
+
+
+        </div>
+        <div class:hide={activeMenu !== "advanced"}>
+            <button class="dropdown-item button" on:click={e =>   activeMenu = "main"  }>
+                <Icon icon="arrow-left"></Icon>
+                Back
+            </button>
+            <form on:submit={submitSearch}>
+                <input
+                        bind:value={search}
+                        type="search"
+                        class="mb-2 mt-2"
+                        placeholder="Advanced filters"
+                        required
+                />
+
+                <button  class="button applied-filter">
+                   Submit
+                </button>
+
             </form>
-        </Dropdown>
+
+
+        </div>
+    </Dropdown>
+
 </div>

front/js/svelte/content/tools/FilterReferenceInput.svelte

@@ -42,35 +42,37 @@
     }
 
 </script>
+<div class="reference-tags">
+    <input
+            type="search"
+            on:keyup={updateResults}
+            bind:value={search}
+            placeholder={"Search for "+field.label}
+            autocomplete="off"
+    />
 
-<input
-        type="search"
-        on:keyup={updateResults}
-        class="form-control dropdown-toggle"
-        bind:value={search}
-        placeholder={"Search for "+field.label}
-        data-bs-toggle="dropdown"
-        autocomplete="off"
-/>
+    <div class="reference-tags-results">
 
-<div class="dropdown-menu w-100">
+        {#if searchOptions}
+            {#each searchOptions as option (option.id)}
+                <div
+                        class="reference-tags-option"
+                        role="button"
+                        tabindex="0"
+                        on:click={(e) => apply(e, option)}
+                        on:keypress={(e) => apply(e, option)}
+                >
+                    {previewTitle(channel.schemas, option)}
+                </div>
 
-    {#if searchOptions}
-        {#each searchOptions as option (option.id)}
-            <div
-                    on:click={(e) => apply(e, option)}
-                    on:keypress={(e) => apply(e, option)}
-            >
-            <span class="dropdown-item">
-                {previewTitle(channel.schemas, option)}
-            </span>
-            </div>
-
-        {:else}
-
-            Start typing...
-        {/each}
-    {/if}
+            {:else}
+                <div
+                        class="start-typing">
+                    Start typing...
+                </div>
+            {/each}
+        {/if}
+    </div>
 </div>
 
 

front/js/svelte/dialog/Dialog.svelte

@@ -58,10 +58,7 @@
 </script>
 <dialog bind:this={dialogEl}>
     {#if data.schema}
-
-
         <div class="dialog-header">
-
             <button
                     type="button"
                     class="button"

front/js/svelte/dialog/DialogRecord.svelte

@@ -0,0 +1,38 @@
+<script>
+
+    import Icon from "../common/Icon.svelte";
+
+    let dialogEl;
+
+    $: data = {};
+
+    export function close(e) {
+        if (e) {
+            e.preventDefault();
+        }
+        dialogEl.close()
+    }
+
+    export function open() {
+        dialogEl.showModal()
+    }
+
+
+</script>
+<dialog bind:this={dialogEl}>
+    <div class="dialog-header">
+        <button
+                on:click|preventDefault={close}
+                type="button"
+                class="button close"
+                aria-label="Close"
+        >
+            <Icon icon="close"></Icon>
+        </button>
+    </div>
+
+    <div class="dialog-body" style="min-width: 900px">
+        <slot/>
+    </div>
+
+</dialog>

front/js/svelte/files/Preview.svelte

@@ -73,14 +73,5 @@
         border-radius: 12px;
         padding: 4px;
     }
-    .file-preview-small{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 2px;
-        border-radius: 12px;
-        padding: 4px;
-        background: var(--background);
-    }
+
 </style>

front/js/svelte/records/Edit.svelte

@@ -154,7 +154,7 @@
 <div class="record-edit">
     <div class="tools-header">
         <!--    <Manager managerRecords={recordHistory} {graph}/>-->
-        <EditHeader {schema} bind:record {isCreateMode} {graph} bind:activeContentTab/>
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
         {#if isCreateMode}
             <button
                     class="button primary btn-spinner"

front/js/svelte/records/Graph.svelte

@@ -21,19 +21,16 @@
         }
     })
 </script>
-
+<div class="editor-field">
 {#each backlinks as backlink}
     <div style="margin: 0 0 15px;position: relative;">
         <span style="
             font-size: 14px;
             margin-bottom: 5px;
             display: block;
-            position: absolute;
-            top: -9px;
-            left: 9px;
-  z-index: 9;
+
 "
-        >In <i>{backlink.field}</i></span>
+        >In <i>{backlink.field}</i> of</span>
         <PreviewReference
                 record={backlink.record}
                 hasDelete={false}
@@ -41,3 +38,4 @@
         />
     </div>
 {/each}
+</div>

front/js/svelte/records/InlineEdit.svelte

@@ -1,12 +1,14 @@
 <script>
-    import {afterUpdate, createEventDispatcher, onMount,getContext} from "svelte";
+    import {afterUpdate, createEventDispatcher, getContext, onMount} from "svelte";
 
     import {isEqual} from "lodash";
     import FormField from "./FormField.svelte";
     import FilePreview from "./FilePreview.svelte";
     import ContentTabs from "./header/ContentTabs.svelte";
-    import StatusSelect from "./header/StatusSelect.svelte";
     import ErrorAlert from "../common/ErrorAlert.svelte";
+    import EditHeader from "./header/EditHeader.svelte";
+    import axios from "axios";
+    import Title from "./header/Title.svelte";
 
     const channel = getContext("channel");
     const dispatch = createEventDispatcher();
@@ -135,7 +137,6 @@
                     resolve(null);
                 })
                 .catch(function (error) {
-                    // setOriginalContent();
                     if (error.response) {
                         if (typeof error.response.data.error === "string") {
                             errorMessage = error.response.data.error;
@@ -144,9 +145,6 @@
                         }
                     }
                     resolve(null);
-                    // msgSuccess = null;
-                    // msgError = error.response.data.error;
-                    // submitted = false;
                 });
         });
     }
@@ -154,15 +152,45 @@
 
 <svelte:window on:beforeunload={beforeUnload}/>
 
-<div class="inline-edit my-4">
+<div class="inline-edit record-edit">
+    <div class="tools-header">
+        <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>
+        {#if isCreateMode}
+            <button
+                    class="button primary btn-spinner"
+                    on:click={save}
+            >
+                            <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                            />
+                Create
+            </button>
+        {:else if hasUnsavedData}
+            <button
+                    type="button"
+                    class="button primary ms-2 btn btn-primary btn-spinner"
+                    on:click={save}
+            >
+                            <span
+                                    class="spinner-border spinner-border-sm"
+                                    role="status"
+                                    aria-hidden="true"
+                            />
+                Save
+            </button>
+        {/if}
+
+    </div>
+    <Title {schema} {record} {isCreateMode}/>
     <ErrorAlert message={errorMessage}/>
 
-    <div class=" mt-1">
+    <div class=" mt-4" style="margin-bottom:150px;position:relative;">
         <ContentTabs
                 {schema}
                 {isCreateMode}
                 bind:active={activeContentTab}
-                {record}
         />
         <FilePreview {record} {schema}/>
         <!-- <fieldset disabled="disabled"> -->
@@ -181,48 +209,5 @@
         {/each}
         <!-- </fieldset> -->
     </div>
-    <div>
-        <div class="d-flex  mt-3 align-items-center justify-content-center">
-            {#if schema.hasDrafts}
-                <StatusSelect bind:status={record.status} {schema}/>
-            {/if}
-            {#if isCreateMode}
-                <button
-                        class="ms-2 btn btn-primary btn-spinner"
-                        on:click={save}
-                >
-                    <span
-                            class="spinner-border spinner-border-sm"
-                            role="status"
-                            aria-hidden="true"
-                    />
-                    Add
-                </button>
-            {:else}
-                <button
-                        disabled={!hasUnsavedData}
-                        class="ms-2 btn btn-primary btn-spinner"
-                        on:click={save}
-                >
-                    <span
-                            class="spinner-border spinner-border-sm"
-                            role="status"
-                            aria-hidden="true"
-                    />
-                    Save
-                </button>
-            {/if}
-            <button class="ms-2 btn btn-link" on:click={cancel}>
-                cancel
-            </button>
-        </div>
-    </div>
 </div>
 
-<style>
-    .inline-edit {
-        padding: 44px;
-        background-color: #eee;
-        border-radius: 32px;
-    }
-</style>

front/js/svelte/records/elements/FieldHeader.svelte

@@ -10,7 +10,7 @@
             >{field.label}</label
             >
             {#if field.help}
-                <small class="help-text">{field.help}</small>
+                <small class="help-text light-text">{field.help}</small>
             {/if}
         </div>
         <span

front/js/svelte/records/elements/Reference.svelte

@@ -51,7 +51,6 @@
 {/if}
 <div class="inline-card-wrapper">
     <ReferenceInlineButtons
-        buttonClass="mt-2"
         recordId={null}
         schemas={collections}
         on:insert={insert}

front/js/svelte/records/elements/ReferenceInlineButtons.svelte

@@ -3,17 +3,15 @@
     import Icon from "../../common/Icon.svelte";
     import InlineEdit from "../InlineEdit.svelte";
     import Dialog from "../../dialog/Dialog.svelte";
-
+    import DialogRecord from "../../dialog/DialogRecord.svelte";
+    import axios from "axios";
     const dispatch = createEventDispatcher();
-    // export let field;
-    // export let buttonLabel = "";
-    // export let buttonClass = "";
-
     const channel = getContext("channel");
     export let schemas;
     export let recordId;
     $: showOptions = false;
     let browseModal;
+    let dialogRecord;
     let inLineCreateRecord;
 
     function openBrowseModal(e, schema) {
@@ -25,6 +23,7 @@
         e.preventDefault();
         console.log("Save inline");
         inLineCreateRecord = null;
+        dialogRecord.close()
         dispatch("save", {
             records: e.detail.records,
             after: recordId,
@@ -47,6 +46,7 @@
             .get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
             .then((response) => {
                 inLineCreateRecord = response.data;
+                dialogRecord.open()
                 showOptions = false;
             })
             .catch((error) => {
@@ -95,53 +95,31 @@
     {/if}
 {:else}
     <div style="display:flex;align-items: center;gap: 4px">
-            <button
-                    class="button"
-                    on:click={(e) => createInlineReference(e, schemas[0].name)}
-            >New
-            </button>
-            <button
-                    class="button"
-                    on:click={(e) => openBrowseModal(e, schemas[0].name)}
-            >
-                <Icon icon="magnifying-glass"/>
-            </button
-            >
+        <button
+                class="button"
+                on:click={(e) => createInlineReference(e, schemas[0].name)}
+        >New
+        </button>
+        <button
+                class="button"
+                on:click={(e) => openBrowseModal(e, schemas[0].name)}
+        >
+            <Icon icon="magnifying-glass"/>
+        </button
+        >
     </div>
 {/if}
 
-{#if inLineCreateRecord}
-    <InlineEdit
-            {...inLineCreateRecord}
-            on:cancel={(e) => (inLineCreateRecord = null)}
-            on:inlinesaved={save}
-    />
-{/if}
+<DialogRecord bind:this={dialogRecord}>
+    {#if inLineCreateRecord}
+
+        <InlineEdit
+                {...inLineCreateRecord}
+                on:cancel={(e) => (inLineCreateRecord = null)}
+                on:inlinesaved={save}
+        />
+
+    {/if}
+</DialogRecord>
 
 <Dialog bind:this={browseModal} on:insert={insert}/>
-
-<style>
-    :global(.inline-card-wrapper) {
-        display: flex;
-        flex-direction: column;
-    }
-
-    :global(.inline-card-wrapper .inline-card-button) {
-        visibility: hidden;
-    }
-
-    :global(.inline-card-wrapper .inline-card-button.is-first) {
-        visibility: visible;
-    }
-
-    :global(.inline-card-wrapper:hover .inline-card-button) {
-        visibility: visible;
-    }
-
-    .inline-card-button {
-        /* padding: 0 5px; */
-        display: inline-block;
-        z-index: 1;
-        margin: 10px auto 0;
-    }
-</style>

front/js/svelte/records/elements/ReferenceTags.svelte

@@ -114,14 +114,14 @@
                         on:click={(e) => insert(e, option)}
                         on:keypress={(e) => insert(e, option)}
                 >
-            <span class="dropdown-item">
-                {previewTitle(channel.schemas, option)}
-            </span>
+                    {previewTitle(channel.schemas, option)}
                 </div>
 
             {:else}
-
-                Start typing...
+                <div
+                        class="start-typing">
+                    Start typing...
+                </div>
             {/each}
         {/if}
         {#if search }
@@ -132,9 +132,7 @@
                     on:click={(e) => saveNew(e,search)}
                     on:keypress={(e) => saveNew(e,search)}
             >
-                <span class="dropdown-item">
-                    Add "{search}"
-                </span>
+                Add "{search}"
             </div>
         {/if}
     </div>
@@ -143,7 +141,7 @@
 {#if references.length > 0}
     <div style="display: flex;align-items: center;gap: 4px">
         {#each references as record (record.id)}
-            <span class="autocomplete-selected-value">
+            <span class="reference-tags-selected-value">
                  <a
                          class="record-title"
                          href="{channel.lucentUrl}/records/{record.id}"

front/js/svelte/records/elements/Slug.svelte

@@ -20,7 +20,7 @@
             autocomplete="off"
             readonly={field.readonly && !isCreateMode}
     />
-    <div class="system-help-text">
+    <div class="system-help-text light-text">
         Leave this empty to autogenerate from <i>{field.source}</i>
     </div>
     {#if errorMessage}

front/js/svelte/records/header/EditHeader.svelte

@@ -24,7 +24,7 @@
 
 <div style="display: flex;align-items: center; gap:10px;">
     {#if !isCreateMode}
-        <Dropdown orientation="right">
+        <Dropdown >
             <div slot="button">
                 <Icon icon="ellipsis"/>
             </div>

front/sass/_autocomplete.scss

@@ -4,6 +4,12 @@
   overflow: visible;
   .autocomplete-option {
     cursor: pointer;
+    font-size: 14px;
+    padding: 3px 10px;
+    &:hover {
+      background: var(--p40);
+      border-radius: 12px;
+    }
   }
   &:focus-within {
     .autocomplete-results{
@@ -17,19 +23,17 @@
   font-size: 13px;
   margin-top: 10px;
   border-radius: 12px;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p30);
   padding: 3px 10px;
   display: inline-flex;
   justify-content: center;
   gap: 4px;
   line-height: 22px;
+  &:hover {
+    background: var(--p40);
+  }
 }
 
-.autocomplete-selected-value:hover {
-  opacity: .8;
-  background-color: #eee;
-}
 .autocomplete-results {
   display: none;
   flex-direction: column;
@@ -38,10 +42,10 @@
   position: absolute;
   border-radius: 12px;
   z-index: 20;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p30);
+  //border: 1px solid var(--p40);
   transition: 600ms;
   flex-grow: 1;
   top: 45px;
-  min-width: max-content;
+  width: 100%;
 }

front/sass/_button.scss

@@ -1,35 +1,49 @@
 .button{
   border-radius: 12px;
-  background: var(--background-button);
+  background: var(--p20);
   padding: 3px 10px;
   cursor: pointer;
-  border: 1px solid var(--border-color);
+  border: 0px solid var(--p30);
   font-size: 14px;
   min-height: 27px;
   display: flex;
   align-items: center;
   gap: 4px;
+  color: var(--text);
 
-  &.secondary{
-    background: var(--secondary);
-  }
-  &.primary{
-    background: var(--primary);
-  }
 
   &:focus {
-    filter: brightness(94%);
   }
 
   &:hover {
-    filter: brightness(94%);
+    background: var(--p30);
+  }
+
+  &:active {
+    background: var(--p50)!important;
+    box-shadow: none;
   }
   &.active {
-    filter: brightness(74%);
+    background: var(--p30);
   }
 
+  &.secondary{
+    background: red;
+  }
+  &.primary{
+    background: var(--p70);
+    color: var(--p10);
+
+    &:hover {
+      background: var(--p90);
+    }
+  }
+
+
   &[disabled] {
     pointer-events: none;
+    opacity: .7;
+    color: var(--text);
   }
 }
 
@@ -42,6 +56,8 @@
     font-size: 14px;
     line-height: 14px;
     font-weight: normal;
+    background: var(--p80)!important;
+    color: var(--p10);
   }
 }
 
@@ -50,4 +66,25 @@
   padding: 0;
   background: transparent;
   cursor: pointer;
+}
+
+
+.spinner-border {
+  width: 12px;
+  height: 12px;
+  border: 2px solid  var(--p10);
+  border-bottom-color: var(--p30);
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

front/sass/_checkbox.scss

@@ -1,9 +1,9 @@
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) {
     .checkbox-wrapper input[type=checkbox] {
-        --active-inner: #fff;
-        --focus: 2px rgba(39, 94, 254, .3);
-        --border-hover: #275EFE;
+        --active-inner: var(--p10);
+        --focus: 2px var(--p30);
+        --border-hover: var(--p30);
         --disabled: #F6F8FF;
         --disabled-inner: #E1E6F9;
         -webkit-appearance: none;
@@ -15,8 +15,8 @@
         position: relative;
         margin: 0;
         cursor: pointer;
-        border: 1px solid var(--bc, var(--border-color));
-        background: var(--b, var(--background));
+        border: 1px solid var(--bc, var(--p30));
+        background: var(--b, var(--p10));
         transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
     }
     .checkbox-wrapper input[type=checkbox]:after {
@@ -28,8 +28,8 @@
         transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
     }
     .checkbox-wrapper input[type=checkbox]:checked {
-        --b: var(--secondary);
-        --bc: var(--secondary);
+        --b: var(--p40);
+        --bc: var(--p40);
         --d-o: .3s;
         --d-t: .6s;
         --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
@@ -41,7 +41,7 @@
     }
     .checkbox-wrapper input[type=checkbox]:disabled:checked {
         --b: var(--disabled-inner);
-        --bc: var(--border-color);
+        --bc: var(--p40);
     }
     .checkbox-wrapper input[type=checkbox]:disabled + label {
         cursor: not-allowed;
@@ -95,8 +95,8 @@
 }
 
 .checkbox-wrapper input[type=checkbox]:indeterminate {
-    --b: var(--secondary);
-    --bc: var(--secondary);
+    --b: var(--p40);
+    --bc: var(--p40);
     --d-o: .3s;
     --d-t: .6s;
     --d-t-e: cubic-bezier(.2, .85, .32, 1.2);

front/sass/_codemirror.scss

@@ -1,5 +1,19 @@
 .is-editable-false{
     .cm-content{
-        background-color: #f5f5f5;
+        background-color: var(--p10);
     }
+}
+.cm-focused{
+
+    .cm-content{
+        background-color: var(--p10);
+    }
+}
+
+.cm-content{
+    background-color: var(--p20);
+}
+
+.cm-activeLine{
+    background-color: var(--p20)!important;
 }

front/sass/_dialog.scss

@@ -18,11 +18,12 @@ dialog {
   background-color: #fff;
   padding: 34px;
   border: none;
-  border-radius: 5px;
+  border-radius: 12px;
   overflow: auto;
   max-height: 96vh;
+  box-shadow: none;
   //position: relative;
-z-index: 2;
+
   .close {
     position: absolute;
     top: 10px;

front/sass/_dropdown.scss

@@ -19,13 +19,13 @@
   position: absolute;
   border-radius: 12px;
   z-index: 20;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p20);
   transition: 600ms;
   flex-grow: 1;
   top: 35px;
   min-width: max-content;
 
+
   &.orientation-right {
     right: 0;
   }
@@ -42,8 +42,6 @@
   align-items: center;
   gap: 3px;
   text-wrap: nowrap;
-
-
 }
 
 .dropdown-header {
@@ -53,11 +51,16 @@
 .dropdown-item {
   font-size: 14px;
   padding: 3px 10px;
-  &:hover{
-    background: var(--background);
-    filter: brightness(97%);
+
+  &:hover {
+    background: var(--p30);
     border-radius: 12px;
+
+    button {
+      background: var(--p30);
+    }
   }
+
   .button-icon {
     flex-shrink: 0;
 

front/sass/_form.scss

@@ -7,24 +7,35 @@ label {
 
 input[type=text],input[type=number],input[type=search],textarea{
   width: 100%;
-}
-
-input[type=text],input[type=number],input[type=search],textarea{
-  background: var(--input-bg);
-  border: 1px solid var(--border-color);
+  background: var(--p20);
+  border: 1px solid var(--p50);
   border-radius: 5px;
   padding: 5px 7px;
   font-size: 16px;
-  filter: brightness(95%);
-}
-input[type=text]:focus,textarea:focus{
-  filter: brightness(101%);
+  &:focus{
+    background: var(--p10);
+
+  }
 }
 
 textarea{
   resize: none;
 }
 
+select{
+  width: 100%;
+  background: var(--p20);
+  border: 1px solid var(--p50);
+  border-radius: 5px;
+  padding: 5px 7px;
+  font-size: 16px;
+  &:focus{
+    background: var(--p10);
+
+  }
+}
+
+
 .htmx-indicator {
   display: none;
 }

front/sass/_layout.scss

@@ -5,13 +5,14 @@
 }
 
 .main-content {
-  width: 100%;
   position: relative;
-
+  width: fit-content;
+  min-width: 900px;
 }
 
 .main-wrapper {
   display: flex;
+  justify-content: center;
   gap: 40px;
   padding: 20px;
   position: relative;

front/sass/_notice.scss

@@ -1,32 +1,29 @@
 .notice {
-    background-color: var(--background);
-    padding: 25px 14px 14px;
+    background-color: var(--p20);
+    padding:  14px;
     margin: 2rem 0;
-    filter: brightness(1.03);
     position: relative;
     font-size: 16px;
     line-height: 24px;
-    border: 3px solid var(--border-color);
+    border-radius: 12px;
+    //border: 3px solid var(--border-base);
 }
 
 .notice .title {
     content: "NOTE";
-    position: absolute;
-    background: var(--background);
-    min-width: 90px;
-    border: 3px solid var(--border-color);
-    color: var(--text);
+    //position: absolute;
+    border-radius: 12px;
     display: block;
-    text-align: center;
-    left: 14px;
-    top: -18px;
-    padding: 2px 10px;
     font-weight: bold;
 }
 
 .notice.success{
-    border-color:  var(--success);
+    border-color:  green;
     & .title{
-        border-color:  var(--success);
+        border-color:  green;
     }
+}
+
+.notice.notice-error{
+    background: var(--err10);
 }

front/sass/_pagination.scss

@@ -14,9 +14,11 @@
       font-size: 14px;
       border-radius: 12px;
       padding: 4px 18px;
-      background: var(--background);
+      background: var(--p20);
 
-      filter: brightness(90%);
+      &:hover{
+        background: var(--p30);
+      }
     }
 
 
@@ -27,7 +29,7 @@
 
     &.active {
       span{
-        background: var(--secondary);
+        background: var(--p30);
       }
 
 

front/sass/_preview.scss

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  background: var(--background-2);
+  background: var(--p10);
   border-radius: 12px;
   .image{
 
@@ -18,19 +18,38 @@
   }
 
   &:hover{
-    background: var(--background-3);
+    background: var(--p30);
     .trash-action{
       display: block;
     }
   }
 }
-.preview-reference{
-  background: var(--background-2);
-  padding: 10px 20px;
-  margin-bottom: 4px;
+
+.file-preview-small{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  border-radius: 12px;
+  padding: 4px;
+  //background: var(--p10);
 }
+
+
+.preview-reference{
+  background: var(--p10);
+  padding: 10px 20px;
+}
+
+.sortable-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
 .sortable-ghost{
-  border: 2px dashed var(--primary);
+  border: 2px dashed var(--p60);
 }
 
 .sortable-drag { opacity: 0 !important; } .sortable-ghost { opacity: 1 !important; }

front/sass/_record-edit.scss

@@ -2,7 +2,7 @@
   position: relative;
 
   .invalid-feedback {
-    color: var(--error);
+    color: var(--text-error);
     font-size: 15px;
     line-height: 20px;
     margin-top: 10px;
@@ -33,17 +33,23 @@
   z-index: 20;
   padding: 10px;
   border-radius: 12px;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p20);
 }
 
 .editor-field {
-  background: var(--background-stack);
+  background: var(--p20);
   padding: 18px;
   position: relative;
   border-radius: 12px;
   margin: 6px 0;
   border-color: transparent;
+
+  .button{
+    background: var(--p30);
+    &:hover{
+      background: var(--p40);
+    }
+  }
 }
 
 .field-header {
@@ -71,7 +77,6 @@
 
   .help-text {
     font-size: 14px;
-    opacity: .7;
     line-height: 14px
   }
 
@@ -83,7 +88,6 @@
 
 .system-help-text {
   font-size: 14px;
-  opacity: .7;
   line-height: 14px;
   margin-top: 10px;
 }

front/sass/_reference-tags.scss

@@ -1,34 +1,42 @@
 .reference-tags {
   position: relative;
   z-index: 20;
+
   .reference-tags-option {
     cursor: pointer;
+    font-size: 14px;
+    padding: 3px 10px;
+
+    &:hover {
+      background: var(--p40);
+      border-radius: 12px;
+    }
   }
+
   &:focus-within {
-    .reference-tags-results{
+    .reference-tags-results {
       display: flex;
     }
   }
 
-
 }
+
 .reference-tags-selected-value {
   font-size: 13px;
   margin-top: 10px;
   border-radius: 12px;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p30);
   padding: 3px 10px;
   display: inline-flex;
   justify-content: center;
   gap: 4px;
   line-height: 22px;
+
+  &:hover {
+    background: var(--p40);
+  }
 }
 
-.reference-tags-selected-value:hover {
-  opacity: .8;
-  background-color: #eee;
-}
 .reference-tags-results {
   display: none;
   flex-direction: column;
@@ -37,10 +45,16 @@
   position: absolute;
   border-radius: 12px;
   z-index: 20;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p30);
+  //border: 2px solid var(--background-2);
   transition: 600ms;
   flex-grow: 1;
   top: 45px;
-  min-width: max-content;
+  width: 100%;
+
+  .start-typing {
+    font-style: italic;
+    font-size: 13px;
+  }
+
 }

front/sass/_sidebar.scss

@@ -1,24 +1,22 @@
 .sidebar-top{
-
+  border: 0px solid var(--p30);
   font-size: 18px;
   padding: 20px 20px ;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p20);
   margin-bottom: 15px;
   border-radius: 12px;
 }
 
 .sidebar {
-  border: 0px solid var(--border-color);
+  //border: 1px solid var(--border-context);
   border-radius: 12px;
   font-size: 15px;
   line-height: 28px;
   padding: 20px;
-  background: var(--background);
-  filter: brightness(97%);
+  background: var(--p20);
   display: flex;
   flex-direction: column;
   gap: 3px;
@@ -29,17 +27,15 @@
   cursor: pointer;
   justify-content: space-between;
   align-items: center;
-  background: var(--background);
+  background: var(--p30);
   font-size: 16px;
   padding: 3px 12px 6px;
   color: var(--text);
-  filter: brightness(94%);
   border: none;
-  //border-bottom: 0px solid var(--border-color);
   border-radius: 12px;
 
   &:hover {
-    background: var(--secondary);
+    background: var(--p40);
   }
 
   &:first-child {
@@ -57,7 +53,6 @@
   font-size: 14px;
   padding: 3px 12px;
   text-decoration: none;
-  border-bottom: 0px solid var(--border-color);
   transition: 600ms;
   border-radius: 12px;
   &:last-child {
@@ -65,11 +60,11 @@
   }
 
   &:hover {
-    background: var(--secondary);
+    background: var(--p30);
   }
 
   &.active {
-    background: var(--secondary);
+    background: var(--p40);
   }
 }
 
@@ -82,10 +77,9 @@
 .top-nav-item{
   border-radius: 12px;
   font-size: 14px;
-  filter: brightness(97%);
-  background: var(--background);
+  background: var(--p20);
   padding: 3px 10px ;
   &:hover {
-    background: var(--secondary);
+    background: var(--p30);
   }
 }

front/sass/_switch.scss

@@ -2,7 +2,7 @@ input.switch {
   -webkit-appearance: none;
   width: 34px;
   height: 18px;
-  border: 2px solid var(--border-color);
+  border: 1px solid var(--p40);
   position: relative;
   border-radius: 50px;
   box-sizing: content-box;
@@ -18,17 +18,17 @@ input.switch::after {
   content: " ";
   width: 14px;
   height: 14px;
-  background: var(--border-color);
-  box-shadow: inset 0 0 0px 1px var(--border-color);
+  background: var(--p40);
+  box-shadow: inset 0 0 0px 1px var(--p40);
   position: absolute;
   border-radius: 50px;
 }
 
 input.switch:checked {
-  background: var(--secondary);
+  background: var(--p50);
 }
 
 input.switch:checked::after {
   left: calc(100% - 17px);
-  background: var(--background);
+  background: var(--p10);
 }

front/sass/_table.scss

@@ -1,27 +1,44 @@
 .table {
     min-width: 600px;
     overflow: auto;
-    border-radius: 12px;
-    padding: 20px;
-    background: var(--background);
-    filter: brightness(97%);
+    background: var(--p20);
+    padding: 1px;
     font-size: 14px;
+    border-radius: 12px;
     table {
+        background: var(--p20);
         width: 100%;
+        border-collapse:separate;
+        border: none;
+        border-spacing: 0;
+    }
+    thead{
+        border-radius: 12px;
+        tr{
+            border-radius: 12px;
+        }
 
     }
+
     th {
         font-size: 14px;
         font-weight: normal;
         white-space: nowrap;
         max-width: 400px;
+        border: none;
+        background: var(--p20);
         text-align: left;
         padding: 8px 16px;
-        background: var(--background);
-        filter: brightness(90%);
+
         &.is-sort {
            font-weight: 700;
         }
+        &:first-child{
+            border-radius: 12px 0 0 0 ;
+        }
+        &:last-child{
+            border-radius: 0  12px 0  0;
+        }
     }
 
     td {
@@ -30,7 +47,7 @@
         max-width: 400px;
         height: 48px;
         padding: 4px 16px;
-
+        border: none;
         overflow: hidden;
 
 
@@ -39,7 +56,7 @@
         //}
 
         .status{
-            color:var(--accent);
+            color:var(--text);
             font-size: 80%;
         }
         .row-name{
@@ -56,16 +73,21 @@
             line-height: 14px;
         }
     }
-    tr {
-        background: var(--background);
-        &:has(input:checked){
-            filter: brightness(90%);
-        }
-        &:hover {
-            box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.1);
+    tbody{
+        tr {
+            border-radius: 12px;
+            background: var(--p10);
+            border: none;
+            &:has(input:checked){
+                background: var(--p30);
+            }
+            &:hover{
+                background: var(--p20);
+            }
         }
     }
 
+
     tr:nth-child(odd) {
         //background-color: #f9f9f9;
     }

front/sass/_tabs.scss

@@ -6,6 +6,5 @@
   .tab{
     list-style: none;
 
-
   }
 }

front/sass/_toolbar.scss

@@ -7,14 +7,36 @@
 
     input.search{
         border-radius: 12px;
-        background: var(--background);
-        padding: 3px 10px;
+        background: var(--p20);
+        padding: 4px 10px;
         cursor: pointer;
-        filter: brightness(97%);
         border: none;
         font-size: 14px;
     }
 
+
+    .selected-filter{
+        font-size: 13px;
+        border-radius: 12px;
+        margin: 2px 0;
+        background: var(--p30);
+        padding: 3px 10px;
+        display: flex;
+        gap: 4px;
+        line-height: 22px;
+    }
+
+    .filter-input{
+
+        margin: 10px 0 ;
+        input{
+            font-size: 13px;
+        }
+    }
+
+    .applied-filter{
+        background: var(--p30);
+    }
 }
 .toolbar-filters{ display: flex;
     align-items: center;
@@ -28,7 +50,7 @@
     .applied-filter {
         font-size: 13px;
         border-radius: 12px;
-        background: var(--background);
+        background: var(--p20);
         padding: 3px 10px;
         display: flex;
         justify-content: center;
@@ -37,7 +59,6 @@
     }
 
     .applied-filter:hover {
-        opacity: .8;
-        background-color: #eee;
+        background-color: var(--p30);
     }
-}
+}

front/sass/_typography.scss

@@ -31,26 +31,12 @@
     }
 }
 
-.title-separator{
-    font-size: 20px;
-    text-align: center;
-    padding: 30px 0 10px;
-    margin-bottom: 30px;
-    position: relative;
-    border-bottom: 1px solid var(--border-color);
-    //&:after {
-    //    position: absolute;
-    //    left: 0;
-    //    right: 0;
-    //    top: 70px;
-    //    margin: auto;
-    //    display: block;
-    //    width: 270px;
-    //    border-bottom: 1px solid var(--border-color);
-    //    content: "";
-    //}
-}
 .lx-small-text {
     font-size: 12px;
     line-height: 15px;
+
 }
+
+.light-text{
+    color: var(--text-light);
+}

front/sass/app.scss

@@ -1,138 +1,35 @@
-// Include any default variable overrides here (though functions won't be available)
 
-/* SCSS HEX */
-$green-crayola: #0dab76ff;
-$green-pigment: #139a43ff;
-$lincoln-green: #0b5d1eff;
-$forest-green-traditional: #053b06ff;
-$black: #000000ff;
-$dark: #000000ff;
-$white: #ffffff;
-$light: #eee;
-$danger: red;
-
-/* SCSS Gradient */
-$gradient-top: linear-gradient(
-                0deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-right: linear-gradient(
-                90deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-bottom: linear-gradient(
-                180deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-left: linear-gradient(
-                270deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-top-right: linear-gradient(
-                45deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-bottom-right: linear-gradient(
-                135deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-top-left: linear-gradient(
-                225deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-bottom-left: linear-gradient(
-                315deg,
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-$gradient-radial: radial-gradient(
-                #0dab76ff,
-                #139a43ff,
-                #0b5d1eff,
-                #053b06ff,
-                #000000ff
-);
-
-$primary: #5b86be;
-$secondary: #d9cca1;
-$success: #80c671;
-$background: #f4f6fa;
-
-$table-striped-bg-factor: 0.03;
-$dropdown-bg: rgb(206, 223, 210);
-
-
-//https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu
-$themes: (
-        light: (
-                text: #04060b,
-                background: #f4f6fa,
-                primary: #5b86be,
-                secondary: #d9cca1,
-                accent: #80c671,
-        ),
-        dark: (
-                text: #f4f6fb,
-                background: #05070a,
-                primary: #416ca4,
-                secondary: #5e5126,
-                accent: #488e39,
-        ),
-);
 :root {
-  --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
-  --linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
-  --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
-  --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
-  --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
-  --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
-  --border-color: #cecece;
-  --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
-  --main-font-color: #444;
-  --input-bg: rgb(245, 245, 249);
-  --text: #010b05;
-  --background: #f7fefa;
-  --background-stack: #f0f6f3;
-  --background-2: #E8EBEAFF;
-  --background-3: #C2C7C5FF;
-  --background-button: #ddd;
-  --primary: #1ce776;
-  --secondary: #7bc8f1;
-  --accent: #5086ed;
-  --success: #80c671;
-  --error: red;
 
+  --p10: #f4f9ff;
+  --p20: #eaf1f9;
+  --p30: #b3ceff;
+  --p40: #8db5ff;
+  --p50: #70a2ff;
+  --p60: #679cff;
+  --p70: #4284ff;
+  --p80: #1c6bff;
+  --p90: #002b7a;
+  --p100: #000C23;
+
+
+
+  --err10: #ffb9d0;
+  --err20: #ff9bb3;
+  --err30: #fe7e97;
+  --err40: #de617b;
+  --err50: #be4461;
+  --err80: #61001a;
+  --err90: #560012;
+
+  --grey-dark: #424656;
+  --grey-light: #a6abbd;
+
+  --text: var(--p100);
+  --text-light: var(--grey-dark);
+  --text-error: var(--err50);
+
+  --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
 }
 
 
@@ -163,8 +60,14 @@ $themes: (
 @import "./reference-tags";
 
 body {
-  background-color: var(--background);
+  background-color: var(--p10);
   font-family: var(--main-font), sans-serif;
+  color: var(--text);
+
+  :focus {
+    outline: none;
+    box-shadow: 0 0 1px 2px var(--p70);
+  }
 }
 
 .btn-spinner .spinner-border {
@@ -185,25 +88,6 @@ a {
   text-decoration: none;
 }
 
-.spinner-border {
-  width: 9px;
-  height: 9px;
-  border: 2px solid #FFF;
-  border-bottom-color: #FF3D00;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 
 .lucent-component {
   position: relative;