Skip to content

Commit 553e555

Browse files
mattrunyonmattrunyon
authored
Fix custom scss so it will work with enterprise node_modules (#119)
1 parent 4b00e1e commit 553e555

File tree

6 files changed

+292
-276
lines changed

6 files changed

+292
-276
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"clean:build": "lerna run clean --stream",
1111
"clean:modules": "lerna clean --yes",
1212
"clean": "npm run clean:build && npm run clean:modules",
13-
"bootstrap": "lerna bootstrap --hoist --nohoist=bootstrap -- --no-audit --prefer-offline",
13+
"bootstrap": "lerna bootstrap --hoist -- --no-audit --prefer-offline",
1414
"build": "lerna run build --stream",
1515
"build:app": "lerna run --scope=@deephaven/code-studio build",
1616
"build:packages": "lerna run --ignore=@deephaven/code-studio build --stream",

‎packages/components/scss/bootstrap_overrides.scss‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
// Styling overrides for bootstrap
2+
3+
// Override / set color variables
4+
$red: #f95d84;
5+
$orange: #f37e3f;
6+
$yellow: #fcd65b;
7+
$green: #9edc6f;
8+
$blue: #76d9e4;
9+
$purple: #aa9af4;
10+
11+
//Define some UI colors
12+
$interfacegray: #2d2a2e;
13+
$interfaceblue: #4878ea;
14+
$interfacewhite: #f0f0ee; //same as gray-200
15+
$interfaceblack: #1a171a;
16+
17+
//Define our Gray scale
18+
$white: $interfacewhite;
19+
$gray-100: #fcfcfa;
20+
$gray-200: $interfacewhite;
21+
$gray-300: #c0bfbf;
22+
$gray-400: #929192;
23+
$gray-500: #5b5a5c;
24+
$gray-600: #555356;
25+
$gray-700: #403e41;
26+
$gray-800: #373438;
27+
$gray-850: #322f33;
28+
$gray-900: #211f22;
29+
$black: $interfaceblack;
30+
$content-bg: $interfacegray;
31+
$background: $interfaceblack;
32+
$foreground: $interfacewhite;
33+
34+
//Load colors into map
35+
$colors: ();
36+
$colors: map-merge(
37+
(
38+
'red': $red,
39+
'orange': $orange,
40+
'yellow': $yellow,
41+
'green': $green,
42+
'blue': $blue,
43+
'purple': $purple,
44+
'white': $white,
45+
'black': $black,
46+
),
47+
$colors
48+
);
49+
50+
//Set default colors
51+
$body-bg: $black;
52+
$body-color: $interfacewhite;
53+
54+
// Set brand colors
55+
$primary: $interfaceblue;
56+
$primary-hover: darken($primary, 8%);
57+
$primary-dark: mix($primary, $content-bg, 25%);
58+
$primary-light: scale-color($primary, $lightness: -25%);
59+
$secondary: $gray-500;
60+
$secondary-hover: darken($secondary, 8%);
61+
$success: $green;
62+
$info: $yellow;
63+
$warning: $orange;
64+
$danger: $red;
65+
$danger-hover: darken($danger, 8%);
66+
$light: $gray-100;
67+
$mid: $gray-400; //Added a mid color, useful for input styling
68+
$dark: $gray-800;
69+
$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);
70+
71+
$theme-colors: () !default;
72+
$theme-colors: map-merge(
73+
(
74+
'primary': $primary,
75+
'primary-hover': $primary-hover,
76+
'primary-light': $primary-light,
77+
'primary-dark': $primary-dark,
78+
'secondary': $secondary,
79+
'success': $success,
80+
'info': $info,
81+
'warning': $warning,
82+
'danger': $danger,
83+
'light': $light,
84+
'dark': $dark,
85+
'mid': $mid,
86+
'content-bg': $interfacegray,
87+
'background': $interfaceblack,
88+
'foreground': $interfacewhite,
89+
),
90+
$theme-colors
91+
);
92+
93+
$component-active-bg: $primary;
94+
$theme-color-interval: 9%;
95+
$yiq-contrasted-threshold: 180;
96+
97+
// Override fonts
98+
$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,
99+
'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks
100+
$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',
101+
'Courier New', monospace;
102+
$font-family-base: $font-family-sans-serif;
103+
104+
$headings-font-weight: 400;
105+
106+
//Text overides
107+
$text-muted: $gray-400;
108+
109+
//Style Selection highlight color
110+
//so browsers add alpha to your color by default, ignoring opacity 1
111+
//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied
112+
$text-select-color: $primary-hover;
113+
$text-select-color-editor: lighten(
114+
$gray-700,
115+
15%
116+
); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.
117+
118+
//Grid variables, same value as default just making easily accessible
119+
$grid-gutter-width: 30px;
120+
121+
//Visual Overrides
122+
$border-radius: 4px;
123+
$box-shadow: 0 0.1rem 1rem rgba($black, 0.45); //because our UI is so dark, we need darker default shadows
124+
$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 0.45); //darkest shadow for $black popups over $black UI
125+
126+
//Override Btn
127+
$btn-border-radius: 4rem;
128+
$btn-padding-x: 1.5rem;
129+
$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,
130+
border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long
131+
$btn-border-width: 2px;
132+
133+
//Override Inputs
134+
$input-bg: $gray-600;
135+
$input-disabled-bg: $gray-800;
136+
$input-color: $interfacewhite;
137+
$input-border-color: $gray-400;
138+
$input-placeholder-color: $gray-400;
139+
$input-focus-border-color: rgba($primary, 0.85);
140+
141+
$input-btn-focus-width: 0.2rem;
142+
$input-btn-focus-color: rgba($component-active-bg, 0.35);
143+
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
144+
145+
//checkbox
146+
$custom-control-indicator-bg: $gray-600;
147+
$custom-control-indicator-bg-size: 75% 75%;
148+
$custom-control-indicator-disabled-bg: $gray-800;
149+
$custom-control-indicator-checked-disabled-bg: $gray-800;
150+
$custom-control-label-disabled-color: $gray-400;
151+
152+
//Custom Select
153+
$custom-select-indicator-color: $gray-400;
154+
$custom-select-bg-size: 16px 16px;
155+
//dhSort icon encoded
156+
$custom-select-indicator: str-replace(
157+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E"),
158+
'#',
159+
'%23'
160+
);
161+
$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;
162+
$custom-select-disabled-color: darken($gray-400, 5%);
163+
$custom-select-disabled-bg: $gray-800;
164+
165+
//modal
166+
$modal-content-bg: $gray-200;
167+
$modal-content-border-width: 0;
168+
$modal-md: 550px;
169+
170+
// Toast notification
171+
$toast-bg: $primary-dark;
172+
$toast-color: $foreground;
173+
$toast-error-bg: mix($danger, $content-bg, 15%);
174+
$toast-error-color: $foreground;
175+
176+
//tooltips
177+
$tooltip-bg: $gray-700;
178+
$tooltip-color: $interfacewhite;
179+
$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 0.8);
180+
181+
//drowdowns
182+
$dropdown-bg: $gray-600;
183+
$dropdown-link-color: $interfacewhite;
184+
$dropdown-link-hover-color: $interfacewhite;
185+
$dropdown-link-hover-bg: $primary;
186+
$dropdown-divider-bg: $gray-700;
187+
188+
//context menus
189+
$contextmenu-bg: $gray-600;
190+
$contextmenu-color: $foreground;
191+
$contextmenu-disabled-color: $text-muted;
192+
$contextmenu-keyboard-selected-bg: rgba($primary, 0.5);
193+
$contextmenu-selected-bg: $primary;
194+
$contextmenu-selected-color: $foreground;
195+
196+
//links
197+
$link-color: $gray-400;
198+
$link-hover-color: $interfacewhite;
199+
200+
//progress-bar
201+
$progress-bg: $gray-600;
202+
$progress-border-radius: 1rem;
203+
204+
// Set global options
205+
$enable-shadows: false;
206+
$enable-gradients: false;
207+
$enable-print-styles: false; //I don't think anyone should expect to "print" this app.
208+
209+
// Transition times
210+
$transition: 0.15s;
211+
$transition-mid: 0.2s;
212+
$transition-long: 0.3s;
213+
$transition-slow: 1s;
214+
215+
//form-validation icon, uses vsIssues icon encoded here as svg
216+
$form-feedback-icon-invalid-color: theme-color('danger');
217+
$form-feedback-icon-invalid: str-replace(
218+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M3.889 3.095a6.5 6.5 0 117.222 10.81A6.5 6.5 0 013.89 3.095zm.555 9.978a5.5 5.5 0 106.111-9.145 5.5 5.5 0 00-6.11 9.145zM8 5H7v5h1V5zm0 6H7v1h1v-1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E "),
219+
'#',
220+
'%23'
221+
);

0 commit comments

Comments
 (0)