Skip to content

Commit

Permalink
update the glow on frame borders
Browse files Browse the repository at this point in the history
  • Loading branch information
@rukmini-bose
rukmini-bose committed Jun 25, 2024
1 parent b457d8a commit 4d54c33
Showing 1 changed file with 40 additions and 30 deletions.
70 changes: 40 additions & 30 deletions src/styles/_constants-darkmatter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@

/************************************************** DARKMATTER THEME*/
// Fonts
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap'); // Body Font, Exo
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap');// Temporary numeric font, Chakra Petch (need to import local font instead).
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap'); // Temporary numeric font, Chakra Petch (need to import local font instead).
$heroFont: 'Teko', sans-serif;
$headerFont: 'Cabin Condensed', sans-serif;
$bodyFont: 'Exo', sans-serif;
Expand All @@ -45,7 +45,7 @@ $numericFont: 'Chakra Petch', sans-serif;
font-size: $size;
}

@mixin numericFont($size: 1em){
@mixin numericFont($size: 1em) {
font-family: $numericFont;
font-size: $size;
}
Expand All @@ -70,15 +70,16 @@ $numericFont: 'Chakra Petch', sans-serif;
}

@mixin themedButton($c: $colorBtnBg) {
background: radial-gradient(rgba($c, 1) , rgba($c, .7));
background: radial-gradient(rgba($c, 1), rgba($c, 0.7));
box-shadow: rgba(black, 0.5) 0 0.5px 2px;
}

@mixin telemetryView(){
@mixin telemetryView() {
border-radius: $controlCr;
}

@mixin browseFrameBorder() { // Used on main object container to add highlighted corners to non-hidden frames.
@mixin browseFrameBorder() {
// Used on main object container to add highlighted corners to non-hidden frames.
border-image: radial-gradient(circle, #575757, #6c6c6c, #818181, #979797, #aeaeae);
border-style: solid;
padding: 10px;
Expand All @@ -92,18 +93,17 @@ $numericFont: 'Chakra Petch', sans-serif;
linear-gradient(to bottom, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 0,
linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 0 100%,
linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 100%,
rgb(0, 0, 0, .4);
rgb(0, 0, 0, 0.4);

background-repeat: no-repeat;
background-size: 35px 35px;
border-radius: $interiorMarginLg;
box-shadow: 0px 0px 20px 2px rgb(140 140 140 / 20%);
box-shadow: 0px 0px 8px 4px rgb(140 140 140 / 24%);
}


// Functions
@function buttonBg($c: $colorBtnBg) {
@return radial-gradient(rgba($colorBodyBg, 1) , rgba($colorBodyBg, .6));
@return radial-gradient(rgba($colorBodyBg, 1), rgba($colorBodyBg, 0.6));
}

@function pullForward($val, $amt) {
Expand All @@ -130,14 +130,15 @@ $colorBodyFg: #aaaaaa;
$colorBodyFgSubtle: #9c9c9c;
$colorBodyFgEm: #fff;
$colorGenBg: #222;
$colorHeadBg: rgba($colorBodyBg, .5);
$colorHeadBg: rgba($colorBodyBg, 0.5);
$colorHeadFg: $colorBodyFg;
$colorKey: #1C67E3;
$colorKey: #1c67e3;
$colorKeyBg: #015fca;
$colorKeyFg: #fff; // Darker version of colorKey for use in major buttons
$colorKeyHov: lighten($colorKey, 10%);
$colorKeyBgHov: lighten($colorKeyBg, 10%);
$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%) contrast(200%);
$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%)
contrast(200%);
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
contrast(100%);
$colorKeySelectedBg: $colorKey;
Expand All @@ -148,7 +149,7 @@ $colorAHov: #fff;
$filterHov: brightness(1.3) contrast(1.5); // Tree, location items
$filterHovSubtle: brightness(1.2) contrast(1.2);
$colorSelectedBg: rgba($colorKey, 0.3);
$colorSelectedFg: darken($colorBodyFg, .8);
$colorSelectedFg: darken($colorBodyFg, 0.8);
$colorSelectedGlow: rgba($colorKeyFg, 0.58); // Glow around selected item

// Body constants
Expand All @@ -173,11 +174,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
$colorStatusFg: #888;
$colorStatusDefault: #ccc;
$colorStatusInfo: #60ba7b;
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
contrast(92%);
$colorStatusAlert: #ffb66c;
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
contrast(101%);
$colorStatusError: #da0004;
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
contrast(115%);
$colorStatusBtnBg: #666; // Where is this used?
$colorStatusPartialBg: #3f5e8b;
$colorStatusCompleteBg: #457638;
Expand Down Expand Up @@ -235,25 +239,28 @@ $timeConductorActivePanBg: #226074;

// Browse
$browseFrameColor: pullForward($colorBodyBg, 10%);
$browseFrameBorder: 1px solid rgb(89, 89, 89, .4); // Frames in Disp and Flex Layouts when frame is showing
$browseFrameBorder: 1px solid rgb(89, 89, 89, 0.4); // Frames in Disp and Flex Layouts when frame is showing
$browseSelectableShdwHov: rgba($colorBodyFg, 0) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
$filterItemHoverFg: brightness(1.2) contrast(1.1);
$interiorMarginObjectFrameVertical: 10px;
$interiorMarginObjectFrameHorizontal: 10px;
$layoutCornerSize: 5px;

// Missing Items
// Missing Items
$filterItemMissing: brightness(0.6) grayscale(1);
$opacityMissing: 0.5;
$borderMissing: 1px dashed $colorAlert !important;
$browseFrameCornerColor: $colorKey 4px; //Color used for the corners of frames

// Edit
$editUIColor: $uiColor; // Base color
$editUIColorBg: $editUIColor;
$editUIColorFg: #fff;
$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
$editUIColorHov: pullForward(
saturate($uiColor, 10%),
10%
); // Hover color when $editUIColor is applied as a base color
$editUIBaseColor: #344b8d; // Base color, toolbar bg
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
Expand All @@ -272,7 +279,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
$editFrameMovebarColorFg: pullForward(
$editFrameMovebarColorBg,
20%
); // Grippy lines, container size text
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
Expand Down Expand Up @@ -377,13 +387,13 @@ $colorInspectorBg: $colorBodyBg;
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: $colorBodyFg;
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, .9);
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 0.9);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 80%);

