Move theme helpers and some stylesheets to proper locations

src/app/App.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .app-container {
   height: 100%;

src/app/App.tsx

@@ -1,3 +1,4 @@
+import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
 import type { Settings } from '@shlinkio/shlink-web-component';
 import classNames from 'classnames';
 import type { FC } from 'react';
@@ -7,7 +8,6 @@ import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { ServersMap } from '../servers/data';
 import { forceUpdate } from '../utils/helpers/sw';
-import { changeThemeInMarkup } from '../utils/theme';
 import './App.scss';
 
 interface AppProps {

src/common/AppUpdateBanner.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/horizontal-align';
 
 .app-update-banner.app-update-banner {

src/common/Home.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/vertical-align';
 
 $mainCardWidth: 720px;

src/common/MainHeader.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .main-header.main-header {
   color: white;

src/common/NoMenuLayout.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .no-menu-wrapper {
   padding: 15px 0 0;

src/common/ShlinkVersionsContainer.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .shlink-versions-container--with-sidebar {
   margin-left: 0;

src/common/ShlinkWebComponentContainer.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .menu-layout__swipeable {
   height: 100%;

src/common/img/ShlinkLogo.tsx

@@ -1,4 +1,4 @@
-import { MAIN_COLOR } from '../../utils/theme';
+import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
 
 export interface ShlinkLogoProps {
   color?: string;

src/common/react-tag-autocomplete.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .react-tags {
   position: relative;

src/index.scss

@@ -1,12 +1,10 @@
 /* stylelint-disable no-descending-specificity */
 
-@import './utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
+@import '@shlinkio/shlink-frontend-kit/index';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tag-autocomplete.scss';
-@import './utils/theme/theme';
 @import './utils/mixins/text-ellipsis';
-@import './utils/table/ResponsiveTable';
-@import './utils/StickyCardPaginator';
 
 * {
   outline: none !important;

src/servers/ServersListGroup.scss

@@ -1,4 +1,4 @@
-@import '../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 @import '../utils/mixins/vertical-align';
 @import '../utils/mixins/thin-scroll';
 

src/servers/helpers/ServerError.scss

@@ -1,4 +1,4 @@
-@import '../../utils/base';
+@import '@shlinkio/shlink-frontend-kit/base';
 
 .server-error__container {
   text-align: center;

src/settings/UserInterfaceSettings.tsx

@@ -1,10 +1,9 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import type { Theme } from '@shlinkio/shlink-frontend-kit';
+import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
 import type { Settings, UiSettings } from '@shlinkio/shlink-web-component';
 import type { FC } from 'react';
-import type { Theme } from '../utils/theme';
-import { changeThemeInMarkup } from '../utils/theme';
 import './UserInterfaceSettings.scss';
 
 interface UserInterfaceProps {

src/utils/StickyCardPaginator.scss

@@ -1,7 +0,0 @@
-.sticky-card-paginator {
-  position: sticky;
-  bottom: 0;
-  background-color: var(--primary-color-alfa);
-  padding: .75rem 0;
-  border-top: 1px solid var(--border-color);
-}

src/utils/base.scss

@@ -1,27 +0,0 @@
-// Breakpoints
-$xsMax: 575px;
-$smMin: 576px;
-$smMax: 767px;
-$mdMin: 768px;
-$mdMax: 991px;
-$lgMin: 992px;
-$lgMax: 1199px;
-$xlgMin: 1200px;
-$responsiveTableBreakpoint: $mdMax;
-
-// Colors
-$mainColor: #4696e5;
-$lightColor: #f5f6fe;
-$lightGrey: #eeeeee;
-$dangerColor: #dc3545;
-$mediumGrey: #dee2e6;
-$textPlaceholder: #6c757d;
-
-// Misc
-$headerHeight: 56px;
-$asideMenuWidth: 260px;
-$footer-height: 2.3rem;
-$footer-margin: .8rem;
-
-// Bootstrap overwrites
-$primary: $mainColor;

src/utils/mixins/fit-with-margin.scss

@@ -1,8 +0,0 @@
-@mixin fit-with-margin($margin) {
-  $offset: $margin * 2;
-
-  width: calc(100% - #{$offset});
-  max-width: calc(100% - #{$offset});
-  height: calc(100% - #{$offset});
-  margin: $margin;
-}

src/utils/mixins/sticky-cell.scss

@@ -1,36 +0,0 @@
-@import '../base';
-
-@mixin sticky-cell($with-separators: true) {
-  z-index: 1;
-  position: relative;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: -1px;
-    left: 0;
-    bottom: -1px;
-    right: if($with-separators, -1px, 0);
-    background: var(--table-border-color);
-    z-index: -2;
-  }
-
-  &:first-child:before {
-    left: if($with-separators, -1px, 0);
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: if($with-separators, 1px, 0);
-    bottom: 0;
-    right: 0;
-    background: var(--primary-color);
-    z-index: -1;
-  }
-
-  &:first-child:after {
-    left: 0;
-  }
-}

src/utils/table/ResponsiveTable.scss

@@ -1,59 +0,0 @@
-@import '../../utils/base';
-
-.responsive-table__header {
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: none;
-  }
-}
-
-.responsive-table.table > :not(:first-child) {
-  @media (max-width: $responsiveTableBreakpoint) {
-    border: none;
-  }
-}
-
-.responsive-table__row {
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: block;
-    border-bottom: 1px solid var(--border-color);
-    border-top: 2px solid var(--border-color);
-    position: relative;
-
-    &:not(:last-child) {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.responsive-table__cell.responsive-table__cell {
-  vertical-align: middle !important;
-
-  @media (max-width: $responsiveTableBreakpoint) {
-    display: block;
-    width: 100%;
-    position: relative;
-    padding: .5rem;
-    font-size: .9rem;
-
-    &[data-th]:before {
-      content: attr(data-th) ': ';
-      font-weight: 700;
-    }
-
-    &:last-child {
-      position: absolute;
-      top: 3.5px;
-      right: .5rem;
-      width: auto;
-      padding: 0;
-      border: none;
-    }
-  }
-}
-
-.responsive-table__cell.responsive-table__cell .btn-sm {
-  @media (max-width: $responsiveTableBreakpoint) {
-    padding: 0.1rem 0.4rem;
-    margin-top: 0.16rem;
-  }
-}

src/utils/theme/index.ts

@@ -1,17 +0,0 @@
-export const MAIN_COLOR = '#4696e5';
-
-export const MAIN_COLOR_ALPHA = 'rgba(70, 150, 229, 0.4)';
-
-export const HIGHLIGHTED_COLOR = '#f77f28';
-
-export const HIGHLIGHTED_COLOR_ALPHA = 'rgba(247, 127, 40, 0.4)';
-
-export const PRIMARY_LIGHT_COLOR = 'white';
-
-export const PRIMARY_DARK_COLOR = '#161b22';
-
-export type Theme = 'dark' | 'light';
-
-export const changeThemeInMarkup = (theme: Theme) => document.querySelector('html')?.setAttribute('data-theme', theme);
-
-export const isDarkThemeEnabled = (): boolean => document.querySelector('html')?.getAttribute('data-theme') === 'dark';

src/utils/theme/theme.scss

@@ -1,67 +0,0 @@
-@import '../base';
-
-// Light theme colors
-$lightPrimaryColor: #ffffff;
-$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
-$lightSecondaryColor: $lightColor;
-$lightTextColor: #232323;
-$lightBorderColor: rgb(0 0 0 / .125);
-$lightTableBorderColor: $mediumGrey;
-$lightActiveColor: $lightGrey;
-$lightBrandColor: $mainColor;
-$lightInputColor: $lightPrimaryColor;
-$lightInputTextColor: #495057;
-$lightDisabledInputColor: $lightColor;
-$lightBorderInputColor: rgb(0 0 0 / .19);
-$lightTableHighlightColor: rgb(0 0 0 / .075);
-
-// Dark theme colors
-$darkPrimaryColor: #161b22;
-$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
-$darkSecondaryColor: #0f131a;
-$darkTextColor: rgb(201 209 217);
-$darkBorderColor: rgb(255 255 255 / .15);
-$darkTableBorderColor: #393d43;
-$darkActiveColor: $darkSecondaryColor;
-$darkBrandColor: #0b2d4e;
-$darkInputColor: darken($darkPrimaryColor, 2%);
-$darkInputTextColor: $darkTextColor;
-$darkDisabledInputColor: lighten($darkPrimaryColor, 2%);
-$darkBorderInputColor: $darkBorderColor;
-$darkTableHighlightColor: $darkBorderColor;
-
-html:not([data-theme='dark']) {
-  --color-scheme: initial;
-  --primary-color: #{$lightPrimaryColor};
-  --primary-color-alfa: #{$lightPrimaryColorAlfa};
-  --secondary-color: #{$lightSecondaryColor};
-  --text-color: #{$lightTextColor};
-  --border-color: #{$lightBorderColor};
-  --active-color: #{$lightActiveColor};
-  --brand-color: #{$lightBrandColor};
-  --input-color: #{$lightInputColor};
-  --input-disabled-color: #{$lightDisabledInputColor};
-  --input-border-color: #{$lightBorderInputColor};
-  --input-text-color: #{$lightInputTextColor};
-  --table-border-color: #{$lightTableBorderColor};
-  --table-highlight-color: #{$lightTableHighlightColor};
-  --btn-close-filter: initial;
-}
-
-html[data-theme='dark'] {
-  --color-scheme: dark;
-  --primary-color: #{$darkPrimaryColor};
-  --primary-color-alfa: #{$darkPrimaryColorAlfa};
-  --secondary-color: #{$darkSecondaryColor};
-  --text-color: #{$darkTextColor};
-  --border-color: #{$darkBorderColor};
-  --active-color: #{$darkActiveColor};
-  --brand-color: #{$darkBrandColor};
-  --input-color: #{$darkInputColor};
-  --input-disabled-color: #{$darkDisabledInputColor};
-  --input-border-color: #{$darkBorderInputColor};
-  --input-text-color: #{$darkInputTextColor};
-  --table-border-color: #{$darkTableBorderColor};
-  --table-highlight-color: #{$darkTableHighlightColor};
-  --btn-close-filter: invert(1);
-}