diff --git a/CHANGELOG.md b/CHANGELOG.md index dbeda7b5afa..8f9b07a8379 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ # [`master`](https://github.com/elastic/eui/tree/master) +- Tweaked sizing, weights, color, line-heights, and added more levels to `EuiTitle` and `EuiText` ([#627](https://github.com/elastic/eui/pull/627)) + **Bug fixes** - Fix visual shadow glitch on hover of `EuiToast` ([#632](https://github.com/elastic/eui/pull/632)) diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 8d0601382b3..4c0f8ee2d55 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -80,17 +80,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000; margin-left: 240px; } -.guideSection__text.euiText, -.guideSection__text .euiText { - @include euiFontSizeS; - //font-weight: $euiFontWeightLight; - color: shadeOrTint($euiTextColor, .3, .1); - - p, ul, ol { - max-width: 36rem; - } -} - .guideDemo__highlightLayout { div { background: transparentize(#0096CC, .9); @@ -119,6 +108,13 @@ $guideZLevelHighest: $euiZLevel9 + 1000; .guideDemo__textLines { background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important; background-size: 100% 8px !important; + background-position-y: 2px; +} + +.guideDemo__textLines--s { + background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px) !important; + background-size: 100% 7px !important; + background-position-y: -2px; } .guideDemo__color { diff --git a/src-docs/src/components/guide_rule/_guide_rule_description.scss b/src-docs/src/components/guide_rule/_guide_rule_description.scss index dec0eedfd76..f2f4199b31c 100644 --- a/src-docs/src/components/guide_rule/_guide_rule_description.scss +++ b/src-docs/src/components/guide_rule/_guide_rule_description.scss @@ -1,5 +1,3 @@ .guideRule__description { margin-bottom: $euiSizeXL; - - @extend .guideSection__text; } diff --git a/src-docs/src/components/guide_rule/_guide_rule_example.scss b/src-docs/src/components/guide_rule/_guide_rule_example.scss index 48bc72c13b4..18112c6e310 100644 --- a/src-docs/src/components/guide_rule/_guide_rule_example.scss +++ b/src-docs/src/components/guide_rule/_guide_rule_example.scss @@ -15,8 +15,8 @@ } .guideRule__caption { - @include euiFontSizeXS; - max-height: $euiFontSizeXS * $euiLineHeight; /* 1 */ + @include euiFontSizeS; + max-height: $euiFontSizeS * $euiLineHeight; /* 1 */ overflow-y: visible; /* 1 */ } diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js index 78b3e99f61b..3fdddadc17a 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js @@ -38,7 +38,7 @@ export class GuideThemeSelector extends Component { iconSide="right" onClick={this.onThemeButtonClick} > - Elastic UI ~ {this.props.selectedTheme} + Elastic UI ~ {this.props.selectedTheme} ); diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js index f58aeae4dee..39c7fb70481 100644 --- a/src-docs/src/views/flyout/flyout_complicated.js +++ b/src-docs/src/views/flyout/flyout_complicated.js @@ -146,6 +146,7 @@ export class FlyoutComplicated extends Component { Flyout header +

Put navigation items in the header, and cross tab actions in a footer.

diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index 8062df8f9c6..65b2d5893ea 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -65,7 +65,7 @@ export default() => (

- Filled buttons are for the primary action + Filled buttons are for the primary action

This button has the heavist visual weight to draw users' attention. @@ -86,7 +86,7 @@ export default() => (

- Standard buttons are for secondary actions + Standard buttons are for secondary actions

Such actions include Add and Apply. This button type works well for @@ -108,7 +108,7 @@ export default() => (

- Empty buttons are for complimentary, UI-specific actions + Empty buttons are for complimentary, UI-specific actions

Close, cancel, filter, refresh, and other actions that reconfigure the @@ -136,7 +136,7 @@ export default() => (

- Icon buttons are for saving space + Icon buttons are for saving space

The icon must be immediately understood, for example, a trash can @@ -253,7 +253,7 @@ export default() => ( - + One primary button per layout @@ -360,7 +360,7 @@ export default() => ( - + Minimize the mixing of color, size, and type diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js index 5f40a74daf2..fe6f65ccf37 100644 --- a/src-docs/src/views/guidelines/modals.js +++ b/src-docs/src/views/guidelines/modals.js @@ -86,11 +86,11 @@ export default () => ( -

The header sets the context

+

The header sets the context

Short and sentence-case, the header should indicate what the modal is about.

-

The body is for a single task

+

The body is for a single task

This task should not require a lot of explanation or user interaction.

-

Buttons are right-aligned

+

Buttons are right-aligned

The primary action is a filled button, and the secondary action is a link button. Labels should use strong action verbs.

diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js index 0b3a9cc63d6..96185889ed0 100644 --- a/src-docs/src/views/guidelines/toasts.js +++ b/src-docs/src/views/guidelines/toasts.js @@ -54,7 +54,7 @@ export default () => (

- Success toasts indicate that everything worked out + Success toasts indicate that everything worked out

They are the most-commonly used toasts. @@ -77,7 +77,7 @@ export default () => (

- Warning toasts direct user attention to a potential problem + Warning toasts direct user attention to a potential problem

These toasts work well in monitoring apps when something @@ -101,7 +101,7 @@ export default () => (

- Error toasts report a problem + Error toasts report a problem

An error toast might let users know an action didn't complete or that a form has errors. @@ -126,7 +126,7 @@ export default () => (

- Info toasts relay neutral information + Info toasts relay neutral information

The default toast, an info toast might notify users about an ongoing action. diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js index ad22a1add09..3e98c097c98 100644 --- a/src-docs/src/views/guidelines/writing.js +++ b/src-docs/src/views/guidelines/writing.js @@ -132,12 +132,12 @@ export default () => ( > -

Edit saved objects

 +

Edit saved objects

 -

Edit saved objects

+

Edit saved objects

From here, you can edit saved objects. To get started, follow these steps.

 @@ -341,7 +341,7 @@ export default () => ( A title-only message is ok." > - This dashboard is empty. Let's fill it up! + This dashboard is empty. Let's fill it up!

@@ -352,7 +352,7 @@ export default () => ( - Uh-oh! + Uh-oh!

@@ -381,7 +381,7 @@ export default () => ( > - Delete this report? + Delete this report? Cancel @@ -392,7 +392,7 @@ export default () => ( - Are you sure you want to delete this report? + Are you sure you want to delete this report? Cancel @@ -506,7 +506,7 @@ export default () => ( > - Remove this index pattern? + Remove this index pattern? Cancel @@ -516,7 +516,7 @@ export default () => ( - Remove this index pattern? + Remove this index pattern? Cancel @@ -547,10 +547,10 @@ export default () => ( description="Losing data and other situations that might frustrate the user are not a time for humor." > - No results matched your search + No results matched your search - No results found + No results found

diff --git a/src-docs/src/views/steps/heading_element_steps.js b/src-docs/src/views/steps/heading_element_steps.js index 862e1cb3ee2..4fcd3a475f7 100644 --- a/src-docs/src/views/steps/heading_element_steps.js +++ b/src-docs/src/views/steps/heading_element_steps.js @@ -9,7 +9,7 @@ import { const steps = [ { title: 'Inspect me', - children:

Did you notice the step title is inside a Heading 2 element?

+ children:

Did you notice the step title is inside a Heading 2 element?

 } ]; diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js index 1857745457f..78f7f5b3563 100644 --- a/src-docs/src/views/steps/steps_complex.js +++ b/src-docs/src/views/steps/steps_complex.js @@ -57,7 +57,7 @@ const steps = [ title: 'The last step has two options', children: ( -

Option 1: If you have this type of instance

+

Option 1: If you have this type of instance

  1. Do thing 1
    2. @@ -65,7 +65,7 @@ const steps = [
  2. Do thing 3
 -

Option 2: If you have the other type of instance

+

Option 2: If you have the other type of instance

  1. Do thing 1
    2. diff --git a/src-docs/src/views/tables/tables_example.js b/src-docs/src/views/tables/tables_example.js index bdbdac715d1..cc25f9aa02c 100644 --- a/src-docs/src/views/tables/tables_example.js +++ b/src-docs/src/views/tables/tables_example.js @@ -2,7 +2,6 @@ import React from 'react'; import { EuiCode, - EuiText, EuiSpacer, EuiCallOut, } from '../../../../src/components'; @@ -24,7 +23,7 @@ import { section as customSection } from './custom'; export const TableExample = { title: 'Tables', intro: ( - +

    Tables can get complicated very fast. If you're just looking for a basic table @@ -40,7 +39,7 @@ export const TableExample = {

    - +
    ), sections: [ basicSection, diff --git a/src-docs/src/views/text/text.js b/src-docs/src/views/text/text.js index 230018f62d2..f39fb8fe2f0 100644 --- a/src-docs/src/views/text/text.js +++ b/src-docs/src/views/text/text.js @@ -70,6 +70,24 @@ export default () => ( So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?

    + +

    This is Heading Four

    + +

    + So it thought the dog was making a poor life choice by focusing so much on mindfulness. + What if its car broke down? +

    + +
    This is Heading Five
    + +

    + + So it thought the dog was making a poor life choice by focusing so much on mindfulness. + What if its car broke down? + +

    + +
    This is Heading Six
     ); diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js index b579418247e..490df584d8d 100644 --- a/src-docs/src/views/text/text_example.js +++ b/src-docs/src/views/text/text_example.js @@ -35,13 +35,19 @@ export const TextExample = { code: textHtml, }], text: ( -

    - EuiText is a generic catchall wrapper that will apply - our standard typography styling and spacing to naked HTML. Because of - its forced style it only accepts raw HTML and can - not / should not be used to wrap React components (which would break - their styling). -

    +
    +

    + EuiText is a generic catchall wrapper that will apply + our standard typography styling and spacing to naked HTML. Because of + its forced style it only accepts raw HTML and can + not / should not be used to wrap React components (which would break + their styling). +

    +

    + EuiText also ensure proper line-length for readability by + setting a max-width on the entire component. +

    +
    ), props: { EuiText }, demo: , diff --git a/src-docs/src/views/text/text_small.js b/src-docs/src/views/text/text_small.js index 46ccbb7b844..9c43a618b28 100644 --- a/src-docs/src/views/text/text_small.js +++ b/src-docs/src/views/text/text_small.js @@ -62,6 +62,24 @@ const exampleText = ( So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?

    + +

    This is Heading Four

    + +

    + So it thought the dog was making a poor life choice by focusing so much on mindfulness. + What if its car broke down? +

    + +
    This is Heading Five
    + +

    + + So it thought the dog was making a poor life choice by focusing so much on mindfulness. + What if its car broke down? + +

    + +
    This is Heading Six
    ); diff --git a/src-docs/src/views/text_scaling/text_scaling.js b/src-docs/src/views/text_scaling/text_scaling.js index a956bdf1e09..010b98093df 100644 --- a/src-docs/src/views/text_scaling/text_scaling.js +++ b/src-docs/src/views/text_scaling/text_scaling.js @@ -17,6 +17,8 @@ const text = [ yellow sun.

    , +

    This is Heading Two

    , +

    Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- @@ -40,7 +42,7 @@ const text = [

    , -

    This is Heading Two

    , +

    This is Heading Three

    ,
    1. Number one
      2. @@ -59,12 +61,23 @@ const text = [ fruit to jump for, and dead car batteries to jump-start.

      , -

      This is Heading Three

      , +

      This is Heading Four

      ,

      So it thought the dog was making a poor life choice by focusing so much on mindfulness. What if its car broke down?

      , + +
      This is Heading Five
      , + +

      + + So it thought the dog was making a poor life choice by focusing so much on mindfulness. + What if its car broke down? + +

      , + +
      This is Heading Six
      , ]; export default () => ( @@ -81,7 +94,7 @@ export default () => ( - + diff --git a/src-docs/src/views/text_scaling/text_scaling_sandbox.js b/src-docs/src/views/text_scaling/text_scaling_sandbox.js index a96bacc6300..3155e866b86 100644 --- a/src-docs/src/views/text_scaling/text_scaling_sandbox.js +++ b/src-docs/src/views/text_scaling/text_scaling_sandbox.js @@ -30,7 +30,7 @@ export default props => (

      This demo shows off EuiText scaling in both the default and small sizes. The goal is that the bottom of - every text line should hit one of the 8px grid lines. This is + every text line should hit one of the 8px or 7px grid lines. This is for development only. Do not copy this code into a production environment.

      } diff --git a/src-docs/src/views/title/title.js b/src-docs/src/views/title/title.js index 8cf78563657..10b7b876d78 100644 --- a/src-docs/src/views/title/title.js +++ b/src-docs/src/views/title/title.js @@ -3,21 +3,46 @@ import React from 'react'; import { EuiTitle, EuiHorizontalRule, + EuiSpacer, + EuiCode, } from '../../../../src/components'; export default () => (
      -

      This is a large title

      +

      This is a large title, only one should exist per page

       + size="l" +

      This is the default size for title

       + size="m" +

      This is a small title

       + size="s" + + + +

      This is an extra small title

      +       + size="xs" + + + +
      This is an extra extra small title
      +       + size="xxs" + + + +
      This is an extra extra extra small title and should only be used when the title is inconsequential (like a label)
      +       + size="xxxs" diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss index 0bb0d2cbf11..c8dd415f04d 100644 --- a/src/components/call_out/_call_out.scss +++ b/src/components/call_out/_call_out.scss @@ -40,7 +40,8 @@ $callOutTypes: ( * 3. Apply margin to all but last item in the flex. */ .euiCallOutHeader { - @include euiFontSize; + @include euiTitle("xs"); + font-weight: $euiFontWeightRegular; display: flex; align-items: baseline; /* 1 */ @@ -54,7 +55,8 @@ $callOutTypes: ( // smaller font size for headers in small callout .euiCallOut--small & { - @include euiFontSizeS; + @include euiTitle("xxs"); + font-weight: $euiFontWeightRegular; } } diff --git a/src/components/card/__snapshots__/card.test.js.snap b/src/components/card/__snapshots__/card.test.js.snap index 50aac9fc20a..9075eaedee6 100644 --- a/src/components/card/__snapshots__/card.test.js.snap +++ b/src/components/card/__snapshots__/card.test.js.snap @@ -13,7 +13,7 @@ exports[`EuiCard is rendered 1`] = ` class="euiCard__content" > Card title diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 0ecbbf07d76..6c6cbd0e16b 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -85,6 +85,8 @@ $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); .euiCard__title { display: block; margin-top: $euiCardSpacing; + @include euiTitle($euiFontSizeM); + font-weight: $euiFontWeightRegular; } .euiCard__description { diff --git a/src/components/card/card.js b/src/components/card/card.js index 8231b149891..78bb7d91295 100644 --- a/src/components/card/card.js +++ b/src/components/card/card.js @@ -70,7 +70,7 @@ export const EuiCard = ({ - + {title} diff --git a/src/components/description_list/_description_list.scss b/src/components/description_list/_description_list.scss index c86237f093d..54159f632e8 100644 --- a/src/components/description_list/_description_list.scss +++ b/src/components/description_list/_description_list.scss @@ -1,17 +1,9 @@ .euiDescriptionList { - .euiDescriptionList__title { - font-weight: $euiFontWeightMedium; - } - - .euiDescriptionList__description { - color: $euiColorDarkShade; - } - &.euiDescriptionList--row { .euiDescriptionList__title { - @include euiFontSize; + @include euiTitle("xs"); margin-top: $euiSize; // Make sure the first
      doesn't get a margine. @@ -37,7 +29,7 @@ &.euiDescriptionList--compressed { .euiDescriptionList__title { - @include euiFontSizeS; + @include euiTitle("xxs"); } .euiDescriptionList__description { @@ -62,7 +54,7 @@ } .euiDescriptionList__title { - @include euiFontSize; + @include euiTitle("xs"); flex-basis: 50%; padding-right: $euiSizeS; } @@ -84,7 +76,7 @@ &.euiDescriptionList--compressed { .euiDescriptionList__title { - @include euiFontSizeS; + @include euiTitle("xxs"); } .euiDescriptionList__description { diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index fa5741422e5..349b1c814f3 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -32,7 +32,7 @@ $euiModalBorderColor: tintOrShade($euiShadowColorLarge, 50%, 0%) !default; // ma } .euiModalHeader__title { - @include euiFontSizeL; + @include euiTitle("m"); } .euiModalBody { diff --git a/src/components/popover/_mixins.scss b/src/components/popover/_mixins.scss index d07dd38623a..d41ab9c21aa 100644 --- a/src/components/popover/_mixins.scss +++ b/src/components/popover/_mixins.scss @@ -1,4 +1,5 @@ @mixin euiPopoverTitle { + @include euiTitle("xs"); background-color: $euiColorLightestShade; padding: $euiSizeM; diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss index 68a44475668..ec284192083 100644 --- a/src/components/side_nav/_side_nav_item.scss +++ b/src/components/side_nav/_side_nav_item.scss @@ -94,8 +94,7 @@ } .euiSideNavItemButton__label { - @include euiTitle; - font-size: $euiFontSizeM; + @include euiTitle("xs"); } } diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap index 0e8bbc7730a..78aad488456 100644 --- a/src/components/steps/__snapshots__/step.test.js.snap +++ b/src/components/steps/__snapshots__/step.test.js.snap @@ -12,7 +12,7 @@ exports[`EuiStep is rendered 1`] = ` Step

      First step diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap index 7f205109681..0bdafa76406 100644 --- a/src/components/steps/__snapshots__/steps.test.js.snap +++ b/src/components/steps/__snapshots__/steps.test.js.snap @@ -15,7 +15,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` Step

      first title @@ -37,7 +37,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` Step

      second title @@ -59,7 +59,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = ` Step

      third title @@ -90,7 +90,7 @@ exports[`EuiSteps renders steps 1`] = ` Step

      first title @@ -112,7 +112,7 @@ exports[`EuiSteps renders steps 1`] = ` Step

      second title @@ -134,7 +134,7 @@ exports[`EuiSteps renders steps 1`] = ` Step

      third title @@ -165,7 +165,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` Step

      first title @@ -187,7 +187,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` Step

      second title @@ -209,7 +209,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = ` Step

      third title diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss index 51507fc812d..e0c6f014413 100644 --- a/src/components/steps/_steps.scss +++ b/src/components/steps/_steps.scss @@ -11,19 +11,22 @@ .euiTitle { line-height: $euiStepNumberSize; /* 1 */ } -} - .euiStep__title::before { - content: attr(data-step-num); // Get the number from the data attribute - @include createStepsNumber(); + .euiStep__title { + font-weight: $euiFontWeightMedium; + + &::before { + content: attr(data-step-num); // Get the number from the data attribute + @include createStepsNumber(); - margin-right: $euiStepNumberMargin; - vertical-align: top; /* 1 */ + margin-right: $euiStepNumberMargin; + vertical-align: top; /* 1 */ + } } .euiStep__content { border-left: $euiBorderThick; - padding: $euiSize; + padding: $euiSize $euiSize $euiSizeXL; margin: $euiSizeS 0; // Align the content's contents with the title @@ -32,5 +35,5 @@ // Align content border to horizontal center of step number margin-left: ($euiStepNumberSize/2) - 1px; } - +} diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss index 7106f240fdc..bc1f63d9c60 100644 --- a/src/components/steps/_steps_horizontal.scss +++ b/src/components/steps/_steps_horizontal.scss @@ -89,9 +89,9 @@ .euiStepHorizontal__title { display: block; - @include euiTitle; - @include euiFontSize; + @include euiTitle("xs"); margin-top: $euiSizeS; + font-weight: $euiFontWeightRegular; // truncate white-space: nowrap; /* 1 */ diff --git a/src/components/steps/step.js b/src/components/steps/step.js index 60979961712..162bb32424f 100644 --- a/src/components/steps/step.js +++ b/src/components/steps/step.js @@ -27,7 +27,7 @@ export const EuiStep = ({ Step - + {React.createElement(headingElement, null, title)} diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 277adb61e30..8accafadd65 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -26,11 +26,12 @@ .euiTableHeaderCell { @include euiTableCell; - - color: $euiTitleColor; + @include euiTitle("xxs"); + font-weight: $euiFontWeightMedium; .euiTableHeaderButton { text-align: left; + font-weight: $euiFontWeightMedium; } } diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index abf47c25e4f..8c9a1dd7614 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -25,7 +25,6 @@ position: relative; cursor: pointer; padding: $euiSizeM $euiSize; - color: $euiColorDarkShade; background-color: transparent; transition: all $euiAnimSpeedNormal $euiAnimSlightResistance; diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index 3ecd92976d1..3df7716145a 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -1,6 +1,80 @@ +// This should only be used for .euiText, therefore it's not included in a separate mixin file +@mixin euiScaleText($baseFontSize) { + $baseLineHeightMultiplier: $baseFontSize/2; + line-height: convertToRem($baseLineHeightMultiplier*3); + + p, + ul, + ol, + blockquote, + img { + margin-bottom: convertToRem($baseLineHeightMultiplier * 3); + } + + ul, ol { + margin-left: convertToRem($baseLineHeightMultiplier * 3); + } + + blockquote { + padding: convertToRem($baseFontSize * 1.5); + font-size: convertToRem($baseFontSize * nth($euiTextScale, 4)); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-bottom: convertToRem($baseLineHeightMultiplier * 1); + } + + * + h2, + * + h3, + * + h4, + * + h5, + * + h6 { + margin-top: convertToRem($baseLineHeightMultiplier * 4); + } + + h1 { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 1)); + line-height: convertToRem($baseLineHeightMultiplier * 6); + } + + h2 { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 2)); + line-height: convertToRem($baseLineHeightMultiplier * 5); + } + + h3 { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 3)); + line-height: convertToRem($baseLineHeightMultiplier * 4); + } + + h4 { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 5)); // skip level 4 on purpose + } + + h5 { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 6)); + line-height: convertToRem($baseLineHeightMultiplier * 2); + } + + h6 { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 7)); + line-height: convertToRem($baseLineHeightMultiplier * 2); + } + + small { + font-size: convertToRem($baseFontSize * nth($euiTextScale, 6)); + } +} + .euiText { @include euiText; @include euiFontSize; + max-width: 36rem; a { color: $euiLinkColor; @@ -16,22 +90,12 @@ width: 100%; } - p, - ul, - ol, - blockquote, - img { - margin-bottom: $euiSizeL; - } - ul { list-style: disc; - margin-left: $euiSizeL; } ol { list-style: decimal; - margin-left: $euiSizeL; } blockquote { @@ -39,10 +103,7 @@ text-align: center; margin-left: auto; margin-right: auto; - padding: $euiSizeL; - max-width: 36rem; font-family: Georgia,Times,Times New Roman,serif; - font-size: 112.5%; line-height: 1.5; font-style: italic; @@ -68,88 +129,41 @@ } } - * + h1, - * + h2, - * + h3, - * + h4, - * + h5, - * + h6 { - margin-top: $euiSizeXL + h1 { + @include euiTitle("l"); } - h1,h2,h3,h4,h5,h6 { - @include euiTitle; - margin-bottom: $euiSizeS; + h2 { + @include euiTitle("m"); } - h1 { - font-size: 200%; + h3 { + @include euiTitle("s"); } - h2 { - font-size: 150%; - line-height: $euiSizeXL; + h4 { + @include euiTitle("xs"); } - h3 { - font-size: 112.5%; + h5 { + @include euiTitle("xxs"); } - h3, h4, h5 { - font-weight: $euiFontWeightMedium; + h6 { + @include euiTitle("xxxs"); + text-transform: uppercase; } - &.euiText--small { - @include euiFontSizeS; - - * + h1, - * + h2, - * + h3, - * + h4, - * + h5, - * + h6 { - margin-top: $euiSizeL; - } + @include euiScaleText($euiFontSize); - p, - ul, - ol, - h1, - h2, - h3, - h4, - h5, - h6, - img { - margin-bottom: $euiFontSizeS; - } + &.euiText--small { + @include fontSize($euiFontSizeS); + @include euiScaleText($euiFontSizeS); } &.euiText--extraSmall { - @include euiFontSizeXS; - - * + h1, - * + h2, - * + h3, - * + h4, - * + h5, - * + h6 { - margin-top: $euiSizeM; - } - - p, - ul, - ol, - blockquote, - h1, - h2, - h3, - h4, - h5, - h6, - img { - margin-bottom: $euiFontSizeS; - } + @include fontSize($euiFontSizeXS); + @include euiScaleText($euiFontSizeXS); } > :last-child { diff --git a/src/components/title/__snapshots__/title.test.js.snap b/src/components/title/__snapshots__/title.test.js.snap index 5d502f32bce..0cfa39086dd 100644 --- a/src/components/title/__snapshots__/title.test.js.snap +++ b/src/components/title/__snapshots__/title.test.js.snap @@ -3,7 +3,7 @@ exports[`EuiTitle is rendered 1`] = `

      Title diff --git a/src/components/title/_title.scss b/src/components/title/_title.scss index cb2492715b1..30e8a1fcbc8 100644 --- a/src/components/title/_title.scss +++ b/src/components/title/_title.scss @@ -1,12 +1,33 @@ .euiTitle { - @include euiTitle; - @include euiFontSizeL; + + .euiTitle { + margin-top: $euiSizeL; + } +} + +.euiTitle--uppercase { + text-transform: uppercase; +} + +.euiTitle--xxxsmall { + @include euiTitle("xxxs"); +} + +.euiTitle--xxsmall { + @include euiTitle("xxs"); +} + +.euiTitle--xsmall { + @include euiTitle("xs"); } .euiTitle--small { - @include euiFontSizeM; + @include euiTitle("s"); +} + +.euiTitle--medium { + @include euiTitle("m"); } .euiTitle--large { - @include euiFontSizeXL; + @include euiTitle("l"); } diff --git a/src/components/title/title.js b/src/components/title/title.js index e2278a89ce6..eb7375c5307 100644 --- a/src/components/title/title.js +++ b/src/components/title/title.js @@ -5,17 +5,28 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; const titleSizeToClassNameMap = { + xxxs: 'euiTitle--xxxsmall', + xxs: 'euiTitle--xxsmall', + xs: 'euiTitle--xsmall', s: 'euiTitle--small', + m: 'euiTitle--medium', l: 'euiTitle--large', }; export const TITLE_SIZES = Object.keys(titleSizeToClassNameMap); -export const EuiTitle = ({ size, children, className, ...rest }) => { +const textTransformToClassNameMap = { + uppercase: 'euiTitle--uppercase', +}; + +export const TEXT_TRANSFORM = Object.keys(textTransformToClassNameMap); + +export const EuiTitle = ({ size, children, className, textTransform, ...rest }) => { const classes = classNames( 'euiTitle', titleSizeToClassNameMap[size], + textTransformToClassNameMap[textTransform], className ); @@ -30,5 +41,10 @@ export const EuiTitle = ({ size, children, className, ...rest }) => { EuiTitle.propTypes = { children: PropTypes.element.isRequired, className: PropTypes.string, - size: PropTypes.oneOf(TITLE_SIZES), + size: PropTypes.oneOf(TITLE_SIZES).isRequired, + textTransform: PropTypes.oneOf(TEXT_TRANSFORM), +}; + +EuiTitle.defaultProps = { + size: 'm', }; diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss index 56692266e7d..247b680f5e6 100644 --- a/src/components/toast/_toast.scss +++ b/src/components/toast/_toast.scss @@ -69,7 +69,6 @@ $toastTypes: ( * 3. Account for close button. */ .euiToastHeader { - @include euiFontSize; padding-right: $euiSizeL; /* 3 */ display: flex; @@ -90,7 +89,7 @@ $toastTypes: ( } .euiToastHeader__title { - color: $euiTitleColor; + @include euiTitle("s"); font-weight: $euiFontWeightLight; } diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index 9c1b7a01138..8b0b790384f 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -10,23 +10,44 @@ font-family: $euiCodeFontFamily; } -@mixin euiTitle { - color: $euiTitleColor; - font-weight: $euiFontWeightLight; -} - @mixin euiText { color: $euiTextColor; font-weight: $euiFontWeightRegular; } -// Font sizing extends, using rem mixin +@mixin euiTitle($size: "m") { + color: $euiTitleColor; -@mixin euiFontSize { - @include fontSize($euiFontSize); - line-height: $euiLineHeight; + @if $size == "xxxs" { + @include euiFontSizeXS; + font-weight: $euiFontWeightBold; + @include lineHeightFromBaseline(3); + } @else if $size == "xxs" { + @include euiFontSizeS; + font-weight: $euiFontWeightBold; + @include lineHeightFromBaseline(3); + } @else if $size == "xs" { + @include euiFontSize; + font-weight: $euiFontWeightMedium; + @include lineHeightFromBaseline(3); + } @else if $size == "s" { + @include euiFontSizeL; + font-weight: $euiFontWeightMedium; + @include lineHeightFromBaseline(4); + } @else if $size == "m" { + @include euiFontSizeXL; + @include lineHeightFromBaseline(5); + } @else if $size == "l" { + @include euiFontSizeXXL; + @include lineHeightFromBaseline(6); + } @else { + @include fontSize($size); + @include lineHeightFromBaseline(3); + } } +// Font sizing extends, using rem mixin + @mixin euiFontSizeXS { @include fontSize($euiFontSizeXS); line-height: $euiLineHeight; @@ -54,10 +75,12 @@ @mixin euiFontSizeXL { @include fontSize($euiFontSizeXL); - line-height: $euiLineHeight; + line-height: 1.25; + font-weight: $euiFontWeightLight; // always apply light weight to x-large type } @mixin euiFontSizeXXL { @include fontSize($euiFontSizeXXL); - line-height: $euiLineHeight; + line-height: 1.25; + font-weight: $euiFontWeightLight; // always apply light weight to x-large type } diff --git a/src/global_styling/variables/_colors.scss b/src/global_styling/variables/_colors.scss index 3400db5d572..e814dcbf0ac 100644 --- a/src/global_styling/variables/_colors.scss +++ b/src/global_styling/variables/_colors.scss @@ -24,7 +24,7 @@ $euiColorSlightHue: #909AA1 !default; // Every color below must be based mathmatically on the set above. $euiTextColor: $euiColorDarkestShade !default; -$euiTitleColor: $euiColorFullShade !default; +$euiTitleColor: tintOrShade($euiColorFullShade, 10%, 0%) !default; $euiLinkColor: $euiColorPrimary !default; $euiFocusBackgroundColor: tintOrShade($euiColorPrimary, 90%, 50%) !default; diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss index 72546c022aa..c33ebfc3c2b 100644 --- a/src/global_styling/variables/_typography.scss +++ b/src/global_styling/variables/_typography.scss @@ -16,21 +16,31 @@ font-size: convertToRem($size); } +// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. +// EX: A proper line-height for text is 1.5 times the font-size. +// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the +// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +@mixin lineHeightFromBaseline($multiplier: 3) { + line-height: convertToRem(($euiFontSize/2)*$multiplier); +} + + // Families $euiFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $euiCodeFontFamily: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default; -// Font sizes +// Font sizes -- scale is loosely based on Major Third (1.250) +$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75; -$euiFontSize: $euiSize !default; +$euiFontSize: $euiSize !default; // 5th position in scale -$euiFontSizeXS: $euiFontSize * .75 !default; -$euiFontSizeS: $euiFontSize * .875 !default; -$euiFontSizeM: $euiFontSize * 1.125 !default; -$euiFontSizeL: $euiFontSize * 1.5 !default; -$euiFontSizeXL: $euiFontSize * 2 !default; -$euiFontSizeXXL: $euiFontSize * 3 !default; +$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; +$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; +$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; +$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; +$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; +$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // Line height diff --git a/src/themes/k6/k6_globals.scss b/src/themes/k6/k6_globals.scss index e61c08a4107..4ac83328313 100644 --- a/src/themes/k6/k6_globals.scss +++ b/src/themes/k6/k6_globals.scss @@ -1,14 +1,16 @@ // Font families $euiFontFamily: 'Open Sans', Helvetica, Arial, sans-serif; -// Font Sizes -$euiFontSize: 14px; -$euiFontSizeXS: 12px; -$euiFontSizeS: 14px; -$euiFontSizeM: 16px; -$euiFontSizeL: 18px; -$euiFontSizeXL: 24px; -$euiFontSizeXXL: 32px; +$euiTextScale: 2.28571429, 1.71428571, 1.28571429, 1.14285714, 1, 1, 0.85714286; + +$euiFontSize: 14px; // 5th position in scale + +$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7); // 12px +$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6); // 14px +$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4); // 16px +$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3); // 18px +$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2); // 24px +$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1); // 32px // Make titles bold. $euiFontWeightLight: 600;