@eccenca/gui-elements 23.7.0-rc.1 → 23.7.0-rc.3

package/src/components/TextField/textfield.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:color";
 
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
@@ -36,6 +37,9 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 // fixes
 
 .#{$ns}-input-group {
+    // fix for z-index rule of input group left icon
+    z-index: 0;
+
     // fix for correct fill/fullWidth option
     display: inline-block;
     &.#{$ns}-fill {
@@ -57,23 +61,31 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 // enhancements
 
-@mixin intent-state-flash($state, $bgcolor, $mixratio: 24%) {
+$eccgui-map-intent-bgcolors: (
+    "primary": $eccgui-color-info-background,
+    "success": $eccgui-color-success-background,
+    "warning": $eccgui-color-warning-background,
+    "danger": $eccgui-color-danger-background,
+);
+
+@mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
         }
+
         39% {
             background-color: $bgcolor;
         }
+
         100% {
-            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
         }
     }
+}
 
-    .#{$ns}-input-group.#{$ns}-intent-#{$state} & {
-        background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
-        animation-name: intent-state-flash-#{$state};
-    }
+@each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+    @include intent-state-flash-animation($each-intent, $each-bgcolor);
 }
 
 .#{$ns}-input {
@@ -82,10 +94,12 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         animation-delay: 0.5s;
     }
 
-    @include intent-state-flash("primary", $eccgui-color-info-background);
-    @include intent-state-flash("success", $eccgui-color-success-background);
-    @include intent-state-flash("warning", $eccgui-color-warning-background);
-    @include intent-state-flash("danger", $eccgui-color-danger-background);
+    @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
+            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            animation-name: intent-state-flash-#{$each-intent};
+        }
+    }
 
     .#{$ns}-input-group.#{$eccgui}-intent--info & {
         @include pt-input-intent($eccgui-color-info-text);
@@ -114,6 +128,62 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 .#{$eccgui}-textarea {
     width: 100%;
+
+    &[class*="#{$eccgui}-intent--"] {
+        animation-duration: 1s;
+        animation-delay: 0.5s;
+    }
+
+    @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+        &.#{$eccgui}-intent--#{$each-intent} {
+            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            animation-name: intent-state-flash-#{$each-intent};
+        }
+    }
+
+    &.#{$eccgui}-intent--info {
+        @include pt-input-intent($eccgui-color-info-text);
+    }
+
+    &.#{$eccgui}-intent--accent {
+        @include pt-input-intent($eccgui-color-primary);
+    }
+
+    &.#{$eccgui}-intent--neutral {
+        @include pt-input-intent($eccgui-color-workspace-text);
+    }
+
+    &.#{$eccgui}-intent--edited {
+        @include pt-input-intent($eccgui-color-info-text);
+
+        color: $eccgui-color-info-text;
+    }
+
+    &.#{$eccgui}-intent--removed {
+        @include pt-input-intent($eccgui-color-danger-text);
+
+        text-decoration: line-through $eccgui-color-danger-text 2px;
+    }
+
+    &.#{$ns}-text-area-auto-resize {
+        height: unset;
+    }
+}
+
+.#{$eccgui}-textarea__wrapper {
+    position: relative;
+}
+
+.#{$eccgui}-textarea__icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.#{$eccgui}-textarea__options {
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 
 .#{$eccgui}-textfield--justifyclearance {

package/src/includes/blueprintjs/_requisits.scss

@@ -1,5 +1,5 @@
 @import "~@blueprintjs/colors/src/colors";
-@import "~@blueprintjs/core/src/common/variables";
+@import "~@blueprintjs/core/src/common/variables-extended";
 
 // future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended";
 @import "~@blueprintjs/core/src/common/react-transition";

package/src/includes/blueprintjs/_variables.scss

@@ -1,83 +1,21 @@
 @use "sass:math";
 
 // Stack of BlueprintJS variables that are necessary to use their framework
