From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 21 Jun 2024 23:07:50 +0200
Subject: WIP: Refactoring

---
 src/scopes/_blockquotes.scss |  35 -------------
 src/scopes/_code.scss        |  68 --------------------------
 src/scopes/_links.scss       |  75 +++++++++++++++++++---------
 src/scopes/_lists.scss       |  67 -------------------------
 src/scopes/_tables.scss      | 114 -------------------------------------------
 5 files changed, 51 insertions(+), 308 deletions(-)
 delete mode 100644 src/scopes/_blockquotes.scss
 delete mode 100644 src/scopes/_code.scss
 delete mode 100644 src/scopes/_lists.scss
 delete mode 100644 src/scopes/_tables.scss

(limited to 'src/scopes')

diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
deleted file mode 100644
index 5383bd7..0000000
--- a/src/scopes/_blockquotes.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('blockquotes') {
-    @include iro.props-store((
-        --dims: (
-            --indent:     fn.global-dim(--list --indent),
-            --margin-top: fn.global-dim(--paragraph --margin-top),
-
-            --compact: (
-                --indent: fn.global-dim(--list --compact-indent),
-            ),
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj),
-        )
-    ), 'colors');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        blockquote {
-            margin:       fn.dim(--margin-top) 0 0 1px;
-            padding-left: calc(fn.dim(--indent) - 3px);
-            border-left:  3px solid fn.color(--border);
-        }
-
-        @include iro.bem-modifier('compact') {
-            blockquote {
-                padding-left: calc(fn.dim(--compact --indent) - 3px);
-            }
-        }
-    }
-}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
deleted file mode 100644
index 4eb9458..0000000
--- a/src/scopes/_code.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('code') {
-    @include iro.props-store((
-        --dims: (
-            --inline: (
-                --pad-x:    fn.global-dim(--size --50),
-                --pad-y:    fn.global-dim(--size --10),
-                --rounding: 3px,
-            ),
-            --block: (
-                --pad-x:      fn.global-dim(--size --150),
-                --pad-y:      fn.global-dim(--size --85),
-                --margin-top: fn.global-dim(--paragraph --margin-top),
-                --rounding:   3px,
-            )
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --inline: (
-                --fg: fn.global-color(--red --quiet --fg),
-                --bg: fn.global-color(--red --quiet --bg),
-            ),
-            --block: (
-                --fg: fn.global-color(--fg),
-                --bg: fn.global-color(--bg-hi2),
-            )
-        )
-    ), 'colors');
-
-    @include iro.props-store((
-        --colors: (
-            --block: (
-                --fg: fn.global-color(--fg-lo),
-                --bg: fn.global-color(--obj-hi),
-            )
-        )
-    ), 'palette-light-hi');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        code {
-            padding:          fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
-            border-radius:    fn.dim(--inline --rounding);
-            background-color: fn.color(--inline --bg);
-            color:            fn.color(--inline --fg);
-        }
-
-        pre {
-            margin:           fn.dim(--block --margin-top) 0 0 0;
-            padding:          fn.dim(--block --pad-y) fn.dim(--block --pad-x);
-            border-radius:    fn.dim(--block --rounding);
-            background-color: fn.color(--block --bg);
-            color:            fn.color(--block --fg);
-
-            code {
-                display:          inline-block;
-                margin-right:     fn.dim(--block --pad-x);
-                padding:          0;
-                border-radius:    0;
-                background-color: transparent;
-                color:            currentColor;
-            }
-        }
-    }
-}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 2e68952..115b199 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -3,42 +3,61 @@
 
 @include iro.props-namespace('links') {
     @include iro.props-store((
+        --dims: (
+            --underline:         fn.global-dim(--border --thin),
+
+            --hover: (
+                --underline:    fn.global-dim(--border --medium),
+            )
+        ),
         --colors: (
-            --underline:         fn.global-color(--fg-hi2),
+            --underline:         fn.global-color(--text-mute-more),
 
-            --idle:              fn.global-color(--accent --link-idle --quiet --fg),
-            --visited:           fn.global-color(--accent --link-visited --quiet --fg),
-            --idle-underline:    fn.global-color(--accent --link-idle --quiet --fg-hi),
-            --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi),
+            --idle: (
+                --text:          fn.global-color(--accent --1000),
+                --underline:     fn.global-color(--accent --700),
 
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo),
+                --hover: (
+                    --text:      fn.global-color(--accent --1200),
+                ),
             ),
-        )
-    ), 'colors');
 
