Refactor styles according to new linting

thibaudcolas · thibaudcolas · commit 992efe3249a0 · 2025-12-02T17:19:33.000Z
diff --git a/pattern_library/static/pattern_library/src/scss/_config.scss b/pattern_library/static/pattern_library/src/scss/_config.scss
@@ -2,8 +2,8 @@
 $site-title: 'Django Pattern Library';
 $color-primary: #34b2b2;
 $family-primary:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, 'Helvetica Neue', sans-serif;
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen-sans, ubuntu,
+    cantarell, 'Helvetica Neue', sans-serif;
 
 // $color--primary + $family--primary are in _config.scss
 $white: #fff;
diff --git a/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss b/pattern_library/static/pattern_library/src/scss/abstracts/_base.scss
@@ -25,7 +25,7 @@ h6 {
 }
 
 a {
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     color: $link-color;
 }
 
@@ -58,7 +58,7 @@ a {
     height: 1px;
     overflow: hidden;
     opacity: 0;
-    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: rect(1px, 1px, 1px, 1px);
 }
 
 @keyframes fadeInOut {
diff --git a/pattern_library/static/pattern_library/src/scss/components/_heading.scss b/pattern_library/static/pattern_library/src/scss/components/_heading.scss
@@ -12,7 +12,7 @@
         top: 20%;
         left: 50%;
         transform: translate(-50%, -50%);
-        background: rgba(0, 0, 0, 0.78);
+        background: rgb(0, 0, 0, 0.78);
         padding: 20px;
         border-radius: 10px;
         font-weight: bold;
diff --git a/pattern_library/static/pattern_library/src/scss/components/_iframe.scss b/pattern_library/static/pattern_library/src/scss/components/_iframe.scss
@@ -7,7 +7,6 @@
     margin: 20px 0;
     resize: both;
     overflow: auto;
-    height: 300px;
     height: 415px;
 
     &.is-animatable {
diff --git a/pattern_library/static/pattern_library/src/scss/components/_md.scss b/pattern_library/static/pattern_library/src/scss/components/_md.scss
@@ -1,6 +1,6 @@
 .md {
     padding: 20px;
-    background-color: #eee;
+    background-color: $off-white;
 
     h1,
     h2,
diff --git a/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss b/pattern_library/static/pattern_library/src/scss/components/_tabbed-listing.scss
@@ -15,7 +15,7 @@
         text-align: center;
 
         > a {
-            color: color.adjust(#000, $lightness: 30%);
+            color: color.adjust($black, $lightness: 30%);
             padding: 12px 0;
             display: block;
             width: 100%;
@@ -26,14 +26,14 @@
                 background-color 0.25s ease;
 
             &:hover {
-                color: #000;
+                color: $black;
                 background-color: $color-primary;
             }
         }
 
         &--active {
             > a {
-                color: #000;
+                color: $black;
                 background-color: $color-primary;
             }
         }
diff --git a/pattern_library/static/pattern_library/src/scss/hljs/_a11y-dark.scss b/pattern_library/static/pattern_library/src/scss/hljs/_a11y-dark.scss
@@ -1,6 +1,8 @@
-/* a11y-dark theme */
-/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
-/* @author: ericwbailey */
+// a11y-dark theme
+// Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
+// @author: ericwbailey
+
+// stylelint-disable selector-class-pattern, scale-unlimited/declaration-strict-value
 
 /* Comment */
 .hljs-comment,
diff --git a/pattern_library/static/pattern_library/src/scss/hljs/_a11y-light.scss b/pattern_library/static/pattern_library/src/scss/hljs/_a11y-light.scss
@@ -1,6 +1,8 @@
-/* a11y-light theme */
-/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
-/* @author: ericwbailey */
+// a11y-light theme
+// Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
+// @author: ericwbailey
+
+// stylelint-disable selector-class-pattern, scale-unlimited/declaration-strict-value
 
 /* Comment */
 .hljs-comment,
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_body.scss b/pattern_library/static/pattern_library/src/scss/layout/_body.scss
@@ -1,14 +1,10 @@
 @use '../config' as *;
 
 .body {
-    display: -ms-grid;
     display: grid;
-    -ms-grid-columns: $sidebar-width 1fr;
-    -ms-grid-rows: 45px 1fr;
     grid-template-columns: $sidebar-width 1fr;
 
     &.nav-closed {
-        -ms-grid-columns: 0 1fr;
         grid-template-columns: 0 1fr;
     }
 
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_header.scss b/pattern_library/static/pattern_library/src/scss/layout/_header.scss
@@ -5,9 +5,6 @@
     display: flex;
     align-items: center;
     height: 45px;
-    -ms-grid-column: 1;
-    -ms-grid-row: 1;
-    -ms-grid-column-span: 2;
     grid-column: 1 / span 2;
 
     &__title {
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_main.scss b/pattern_library/static/pattern_library/src/scss/layout/_main.scss
@@ -5,6 +5,4 @@
     padding: 20px;
     background: $white;
     overflow: scroll;
-    -ms-grid-column: 2;
-    -ms-grid-row: 2;
 }
diff --git a/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss b/pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss
@@ -5,8 +5,6 @@
     height: 100vh;
     margin-left: 0;
     overflow: auto;
-    -ms-grid-column: 1;
-    -ms-grid-row: 2;
 
     &__inner {
         padding: 20px;

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ h6 {`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`a {`
`28`		`- word-wrap: break-word;`
	`28`	`+ overflow-wrap: break-word;`
`29`	`29`	`color: $link-color;`
`30`	`30`	`}`
`31`	`31`
`@@ -58,7 +58,7 @@ a {`
`58`	`58`	`height: 1px;`
`59`	`59`	`overflow: hidden;`
`60`	`60`	`opacity: 0;`
`61`		`- clip: rect(1px, 1px, 1px, 1px);`
	`61`	`+ clip-path: rect(1px, 1px, 1px, 1px);`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`@keyframes fadeInOut {`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`text-align: center;`
`16`	`16`
`17`	`17`	`> a {`
`18`		`- color: color.adjust(#000, $lightness: 30%);`
	`18`	`+ color: color.adjust($black, $lightness: 30%);`
`19`	`19`	`padding: 12px 0;`
`20`	`20`	`display: block;`
`21`	`21`	`width: 100%;`
`@@ -26,14 +26,14 @@`
`26`	`26`	`background-color 0.25s ease;`
`27`	`27`
`28`	`28`	`&:hover {`
`29`		`- color: #000;`
	`29`	`+ color: $black;`
`30`	`30`	`background-color: $color-primary;`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`&--active {`
`35`	`35`	`> a {`
`36`		`- color: #000;`
	`36`	`+ color: $black;`
`37`	`37`	`background-color: $color-primary;`
`38`	`38`	`}`
`39`	`39`	`}`