From 8f1af11e95d4d349fdcd77d750d1a64a3734321c Mon Sep 17 00:00:00 2001 From: yasyuk Date: Mon, 4 May 2026 10:38:53 +0100 Subject: [PATCH 1/2] feat: introduce --color-icons palette and apply to icon color classes Adds a dedicated --color-icons-* CSS variable set (yellow, orange, red, pink, purple, blue, ice, teal, lime, grey) with unified values for both light and dark modes. Updates iconColor-* SCSS classes, iconObject isTask/isDone, and theme.ts icon bg/color sections to reference the new palette. Co-Authored-By: Claude Sonnet 4.6 --- src/json/theme.ts | 60 +++++++++++++++--------------- src/scss/_vars.scss | 13 +++++++ src/scss/component/icon.scss | 20 +++++----- src/scss/component/iconObject.scss | 2 +- src/scss/component/tag.scss | 15 ++++++-- 5 files changed, 66 insertions(+), 44 deletions(-) diff --git a/src/json/theme.ts b/src/json/theme.ts index 0e1eeab6d2..1312b60378 100644 --- a/src/json/theme.ts +++ b/src/json/theme.ts @@ -13,16 +13,16 @@ export default { lime: '#c5efa3', }, bg: { - grey: '#9b9b9b', - yellow: '#e9d619', - orange: '#fe9a00', - red: '#fb592c', - pink: '#f6339a', - purple: '#ad46ff', - blue: '#3e58eb', - ice: '#2aa7ee', - teal: '#00bba7', - lime: '#5dd400', + grey: '#9B9B9B', + yellow: '#DCC000', + orange: '#F08A00', + red: '#F04520', + pink: '#F030A0', + purple: '#A840F0', + blue: '#4A60F0', + ice: '#2AA7EE', + teal: '#00BBA7', + lime: '#5EC400', }, list: [ 'grey', 'yellow', 'orange', 'red', 'pink', 'purple', 'blue', 'ice', 'teal', 'lime' ], @@ -38,16 +38,16 @@ export default { color: { default: '#252525', - grey: '#b6b6b6', - yellow: '#e9d619', - orange: '#fe9a00', - red: '#fb592c', - pink: '#f6339a', - purple: '#ad46ff', - blue: '#3e58eb', - ice: '#2aa7ee', - teal: '#00bba7', - lime: '#5dd400', + grey: '#9B9B9B', + yellow: '#DCC000', + orange: '#F08A00', + red: '#F04520', + pink: '#F030A0', + purple: '#A840F0', + blue: '#4A60F0', + ice: '#2AA7EE', + teal: '#00BBA7', + lime: '#5EC400', }, textColor: { @@ -137,16 +137,16 @@ export default { color: { default: '#e1e1e1', - grey: '#737373', - yellow: '#e9d619', - orange: '#fe9a00', - red: '#fb592c', - pink: '#f6339a', - purple: '#ad46ff', - blue: '#3e58eb', - ice: '#2aa7ee', - teal: '#00bba7', - lime: '#5dd400', + grey: '#9B9B9B', + yellow: '#DCC000', + orange: '#F08A00', + red: '#F04520', + pink: '#F030A0', + purple: '#A840F0', + blue: '#4A60F0', + ice: '#2AA7EE', + teal: '#00BBA7', + lime: '#5EC400', }, textColor: { diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index 679432ea46..a88c9b574d 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -128,6 +128,19 @@ --color-tag-teal: #0caaa3; --color-tag-lime: #64b90f; + /* Icons */ + + --color-icons-yellow: #DCC000; + --color-icons-orange: #F08A00; + --color-icons-red: #F04520; + --color-icons-pink: #F030A0; + --color-icons-purple: #A840F0; + --color-icons-blue: #4A60F0; + --color-icons-ice: #2AA7EE; + --color-icons-teal: #00BBA7; + --color-icons-lime: #5EC400; + --color-icons-grey: #9B9B9B; + /* Font */ --font-size-9: 9px; diff --git a/src/scss/component/icon.scss b/src/scss/component/icon.scss index 7f99d5eecc..cd30d67410 100644 --- a/src/scss/component/icon.scss +++ b/src/scss/component/icon.scss @@ -17,16 +17,16 @@ }; .icon.iconColor-default { color: var(--color-control-accent); } -.icon.iconColor-grey { color: var(--color-grey); } -.icon.iconColor-yellow { color: var(--color-yellow); } -.icon.iconColor-orange { color: var(--color-orange); } -.icon.iconColor-red { color: var(--color-red); } -.icon.iconColor-pink { color: var(--color-pink); } -.icon.iconColor-purple { color: var(--color-purple); } -.icon.iconColor-blue { color: var(--color-blue); } -.icon.iconColor-ice { color: var(--color-ice); } -.icon.iconColor-teal { color: var(--color-teal); } -.icon.iconColor-lime { color: var(--color-lime); } +.icon.iconColor-grey { color: var(--color-icons-grey); } +.icon.iconColor-yellow { color: var(--color-icons-yellow); } +.icon.iconColor-orange { color: var(--color-icons-orange); } +.icon.iconColor-red { color: var(--color-icons-red); } +.icon.iconColor-pink { color: var(--color-icons-pink); } +.icon.iconColor-purple { color: var(--color-icons-purple); } +.icon.iconColor-blue { color: var(--color-icons-blue); } +.icon.iconColor-ice { color: var(--color-icons-ice); } +.icon.iconColor-teal { color: var(--color-icons-teal); } +.icon.iconColor-lime { color: var(--color-icons-lime); } .icon.iconColor-darkGrey { color: var(--color-dark-grey); } .icon.iconColor-darkOrange { color: var(--color-dark-orange); } .icon.iconColor-darkRed { color: var(--color-dark-red); } diff --git a/src/scss/component/iconObject.scss b/src/scss/component/iconObject.scss index aa58579daf..110d0d6609 100644 --- a/src/scss/component/iconObject.scss +++ b/src/scss/component/iconObject.scss @@ -55,7 +55,7 @@ .icon.hasSvg { color: var(--color-text-tertiary); } &.isDone { - .icon.hasSvg { color: var(--color-lime); } + .icon.hasSvg { color: var(--color-icons-lime); } } } diff --git a/src/scss/component/tag.scss b/src/scss/component/tag.scss index f3a9cda4e2..59a9c49b90 100644 --- a/src/scss/component/tag.scss +++ b/src/scss/component/tag.scss @@ -30,10 +30,19 @@ &.canEdit { padding-right: 20px; } } - &.isSelect { - border: 1px solid var(--color-shape-secondary); background: var(--color-bg-primary) !important; - } + &.isSelect { border: 1px solid var(--color-shape-secondary); background: var(--color-bg-primary) !important; } &.isSelect { .tagRemove { display: none; } + + &.textColor-grey .inner { color: var(--color-grey); } + &.textColor-yellow .inner { color: var(--color-yellow); } + &.textColor-orange .inner { color: var(--color-orange); } + &.textColor-red .inner { color: var(--color-red); } + &.textColor-pink .inner { color: var(--color-pink); } + &.textColor-purple .inner { color: var(--color-purple); } + &.textColor-blue .inner { color: var(--color-blue); } + &.textColor-ice .inner { color: var(--color-ice); } + &.textColor-teal .inner { color: var(--color-teal); } + &.textColor-lime .inner { color: var(--color-lime); } } } \ No newline at end of file From 54cb85acd26b76ffe7c66c66a093c75eb1a5ecf8 Mon Sep 17 00:00:00 2001 From: yasyuk Date: Tue, 5 May 2026 13:53:01 +0100 Subject: [PATCH 2/2] style: lowercase all hex color values in theme.ts and _vars.scss Co-Authored-By: Claude Sonnet 4.6 --- src/json/theme.ts | 64 ++++++++++++++++++++++----------------------- src/scss/_vars.scss | 20 +++++++------- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/json/theme.ts b/src/json/theme.ts index 1312b60378..d9da3ef385 100644 --- a/src/json/theme.ts +++ b/src/json/theme.ts @@ -13,16 +13,16 @@ export default { lime: '#c5efa3', }, bg: { - grey: '#9B9B9B', - yellow: '#DCC000', - orange: '#F08A00', - red: '#F04520', - pink: '#F030A0', - purple: '#A840F0', - blue: '#4A60F0', - ice: '#2AA7EE', - teal: '#00BBA7', - lime: '#5EC400', + grey: '#9b9b9b', + yellow: '#dcc000', + orange: '#f08a00', + red: '#f04520', + pink: '#f030a0', + purple: '#a840f0', + blue: '#4a60f0', + ice: '#2aa7ee', + teal: '#00bba7', + lime: '#5ec400', }, list: [ 'grey', 'yellow', 'orange', 'red', 'pink', 'purple', 'blue', 'ice', 'teal', 'lime' ], @@ -38,16 +38,16 @@ export default { color: { default: '#252525', - grey: '#9B9B9B', - yellow: '#DCC000', - orange: '#F08A00', - red: '#F04520', - pink: '#F030A0', - purple: '#A840F0', - blue: '#4A60F0', - ice: '#2AA7EE', - teal: '#00BBA7', - lime: '#5EC400', + grey: '#9b9b9b', + yellow: '#dcc000', + orange: '#f08a00', + red: '#f04520', + pink: '#f030a0', + purple: '#a840f0', + blue: '#4a60f0', + ice: '#2aa7ee', + teal: '#00bba7', + lime: '#5ec400', }, textColor: { @@ -137,16 +137,16 @@ export default { color: { default: '#e1e1e1', - grey: '#9B9B9B', - yellow: '#DCC000', - orange: '#F08A00', - red: '#F04520', - pink: '#F030A0', - purple: '#A840F0', - blue: '#4A60F0', - ice: '#2AA7EE', - teal: '#00BBA7', - lime: '#5EC400', + grey: '#9b9b9b', + yellow: '#dcc000', + orange: '#f08a00', + red: '#f04520', + pink: '#f030a0', + purple: '#a840f0', + blue: '#4a60f0', + ice: '#2aa7ee', + teal: '#00bba7', + lime: '#5ec400', }, textColor: { @@ -181,7 +181,7 @@ export default { primaryColor: '#bb2528', primaryTextColor: '#fff', primaryBorderColor: '#7c0000', - lineColor: '#F8b229', + lineColor: '#f8b229', secondaryColor: '#006100', tertiaryColor: '#fff' }, @@ -227,7 +227,7 @@ export default { strokeHover: 'rgba(160, 160, 160, 0.7)', // Brighter hover }, canvas: { - background: '#1F1F1F', + background: '#1f1f1f', grid: '#333333', nodeCenter: 'rgba(40, 40, 40, 0.95)', // Darker center for contrast nodeGlow: 'rgba(80, 100, 140, 0.1)', // Very weak general glow diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index a88c9b574d..d1bb2c1716 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -130,16 +130,16 @@ /* Icons */ - --color-icons-yellow: #DCC000; - --color-icons-orange: #F08A00; - --color-icons-red: #F04520; - --color-icons-pink: #F030A0; - --color-icons-purple: #A840F0; - --color-icons-blue: #4A60F0; - --color-icons-ice: #2AA7EE; - --color-icons-teal: #00BBA7; - --color-icons-lime: #5EC400; - --color-icons-grey: #9B9B9B; + --color-icons-yellow: #dcc000; + --color-icons-orange: #f08a00; + --color-icons-red: #f04520; + --color-icons-pink: #f030a0; + --color-icons-purple: #a840f0; + --color-icons-blue: #4a60f0; + --color-icons-ice: #2aa7ee; + --color-icons-teal: #00bba7; + --color-icons-lime: #5ec400; + --color-icons-grey: #9b9b9b; /* Font */