invensys-ng 21.3.2 → 21.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "invensys-ng",
-  "version": "21.3.2",
+  "version": "21.3.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/ulbrichFrauendorf/invensys-ng"

package/src/lib/themes/body.theme.scss

@@ -0,0 +1,9 @@
+@use "./color-variables.scss" as vars;
+
+@mixin define-body() {
+  body {
+    font-family: "Roboto", sans-serif;
+    background-color: vars.$color-surface-ground;
+    color: vars.$color-text-primary;
+  }
+}

package/src/lib/themes/scrollbar-mixins.scss

@@ -4,18 +4,18 @@
 @mixin thin-scrollbar() {
   // Webkit browsers (Chrome, Safari, Edge)
   &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: var(--scrollbar-size, 6px);
+    height: var(--scrollbar-size, 6px);
   }
 
   &::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 3px;
+    background: var(--scrollbar-track, transparent);
+    border-radius: var(--scrollbar-radius, 3px);
   }
 
   &::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
+    border-radius: var(--scrollbar-radius, 3px);
     transition: background 0.2s ease;
 
     &:hover {
@@ -45,22 +45,20 @@
 
   // Override default colors with theme colors
   &::-webkit-scrollbar-thumb {
-    background: colors.$color-text-secondary;
-    opacity: 0.4;
+    background: var(--scrollbar-thumb, #{colors.$color-text-secondary});
 
     &:hover {
-      background: colors.$color-text-primary;
-      opacity: 0.6;
+      background: var(--scrollbar-thumb-hover, #{colors.$color-text-primary});
     }
 
     &:active {
-      background: colors.$color-primary;
-      opacity: 0.7;
+      background: var(--scrollbar-thumb-active, #{colors.$color-primary});
     }
   }
 
   // Firefox with theme colors
-  scrollbar-color: colors.$color-text-secondary transparent;
+  scrollbar-color: var(--scrollbar-thumb, #{colors.$color-text-secondary})
+    var(--scrollbar-track, transparent);
 }
 
 // Scrollbar for dropdown/overlay components
@@ -69,36 +67,37 @@
 
   // Additional styling for dropdown contexts
   &::-webkit-scrollbar {
-    width: 6px; // Slightly wider for better visibility
-    height: 6px;
+    width: var(--scrollbar-size, 6px); // Slightly wider for better visibility
+    height: var(--scrollbar-size, 6px);
   }
 
   &::-webkit-scrollbar-track {
-    background: rgba(0, 0, 0, 0.05); // Subtle track background
-    border-radius: 3px;
+    background: var(
+      --scrollbar-track-dropdown,
+      rgba(0, 0, 0, 0.05)
+    ); // Subtle track background
+    border-radius: var(--scrollbar-radius, 3px);
     margin: 2px 0; // Add margin to prevent cutoff
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 3px;
+    border-radius: var(--scrollbar-radius, 3px);
     min-height: 20px; // Ensure minimum thumb size
 
     // More visible colors for dropdowns
-    background: colors.$color-text-secondary;
-    opacity: 0.6;
+    background: var(--scrollbar-thumb, #{colors.$color-text-secondary});
 
     &:hover {
-      background: colors.$color-text-primary;
-      opacity: 0.8;
+      background: var(--scrollbar-thumb-hover, #{colors.$color-text-primary});
     }
 
     &:active {
-      background: colors.$color-primary;
-      opacity: 0.9;
+      background: var(--scrollbar-thumb-active, #{colors.$color-primary});
     }
   }
 
   // Better Firefox scrollbar visibility
   scrollbar-width: thin;
-  scrollbar-color: colors.$color-text-secondary rgba(0, 0, 0, 0.05);
+  scrollbar-color: var(--scrollbar-thumb, #{colors.$color-text-secondary})
+    var(--scrollbar-track-dropdown, rgba(0, 0, 0, 0.05));
 }

package/src/lib/themes/scrollbar.theme.scss

@@ -0,0 +1,12 @@
+@mixin define-scrollbar-theme() {
+  .light,
+  .dark {
+    --scrollbar-size: 6px;
+    --scrollbar-radius: 3px;
+    --scrollbar-track: transparent;
+    --scrollbar-track-dropdown: rgba(0, 0, 0, 0.05);
+    --scrollbar-thumb: var(--color-text-secondary);
+    --scrollbar-thumb-hover: var(--color-text-primary);
+    --scrollbar-thumb-active: var(--color-primary);
+  }
+}

package/src/lib/themes/theme.scss

@@ -0,0 +1,21 @@
+@use "./colors.theme.scss" as colors-theme;
+@use "./body.theme.scss" as body-theme;
+@use "./scrollbar.theme.scss" as scrollbar-theme;
+@use "./typography.theme.scss" as typography-theme;
+
+@mixin define-theme($body: true, $typography: true, $scrollbar: true) {
+  @include colors-theme.define-color-palette(light);
+  @include colors-theme.define-color-palette(dark);
+
+  @if $body {
+    @include body-theme.define-body();
+  }
+
+  @if $scrollbar {
+    @include scrollbar-theme.define-scrollbar-theme();
+  }
+
+  @if $typography {
+    @include typography-theme.define-typography();
+  }
+}

package/src/lib/themes/typography.theme.scss

@@ -0,0 +1,73 @@
+@use "./_variables" as *;
+@use "./color-variables.scss" as colors;
+
+@mixin define-typography() {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 24px 0 16px;
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.2;
+    color: colors.$color-text-primary;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+
+  h2 {
+    font-size: 28px;
+  }
+
+  h3 {
+    font-size: 24px;
+  }
+
+  h4 {
+    font-size: 20px;
+  }
+
+  h5 {
+    font-size: 16px;
+  }
+
+  h6 {
+    font-size: 14px;
+  }
+
+  mark {
+    background: colors.$color-warning;
+    color: colors.$color-contrast;
+    padding: 4px 6.4px;
+    font-family: monospace;
+  }
+
+  blockquote {
+    margin: 16px 0;
+    padding: 0 32px;
+    border-left: 4px solid colors.$color-text-tertiary;
+  }
+
+  hr {
+    border-top: solid colors.$color-surface-border;
+    border-width: 1px 0 0;
+    margin: 16px 0;
+  }
+
+  p {
+    margin: 0 0 16px;
+    line-height: 1.5;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}