// Tabs
$colorTabBg: #2c2c34;
$colorTabFg: $colorBodyFgEm;
$colorTabCurrentBg: radial-gradient(circle, rgba($colorKey,0.8) 58%, rgba(0,59,156,1) 100%);
$colorTabCurrentBg: radial-gradient(circle, rgba($colorKey, 0.8) 58%, rgba(0, 59, 156, 1) 100%);
$colorTabCurrentFg: $colorBodyFgEm;
$colorTabsBaseline: $colorBodyBg;

Expand Down Expand Up @@ -414,7 +424,7 @@ $colorLimitYellowIc: #fdc707;
$colorLimitOrangeBg: #b36b00;
$colorLimitOrangeFg: #ffe0b2;
$colorLimitOrangeIc: #ff9900;
$colorLimitRedBg: #B60109;
$colorLimitRedBg: #b60109;
$colorLimitRedFg: #ffa489;
$colorLimitRedIc: #ff4222;
$colorLimitPurpleBg: #891bb3;
Expand All @@ -425,7 +435,7 @@ $colorLimitCyanFg: #d3faff;
$colorLimitCyanIc: #6bedff;

// Events
$colorEventPurpleFg: #aB8fff;
$colorEventPurpleFg: #ab8fff;
$colorEventRedFg: #ff9999;
$colorEventOrangeFg: #ff8800;
$colorEventYellowFg: #ffdb63;
Expand Down Expand Up @@ -476,17 +486,17 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);

// Gauges
$colorGaugeBase: $colorKeyBg;
$colorGaugeBg: rgba($colorGaugeBase, .35); // Gauge radial area background, meter background
$colorGaugeBg: rgba($colorGaugeBase, 0.35); // Gauge radial area background, meter background
$colorGaugeValue: $colorKeyBg; // Gauge value graphic (radial sweep, bar) color
$colorGaugeTextValue: #fff; // Radial gauge text value
$colorGaugeMeterTextValue: #fff; // Meter text value, overlaid on value bar
$colorGaugeRange: $colorBodyFg; // Range text color
$colorGaugeLimitHigh: rgba($colorLimitRedBg, .5);
$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.5);
$colorGaugeLimitLow: $colorGaugeLimitHigh;
$colorGaugeNeedle: $colorGaugeBase; // Color of needle in a needle gauge.
$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
$gaugeMeterValueShadow: rgba(255, 255, 255, .2);
$gaugeMeterValueShadow: rgba(255, 255, 255, 0.2);
// TODO: This is some code regarding how we can make Gauges include a border or glow. We may need to revisit this.
// padding: 5%;
// background: radial-gradient(circle, transparent 0%, transparent 65%, rgba(255, 255, 255,0.4) 64%, rgba(255,255,255,0) 70%)
Expand Down Expand Up @@ -539,7 +549,7 @@ $colorThumbHoverBg: $colorItemTreeHoverBg;
// Scrollbar
$scrollbarTrackSize: 7px;
$scrollbarTrackShdw: rgba(#ffffff, 0.4) 0 1px 2px;
$scrollbarTrackColorBg: rgba($colorKey, .2);
$scrollbarTrackColorBg: rgba($colorKey, 0.2);
$scrollbarThumbColor: darken($colorKeyBg, 15%);
$scrollbarThumbColorHov: pushBack($colorKeyBg, 20%);
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
Expand Down

0 comments on commit 4d54c33

Please sign in to comment.