Added tables scope, fixed anchor styling

6 files changed, 91 insertions, 14 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 2fe7dca..3fe8389 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -92,7 +92,9 @@
             --thin:   1px,
         ),
 
-        --focus-outline-width: 3px,
+        --focus: (
+            --outline-width: 3px,
+        ),
 
         --paragraph: (
             --margin-top: fn.dim(--size --300, null),
@@ -183,7 +185,7 @@
         ),
 
         --focus: (
-            --shadow:    0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
+            --shadow:    0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --semi, null),
             --fill:      fn.color(--accent --primary --bg, null),
             --text:      fn.color(--accent --primary --obj, null),
             --fill-text: fn.color(--accent --primary --fg, null),
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 9a9d8ca..abfb6a0 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -4,3 +4,4 @@
 @use 'scopes/blockquotes';
 @use 'scopes/lists';
 @use 'scopes/headings';
+@use 'scopes/tables';
diff --git a/src/scopes/_colored-links.scss b/src/scopes/_colored-links.scss
index cdd3ed4..0c58bf1 100644
--- a/src/scopes/_colored-links.scss
+++ b/src/scopes/_colored-links.scss
@@ -8,7 +8,7 @@
             --visited: fn.global-color(--accent --link-visited --obj-lo),
             --key-focus: (
                 --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
+                --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi),
             ),
         )
     ), 'colors');
@@ -26,14 +26,11 @@
 
         :link,
         :visited {
-            margin:        -2px;
-            border:        2px solid transparent;
-            border-radius: 2px;
+            border-radius: .5px;
 
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
-                    border-color: fn.color(--key-focus --border);
-                    box-shadow:   fn.color(--key-focus --shadow);
+                    box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
                 }
             }
         }
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss
index 0326bd2..e4493d4 100644
--- a/src/scopes/_invisible-links.scss
+++ b/src/scopes/_invisible-links.scss
@@ -6,7 +6,7 @@
         --colors: (
             --key-focus: (
                 --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
+                --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi),
             ),
         )
     ), 'colors');
@@ -14,9 +14,7 @@
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            margin:          -2px;
-            border:          2px solid transparent;
-            border-radius:   2px;
+            border-radius:   .5px;
             color:           currentColor;
             text-decoration: none;
 
@@ -26,8 +24,7 @@
 
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
-                    border-color: fn.color(--key-focus --border);
-                    box-shadow:   fn.color(--key-focus --shadow);
+                    box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
                 }
             }
         }
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
new file mode 100644
index 0000000..e8135eb
--- /dev/null
+++ b/src/scopes/_tables.scss
@@ -0,0 +1,55 @@
+@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),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --border:  fn.global-color(--obj),
+            --heading: fn.global-color(--fg-hi),
+        )
+    ), 'colors');
+
+    @include iro.bem-scope(iro.props-namespace()) {
+        table {
+            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;
+                }
+            }
+        }
+    }
+}
diff --git a/tpl/views/table.pug b/tpl/views/table.pug
index a5f62a7..f74a4cd 100644
--- a/tpl/views/table.pug
+++ b/tpl/views/table.pug
@@ -99,3 +99,28 @@ mixin view-table
                         +table-cell= 'Row 4,1'
                         +table-cell= 'Row 4,2'
                         +table-cell= 'Row 4,3'
+
+        .c-box.s-tables
+            table
+                thead
+                    tr
+                        th= 'Title'
+                        th= 'Title'
+                        th= 'Title'
+                tbody
+                    tr
+                        td= 'Row 1,1'
+                        td= 'Row 1,2'
+                        td= 'Row 1,3'
+                    tr
+                        td= 'Row 2,1'
+                        td= 'Row 2,2'
+                        td= 'Row 2,3'
+                    tr
+                        td= 'Row 3,1'
+                        td= 'Row 3,2'
+                        td= 'Row 3,3'
+                    tr
+                        td= 'Row 4,1'
+                        td= 'Row 4,2'
+                        td= 'Row 4,3'