@finsemble/finsemble-ui 6.6.1 → 7.0.0-beta-X

package/react/assets/css/defaultTheme.css

@@ -12,36 +12,29 @@
 	--core-primary-3: #3d4455;
 	--core-primary-4: #5b606f;
 	--core-primary-5: #acb2c0;
-
 	--accent-primary: #42a5ba;
 	--accent-primary-1: #36788b;
-
 	--accent-positive: #2cc13f;
 	--accent-positive-1: #27ae38;
-
 	--accent-aware: #f5a623;
 	--accent-aware-1: #dc951f;
 	--accent-aware-2: #f0e400d9;
-
 	--accent-negative: #f26666;
 	--accent-negative-1: #b54f4f;
+	--scrollbar-color: #fff;
 
-	--scrollbar-color: #ffffff;
 	/* Font Variables:  Use these variables to make changes to the global font styles. */
 	--font-family: "OpenSans", sans-serif;
-
-	--font-color: #ffffff;
+	--font-color: #fff;
 	--font-color-1: var(--core-primary-5);
-	--font-color-1-shadow: rgba(172, 178, 192, 0.8); /* 172, 178, 19 same as --font-color-1: var(--core-primary-5);  */
-	--font-color-2: #000000;
-	--font-shadow: rgba(0, 0, 0, 0.5);
-	--font-shadow-light: rgba(255, 255, 255, 0.4);
-	--font-color-3: rgb(10, 140, 244);
-
+	--font-color-1-shadow: rgb(172 178 192 / 80%); /* 172, 178, 19 same as --font-color-1: var(--core-primary-5);  */
+	--font-color-2: #000;
+	--font-shadow: rgb(0 0 0 / 50%);
+	--font-shadow-light: rgb(255 255 255 / 40%);
+	--font-color-3: rgb(10 140 244);
 	--font-weight: 600;
 	--font-weight-1: 400;
 	--font-weight-2: bold;
-
 	--font-size: 12px;
 	--font-size-large: 14px;
 	--font-size-larger: 16px;
@@ -53,7 +46,6 @@
 	--toolbar-font-size: var(--font-size);
 	--toolbar-font-color: var(--font-color);
 	--toolbar-font-weight: var(--font-weight);
-
 	--toolbar-height: 39px;
 	--toolbar-brand-logo-width: 14px;
 	--toolbar-brand-logo-height: 16px;
@@ -62,26 +54,22 @@
 	--toolbar-background-color: var(--core-primary);
 	--toolbar-button-hover-color: var(--core-primary-3);
 	--toolbar-resize-area-color: var(--core-primary-3);
-
 	--toolbar-icon-workspace-color: var(--accent-aware);
 	--toolbar-icon-app-color: var(--accent-primary);
 	--toolbar-icon-font-size: 13px;
 	--toolbar-icon-color: var(--font-color);
-
-	--toolbar-separator: 1px solid rgba(255, 255, 255, 0.3);
+	--toolbar-separator: 1px solid rgb(255 255 255 / 30%);
 	--dashbar-divider-color: var(--toolbar-font-color);
 
 	/* Window Title bar */
 	--titleBar-height: 25px;
 	--titleBar-font-size: var(--font-size);
 	--titleBar-icon-font-size: 8px;
-	--titlebar-icon-color: var(--font-color);
 	--titleBar-font-weight: var(--font-weight);
 	--titleBar-active-font-color: var(--font-color); /* Not in use by default */
 	--titleBar-inactive-font-color: var(--font-color-1);
 	--titleBar-linker-font-color: var(--font-color-2);
 	--titleBar-linker-font-color-blur: var(--font-color);
-
 	--titleBar-background-inactive-color: var(--core-primary);
 	--titleBar-background-active-color: var(--core-primary);
 	--titlebar-tab-active-font-color: var(--font-color);
@@ -93,7 +81,6 @@
 	--titlebar-tab-inactive-background-color: var(--core-primary-1);
 	--titlebar-tab-ghost-background-color: var(--accent-primary-1);
 	--titlebar-tab-ghost-border-color: var(--accent-primary);
