From c3c726ffca44a113db1438fdb9db3c2b6513cee8 Mon Sep 17 00:00:00 2001 From: Timo Zehnle Date: Thu, 16 Dec 2021 14:13:51 +0100 Subject: [PATCH 1/4] feat(comp): new colors for radio, checkbox, slider --- grumpy-geckos-mate.md | 6 ++++++ themes/theme-b2b/src/index.ts | 16 ++++++++-------- themes/theme-unicorn/src/index.ts | 20 ++++++++++---------- 3 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 grumpy-geckos-mate.md diff --git a/grumpy-geckos-mate.md b/grumpy-geckos-mate.md new file mode 100644 index 0000000000..3f95136382 --- /dev/null +++ b/grumpy-geckos-mate.md @@ -0,0 +1,6 @@ +--- +"@marigold/theme-core": patch +"@marigold/theme-unicorn": patch +--- + +feat(comp): new colors for radio, checkbox, slider diff --git a/themes/theme-b2b/src/index.ts b/themes/theme-b2b/src/index.ts index 72d935c13e..b91993503e 100644 --- a/themes/theme-b2b/src/index.ts +++ b/themes/theme-b2b/src/index.ts @@ -343,8 +343,8 @@ const theme: BaseTheme = { }, }, checked: { - fill: colors.blue60, - stroke: colors.blue70, + fill: colors.orange60, + stroke: colors.orange80, disabled: { fill: colors.gray30, stroke: colors.gray30, @@ -376,8 +376,8 @@ const theme: BaseTheme = { }, }, checked: { - fill: colors.blue60, - stroke: colors.blue70, + fill: colors.orange60, + stroke: colors.orange80, disabled: { fill: colors.gray30, stroke: colors.gray30, @@ -716,7 +716,7 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-thumb': { ...sliderThumb, - border: '4px solid ' + colors.blue60, + border: '4px solid ' + colors.orange60, }, '&:disabled::-webkit-slider-thumb': { ...sliderThumb, @@ -728,7 +728,7 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-runnable-track': { ...sliderTrack, - background: colors.blue60, + background: colors.orange60, }, '&:disabled::-webkit-slider-runnable-track': { ...sliderTrack, @@ -743,7 +743,7 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-thumb': { ...sliderThumb, - border: '4px solid ' + colors.blue60, + border: '4px solid ' + colors.orange60, }, '&:disabled::-moz-range-thumb': { ...sliderThumb, @@ -759,7 +759,7 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-progress': { ...sliderTrack, - background: colors.blue60, + background: colors.orange60, }, '&:disabled::-moz-range-progress': { ...sliderTrack, diff --git a/themes/theme-unicorn/src/index.ts b/themes/theme-unicorn/src/index.ts index b139bba7a3..d6c59ef5d6 100644 --- a/themes/theme-unicorn/src/index.ts +++ b/themes/theme-unicorn/src/index.ts @@ -231,10 +231,10 @@ const theme: BaseTheme = { }, colors: { ...colors, - text: '#070708', - background: '#fdfcfd', - primary: '#c9b1ff', - secondary: '#ffcaf2', + text: colors.gray90, + background: colors.gray00, + primary: '#673ab7', + secondary: '#9575cd', disabled: '#e9e7eb', error: '#ffb2b1', warning: '#fff3ad', @@ -344,7 +344,7 @@ const theme: BaseTheme = { }, checked: { fill: 'primary', - stroke: 'primary', + stroke: '#311b92', disabled: { fill: colors.gray30, stroke: colors.gray30, @@ -377,7 +377,7 @@ const theme: BaseTheme = { }, checked: { fill: 'primary', - stroke: 'primary', + stroke: '#311b92', disabled: { fill: colors.gray30, stroke: colors.gray30, @@ -734,7 +734,7 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-thumb': { ...sliderThumb, - border: '4px solid ' + colors.blue60, + border: '4px solid #673ab7', }, '&:disabled::-webkit-slider-thumb': { ...sliderThumb, @@ -746,7 +746,7 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-runnable-track': { ...sliderTrack, - background: colors.blue60, + background: '#673ab7', }, '&:disabled::-webkit-slider-runnable-track': { ...sliderTrack, @@ -761,7 +761,7 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-thumb': { ...sliderThumb, - border: '4px solid ' + colors.blue60, + border: '4px solid #673ab7', }, '&:disabled::-moz-range-thumb': { ...sliderThumb, @@ -777,7 +777,7 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-progress': { ...sliderTrack, - background: colors.blue60, + background: '#673ab7', }, '&:disabled::-moz-range-progress': { ...sliderTrack, From ce0c38efd2b0f0fcc23195e3eb7b2cf77c3151d9 Mon Sep 17 00:00:00 2001 From: Timo Zehnle Date: Fri, 17 Dec 2021 10:02:45 +0100 Subject: [PATCH 2/4] use 'orange60' where its possible --- themes/theme-b2b/src/index.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/themes/theme-b2b/src/index.ts b/themes/theme-b2b/src/index.ts index b91993503e..a22d375d00 100644 --- a/themes/theme-b2b/src/index.ts +++ b/themes/theme-b2b/src/index.ts @@ -343,8 +343,8 @@ const theme: BaseTheme = { }, }, checked: { - fill: colors.orange60, - stroke: colors.orange80, + fill: 'orange60', + stroke: 'orange80', disabled: { fill: colors.gray30, stroke: colors.gray30, @@ -376,8 +376,8 @@ const theme: BaseTheme = { }, }, checked: { - fill: colors.orange60, - stroke: colors.orange80, + fill: 'orange60', + stroke: 'orange80', disabled: { fill: colors.gray30, stroke: colors.gray30, From 61a94f5bac2e681d3cf17e771a1dd82b8eb25e3e Mon Sep 17 00:00:00 2001 From: Timo Zehnle Date: Fri, 17 Dec 2021 13:08:20 +0100 Subject: [PATCH 3/4] use colors from theme --- themes/theme-b2b/src/index.ts | 10 ++++++---- themes/theme-unicorn/src/index.ts | 10 ++++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/themes/theme-b2b/src/index.ts b/themes/theme-b2b/src/index.ts index a22d375d00..0fc028af8b 100644 --- a/themes/theme-b2b/src/index.ts +++ b/themes/theme-b2b/src/index.ts @@ -716,7 +716,8 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-thumb': { ...sliderThumb, - border: '4px solid ' + colors.orange60, + border: '4px solid', + borderColor: 'orange60', }, '&:disabled::-webkit-slider-thumb': { ...sliderThumb, @@ -728,7 +729,7 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-runnable-track': { ...sliderTrack, - background: colors.orange60, + backgroundColor: 'orange60', }, '&:disabled::-webkit-slider-runnable-track': { ...sliderTrack, @@ -743,7 +744,8 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-thumb': { ...sliderThumb, - border: '4px solid ' + colors.orange60, + border: '4px solid', + borderColor: 'orange60', }, '&:disabled::-moz-range-thumb': { ...sliderThumb, @@ -759,7 +761,7 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-progress': { ...sliderTrack, - background: colors.orange60, + backgroundColor: 'orange60', }, '&:disabled::-moz-range-progress': { ...sliderTrack, diff --git a/themes/theme-unicorn/src/index.ts b/themes/theme-unicorn/src/index.ts index d6c59ef5d6..263ca14b95 100644 --- a/themes/theme-unicorn/src/index.ts +++ b/themes/theme-unicorn/src/index.ts @@ -734,7 +734,8 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-thumb': { ...sliderThumb, - border: '4px solid #673ab7', + border: '4px solid', + borderColor: 'primary', }, '&:disabled::-webkit-slider-thumb': { ...sliderThumb, @@ -746,7 +747,7 @@ const theme: BaseTheme = { }, '&:focus::-webkit-slider-runnable-track': { ...sliderTrack, - background: '#673ab7', + backgroundColor: 'primary', }, '&:disabled::-webkit-slider-runnable-track': { ...sliderTrack, @@ -761,7 +762,8 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-thumb': { ...sliderThumb, - border: '4px solid #673ab7', + border: '4px solid', + borderColor: 'primary', }, '&:disabled::-moz-range-thumb': { ...sliderThumb, @@ -777,7 +779,7 @@ const theme: BaseTheme = { }, '&:focus::-moz-range-progress': { ...sliderTrack, - background: '#673ab7', + backgroundColor: 'primary', }, '&:disabled::-moz-range-progress': { ...sliderTrack, From c76e2520f21d97f216d49142bcb48de9dad30d49 Mon Sep 17 00:00:00 2001 From: Timo Zehnle Date: Fri, 17 Dec 2021 13:10:30 +0100 Subject: [PATCH 4/4] gray also refa --- themes/theme-unicorn/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/theme-unicorn/src/index.ts b/themes/theme-unicorn/src/index.ts index 263ca14b95..07a362a576 100644 --- a/themes/theme-unicorn/src/index.ts +++ b/themes/theme-unicorn/src/index.ts @@ -231,8 +231,8 @@ const theme: BaseTheme = { }, colors: { ...colors, - text: colors.gray90, - background: colors.gray00, + text: 'gray90', + background: 'gray00', primary: '#673ab7', secondary: '#9575cd', disabled: '#e9e7eb',