style: lint docs styles (#1348)

RedHat-UX · Dec 6, 2023 · 3e1f54b · 3e1f54b
1 parent 03ce949
commit 3e1f54b
Show file tree

Hide file tree

Showing 29 changed files with 552 additions and 784 deletions.
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
@@ -64,6 +64,8 @@ overrides:
     defaultSeverity: warning
     extends: stylelint-config-standard-scss
     rules:
+      stylistic/block-closing-brace-newline-after: null
+      scss/at-if-closing-brace-newline-after: always-last-in-chain
       stylistic/max-line-length:
         - 120
         - ignorePattern: /--rh-font-family-/

diff --git a/docs/_plugins/tokens.cjs b/docs/_plugins/tokens.cjs
@@ -2,7 +2,6 @@ const { readFile } = require('node:fs/promises');
 const { join } = require('node:path');
 
 const tokensJSON = require('@rhds/tokens/json/rhds.tokens.json');
-const tokensFlat = require('@rhds/tokens/json/rhds.tokens.flat.json');
 
 const getDocs = (x, options) => x?.$extensions?.[options.docsExtension];
 const capitalize = x => `${x.at(0).toUpperCase()}${x.slice(1)}`;

diff --git a/docs/scss/__core/_mixins.scss b/docs/scss/__core/_mixins.scss
@@ -1,18 +1,17 @@
-@use 'sass:map';
-@use 'variables' as *;
+@use "sass:map";
+@use "variables" as *;
 
 /// Breakpoint helper
 /// @todo Do we need an IE11 hack? I think we should have fallback styles for non-grid
 ///
 /// @param {string} $breakpoint This can be a breakpoint from the $breakpoints map, or a value in pixels.
 /// @param {string} $min-max Can be either 'min-width' or 'max-width'. Defaults to 'min-width'.
-@mixin breakpoint($breakpoint, $min-max: 'min-width') {
+@mixin breakpoint($breakpoint, $min-max: "min-width") {
   $output: false;
 
-  @if (type-of($breakpoint) == number) {
+  @if type-of($breakpoint) == number {
     $output: $breakpoint;
-  }
-  @else {
+  } @else {
     $output: #{map.get($breakpoints, $breakpoint)};
   }
 
@@ -54,13 +53,12 @@
   margin-right: auto;
 }
 
-
 /// Helper that makes an element a grid container
 @mixin grid-container() {
   grid-column: 1 / -1; // If nested in a grid, always span the full width of that parent grid.
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  grid-column-gap: $gutter;
+  column-gap: 18px;
   justify-self: stretch;
 
   @include breakpoint(lima) {
@@ -102,7 +100,7 @@
 /// Creates a before element that will maintain aspect ratio of element
 @mixin aspect-ratio($width, $height) {
   &:before {
-    content: '';
+    content: "";
     display: block;
     box-sizing: content-box;
     width: 100%;

diff --git a/docs/scss/__core/_variables.scss b/docs/scss/__core/_variables.scss
@@ -1,10 +1,6 @@
-$gutter: 18px;
-
 /// Site content's maximum width
 $grid-max-width: 1280px;
-
 $fixed-sidebar-width: 280px;
-
 $header-height: (
   default: 60px,
   lima: 72px,
@@ -26,23 +22,4 @@ $breakpoints: (
 /// For use with specific functionality (e.g. navigation menu change).
 /// @see {mixin} breakpoint
 /// @see {variable} $breakpoints
-$nav-break: 'lima';
-
-/// Colors by their design function
-$colors-by-function: (
-  text:           #222,
-  text--inverted: #fff,
-
-  // Text links on _white_ or _light_ backgrounds
-  link:           #06c,
-  link--hover:    #004080,
-  link--focus:    #004080,
-  link--active:   #004080,
-  link--visited:  #06c,
-
-  // UI elements, like buttons
-  ui-element:           #06c,   // Smaller elements, like solid buttons
-  ui-element--hover:    #004080,
-  ui-element--focus:    #004080,
-  ui-element--active:   #004080,
-);
+$nav-break: "lima";
diff --git a/docs/scss/_base/_base.scss b/docs/scss/_base/_base.scss
@@ -1,5 +1,5 @@
 @use "sass:map";
-@use '../__core/_mixins' as *;
+@use "../__core/_mixins" as *;
 @use "../__core/variables" as *;
 
 * {
@@ -42,48 +42,46 @@
 
 html {
   scroll-padding-top: map.get($header-height, default);
+
   @include breakpoint(lima) {
     scroll-padding-top: map.get($header-height, lima);
   }
 }
 
 body {
-  font-family: RedHatText, Overpass, Helvetica, sans-serif;
+  font-family: var(--rh-font-family-body-text);
   font-size: 1rem;
-  line-height: 1.6;
+  line-height: var(--rh-line-height-body-text);
   overflow-y: scroll; // Force scrollbar on OS's with one to prevent UI jumping
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 .l-main__content {
-  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+  font-size: var(--rh-font-size-body-text-lg);
 }
 
 h1,
 h2,
 h3,
-h4, 
-h5, 
+h4,
+h5,
 h6 {
-  line-height: var(--rh-line-height-heading, 1.3);
-  font-family: RedHatDisplay, Overpass, Helvetica, sans-serif;
+  line-height: var(--rh-line-height-heading);
+  font-family: var(--rh-font-family-heading);
 }
 
 h1 {
-  font-weight: var(--rh-font-weight-heading-regular, 300);
+  font-weight: var(--rh-font-weight-heading-regular);
+  font-size: var(--rh-font-size-heading-2xl);
 }
 
 h2,
 h3,
-h4, 
-h5, 
+h4,
+h5,
 h6 {
-  font-weight: var(--rh-font-weight-heading-medium, 500);
-}
-
-h1 {
-  font-size: var(--rh-font-size-heading-2xl, 3.0rem);
+  font-weight: var(--rh-font-weight-heading-medium);
 }
 
 h2 {
@@ -112,7 +110,6 @@ img {
   figure & {
     display: block;
   }
-
 }
 
 p:empty {
@@ -121,28 +118,21 @@ p:empty {
 }
 
 a {
-  color: map.get($colors-by-function, link);
-
-  &:hover {
-    color: map.get($colors-by-function, link--hover);
-  }
-
-  &:focus {
-    color: map.get($colors-by-function, link--focus);
-  }
+  color: var(--rh-color-interactive-blue-darker);
 
+  &:hover,
+  &:focus,
   &:active {
-    color: map.get($colors-by-function, link--active);
+    color: var(--rh-color-interactive-blue-darkest);
   }
 
   &:visited {
-    color: map.get($colors-by-function, link--visited);
-  }
+    color: var(--rh-color-interactive-purple-darker);
 
-  &:visited:hover {
-    color: map.get($colors-by-function, link--hover);
+    &:hover {
+      color: var(--rh-color-interactive-purple-darkest);
+    }
   }
-
 }
 
 li {
@@ -156,33 +146,31 @@ iframe {
 
 table {
   border: 1px solid #eeeeee;
-}
 
-td,
-th {
-  padding: 18px $gutter;
-}
-
-th {
-  thead & {
-    border-bottom: 1px solid #d2d2d2;
+  td,
+  th {
+    padding: 18px;
   }
 
-  tfoot & {
-    border-top: 1px solid #d2d2d2;
-  }
-}
+  th {
+    font-size: 14px;
 
-th {
-  font-size: 14px;
-}
+    thead & {
+      border-bottom: 1px solid #d2d2d2;
+    }
 
-td {
-  border: 1px solid #f5f5f5;
-  border-left: 0;
+    tfoot & {
+      border-top: 1px solid #d2d2d2;
+    }
+  }
 
-  &:last-child {
-    border-right: 0;
+  td {
+    border: 1px solid #f5f5f5;
+    border-left: 0;
+
+    &:last-child {
+      border-right: 0;
+    }
   }
 }
 
@@ -197,18 +185,12 @@ pre {
 }
 
 summary {
-  color: map.get($colors-by-function, link);
+  color: var(--rh-color-interactive-blue-darker);
   cursor: pointer;
 
-  &:hover {
-    color: map.get($colors-by-function, link--hover);
-  }
-
-  &:focus {
-    color: map.get($colors-by-function, link--focus);
-  }
-
+  &:hover,
+  &:focus,
   &:active {
-    color: map.get($colors-by-function, link--active);
+    color: var(--rh-color-interactive-blue-darkest);
   }
 }
diff --git a/docs/scss/_base/_normalize.scss b/docs/scss/_base/_normalize.scss
@@ -1,4 +1,4 @@
-@use '../__core/_mixins' as *;
+@use "../__core/_mixins" as *;
 
 /* stylelint-disable */