Move theme helpers and some stylesheets to proper locations

shlink-frontend-kit/src/base.scss

@@ -0,0 +1,27 @@
+// 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;

shlink-frontend-kit/src/form/SearchField.scss

@@ -1,4 +1,4 @@
-@import '../../../src/utils/mixins/vertical-align';
+@import '../../../shlink-web-component/src/utils/mixins/vertical-align';
 
 .search-field {
   position: relative;

shlink-frontend-kit/src/index.scss

@@ -0,0 +1,2 @@
+@import './utils/ResponsiveTable';
+@import './theme/theme';

shlink-frontend-kit/src/index.ts

@@ -3,4 +3,5 @@ export * from './form';
 export * from './hooks';
 export * from './navigation';
 export * from './ordering';
+export * from './theme';
 export * from './utils';

shlink-frontend-kit/src/navigation/DropdownBtn.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable no-descending-specificity */
 
-@import '../../../src/utils/mixins/vertical-align';
+@import '../../../shlink-web-component/src/utils/mixins/vertical-align';
 
 .dropdown-btn__toggle.dropdown-btn__toggle {
   text-align: left;

shlink-frontend-kit/src/navigation/NavPills.scss

@@ -1,4 +1,4 @@
-@import '../../../src/utils/base';
+@import '../base';
 
 .nav-pills__nav {
   position: sticky !important;

shlink-frontend-kit/src/theme/index.ts

@@ -0,0 +1,17 @@
+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';

shlink-frontend-kit/src/theme/theme.scss

@@ -0,0 +1,67 @@
+@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);
+}

shlink-frontend-kit/src/utils/ResponsiveTable.scss

@@ -0,0 +1,59 @@
+@import '../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;
+  }
+}