DARPA-ASKEM · mwdchang · Apr 3, 2023 · Mar 14, 2023 · Mar 14, 2023 · Mar 14, 2023
@@ -79,13 +79,13 @@ export abstract class Renderer<V, E> extends EventEmitter {
 		this.options = options;
 
 		if (this.options.el) {
-			this.initalize(this.options.el);
+			this.initialize(this.options.el);
 		} else {
 			throw new Error('options must provide an element for graph rendering');
 		}
 	}
 
-	initalize(element: HTMLDivElement): void {
+	initialize(element: HTMLDivElement): void {
 		this.chartSize.width = element.clientWidth;
 		this.chartSize.height = element.clientHeight;
 		this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

@@ -485,7 +485,7 @@ $paginatorElementMargin: .143rem !default;
 $paginatorElementPadding: 0 !default;
 
 //table
-$tableHeaderBorder: 1px solid #e4e4e4 !default;
+$tableHeaderBorder: 1px solid var(--surface-border-light) !default;
 $tableHeaderBorderWidth: 0 0 1px 0 !default;
 $tableHeaderBg: #ffffff !default;
 $tableHeaderTextColor: $textColor !default;
@@ -494,13 +494,13 @@ $tableHeaderPadding: 1rem 1rem !default;
 
 $tableHeaderCellPadding: 1rem 1rem !default;
 $tableHeaderCellBg: #ffffff !default;
-$tableHeaderCellTextColor: var(--text-color-subdued) !default;
+$tableHeaderCellTextColor: var(--text-color-primary) !default;
 $tableHeaderCellFontWeight: 500 !default;
-$tableHeaderCellBorder: 1px solid #e4e4e4 !default;
+$tableHeaderCellBorder: 1px solid var(--surface-border-light) !default;
 $tableHeaderCellBorderWidth: 0 0 1px 0 !default;
 $tableHeaderCellHoverBg: rgba(0, 0, 0, .04) !default;
 $tableHeaderCellTextHoverColor: $textColor !default;
-$tableHeaderCellIconColor: $textSecondaryColor !default;
+$tableHeaderCellIconColor: var(--text-color-subdued) !default;
 $tableHeaderCellIconHoverColor: $textSecondaryColor !default;
 $tableHeaderCellHighlightBg: #ffffff !default;
 $tableHeaderCellHighlightTextColor: $textColor !default;
@@ -513,19 +513,19 @@ $tableBodyRowTextColor: $textColor !default;
 $tableBodyRowEvenBg: rgba(0, 0, 0, .02) !default;
 $tableBodyRowHoverBg: rgba(0, 0, 0, .04) !default;
 $tableBodyRowTextHoverColor: $textColor !default;
-$tableBodyCellBorder: 1px solid #e4e4e4 !default;
+$tableBodyCellBorder: 1px solid var(--surface-border-light) !default;
 $tableBodyCellBorderWidth: 0 0 1px 0 !default;
 $tableBodyCellPadding: 1rem 1rem !default;
 
 $tableFooterCellPadding: 1rem 1rem !default;
 $tableFooterCellBg: #ffffff !default;
 $tableFooterCellTextColor: $textColor !default;
 $tableFooterCellFontWeight: 500 !default;
-$tableFooterCellBorder: 1px solid #e4e4e4 !default;
+$tableFooterCellBorder: 1px solid var(--surface-border-light) !default;
 $tableFooterCellBorderWidth: 0 0 1px 0 !default;
 $tableResizerHelperBg: $primaryColor !default;
 
-$tableFooterBorder: 1px solid #e4e4e4 !default;
+$tableFooterBorder: 1px solid var(--surface-border-light) !default;
 $tableFooterBorderWidth: 0 0 1px 0 !default;
 $tableFooterBg: #ffffff !default;
 $tableFooterTextColor: $textColor !default;
@@ -807,8 +807,8 @@ $skeletonBg: rgba(0, 0, 0, .08) !default;
 $skeletonAnimationBg: rgba(255, 255, 255, 0.4) !default;
 
 //splitter
-$splitterGutterBg: rgba(0, 0, 0, .04) !default;
-$splitterGutterHandleBg: rgba(0, 0, 0, .12) !default;
+$splitterGutterBg: var(--surface-border-light) !default;
+$splitterGutterHandleBg: var(--surface-border-light) !default;
 
 //speeddial
 $speedDialButtonWidth: 4rem !default;
@@ -834,10 +834,10 @@ $dockPadding: .5rem .5rem !default;
 $dockBorderRadius: .5rem !default;
 
 //image
-$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
+$imageMaskBg: rgba(0, 0, 0, 0.75) !default;
 $imagePreviewToolbarPadding: 1rem !default;
-$imagePreviewIndicatorColor: #f8f9fa !default;
-$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
+$imagePreviewIndicatorColor: var(--text-color) !default;
+$imagePreviewIndicatorBg: #1b807332 !default;
 $imagePreviewActionIconBg: transparent !default;
 $imagePreviewActionIconColor: #f8f9fa !default;
 $imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
@@ -847,11 +847,18 @@ $imagePreviewActionIconHeight: 3rem !default;
 $imagePreviewActionIconFontSize: 1.5rem !default;
 $imagePreviewActionIconBorderRadius: 50% !default;
 
+//petrinet
+$petri-nodeBorder: var(--gray-800);
+$petri-nodeFill: var(--surface);
+$petri-lineColor: var(--gray-700);
+$petri-inputBox: var(--gray-100);
+
+
 :root {
 	--border-radius: #{$borderRadius};
 	--border-radius-big: #{$bigBorderRadius};
 	--border-radius-bigger: #{$biggerBorderRadius};
-	--chevron-hover: #eeeeeeAA;
+	--chevron-hover: #1b807332;
 	--content-padding: #{$panelContentPadding};
 	--focus-ring: #{$focusShadow};
 	--font-body-large: #{$fontBodyLarge};
@@ -904,7 +911,7 @@ $imagePreviewActionIconBorderRadius: 50% !default;
 	--surface-f: #ffffff;
 	--surface-overlay: #ffffff;
 	--surface-ground: var(--gray-100);
-	--surface-highlight: #E3EFE4;
+	--surface-highlight: #EBF4F3;
 	--surface-hover: var(--gray-100);
 	--surface-secondary: #F9FAFB;
 	--surface-section: #ffffff;
@@ -914,5 +921,10 @@ $imagePreviewActionIconBorderRadius: 50% !default;
 	--text-color-secondary: #{$textSecondaryColor};
 	--text-color-subdued: rgb(102, 112, 133);
 	--text-color-light: rgb(152, 154, 160);
+	--constrain-width: 55rem;
 	color-scheme: light;
+	--petri-nodeBorder: #{$petri-nodeBorder};
+	--petri-nodeFill: var(--surface);
+	--petri-lineColor: #{$petri-lineColor};
+	--petri-inputBox: #{$petri-inputBox};
 }
@@ -111,6 +111,7 @@
                 border: $tableBodyCellBorder;
                 border-width: $tableBodyCellBorderWidth;
                 padding: $tableBodyCellPadding;
+                vertical-align: top;
 
                 .p-row-toggler,
                 .p-row-editor-init,

@@ -9,6 +9,7 @@
 			font-size: $accordionHeaderFontSize;
 			border-radius: $borderRadius;
 			transition: $listItemTransition;
+			align-items: baseline;
 
 			.p-accordion-toggle-icon {
 				margin-right: $inlineSpacing;
@@ -76,7 +77,7 @@
 		border-bottom-left-radius: $borderRadius;
 
 	}
-
+	
 	.p-accordion-tab {
 		margin-bottom: $accordionSpacing;
 

@@ -7,13 +7,18 @@
     .p-splitter-gutter {
         transition: $actionIconTransition;
         background: $splitterGutterBg;
+        width:6px;
 
         .p-splitter-gutter-handle {
-            background: $splitterGutterHandleBg;
+            background: transparent;
         }
     }
 
     .p-splitter-gutter-resizing {
         background: $splitterGutterHandleBg;
     }
+
+    .p-splitter-gutter:hover {
+        background-color: var(--primary-color-light);
+    }
 }