diff options
Diffstat (limited to 'src/scopes')
| -rw-r--r-- | src/scopes/_blockquotes.scss | 34 | ||||
| -rw-r--r-- | src/scopes/_code.scss | 2 | ||||
| -rw-r--r-- | src/scopes/_links.scss | 27 | ||||
| -rw-r--r-- | src/scopes/_lists.scss | 66 |
4 files changed, 115 insertions, 14 deletions
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss new file mode 100644 index 0000000..f6a13fe --- /dev/null +++ b/src/scopes/_blockquotes.scss | |||
| @@ -0,0 +1,34 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('blockquotes') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --indent: fn.global-dim(--list --indent), | ||
| 8 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
| 9 | --border: fn.global-dim(--border --thick), | ||
| 10 | |||
| 11 | --compact: ( | ||
| 12 | --indent: fn.global-dim(--list --compact-indent), | ||
| 13 | ), | ||
| 14 | ), | ||
| 15 | --colors: ( | ||
| 16 | --border: fn.global-color(--border), | ||
| 17 | ) | ||
| 18 | )); | ||
| 19 | |||
| 20 | @include iro.bem-scope(iro.props-namespace()) { | ||
| 21 | blockquote { | ||
| 22 | margin-block: fn.dim(--margin-bs); | ||
| 23 | margin-inline: 1px 0; | ||
| 24 | padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border)); | ||
| 25 | border-inline-start: fn.dim(--border) solid fn.color(--border); | ||
| 26 | } | ||
| 27 | |||
| 28 | @include iro.bem-modifier('compact') { | ||
| 29 | blockquote { | ||
| 30 | padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border)); | ||
| 31 | } | ||
| 32 | } | ||
| 33 | } | ||
| 34 | } | ||
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index a6905a3..0ff3a2c 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss | |||
| @@ -23,7 +23,7 @@ | |||
| 23 | ), | 23 | ), |
| 24 | --block: ( | 24 | --block: ( |
| 25 | --fg: fn.global-color(--text), | 25 | --fg: fn.global-color(--text), |
| 26 | --bg: fn.global-color(--bg-l2), | 26 | --bg: fn.global-color(--base --50), |
| 27 | ) | 27 | ) |
| 28 | ) | 28 | ) |
| 29 | )); | 29 | )); |
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index d0c47ef..a9de8b5 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
| @@ -4,10 +4,11 @@ | |||
| 4 | @include iro.props-namespace('links') { | 4 | @include iro.props-namespace('links') { |
| 5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 6 | --dims: ( | 6 | --dims: ( |
| 7 | --rounding: fn.global-dim(--rounding), | ||
| 7 | --underline: fn.global-dim(--border --thin), | 8 | --underline: fn.global-dim(--border --thin), |
| 8 | 9 | ||
| 9 | --hover: ( | 10 | --hover: ( |
| 10 | --underline: fn.global-dim(--border --medium), | 11 | --underline: fn.global-dim(--border --medium), |
| 11 | ) | 12 | ) |
| 12 | ), | 13 | ), |
| 13 | --colors: ( | 14 | --colors: ( |
| @@ -15,7 +16,7 @@ | |||
| 15 | 16 | ||
| 16 | --idle: ( | 17 | --idle: ( |
| 17 | --text: fn.global-color(--accent --1000), | 18 | --text: fn.global-color(--accent --1000), |
| 18 | --underline: fn.global-color(--accent --1000), | 19 | --underline: fn.global-color(--accent --600), |
| 19 | 20 | ||
| 20 | --hover: ( | 21 | --hover: ( |
| 21 | --text: fn.global-color(--accent --1200), | 22 | --text: fn.global-color(--accent --1200), |
| @@ -24,16 +25,16 @@ | |||
| 24 | 25 | ||
| 25 | --visited: ( | 26 | --visited: ( |
| 26 | --text: fn.global-color(--purple --1000), | 27 | --text: fn.global-color(--purple --1000), |
| 27 | --underline: fn.global-color(--purple --1000), | 28 | --underline: fn.global-color(--purple --600), |
| 28 | 29 | ||
| 29 | --hover: ( | 30 | --hover: ( |
| 30 | --text: fn.global-color(--purple --1200), | 31 | --text: fn.global-color(--purple --1200), |
| 31 | ), | 32 | ), |
| 32 | ), | 33 | ), |
| 33 | 34 | ||
| 34 | --focus: ( | 35 | --key-focus: ( |
| 35 | --bg: fn.global-color(--yellow-static --400), | 36 | --bg: fn.global-color(--yellow-static --400), |
| 36 | --text: #000, | 37 | --text: fn.global-color(--yellow-static --400-text), |
| 37 | ) | 38 | ) |
| 38 | ) | 39 | ) |
| 39 | )); | 40 | )); |
| @@ -41,7 +42,7 @@ | |||
| 41 | @include iro.bem-scope(iro.props-namespace()) { | 42 | @include iro.bem-scope(iro.props-namespace()) { |
| 42 | :link, | 43 | :link, |
| 43 | :visited { | 44 | :visited { |
| 44 | border-radius: .5px; | 45 | border-radius: fn.dim(--rounding); |
| 45 | color: currentColor; | 46 | color: currentColor; |
| 46 | text-decoration: underline; | 47 | text-decoration: underline; |
| 47 | text-decoration-color: fn.color(--underline); | 48 | text-decoration-color: fn.color(--underline); |
| @@ -53,13 +54,13 @@ | |||
| 53 | text-decoration-skip-ink: none; | 54 | text-decoration-skip-ink: none; |
| 54 | } | 55 | } |
| 55 | 56 | ||
| 56 | @include iro.bem-at-theme('keyboard') { | 57 | &:focus-visible { |
| 57 | &:focus { | 58 | background-color: fn.color(--key-focus --bg); |
| 58 | background-color: fn.color(--focus --bg); | 59 | box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg); |
| 59 | color: fn.color(--focus --text); | 60 | color: fn.color(--key-focus --text); |
| 60 | text-decoration: none; | 61 | text-decoration: underline; |
| 61 | border-block-end: fn.dim(--hover --underline) solid currentColor; | 62 | text-decoration-thickness: fn.dim(--hover --underline); |
| 62 | } | 63 | text-decoration-skip-ink: none; |
| 63 | } | 64 | } |
| 64 | } | 65 | } |
| 65 | 66 | ||
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss new file mode 100644 index 0000000..bad9731 --- /dev/null +++ b/src/scopes/_lists.scss | |||
| @@ -0,0 +1,66 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('lists') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --indent: calc(fn.global-dim(--list --indent) + 1em), | ||
| 8 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
| 9 | |||
| 10 | --compact: ( | ||
| 11 | --indent: fn.global-dim(--list --compact-indent), | ||
| 12 | ), | ||
| 13 | ), | ||
| 14 | --colors: ( | ||
| 15 | --border: fn.global-color(--border-mute), | ||
| 16 | ) | ||
| 17 | )); | ||
| 18 | |||
| 19 | @include iro.bem-scope(iro.props-namespace()) { | ||
| 20 | ul, | ||
| 21 | ol { | ||
| 22 | margin-block-start: fn.dim(--margin-bs); | ||
| 23 | padding-inline-start: fn.dim(--indent); | ||
| 24 | |||
| 25 | ul, | ||
| 26 | ol { | ||
| 27 | margin-block-start: 0; | ||
| 28 | } | ||
| 29 | } | ||
| 30 | |||
| 31 | ul { | ||
| 32 | list-style: disc; | ||
| 33 | } | ||
| 34 | |||
| 35 | ol { | ||
| 36 | list-style: decimal; | ||
| 37 | } | ||
| 38 | |||
| 39 | dl { | ||
| 40 | margin-block: fn.dim(--margin-bs) 0; | ||
| 41 | margin-inline: 0; | ||
| 42 | padding: 0; | ||
| 43 | } | ||
| 44 | |||
| 45 | dt { | ||
| 46 | color: fn.global-color(--heading); | ||
| 47 | font-weight: bold; | ||
| 48 | } | ||
| 49 | |||
| 50 | dd { | ||
| 51 | margin-block: 0; | ||
| 52 | margin-inline: fn.dim(--indent) 0; | ||
| 53 | } | ||
| 54 | |||
| 55 | @include iro.bem-modifier('compact') { | ||
| 56 | ul, | ||
| 57 | ol { | ||
| 58 | padding-inline-start: calc(fn.dim(--compact --indent) - 3px); | ||
| 59 | } | ||
| 60 | |||
| 61 | dd { | ||
| 62 | margin-inline-start: calc(fn.dim(--compact --indent) - 3px); | ||
| 63 | } | ||
| 64 | } | ||
| 65 | } | ||
| 66 | } | ||
