Skip to content

[Theming] More color options and better docs #5939

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

Merged
cchaos merged 23 commits into from
Jun 2, 2022
Merged

[Theming] More color options and better docs #5939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
b1672e4
Slight adjustment to `lightestShade` and `body` colors
May 7, 2022
bd7c95b
Added `method: transparent` option to `useEuiBackgroundColor`
May 7, 2022
553ff62
Setup for base button colors
May 7, 2022
f4751b1
[Colors] Using tabbed docs page and creating Functions tab
May 7, 2022
8fff01e
Moved contrast utilities section and simplified
May 8, 2022
e00877b
Moved transparency to theme and simplified
May 8, 2022
0f0d5ff
Moved shade/tint functions
May 8, 2022
4c089ec
Moved isDark to theme
May 8, 2022
6b224a8
Deleted old color functions files
May 8, 2022
c578c60
Cleaning up section background colors
May 8, 2022
4755b93
Cleanup spacing
May 8, 2022
803c7d0
Moved Sizing to a tabbed page
May 8, 2022
a617eb5
Revert ThemeSelector changes
May 8, 2022
3d6e47e
Merge remote-tracking branch 'origin/main' into waiting/more_colors
May 10, 2022
8b1c66c
Update contrast sections
May 10, 2022
a7abfd3
Moved text utilities to `Theming / Typography` now with tabs
May 12, 2022
861c06b
Moved `Utilities / Responsive` to `Theme / Breakpoints/ Utilities`
May 12, 2022
4262e2b
Passing `euiTheme.breakpoint` to `getBreakpoint()`
May 12, 2022
0f11231
Merge remote-tracking branch origin/main into waiting/more_colors
May 31, 2022
09b4313
Fix options pattern
May 31, 2022
5d89e9b
Fix contrast docs
May 31, 2022
224bc63
Cleanup and CL
Jun 1, 2022
fbc598b
Fix utilities link
Jun 2, 2022
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
6 changes: 5 additions & 1 deletion src-docs/src/components/guide_page/_guide_page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,11 @@ $guideSideNavWidth: 240px;
}

.euiSideNavItem--trunk > .euiSideNavItemButton .guideSideNav__item--inSearch .euiMark {
color: $euiColorPrimary;
color: $euiColorPrimaryText;
}

.guideSideNav__item--openSubTitle {
color: $euiTitleColor;
}


