For non-interactive cards, reduce or eliminate the padding as needed
- to suit your layout with the prop paddingSize.
+ to suit your layout with the prop paddingSize, or
+ adjust border radius with borderRadius.
),
diff --git a/src-docs/src/views/guidelines/colors/_color_section.scss b/src-docs/src/views/guidelines/colors/_color_section.scss
index a77993b4df..3c0d3b73cb 100644
--- a/src-docs/src/views/guidelines/colors/_color_section.scss
+++ b/src-docs/src/views/guidelines/colors/_color_section.scss
@@ -9,7 +9,7 @@
* GitHub history for details.
*/
-@include ouiBreakpoint('m', 'l', 'xl') {
+@include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
.guideColorsPage__stickySlider {
position: sticky;
top: $ouiHeaderHeightCompensation;
diff --git a/src-docs/src/views/panel/panel_color.js b/src-docs/src/views/panel/panel_color.js
index b3f7fc6f1b..3b75501b06 100644
--- a/src-docs/src/views/panel/panel_color.js
+++ b/src-docs/src/views/panel/panel_color.js
@@ -24,5 +24,19 @@ export default () => (
@@ -198,7 +204,8 @@ export const PanelExample = {
and provide an additional helpful aesthetic to your container in
context. Be mindful to use color sparingly. You can also remove the
rounded corners depending on the placement of your panel with{' '}
- {'borderRadius="none"'}
+ {'borderRadius="none"'} or the
+ border radius size.
Passing {'color="transparent"'} can
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 5f1cdd68d0..cdb0c9b08f 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -20,6 +20,7 @@
}
border-radius: $ouiButtonBorderRadius;
+ background-color: $ouiButtonBackgroundColor;
min-width: $ouiButtonMinWidth;
.ouiButton__content {
@@ -83,6 +84,7 @@
@if ($name == 'ghost') {
// Ghost is unique and ALWAYS sits against a dark background.
color: $color;
+ background-color: transparent;
} @else if ($name == 'text') {
// The default color is lighter than the normal text color, make the it the text color
color: $ouiTextColor;
diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
index 5ee8a0b486..a903f2ca8e 100644
--- a/src/components/button/button_group/_button_group.scss
+++ b/src/components/button/button_group/_button_group.scss
@@ -32,6 +32,7 @@
@include ouiSlightShadow;
}
border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow
+ background-color: $ouiButtonBackgroundColor;
max-width: 100%;
display: flex;
overflow: hidden;
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 9fc5f5962b..1bf0647d3d 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -180,6 +180,10 @@ export type OuiCardProps = Omit &
* Use a border style of card instead of shadow
*/
hasBorder?: OuiPanelProps['hasBorder'];
+ /**
+ * Customize card border radius
+ */
+ borderRadius?: OuiPanelProps['borderRadius'];
} & (
| {
// description becomes optional when children is present
@@ -216,6 +220,7 @@ export const OuiCard: FunctionComponent = ({
selectable,
display,
paddingSize,
+ borderRadius,
...rest
}) => {
const isHrefValid = !href || validateHref(href);
@@ -405,6 +410,7 @@ export const OuiCard: FunctionComponent = ({
hasShadow={isDisabled || display ? false : true}
hasBorder={display ? false : undefined}
paddingSize={paddingSize}
+ borderRadius={borderRadius}
{...rest}>
{optionalCardTop}
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index 98c3573e4d..bc7a35632b 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -178,7 +178,7 @@
&.ouiFormControlLayout--compressed {
@include ouiFormControlDefaultShadow($borderOnly: true);
- border-radius: calc($ouiBorderRadius / 2);
+ border-radius: $ouiFormControlCompressedBorderRadius;
overflow: hidden; // Keeps backgrounds inside border radius
// Padding
diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx
index d3762dd469..f3e7c079b0 100644
--- a/src/components/header/header_links/header_links.test.tsx
+++ b/src/components/header/header_links/header_links.test.tsx
@@ -55,7 +55,7 @@ describe('OuiHeaderLinks', () => {
test('is rendered', () => {
const component = render(
= ({
* Full height ~madness~ logic
*/
const canFullHeight =
- useIsWithinBreakpoints(['m', 'l', 'xl']) &&
+ useIsWithinBreakpoints(['m', 'l', 'xl', 'xxl', 'xxxl']) &&
(template === 'default' || template === 'empty');
const fullHeightClass = { 'oui-fullHeight': fullHeight && canFullHeight };
const yScrollClass = { 'oui-yScroll': fullHeight && canFullHeight };
diff --git a/src/components/panel/__snapshots__/panel.test.tsx.snap b/src/components/panel/__snapshots__/panel.test.tsx.snap
index 3021ebaad6..6adbfadf40 100644
--- a/src/components/panel/__snapshots__/panel.test.tsx.snap
+++ b/src/components/panel/__snapshots__/panel.test.tsx.snap
@@ -8,6 +8,12 @@ exports[`OuiPanel is rendered 1`] = `
/>
`;
+exports[`OuiPanel props borderRadius l is rendered 1`] = `
+
+`;
+
exports[`OuiPanel props borderRadius m is rendered 1`] = `
`;
+exports[`OuiPanel props borderRadius xl is rendered 1`] = `
+
+`;
+
exports[`OuiPanel props color accent is rendered 1`] = `
EUI Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_header.scss b/src/themes/oui-next/global_styling/mixins/_header.scss
index 2dd794c2c8..25e48cb363 100644
--- a/src/themes/oui-next/global_styling/mixins/_header.scss
+++ b/src/themes/oui-next/global_styling/mixins/_header.scss
@@ -22,7 +22,7 @@
height: calc(100% - #{$headerHeight});
}
- @include ouiBreakpoint('m', 'l', 'xl') {
+ @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
.ouiPageSideBar--sticky {
max-height: calc(100vh - #{$headerHeight});
top: #{$headerHeight};
@@ -47,7 +47,7 @@
height: calc(100% - #{$headerHeight});
}
- @include euiBreakpoint('m', 'l', 'xl') {
+ @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
.euiPageSideBar--sticky {
max-height: calc(100vh - #{$headerHeight});
top: #{$headerHeight};
diff --git a/src/themes/oui-next/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss
index 0830c0fdf2..cc46a06548 100644
--- a/src/themes/oui-next/global_styling/variables/_buttons.scss
+++ b/src/themes/oui-next/global_styling/variables/_buttons.scss
@@ -19,6 +19,7 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled)
$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
$ouiButtonBorderRadius: $ouiBorderRadius !default;
+$ouiButtonBackgroundColor: transparent;
// Modifier naming and colors.
$ouiButtonTypes: (
@@ -42,5 +43,6 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
$euiButtonColorDisabledText: $ouiButtonColorDisabledText;
$euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
$euiButtonBorderRadius: $ouiButtonBorderRadius;
+$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
$euiButtonTypes: $ouiButtonTypes;
/* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_index.scss b/src/themes/oui-next/global_styling/variables/_index.scss
index ae6c1944be..1906826394 100644
--- a/src/themes/oui-next/global_styling/variables/_index.scss
+++ b/src/themes/oui-next/global_styling/variables/_index.scss
@@ -35,3 +35,4 @@
@import 'panel';
@import 'tool_tip';
@import 'collapsible_nav';
+@import 'side_nav';
\ No newline at end of file
diff --git a/src/themes/oui-next/global_styling/variables/_panel.scss b/src/themes/oui-next/global_styling/variables/_panel.scss
index 6edb023b3e..21b5cc4e65 100644
--- a/src/themes/oui-next/global_styling/variables/_panel.scss
+++ b/src/themes/oui-next/global_styling/variables/_panel.scss
@@ -18,6 +18,8 @@ $ouiPanelPaddingModifiers: (
$ouiPanelBorderRadiusModifiers: (
'borderRadiusNone': 0,
'borderRadiusMedium': $ouiBorderRadius,
+ 'borderRadiusLarge': $ouiBorderRadius * 2,
+ 'borderRadiusXLarge': $ouiBorderRadius * 4,
) !default;
$ouiPanelBackgroundColorModifiers: (
diff --git a/src/themes/oui-next/global_styling/variables/_side_nav.scss b/src/themes/oui-next/global_styling/variables/_side_nav.scss
new file mode 100644
index 0000000000..4469ffbb28
--- /dev/null
+++ b/src/themes/oui-next/global_styling/variables/_side_nav.scss
@@ -0,0 +1,36 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+$ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default;
+
+// Simulates the transparent backround on top of the page background to get an opaque color
+// in order to get the right contrast for text
+@function ouiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) {
+ $backgroundColorSimulated: mix($ouiPageBackgroundColor, $ouiColorLightShade, 70%);
+ $color: makeHighContrastColor($textColor, $backgroundColorSimulated, $ratio);
+ @return $color;
+}
+
+// Ensure all the possible text color have proper contrast when "emphasized"
+$ouiSideNavRootTextcolor: ouiSideNavEmphasizedContrast($ouiTitleColor) !default;
+$ouiSideNavBranchTextcolor: ouiSideNavEmphasizedContrast($ouiTextSubduedColor) !default;
+$ouiSideNavSelectedTextcolor: ouiSideNavEmphasizedContrast($ouiColorPrimary) !default;
+$ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabledText, $ouiContrastRatioDisabled) !default;
+
+
+/* OUI -> EUI Aliases */
+$euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor;
+$euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
+$euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;
+$euiSideNavSelectedTextcolor: $ouiSideNavSelectedTextcolor;
+$euiSideNavDisabledTextcolor: $ouiSideNavDisabledTextcolor;
+@function euiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) { @return ouiSideNavEmphasizedContrast($textColor, $ratio); }
+/* End of Aliases */
diff --git a/src/themes/v9/global_styling/mixins/_header.scss b/src/themes/v9/global_styling/mixins/_header.scss
index 2dd794c2c8..25e48cb363 100644
--- a/src/themes/v9/global_styling/mixins/_header.scss
+++ b/src/themes/v9/global_styling/mixins/_header.scss
@@ -22,7 +22,7 @@
height: calc(100% - #{$headerHeight});
}
- @include ouiBreakpoint('m', 'l', 'xl') {
+ @include ouiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
.ouiPageSideBar--sticky {
max-height: calc(100vh - #{$headerHeight});
top: #{$headerHeight};
@@ -47,7 +47,7 @@
height: calc(100% - #{$headerHeight});
}
- @include euiBreakpoint('m', 'l', 'xl') {
+ @include euiBreakpoint('m', 'l', 'xl', 'xxl', 'xxxl') {
.euiPageSideBar--sticky {
max-height: calc(100vh - #{$headerHeight});
top: #{$headerHeight};
diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
index 8df83c3fc6..acce34a3df 100644
--- a/src/themes/v9/global_styling/variables/_buttons.scss
+++ b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -14,13 +14,14 @@ $ouiButtonHeightSmall: $ouiSizeXL !default;
$ouiButtonHeightXSmall: $ouiSizeL !default;
// sass-lint:disable no-color-literals
-$ouiButtonColorDisabled: lightOrDarkTheme($ouiColorMediumShade, $ouiColorLightShade) !default;
+$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, $ouiColorLightShade) !default;
// Only increase the contrast of background color to text to 2.0 for disabled
$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default;
// sass-lint:disable no-color-literals
$ouiButtonColorGhostDisabled: lightOrDarkTheme(#585858, #353535) !default;
-$ouiButtonBorderRadius: 0 !default;
+$ouiButtonBorderRadius: $ouiBorderRadius !default;
+$ouiButtonBackgroundColor: $ouiColorEmptyShade;
// Modifier naming and colors.
$ouiButtonTypes: (
@@ -44,5 +45,6 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
$euiButtonColorDisabledText: $ouiButtonColorDisabledText;
$euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
$euiButtonBorderRadius: $ouiButtonBorderRadius;
+$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
$euiButtonTypes: $ouiButtonTypes;
/* End of Aliases */
diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
index 2c4da78f06..8752b5f08b 100644
--- a/src/themes/v9/global_styling/variables/_colors.scss
+++ b/src/themes/v9/global_styling/variables/_colors.scss
@@ -13,46 +13,46 @@
@import '../functions/index';
// These colors stay the same no matter the theme
-$ouiColorGhost: #FFFFFF !default;
-$ouiColorInk: #131313 !default;
+$ouiColorGhost: #F7F4F2 !default;
+$ouiColorInk: #262626 !default;
// Core
$ouiColorPrimary: #0974BE !default;
-$ouiColorSecondary: #0F7F6B !default;
-$ouiColorAccent: #9E4DC0 !default;
+$ouiColorSecondary: #107F6B !default;
+$ouiColorAccent: #7F389D !default;
// Status
$ouiColorSuccess: $ouiColorSecondary !default;
-$ouiColorWarning: #E4A330 !default;
+$ouiColorWarning: #FFC460 !default;
$ouiColorDanger: #C84233 !default;
// Grays
$ouiColorEmptyShade: #FFFFFF !default;
-$ouiColorLightestShade: #E5E5E5 !default;
-$ouiColorLightShade: #CDCDCD !default;
-$ouiColorMediumShade: #AFAFAF !default;
+$ouiColorLightestShade: #F7F4F2 !default;
+$ouiColorLightShade: #EBE4DF !default;
+$ouiColorMediumShade: #C1AC9C !default;
$ouiColorDarkShade: #585858 !default;
-$ouiColorDarkestShade: #2A2A2A !default;
+$ouiColorDarkestShade: #262626 !default;
$ouiColorFullShade: #131313 !default;
// Backgrounds
-$ouiPageBackgroundColor: #F9F9F9 !default;
+$ouiPageBackgroundColor: #F3EFEC !default;
$ouiColorHighlight: #FFF3E1 !default;
// Every color below must be based mathematically on the set above and in a particular order.
-$ouiTextColor: $ouiColorFullShade !default;
-$ouiTitleColor: $ouiColorFullShade !default;
-$ouiTextSubduedColor: #707070 !default;
-$ouiColorDisabled: #CDCDCD !default;
+$ouiTextColor: $ouiColorDarkestShade !default;
+$ouiTitleColor: shade($ouiTextColor, 50%) !default;
+$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default;
+$ouiColorDisabled: tint($ouiTextColor, 70%) !default;
// Contrasty text variants
-$ouiColorPrimaryText: $ouiColorPrimary !default;
-$ouiColorSecondaryText: $ouiColorSecondary !default;
-$ouiColorAccentText: $ouiColorAccent !default;
-$ouiColorWarningText: #91691F !default;
-$ouiColorDangerText: $ouiColorDanger !default;
-$ouiColorDisabledText: #8E8E8E !default;
-$ouiColorSuccessText: $ouiColorSuccess !default;
+$ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default;
+$ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary) !default;
+$ouiColorAccentText: makeHighContrastColor($ouiColorAccent) !default;
+$ouiColorWarningText: makeHighContrastColor($ouiColorWarning) !default;
+$ouiColorDangerText: makeHighContrastColor($ouiColorDanger) !default;
+$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled) !default;
+$ouiColorSuccessText: $ouiColorSecondaryText !default;
$ouiLinkColor: $ouiColorPrimaryText !default;
// Visualization colors
diff --git a/src/themes/v9/global_styling/variables/_form.scss b/src/themes/v9/global_styling/variables/_form.scss
index 99a62bbfb3..66de9613fe 100644
--- a/src/themes/v9/global_styling/variables/_form.scss
+++ b/src/themes/v9/global_styling/variables/_form.scss
@@ -16,7 +16,7 @@ $ouiFormControlCompressedHeight: $ouiSizeXL !default;
$ouiFormControlPadding: $ouiSizeM !default;
$ouiFormControlCompressedPadding: $ouiSizeS !default;
$ouiFormControlBorderRadius: 0 !default;
-$ouiFormControlCompressedBorderRadius: $ouiBorderRadiusSmall !default;
+$ouiFormControlCompressedBorderRadius: 2px !default;
$ouiRadioSize: $ouiSize !default;
$ouiCheckBoxSize: $ouiSize !default;
diff --git a/src/themes/v9/global_styling/variables/_index.scss b/src/themes/v9/global_styling/variables/_index.scss
index ae6c1944be..1906826394 100644
--- a/src/themes/v9/global_styling/variables/_index.scss
+++ b/src/themes/v9/global_styling/variables/_index.scss
@@ -35,3 +35,4 @@
@import 'panel';
@import 'tool_tip';
@import 'collapsible_nav';
+@import 'side_nav';
\ No newline at end of file
diff --git a/src/themes/v9/global_styling/variables/_panel.scss b/src/themes/v9/global_styling/variables/_panel.scss
index 6edb023b3e..21b5cc4e65 100644
--- a/src/themes/v9/global_styling/variables/_panel.scss
+++ b/src/themes/v9/global_styling/variables/_panel.scss
@@ -18,6 +18,8 @@ $ouiPanelPaddingModifiers: (
$ouiPanelBorderRadiusModifiers: (
'borderRadiusNone': 0,
'borderRadiusMedium': $ouiBorderRadius,
+ 'borderRadiusLarge': $ouiBorderRadius * 2,
+ 'borderRadiusXLarge': $ouiBorderRadius * 4,
) !default;
$ouiPanelBackgroundColorModifiers: (
diff --git a/src/themes/v9/global_styling/variables/_side_nav.scss b/src/themes/v9/global_styling/variables/_side_nav.scss
new file mode 100644
index 0000000000..7256833fdf
--- /dev/null
+++ b/src/themes/v9/global_styling/variables/_side_nav.scss
@@ -0,0 +1,36 @@
+/*!
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+$ouiSideNavEmphasizedBackgroundColor: rgba(9, 116, 190, .1) !default;
+
+// Simulates the transparent backround on top of the page background to get an opaque color
+// in order to get the right contrast for text
+@function ouiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) {
+ $backgroundColorSimulated: mix($ouiPageBackgroundColor, $ouiColorLightShade, 70%);
+ $color: makeHighContrastColor($textColor, $backgroundColorSimulated, $ratio);
+ @return $color;
+}
+
+// Ensure all the possible text color have proper contrast when "emphasized"
+$ouiSideNavRootTextcolor: ouiSideNavEmphasizedContrast($ouiTitleColor) !default;
+$ouiSideNavBranchTextcolor: ouiSideNavEmphasizedContrast($ouiTextSubduedColor) !default;
+$ouiSideNavSelectedTextcolor: ouiSideNavEmphasizedContrast($ouiColorPrimary) !default;
+$ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabledText, $ouiContrastRatioDisabled) !default;
+
+
+/* OUI -> EUI Aliases */
+$euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor;
+$euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
+$euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;
+$euiSideNavSelectedTextcolor: $ouiSideNavSelectedTextcolor;
+$euiSideNavDisabledTextcolor: $ouiSideNavDisabledTextcolor;
+@function euiSideNavEmphasizedContrast($textColor, $ratio: $ouiContrastRatioText) { @return ouiSideNavEmphasizedContrast($textColor, $ratio); }
+/* End of Aliases */
diff --git a/src/themes/v9/global_styling/variables/_typography.scss b/src/themes/v9/global_styling/variables/_typography.scss
index a7294346e6..12a2ea982b 100644
--- a/src/themes/v9/global_styling/variables/_typography.scss
+++ b/src/themes/v9/global_styling/variables/_typography.scss
@@ -65,11 +65,11 @@ $ouiLineHeight: 1.5 !default;
$ouiBodyLineHeight: 1 !default;
// Font weights
-$ouiFontWeightLight: 200 !default;
-$ouiFontWeightRegular: 300 !default;
-$ouiFontWeightMedium: 400 !default;
+$ouiFontWeightLight: 400 !default;
+$ouiFontWeightRegular: 400 !default;
+$ouiFontWeightMedium: 500 !default;
$ouiFontWeightSemiBold: 500 !default;
-$ouiFontWeightBold: 600 !default;
+$ouiFontWeightBold: 500 !default;
$ouiCodeFontWeightRegular: 400 !default;
$ouiCodeFontWeightBold: 700 !default;
@@ -77,25 +77,25 @@ $ouiCodeFontWeightBold: 700 !default;
// Lists all the properties per OuiTitle size that then gets looped through to create the selectors.
// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
$ouiTitles: (
- // h4: 12px / 15px / 400
+ // h6: 14px / 17px / 500
'xxxs': (
- 'font-size': $ouiFontSizeXS,
- 'line-height': lineHeightFromBaseline(2.1429),
+ 'font-size': $ouiFontSizeS,
+ 'line-height': lineHeightFromBaseline(2.4286),
'font-weight': $ouiFontWeightMedium,
),
- // h4: 12px / 15px / 400
+ // h5: 14px / 17px / 500
'xxs': (
- 'font-size': $ouiFontSizeXS,
- 'line-height': lineHeightFromBaseline(2.1429),
+ 'font-size': $ouiFontSizeS,
+ 'line-height': lineHeightFromBaseline(2.4286),
'font-weight': $ouiFontWeightMedium,
),
- // h4: 14px / 17px / 400
+ // h4: 16px / 19px / 500
'xs': (
- 'font-size': $ouiFontSize,
- 'line-height': lineHeightFromBaseline(2.8286),
+ 'font-size': $ouiFontSizeM,
+ 'line-height': lineHeightFromBaseline(2.7143),
'font-weight': $ouiFontWeightMedium,
),
- // h3: 18px / 22px / 400
+ // h3: 18px / 22px / 500
's': (
'font-size': $ouiFontSizeL,
'line-height': lineHeightFromBaseline(3.1429),
@@ -105,13 +105,13 @@ $ouiTitles: (
'm': (
'font-size': $ouiFontSizeXL,
'line-height': lineHeightFromBaseline(4.1429),
- 'font-weight': $ouiFontWeightLight,
+ 'font-weight': $ouiFontWeightRegular,
),
// h1: 28px / 34px / 400
'l': (
'font-size': $ouiFontSizeXXL,
'line-height': lineHeightFromBaseline(4.857),
- 'font-weight': $ouiFontWeightLight,
+ 'font-weight': $ouiFontWeightRegular,
),
) !default;