Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] [UI Framework] [K7] Stretch the palette, increase cohesion and contrast #14471

Closed
wants to merge 22 commits into from
Closed

[WIP] [UI Framework] [K7] Stretch the palette, increase cohesion and contrast #14471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
a2bece2
Lighten borders and deepen shadows around KuiModal, KuiPanel, and Kui…
cjcenizal Oct 13, 2017
12bef79
Lighten KuiProgress colors.
cjcenizal Oct 13, 2017
f3a863f
Change color of KuiTabs from secondary to primary.
cjcenizal Oct 13, 2017
4e7da4a
Heighten contrast between fill and non-fill KuiButton by lightening o…
cjcenizal Oct 13, 2017
8dd9848
Apply colors to KuiBadge text and increase side padding.
cjcenizal Oct 13, 2017
4bf72cf
Add background color to KuiFormErrorText to help differentiate it fro…
cjcenizal Oct 13, 2017
b2a1659
Add darker borders to KuiCheckbox, KuiRange, and KuiSwitch styles to …
cjcenizal Oct 13, 2017
81889c5
Make KuiHeaderSectionItem vertical borders equal to the full height o…
cjcenizal Oct 13, 2017
a0ceeba
Add example of KuiSwitches inside of a KuiTable, and update styles to…
cjcenizal Oct 14, 2017
33285be
Tweak typography and padding of KuiPanel, KuiSideNav, KuiTitle, and K…
cjcenizal Oct 14, 2017
74878ae
Incorporate fill KuiButton into Kibana sandbox.
cjcenizal Oct 14, 2017
0bc6b81
Add border around KuiTable to create separation from surrounding cont…
cjcenizal Oct 15, 2017
4caebf1
Remove left border from KuiCallOut to reserve that for selection state.
cjcenizal Oct 15, 2017
c21dc0d
Make active KuiBreadcrumb darker so it's near the top of the hierarch…
cjcenizal Oct 15, 2017
9571699
Fix focus state of KuiSideNavItem.
cjcenizal Oct 15, 2017
cb72ff1
Dark KuiPanel border back to original shade.
cjcenizal Oct 15, 2017
299471e
Remove link from last KuiBreadcrumb.
cjcenizal Oct 15, 2017
156b8ff
Add background color to KuiTable header cells to increase contrast be…
cjcenizal Oct 15, 2017
36258f7
Remove unused code introduced when KuiSwitches were added to the KuiT…
cjcenizal Oct 15, 2017
781cac6
Make inList KuiCheckbox less prominent and add box-shadow to focus st…
cjcenizal Oct 15, 2017
0d7ca07
Show more info in the active KuiHeaderBreadcrumb, so that the full cu…
cjcenizal Oct 15, 2017
21cab50
Remove default side padding and border from KuiSideNavItem.
cjcenizal Oct 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
414 changes: 252 additions & 162 deletions ui_framework/dist/ui_framework_theme_dark.css
View file
Open in desktop

Large diffs are not rendered by default.

414 changes: 252 additions & 162 deletions ui_framework/dist/ui_framework_theme_light.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions ui_framework/doc_site/src/views/advanced_settings/advanced_settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export default class extends Component {
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumb href="#" isActive>
Advanced settings
Kibana Advanced settings &raquo; General
</KuiHeaderBreadcrumb>
</KuiHeaderBreadcrumbs>
);
Expand Down Expand Up @@ -388,7 +388,7 @@ export default class extends Component {
Kibana
</KuiSideNavTitle>

<KuiSideNavItem isSelected>
<KuiSideNavItem>
<button>
Advanced settings
</button>
Expand Down
52 changes: 23 additions & 29 deletions ui_framework/doc_site/src/views/kibana/kibana.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,19 @@ import React, {
import {
KuiAvatar,
KuiButton,
KuiCallOut,
KuiFlexGroup,
KuiFlexItem,
KuiGlobalToastList,
KuiGlobalToastListItem,
KuiHeader,
KuiHeaderAlert,
KuiHeaderBreadcrumb,
KuiHeaderBreadcrumbCollapsed,
KuiHeaderBreadcrumbs,
KuiHeaderLogo,
KuiHeaderSection,
KuiHeaderSectionItem,
KuiHeaderSectionItemButton,
KuiGlobalToastList,
KuiGlobalToastListItem,
KuiIcon,
KuiKeyPadMenu,
KuiKeyPadMenuItem,
Expand All @@ -28,18 +29,15 @@ import {
KuiPageContentBody,
KuiPageContentHeader,
KuiPageContentHeaderSection,
KuiPageHeader,
KuiPageHeaderSection,
KuiPageSideBar,
KuiPopover,
KuiSideNav,
KuiSideNavItem,
KuiSideNavTitle,
KuiToast,
KuiTitle,
KuiText,
KuiSpacer,
KuiHeaderAlert,
KuiText,
KuiTitle,
KuiToast,
} from '../../../../components';

import {
Expand Down Expand Up @@ -161,18 +159,8 @@ export default class extends Component {
Management
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumb href="#">
Truncation test is here
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumbCollapsed />

<KuiHeaderBreadcrumb href="#">
Users
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumb href="#" isActive>
Create
Elasticsearch Watches
</KuiHeaderBreadcrumb>
</KuiHeaderBreadcrumbs>
);
Expand Down Expand Up @@ -430,16 +418,9 @@ export default class extends Component {
renderPage() {
return (
<KuiPage>
<KuiPageHeader>
<KuiPageHeaderSection>
<KuiTitle size="large">
<h1>Management</h1>
</KuiTitle>
</KuiPageHeaderSection>
</KuiPageHeader>
<KuiPageBody>
{this.renderSideNav()}
<KuiPageContent>
<KuiPageContent panelPaddingSize="xxl">
<KuiPageContentHeader>
<KuiPageContentHeaderSection>
<KuiTitle>
Expand Down Expand Up @@ -468,8 +449,21 @@ export default class extends Component {
</KuiFlexGroup>
</KuiPageContentHeaderSection>
</KuiPageContentHeader>

<KuiPageContentBody>
<Table />
<KuiCallOut
title="Watch saved"
type="success"
iconType="user"
>
<p>
Your <KuiLink href="#">new watch</KuiLink> has been saved.
</p>
</KuiCallOut>

<KuiSpacer size="m" />

<Table compressed />
</KuiPageContentBody>
</KuiPageContent>
</KuiPageBody>
Expand Down
Loading