-// TODO: calculate them from own configuration variables, all unchanged variables are commented out
+// calculate them from own configuration variables here
+// see blueprint import for variables that need to be overwritten with other values
 
 $icon-font-path: "~@blueprintjs/icons/resources/icons" !default;
 
-// Gray scale
-
-// $black: #10161a !default;
-
-// $dark-gray1: #182026 !default;
-// $dark-gray2: #202b33 !default;
-// $dark-gray3: #293742 !default;
-// $dark-gray4: #30404d !default;
-// $dark-gray5: #394b59 !default;
-
-// $gray1: #5c7080 !default;
-// $gray2: #738694 !default;
-// $gray3: #8a9ba8 !default;
-// $gray4: #a7b6c2 !default;
-// $gray5: #bfccd6 !default;
-
-// $light-gray1: #ced9e0 !default;
-// $light-gray2: #d8e1e8 !default;
-// $light-gray3: #e1e8ed !default;
-// $light-gray4: #ebf1f5 !default;
-// $light-gray5: #f5f8fa !default;
-
-// $white: #ffffff !default;
-
-// Other colors
-// @import '~@blueprintjs/core/src/common/colors';
-
 // Color aliases
 
 $pt-intent-primary: $eccgui-color-accent !default;
 $pt-intent-success: $eccgui-color-success-text !default;
 $pt-intent-warning: $eccgui-color-warning-text !default;
 $pt-intent-danger: $eccgui-color-danger-text !default;
-
-// $pt-app-background-color: $light-gray5 !default;
-// $pt-dark-app-background-color: $dark-gray3 !default;
-
 $pt-outline-color: rgba($eccgui-color-accent, 0.6);
 $pt-text-color: $eccgui-color-application-text !default;
 
-// $pt-text-color-muted: $gray1 !default;
-// $pt-text-color-disabled: rgba($pt-text-color-muted, 0.6) !default;
-// $pt-heading-color: $pt-text-color !default;
-// $pt-link-color: $pt-intent-primary !default;
-// $pt-dark-text-color: $light-gray5 !default;
-// $pt-dark-text-color-muted: $gray4 !default;
-// $pt-dark-text-color-disabled: rgba($pt-dark-text-color-muted, 0.6) !default;
-// $pt-dark-heading-color: $pt-dark-text-color !default;
-// $pt-dark-link-color: $blue5 !default;
-// Default text selection color using #7dbcff
-// $pt-text-selection-color: rgba(125, 188, 255, 0.6) !default;
-
-// $pt-icon-color: $pt-text-color-muted !default;
-// $pt-icon-color-hover: $pt-text-color !default;
-// $pt-icon-color-disabled: $pt-text-color-disabled !default;
-// $pt-icon-color-selected: $pt-intent-primary !default;
-// $pt-dark-icon-color: $pt-dark-text-color-muted !default;
-// $pt-dark-icon-color-hover: $pt-dark-text-color !default;
-// $pt-dark-icon-color-disabled: $pt-dark-text-color-disabled !default;
-// $pt-dark-icon-color-selected: $pt-intent-primary !default;
-
-// $pt-divider-black: rgba($black, 0.15) !default;
-// $pt-dark-divider-black: rgba($black, 0.4) !default;
-// $pt-dark-divider-white: rgba($white, 0.15) !default;
-
-// $pt-code-text-color: $pt-text-color-muted !default;
-// $pt-dark-code-text-color: $pt-dark-text-color-muted !default;
-// $pt-code-background-color: rgba($white, 0.7) !default;
-// $pt-dark-code-background-color: rgba($black, 0.3) !default;
-
-// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
-// Do not quote this value, for Less consumers.
-$ns: bp5 !default;
+// Size aliases
 
 // easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
@@ -89,112 +27,5 @@ $pt-font-size-large: $eccgui-size-typo-subtitle !default;
 $pt-font-size-small: $eccgui-size-typo-caption !default;
 $pt-line-height: $eccgui-size-typo-text-lineheight !default;
 
