Convert more of euiScaleText + simplify code scale

- since there isn't a .9 scale size, we should just use `em` to make it relative - since `.euiCode` also uses `.9em`, we can now remove the `:not()` selector
elastic · May 11, 2022 · 0568917 · 0568917
1 parent ec05b2e
commit 0568917
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 30 deletions.
diff --git a/src/components/text/__snapshots__/text.styles.test.ts.snap b/src/components/text/__snapshots__/text.styles.test.ts.snap
@@ -24,6 +24,33 @@ exports[`euiTextStyles sizes m 1`] = `
       font-size: 1.1429rem;
       padding: 1.7143rem;
     }
+
+    dd + dt {
+      margin-block-start: 1.1429rem;
+    }
+
+    dt,
+    .eui-definitionListReverse dd {
+      font-size: 1.1429rem;
+      line-height: 1.7143rem;
+    }
+
+    .eui-definitionListReverse dt {
+      font-size: 0.8571rem;
+      color: #343741;
+    }
+
+    small {
+      font-size: 1.0000rem;
+    }
+
+    pre {
+      padding: 1.1429rem;
+    }
+
+    code {
+      font-size: .9em; // 90% of parent font size
+    }
   ;;label:m;"
 `;
 
@@ -51,6 +78,33 @@ exports[`euiTextStyles sizes relative 1`] = `
       font-size: 1em;
       padding: 1.5000em;
     }
+
+    dd + dt {
+      margin-block-start: 1em;
+    }
+
+    dt,
+    .eui-definitionListReverse dd {
+      font-size: 1em;
+      line-height: 1.5000;
+    }
+
+    .eui-definitionListReverse dt {
+      font-size: 0.75em;
+      color: #343741;
+    }
+
+    small {
+      font-size: 0.875em;
+    }
+
+    pre {
+      padding: 1em;
+    }
+
+    code {
+      font-size: .9em; // 90% of parent font size
+    }
   ;;label:relative;"
 `;
 
@@ -78,6 +132,33 @@ exports[`euiTextStyles sizes s 1`] = `
       font-size: 1.0000rem;
       padding: 1.4286rem;
     }
+
+    dd + dt {
+      margin-block-start: 1.0000rem;
+    }
+
+    dt,
+    .eui-definitionListReverse dd {
+      font-size: 1.0000rem;
+      line-height: 1.4286rem;
+    }
+
+    .eui-definitionListReverse dt {
+      font-size: 0.7500rem;
+      color: #343741;
+    }
+
+    small {
+      font-size: 0.8750rem;
+    }
+
+    pre {
+      padding: 1.0000rem;
+    }
+
+    code {
+      font-size: .9em; // 90% of parent font size
+    }
   ;;label:s;"
 `;
 
@@ -105,5 +186,32 @@ exports[`euiTextStyles sizes xs 1`] = `
       font-size: 0.8571rem;
       padding: 1.1429rem;
     }
+
+    dd + dt {
+      margin-block-start: 0.8571rem;
+    }
+
+    dt,
+    .eui-definitionListReverse dd {
+      font-size: 0.8571rem;
+      line-height: 1.1429rem;
+    }
+
+    .eui-definitionListReverse dt {
+      font-size: 0.6429rem;
+      color: #343741;
+    }
+
+    small {
+      font-size: 0.7500rem;
+    }
+
+    pre {
+      padding: 0.8571rem;
+    }
+
+    code {
+      font-size: .9em; // 90% of parent font size
+    }
   ;;label:xs;"
 `;
diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
@@ -69,36 +69,6 @@
     margin-top: marginToRemOrEm($headingMarginTop, $fontSizeH6, $sizingMethod);
   }
 
-  dd + dt {
-    $marginTop: $baseLineHeightMultiplier * 2;
-
-    margin-top: marginToRemOrEm($marginTop, $marginTop/$baseFontSize, $sizingMethod);
-  }
-
-  dt,
-  .eui-definitionListReverse dd {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 5)), $sizingMethod); // skip level 4 on purpose
-    line-height: ($baseLineHeightMultiplier * 3) / ($baseFontSize * nth($euiTextScale, 5));
-  }
-
-  .eui-definitionListReverse dt {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 7)), $sizingMethod);
-    color: $euiTextColor;
-  }
-
-  small {
-    font-size: fontSizeToRemOrEm(($baseFontSize * nth($euiTextScale, 6)), $sizingMethod);
-  }
-
-  pre {
-    padding: fontSizeToRemOrEm(($baseLineHeightMultiplier * 2), $sizingMethod);
-  }
-
-  code:not(.euiCode):not(.euiCodeBlock__code) {
-    // Excluding EuiCode and EuiCodeBlock selectors to not compound the reduced font-size
-    font-size: fontSizeToRemOrEm(($baseFontSize * .9), $sizingMethod);
-  }
-
   // specific markdown format components that need to scale
   &.euiMarkdownFormat {
     .euiMarkdownFormat__blockquote {

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
@@ -64,6 +64,33 @@ const euiScaleText = (
       font-size: ${fontSize};
       padding: ${lineHeightSize};
     }
+
+    dd + dt {
+      ${logicalCSS('margin-top', fontSize)}
+    }
+
+    dt,
+    .eui-definitionListReverse dd {
+      font-size: ${fontSize};
+      line-height: ${lineHeight};
+    }
+
+    .eui-definitionListReverse dt {
+      font-size: ${euiFontSize('xs', euiTheme, options).fontSize};
+      color: ${euiTheme.colors.text};
+    }
+
+    small {
+      font-size: ${euiFontSize('s', euiTheme, options).fontSize};
+    }
+
+    pre {
+      padding: ${fontSize};
+    }
+
+    code {
+      font-size: .9em; // 90% of parent font size
+    }
   `;
 };