From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon 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-70-g09d2