@eccenca/gui-elements 23.7.0-rc.0 → 23.7.0-rc.2

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";