From 31f788ea25919d619683d9d494bc10ea7ac87ca7 Mon Sep 17 00:00:00 2001 From: ngorin Date: Mon, 14 Oct 2024 15:30:29 +0300 Subject: [PATCH 1/2] feat: upd colors in note --- src/scss/_note.scss | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/scss/_note.scss b/src/scss/_note.scss index 6931db09..3d7fcb80 100644 --- a/src/scss/_note.scss +++ b/src/scss/_note.scss @@ -29,22 +29,16 @@ } } - // @todo replace with variables - $colors: ( - yfm-accent-info: #027bf3, - yfm-accent-tip: #56bd67, - yfm-accent-warning: #f19518, - yfm-accent-alert: #ff4645, + yfm-accent-info: var(--yfm-color-accent), + yfm-accent-tip: var(--yfm-color-note-tip), + yfm-accent-alert: var(--yfm-color-note-important), + yfm-accent-warning: var(--yfm-color-note-warning), ); @each $type, $color in $colors { - &.#{$type} > :first-child::before { - $r: red($color); - $g: green($color); - $b: blue($color); - $rgbColor: 'rgb(' + $r + ',' + $g + ',' + $b + ')'; - content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $rgbColor + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E'); + &.#{$type} > p:first-child::before { + content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $color + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E'); } } From 289e50682acccb82da41b22479d5122a759a0ca3 Mon Sep 17 00:00:00 2001 From: ngorin Date: Thu, 13 Feb 2025 11:25:41 +0300 Subject: [PATCH 2/2] feat: use note fill color from variables --- src/scss/_note.scss | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/scss/_note.scss b/src/scss/_note.scss index 3d7fcb80..06636a30 100644 --- a/src/scss/_note.scss +++ b/src/scss/_note.scss @@ -29,16 +29,22 @@ } } - $colors: ( - yfm-accent-info: var(--yfm-color-accent), - yfm-accent-tip: var(--yfm-color-note-tip), - yfm-accent-alert: var(--yfm-color-note-important), - yfm-accent-warning: var(--yfm-color-note-warning), + @function svg-factory($fill-color) { + @return 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + + $fill-color + + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E'; + } + + $noteIcons: ( + yfm-accent-info: svg-factory(var(--yfm-color-accent)), + yfm-accent-tip: svg-factory(var(--yfm-color-note-tip)), + yfm-accent-alert: svg-factory(var(--yfm-color-note-important)), + yfm-accent-warning: svg-factory(var(--yfm-color-note-warning)), ); - @each $type, $color in $colors { + @each $type, $noteIcon in $noteIcons { &.#{$type} > p:first-child::before { - content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="' + $color + '"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E'); + content: url($noteIcon); } }