Expand Down
28 changes: 17 additions & 11 deletions src-docs/src/components/guide_page/guide_page_chrome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,18 @@ export class GuidePageChrome extends Component {
return subSectionsWithTitles.map(({ title, sections }) => {
const id = slugify(title);

const subSectionHref = `${href}/${id}`;
const subSectionHashIdHref = `${href}#${id}`;

const sectionHref = sections ? subSectionHref : subSectionHashIdHref;
const subItems = sections
? this.renderSubSections(sectionHref, sections, searchTerm)
: undefined;

const isCurrentlyOpenSubSection = window.location.hash.includes(
subSectionHref
);

let name = title;
if (searchTerm) {
name = (
Expand All @@ -113,21 +125,15 @@ export class GuidePageChrome extends Component {
);
}

const subSectionHref = `${href}/${id}`;
const subSectionHashIdHref = `${href}#${id}`;

const sectionHref = sections ? subSectionHref : subSectionHashIdHref;
const subItems = sections
? this.renderSubSections(sectionHref, sections, searchTerm)
: undefined;

return {
id: sectionHref,
name,
name: isCurrentlyOpenSubSection ? <strong>{name}</strong> : name,
href: sectionHref,
className: isCurrentlyOpenSubSection
? 'guideSideNav__item--openSubTitle'
: '',
Copy link
Copy Markdown
Contributor Author

@cchaos cchaos Jun 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is me fixing the double blue color of open sections

items: subItems,
isSelected: window.location.hash.includes(subSectionHref),
forceOpen: !!searchTerm,
forceOpen: !!searchTerm || isCurrentlyOpenSubSection,
};
});
};
Expand Down
13 changes: 7 additions & 6 deletions src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,13 @@ const GuideTabbedPageComponent: FunctionComponent<GuideTabbedPageProps> = ({
const currentLanguage = themeContext.themeLanguage;
const showSass = currentLanguage.includes('sass');

const betaBadge = isBeta && (
<EuiBetaBadge
label="Beta"
tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
/>
);
const betaBadge =
isBeta || (showThemeLanguageToggle && !showSass) ? (
<EuiBetaBadge
label="Beta"
tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
/>
) : undefined;

let tabs:
| Array<{
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/components/with_theme/language_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const NOTIF_STORAGE_VALUE = 'dismissed';

export const LanguageSelector = ({
onChange,
showTour = true,
showTour = false,
Copy link
Copy Markdown
Contributor Author

@cchaos cchaos Jun 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Finally removing the language toggle tour

}: {
onChange?: (id: string) => void;
showTour?: boolean;
Expand Down
100 changes: 69 additions & 31 deletions src-docs/src/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ import { SitewideSearchExample } from './views/selectable/selectable_sitewide_te

import { ColorPaletteExample } from './views/color_palette/color_palette_example';

import { ColorExample } from './views/color/color_example';

import { PrettyDurationExample } from './views/pretty_duration/pretty_duration_example';

import { UtilityClassesExample } from './views/utility_classes/utility_classes_example';
Expand Down Expand Up @@ -191,7 +189,6 @@ import { ResizeObserverExample } from './views/resize_observer/resize_observer_e

import { ResizableContainerExample } from './views/resizable_container/resizable_container_example';

import { ResponsiveExample } from './views/responsive/responsive_example';
import { ScrollExample } from './views/scroll/scroll_example';

import { SearchBarExample } from './views/search_bar/search_bar_example';
Expand Down Expand Up @@ -220,8 +217,6 @@ import { TextDiffExample } from './views/text_diff/text_diff_example';

import { TextExample } from './views/text/text_example';

import { TextUtilitiesExample } from './views/text_utilities/text_utilities_example';

import { TimelineExample } from './views/timeline/timeline_example';

import { TitleExample } from './views/title/title_example';
Expand All @@ -242,13 +237,27 @@ import { SuperSelectExample } from './views/super_select/super_select_example';

import { ThemeExample } from './views/theme/theme_example';
import { ColorModeExample } from './views/theme/color_mode/color_mode_example';
import Breakpoints from './views/theme/breakpoints/breakpoints';
import { BreakpointsExample } from './views/theme/breakpoints/breakpoints_example';
import Borders, { bordersSections } from './views/theme/borders/borders';
import Color, { colorsSections } from './views/theme/color/colors';
import Sizing, { sizingSections } from './views/theme/sizing/sizing';
import Color, { colorsInfo, colorsSections } from './views/theme/color/tokens';
import ColorContrast, { contrastSections } from './views/theme/color/contrast';
import ColorFunctions, {
colorsFunctionsSections,
} from './views/theme/color/functions';
import Sizing, {
sizingInfo,
sizingSections,
} from './views/theme/sizing/tokens';
import SizingFunctions, {
sizingFunctionSections,
} from './views/theme/sizing/functions';
import Typography, {
typographyInfo,
typographySections,
} from './views/theme/typography/typography';
} from './views/theme/typography/values';
import TextUtilities, {
textUtilitiesSections,
} from './views/theme/typography/utilities';
import Other, { otherSections } from './views/theme/other/other';
import ThemeValues from './views/theme/customizing/values';

Expand Down Expand Up @@ -398,30 +407,62 @@ const navigation = [
items: [
createExample(ThemeExample, 'Theme provider'),
createExample(ColorModeExample),
{
name: 'Breakpoints',
component: Breakpoints,
},
createTabbedPage(BreakpointsExample),
{
name: 'Borders',
component: Borders,
sections: bordersSections,
},
{
name: 'Colors',
component: Color,
sections: colorsSections,
},
{
name: 'Sizing',
component: Sizing,
sections: sizingSections,
},
{
name: 'Typography',
component: Typography,
sections: typographySections,
},
createTabbedPage({
...colorsInfo,
pages: [
{
title: 'Values',
page: Color,
sections: colorsSections,
},
{
title: 'Utilities',
page: ColorFunctions,
sections: colorsFunctionsSections,
},
{
title: 'Contrast',
page: ColorContrast,
sections: contrastSections,
},
],
}),
createTabbedPage({
...sizingInfo,
pages: [
{
title: 'Values',
page: Sizing,
sections: sizingSections,
},
{
title: 'Utilities',
page: SizingFunctions,
sections: sizingFunctionSections,
},
],
}),
createTabbedPage({
...typographyInfo,
pages: [
{
title: 'Values',
page: Typography,
sections: typographySections,
},
{
title: 'Utilities',
page: TextUtilities,
sections: textUtilitiesSections,
},
],
}),
{
name: 'More tokens',
component: Other,
Expand Down Expand Up @@ -564,7 +605,6 @@ const navigation = [
AccessibilityExample,
AutoSizerExample,
BeaconExample,
ColorExample,
ColorPaletteExample,
CopyExample,
UtilityClassesExample,
Expand All @@ -582,10 +622,8 @@ const navigation = [
PrettyDurationExample,
ProviderExample,
ResizeObserverExample,
ResponsiveExample,
ScrollExample,
TextDiffExample,
TextUtilitiesExample,
WindowEventExample,
].map((example) => createExample(example)),
},
Expand Down
37 changes: 0 additions & 37 deletions src-docs/src/views/color/color_example.js
View file
Open in desktop

This file was deleted.

52 changes: 0 additions & 52 deletions src-docs/src/views/color/contrast/contrast.tsx
View file
Open in desktop

This file was deleted.

50 changes: 0 additions & 50 deletions src-docs/src/views/color/contrast/contrast_body.tsx
View file
Open in desktop

This file was deleted.

Loading