Convert LESS variables to custom properties

twm · Aug 27, 2024 · 9d67cd8 · 9d67cd8
1 parent ea891b1
commit 9d67cd8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 29 deletions.
diff --git a/less/ListArticle.less b/less/ListArticle.less
@@ -17,7 +17,7 @@
 
     .outbound {
         .flat-button;
-        padding: ((2 * @button_border_width));
+        padding: calc(2 * var(--button-border-width));
         flex: 1 1 100%;
         width: 100%;
         display: grid;
@@ -61,7 +61,7 @@
 
     read-toggle,
     .view-link {
-        flex: 0 0 @bar_height;
+        flex: 0 0 var(--bar-height);
     }
     read-toggle {
         button {
@@ -79,7 +79,7 @@
     .outbound-icon,
     read-toggle button,
     .view-link {
-        font-size: @icon_size;
+        font-size: var(--icon-size);
         display: flex;
         flex-flow: row nowrap;
         align-items: center;

diff --git a/less/include.less b/less/include.less
@@ -4,17 +4,6 @@
  * This file must not contain any concrete styles.
  */
 
-/* There is always this much padding between text and the edge of stuff. */
-@text_padding: 0.25rem;
-
-/* Buttons have thick borders, also used to indicate focus. */
-@button_border_width: 2px;
-
-@icon_size: 2.0rem;
-
-@bar_line_height: 1.25rem;
-@bar_height: calc(2 * @bar_line_height + 2 * @text_padding + 2 * @button_border_width);
-
 .flat-button() {
     box-sizing: border-box;
     border: none;
@@ -25,6 +14,6 @@
 
     &:focus-visible {
         outline: transparent;
-        box-shadow: inset 0 0 0 @button_border_width var(--focus-color);
+        box-shadow: inset 0 0 0 var(--button-border-width) var(--focus-color);
     }
 }
diff --git a/less/inventory.less b/less/inventory.less
@@ -106,7 +106,7 @@
         grid:
             "feed     unread edit" min-content
             "changed  fave   edit" min-content / 1fr min-content min-content;
-        padding: 0.75rem @text_padding;
+        padding: 0.75rem var(--text-padding);
 
         & > .col-feed { grid-area: feed; padding: 0 0.5rem 0 0; }
         & > .col-unread { grid-area: unread; padding: 0 0.5rem; text-align: right; }
@@ -230,7 +230,7 @@
         grid:
             "icon title unread edit" min-content
             "icon feeds fave   edit" min-content / min-content 1fr min-content min-content;
-        padding: 0.75rem @text_padding;
+        padding: 0.75rem var(--text-padding);
 
         & > td:nth-child(1) { grid-area: icon; padding: 0 0.5rem 0 0; }
         & > td:nth-child(2) { grid-area: title; }
@@ -278,7 +278,7 @@
     }
     input[type=submit] {
         flex: 1 1 0;
-        margin-left: @text_padding;
+        margin-left: var(--text-padding);
     }
 }
 

diff --git a/less/main.less b/less/main.less
@@ -4,7 +4,7 @@
 @import "./include.less";
 
 :root {
-    // Column width whenever a narrow layout is desired.
+    /* Column width whenever a narrow layout is desired. */
     --layout-max-width: 50rem;
 
     --background-color: white;
@@ -26,6 +26,16 @@
 
     --font-wdth-mono: 100;
     --font-weight-mono: 400;
+
+    /* There is always this much padding between text and the edge of stuff. */
+    --text-padding: 0.25rem;
+
+    /* Buttons have thick borders, also used to indicate focus. */
+    --button-border-width: 2px;
+
+    --icon-size: 2.0rem;
+    --bar-line-height: 1.25rem;
+    --bar-height: calc(2 * var(--bar-line-height) + 2 * var(--text-padding) + 2 * var(--button-border-width));
 }
 
 @media screen and (prefers-color-scheme: dark) {
@@ -119,7 +129,7 @@ h1 {
     box-sizing: border-box;
     width: 100%;
     height: 2.5rem;
-    padding: 0 @text_padding;
+    padding: 0 var(--text-padding);
     font: normal 0.9rem / 2.1rem sans-serif;
 }
 
@@ -146,7 +156,7 @@ select[multiple] {
 
     color: var(--text-color);
     background: var(--background-color);
-    border: @button_border_width solid var(--border-color);
+    border: var(--button-border-width) solid var(--border-color);
     transition: border-color 0.05s;
 
     &:focus {
@@ -176,8 +186,8 @@ select[multiple] {
 
     color: var(--text-color);
     background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--gradient-mid) 28%, var(--gradient-end) 100%);
-    border: @button_border_width solid var(--gradient-border-color);
-    border-radius: (1.5 * @text_padding);
+    border: var(--button-border-width) solid var(--gradient-border-color);
+    border-radius: calc(1.5 * var(--text-padding));
     transition: border-color 0.05s;
 
     text-shadow: var(--gradient-border-color) 0 0 .025rem; /* bump contrast */
@@ -236,10 +246,10 @@ select[multiple] {
 .bar {
     display: flex;
     justify-content: space-between;
-    height: @bar_height;
+    height: var(--bar-height);
     max-width: var(--layout-max-width);
     margin: 0 auto;
-    line-height: @bar_line_height;
+    line-height: var(--bar-line-height);
     contain: size layout;
 
     & > a[href],
@@ -256,26 +266,26 @@ select[multiple] {
 
     & > * > .icon {
         display: block;
-        font-size: @icon_size;
+        font-size: var(--icon-size);
     }
 
     & > .square,
     & > .expand > .square {
-        flex: 0 0 @bar_height;
+        flex: 0 0 var(--bar-height);
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     & > .expand {
         flex: 1 1 0;
-        min-width: @bar_height; /* allow shrinking below content size */
+        min-width: var(--bar-height); /* allow shrinking below content size */
     }
 
     & > .header {
         justify-content: start;
         white-space: nowrap;
-        text-overflow: ellipsis; // TODO: get ellipsis working here.
+        text-overflow: ellipsis; /* TODO: get ellipsis working here. */
         overflow: hidden;
     }
 }