maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

KUI Dark mode (#28975)

Browse source 
KUI now ouputs two files, one for dark, one for light.
This commit is contained in:
dave.snider@gmail.com 2019-01-22 13:26:49 -08:00 committed by GitHub
parent 0e00c3ffef
commit 690f4714cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 3182 additions and 953 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
packages/kbn-ui-framework/Gruntfile.js
View file

@ -104,9 +104,14 @@ module.exports = function (grunt) {
Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done);
});
grunt.registerTask('compileCss', function () {
grunt.registerTask('compileCssLight', function () {
const done = this.async();
uiFrameworkCompile().then(done);
uiFrameworkCompileLight().then(done);
});
grunt.registerTask('compileCssDark', function () {
const done = this.async();
uiFrameworkCompileDark().then(done);
});
function uiFrameworkServerStart() {
@ -141,9 +146,36 @@ module.exports = function (grunt) {
});
}
function uiFrameworkCompile() {
const src = 'src/index.scss';
const dest = 'dist/ui_framework.css';
function uiFrameworkCompileLight() {
const src = 'src/kui_light.scss';
const dest = 'dist/kui_light.css';
return new Promise(resolve => {
sass.render({
file: src,
}, function (error, result) {
if (error) {
grunt.log.error(error);
}
postcss([postcssConfig])
.process(result.css, { from: src, to: dest })
.then(result => {
grunt.file.write(dest, result.css);
if (result.map) {
grunt.file.write(`${dest}.map`, result.map);
}
resolve();
});
});
});
}
function uiFrameworkCompileDark() {
const src = 'src/kui_dark.scss';
const dest = 'dist/kui_dark.css';
return new Promise(resolve => {
sass.render({
@ -175,7 +207,8 @@ module.exports = function (grunt) {
grunt.util.spawn({
cmd: isPlatformWindows ? '.\\node_modules\\.bin\\grunt.cmd' : './node_modules/.bin/grunt',
args: [
'compileCss',
'compileCssLight',
'compileCssDark',
],
}, (error, result) => {
if (error) {

2889
packages/kbn-ui-framework/dist/kui_dark.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

498
packages/kbn-ui-framework/dist/ui_framework.css → packages/kbn-ui-framework/dist/kui_light.css vendored
View file

File diff suppressed because it is too large Load diff

10
packages/kbn-ui-framework/doc_site/src/components/guide/_guide.scss
View file

@ -4,7 +4,7 @@ html {
.guideBody {
height: 100%;
background-color: #000000;
background-color: $euiColorFullShade;
margin: 0;
min-width: $guideMinWidth;
}
@ -61,7 +61,7 @@ html {
display: flex;
justify-content: center;
flex: 1 0 auto;
background-color: #ffffff;
background-color: $euiColorEmptyShade;
}
.guideContentPage__hint {
@ -74,7 +74,7 @@ html {
padding: 30px;
margin: 20px;
border-radius: 4px;
background-color: #e8e8e8;
background-color: $euiColorLightestShade;
line-height: $guideLineHeight;
}
@ -96,11 +96,11 @@ html {
}
.guideWarning {
border-left: 5px solid #e8488b;
border-left: 5px solid $euiColorAccent;
margin-top: 19px;
padding: 0 14px;
line-height: 21px;
color: #e8488b;
color: $euiColorAccent;
}
.guideBreak {

4
packages/kbn-ui-framework/doc_site/src/components/guide_code/_guide_code.scss
View file

@ -1,6 +1,6 @@
.guideCode {
padding: 2px 4px;
font-family: 'Ubuntu Mono', monospace;
background-color: #e8e8e8;
color: #565656;
background-color: $euiColorLightestShade;
color: $euiColorDarkShade;
}

10
packages/kbn-ui-framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
View file

@ -5,11 +5,11 @@
bottom: 0;
width: $guideCodeViewerWidth;
padding: 6px 0 40px;
background-color: white;
background-color: $euiColorEmptyShade;
transform: translateX($guideCodeViewerWidth);
transition: transform $guideCodeViewerTransition;
overflow: auto;
border-left: 1px solid #d6d6d6;
border-left: $euiBorderThin;
@include scrollbar;
@ -25,7 +25,7 @@
.guideCodeViewer__header {
padding: 0 20px 6px;
line-height: $guideLineHeight;
border-bottom: 1px solid #d6d6d6;
border-bottom: $euiBorderThin;
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
@ -47,7 +47,7 @@
.guideCodeViewer__title {
padding: 0 20px 6px;
border-bottom: 1px solid #d6d6d6;
border-bottom: $euiBorderThin;
line-height: $guideLineHeight;
font-size: 14px;
}
@ -61,7 +61,7 @@
.hljs {
display: block;
padding: 15px 20px;
color: #637c84;
color: $euiColorDarkShade;
font-size: 14px;
line-height: 1.3;
font-family: 'Ubuntu Mono', monospace;

16
packages/kbn-ui-framework/doc_site/src/components/guide_components.scss
View file

@ -1,5 +1,5 @@
$guideVerticalRhythm: 20px;
$guideLineHeight: 24px;
$guideVerticalRhythm: $euiSize;
$guideLineHeight: $euiSizeL;
$guideNavHeight: 60px;
$guideSideNavWidth: 400px;
$guideSideNavSmallWidth: 220px;
@ -9,11 +9,11 @@ $guideCodeViewerTransition: 0.2s ease;
$guideChromeTransition: 0.3s ease;
// Colors
$guideBaseBackgroundColor: #f7f7f7;
$guidePanelBackgroundColor: #ffffff;
$guideTextColor: #444;
$guideLinkColor: #00a9e5;
$guideLinkHoverColor: #00a9e5;
$guideBaseBackgroundColor: $euiColorLightestShade;
$guidePanelBackgroundColor: $euiColorEmptyShade;
$guideTextColor: $euiColorDarkestShade;
$guideLinkColor: $euiColorPrimary;
$guideLinkHoverColor: darken($euiColorPrimary, 10%);
// Breakpoints
$guideMinWidth: 840px;
@ -31,7 +31,7 @@ $guideNormalBreakpoint: 1900px;
}
}
@mixin scrollbar($color: rgba(#454D58, 0.4)) {
@mixin scrollbar($color: $euiBorderColor) {
&::-webkit-scrollbar {
width: 16px;
height: 16px;

9
packages/kbn-ui-framework/doc_site/src/components/guide_demo/_guide_demo.scss
View file

@ -8,21 +8,16 @@
margin-top: 0;
}
.guideDemo--darkTheme {
background-color: #272727;
padding: 10px;
}
.guideDemo__highlightGrid {
.kuiFlexItem {
background: transparentize(#0096CC, .9);
background: transparentize($euiColorPrimary, .9);
padding: 16px;
}
}
.guideDemo__highlightGridWrap {
.kuiFlexItem div {
background: transparentize(#0096CC, .9);
background: transparentize($euiColorPrimary, .9);
padding: 16px;
}
}

5
packages/kbn-ui-framework/doc_site/src/components/guide_demo/guide_demo.js
View file

@ -55,7 +55,6 @@ export class GuideDemo extends Component {
render() {
const {
isFullScreen,
isDarkTheme,
children,
className,
js, // eslint-disable-line no-unused-vars
@ -66,8 +65,6 @@ export class GuideDemo extends Component {
const classes = classNames('guideDemo', className, {
'guideDemo--fullScreen': isFullScreen,
'guideDemo--darkTheme': isDarkTheme,
'theme-dark': isDarkTheme,
});
return (
@ -88,7 +85,6 @@ GuideDemo.propTypes = {
html: PropTypes.string.isRequired,
css: PropTypes.string.isRequired,
isFullScreen: PropTypes.bool.isRequired,
isDarkTheme: PropTypes.bool.isRequired,
};
GuideDemo.defaultProps = {
@ -96,5 +92,4 @@ GuideDemo.defaultProps = {
html: '',
css: '',
isFullScreen: false,
isDarkTheme: false,
};

10
packages/kbn-ui-framework/doc_site/src/components/guide_nav/_guide_nav.scss
View file

@ -8,7 +8,7 @@
right: 0;
min-width: $guideMinWidth;
height: $guideNavHeight;
border-bottom: 1px solid #CCCCCC;
border-bottom: $euiBorderThin;
color: $guideTextColor;
background-color: $guidePanelBackgroundColor;
transition:
@ -16,11 +16,11 @@
height 0.3s ease,
box-shadow 0.3s linear;
overflow: hidden;
box-shadow: 0 0 0 rgba(black, 0.3);
@include euiBottomShadowMedium;
&.is-guide-nav-open {
height: 100%;
box-shadow: 0 40px 200px rgba(black, 0.05);
@include euiBottomShadow;
}
&.is-chrome-hidden {
@ -182,14 +182,14 @@
line-height: 10px;
padding: 4px 20px;
color: $guideLinkHoverColor;
background-color: #fff;
background-color: $euiColorEmptyShade;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
&:hover,
&:active {
background-color: #e6f7fc;
background-color: $euiColorLightestShade;
}
&.guideNavPaginationButton-isDisabled {

8
packages/kbn-ui-framework/doc_site/src/components/guide_page/_guide_page.scss
View file

@ -11,7 +11,7 @@
$scrollBarWidth: 20px;
background-color: $guidePanelBackgroundColor;
border: 1px solid #CCCCCC;
border: $euiBorderThin;
border-radius: 4px;
flex: 1 1 auto;
padding: 40px 60px;
@ -34,3 +34,9 @@
}
}
}
.guidePageKillScreen {
background-color: tintOrShade($euiColorDanger, 90%, 70%);
padding: $euiSizeL;
margin-bottom: $euiSizeL;
}

2
packages/kbn-ui-framework/doc_site/src/components/guide_page/guide_page.js
View file

@ -62,7 +62,7 @@ export class GuidePage extends Component {
</GuidePageSideNav>
<div className="guidePageBody">
<div style={{ marginBottom: 40, backgroundColor: '#ffec9d', padding: 20 }}>
<div className="guidePageKillScreen">
<h1 className="guideTitle">
The Kibana UI Framework has been DEPRECATED.
</h1>

4
packages/kbn-ui-framework/doc_site/src/components/guide_section/_guide_section.scss
View file

@ -21,7 +21,7 @@
line-height: 10px;
padding: 4px 10px;
color: $guideLinkHoverColor;
background-color: #fff;
background-color: $euiColorEmptyShade;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
@ -30,7 +30,7 @@
&:hover,
&:active {
background-color: #e6f7fc;
background-color: $euiColorLightestShade;
}
.is-chrome-hidden & {

9
packages/kbn-ui-framework/doc_site/src/main.scss
View file

@ -1,3 +1,8 @@
@import "~@elastic/eui/src/global_styling/index";
@import "../../dist/ui_framework.css";
@import '~@elastic/eui/src/themes/k6/k6_globals';
@import '~@elastic/eui/src/themes/k6/k6_colors_dark';
@import '~@elastic/eui/src/global_styling/functions/index';
@import '~@elastic/eui/src/global_styling/variables/index';
@import '~@elastic/eui/src/global_styling/mixins/index';
@import '~@elastic/eui/src/global_styling/reset/index';
@import "../../dist/kui_dark.css";
@import "./components/guide_components";

4
packages/kbn-ui-framework/doc_site/src/views/button/button_example.js
View file

@ -94,10 +94,6 @@ export default props => (
<GuideDemo>
<Basic />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<Basic />
</GuideDemo>
</GuideSection>
<GuideSection

25
packages/kbn-ui-framework/doc_site/src/views/form/form_example.js
View file

@ -103,10 +103,6 @@ export default props => (
<GuideDemo>
<TextInput/>
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<TextInput/>
</GuideDemo>
</GuideSection>
<GuideSection
@ -126,11 +122,6 @@ export default props => (
<GuideDemo
html={assistedInputHtml}
/>
<GuideDemo
html={assistedInputHtml}
isDarkTheme
/>
</GuideSection>
<GuideSection
@ -143,11 +134,6 @@ export default props => (
<GuideDemo
html={searchInputHtml}
/>
<GuideDemo
html={searchInputHtml}
isDarkTheme
/>
</GuideSection>
<GuideSection
@ -179,10 +165,6 @@ export default props => (
<GuideDemo>
<TextArea/>
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<TextArea/>
</GuideDemo>
</GuideSection>
<GuideSection
@ -213,10 +195,6 @@ export default props => (
<GuideDemo>
<CheckBox/>
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<CheckBox/>
</GuideDemo>
</GuideSection>
<GuideSection
@ -233,9 +211,6 @@ export default props => (
<Select/>
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<Select/>
</GuideDemo>
</GuideSection>
</GuidePage>
);

5
packages/kbn-ui-framework/doc_site/src/views/link/link_example.js
View file

@ -40,11 +40,6 @@ export default props => (
<GuideDemo
html={linkHtml}
/>
<GuideDemo
html={linkHtml}
isDarkTheme={true}
/>
</GuideSection>
</GuidePage>
);

36
packages/kbn-ui-framework/doc_site/src/views/local_nav/local_nav_example.js
View file

@ -86,10 +86,6 @@ export default props => (
<GuideDemo>
<SimpleLocalNav />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<SimpleLocalNav />
</GuideDemo>
</GuideSection>
<GuideSection
@ -112,10 +108,6 @@ export default props => (
<GuideDemo>
<LocalNavWithBreadcrumbs />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithBreadcrumbs />
</GuideDemo>
</GuideSection>
<GuideSection
@ -139,9 +131,6 @@ export default props => (
<LocalNavWithSearch />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithSearch />
</GuideDemo>
</GuideSection>
<GuideSection
@ -160,10 +149,6 @@ export default props => (
<GuideDemo>
<LocalNavWithSearchError />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithSearchError />
</GuideDemo>
</GuideSection>
<GuideSection
@ -190,10 +175,6 @@ export default props => (
<GuideDemo>
<LocalNavWithMenuItemStates />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithMenuItemStates />
</GuideDemo>
</GuideSection>
<GuideSection
@ -216,10 +197,6 @@ export default props => (
<GuideDemo>
<LocalNavWithDropdown />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithDropdown />
</GuideDemo>
</GuideSection>
<GuideSection
@ -242,10 +219,6 @@ export default props => (
<GuideDemo>
<LocalNavWithDropdownPanels />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithDropdownPanels />
</GuideDemo>
</GuideSection>
<GuideSection
@ -268,10 +241,6 @@ export default props => (
<GuideDemo>
<LocalNavWithTabs />
</GuideDemo>
<GuideDemo isDarkTheme={true}>
<LocalNavWithTabs />
</GuideDemo>
</GuideSection>
<GuideSection
@ -284,11 +253,6 @@ export default props => (
<GuideDemo
html={datePickerHtml}
/>
<GuideDemo
html={datePickerHtml}
isDarkTheme={true}
/>
</GuideSection>
</GuidePage>
);

4
packages/kbn-ui-framework/doc_site/src/views/modal/modal_example.js
View file

@ -59,10 +59,6 @@ export default props => (
<GuideDemo>
<ModalExample />
</GuideDemo>
<GuideDemo isDarkTheme>
<ModalExample />
</GuideDemo>
</GuideSection>
<GuideSection

7
packages/kbn-ui-framework/doc_site/src/views/tabs/tabs_example.js
View file

@ -53,13 +53,6 @@ export default props => (
<GuideDemo>
<Tabs />
</GuideDemo>
<GuideText>
Dark themed tabs
</GuideText>
<GuideDemo isDarkTheme={true}>
<Tabs />
</GuideDemo>
</GuideSection>
</GuidePage>

49
packages/kbn-ui-framework/src/components/button/_button.scss
View file

@ -85,20 +85,6 @@
@include kuiButtonHoverAndActive {
background-color: $buttonBasicHoverBackgroundColor !important; /* 1 */
}
@include darkTheme {
color: $buttonBasicTextColor--darkTheme;
background-color: $buttonBasicBackgroundColor--darkTheme;
@include kuiButtonFocus {
@include focus($kuiFocusColor, $kuiBackgroundColor--darkTheme);
color: $buttonBasicTextColor--darkTheme;
}
@include kuiButtonHoverAndActive {
background-color: $buttonBasicHoverBackgroundColor--darkTheme !important; /* 1 */
}
}
}
/**
@ -139,19 +125,18 @@
* 1. Override Bootstrap.
*/
.kuiButton--danger {
color: $kuiColorRed;
background-color: rgba($kuiColorWhite, 0.5);
border: solid 1px $kuiColorRed;
color: $euiColorDanger;
border: solid 1px $euiColorDanger;
@include kuiButtonFocus {
@include focus($kuiFocusDangerColor);
color: $kuiColorRed;
@include focus($euiColorDanger);
color: $euiColorDanger;
}
@include kuiButtonHoverAndActive {
color: darken($kuiColorRed, 10%) !important;
background-color: rgba(lighten($kuiColorRed, 50%), 0.5);
border: solid 1px darken($kuiColorRed, 10%);
color: darken($euiColorDanger, 10%) !important;
border: solid 1px darken($euiColorDanger, 10%);
background-color: transparentize($euiColorDanger, .9);
}
}
@ -185,28 +170,20 @@
color: $kuiLinkColor !important; /* 2 */
background-color: transparent;
@include darkTheme {
color: $kuiLinkColor--darkTheme !important; /* 2 */
}
@include kuiButtonHoverAndActive {
color: $kuiLinkHoverColor !important; /* 1 */
text-decoration: underline;
@include darkTheme {
color: $kuiLinkColor-isHover--darkTheme !important; /* 2 */
}
}
}
.kuiButton--secondary {
color: $kuiLinkColor !important; /* 2 */
border: solid 1px $kuiColorBlue;
background-color: rgba($kuiColorWhite, 0.5);
color: $euiColorPrimary !important; /* 2 */
border: solid 1px $euiColorPrimary;
@include kuiButtonHoverAndActive {
color: darken($kuiLinkColor, 10%) !important; /* 1 */
border: solid 1px darken($kuiColorBlue, 10%);
background-color: rgba(lighten($kuiLinkColor, 50%), 0.5);
color: darken($euiColorPrimary, 10%) !important; /* 1 */
border: solid 1px darken($euiColorPrimary, 10%);
background-color: transparentize($euiColorPrimary, .9);
text-decoration: underline;
}
}

9
packages/kbn-ui-framework/src/components/button/_index.scss
View file

@ -10,16 +10,13 @@ $buttonSmallPadding: 2px 8px 3px;
$buttonSmallHeight: 22px;
// Most buttons
$buttonDefaultTextColor: #FFF;
$buttonDefaultTextColor: $euiColorGhost;
// Basic
$buttonBasicTextColor: $kuiTextColor;
$buttonBasicBackgroundColor: $kuiColorLightestGray;
$buttonBasicHoverBackgroundColor: darken($kuiColorLightestGray, 10%);
$buttonBasicDisabledTextColor: $kuiTextColor;
$buttonBasicTextColor--darkTheme: #FFF;
$buttonBasicBackgroundColor--darkTheme: #9c9c9c;
$buttonBasicHoverBackgroundColor--darkTheme: darken($buttonBasicBackgroundColor--darkTheme, 20%);
// Primary
$buttonPrimaryBackgroundColor: $kuiLinkColor;
@ -37,12 +34,12 @@ $buttonDangerHoverBackgroundColor: darken($kuiColorRed, 10%);
$buttonDangerDisabledBackgroundColor: lighten($buttonDangerBackgroundColor, 50%);
// Warning
$buttonWarningBackgroundColor: #f98100;
$buttonWarningBackgroundColor: $euiColorWarning;
$buttonWarningHoverBackgroundColor: darken($buttonWarningBackgroundColor, 10%);
$buttonWarningDisabledBackgroundColor: lighten($buttonWarningBackgroundColor, 10%);
// Hollow
$buttonHollowDisabledTextColor: #dddddd;
$buttonHollowDisabledTextColor: $euiColorMediumShade;
@import "button";
@import "button_group/button_group";

2
packages/kbn-ui-framework/src/components/expression/_index.scss
View file

@ -1,3 +1,3 @@
$expressionColorHighlight: #017D73;
$expressionColorHighlight: $euiColorSecondary;
@import "expression";

17
packages/kbn-ui-framework/src/components/form/check_box/_check_box.scss
View file

@ -1,11 +1,3 @@
$checkboxBackgroundColor: #FFF;
$checkboxBorderColor: #BEBEBE;
$checkboxIconColor: #FFF;
$checkboxDisabledColor: #D3DAE6;
$checkboxCheckedBackgroundColor: $kuiColorBlue;
$checkboxDisabledOpacity: 0.3;
/**
* 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
* ugly default appearance which we can't customize, so our best option is to give Firefox
@ -54,15 +46,6 @@ $checkboxDisabledOpacity: 0.3;
border-color: $checkboxDisabledColor !important;
cursor: not-allowed !important;
}
@include darkTheme {
background-color: $kuiInputBackgroundColor--darkTheme;
border-color: $kuiInputBackgroundColor--darkTheme;
&:checked {
background-color: $checkboxCheckedBackgroundColor;
}
}
}
.kuiCheckBoxLabel {

7
packages/kbn-ui-framework/src/components/form/check_box/_index.scss
View file

@ -1 +1,8 @@
$checkboxBackgroundColor: $euiFormBackgroundColor;
$checkboxBorderColor: $euiFormBorderColor;
$checkboxIconColor: $euiColorGhost;
$checkboxDisabledColor: $euiFormBackgroundDisabledColor;
$checkboxCheckedBackgroundColor: $euiColorPrimary;
$checkboxDisabledOpacity: 0.3;
@import "check_box";

2
packages/kbn-ui-framework/src/components/form/search_input/_index.scss
View file

@ -1 +1,3 @@
$searchInputTextColor: $euiColorMediumShade;
@import "search_input";

2
packages/kbn-ui-framework/src/components/form/search_input/_search_input.scss
View file

@ -1,5 +1,3 @@
$searchInputTextColor: #ACACAC;
.kuiSearchInput {
width: $kuiFormFieldDefaultWidth;
display: inline-block;

2
packages/kbn-ui-framework/src/components/icon/_index.scss
View file

@ -1,3 +1,3 @@
$iconBasicTextColor: #565656;
$iconBasicTextColor: $euiColorDarkShade;
@import "icon";

40
packages/kbn-ui-framework/src/components/local_nav/_index.scss
View file

@ -1,47 +1,25 @@
// Normal colors
$localNavTextColor: $kuiTextColor;
$localNavBackgroundColor: $kuiColorWhite;
$localNavBackgroundColor: $euiColorEmptyShade;
$localNavButtonTextColor: $kuiTextColor;
$localNavButtonTextColor-isHover: $kuiColorLightestGray;
$localNavButtonBackgroundColor: transparent;
$localNavButtonBackgroundColor-isHover: $kuiColorBlue;
$localNavButtonBackgroundColor-isSelected: $kuiColorLightestGray;
$localNavBreadcrumbDelimiterColor: #5a5a5a;
$localSearchBackgroundColor: #ffffff;
$localSearchBorderColor-isInvalid: #e74C3c;
$localNavBreadcrumbDelimiterColor: $euiBorderColor;
$localSearchBackgroundColor: $euiColorGhost;
$localSearchBorderColor-isInvalid: $euiColorDanger;
$localDropdownBackgroundColor: $localNavButtonBackgroundColor-isSelected;
$localDropdownFormNoteTextColor: #737373;
$localDropdownFormNoteTextColor: $euiColorDarkShade;
$localTabTextColor: $kuiColorDarkestGray;
$localTabTextColor-isHover: $kuiColorBlue;
$localTabTextColor-isSelected: $kuiColorBlue;
$localBreadcrumbLinkColor: $kuiColorBlue;
$localSearchButtonBackgroundColor: $kuiColorDarkGray;
$localSearchButtonTextColor: #ffffff;
$localSearchButtonBackgroundColor: $euiColorPrimary;
$localSearchButtonTextColor: $euiColorGhost;
$localDatePickerButtonHoverBackgroundColor: $localNavButtonBackgroundColor-isHover;
$localDatePickerCellSelectedBackgroundColor: #777777;
$localDatePickerCellSelectedTextColor: #ffffff;
// Dark theme colors
$localNavTextColor--darkTheme: $kuiTextColor--darkTheme;
$localNavBackgroundColor--darkTheme: #222;
$localNavButtonTextColor--darkTheme: #dedede;
$localNavButtonTextColor-isHover--darkTheme: #ffffff;
$localNavButtonBackgroundColor-isHover--darkTheme: #000000;
$localNavButtonBackgroundColor-isSelected--darkTheme: #525252;
$localNavBreadcrumbDelimiterColor--darkTheme: #a5a5a5;
$localSearchBackgroundColor--darkTheme: #4e4e4e;
$localSearchBorderColor-isInvalid--darkTheme: #ff6758;
$localDropdownBackgroundColor--darkTheme: $localNavButtonBackgroundColor-isSelected--darkTheme;
$localDropdownFormNoteTextColor--darkTheme: #a2a2a2;
$localDropdownWarningTextColor--darkTheme: $kuiTextColor--darkTheme;
$localDropdownWarningBackgroundColor--darkTheme: #636363;
$localTabTextColor--darkTheme: $localNavButtonTextColor--darkTheme;
$localTabTextColor-isHover--darkTheme: $localNavButtonTextColor-isHover--darkTheme;
$localTabTextColor-isSelected--darkTheme: $localNavButtonTextColor-isHover--darkTheme;
$localSearchButtonBackgroundColor--darkTheme: #777777;
$localSearchButtonTextColor--darkTheme: #ffffff;
$localDatePickerButtonHoverBackgroundColor--darkTheme: rgba(#000000, 0.4);
$localDatePickerCellSelectedTextColor--darkTheme: #ffffff;
$localDatePickerCellSelectedBackgroundColor: $euiColorDarkShade;
$localDatePickerCellSelectedTextColor: $euiTextColor;
// Spacing
$localNavSideSpacing: 10px;

4
packages/kbn-ui-framework/src/components/local_nav/_local_breadcrumbs.scss
View file

@ -22,10 +22,6 @@
user-select: none;
margin-right: 4px;
color: $localNavBreadcrumbDelimiterColor;
@include darkTheme {
color: $localNavBreadcrumbDelimiterColor--darkTheme;
}
}
}
}

42
packages/kbn-ui-framework/src/components/local_nav/_local_date_picker.scss
View file

@ -40,22 +40,6 @@
color: $localNavButtonTextColor; /* 1 */
}
@include darkTheme {
color: $localNavButtonTextColor--darkTheme;
&:hover,
&:active {
color: $localNavButtonTextColor-isHover--darkTheme;
background-color: $localDatePickerButtonHoverBackgroundColor--darkTheme;
}
&:focus {
@include focus($kuiFocusColor, $localDropdownBackgroundColor--darkTheme);
color: $localNavButtonTextColor--darkTheme; /* 1 */
}
}
}
.kuiDatePickerHeaderCell {
@ -65,10 +49,6 @@
font-weight: bold;
text-align: center;
line-height: 1.2;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
.kuiDatePickerRowCell {
@ -134,26 +114,4 @@
color: $localNavButtonTextColor-isHover;
background-color: $localDatePickerButtonHoverBackgroundColor;
}
@include darkTheme {
color: $kuiTextColor--darkTheme;
&:focus {
@include focus($kuiFocusColor, $localDropdownBackgroundColor--darkTheme);
}
&.kuiDatePickerRowCellContent-isCurrent {
color: $kuiLinkColor--darkTheme;
}
&.kuiDatePickerRowCellContent-isSelected {
color: $localDatePickerCellSelectedTextColor--darkTheme;
}
&:hover,
&:active {
color: $localNavButtonTextColor-isHover--darkTheme;
background-color: $localDatePickerButtonHoverBackgroundColor--darkTheme;
}
}
}

52
packages/kbn-ui-framework/src/components/local_nav/_local_dropdown.scss
View file

@ -6,11 +6,6 @@
border-top: solid 1px $kuiColorLightGray;
margin-bottom: 10px;
line-height: 20px;
@include darkTheme {
background-color: $localDropdownBackgroundColor--darkTheme;
border-color: darken($localNavBackgroundColor--darkTheme, 10%);
}
}
.kuiLocalDropdownCloseButton {
@ -19,10 +14,6 @@
position: absolute;
top: 1px;
right: 5px;
@include darkTheme {
color: $localNavTextColor--darkTheme !important; /* 1 */
}
}
.kuiLocalDropdownPanels {
@ -49,10 +40,6 @@
margin-bottom: 12px;
font-size: 18px;
color: $localNavTextColor;
@include darkTheme {
color: $localNavTextColor--darkTheme;
}
}
.kuiLocalDropdownSection {
@ -78,10 +65,6 @@
font-weight: 700;
margin-bottom: 0; /* 1 */
color: $localNavTextColor;
@include darkTheme {
color: $localNavTextColor--darkTheme;
}
}
.kuiLocalDropdownHeader__actions {
@ -102,15 +85,6 @@
&:active {
color: $kuiLinkColor-isHover;
}
@include darkTheme {
color: $kuiLinkColor--darkTheme;
&:hover,
&:active {
color: $kuiLinkColor-isHover--darkTheme;
}
}
}
.kuiLocalDropdownInput {
@ -127,25 +101,11 @@
&:focus {
border-color: $kuiFocusColor;
}
@include darkTheme {
color: $kuiInputTextColor--darkTheme;
background-color: $kuiInputBackgroundColor--darkTheme;
border-color: $kuiInputBorderColor--darkTheme;
&:focus {
border-color: $kuiFocusColor;
}
}
}
.kuiLocalDropdownFormNote {
font-size: 14px;
color: $localDropdownFormNoteTextColor;
@include darkTheme {
color: $localDropdownFormNoteTextColor--darkTheme;
}
}
.kuiLocalDropdownWarning {
@ -154,19 +114,11 @@
font-size: 14px;
color: $kuiTextColor;
background-color: $localNavBackgroundColor;
@include darkTheme {
color: $localDropdownWarningTextColor--darkTheme;
background-color: $localDropdownWarningBackgroundColor--darkTheme;
}
border-left: solid 2px $euiColorDanger;
}
.kuiLocalDropdownHelpText {
margin-bottom: 16px;
font-size: 14px;
color: #2D2D2D;
@include darkTheme {
color: #9e9e9e;
}
color: $euiColorDarkShade;
}

22
packages/kbn-ui-framework/src/components/local_nav/_local_menu.scss
View file

@ -42,28 +42,6 @@
color: $localNavButtonTextColor;
}
}
@include darkTheme {
color: $localNavButtonTextColor--darkTheme;
&:hover {
background-color: $localNavButtonBackgroundColor-isHover--darkTheme;
color: $localNavButtonTextColor-isHover--darkTheme;
}
&.kuiLocalMenuItem-isSelected {
background-color: $localNavButtonBackgroundColor-isSelected--darkTheme;
border-color: darken($localNavBackgroundColor--darkTheme, 10%);
color: $localNavButtonTextColor-isHover--darkTheme;
}
&.kuiLocalMenuItem-isDisabled {
&:hover {
background-color: transparent;
color: $localNavButtonTextColor--darkTheme;
}
}
}
}
.kuiLocalMenuItem__icon {

6
packages/kbn-ui-framework/src/components/local_nav/_local_nav.scss
View file

@ -11,12 +11,6 @@
background-color: $localNavBackgroundColor;
line-height: $kuiLineHeight;
border-bottom: solid 1px $kuiColorLightGray;
@include darkTheme {
color: $localNavTextColor--darkTheme;
background-color: $localNavBackgroundColor--darkTheme;
border-color: darken($localNavBackgroundColor--darkTheme, 10%);
}
}
/**

15
packages/kbn-ui-framework/src/components/local_nav/_local_search.scss
View file

@ -25,12 +25,6 @@
flex: 0 0 auto;
border-radius: 0;
border-left-width: 0;
@include darkTheme {
border-left-width: 1px;
border-left-color: $localNavBackgroundColor--darkTheme;
border-right-color: $localNavBackgroundColor--darkTheme;
}
}
.kuiLocalSearchAssistedInput {
@ -83,13 +77,4 @@
&:focus {
@include focus($kuiFocusColor, $kuiBorderColor);
}
@include darkTheme {
color: $localSearchButtonTextColor--darkTheme;
background-color: $localSearchButtonBackgroundColor--darkTheme;
&:focus {
@include focus($kuiFocusColor, $localNavBackgroundColor--darkTheme);
}
}
}

13
packages/kbn-ui-framework/src/components/local_nav/_local_tabs.scss
View file

@ -23,21 +23,12 @@
&:hover:not(.kuiLocalTab-isDisabled),
&:active:not(.kuiLocalTab-isDisabled) {
color: $localTabTextColor-isHover;
@include darkTheme {
color: $localTabTextColor-isHover--darkTheme;
}
}
&.kuiLocalTab-isSelected {
color: $localTabTextColor-isSelected;
border-bottom-color: $localTabTextColor-isSelected;
cursor: default;
@include darkTheme {
color: $localTabTextColor-isSelected--darkTheme;
border-bottom-color: $localTabTextColor-isSelected--darkTheme;
}
}
/**
@ -52,8 +43,4 @@
& + & {
margin-left: 15px;
}
@include darkTheme {
color: $localTabTextColor--darkTheme;
}
}

28
packages/kbn-ui-framework/src/components/menu_button/_index.scss
View file

@ -1,20 +1,20 @@
$menuButtonFontSize: 12px;
$menuButtonBasicTextColor: #5a5a5a;
$menuButtonBasicBackgroundColor: #ffffff;
$menuButtonBasicHoverBackgroundColor: #F2F2F2;
$menuButtonBasicDisabledTextColor: #9B9B9B;
$menuButtonBasicTextColor: $euiTextColor;
$menuButtonBasicBackgroundColor: $euiColorEmptyShade;
$menuButtonBasicHoverBackgroundColor: $euiColorLightestShade;
$menuButtonBasicDisabledTextColor: $euiColorMediumShade;
$menuButtonPrimaryTextColor: $euiColorGhost;
$menuButtonPrimaryBackgroundColor: $euiColorPrimary;
$menuButtonPrimaryHoverBackgroundColor: darken($euiColorPrimary, 10%);
$menuButtonPrimaryDisabledBackgroundColor: $euiColorMediumShade;
$menuButtonPrimaryTextColor: #ffffff;
$menuButtonPrimaryBackgroundColor: $kuiColorBlue;
$menuButtonPrimaryHoverBackgroundColor: #006E8A;
$menuButtonPrimaryDisabledBackgroundColor: #B6D6E0;
$menuButtonDangerTextColor: #D76051;
$menuButtonDangerBackgroundColor: #ffffff;
$menuButtonDangerHoverTextColor: #FFFFFF;
$menuButtonDangerHoverBackgroundColor: #D76051;
$menuButtonDangerHoverDisabledTextColor: #9B9B9B;
$menuButtonDangerTextColor: $euiColorGhost;
$menuButtonDangerBackgroundColor: $euiColorDanger;
$menuButtonDangerHoverTextColor: $euiColorGhost;
$menuButtonDangerHoverBackgroundColor: darken($euiColorDanger, 10%);
$menuButtonDangerDisabledBackgroundColor: $euiColorMediumShade;
$menuButtonDangerHoverDisabledTextColor: $euiColorGhost;
@import "menu_button";
@import "menu_button_group";

4
packages/kbn-ui-framework/src/components/menu_button/_menu_button.scss
View file

@ -63,6 +63,7 @@
&:disabled {
color: $menuButtonBasicDisabledTextColor;
cursor: not-allowed;
}
}
@ -87,6 +88,7 @@
&:disabled {
background-color: $menuButtonPrimaryDisabledBackgroundColor;
cursor: not-allowed;
}
}
@ -106,6 +108,8 @@
&:disabled {
color: $menuButtonDangerHoverDisabledTextColor;
background-color: $menuButtonDangerDisabledBackgroundColor;
cursor: not-allowed;
}
&:focus {

13
packages/kbn-ui-framework/src/components/modal/_index.scss
View file

@ -1,12 +1,11 @@
$modalPadding: 10px;
$modalBorderColor: $kuiColorLightGray;
$modalBackgroundColor: #FFF;
$modalOverlayBackground: rgba(#000000, 0.5);
$modalBorderColor: $euiBorderColor;
$modalBackgroundColor: $euiColorEmptyShade;
$kuiModalDepth: 1000;
// Dark theme colors
$modalBorderColor--darkTheme: #000;
$modalBackgroundColor--darkTheme: #525252;
$modalOverlayBackground: $euiColorEmptyShade;
@if (lightness($euiTextColor) > 50) {
$modalOverlayBackground: $euiColorLightShade;
}
@import "modal_overlay";
@import "modal";

20
packages/kbn-ui-framework/src/components/modal/_modal.scss
View file

@ -1,18 +1,12 @@
.kuiModal {
@include kuiBottomShadow;
@include euiBottomShadow;
line-height: $kuiLineHeight;
background-color: $modalBackgroundColor;
border: 1px solid $modalBorderColor;
border-radius: $kuiBorderRadius;
box-shadow: $kuiBoxShadow;
z-index: $kuiModalDepth + 1;
animation: kuiModal $kuiAnimSpeedSlow $kuiAnimSlightBounce;
@include darkTheme {
background-color: $modalBackgroundColor--darkTheme;
border-color: $modalBorderColor--darkTheme;
}
}
.kuiModal--confirmation {
@ -27,18 +21,10 @@
padding: $modalPadding;
padding-left: $modalPadding * 2;
border-bottom: $kuiBorderThin;
@include darkTheme {
border-bottom-color: $modalBorderColor--darkTheme;
}
}
.kuiModalHeader__title {
font-size: $kuiTitleFontSize;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
.kuiModalHeaderCloseButton {
@ -52,10 +38,6 @@
.kuiModalBodyText {
font-size: 14px;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
.kuiModalFooter {

2
packages/kbn-ui-framework/src/components/modal/_modal_overlay.scss
View file

@ -9,5 +9,5 @@
align-items: center;
justify-content: center;
padding-bottom: 10vh;
background-color: $modalOverlayBackground;
background: transparentize($modalOverlayBackground, .2);
}

2
packages/kbn-ui-framework/src/components/pager/_pager.scss
View file

@ -13,6 +13,6 @@
.kuiPagerText {
font-size: $kuiFontSize;
line-height: $kuiLineHeight;
color: #5A5A5A;
color: $euiColorDarkShade;
white-space: nowrap; /* 1 */
}

5
packages/kbn-ui-framework/src/components/panel_simple/_panel_simple.scss
View file

@ -24,9 +24,4 @@
&.kuiPanelSimple--flexGrowZero {
flex-grow: 0;
}
@include darkTheme {
background-color: $kuiBackgroundColor--darkTheme;
border-color: $kuiInputBorderColor--darkTheme;
}
}

6
packages/kbn-ui-framework/src/components/popover/_mixins.scss
View file

@ -3,10 +3,4 @@
border-bottom: $kuiBorderThin;
padding: $kuiSizeM;
font-size: $kuiFontSize;
@include darkTheme {
background-color: $kuiBackgroundColor--darkTheme;
border-color: $kuiInputBorderColor--darkTheme;
color: #ffffff;
}
}

14
packages/kbn-ui-framework/src/components/popover/_popover.scss
View file

@ -46,10 +46,6 @@
border-left: $kuiSize solid transparent;
border-right: $kuiSize solid transparent;
border-bottom: $kuiSize solid $kuiBorderColor;
@include darkTheme {
border-bottom-color: $kuiInputBorderColor--darkTheme;
}
}
// This part of the arrow matches the panel.
@ -64,20 +60,12 @@
width: 0;
border-left: $kuiSize solid transparent;
border-right: $kuiSize solid transparent;
border-bottom: $kuiSize solid #ffffff;
@include darkTheme {
border-bottom-color: $kuiBackgroundColor--darkTheme;
}
border-bottom: $kuiSize solid $euiColorEmptyShade;
}
}
.kuiPopover--withTitle .kuiPopover__panel:after {
border-bottom-color: $kuiColorLightestShade;
@include darkTheme {
border-bottom-color: $kuiBackgroundColor--darkTheme;
}
}
// Positions the menu and arrow to the left of the parent.

4
packages/kbn-ui-framework/src/components/table/_index.scss
View file

@ -1,8 +1,8 @@
$tableCellPadding: 7px 8px 8px;
$tableCellFontWeight: 400;
$tableBackgroundColor: #FFF;
$tableBackgroundColor: $euiColorEmptyShade;
$tableHeaderTextColor: $kuiColorDarkGray;
$tableCellExpandedBorderColor: #f0f0f0;
$tableCellExpandedBorderColor: $euiColorEmptyShade;
@import "controlled_table";
@import "table";

10
packages/kbn-ui-framework/src/components/tabs/_index.scss
View file

@ -1,10 +1,4 @@
$tabBackgroundColor: #FFF;
$tabHoverBackgroundColor: #F2F2F2;
// Dark theme colors
$tabColor--darkTheme: $kuiTextColor--darkTheme;
$tabBackgroundColor--darkTheme: #333333;
$tabHoverBackgroundColor--darkTheme: $kuiBackgroundColor--darkTheme;
$tabBorderColor--darkTheme: $kuiBackgroundColor--darkTheme;
$tabBackgroundColor: transparent;
$tabHoverBackgroundColor: $euiColorLightestShade;
@import "tabs";

27
packages/kbn-ui-framework/src/components/tabs/_tabs.scss
View file

@ -1,10 +1,6 @@
.kuiTabs {
display: flex;
border-bottom: $kuiBorderThin;
@include darkTheme {
border-bottom: 1px solid $tabBorderColor--darkTheme;
}
}
@ -26,12 +22,6 @@
border-radius: 0; /* 1 */
margin-bottom: -1px; /* 3 */
@include darkTheme {
color: $tabColor--darkTheme;
background-color: $tabBackgroundColor--darkTheme;
border-color: $tabBorderColor--darkTheme;
}
& + & {
border-left: none;
@ -53,22 +43,11 @@
z-index: 1;
color: $kuiLinkColor;
border: 1px solid $kuiSelectedBorderColor !important;
@include darkTheme {
color: $tabColor--darkTheme;
background-color: $tabBackgroundColor--darkTheme;
border-color: $tabBorderColor--darkTheme !important;
}
}
&:hover:not(.kuiTab-isSelected) {
color: $kuiLinkHoverColor;
background-color: $tabHoverBackgroundColor;
@include darkTheme {
color: $kuiLinkColor-isHover--darkTheme;
background-color: $tabHoverBackgroundColor--darkTheme;
}
}
&.kuiTab-isSelected {
@ -76,11 +55,5 @@
color: $kuiFontColor;
background-color: $tabBackgroundColor;
border-bottom-color: $tabBackgroundColor;
@include darkTheme {
color: $tabColor--darkTheme;
background-color: $tabBackgroundColor--darkTheme;
border-bottom-color: $tabBackgroundColor--darkTheme;
}
}
}

2
packages/kbn-ui-framework/src/components/tool_bar/_tool_bar_footer.scss
View file

@ -3,7 +3,7 @@
padding: 10px;
height: 40px;
background-color: #ffffff;
background-color: $euiColorEmptyShade;
}
.kuiToolBarFooterSection {

2
packages/kbn-ui-framework/src/components/tool_bar/_tool_bar_search.scss
View file

@ -49,7 +49,7 @@
min-width: 200px;
padding: 4px 12px 5px 28px;
font-family: $kuiFontFamily; /* 1 */
background-color: #FFFFFF;
background-color: $euiColorEmptyShade;
color: $kuiFontColor;
border-radius: $kuiBorderRadius;
font-size: 1em;

2
packages/kbn-ui-framework/src/components/tool_bar/_tool_bar_text.scss
View file

@ -4,6 +4,6 @@
.kuiToolBarText {
font-size: $kuiFontSize;
line-height: $kuiLineHeight;
color: #5A5A5A;
color: $euiColorDarkShade;
white-space: nowrap; /* 1 */
}

2
packages/kbn-ui-framework/src/components/typography/_index.scss
View file

@ -1,2 +1,2 @@
$typographyTitleFontSize: 22px;
$typographyTitleFontSize: $euiSizeL;
@import "typography";

20
packages/kbn-ui-framework/src/components/typography/_typography.scss
View file

@ -5,10 +5,6 @@
margin: 0; /* 1 */
font-weight: $kuiFontWeightRegular; /* 1 */
font-size: $typographyTitleFontSize;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
/**
@ -18,10 +14,6 @@
margin: 0; /* 1 */
font-weight: $kuiFontWeightRegular; /* 1 */
font-size: $kuiTitleFontSize;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
/**
@ -32,10 +24,6 @@
font-weight: $kuiFontWeightBold; /* 1 */
line-height: $kuiLineHeight;
font-size: $kuiFontSize;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
/**
@ -46,10 +34,6 @@
font-weight: $kuiFontWeightRegular; /* 1 */
line-height: $kuiLineHeight;
font-size: $kuiFontSize;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
.kuiSubText {
@ -57,10 +41,6 @@
font-weight: $kuiFontWeightRegular; /* 1 */
line-height: $kuiLineHeight;
font-size: $kuiSubTextFontSize;
@include darkTheme {
color: $kuiTextColor--darkTheme;
}
}
.kuiSubduedText {

46
packages/kbn-ui-framework/src/global_styling/mixins/_global_mixins.scss
View file

@ -1,9 +1,3 @@
@mixin darkTheme {
.theme-dark & {
@content;
}
}
/**
* 1. Enforce pointer when there's no href.
* 2. Allow these styles to be applied to a button element.
@ -27,14 +21,6 @@
color: $kuiLinkHoverColor;
text-decoration: underline;
}
@include darkTheme {
color: $kuiLinkColor--darkTheme;
&:hover {
color: $kuiLinkColor--darkTheme;
}
}
}
/**
@ -54,10 +40,6 @@
&:hover {
opacity: 1;
}
@include darkTheme {
color: $kuiTextColor--darkTheme !important; /* 1 */
}
}
/**
@ -117,11 +99,6 @@
@include kuiButtonActive { @content }
}
/**
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
* 2. Override inherited styles (possibly from Bootstrap).
* 3. Create an offset box-shadow that follows the contours of the element.
*/
@mixin focus($color: $kuiFocusColor, $backgroundColor: $kuiFocusBackgroundColor) {
z-index: 1; /* 1 */
outline: none !important; /* 2 */
@ -144,10 +121,6 @@
font-weight: 400;
line-height: $kuiLineHeight;
color: $kuiFontColor;
@include darkTheme {
color: $kuiInputTextColor--darkTheme;
}
}
/**
@ -155,8 +128,8 @@
*/
@mixin formControl($borderRadius: $kuiBorderRadius) {
@include formControlBase;
background-color: #ffffff;
border: 1px solid $kuiFormControlBorderColor;
background-color: $euiFormBackgroundColor;
border: 1px solid $euiFormBorderColor;
border-radius: $borderRadius;
transition: border-color $kuiInputTransitionTiming;
min-height: $kuiFormInputHeight; /* 1 */
@ -173,15 +146,6 @@
opacity: 0.4;
cursor: not-allowed;
}
@include darkTheme {
background-color: $kuiInputBackgroundColor--darkTheme;
border-color: $kuiInputBorderColor--darkTheme;
&:focus {
@include formControlFocus;
}
}
}
/**
@ -208,10 +172,6 @@
&:-moz-focusring {
text-shadow: 0 0 0; /* 3 */
}
@include darkTheme {
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>'); /* 1 */
}
}
/**
@ -299,7 +259,7 @@
@mixin selectOnStandoutBackground {
.kuiSelect {
border-color: #ffffff;
border-color: $euiFormBackgroundColor;
@include kuiButtonFocus {
@include formControlFocus;

0
packages/kbn-ui-framework/src/global_styling/utilities/_index.scss
View file

16
packages/kbn-ui-framework/src/global_styling/variables/_colors.scss
View file

@ -19,18 +19,8 @@ $kuiTextColor: $euiTextColor;
$kuiLinkColor: $euiColorPrimary;
$kuiLinkColor-isHover: darken($kuiLinkColor, 10%);
$kuiInputTextColor: $kuiTextColor;
$kuiInputBackgroundColor: $kuiColorWhite;
$kuiInputBorderColor: $euiBorderColor;
// Dark theme colors
$kuiTextColor--darkTheme: #DDD;
$kuiBackgroundColor--darkTheme: #222;
$kuiLinkColor--darkTheme: #4DA1C0;
$kuiLinkColor-isHover--darkTheme: #def2f6;
$kuiInputTextColor--darkTheme: $kuiTextColor--darkTheme;
$kuiInputBackgroundColor--darkTheme: #1b1b1b;
$kuiInputBorderColor--darkTheme: #333;
$kuiInputBackgroundColor: $euiFormBackgroundColor;
$kuiInputBorderColor: $euiFormBorderColor;
// Colors
@ -43,7 +33,7 @@ $kuiFocusColor: $euiColorPrimary;
$kuiFocusAltBackgroundColor: rgba($kuiInfoColor, 0.2);
$kuiFocusDangerColor: $euiColorDanger;
$kuiFocusWarningColor: $euiColorWarning;
$kuiFocusBackgroundColor: #fff;
$kuiFocusBackgroundColor: $euiColorEmptyShade;
$kuiFontColor: $euiTextColor;
$kuiSubduedTextColor: $euiColorDarkShade;
$kuiLinkHoverColor: darken($euiColorPrimary, 10%);

1
packages/kbn-ui-framework/src/global_styling/variables/_index.scss
View file

@ -11,7 +11,6 @@
@import 'font';
@import 'timing';
@import 'borders';
@import 'shadows';
@import 'z_index';
@import 'animations';
@import 'form';

3
packages/kbn-ui-framework/src/global_styling/variables/_shadows.scss
View file

@ -1,3 +0,0 @@
// Shadows
$kuiBoxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);

18
packages/kbn-ui-framework/src/kui_dark.scss Normal file
View file

@ -0,0 +1,18 @@
// EUI global scope is used for KUI variables till fully deprecated
@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_globals';
@import '../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_dark';
@import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
@import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
@import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
@import '../../../node_modules/@elastic/eui/src/components/form/variables';
@import '../../../node_modules/@elastic/eui/src/components/form/mixins';
// Configuration
@import 'global_styling/variables/index';
// Core
@import 'global_styling/mixins/index';
@import 'global_styling/reset/index';
// Components
@import 'components/index';

2
packages/kbn-ui-framework/src/index.scss → packages/kbn-ui-framework/src/kui_light.scss
View file

@ -9,12 +9,10 @@
// Configuration
@import 'global_styling/variables/index';
@import 'themes/light_theme/index';
// Core
@import 'global_styling/mixins/index';
@import 'global_styling/reset/index';
@import 'global_styling/utilities/index';
// Components
@import 'components/index';

0
packages/kbn-ui-framework/src/themes/light_theme/_index.scss
View file

2
src/ui/public/autoload/styles.js
View file

@ -20,7 +20,7 @@
const theme = require('../theme');
// Kibana UI Framework
require('@kbn/ui-framework/dist/ui_framework.css');
require('@kbn/ui-framework/dist/kui_light.css');
// Elastic UI Framework, light theme
const euiThemeLight = require('!!raw-loader!@elastic/eui/dist/eui_theme_k6_light.css');