@dvrd/dvr-controls 1.1.13 → 1.1.15

package/src/js/snackbar/style/snackbar.scss

@@ -2,16 +2,17 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/display-breakpoints' as breakpoints;
 
 .snackbar {
-  @include backgroundShadow;
-  @include borderRadius(.2rem);
+  @include commons.backgroundShadow;
+  border-radius: .2rem;
   position: fixed;
   left: 50%;
   bottom: 1rem;
   transition: transform .2s ease-in-out;
-  z-index: $z-index-dialog;
+  z-index: commons.$z-index-dialog;
   max-width: 30vw;
   min-height: 2.5rem;
   overflow-y: auto;
@@ -34,13 +35,13 @@
     user-select: none;
   }
 
-  @include break-xs {
+  @include breakpoints.break-xs {
     max-width: 90vw;
     width: 90vw;
     white-space: normal;
   }
 
-  @include break-sm {
+  @include breakpoints.break-sm {
     width: unset;
   }
 }

package/src/js/switch/style/dvrdSwitch.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .dvrd-switch {
   $track-height: 14px;
@@ -16,7 +16,7 @@
     position: relative;
 
     .handle {
-      @include backgroundShadow;
+      @include commons.backgroundShadow;
       position: absolute;
       left: 0;
       top: 50%;

package/src/js/switch/style/switch.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .switchContainer {
   display: flex;
@@ -11,13 +12,12 @@
 
   .main-label {
     font-size: .9rem;
-    color: $color-gray-5;
-    //margin-right: .5rem;
+    color: colors.$color-gray-5;
   }
 
   .label {
     font-size: .9rem;
-    color: $color-gray-5;
+    color: colors.$color-gray-5;
 
     &.left {
       margin-right: .7rem;
@@ -29,7 +29,7 @@
   }
 
   .switch-track-container {
-    @include borderRadius(1rem);
+    border-radius: 1rem;
     display: flex;
     position: relative;
     width: 35px;
@@ -44,7 +44,7 @@
     }
 
     .switch {
-      @include centerY;
+      @include commons.centerY;
       box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
       border-radius: 50%;
       position: absolute;
@@ -73,11 +73,11 @@
       cursor: not-allowed;
 
       .track {
-        background-color: $color-gray-7 !important;
+        background-color: colors.$color-gray-7 !important;
       }
 
       .switch {
-        background-color: $color-gray-4 !important;
+        background-color: colors.$color-gray-4 !important;
       }
     }
   }

package/src/js/textField/dvrdPasswordInput.tsx

@@ -38,7 +38,6 @@ export default function DVRDPasswordInput(props: Props) {
 
     function renderOrnament() {
         const iconName = inputType === 'password' ? 'eye' : 'eye-slash';
-        console.debug(iconName);
         return {
             placement: ElementPosition.RIGHT,
             element: <AwesomeIcon name={iconName} onClick={onClickOrnament} className='dvrd-password-toggle'/>

package/src/js/textField/style/dvrdInput.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .dvrd-input-container {
   transition: margin-bottom .1s ease-in-out;
@@ -10,7 +10,7 @@
   background-color: white;
 
   .dvrd-input-label {
-    color: $color-blue-text;
+    color: colors.$color-blue-text;
     font-size: .9rem;
     margin-bottom: .25rem;
     display: block;
@@ -30,7 +30,7 @@
       outline: none;
       border: none;
       padding: .75rem;
-      color: $color-blue-text;
+      color: colors.$color-blue-text;
       border-radius: inherit;
     }
 
@@ -41,7 +41,7 @@
     .clear-btn {
       cursor: pointer;
       transition: color .2s ease-in-out;
-      color: $color-blue-text;
+      color: colors.$color-blue-text;
 
       &:hover {
         color: red;

package/src/js/textField/style/dvrdPassword.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .dvrd-password-input {
   display: grid;
@@ -10,10 +10,10 @@
   .dvrd-password-toggle {
     cursor: pointer;
     transition: color .2s ease-in-out;
-    color: $color-gray-3;
+    color: colors.$color-gray-3;
 
     &:hover {
-      color: $color-gray-5;
+      color: colors.$color-gray-5;
     }
   }
 

package/src/js/topButton/style/topButton.scss

@@ -2,15 +2,15 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .dvr-top-btn {
-  @include backgroundShadow;
+  @include commons.backgroundShadow;
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   border-radius: 50%;
-  z-index: $z-index-high;
+  z-index: commons.$z-index-high;
   cursor: pointer;
   transition: background-color .2s ease-in-out, visibility .2s ease-in-out, opacity .2s ease-in-out;
   display: flex;

package/src/js/util/controlContext.tsx

@@ -4,7 +4,6 @@
 
 import React, {Context, PropsWithChildren, useEffect} from 'react';
 import {ControlVariant} from "./interfaces";
-import defer from 'lodash.defer';
 import {convertColor, hexToRgb} from "./colorUtil";
 
 // noinspection JSUnusedGlobalSymbols
@@ -33,7 +32,7 @@ export const ControlContext: Context<ThemeShape> = React.createContext<ThemeShap
 export default function ThemeContextProvider(props: PropsWithChildren<ProviderProps>) {
     const {theme, children} = props;
     useEffect(() => {
-        defer(() => {
+        window.setTimeout(() => {
             const root = document.documentElement;
             const baseRgb = hexToRgb(convertColor(theme.baseColor));
             const contrastRgb = hexToRgb(convertColor(theme.contrastColor));

package/src/js/util/interfaces.ts

@@ -56,8 +56,8 @@ export interface ResponseData extends IndexedObject<any> {
     success?: boolean;
 }
 
-export interface SelectItemShape {
-    value: string | number,
+export interface SelectItemShape<ValueType = string | number> {
+    value: ValueType,
     label: string | number | ReactElement,
     inputLabel?: string,
     selectable?: boolean,
@@ -193,7 +193,7 @@ export type DefaultPDFElementParams<T extends PDFElementType, O extends IndexedO
     linkedID?: string;
 }>
 export type PDFImageParams = {
-    img: File | string | null,
+    img: File | string | null;
     persistent: PDFElementPersist;
     alignment?: ElementPosition;
     display?: PDFDisplay

package/src/style/_colors.scss

@@ -0,0 +1,44 @@
+/*!
+ * Copyright (c) 2025. Dave van Rijn Development
+ */
+
+@use 'sass:color';
+
+$color-blue-1: #009fe3;
+$color-blue-1-hover: color.scale($color-blue-1, $lightness: -10%);
+$color-blue-1-darken: $color-blue-1-hover;
+$color-blue-2: #008dca;
+$color-blue-3: #575757;
+$color-blue-4: #DEEAF6;
+$color-blue-5: #3687bc;
+$color-blue-6: #779bbc;
+$color-blue-text: #2A435F;
+$color-blue-facebook: #4267B2;
+$color-gray-1: #f8f8f8;
+$color-gray-2: gray;
+$color-gray-3: color.scale(gray, $lightness: 10%);
+$color-gray-4: #ccc;
+$color-gray-5: #434b50;
+$color-gray-6: #F2F2F2;
+$color-gray-7: #e4e4e4;
+$color-gray-header: #3a4044;
+$color-gray-header-text: #d8d8d8;
+$color-orange-1: #f39320;
+$color-orange-2: #b05a20;
+$color-orange-1-hover: rgba(243, 147, 32, .8);
+$color-yellow-1: #fff000;
+$color-green-1: #18A155;
+$color-green-2: rgb(234, 254, 234);
+$color-green-3: #edf1f2;
+$color-green-4: #94FB82;
+$color-green-5: #E2EFDA;
+$color-green-whatsapp: #29A71A;
+$color-green-platform: #99cb00;
+$color-pink-1: #fbe1d5;
+$color-pink-1-hover: rgba(251, 225, 213, .6);
+$color-red: red;
+$color-red-secondary: #ffcfd0;
+$color-red-1: #ff7e78;
+$color-red-2: #FDD4CC;
+$color-red-regio: #ca031a;
+$color-text-dark: #333;

package/src/style/{common-variables.scss → _common-variables.scss}

@@ -1,51 +1,9 @@
 /*!
  * Copyright (c) 2024. Dave van Rijn Development
  */
-
-/**
-Contains common application stuff.
-It should contain all common colors used in the application.
-Specific colors that is only used once or in a component, should be contained in the css of that compponent.
- */
-$color-blue-1: #009fe3;
-$color-blue-1-hover: darken($color-blue-1, 10%);
-$color-blue-1-darken: darken($color-blue-1, 10%);
-$color-blue-2: #008dca;
-$color-blue-3: #575757;
-$color-blue-4: #DEEAF6;
-$color-blue-5: #3687bc;
-$color-blue-6: #779bbc;
-$color-blue-text: #2A435F;
-$color-blue-facebook: #4267B2;
-$color-gray-1: #f8f8f8;
-$color-gray-2: gray;
-$color-gray-3: lighten(gray, 10%);
-$color-gray-4: #ccc;
-$color-gray-5: #434b50;
-$color-gray-6: #F2F2F2;
-$color-gray-7: #e4e4e4;
-$color-gray-header: #3a4044;
-$color-gray-header-text: #d8d8d8;
-$color-orange-1: #f39320;
-$color-orange-2: #b05a20;
-$color-orange-1-hover: rgba(243, 147, 32, .8);
-$color-yellow-1: #fff000;
-$color-green-1: #18A155;
-$color-green-2: rgb(234, 254, 234);
-$color-green-3: #edf1f2;
-$color-green-4: #94FB82;
-$color-green-5: #E2EFDA;
-$color-green-whatsapp: #29A71A;
-$color-green-platform: #99cb00;
-$color-pink-1: #fbe1d5;
-$color-pink-1-hover: rgba(251, 225, 213, .6);
-$color-red: red;
-$color-red-secondary: #ffcfd0;
-$color-red-1: #ff7e78;
-$color-red-2: #FDD4CC;
-$color-red-regio: #ca031a;
-
-$color-text-dark: #333;
+@use 'colors' as colors;
+@use 'display-breakpoints' as breakpoints;
+@use 'sass:color';
 
 $z-index-normal: 100;
 $z-index-high: 200;
@@ -58,7 +16,7 @@ $z-index-menu: 1350;
 
 $border-radius-popup: 1.5rem;
 
-@mixin hoverTransition($backgroundColor: $color-blue-1, $color: white, $hoverBackgroundColor: $color-blue-1-hover,
+@mixin hoverTransition($backgroundColor: colors.$color-blue-1, $color: white, $hoverBackgroundColor: colors.$color-blue-1-hover,
 $hoverColor: white, $duration: .2s) {
   background-color: $backgroundColor;
   color: $color;
@@ -71,34 +29,34 @@ $hoverColor: white, $duration: .2s) {
 
 @mixin hasDisabled() {
   &:disabled {
-    background-color: $color-gray-3 !important;
+    background-color: colors.$color-gray-3 !important;
     user-select: none !important;
     cursor: default !important;
   }
 }
 
 @mixin headerBackgroundColor() {
-  background-color: $color-blue-1;
+  background-color: colors.$color-blue-1;
 }
 
 @mixin blueBackgroundColor() {
-  background-color: $color-blue-1;
+  background-color: colors.$color-blue-1;
 }
 
 @mixin primaryBackgroundColor() {
-  background-color: $color-gray-7;
+  background-color: colors.$color-gray-7;
 }
 
 @mixin activeBackgroundColor() {
-  background-color: $color-pink-1;
+  background-color: colors.$color-pink-1;
 }
 
 @mixin hoverBackgroundColor() {
-  background-color: $color-green-2;
+  background-color: colors.$color-green-2;
 }
 
 @mixin linkFontColorBlue() {
-  color: $color-blue-1;
+  color: colors.$color-blue-1;
 }
 
 @mixin s-borderRadius() {
@@ -172,10 +130,6 @@ $hoverColor: white, $duration: .2s) {
   text-overflow: ellipsis;
 }
 
-@mixin row() {
-  @include clearfix();
-}
-
 @mixin defaultPopup($position: absolute, $z-index: $z-index-high, $top: 0, $width: 45rem) {
   @include centerX;
   @include borderRadius(1rem);
@@ -187,13 +141,13 @@ $hoverColor: white, $duration: .2s) {
   width: $width;
   max-width: calc(90% - 2rem);
 
-  @include for-phone-only() {
+  @include breakpoints.for-phone-only() {
     margin-left: 2rem;
   }
 }
 
 @mixin mobilePopupLocation() {
-  @include for-phone-only() {
+  @include breakpoints.for-phone-only() {
     position: fixed;
     width: calc(90% - 4rem);
     margin-left: 2rem;
@@ -204,7 +158,7 @@ $hoverColor: white, $duration: .2s) {
   z-index: $z-index-popup-4;
 }
 
-@mixin textStroke($strokeColor: lighten($color-gray-5, 5%)) {
+@mixin textStroke($strokeColor: color.scale(colors.$color-gray-5, $lightness: 5%)) {
   text-shadow: -1px -1px 0 $strokeColor,
   1px -1px 0 $strokeColor,
   -1px 1px 0 $strokeColor,
@@ -215,7 +169,7 @@ $hoverColor: white, $duration: .2s) {
   box-shadow: 0 1px 5px 0 rgba($color, 0.2), 0 2px 2px 0 rgba($color, 0.14), 0 3px 1px -2px rgba($color, 0.12);
 }
 
-@mixin backgroundShadow2(){
+@mixin backgroundShadow2() {
   box-shadow: 0 4px 4px rgba(black, 0.05);
   border-radius: .5rem;
 }
@@ -242,7 +196,7 @@ $hoverColor: white, $duration: .2s) {
   background-color: white;
   overflow: hidden;
 
-  @include break-sm-down {
+  @include breakpoints.break-sm-down {
     max-width: 90vw;
   }
 }