-
 	--titlebar-icon-color: var(--font-color-1);
 	--titlebar-icon-hover-color: var(--font-color);
 	--titleBar-button-hover-active-color: var(--core-primary-4);
@@ -111,7 +98,6 @@
 	--dialog-question-font-size: var(--font-size);
 	--dialog-question-font-weight: var(--font-weight-1);
 	--dialog-question-font-color: var(--font-color-1);
-
 	--dialog-background-color: var(--core-primary);
 	--dialog-font-color: var(--font-color);
 	--dialog-input-font-size: var(--font-size);
@@ -125,21 +111,17 @@
 	/* Buttons and Inputs */
 	--button-font-size: var(--font-size);
 	--button-font-weight: var(--font-weight);
-
 	--button-affirmative-background-color: var(--accent-primary);
 	--button-affirmative-border-color: transparent;
 	--button-affirmative-background-hover-color: var(--accent-primary-1);
 	--button-affirmative-border-hover-color: transparent;
-
 	--button-neutral-background-color: transparent;
 	--button-neutral-border-color: transparent;
 	--button-neutral-border-hover-color: var(--core-primary-5);
-
 	--button-negative-background-color: var(--accent-negative);
 	--button-negative-border-color: var(--accent-negative-1);
 	--button-negative-background-hover-color: var(--accent-negative-1);
 	--button-negative-border-hover-color: var(--accent-negative-1);
-
 	--button-disabled-color: var(--core-primary-4);
 	--input-negative-border-color: var(--accent-negative); /* Currently not in use */
 
@@ -151,21 +133,17 @@
 	--menu-font-color: var(--font-color);
 	--menu-active-workspace-font-weight: var(--font-weight-2);
 	--menu-active-workspace-font-color: var(--accent-aware);
-
 	--menu-background-color: var(--core-primary);
 	--menu-dragHandle-color: var(--core-primary-4);
 	--menu-actions-background-color: var(--core-primary);
 	--menu-actions-hover-color: var(--core-primary-3);
 	--menu-content-background-color: var(--core-primary);
 	--menu-content-hover-color: var(--core-primary-3);
-
 	--menu-favorite-hover-color: var(--accent-primary);
 	--menu-favorite-active-hover-color: var(--accent-primary-1);
 	--menu-delete-background-hover-color: var(--accent-negative);
-
 	--menu-linker-selected-font-color: var(--font-color);
 	--menu-linker-selected-font-size: var(--font-size);
-
 	--icon-avatar-default-background-color: var(--core-primary-4);
 	--icon-avatar-workspace-background-color: var(--accent-positive);
 	--icon-avatar-component-background-color: var(--accent-primary);
@@ -181,13 +159,10 @@
 	--search-input-clear-search-color: var(--core-primary-5);
 	--search-input-clear-search-hover-color: var(--menu-font-color);
 	--search-menu-header-color: var(--accent-primary);
-
 	--search-hover-background-color: var(--core-primary-3);
-
 	--search-header-font-size: 14px;
 	--search-header-font-color: var(--accent-primary);
 	--search-header-font-weight: var(--font-weight-2);
-
 	--search-result-font-color: var(--core-primary-5);
 	--search-result-font-weight: var(--font-weight-1);
 	--search-result-highlighter-color: var(--menu-font-color);
@@ -196,15 +171,13 @@
 	/* Window Frame */
 	--window-frame-inactive-color: var(--core-primary);
 	--window-frame-active-color: var(--core-primary-2);
-	--window-border-color: rgba(61, 69, 85, 0.2);
+	--window-border-color: rgb(61 69 85 / 20%);
 
 	/* Window Scrims and Masks */
 	--groupMask-background-color: var(--accent-primary);
 	--groupMask-border-color: var(--accent-primary-1);
-
 	--scrim-icon-font-color: var(--font-color);
 	--scrim-icon-font-size: 100px;
-
 	--scrim-positive-background-color: var(--accent-primary-1);
 	--scrim-negative-background-color: var(--accent-negative);
 
