cronapp-framework-js 2.9.1 → 2.9.2-SP.10

package/css/themes/custom/material/custom-material.css

@@ -266,6 +266,8 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
+
     /* Components - Button */
     --btnDefault: var(--colorDefault40, #3b448e);
     --btnPrimary: var(--colorPrimary40, #5665be);
@@ -282,7 +284,7 @@
     --textColorDefault: var(--textColorDefault40, #ffffff);
     --textColorPrimary: var(--textColorPrimary40, #ffffff);
     --textColorSuccess: var(--textColorSuccess40, #ffffff);
-    --textColorCalm: var(--textColorDefault40, #ffffff);
+    --textColorCalm: var(--textColorCalm40, #ffffff);
     --textColorWarning: var(--textColorWarning40, #ffffff);
     --textColorDanger: var(--textColorDanger40, #ffffff);
     --textColorLight: var(--textColorLight40, #000000);
@@ -290,6 +292,18 @@
     --textColorRoyal: var(--textColorRoyal40, #ffffff);
     --textColorDark: var(--textColorDark40, #ffffff);
 
+    --borderBtnLink: transparent;
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: transparent;
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: transparent;
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
+
     /* Components - Text color */
     --colorDefault: var(--colorDefault40, #3b448e);
     --colorPrimary: var(--colorPrimary40, #5665be);
@@ -314,18 +328,40 @@
     --checkboxRoyal: var(--colorRoyal40, #886aea);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: transparent;
+    --borderCheckboxPrimary: transparent;
+    --borderCheckboxSuccess: transparent;
+    --borderCheckboxCalm: transparent;
+    --borderCheckboxWarning: transparent;
+    --borderCheckboxDanger: transparent;
+    --borderCheckboxLight: transparent;
+    --borderCheckboxStable: transparent;
+    --borderCheckboxRoyal: transparent;
+    --borderCheckboxDark: transparent;
+
     /* Components - Combobox */
-    --comboboxDefault: var(--colorDefault40, #3b448e);
+    --comboboxDefault: var(--backgroundColor50, #d3d3d3);
     --comboboxPrimary: var(--colorPrimary40, #5665be);
     --comboboxSuccess: var(--colorSuccess40, #257d25);
-    --comboboxCalm: var(--colorDefault40, #3b448e);
+    --comboboxCalm: var(--colorCalm40, #3b448e);
     --comboboxWarning: var(--colorWarning40, #f0ad4e);
     --comboboxDanger: var(--colorDanger40, #ce3a36);
-    --comboboxLight: var(--colorLight50, #d7d7d7);
-    --comboboxStable: var(--colorStable50, #d9d9d9);
+    --comboboxLight: var(--colorLight40, #ffffff);
+    --comboboxStable: var(--colorStable40, #f8f8f8);
     --comboboxRoyal: var(--colorRoyal40, #886aea);
     --comboboxDark: var(--colorDark40, #444444);
 
+    --borderComboboxDefault: var(--backgroundColor60, #b1b1b1);
+    --borderComboboxPrimary: var(--colorPrimary50, #4b58a6);
+    --borderComboboxSuccess: var(--colorSuccess50, #2db353);
+    --borderComboboxCalm: var(--colorCalm50, #0fa9d5);
+    --borderComboboxWarning: var(--colorWarning50, #dfb000);
+    --borderComboboxDanger: var(--colorDanger50, #d13e33);
+    --borderComboboxLight: var(--colorLight50, #dfdfdf);
+    --borderComboboxStable: var(--colorStable50, #d9d9d9);
+    --borderComboboxRoyal: var(--colorRoyal50, #775dcd);
+    --borderComboboxDark: var(--colorDark50, #3c3c3c);
+
     /* Components - Radio input */
     --optionDefault: var(--colorDefault40, #3b448e);
     --optionPrimary: var(--colorPrimary40, #5665be);
@@ -338,17 +374,41 @@
     --optionRoyal: var(--colorRoyal40, #886aea);
     --optionDark: var(--colorDark40, #444444);
 
+    --borderOptionDefault: transparent;
+    --borderOptionPrimary: transparent;
+    --borderOptionSuccess: transparent;
+    --borderOptionCalm: transparent;
+    --borderOptionWarning: transparent;
+    --borderOptionDanger: transparent;
+    --borderOptionLight: transparent;
+    --borderOptionStable: transparent;
+    --borderOptionRoyal: transparent;
+    --borderOptionDark: transparent;
+
     /* Components - Panel */
-    --panelDefault: var(--colorDefault40, #3b448e);
-    --panelPrimary: var(--colorPrimary40, #5665be);
+    --panelDefault: var(--colorPrimary40, #5665be);
+    --panelPrimary: var(--colorDefault40, #3b448e);
     --panelSuccess: var(--colorSuccess10, #d6e0d6);
     --panelCalm: var(--colorDefault10, #d8d9e3);
     --panelWarning: var(--colorWarning10, #fbe9da);
     --panelDanger: var(--colorDanger10, #f1d8d7);
     --panelLight: var(--colorLight50, #dfdfdf);
     --panelStable: var(--colorStable50, #d9d9d9);
-    --panelRoyal: var(--colorRoyal40, #886aea);
-    --panelDark: var(--colorDark40, #444444);
+    --panelRoyal: var(--colorRoyal50, #775dcd);
+    --panelDark: var(--colorDark50, #3c3c3c);
+
+    --borderPanelDefault: transparent;
+    --borderPanelPrimary: var(--colorDefault40, #3b448e);
+    --borderPanelSuccess: var(--colorSuccess20, #b0c4b0);
+    --borderPanelCalm: var(--colorDefault20, #b3b5ca);
+    --borderPanelWarning: var(--colorWarning20, #f7d7b7);
+    --borderPanelDanger: var(--colorDanger20, #e6b3b2);
+    --borderPanelLight: var(--colorLight60, #bbbbbb);
+    --borderPanelStable: var(--colorStable60, #b6b6b6);
+    --borderPanelRoyal: var(--colorRoyal60, #644eab);
+    --borderPanelDark: var(--colorDark60, #323232);
+
+    /* === End - Variables used exclusively in the color palette property === */
 }
 
 .h1,
@@ -421,6 +481,12 @@ label {
     box-shadow: none;
 }
 
+.cardinput {
+    padding: 0;
+    border: 0;
+}
+
+.cardinput,
 .k-autocomplete.k-state-focused,
 .k-dropdown-wrap.k-state-focused,
 .k-multiselect.k-header.k-state-focused,
@@ -863,12 +929,7 @@ cron-calendar.k-calendar .k-header,
 }
 
 cron-calendar.k-widget {
-    border-color: transparent;
-}
-
-.k-calendar .k-content {
     border: 1px solid var(--colorDefault40, #2f2f2f);
-    width: calc(100% - 1px);
 }
 
 .k-calendar .k-content th {
@@ -902,11 +963,7 @@ td.k-state-focused.k-state-selected {
 }
 
 .k-calendar .k-today.k-state-selected.k-state-hover {
-    background-color: var(--colorDefault60, #3e3e3e);
-    color: var(--textColorDefault40, #ffffff);
-}
-
-.k-calendar .k-state-selected.k-state-hover .k-link {
+    background: transparent;
     color: var(--textColorDefault40, #ffffff);
 }
 
@@ -914,7 +971,8 @@ td.k-state-focused.k-state-selected {
     color: var(--textColorDefault40, #ffffff);
 }
 
-.k-grid-edit-row .k-textbox, .k-grid-edit-row .text-box{
+.k-grid-edit-row .k-textbox,
+.k-grid-edit-row .text-box {
     border: 0;
     border-bottom: 1px solid;
 }
@@ -978,22 +1036,21 @@ div[data-component^='crn-textinputicon'] .k-button {
     color: var(--textColorSuccess40, #ffffff);
 }
 
-/* crn-enterprise-combobox-multiple - Default */
+/* crn-enterprise-combobox-multiple */
 
 .k-button:before,
 .combobox-default .k-button:before {
     background: var(--backgroundColor50, #dfdfdf);
 }
 
-.k-multiselect .k-button.k-state-hover,
 .k-multiselect .k-button,
-.combobox-default .k-multiselect .k-button.k-state-hover,
 .combobox-default .k-multiselect .k-button {
     border-color: var(--backgroundColor60, #bbbbbb);
     background: var(--backgroundColor50, #dfdfdf);
     color: var(--textColor40, #393939);
 }
 
+.k-multiselect .k-button.k-state-hover,
 .k-multiselect-wrap .k-button.k-state-hover .k-select,
 .k-multiselect-wrap .k-button:hover,
 .combobox-default .k-multiselect-wrap .k-button.k-state-hover .k-select,
@@ -1008,11 +1065,48 @@ div[data-component^='crn-textinputicon'] .k-button {
     box-shadow: inset 0 0 10px 3px var(--backgroundColor70, #8c8c8c);
 }
 
-.k-dropdown-wrap.k-state-default,
-.k-header,
-.k-pager-wrap,
-.k-grid-toolbar ,
-.k-grid-edit-row>td>.k-widget{
+.combobox-default .k-multiselect .k-button {
+    background: var(--colorDefault40, #3b448e);
+    border-color: transparent;
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.combobox-default .k-multiselect .k-button.k-state-hover,
+.combobox-default .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-default .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDefault70, #343c7c);
+    border-color: transparent;
+}
+
+.combobox-default .k-multiselect .k-button:active {
+    color: var(--textColorDefault40, #ffffff);
+    box-shadow: inset 0 0 10px 3px var(--colorDefault50, #343c7c);
+}
+
+.combobox-info .k-multiselect .k-button {
+    background: var(--colorDefault40, #3b448e);
+    border-color: transparent;
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.combobox-info .k-multiselect .k-button.k-state-hover,
+.combobox-info .k-multiselect-wrap .k-button.k-state-hover .k-select,
+.combobox-info .k-multiselect-wrap .k-button:hover {
+    color: var(--textColorDefault40, #ffffff);
+    background: var(--colorDefault70, #343c7c);
+    border-color: transparent;
+}
+
+.combobox-info .k-multiselect .k-button:active {
+    color: var(--textColorDefault40, #ffffff);
+    box-shadow: inset 0 0 10px 3px var(--colorDefault50, #343c7c);
+}
+
+.k-edit-form-container .k-dropdown-wrap,
+.k-window-titlebar,
+.k-grid-toolbar,
+.k-grid-edit-row>td>.k-widget {
     background: transparent;
 }
 
@@ -1039,4 +1133,14 @@ div[data-component^='crn-textinputicon'] .k-button {
 .k-scheduler-navigation .k-nav-next.k-state-hover .k-link span,
 .k-scheduler-navigation .k-nav-prev.k-state-hover .k-link span {
     color: var(--textColorPrimary40, #ffffff);
+}
+
+.k-edit-form-container .k-edit-buttons,
+.k-window,
+.k-edit-buttons {
+    background: #ffffff;
+}
+
+.k-edit-form-container .k-textbox {
+    border-width: 0 0 1px 0;
 }

package/css/themes/custom/theme-general/button.css

@@ -79,6 +79,8 @@ fieldset[disabled] .btn {
 }
 
 /* Primary */
+.k-scheduler-edit-form .k-edit-field .k-button,
+.k-edit-form-container .k-edit-buttons .k-primary,
 .k-dialog-buttongroup .k-button.k-primary,
 .k-button.k-primary,
 .btn.btn-primary {
@@ -87,6 +89,10 @@ fieldset[disabled] .btn {
     color: var(--textColorPrimary40, #ffffff);
 }
 
+.k-scheduler-edit-form .k-edit-field .k-button:focus,
+.k-edit-form-container .k-edit-buttons .k-primary:focus,
+.k-scheduler-edit-form .k-edit-field .k-button:hover,
+.k-edit-form-container .k-edit-buttons .k-primary:hover,
 .k-dialog-buttongroup .k-button.k-primary:focus,
 .k-dialog-buttongroup .k-button.k-primary:hover,
 .k-button.k-primary:focus,
@@ -99,6 +105,10 @@ fieldset[disabled] .btn {
     outline: none;
 }
 
+.k-scheduler-edit-form .k-edit-field .k-button:active,
+.k-edit-form-container .k-edit-buttons .k-primary:active,
+.k-scheduler-edit-form .k-edit-field .k-button.active,
+.k-edit-form-container .k-edit-buttons .k-primary.active,
 .k-dialog-buttongroup .k-button.k-primary.active,
 .k-dialog-buttongroup .k-button.k-primary:active,
 .k-button.k-primary.active,
@@ -160,6 +170,8 @@ fieldset[disabled] .btn {
 
 
 /* Danger */
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
 .k-button.k-danger,
 .btn.btn-danger {
     background: var(--colorDanger40, #ce3a36);
@@ -167,6 +179,10 @@ fieldset[disabled] .btn {
     color: var(--textColorDanger40, #ffffff);
 }
 
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:focus,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:focus,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover,
 .k-button.k-danger:focus,
 .k-button.k-danger:hover,
 .btn.btn-danger:focus,
@@ -177,6 +193,10 @@ fieldset[disabled] .btn {
     outline: none;
 }
 
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone.active,
+.k-edit-form-container .k-edit-buttons .k-scheduler-cancel.active,
 .k-button.k-danger.active,
 .k-button.k-danger:active,
 .btn.btn-danger.active,

package/css/themes/custom/theme-general/forms.css

@@ -96,7 +96,12 @@ textarea.k-textbox:hover,
     color: var(--textColor40, #393939);
 }
 
-.k-state-default>.k-select{
+.k-list>.k-state-selected,
+.k-state-selected {
+    background: transparent;
+}
+
+.k-state-default>.k-select {
     display: flex;
     align-items: center;
     justify-content: center;  

package/css/themes/custom/theme-general/notification.css

@@ -65,4 +65,20 @@
     background: var(--colorCalm10, #d8d9e3);
     color: var(--colorCalm70, #20254e);
     border-color: var(--colorCalm20, #b3b5ca);
+}
+
+.k-notification.k-notification-error .k-i-error:before {
+    color: var(--colorDanger70, #71201e);
+}
+
+.k-notification.k-notification-success .k-i-success:before {
+    color: var(--colorSuccess70, #144414);
+}
+
+.k-notification.k-notification-warning .k-i-warning:before {
+    color: var(--colorWarning70, #835f2b);
+}
+
+.k-notification.k-notification-info .k-i-info:before {
+    color: var(--colorCalm70, #20254e);
 }

package/css/themes/custom/theme-general/scheduler.css

@@ -58,6 +58,11 @@ cron-scheduler .k-link:link,
     border-color: var(--backgroundColor60, #b1b1b1);
 }
 
+.k-edit-form-container .k-edit-buttons {
+    background: var(--backgroundColor40, #f1f1f1);
+    border-color: var(--colorDark10);
+}
+
 .k-scheduler .k-scheduler-toolbar ul li.k-state-hover {
     color: var(--textColorPrimary40, #ffffff);
     background: var(--colorPrimary60, #2e3b85);
@@ -69,8 +74,6 @@ cron-scheduler .k-link:link,
     color: var(--textColorPrimary40, #ffffff);
 }
 
-.k-scheduler-edit-form .k-edit-field .k-button,
-.k-edit-form-container .k-edit-buttons .k-primary,
 .k-scheduler .k-state-selected>.k-link,
 .k-scheduler .k-scheduler-toolbar .k-state-selected,
 .k-scheduler .k-today.k-state-selected,
@@ -84,35 +87,13 @@ cron-scheduler .k-link:link,
 
 .k-scheduler-navigation .k-nav-prev .k-link:hover,
 .k-scheduler div.k-scheduler-footer .k-link:hover,
-.k-scheduler div.k-scheduler-footer ul li:hover,
-.k-scheduler-edit-form .k-edit-field .k-button:hover,
-.k-edit-form-container .k-edit-buttons .k-primary:hover {
+.k-scheduler div.k-scheduler-footer ul li:hover {
     color: var(--textColorPrimary40, #ffffff);
     background: var(--colorPrimary50, #37479e);
     border-color: transparent;
     outline: none;
 }
 
-.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel {
-    background: var(--colorDanger40, #ce3a36);
-    border-color: transparent;
-    color: var(--textColorDanger40, #ffffff);
-}
-
-.k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone:hover,
-.k-edit-form-container .k-edit-buttons .k-scheduler-cancel:hover {
-    color: var(--textColorDanger40, #ffffff);
-    background: var(--colorDanger50, #b4332f);
-    border-color: transparent;
-    outline: none;
-}
-
-.k-edit-form-container .k-edit-buttons .k-button,
-.k-scheduler-edit-form .k-edit-field .k-button {
-    box-shadow: none;
-    border-radius: var(--borderRadiusSmallest, 4px);
-}
 
 .k-window-titlebar .k-window-actions {
     top: 0;
@@ -154,4 +135,15 @@ td.k-state-focused.k-state-selected {
 
 .k-event.k-state-selected {
     background: var(--colorPrimary60, #2e3b85);
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.k-event .k-event-actions .k-event-delete {
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.k-button.k-button-icon .k-icon,
+.k-window-title,
+.k-popup-message {
+    color: var(--textColor40, #393939);
 }

package/css/themes/custom/theme-general/table-grid.css

@@ -5,6 +5,11 @@
     line-height: 1;
 }
 
+.k-grid table .k-header .k-button {
+    border-radius: 0;
+    padding: 8px 16px;
+}
+
 .k-grid table {
     color: var(--textColor70, #1f1f1f);
 }
@@ -69,14 +74,6 @@ form.k-filter-menu .k-textbox {
     border-color: var(--colorDark10, #d9d9d9);
 }
 
-.k-pager-wrap .k-pager-refresh,
-.k-dropdown-wrap.k-state-default,
-.k-header,
-.k-pager-wrap,
-.k-grid-toolbar {
-    background: var(--colorDefault40, #fbfbfb);
-}
-
 .k-grid-header th.k-header {
     padding: var(--distanceSmall, 15px) var(--distanceMedium, 20px);
 }
@@ -104,6 +101,7 @@ form.k-filter-menu .k-textbox {
     color: var(--textColor70, #1f1f1f);
 }
 
+.k-list>.k-state-hover,
 .k-popup .k-list .k-state-focused {
     box-shadow: inset 0 0 2px 0 var(--colorDefault30, #8689af), inset 0 0 7px 0 var(--colorDefault40, #3b448e);
 }

package/css/themes/custom/theme-general/theme-general.css

@@ -153,8 +153,8 @@ input {
 
 /* radio */
 .k-radio:checked+.k-radio-label:after {
-    width: var(--textNormalSize, 12px);
-    height: var(--textNormalSize, 12px);
+    width: calc(var(--textMediumSize, 16px) - 4px);
+    height: calc(var(--textMediumSize, 16px) - 4px);
     border-radius: var(--borderRadiusFull, 99999px);
 }
 
@@ -168,13 +168,12 @@ input {
 }
 
 .k-radio-label {
-    line-height: var(--textBigSize, 18px);
-    padding-left: calc(var(--textBigSize, 18px) * 1.25);
+    line-height: var(--textMediumSize, 16px);
+    padding-left: calc(var(--textMediumSize, 16px) * 2);
     color: var(--textColor40, #393939);
+    margin-bottom: 5px;
 }
 
-
-
 a,
 a:focus,
 a:active {
@@ -492,6 +491,8 @@ div.k-filebrowser-dropzone em {
 .cardinput .k-textbox.form-control {
     box-shadow: none;
     font-family: var(--fontFamily, Arial, sans-serif);
+    min-height: auto;
+    padding: 0;
 }
 
 /* Breadcrumbs */

package/css/themes/deprecated/custom/aquamarine/font/fonts.css

@@ -0,0 +1,162 @@
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Black.woff2') format('woff2'),
+        url('WorkSans-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Bold.woff2') format('woff2'),
+        url('WorkSans-Bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BlackItalic.woff2') format('woff2'),
+        url('WorkSans-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BoldItalic.woff2') format('woff2'),
+        url('WorkSans-BoldItalic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBold.woff2') format('woff2'),
+        url('WorkSans-ExtraBold.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBoldItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraBoldItalic.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLight.woff2') format('woff2'),
+        url('WorkSans-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLightItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraLightItalic.woff') format('woff');
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Italic.woff2') format('woff2'),
+        url('WorkSans-Italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Light.woff2') format('woff2'),
+        url('WorkSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Medium.woff2') format('woff2'),
+        url('WorkSans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-LightItalic.woff2') format('woff2'),
+        url('WorkSans-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-MediumItalic.woff2') format('woff2'),
+        url('WorkSans-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Regular.woff2') format('woff2'),
+        url('WorkSans-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBold.woff2') format('woff2'),
+        url('WorkSans-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBoldItalic.woff2') format('woff2'),
+        url('WorkSans-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Thin.woff2') format('woff2'),
+        url('WorkSans-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ThinItalic.woff2') format('woff2'),
+        url('WorkSans-ThinItalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+

package/deprecated/css/app.css

@@ -424,4 +424,10 @@ input[type=checkbox].k-checkbox {
     -webkit-appearance: none;
     width: 21px;
     height: 21px;
+}
+
+.active-bar, 
+.tool-bar {
+    display: flex;
+    gap: 6px;
 }