-    @include iro.props-store((
-        --colors: (
-            --underline: fn.global-color(--fg-hi),
+            --visited: (
+                --text:          fn.global-color(--purple --1000),
+                --underline:     fn.global-color(--purple --700),
+
+                --hover: (
+                    --text:      fn.global-color(--purple --1200),
+                ),
+            ),
+
+            --focus: (
+                --bg:            fn.global-color(--yellow-static --400),
+                --text:          #000,
+            )
         )
-    ), 'colors-dark');
+    ));
 
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            border-radius:         .5px;
-            color:                 currentColor;
-            text-decoration:       underline;
-            text-decoration-color: fn.color(--underline);
+            border-radius:             .5px;
+            color:                     currentColor;
+            text-decoration:           underline;
+            text-decoration-color:     fn.color(--underline);
+            text-decoration-thickness: fn.dim(--underline);
 
             &:hover {
-                text-decoration: underline;
+                text-decoration:           underline;
+                text-decoration-thickness: fn.dim(--hover --underline);
             }
 
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
-                    box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    background-color:          fn.color(--focus --bg);
+                    color:                     fn.color(--focus --text);
+                    text-decoration:           none;
+                    border-block-end:          fn.dim(--hover --underline) solid currentColor;
                 }
             }
         }
@@ -52,13 +71,21 @@
 
         @include iro.bem-modifier('colored') {
             :link {
-                color:                 fn.color(--idle);
-                text-decoration-color: fn.color(--idle-underline);
+                color:                 fn.color(--idle --text);
+                text-decoration-color: fn.color(--idle --underline);
+
+                &:hover {
+                    color:             fn.color(--idle --hover --text);
+                }
             }
     
             :visited {
-                color:                 fn.color(--visited);
-                text-decoration-color: fn.color(--visited-underline);
+                color:                 fn.color(--visited --text);
+                text-decoration-color: fn.color(--visited --underline);
+
+                &:hover {
+                    color:             fn.color(--visited --hover --text);
+                }
             }
         }
     }
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
deleted file mode 100644
index 1322f2d..0000000
--- a/src/scopes/_lists.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('lists') {
-    @include iro.props-store((
-        --dims: (
-            --indent:     calc(fn.global-dim(--list --indent) + 1em),
-            --margin-top: fn.global-dim(--paragraph --margin-top),
-
-            --compact: (
-                --indent: fn.global-dim(--list --compact-indent),
-            ),
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--obj-hi),
-        )
-    ), 'colors');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        ul,
-        ol {
-            margin-top:   fn.dim(--margin-top);
-            padding-left: fn.dim(--indent);
-
-            ul,
-            ol {
-                margin-top: 0;
-            }
-        }
-
-        ul {
-            list-style: disc;
-        }
-
-        ol {
-            list-style: decimal;
-        }
-
-        dl {
-            margin:  fn.dim(--margin-top) 0 0;
-            padding: 0;
-        }
-
-        dt {
-            color:       fn.global-color(--fg-lo);
-            font-weight: bold;
-        }
-
-        dd {
-            margin: 0 0 0 fn.dim(--indent);
-        }
-
-        @include iro.bem-modifier('compact') {
-            ul,
-            ol {
-                padding-left: calc(fn.dim(--compact --indent) - 3px);
-            }
-
-            dd {
-                margin-left: calc(fn.dim(--compact --indent) - 3px);
-            }
-        }
-    }
-}
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
deleted file mode 100644
index f78e81b..0000000
--- a/src/scopes/_tables.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-
-@include iro.props-namespace('tables') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:      fn.global-dim(--size --175),
-            --pad-y:      fn.global-dim(--size --125),
-            --rounding:   3px,
-            --margin-top: fn.global-dim(--paragraph --margin-top),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border:  fn.global-color(--obj),
-            --heading: fn.global-color(--fg-hi),
-            --box: (
-                --bg: fn.global-color(--bg-hi2),
-            )
-        )
-    ), 'colors');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        table {
-            margin-top:      fn.dim(--margin-top);
-            border-spacing:  0;
-            border-collapse: separate;
-        }
-
-        th {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      500,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-
-            padding:    fn.dim(--pad-y) fn.dim(--pad-x);
-            color:      fn.color(--heading);
-            text-align: left;
-        }
-
-        td {
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            border-width:     1px 0 0;
-            border-style:     solid;
-            border-color:     fn.color(--border);
-        }
-
-        tr {
-            &:last-child {
-                td {
-                    border-bottom-width: 1px;
-                }
-            }
-        }
-
-        @include iro.bem-modifier('flush') {
-            th,
-            td {
-                &:first-child {
-                    padding-left: 0;
-                }
-
-                &:last-child {
-                    padding-right: 0;
-                }
-            }
-        }
-
-        @include iro.bem-modifier('box') {
-            td {
-                background-color: fn.color(--box --bg);
-            
-                &:first-child {
-                    border-left-width: 1px;
-                }
-            
-                &:last-child {
-                    border-right-width: 1px;
-                }
-            }
-    
-            tr {
-                &:first-child {
-                    td {
-                        &:first-child {
-                            border-top-left-radius: fn.dim(--rounding);
-                        }
-            
-                        &:last-child {
-                            border-top-right-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-    
-                &:last-child {
-                    td {
-                        &:first-child {
-                            border-bottom-left-radius: fn.dim(--rounding);
-                        }
-            
-                        &:last-child {
-                            border-bottom-right-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-- 
cgit v1.2.3-54-g00ecf