@@ -214,7 +187,6 @@
 	--content-header-font-color: var(--accent-primary);
 	--content-font-color: var(--font-color);
 	--content-font-weight: var(--font-weight);
-
 	--content-nav-header-font-size: 16px;
 	--content-nav-header-font-weight: var(--font-weight);
 	--content-nav-header-background-color: var(--core-primary-2);
@@ -224,23 +196,19 @@
 	--content-background-color: var(--core-primary-1);
 	--content-hint-font-color: var(--font-color-1);
 	--content-component-list-font-size: var(--font-size);
-
 	--content-list-border-color: var(--core-primary-5);
 	--content-list-highlighter: var(--core-primary-3);
 	--content-list-drag-icon-color: var(--core-primary-4);
 	--content-list-item-flagged-color: var(--accent-primary);
 	--content-list-editor-font-color: var(--font-color);
 	--content-list-editor-highlighted-text: var(--accent-primary);
-
 	--content-button-label-font-size: var(--font-size);
 	--content-button-disabled-border-color: var(--core-primary-2);
 	--content-button-icon-color: var(--font-color-1);
 	--content-button-neutral-hover-color: var(--core-primary-4);
-
 	--content-checkbox-check-color: var(--font-color);
 	--content-checkbox-background-color: var(--accent-primary);
 	--content-checkbox-unchecked-border-color: var(--core-primary-5);
-
 	--content-card-background-color: var(--core-primary-2);
 	--content-card-bestMatch-background-color: var(--core-primary-2);
 	--content-card-icon-background-color: var(--accent-primary-1);
@@ -248,7 +216,6 @@
 	--content-card-title-font-size: var(--font-size);
 	--content-back-font-size: 13px;
 	--content-close-hover-color: var(--accent-negative);
-
 	--content-warning-text: var(--accent-aware);
 	--content-restart-button-color: var(--accent-primary-1);
 
@@ -268,15 +235,12 @@
 	--procMonitor-font-weight: var(--font-weight-1);
 	--procMonitor-component-name-font-weight: var(--font-weight-1);
 	--procMonitor-process-name-font-weight: var(--font-weight);
-
 	--procMonitor-background-color: var(--core-primary);
 	--procMonitor-list-border-color: var(--core-primary-3);
 	--procMonitor-close-component-font-color: var(--font-color-1);
-
 	--procMonitor-warning-background-color: var(--accent-aware-1);
 	--procMonitor-negative-border-color: var(--accent-negative-1);
 	--procMonitor-negative-background-color: var(--accent-negative);
-
 	--procMonitor-close-hover-color: var(--accent-negative);
 
 	/* App Catalog */
@@ -337,20 +301,12 @@
 	/* Notifications */
 	--notification-primary-color: var(--core-primary);
 	--notification-secondary-color: var(--core-primary-5);
-
 	--notification-contrast-color: var(--accent-primary);
 	--notification-secondary-contrast-color: var(--core-primary-1);
-
 	--notification-background-color: var(--notification-primary-color);
 	--notification-drawer-background-color: var(--notification-secondary-contrast-color);
-
 	--notification-font-family: var(--font-family);
 	--notification-font-color: var(--font-color);
-
 	--notification-alert-dot-color: var(--accent-negative-1);
 	--notification-highlight-border-color: var(--accent-aware-2);
-
-	--content-button-neutral-hover-color: var(--core-primary-4);
-	--appMenu-edit-icon-hover-color: var(--core-primary-4);
-	--catalog-pagination-dots-active-color: var(--core-primary-4);
 }

package/react/assets/css/dialogs.css

@@ -7,17 +7,19 @@
 @import url("core/formElements.css");
 
 body.dialog {
-	-webkit-appearance: none;
+	appearance: none;
 	overflow: hidden;
 	color: var(--dialog-font-color);
+
 	/* Styling for General Typography */
+
 	/* Always Show Number Input Arrows, Give A Bit Of Space */
 }
 