-// tag: (font-size, line-height)
-
-/*
-$headings: (
-  "h1": (36px, 40px),
-  "h2": (28px, 32px),
-  "h3": (22px, 25px),
-  "h4": (18px, 21px),
-  "h5": (16px, 19px),
-  "h6": (14px, 16px)
-) !default;
-*/
-
-// Icon variables
-// $icons16-family: "Icons16" !default;
-// $icons20-family: "Icons20" !default;
 $pt-icon-size-standard: 20px !default;
 $pt-icon-size-large: 32px !default;
-
-// Grids & dimensions
-
-// $pt-border-radius: floor($pt-grid-size / 3) !default;
-
-// Buttons
-// $pt-button-height: $pt-grid-size * 3 !default;
-// $pt-button-height-small: $pt-grid-size * 2.4 !default;
-// $pt-button-height-smaller: $pt-grid-size * 2 !default;
-// $pt-button-height-large: $pt-grid-size * 4 !default;
-
-// Inputs
-// $pt-input-height: $pt-grid-size * 3 !default;
-// $pt-input-height-large: $pt-grid-size * 4 !default;
-// $pt-input-height-small: $pt-grid-size * 2.4 !default;
-
-// Others
-// $pt-navbar-height: $pt-grid-size * 5 !default;
-
-// Z-indices
-// $pt-z-index-base: 0 !default;
-// $pt-z-index-content: $pt-z-index-base + 10 !default;
-// $pt-z-index-overlay: $pt-z-index-content + 10 !default;
-
-// Shadow opacities
-// $pt-border-shadow-opacity: 0.1 !default;
-// $pt-drop-shadow-opacity: 0.2 !default;
-// $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
-// $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;
-
-// Elevations
-// all shadow lists must be the same length to avoid flicker in transitions.
-
-/*
-$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black,
-                        0 0 0 rgba($black, 0),
-                        0 0 0 rgba($black, 0) !default;
-$pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity),
-                        0 0 0 rgba($black, 0),
-                        0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
-$pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity),
-                        0 1px 1px rgba($black, $pt-drop-shadow-opacity),
-                        0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
-$pt-elevation-shadow-3: border-shadow($pt-border-shadow-opacity),
-                        0 2px 4px rgba($black, $pt-drop-shadow-opacity),
-                        0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
-$pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity),
-                        0 4px 8px rgba($black, $pt-drop-shadow-opacity),
-                        0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;
-
-$pt-dark-elevation-shadow-0: 0 0 0 1px $pt-dark-divider-black,
-                             0 0 0 rgba($black, 0),
-                             0 0 0 rgba($black, 0) !default;
-$pt-dark-elevation-shadow-1: border-shadow($pt-dark-border-shadow-opacity),
-                             0 0 0 rgba($black, 0),
-                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-2: border-shadow($pt-dark-border-shadow-opacity),
-                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
-                             0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-3: border-shadow($pt-dark-border-shadow-opacity),
-                             0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
-                             0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-$pt-dark-elevation-shadow-4: border-shadow($pt-dark-border-shadow-opacity),
-                             0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
-                             0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-*/
-
-// Transitions
-// $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
-// $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
-// $pt-transition-duration: 100ms !default;
-
-// Light theme styles
-
-/*
-$pt-input-box-shadow: inset border-shadow(0.15),
-                      inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
-*/
-// $pt-dialog-box-shadow: $pt-elevation-shadow-4 !default;
-// $pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
-// $pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
-
-// Dark theme styles
-
-/*
-$pt-dark-input-box-shadow: inset border-shadow(0.3),
-                           inset 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
-*/
-// $pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default;
-// $pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default;
-// $pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default;

package/src/includes/carbon-components/_requisits.scss

@@ -8,6 +8,7 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/styles/scss/utilities/_visually-hidden";
+@import "~@carbon/styles/scss/components/ui-shell/functions";
 @import "~@carbon/styles/scss/feature-flags";
 @import "~@carbon/styles/scss/colors";
 @import "~@carbon/styles/scss/theme";