@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -0,0 +1,490 @@
+.react-flow__node {
+    &.selected:before {
+        content: " ";
+        position: absolute;
+        top: -11 * $reactflow-node-border-width;
+        right: -11 * $reactflow-node-border-width;
+        bottom: -11 * $reactflow-node-border-width;
+        left: -11 * $reactflow-node-border-width;
+        border-width: $reactflow-node-border-width;
+        border-color: $reactflow-edge-stroke-color-selected;
+        border-radius: $reactflow-node-border-radius;
+        border-style: dotted;
+        background-color: rgba($reactflow-edge-stroke-color-selected, 0.05);
+        z-index: 0;
+    }
+
+    &.react-flow__node-default {
+        // remove deafult styles
+        background-color: unset !important;
+        color: unset !important;
+        border: unset !important;
+        height: unset !important;
+        width: unset !important;
+        text-align: unset !important;
+        padding: unset !important;
+    }
+}
+
+.#{$eccgui}-graphviz__node {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    position: relative;
+    z-index: 1;
+
+    font-size: $reactflow-node-font-size;
+    color: $reactflow-node-color;
+    background-color: $reactflow-node-background-color;
+    border-width: $reactflow-node-border-width;
+    border-color: $reactflow-node-border-color;
+    border-radius: $reactflow-node-border-radius;
+    border-style: solid;
+
+    &:hover {
+        box-shadow: 0 0 0 11 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
+    }
+}
+
+.#{$eccgui}-graphviz__node--animated {
+    animation: pumpingshadow 4 * $reactflow-transition-time linear infinite;
+}
+
+@keyframes pumpingshadow {
+  0% {
+    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+  }
+  50% {
+    box-shadow: 0 0 3 * $reactflow-node-border-width 11 * $reactflow-node-border-width rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 11 * $reactflow-node-border-width $reactflow-edge-stroke-color-selected;
+  }
+  100% {
+    box-shadow: 0 0 3 * $reactflow-node-border-width 0 rgba(#fff, 0.9), 0 0 1 * $reactflow-node-border-width 0 rgba($reactflow-edge-stroke-color-selected, 0);
+  }
+}
+
+.#{$eccgui}-graphviz__node--minimal-rectangular,
+.#{$eccgui}-graphviz__node--minimal-circular {
+
+    /* TODO: does not work correctly with tooltips around
+    transition: width $reactflow-transition-time $reactflow-transition-function,
+        max-height $reactflow-transition-time $reactflow-transition-function,
+        border-radius $reactflow-transition-time $reactflow-transition-function;
+    */
+
+    .react-flow__node:not(.selected) /*:not(:hover)*/ & {
+        width: $reactflow-node-basesize;
+        max-height: $reactflow-node-basesize;
+        z-index: 3;
+
+        .#{$eccgui}-graphviz__node__header-depiction + .#{$eccgui}-graphviz__node__header-label,
+        .#{$eccgui}-graphviz__node__header-menu,
+        .#{$eccgui}-graphviz__node__content,
+        .#{$eccgui}-graphviz__node__footer {
+            display: none;
+        }
+
+        .#{$eccgui}-graphviz__node__header-depiction {
+            max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+            max-width: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node--minimal-circular {
+    .react-flow__node:not(.selected) /*:not(:hover)*/ & {
+        border-radius: 100%; // $reactflow-node-basesize / 2;
+
+        .#{$eccgui}-graphviz__node__header-depiction {
+            border-radius: 100%;
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node__header {
+    box-sizing: border-box;
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: $reactflow-node-basesize;
+}
+
+.#{$eccgui}-graphviz__node__header-depiction,
+.#{$eccgui}-graphviz__node__header-menu {
+    flex-grow: 0;
+    flex-shrink: 0;
+    max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+}
+
+.#{$eccgui}-graphviz__node__header-label {
+    margin: 0 $eccgui-size-block-whitespace / 4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: inline-block;
+    text-align: left;
+}
+
+.#{$eccgui}-graphviz__node__header-depiction {
+    border-radius: $reactflow-node-border-radius;
+    /* TODO: does not work correctly with tooltips around
+    transition: border-radius $reactflow-transition-time $reactflow-transition-function;
+    */
+    min-width: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+    min-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+    max-width: calc(2 * (#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width}));
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+        max-width: calc(2 * (#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width}));
+        max-height: calc(#{$reactflow-node-basesize} - #{2 * $reactflow-node-border-width});
+        height: auto;
+        width: auto;
+        display: inline-block;
+        pointer-events: none;
+    }
+}
+
+.#{$eccgui}-graphviz__node__content {
+    padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 4;
+    overflow: hidden;
+    background-color: $card-background-color;
+    color: $eccgui-color-workspace-text;
+    margin: 0.1px; // workaround that Firefox displays node borders better when canvas is scaled down
+    flex-grow: 1;
+
+    &:hover {
+        overflow: auto;
+    }
+}
+
+.#{$eccgui}-graphviz__node__footer {
+    font-size: $reactflow-node-font-size;
+    color: $reactflow-node-color;
+    background-color: $reactflow-node-background-color;
+}
+
+// Node sizes
+
+.#{$eccgui}-graphviz__node--tiny {
+    width: $reactflow-node-basesize * 3;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 2;
+}
+
+.#{$eccgui}-graphviz__node--small {
+    width: $reactflow-node-basesize * 5;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 3;
+}
+
+.#{$eccgui}-graphviz__node--medium {
+    width: $reactflow-node-basesize * 8;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+}
+
+.#{$eccgui}-graphviz__node--large {
+    width: $reactflow-node-basesize * 13;
+    min-height: $reactflow-node-basesize;
+    max-height: $reactflow-node-basesize * 13;
+}
+
+// Node types
+
+.react-flow__node-graphNode {
+    .#{$eccgui}-graphviz__node {
+        background-color: #fff;
+        border-color: #8e24aa;
+        border-style: double;
+        border-width: 3 * $reactflow-node-border-width;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: #8e24aa;
+        border-style: double;
+        border-width: 3 * $reactflow-node-border-width;
+    }
+}
+
+.react-flow__node-classNode {
+    .#{$eccgui}-graphviz__node {
+        border-width: 2 * $reactflow-node-border-width;
+        border-radius: 0;
+        border-color: darken($button-background-color, 60%);
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: darken($button-background-color, 60%);
+        border-width: 2 * $reactflow-node-border-width;
+        border-radius: 0;
+    }
+}
+
+.react-flow__node-instanceNode {
+    .#{$eccgui}-graphviz__node {
+        border-color: darken($button-background-color, 50%);
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: darken($button-background-color, 50%);
+    }
+}
+
+.react-flow__node-propertyNode {
+    .#{$eccgui}-graphviz__node {
+        background-color: complement($button-background-color);
+        border-color: darken(complement($button-background-color), 40%);
+        border-radius: 2 * $reactflow-node-border-radius;
+        border-style: dashed;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: darken(complement($button-background-color), 40%);
+        border-radius: 2 * $reactflow-node-border-radius;
+        border-style: dashed;
+    }
+}
+
+.react-flow__node-datasetNode {
+    .#{$eccgui}-graphviz__node {
+        background-color: #e1f5fe;
+        border-color: #039be5;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: #039be5;
+    }
+}
+
+.react-flow__node-linkingNode {
+    .#{$eccgui}-graphviz__node {
+        background-color: #e0f7fa;
+        border-color: #00acc1;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: #00acc1;
+    }
+}
+
+.react-flow__node-transformNode {
+    .#{$eccgui}-graphviz__node {
+        border-color: #00897b;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: #00897b;
+    }
+}
+
+.react-flow__node-taskNode {
+    .#{$eccgui}-graphviz__node {
+        background-color: #eceff1;
+        border-color: #546e7a;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: #546e7a;
+    }
+}
+
+.react-flow__node-workflowNode {
+    .#{$eccgui}-graphviz__node {
+        background-color: #fff;
+        border-color: #4527a0;
+        border-width: 3 * $reactflow-node-border-width;
+        border-style: double;
+        border-radius: 0;
+    }
+    .#{$eccgui}-graphviz__node__extension--expanded {
+        border-color: #4527a0;
+        border-width: 3 * $reactflow-node-border-width;
+        border-style: double;
+        border-radius: 0;
+    }
+}
+
+// Node highlights
+
+.#{$eccgui}-graphviz__node--highlight-success,
+.#{$eccgui}-graphviz__node--highlight-warning,
+.#{$eccgui}-graphviz__node--highlight-danger {
+    &:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        top: -3 * $reactflow-node-border-width;
+        left: -3 * $reactflow-node-border-width;
+        bottom: -3 * $reactflow-node-border-width;
+        right: -3 * $reactflow-node-border-width;
+        border-radius: inherit;
+        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-danger-text;
+        z-index: -1;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-match,
+.#{$eccgui}-graphviz__node--highlight-altmatch {
+    &:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        top: -3 * $reactflow-node-border-width;
+        left: -3 * $reactflow-node-border-width;
+        bottom: -3 * $reactflow-node-border-width;
+        right: -3 * $reactflow-node-border-width;
+        border-radius: inherit;
+        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-accent;
+        z-index: -1;
+    }
+
+    &.#{$eccgui}-graphviz__node--highlight-success,
+    &.#{$eccgui}-graphviz__node--highlight-warning,
+    &.#{$eccgui}-graphviz__node--highlight-danger {
+        &:after {
+            top: -7 * $reactflow-node-border-width;
+            left: -7 * $reactflow-node-border-width;
+            bottom: -7 * $reactflow-node-border-width;
+            right: -7 * $reactflow-node-border-width;
+        }
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-success {
+    &:before {
+        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-success-text;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-warning {
+    &:before {
+        box-shadow: 0 0 0 3*$reactflow-node-border-width $eccgui-color-warning-text;
+    }
+}
+
+.#{$eccgui}-graphviz__node--highlight-altmatch {
+    &:after {
+        box-shadow: 0 0 0 3*$reactflow-node-border-width complement($eccgui-color-primary);
+    }
+}
+
+// Node tools
+
+.#{$eccgui}-graphviz__nodetools__content {
+}
+
+// Node content extension
+
+.#{$eccgui}-graphviz__node__extension {
+    background-color: $reactflow-node-background-color;
+
+    .#{$eccgui}-graphviz__node--tiny & {
+        max-height: $reactflow-node-basesize * 3;
+    }
+
+    .#{$eccgui}-graphviz__node--small & {
+        max-height: $reactflow-node-basesize * 5;
+    }
+
+    .#{$eccgui}-graphviz__node--medium & {
+        max-height: $reactflow-node-basesize * 8;
+    }
+
+    .#{$eccgui}-graphviz__node--large & {
+        max-height: $reactflow-node-basesize * 13;
+    }
+}
+
+.#{$eccgui}-graphviz__node__extension--expanded {
+    display: flex;
+    flex-direction: column;
+    border-width: $reactflow-node-border-width;
+    border-color: $reactflow-node-border-color;
+    border-radius: $reactflow-node-border-radius;
+    border-style: solid;
+
+    // separation between node content and extension
+    // do not inherit styles here
+    border-top-color: $eccgui-color-separation-divider !important;
+    border-top-width: $reactflow-node-border-width !important;
+    border-top-style: solid !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+
+    position: absolute;
+    top: 100%;
+    left: -1 * $reactflow-node-border-width;
+    right: -1 * $reactflow-node-border-width;
+
+    .react-flow__node-graphNode & {
+        border-color: #8e24aa;
+        border-style: double;
+        border-width: 3 * $reactflow-node-border-width;
+        left: -3 * $reactflow-node-border-width;
+        right: -3 * $reactflow-node-border-width;
+    }
+
+    .react-flow__node-classNode & {
+        border-color: darken($button-background-color, 60%);
+        border-width: 2 * $reactflow-node-border-width;
+        border-radius: 0;
+        left: -2 * $reactflow-node-border-width;
+        right: -2 * $reactflow-node-border-width;
+    }
+
+    .react-flow__node-instanceNode & {
+        border-color: darken($button-background-color, 50%);
+    }
+
+    .react-flow__node-propertyNode & {
+        border-color: darken(complement($button-background-color), 40%);
+        border-radius: 2 * $reactflow-node-border-radius;
+        border-style: dashed;
+    }
+
+    .react-flow__node-datasetNode & {
+        border-color: #039be5;
+    }
+
+    .react-flow__node-linkingNode & {
+        border-color: #00acc1;
+    }
+
+    .react-flow__node-transformNode & {
+        border-color: #00897b;
+    }
+
+    .react-flow__node-taskNode & {
+        border-color: #546e7a;
+    }
+
+    .react-flow__node-workflowNode & {
+        border-color: #4527a0;
+        border-width: 3 * $reactflow-node-border-width;
+        border-style: double;
+        border-radius: 0;
+        left: -3 * $reactflow-node-border-width;
+        right: -3 * $reactflow-node-border-width;
+    }
+}
+
+.#{$eccgui}-graphviz__node__extension-expandbutton {
+    display: flex;
+    min-height: 0;
+    max-height: $eccgui-size-block-whitespace / 2;
+    width: 100%;
+}
+
+.#{$eccgui}-graphviz__node__extension-body {
+    padding: $eccgui-size-block-whitespace / 2 $eccgui-size-block-whitespace / 4;
+    flex-grow: 0;
+    flex-shrink: 1;
+    overflow: auto;
+    overflow: auto;
+}
+
+.#{$eccgui}-graphviz__node__extension-actions {
+    text-align: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+}

package/src/extensions/react-flow/nodes/nodeTypes.ts

@@ -0,0 +1,14 @@
+import { NodeDefault } from "./NodeDefault";
+
+export const nodeTypes = {
+    default: NodeDefault,
+    graphNode: NodeDefault,
+    classNode: NodeDefault,
+    instanceNode: NodeDefault,
+    propertyNode: NodeDefault,
+    datasetNode: NodeDefault,
+    linkingNode: NodeDefault,
+    transformNode: NodeDefault,
+    taskNode: NodeDefault,
+    workflowNode: NodeDefault,
+};

package/src/includes/blueprintjs/_variables.scss

@@ -0,0 +1,195 @@
+// Stack of BlueprintJS variables that are necessary to use their framework
+// TODO: calculate them from own configuration variables, all unchanged variables are commented out
+
+$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: bp3 !default;
+
+// easily the most important variable, so it comes up top
+// (so other variables can use it to define themselves)
+$pt-grid-size: $eccgui-size-typo-text/1.4 !default;
+
+$pt-font-family: $eccgui-font-family-default !default;
+$pt-font-family-monospace: $eccgui-font-family-monospace !default;
+$pt-font-size: $eccgui-size-typo-text !default;
+$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;