-body.dialog html:before,
-body.dialog html:after,
-body.dialog body:before,
-body.dialog body:after {
+body.dialog html::before,
+body.dialog html::after,
+body.dialog body::before,
+body.dialog body::after {
 	content: "";
 	background: var(--window-frame-inactive-color);
 	position: fixed;
@@ -26,7 +28,7 @@ body.dialog body:after {
 }
 
 body.dialog p {
-	margin: 8px 0px;
+	margin: 8px 0;
 }
 
 body.dialog .dialog {
@@ -42,7 +44,7 @@ body.dialog .dialog-title {
 	font-size: var(--dialog-title-font-size);
 	text-align: left;
 	color: var(--dialog-title-font-color);
-	padding: 0px 4px 4px 4px;
+	padding: 0 4px 4px;
 }
 
 body.dialog .dialog-question {
@@ -50,7 +52,7 @@ body.dialog .dialog-question {
 	font-weight: var(--dialog-question-font-weight);
 	color: var(--dialog-question-font-color);
 	font-size: var(--dialog-question-font-size);
-	padding: 0px 4px;
+	padding: 0 4px;
 	margin-bottom: 10px;
 	text-align: left;
 	word-wrap: break-word;
@@ -86,7 +88,7 @@ body.dialog input:focus {
 .controls-wrapper input,
 body.dialog input {
 	font-family: var(--font-family);
-	-webkit-appearance: none;
+	appearance: none;
 	color: var(--dialog-input-font-color);
 	text-align: left;
 	font-size: var(--dialog-input-font-size);
@@ -97,14 +99,14 @@ body.dialog input {
 	height: 33px;
 	max-width: 100%;
 	padding: 3px 10px;
-	border: 0px;
+	border: 0;
 	border-bottom: 2px solid var(--dialog-input-border-color);
 	box-sizing: border-box;
 	transition: 0.2s ease-in;
 }
 
 .fsbl-button {
-	margin: 0px 6px;
+	margin: 0 6px;
 	width: 124px;
 	height: 35px;
 	border-radius: 4px;

package/react/assets/css/favorites.css

@@ -13,13 +13,6 @@
 	white-space: nowrap;
 }
 
-/*
-.favorite-maker {
-	position: absolute;
-	right: 0;
-}
-*/
-
 .rearrange-region div {
 	cursor: pointer;
 }
@@ -39,6 +32,7 @@
 }
 
 /* All the .gu-* styles are used by Dragula to make reordering a component beautiful */
+
 /* The mirror of the item that's being dragged */
 .gu-mirror {
 	/* We don't want to see the mirror of the dragged component */
@@ -48,50 +42,11 @@
 /* The item that's being dragged */
 .gu-transit {
 	opacity: 0.2;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+	/* stylelint-disable-next-line function-no-unknown */
 	filter: alpha(opacity=20);
 }
 
-.chevron-container {
-	display: flex;
-	align-items: center;
-}
-
-.scroll-button {
-	color: var(--toolbar-scroll-button-color);
-	margin: 8px 3px;
-	padding: 5px;
-	font-size: 10px;
-	border: 1px solid transparent;
-	border-radius: 50px;
-	height: 10px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.ff-chevron-left:before {
-	padding-right: 2px;
-}
-
-.ff-chevron-right:before {
-	padding-left: 2px;
-}
-
-.scroll-button:hover {
-	background: var(--toolbar-button-hover-color);
-	cursor: pointer;
-}
-
-.greyedOut {
-	opacity: 0.3;
-}
-
-.greyedOut:hover {
-	background: transparent;
-	cursor: default;
-}
-
 #favoritesContainer {
 	overflow: hidden;
 	display: flex;

package/react/assets/css/finsemble.css

@@ -11,7 +11,11 @@
 @import url("./font-finance.css");
 @import url("./fonts/Open_Sans/OpenSans-Definition.css");
 @import url("./focus.css");
+
+@import url("./shared/common.css");
+
 .hidden {
+	/* stylelint-disable-next-line declaration-no-important */
 	display: none !important;
 }
 
@@ -22,8 +26,8 @@
 /* Gives the control icons the proper width on websites using bootstrap. */
 
 i,
-i:before,
-i:after,
+i::before,
+i::after,
 .fsbl-window-manager-icon {
 	box-sizing: content-box;
 }