From a242d2d8a2e133a1eaf929e3ad7d7e400f6d3bc2 Mon Sep 17 00:00:00 2001 From: Zee Date: Sun, 2 Jul 2023 19:01:33 +0000 Subject: [PATCH 01/28] changes to make theme visually accesible --- sites/shared/themes/light.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js index 86afbc9995e8..41c37098f9f4 100644 --- a/sites/shared/themes/light.js +++ b/sites/shared/themes/light.js @@ -50,17 +50,17 @@ module.exports = { 'base-content': colors.neutral['700'], // primary: The main brand color and color of the primary button - primary: colors.violet['500'], + primary: colors.violet['700'], // primary-focus: The :hover color for the primary button - 'primary-focus': colors.violet['600'], + 'primary-focus': colors.violet['800'], // primary-content: The text color on a primary button 'primary-content': colors.neutral['50'], // secondary: The link color on default backgrounds (base-100) - secondary: colors.sky['500'], + secondary: colors.sky['800'], // secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: An alternative link color for on dark backgrounds - 'secondary-focus': colors.sky['600'], + 'secondary-focus': colors.sky['50'], // secondary-content: The text color on a secondary button 'secondary-content': colors.sky['50'], From 9b2a8a106c4094fb92de515c6a77466d5854d8a8 Mon Sep 17 00:00:00 2001 From: Zee Date: Sat, 8 Jul 2023 18:09:40 +0000 Subject: [PATCH 02/28] visual accesibility changes --- sites/shared/components/designs/difficulty.mjs | 5 +++-- sites/shared/components/workbench/header.mjs | 1 + sites/shared/themes/light.js | 6 +++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/sites/shared/components/designs/difficulty.mjs b/sites/shared/components/designs/difficulty.mjs index b642b16161a0..1c6246e8b21a 100644 --- a/sites/shared/components/designs/difficulty.mjs +++ b/sites/shared/components/designs/difficulty.mjs @@ -1,17 +1,18 @@ import { CircleIcon as Icon } from 'shared/components/icons.mjs' +import { primary } from '../../themes/light' export const Circle = ({ off = false, color = 'warning' }) => ( ) -const colors = ['violet', 'green-500', 'yellow-300', 'amber-500', 'orange-500', 'red-500'] +//const colors = ['fuchsia-700', 'fuchsia-700', 'fuchsia-700', 'fuchsia-700', 'fuchsia-700', 'fuchsia-700'] const five = [0, 1, 2, 3, 4] export const Difficulty = ({ score = 0, color = false }) => (
{five.map((i) => ( - + ))}
) diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs index 6a70278c79db..bf92ebb0a8c0 100644 --- a/sites/shared/components/workbench/header.mjs +++ b/sites/shared/components/workbench/header.mjs @@ -72,6 +72,7 @@ const NavIcons = ({ setView, setDense, dense, view }) => { label={t('workbench:viewMenu')} extraClasses="hidden lg:flex text-success bg-neutral hover:bg-success hover:text-neutral" > + \\ {dense ? ( Date: Sun, 2 Jul 2023 19:01:33 +0000 Subject: [PATCH 03/28] changes to make theme visually accesible --- sites/shared/themes/light.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js index 86afbc9995e8..41c37098f9f4 100644 --- a/sites/shared/themes/light.js +++ b/sites/shared/themes/light.js @@ -50,17 +50,17 @@ module.exports = { 'base-content': colors.neutral['700'], // primary: The main brand color and color of the primary button - primary: colors.violet['500'], + primary: colors.violet['700'], // primary-focus: The :hover color for the primary button - 'primary-focus': colors.violet['600'], + 'primary-focus': colors.violet['800'], // primary-content: The text color on a primary button 'primary-content': colors.neutral['50'], // secondary: The link color on default backgrounds (base-100) - secondary: colors.sky['500'], + secondary: colors.sky['800'], // secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: An alternative link color for on dark backgrounds - 'secondary-focus': colors.sky['600'], + 'secondary-focus': colors.sky['50'], // secondary-content: The text color on a secondary button 'secondary-content': colors.sky['50'], From 819e4714a1e71913ae26c585d8c3ae860fa071de Mon Sep 17 00:00:00 2001 From: Zee Date: Sat, 8 Jul 2023 18:09:40 +0000 Subject: [PATCH 04/28] visual accesibility changes --- sites/shared/components/designs/difficulty.mjs | 5 +++-- sites/shared/components/workbench/header.mjs | 1 + sites/shared/themes/light.js | 6 +++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/sites/shared/components/designs/difficulty.mjs b/sites/shared/components/designs/difficulty.mjs index b642b16161a0..1c6246e8b21a 100644 --- a/sites/shared/components/designs/difficulty.mjs +++ b/sites/shared/components/designs/difficulty.mjs @@ -1,17 +1,18 @@ import { CircleIcon as Icon } from 'shared/components/icons.mjs' +import { primary } from '../../themes/light' export const Circle = ({ off = false, color = 'warning' }) => ( ) -const colors = ['violet', 'green-500', 'yellow-300', 'amber-500', 'orange-500', 'red-500'] +//const colors = ['fuchsia-700', 'fuchsia-700', 'fuchsia-700', 'fuchsia-700', 'fuchsia-700', 'fuchsia-700'] const five = [0, 1, 2, 3, 4] export const Difficulty = ({ score = 0, color = false }) => (
{five.map((i) => ( - + ))}
) diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs index 6a70278c79db..bf92ebb0a8c0 100644 --- a/sites/shared/components/workbench/header.mjs +++ b/sites/shared/components/workbench/header.mjs @@ -72,6 +72,7 @@ const NavIcons = ({ setView, setDense, dense, view }) => { label={t('workbench:viewMenu')} extraClasses="hidden lg:flex text-success bg-neutral hover:bg-success hover:text-neutral" > + \\ {dense ? ( Date: Sun, 9 Jul 2023 11:48:55 +0000 Subject: [PATCH 05/28] prep for easier theme adjustment --- .../components/navigation/sections-menu.mjs | 2 +- sites/shared/components/header.mjs | 24 +++++++++---------- sites/shared/components/workbench/header.mjs | 11 ++------- sites/shared/config/tailwind-force.html | 24 +++++++++++++++++++ 4 files changed, 39 insertions(+), 22 deletions(-) diff --git a/sites/dev/components/navigation/sections-menu.mjs b/sites/dev/components/navigation/sections-menu.mjs index c861f0991edf..3e21ce841f82 100644 --- a/sites/dev/components/navigation/sections-menu.mjs +++ b/sites/dev/components/navigation/sections-menu.mjs @@ -27,7 +27,7 @@ export const SectionsMenu = ({ bOnly = false }) => { className={ bOnly ? `bg-secondary border border solid border-secondary bg-opacity-0 hover:bg-opacity-20 ${sharedClasses}` - : `bg-${colors[i]}-400 bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}` + : `bg-${colors[i]} bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}` } href={`/${page.s}`} title={page.t} diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index 46fd211bef82..5e129389e9d1 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -1,17 +1,17 @@ import Link from 'next/link' export const colors = [ - 'red', - 'orange', - 'yellow', - 'lime', - 'green', - 'teal', - 'cyan', - 'blue', - 'indigo', - 'violet', - 'purple', + 'rainbow-red', + 'rainbow-orange', + 'rainbow-yellow', + 'rainbow-lime', + 'rainbow-green', + 'rainbow-teal', + 'rainbow-cyan', + 'rainbow-blue', + 'rainbow-indigo', + 'rainbow-violet', + 'rainbow-purple', ] export const NavButton = ({ @@ -25,7 +25,7 @@ export const NavButton = ({ }) => { const className = 'border-0 px-1 xl:px-4 text-base py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' + - `hover:bg-${color}-400 text-${color}-400 hover:text-neutral grow lg:grow-0 relative ${extraClasses} ${ + `hover:bg-${color} text-${color} hover:text-neutral grow lg:grow-0 relative ${extraClasses} ${ active ? 'font-heavy' : '' }` const span = {label} diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs index bf92ebb0a8c0..1223408f9d23 100644 --- a/sites/shared/components/workbench/header.mjs +++ b/sites/shared/components/workbench/header.mjs @@ -70,17 +70,10 @@ const NavIcons = ({ setView, setDense, dense, view }) => { setDense(!dense)} label={t('workbench:viewMenu')} - extraClasses="hidden lg:flex text-success bg-neutral hover:bg-success hover:text-neutral" + extraClasses="hidden lg:flex text-primary bg-neutral hover:bg-primary hover:text-neutral" > \\ - {dense ? ( - - ) : ( - - )} + {dense ? : } setView('draft')} diff --git a/sites/shared/config/tailwind-force.html b/sites/shared/config/tailwind-force.html index 1cc439af693f..660a1c1fb943 100644 --- a/sites/shared/config/tailwind-force.html +++ b/sites/shared/config/tailwind-force.html @@ -53,6 +53,30 @@
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
From 1f13a9c984b010813bf746d6101cd0df43dcb6bb Mon Sep 17 00:00:00 2001 From: Zee Date: Sun, 9 Jul 2023 14:01:57 +0000 Subject: [PATCH 06/28] top rainbow passes ADA visual --- sites/shared/components/header.mjs | 26 ++++++++++++------------- sites/shared/config/tailwind-force.html | 26 +++++++++++++++++++++++++ sites/shared/themes/light.js | 15 +++++++++++++- 3 files changed, 53 insertions(+), 14 deletions(-) diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index 5e129389e9d1..f1ccbd3ffbc3 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -1,17 +1,17 @@ import Link from 'next/link' export const colors = [ - 'rainbow-red', - 'rainbow-orange', - 'rainbow-yellow', - 'rainbow-lime', - 'rainbow-green', - 'rainbow-teal', - 'rainbow-cyan', - 'rainbow-blue', - 'rainbow-indigo', - 'rainbow-violet', - 'rainbow-purple', + 'red', + 'orange', + 'yellow', + 'lime', + 'green', + 'teal', + 'cyan', + 'blue', + 'indigo', + 'violet', + 'purple', ] export const NavButton = ({ @@ -24,8 +24,8 @@ export const NavButton = ({ active = false, }) => { const className = - 'border-0 px-1 xl:px-4 text-base py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' + - `hover:bg-${color} text-${color} hover:text-neutral grow lg:grow-0 relative ${extraClasses} ${ + 'border-0 px-1 xl:px-4 text-base-100 py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' + + `bg-${color}-400 text-base-content grow lg:grow-0 relative ${extraClasses} ${ active ? 'font-heavy' : '' }` const span = {label} diff --git a/sites/shared/config/tailwind-force.html b/sites/shared/config/tailwind-force.html index 660a1c1fb943..91ed2e7a1d6d 100644 --- a/sites/shared/config/tailwind-force.html +++ b/sites/shared/config/tailwind-force.html @@ -77,6 +77,32 @@
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + +
diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js index 2b199d215b25..7f0d859710ed 100644 --- a/sites/shared/themes/light.js +++ b/sites/shared/themes/light.js @@ -47,7 +47,7 @@ module.exports = { // base-300: A shade midway between dark and light 'base-300': colors.neutral['500'], // base-content: The default text color for a regular page (docs and so on) - 'base-content': colors.neutral['700'], + 'base-content': colors.neutral['950'], // primary: The main brand color and color of the primary button primary: colors.fuchsia['700'], @@ -80,6 +80,19 @@ module.exports = { // neutral-content: The text color on neutral backgrounds 'neutral-content': colors.neutral['50'], + rainbow: colors.neutral['50'], + 'rainbow-red': colors.red['400'], + 'rainbow-orange': colors.orange['400'], + 'rainbow-yellow': colors.yellow['400'], + 'rainbow-lime': colors.lime['400'], + 'rainbow-green': colors.green['400'], + 'rainbow-teal': colors.teal['400'], + 'rainbow-cyan': colors.cyan['400'], + 'rainbow-blue': colors.blue['400'], + 'rainbow-indigo': colors.indigo['400'], + 'rainbow-violet': colors.violet['400'], + 'rainbow-purple': colors.purple['400'], + // info: Used rarely, can be another color best somewhat neutral looking // and should work with the default text color info: colors.indigo['600'], From c11a95388e05d336b89fdf7df47c6a203610fd3c Mon Sep 17 00:00:00 2001 From: Zee Date: Sun, 9 Jul 2023 14:19:25 +0000 Subject: [PATCH 07/28] top rainbow shows where you hover --- sites/shared/components/header.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index f1ccbd3ffbc3..cff6127c9c0d 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -25,7 +25,7 @@ export const NavButton = ({ }) => { const className = 'border-0 px-1 xl:px-4 text-base-100 py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' + - `bg-${color}-400 text-base-content grow lg:grow-0 relative ${extraClasses} ${ + `bg-${color}-400 text-base-content grow lg:grow-0 relative hover:bg-base-content hover:text-neutral-50 ${extraClasses} ${ active ? 'font-heavy' : '' }` const span = {label} From bc87702d293d975453991f1d77fc87df1b8ac770 Mon Sep 17 00:00:00 2001 From: Zee Date: Sun, 9 Jul 2023 15:21:41 +0000 Subject: [PATCH 08/28] hover colour on right menu high enough contrast --- sites/shared/components/navigation/primary.mjs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/shared/components/navigation/primary.mjs b/sites/shared/components/navigation/primary.mjs index 875b3a04423d..6519d515f86a 100644 --- a/sites/shared/components/navigation/primary.mjs +++ b/sites/shared/components/navigation/primary.mjs @@ -74,7 +74,7 @@ const currentChildren = (current) => // Exported for re-use export const linkClasses = ` py-1 - text-base text-base-content sm:text-base-content + text-base-content sm:text-base-content hover:text-secondary sm:hover:text-secondary ` @@ -168,7 +168,7 @@ const SubLevel = ({ nodes = {}, active = '' }) => ( sm:hover:border-secondary ${ child.s === active - ? 'text-secondary border-secondary sm:text-secondary sm:border-secondary' + ? 'text-secondary border-accent sm:text-secondary sm:border-secondary' : 'text-base-content sm:text-base-content' }`} > @@ -272,7 +272,7 @@ export const MainSections = () => { href={`/${page.s}`} className={` flex flex-row gap-4 items-center - hover:bg-secondary hover:bg-opacity-25 hover:cursor-pointer + hover:bg-primary-focus hover:text-base-100 hover:cursor-pointer p-2 px-4 rounded rounded-none `} From 1a4c52abf9304230bfe0119b0ea9f8de9056c1c5 Mon Sep 17 00:00:00 2001 From: Zee Date: Sun, 9 Jul 2023 15:53:14 +0000 Subject: [PATCH 09/28] indicates page you are on in top menu --- sites/shared/components/header.mjs | 2 +- sites/shared/components/navigation/primary.mjs | 2 +- sites/shared/themes/light.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index cff6127c9c0d..50be189f9f9f 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -25,7 +25,7 @@ export const NavButton = ({ }) => { const className = 'border-0 px-1 xl:px-4 text-base-100 py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' + - `bg-${color}-400 text-base-content grow lg:grow-0 relative hover:bg-base-content hover:text-neutral-50 ${extraClasses} ${ + `bg-${color}-400 text-base-content grow lg:grow-0 relative hover:bg-base-content hover:text-base-100 focus:bg-base-100 focus:text-base-content ${extraClasses} ${ active ? 'font-heavy' : '' }` const span = {label} diff --git a/sites/shared/components/navigation/primary.mjs b/sites/shared/components/navigation/primary.mjs index 6519d515f86a..1f9b175ef45b 100644 --- a/sites/shared/components/navigation/primary.mjs +++ b/sites/shared/components/navigation/primary.mjs @@ -272,7 +272,7 @@ export const MainSections = () => { href={`/${page.s}`} className={` flex flex-row gap-4 items-center - hover:bg-primary-focus hover:text-base-100 hover:cursor-pointer + hover:bg-primary hover:text-base-100 hover:cursor-pointer p-2 px-4 rounded rounded-none `} diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js index 7f0d859710ed..c516603aa6ce 100644 --- a/sites/shared/themes/light.js +++ b/sites/shared/themes/light.js @@ -50,9 +50,9 @@ module.exports = { 'base-content': colors.neutral['950'], // primary: The main brand color and color of the primary button - primary: colors.fuchsia['700'], + primary: colors.indigo['700'], // primary-focus: The :hover color for the primary button - 'primary-focus': colors.indigo['800'], + 'primary-focus': colors.sky['800'], // primary-content: The text color on a primary button 'primary-content': colors.neutral['50'], @@ -60,13 +60,13 @@ module.exports = { secondary: colors.sky['800'], // secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: An alternative link color for on dark backgrounds - 'secondary-focus': colors.sky['500'], + 'secondary-focus': colors.indigo['700'], // secondary-content: The text color on a secondary button 'secondary-content': colors.sky['50'], // accent: The accent color is used to highlight active things // Should be something is positive/neutral. Avoid red or orange. - accent: colors.fuchsia['500'], + accent: colors.orange['500'], // accent-focus: The :hover color for the accent button 'accent-focus': colors.fuchsia['600'], // accent-content: The text color for the accent button From d61f03548b64e2967d5dc95d0bcf79493729e994 Mon Sep 17 00:00:00 2001 From: Zee Date: Mon, 10 Jul 2023 12:46:13 +0000 Subject: [PATCH 10/28] ensures active state left menu --- sites/shared/components/workbench/header.mjs | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs index 9b0a05fb1ec1..e42928236dc4 100644 --- a/sites/shared/components/workbench/header.mjs +++ b/sites/shared/components/workbench/header.mjs @@ -41,12 +41,12 @@ export const NavButton = ({ children, onClick = false, active = false, - extraClasses = 'lg:bg-neutral lg:text-neutral-content lg:hover:bg-secondary lg:hover:text-secondary-content hover:text-secondary', + extraClasses = 'bg-neutral lg:text-neutral-content lg:hover:bg-secondary lg:hover:text-secondary-content hover:text-secondary', }) => { const className = `w-full flex flex-row items-center px-4 py-2 ${extraClasses} ${ - active ? 'text-secondary' : '' + active ? 'bg-secondary' : '' }` - const span = {label} + const span = {label} return onClick ? ( ) const ResetButton = ({ open, disabled = false }) => ( @@ -142,7 +144,7 @@ export const MenuItem = ({ emoji: config.emoji, Icon: config.icon, } - + //changes left border of button return ( ( - {children} + {children} ) /** diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js index c9ff8358c3a9..0a19f1875728 100644 --- a/sites/shared/themes/light.js +++ b/sites/shared/themes/light.js @@ -50,27 +50,27 @@ module.exports = { 'base-content': colors.neutral['950'], // primary: The main brand color and color of the primary button - primary: colors.indigo['700'], + primary: colors.sky['700'], // primary-focus: The :hover color for the primary button - 'primary-focus': colors.sky['800'], + 'primary-focus': colors.sky['950'], // primary-content: The text color on a primary button 'primary-content': colors.neutral['50'], // secondary: The link color on default backgrounds (base-100) - secondary: colors.sky['800'], + secondary: colors.sky['700'], // secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: An alternative link color for on dark backgrounds - 'secondary-focus': colors.indigo['700'], + 'secondary-focus': colors.sky['950'], // secondary-content: The text color on a secondary button - 'secondary-content': colors.sky['50'], + 'secondary-content': colors.neutral['50'], // accent: The accent color is used to highlight active things // Should be something is positive/neutral. Avoid red or orange. accent: colors.orange['500'], // accent-focus: The :hover color for the accent button - 'accent-focus': colors.fuchsia['600'], + 'accent-focus': colors.orange['950'], // accent-content: The text color for the accent button - 'accent-content': colors.fuchsia['50'], + 'accent-content': colors.neutral['950'], // neutral: Used as the background for the footer and navigation on desktop // Should always be dark From d65c6de6526df432e75086e44167d8fe5ffa8088 Mon Sep 17 00:00:00 2001 From: Zee Date: Mon, 24 Jul 2023 15:04:50 +0000 Subject: [PATCH 14/28] dark theme changes --- sites/shared/themes/dark.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/shared/themes/dark.js b/sites/shared/themes/dark.js index 54a1dd3ce69a..ca9185026205 100644 --- a/sites/shared/themes/dark.js +++ b/sites/shared/themes/dark.js @@ -17,9 +17,9 @@ module.exports = { 'secondary-focus': colors.sky['600'], 'secondary-content': colors.sky['50'], - accent: colors.fuchsia['700'], - 'accent-focus': colors.fuchsia['600'], - 'accent-content': colors.fuchsia['50'], + accent: colors.orange['700'], + 'accent-focus': colors.orange['600'], + 'accent-content': colors.orange['50'], neutral: '#000000', // Dark as my soul 'neutral-focus': colors.neutral['800'], From 18170c6c36d0c84f3418735f3aadf2c1c9935b3c Mon Sep 17 00:00:00 2001 From: Zee Date: Sat, 29 Jul 2023 19:28:47 +0000 Subject: [PATCH 15/28] refining theme colours accesibility --- sites/org/components/search.mjs | 2 +- sites/shared/components/choice-button.mjs | 12 +++++------- sites/shared/components/collapse.mjs | 4 ++-- .../components/workbench/menus/shared/inputs.mjs | 3 ++- .../components/workbench/menus/shared/menu-item.mjs | 2 +- .../components/workbench/menus/shared/values.mjs | 4 +--- sites/shared/themes/light.js | 10 +++++----- 7 files changed, 17 insertions(+), 20 deletions(-) diff --git a/sites/org/components/search.mjs b/sites/org/components/search.mjs index 35b540d7be72..2f0935159598 100644 --- a/sites/org/components/search.mjs +++ b/sites/org/components/search.mjs @@ -172,7 +172,7 @@ const SearchBox = (props) => { `} >
-
diff --git a/sites/shared/components/choice-button.mjs b/sites/shared/components/choice-button.mjs index def8f21e5bc0..a34692fb4a37 100644 --- a/sites/shared/components/choice-button.mjs +++ b/sites/shared/components/choice-button.mjs @@ -13,17 +13,15 @@ export const ChoiceButton = ({ flex flex-col flex-nowrap items-start justify-start gap-2 pt-2 pb-4 h-auto w-full ${ noMargin ? '' : 'mt-3' } - btn btn-${color} btn-ghost border border-${color} - hover:bg-opacity-20 hover:bg-${color} hover:border hover:border-${color} - ${active ? 'bg-' + color + ' bg-opacity-20 border border-' + color : ''} + btn btn-${color} + + ${active ? 'btn-' + color : ' btn-outline'} `} > -
+
{title} {icon}
-
- {children} -
+
{children}
) diff --git a/sites/shared/components/collapse.mjs b/sites/shared/components/collapse.mjs index 8c2e2efc9f6a..34cf6d0f997f 100644 --- a/sites/shared/components/collapse.mjs +++ b/sites/shared/components/collapse.mjs @@ -58,7 +58,7 @@ export const Collapse = ({
{children}
@@ -67,7 +67,7 @@ export const Collapse = ({ ) : (
setOpen(true)} > diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs index 8389ef73877a..bceef2aad834 100644 --- a/sites/shared/components/workbench/menus/shared/inputs.mjs +++ b/sites/shared/components/workbench/menus/shared/inputs.mjs @@ -8,6 +8,7 @@ import { } from 'shared/utils.mjs' import { ChoiceButton } from 'shared/components/choice-button.mjs' import debounce from 'lodash.debounce' +import { primary } from '../../../../themes/light' /******************************************************************************************* * This file contains the base components to be used by inputs in menus in the workbench @@ -240,7 +241,7 @@ export const ListInput = ({ name, config, current, updateFunc, compact = false, handleChange(entry)} > diff --git a/sites/shared/components/workbench/menus/shared/menu-item.mjs b/sites/shared/components/workbench/menus/shared/menu-item.mjs index aca98238f5d7..ad246e9bf720 100644 --- a/sites/shared/components/workbench/menus/shared/menu-item.mjs +++ b/sites/shared/components/workbench/menus/shared/menu-item.mjs @@ -29,7 +29,7 @@ export const ItemTitle = ({ name, t, current = null, open = false, emoji = '', I {Icon ? : {emoji}} {t([`${name}.t`, name])} - {current} + {current}
) diff --git a/sites/shared/components/workbench/menus/shared/values.mjs b/sites/shared/components/workbench/menus/shared/values.mjs index 6d8ac934d1ac..3676c198c325 100644 --- a/sites/shared/components/workbench/menus/shared/values.mjs +++ b/sites/shared/components/workbench/menus/shared/values.mjs @@ -6,9 +6,7 @@ import { formatMm } from 'shared/utils.mjs' *********************************************************************************************************/ /** The basis of it all. Handles the changed/unchanged styling for the wrapped value */ -export const HighlightedValue = ({ changed, children }) => ( - {children} -) +export const HighlightedValue = ({ changed, children }) => {children} /** * A wrapper for displaying the correct value based on whether or not the value has changed diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js index 0a19f1875728..967bf380be89 100644 --- a/sites/shared/themes/light.js +++ b/sites/shared/themes/light.js @@ -50,14 +50,14 @@ module.exports = { 'base-content': colors.neutral['950'], // primary: The main brand color and color of the primary button - primary: colors.sky['700'], + primary: colors.sky['800'], // primary-focus: The :hover color for the primary button 'primary-focus': colors.sky['950'], // primary-content: The text color on a primary button 'primary-content': colors.neutral['50'], // secondary: The link color on default backgrounds (base-100) - secondary: colors.sky['700'], + secondary: colors.sky['800'], // secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: An alternative link color for on dark backgrounds 'secondary-focus': colors.sky['950'], @@ -66,11 +66,11 @@ module.exports = { // accent: The accent color is used to highlight active things // Should be something is positive/neutral. Avoid red or orange. - accent: colors.orange['500'], + accent: colors.emerald['800'], // accent-focus: The :hover color for the accent button - 'accent-focus': colors.orange['950'], + 'accent-focus': colors.emerald['950'], // accent-content: The text color for the accent button - 'accent-content': colors.neutral['950'], + 'accent-content': colors.neutral['50'], // neutral: Used as the background for the footer and navigation on desktop // Should always be dark From 4aa637b892c925069931acfe95f48f81dd71da7c Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Sat, 29 Jul 2023 22:32:37 +0000 Subject: [PATCH 16/28] rainbow as css vars in tailwind. light menu bars in light theme --- sites/shared/components/header.mjs | 36 ++++++++++++++++--- sites/shared/components/social/icons.mjs | 2 +- sites/shared/components/wordmark.mjs | 24 ++++++------- sites/shared/components/workbench/header.mjs | 9 +++-- .../workbench/views/test/options.mjs | 2 +- .../workbench/views/view-header.mjs | 10 ++---- sites/shared/components/wrappers/header.mjs | 3 +- sites/shared/components/wrappers/layout.mjs | 5 ++- sites/shared/config/tailwind.config.js | 21 +++++++++++ sites/shared/themes/dark.js | 32 ++++++++--------- sites/shared/themes/light.js | 31 ++++++++-------- 11 files changed, 112 insertions(+), 63 deletions(-) diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index cbe5fd2869ef..89fb3d9ada67 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -14,6 +14,34 @@ export const colors = [ 'purple', ] +const hoverColors = { + red: 'hover:bg-rainbow-red', + orange: 'hover:bg-rainbow-orange', + yellow: 'hover:bg-rainbow-yellow', + lime: 'hover:bg-rainbow-lime', + green: 'hover:bg-rainbow-green', + teal: 'hover:bg-rainbow-teal', + cyan: 'hover:bg-rainbow-cyan', + blue: 'hover:bg-rainbow-blue', + indigo: 'hover:bg-rainbow-indigo', + violet: 'hover:bg-rainbow-violet', + purple: 'hover:bg-rainbow-purple', +} + +const textColors = { + red: 'text-rainbow-red', + orange: 'text-rainbow-orange', + yellow: 'text-rainbow-yellow', + lime: 'text-rainbow-lime', + green: 'text-rainbow-green', + teal: 'text-rainbow-teal', + cyan: 'text-rainbow-cyan', + blue: 'text-rainbow-blue', + indigo: 'text-rainbow-indigo', + violet: 'text-rainbow-violet', + purple: 'text-rainbow-purple', +} + export const iconSize = 'h-10 w-10 lg:h-12 lg:w-12' export const NavButton = ({ @@ -27,10 +55,10 @@ export const NavButton = ({ }) => { const className = 'border-0 px-1 lg:px-3 xl:px-4 text-base py-3 md:py-4 text-center flex flex-col items-center 2xl:w-36 ' + - `hover:bg-${color}-400 text-${color}-400 hover:text-neutral grow xl:grow-0 relative ${extraClasses} ${ - active ? 'font-heavy' : '' - }` - const span = {label} + `${hoverColors[color]} ${ + textColors[color] + } hover:text-neutral grow xl:grow-0 relative ${extraClasses} ${active ? 'font-heavy' : ''}` + const span = {label} return onClick ? ( ) @@ -102,7 +104,7 @@ export const MenuItem = ({ openButtons.push(
) @@ -48,7 +50,7 @@ const smZoomClasses = const ZoomButtons = ({ t, zoomFunctions, zoomed }) => { if (!zoomFunctions) return null return ( -
+
{ return (
-
+
{headerZoomButtons} -
+
{ data-tip={t('ui-settings:control.t')} > {[1, 2, 3, 4, 5].map((score) => ( - ))}
-
+
{ />
-
+
diff --git a/sites/shared/config/tailwind.config.mjs b/sites/shared/config/tailwind.config.mjs index 1b8e6833dad3..de4b5ab041a8 100644 --- a/sites/shared/config/tailwind.config.mjs +++ b/sites/shared/config/tailwind.config.mjs @@ -1,5 +1,6 @@ // Handle themes -const themes = require('../themes') +import { themes } from '../themes/index.mjs' + const colors = [ 'red', 'orange', diff --git a/sites/shared/hooks/use-theme.mjs b/sites/shared/hooks/use-theme.mjs index a81fe18f1e50..f4bbb286a776 100644 --- a/sites/shared/hooks/use-theme.mjs +++ b/sites/shared/hooks/use-theme.mjs @@ -1,4 +1,4 @@ -import { spectrum, rating, stripe } from 'shared/themes/index.mjs' +import { spectrum as themedSpectrum, rating, stripe } from 'shared/themes/index.mjs' import createPersistedState from 'use-persisted-state' const usePersistedTheme = createPersistedState('fs-theme') @@ -12,13 +12,14 @@ const preferredTheme = () => { return prefersDarkMode ? 'dark' : 'light' } +export const spectrum = themedSpectrum.light export const useTheme = () => { const theme = usePersistedTheme(preferredTheme) return { theme: theme[0], setTheme: theme[1], - spectrum: spectrum[theme[0]], + spectrum: themedSpectrum[theme[0]], rating: rating[theme[0]], stripe: stripe[theme[0]], } diff --git a/sites/shared/styles/globals.css b/sites/shared/styles/globals.css index 8ec05da3115e..434e42326b30 100644 --- a/sites/shared/styles/globals.css +++ b/sites/shared/styles/globals.css @@ -455,6 +455,11 @@ .btn-error { color: var(--btn-error-content); } +.btn-ghost:hover { + color: hsl(var(--b1)); + --tw-bg-opacity: 0.8; + background-color: hsl(var(--bc) / var(--tw-bg-opacity)); +} /* Theme gradient */ .theme-gradient { diff --git a/sites/shared/themes/light.mjs b/sites/shared/themes/light.mjs index 9b150e492191..28c4bf71fc9a 100644 --- a/sites/shared/themes/light.mjs +++ b/sites/shared/themes/light.mjs @@ -66,31 +66,31 @@ export const theme = { 'base-content': colors.neutral['950'], // primary: The main brand color and color of the primary button - primary: colors.sky['800'], + primary: colors.purple['900'], // primary-focus: The :hover color for the primary button - 'primary-focus': colors.sky['950'], + 'primary-focus': colors.purple['800'], // primary-content: The text color on a primary button 'primary-content': colors.neutral['50'], // secondary: The link color on default backgrounds (base-100) - secondary: colors.sky['800'], + secondary: colors.indigo['800'], // secondary-focus: The :hover link color for default backgrounds. Or: // secondary-focus: An alternative link color for on dark backgrounds - 'secondary-focus': colors.sky['950'], + 'secondary-focus': colors.indigo['950'], // secondary-content: The text color on a secondary button 'secondary-content': colors.neutral['50'], // accent: The accent color is used to highlight active things // Should be something is positive/neutral. Avoid red or orange. - accent: colors.emerald['800'], + accent: colors.pink['800'], // accent-focus: The :hover color for the accent button - 'accent-focus': colors.emerald['950'], + 'accent-focus': colors.pink['950'], // accent-content: The text color for the accent button 'accent-content': colors.neutral['50'], // neutral: Used as the background for the footer and navigation on desktop // Should always be dark - neutral: colors.neutral['800'], + neutral: colors.neutral['900'], // neutral-focus: Typically a shade lighter than neutral 'neutral-focus': colors.neutral['700'], // neutral-content: The text color on neutral backgrounds @@ -128,7 +128,7 @@ export const theme = { // error: Used rarely, but if it is it's in notifications indicating success // or the danger button // Typically some shade of red - error: colors.red['600'], + error: colors.red['800'], // Text color on the error button '--btn-error-content': colors.neutral[50], From f11e852b0f8c276722cf13957a47e30dde6cecbf Mon Sep 17 00:00:00 2001 From: Zee Date: Wed, 2 Aug 2023 19:40:44 +0000 Subject: [PATCH 18/28] accesibility colour changes --- sites/shared/components/header.mjs | 4 +++- sites/shared/components/social/icons.mjs | 4 ++-- sites/shared/hooks/use-theme.mjs | 5 ++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index 89fb3d9ada67..5716932515a0 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -57,7 +57,9 @@ export const NavButton = ({ 'border-0 px-1 lg:px-3 xl:px-4 text-base py-3 md:py-4 text-center flex flex-col items-center 2xl:w-36 ' + `${hoverColors[color]} ${ textColors[color] - } hover:text-neutral grow xl:grow-0 relative ${extraClasses} ${active ? 'font-heavy' : ''}` + } text-violet-400 hover:text-neutral grow xl:grow-0 relative ${extraClasses} ${ + active ? 'font-heavy' : '' + }` const span = {label} return onClick ? ( diff --git a/sites/shared/components/social/icons.mjs b/sites/shared/components/social/icons.mjs index b7c8ca20fb77..43d18c3290e4 100644 --- a/sites/shared/components/social/icons.mjs +++ b/sites/shared/components/social/icons.mjs @@ -1,5 +1,5 @@ import Link from 'next/link' -import { useTheme, spectrum } from 'shared/hooks/use-theme.mjs' +import { useTheme } from 'shared/hooks/use-theme.mjs' import { MsfIcon, HelpIcon, @@ -16,7 +16,7 @@ import { social } from 'config/social.mjs' import { siteConfig } from 'site/site.config.mjs' const iconClasses = (i) => ({ - className: `w-8 lg:w-12 h-8 lg:h-12 text-rainbow-${spectrum[i]} hover:text-neutral-content`, + className: `w-8 lg:w-12 h-8 lg:h-12 hover:text-neutral-content ${i}`, }) export const socialList = (spectrum) => ({ diff --git a/sites/shared/hooks/use-theme.mjs b/sites/shared/hooks/use-theme.mjs index f4bbb286a776..a81fe18f1e50 100644 --- a/sites/shared/hooks/use-theme.mjs +++ b/sites/shared/hooks/use-theme.mjs @@ -1,4 +1,4 @@ -import { spectrum as themedSpectrum, rating, stripe } from 'shared/themes/index.mjs' +import { spectrum, rating, stripe } from 'shared/themes/index.mjs' import createPersistedState from 'use-persisted-state' const usePersistedTheme = createPersistedState('fs-theme') @@ -12,14 +12,13 @@ const preferredTheme = () => { return prefersDarkMode ? 'dark' : 'light' } -export const spectrum = themedSpectrum.light export const useTheme = () => { const theme = usePersistedTheme(preferredTheme) return { theme: theme[0], setTheme: theme[1], - spectrum: themedSpectrum[theme[0]], + spectrum: spectrum[theme[0]], rating: rating[theme[0]], stripe: stripe[theme[0]], } From 11edb35dcb0be158b57aeb4c7e89c25222f6ed1f Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Wed, 2 Aug 2023 23:06:25 +0000 Subject: [PATCH 19/28] handle spectrum theming inside of tailwind --- sites/dev/components/header/index.mjs | 36 +++------- sites/lab/components/header/index.mjs | 40 +++-------- sites/lab/components/layouts/bare.mjs | 11 +-- sites/lab/components/layouts/lab.mjs | 41 +---------- .../shared/components/designs/difficulty.mjs | 19 ++--- sites/shared/components/header.mjs | 71 ++++++++----------- .../components/navigation/sections-menu.mjs | 22 ++++-- sites/shared/components/social/icons.mjs | 47 +++++++----- sites/shared/components/wordmark.mjs | 34 +++------ sites/shared/config/tailwind.config.mjs | 50 ++++++++----- sites/shared/hooks/use-theme.mjs | 4 +- sites/shared/themes/index.mjs | 38 ++-------- sites/shared/themes/light.mjs | 69 ++++++++++++------ 13 files changed, 208 insertions(+), 274 deletions(-) diff --git a/sites/dev/components/header/index.mjs b/sites/dev/components/header/index.mjs index a0a90ce12a64..0d2806d293db 100644 --- a/sites/dev/components/header/index.mjs +++ b/sites/dev/components/header/index.mjs @@ -1,7 +1,6 @@ // Hooks import { useContext } from 'react' import { useTranslation } from 'next-i18next' -import { useTheme } from 'shared/hooks/use-theme.mjs' // Context import { ModalContext } from 'shared/context/modal-context.mjs' // Components @@ -27,59 +26,44 @@ export const ns = ['common', 'header', 'sections', ...themeNs] const NavIcons = ({ setModal, slug }) => { const { t } = useTranslation(['header']) const iconSize = 'h-6 w-6 lg:h-12 lg:w-12' - const { spectrum } = useTheme() return ( <> setModal()} label={t('header:menu')} - color={spectrum[0]} + color={0} > - + - + - + - + - + - + - + - setModal()} - label={t('header:theme')} - color={spectrum[8]} - > + setModal()} label={t('header:theme')} color={8}> - + diff --git a/sites/lab/components/header/index.mjs b/sites/lab/components/header/index.mjs index 80424aa0f328..9397dcf07f45 100644 --- a/sites/lab/components/header/index.mjs +++ b/sites/lab/components/header/index.mjs @@ -1,7 +1,6 @@ // Hooks import { useContext } from 'react' import { useTranslation } from 'next-i18next' -import { useTheme } from 'shared/hooks/use-theme.mjs' // Context import { ModalContext } from 'shared/context/modal-context.mjs' // Components @@ -28,70 +27,51 @@ export const ns = ['header', 'sections', ...themeNs, ...localeNs] const NavIcons = ({ setModal }) => { const { t } = useTranslation(['header']) - const { spectrum } = useTheme() const iconSize = 'h-6 w-6 lg:h-12 lg:w-12' return ( <> - setModal()} - label={t('header:menu')} - color={spectrum[0]} - > + setModal()} label={t('header:menu')} color={0}> - + - + - + - + - + - setModal()} - label={t('header:theme')} - color={spectrum[7]} - > + setModal()} label={t('header:theme')} color={7}> setModal()} label={t('header:language')} - color={spectrum[8]} + color={8} > - + diff --git a/sites/lab/components/layouts/bare.mjs b/sites/lab/components/layouts/bare.mjs index ad0551b2c55c..fcc3bd668241 100644 --- a/sites/lab/components/layouts/bare.mjs +++ b/sites/lab/components/layouts/bare.mjs @@ -1,17 +1,10 @@ import { useRouter } from 'next/router' -import { AsideNavigation } from 'shared/components/navigation/aside.mjs' -import { BeforeNav } from './lab.mjs' export const ns = [''] -export const BareLayout = ({ app, children = [] }) => { +export const BareLayout = ({ children = [] }) => { const router = useRouter() const slug = router.asPath.slice(1) - return ( - <> - } mobileOnly /> - {children} - - ) + return <>{children} } diff --git a/sites/lab/components/layouts/lab.mjs b/sites/lab/components/layouts/lab.mjs index 0acaf114474c..bce5bdc8059c 100644 --- a/sites/lab/components/layouts/lab.mjs +++ b/sites/lab/components/layouts/lab.mjs @@ -1,46 +1,7 @@ -import { ThemePicker } from 'shared/components/theme-picker/index.mjs' -import { LocalePicker } from 'shared/components/locale-picker/index.mjs' - export const ns = [''] -export const BeforeNav = ({ app }) => ( - <> -
- - -
-
- -) - -export const LabLayout = ({ app, AltMenu, children = [] }) => ( +export const LabLayout = ({ children = [] }) => (
{children}
-
) diff --git a/sites/shared/components/designs/difficulty.mjs b/sites/shared/components/designs/difficulty.mjs index 486923d92a22..5f7bb9496475 100644 --- a/sites/shared/components/designs/difficulty.mjs +++ b/sites/shared/components/designs/difficulty.mjs @@ -1,16 +1,19 @@ import { CircleIcon as Icon } from 'shared/components/icons.mjs' -import { useTheme } from 'shared/hooks/use-theme.mjs' export const Circle = ({ off = false, color = 'warning' }) => ( ) const five = [0, 1, 2, 3, 4] +/** force tailwind: text-rating-0 text-rating-1 text-rating-2 text-rating-3 text-rating-4 */ +export const Difficulty = ({ score = 0, color = 'rating' }) => { + const colors = five.map((i) => (color === 'rating' ? `rating-${i}` : color)) -export const Difficulty = ({ score = 0, color = 'primary' }) => ( -
- {five.map((i) => ( - - ))} -
-) + return ( +
+ {five.map((i) => ( + + ))} +
+ ) +} diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index 5716932515a0..3c21f687ac86 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -1,46 +1,32 @@ import Link from 'next/link' -export const colors = [ - 'red', - 'orange', - 'yellow', - 'lime', - 'green', - 'teal', - 'cyan', - 'blue', - 'indigo', - 'violet', - 'purple', +// can't use interpolation or these won't be compiled +const hoverColors = [ + 'hover:bg-spectrum-0', + 'hover:bg-spectrum-1', + 'hover:bg-spectrum-2', + 'hover:bg-spectrum-3', + 'hover:bg-spectrum-4', + 'hover:bg-spectrum-5', + 'hover:bg-spectrum-6', + 'hover:bg-spectrum-7', + 'hover:bg-spectrum-8', + 'hover:bg-spectrum-9', + 'hover:bg-spectrum-10', +] +const textColors = [ + 'text-spectrum-0', + 'text-spectrum-1', + 'text-spectrum-2', + 'text-spectrum-3', + 'text-spectrum-4', + 'text-spectrum-5', + 'text-spectrum-6', + 'text-spectrum-7', + 'text-spectrum-8', + 'text-spectrum-9', + 'text-spectrum-10', ] - -const hoverColors = { - red: 'hover:bg-rainbow-red', - orange: 'hover:bg-rainbow-orange', - yellow: 'hover:bg-rainbow-yellow', - lime: 'hover:bg-rainbow-lime', - green: 'hover:bg-rainbow-green', - teal: 'hover:bg-rainbow-teal', - cyan: 'hover:bg-rainbow-cyan', - blue: 'hover:bg-rainbow-blue', - indigo: 'hover:bg-rainbow-indigo', - violet: 'hover:bg-rainbow-violet', - purple: 'hover:bg-rainbow-purple', -} - -const textColors = { - red: 'text-rainbow-red', - orange: 'text-rainbow-orange', - yellow: 'text-rainbow-yellow', - lime: 'text-rainbow-lime', - green: 'text-rainbow-green', - teal: 'text-rainbow-teal', - cyan: 'text-rainbow-cyan', - blue: 'text-rainbow-blue', - indigo: 'text-rainbow-indigo', - violet: 'text-rainbow-violet', - purple: 'text-rainbow-purple', -} export const iconSize = 'h-10 w-10 lg:h-12 lg:w-12' @@ -57,9 +43,8 @@ export const NavButton = ({ 'border-0 px-1 lg:px-3 xl:px-4 text-base py-3 md:py-4 text-center flex flex-col items-center 2xl:w-36 ' + `${hoverColors[color]} ${ textColors[color] - } text-violet-400 hover:text-neutral grow xl:grow-0 relative ${extraClasses} ${ - active ? 'font-heavy' : '' - }` + } hover:text-neutral grow xl:grow-0 relative ${extraClasses} + ${active ? 'font-heavy' : ''}` const span = {label} return onClick ? ( diff --git a/sites/shared/components/navigation/sections-menu.mjs b/sites/shared/components/navigation/sections-menu.mjs index 301956c94369..86e1d1955eaf 100644 --- a/sites/shared/components/navigation/sections-menu.mjs +++ b/sites/shared/components/navigation/sections-menu.mjs @@ -1,5 +1,4 @@ import { useContext } from 'react' -import { useTheme } from 'shared/hooks/use-theme.mjs' import { NavigationContext } from 'shared/context/navigation-context.mjs' import Link from 'next/link' import { icons, ns as sectionsNs } from 'shared/components/navigation/primary.mjs' @@ -10,14 +9,29 @@ export const ns = sectionsNs const onlySections = (tree) => orderBy(tree, ['t'], ['asc']).filter((entry) => entry.m) +// force tailwind compilation +const spectrumBg = [ + 'bg-spectrum-0', + 'bg-spectrum-1', + 'bg-spectrum-2', + 'bg-spectrum-3', + 'bg-spectrum-4', + 'bg-spectrum-5', + 'bg-spectrum-6', + 'bg-spectrum-7', + 'bg-spectrum-8', + 'bg-spectrum-9', + 'bg-spectrum-10', +] + +const sharedClasses = 'p-0 rounded shadow hover:shadow-lg w-full text-neutral-900' + export const SectionsMenu = ({ bOnly = false }) => { const { t } = useTranslation(ns) const { siteNav } = useContext(NavigationContext) - const { spectrum } = useTheme() const output = [] let i = 1 - const sharedClasses = 'p-0 rounded shadow hover:shadow-lg w-full text-neutral-900' for (const page of onlySections(siteNav)) { if ((!bOnly && !page.h && !page.b) || (!page.h && bOnly && page.b)) { if (page.t !== 'spacer') { @@ -27,7 +41,7 @@ export const SectionsMenu = ({ bOnly = false }) => { className={ bOnly ? `bg-secondary border border solid border-secondary bg-opacity-0 hover:bg-opacity-20 ${sharedClasses}` - : `bg-${spectrum[i]} bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}` + : `${spectrumBg[i]} bg-opacity-50 hover:bg-opacity-100 ${sharedClasses}` } href={`/${page.s}`} title={page.t} diff --git a/sites/shared/components/social/icons.mjs b/sites/shared/components/social/icons.mjs index 43d18c3290e4..3f21d2fda7f7 100644 --- a/sites/shared/components/social/icons.mjs +++ b/sites/shared/components/social/icons.mjs @@ -1,5 +1,4 @@ import Link from 'next/link' -import { useTheme } from 'shared/hooks/use-theme.mjs' import { MsfIcon, HelpIcon, @@ -15,13 +14,28 @@ import { import { social } from 'config/social.mjs' import { siteConfig } from 'site/site.config.mjs' +// force tailwind compilation +const hoverClasses = [ + 'hover:text-spectrum-focus-0', + 'hover:text-spectrum-focus-1', + 'hover:text-spectrum-focus-2', + 'hover:text-spectrum-focus-3', + 'hover:text-spectrum-focus-4', + 'hover:text-spectrum-focus-5', + 'hover:text-spectrum-focus-6', + 'hover:text-spectrum-focus-7', + 'hover:text-spectrum-focus-8', + 'hover:text-spectrum-focus-9', + 'hover:text-spectrum-focus-10', +] + const iconClasses = (i) => ({ - className: `w-8 lg:w-12 h-8 lg:h-12 hover:text-neutral-content ${i}`, + className: `w-8 lg:w-12 h-8 lg:h-12 text-spectrum-${i} ${hoverClasses[i]}`, }) -export const socialList = (spectrum) => ({ +export const socialList = { MSF: { - icon: , + icon: , href: siteConfig.tld === 'org' ? '/docs/various/pledge/' @@ -30,58 +44,57 @@ export const socialList = (spectrum) => ({ community: false, }, Discord: { - icon: , + icon: , href: social.Discord, community: true, }, Instagram: { - icon: , + icon: , href: social.Instagram, community: true, }, Facebook: { - icon: , + icon: , href: social.Facebook, community: true, }, GitHub: { - icon: , + icon: , href: social.GitHub, community: true, }, Reddit: { - icon: , + icon: , href: social.Reddit, community: true, }, Twitter: { - icon: , + icon: , href: social.Twitter, community: true, }, YouTube: { - icon: , + icon: , href: social.YouTube, community: true, }, 'Open Souce License: MIT': { - icon: , + icon: , href: 'https://github.com/freesewing/freesewing/blob/develop/LICENSE', community: false, }, 'Contact Information': { - icon: , + icon: , href: '/contact', community: false, }, -}) +} export const SocialIcons = () => { - const { spectrum } = useTheme() - const list = socialList(spectrum) + const list = socialList return Object.keys(list).map((item) => ( - + {list[item].icon} )) diff --git a/sites/shared/components/wordmark.mjs b/sites/shared/components/wordmark.mjs index 0094c2daa603..4267c34e6142 100644 --- a/sites/shared/components/wordmark.mjs +++ b/sites/shared/components/wordmark.mjs @@ -1,31 +1,17 @@ import Link from 'next/link' -import { useTheme } from 'shared/hooks/use-theme.mjs' - -export const colors = [ - 'red', - 'orange', - 'yellow', - 'lime', - 'green', - 'cyan', - 'blue', - 'indigo', - 'violet', - 'purple', -] export const InnerWordMark = () => ( - F - r - e - e - S - e - w - i - n - g + F + r + e + e + S + e + w + i + n + g ) diff --git a/sites/shared/config/tailwind.config.mjs b/sites/shared/config/tailwind.config.mjs index de4b5ab041a8..d7f98e77f477 100644 --- a/sites/shared/config/tailwind.config.mjs +++ b/sites/shared/config/tailwind.config.mjs @@ -1,25 +1,37 @@ // Handle themes import { themes } from '../themes/index.mjs' +import { colord } from 'colord' -const colors = [ - 'red', - 'orange', - 'yellow', - 'lime', - 'green', - 'teal', - 'cyan', - 'blue', - 'indigo', - 'violet', - 'purple', -] +// A color converter that only converts our custom colors to HSL +const toHSL = (key, color) => { + const parser = colord(color) + // only parse it if it's a color that daisyUI doesn't want anything to do with + if (!parser.isValid() || !key.match(/^--/)) return color + const hslArray = parser.toHsl() + return `${hslArray.h} ${hslArray.s}% ${hslArray.l}%` +} + +// convert all the colors to HSL so our little themed rainbow hack will work with opacities +// this is all because tailwind gives us their default color palate in hex, a very unhelpful format +// it's obnoxious to do this little bit of pre-processing, but it saves a lot of headache on +// importing themed colors into components later. +// Preserves the feel of putting colors into themes and styling html with semantic classes +const parsedThemes = {} +for (const theme in themes) { + parsedThemes[theme] = {} -const rainbow = { - rainbow: 'hsl(var(--rb))', + for (const c in themes[theme]) { + parsedThemes[theme][c] = toHSL(c, themes[theme][c]) + } } -for (let r = 0; r < colors.length; r++) { - rainbow[`rainbow-${colors[r]}`] = `var(--rb-${colors[r]})` + +// this is how Daisy UI hands colors to Tailwind, but they only process their set names and we have more we want to use +const toTWColor = (varName) => `hsl(var(--fs-${varName}) / )` +const customColors = {} +for (let r = 0; r < 11; r++) { + customColors[`spectrum-${r}`] = toTWColor(`sp-${r}`) + customColors[`spectrum-focus-${r}`] = toTWColor(`spf-${r}`) + if (r < 5) customColors[`rating-${r}`] = toTWColor(`rt-${r}`) } export default { @@ -37,7 +49,7 @@ export default { plugins: [require('daisyui'), require('tailwindcss/nesting')], daisyui: { styled: true, - themes: [themes], + themes: [parsedThemes], base: true, utils: true, logs: true, @@ -48,7 +60,7 @@ export default { aspectRatio: { '9/16': '9 / 16', }, - colors: rainbow, + colors: customColors, }, }, } diff --git a/sites/shared/hooks/use-theme.mjs b/sites/shared/hooks/use-theme.mjs index a81fe18f1e50..0e41541e6214 100644 --- a/sites/shared/hooks/use-theme.mjs +++ b/sites/shared/hooks/use-theme.mjs @@ -1,4 +1,4 @@ -import { spectrum, rating, stripe } from 'shared/themes/index.mjs' +import { stripe } from 'shared/themes/index.mjs' import createPersistedState from 'use-persisted-state' const usePersistedTheme = createPersistedState('fs-theme') @@ -18,8 +18,6 @@ export const useTheme = () => { return { theme: theme[0], setTheme: theme[1], - spectrum: spectrum[theme[0]], - rating: rating[theme[0]], stripe: stripe[theme[0]], } } diff --git a/sites/shared/themes/index.mjs b/sites/shared/themes/index.mjs index e81e406d2144..0a8be7206d50 100644 --- a/sites/shared/themes/index.mjs +++ b/sites/shared/themes/index.mjs @@ -1,15 +1,11 @@ // This is CJS because Tailwind does not (yet) support ESM -import { theme as light, spectrum as lightSpectrum, rating as lightRating } from './light.mjs' -import { theme as dark, spectrum as darkSpectrum, rating as darkRating } from './dark.mjs' -import { theme as hax0r, spectrum as hax0rSpectrum, rating as hax0rRating } from './hax0r.mjs' -import { theme as lgbtq, spectrum as lgbtqSpectrum, rating as lgbtqRating } from './lgbtq.mjs' -import { theme as pastel, spectrum as pastelSpectrum, rating as pastelRating } from './pastel.mjs' -import { theme as aqua, spectrum as aquaSpectrum, rating as aquaRating } from './aqua.mjs' -import { - theme as monochrome, - spectrum as monochromeSpectrum, - rating as monochromeRating, -} from './monochrome.mjs' +import { theme as light } from './light.mjs' +import { theme as dark } from './dark.mjs' +import { theme as hax0r } from './hax0r.mjs' +import { theme as lgbtq } from './lgbtq.mjs' +import { theme as pastel } from './pastel.mjs' +import { theme as aqua } from './aqua.mjs' +import { theme as monochrome } from './monochrome.mjs' export const themes = { light, @@ -21,26 +17,6 @@ export const themes = { pastel, } -export const spectrum = { - light: lightSpectrum, - dark: darkSpectrum, - aqua: aquaSpectrum, - hax0r: hax0rSpectrum, - lgbtq: lgbtqSpectrum, - monochrome: monochromeSpectrum, - pastel: pastelSpectrum, -} - -export const rating = { - light: lightRating, - dark: darkRating, - aqua: aquaRating, - hax0r: hax0rRating, - lgbtq: lgbtqRating, - monochrome: monochromeRating, - pastel: pastelRating, -} - const themeToStripeTheme = (theme) => ({ theme: theme.stripeTheme, variables: { diff --git a/sites/shared/themes/light.mjs b/sites/shared/themes/light.mjs index 28c4bf71fc9a..f2dc9e6c6c82 100644 --- a/sites/shared/themes/light.mjs +++ b/sites/shared/themes/light.mjs @@ -15,19 +15,42 @@ * For a full list, see: https://tailwindcss.com/docs/customizing-colors */ import colors from 'tailwindcss/colors' +const primary = colors.purple['900'] +// const rainbow = [ +// colors.red['300'], +// colors.orange['300'], +// colors.yellow['300'], +// colors.lime['300'], +// colors.green['300'], +// colors.teal['300'], +// colors.cyan['300'], +// colors.blue['300'], +// colors.indigo['300'], +// colors.violet['300'], +// colors.purple['300'] +// ] /* - * Spetrum is an array of 11 color names from the tailwind colors that - * will be used when we want to spread colors across a spectrum. + * Spectrum is 11 color names from the tailwind colors that are mapped to indexed css vars starting with --fs-sp. + * They will be used when we want to spread colors across a spectrum. * It's what creates a rainbow header/footer. + * In this theme, the whole spectrum is purple */ -export const spectrum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(() => 'violet-300') +const spectrum = {} +for (let s = 0; s < 11; s++) { + spectrum[`--fs-sp-${s}`] = colors.violet['300'] + spectrum[`--fs-spf-${s}`] = colors.orange['300'] +} /* - * Rathing is an array of 5 color names from the tailwind colors that - * are used to color code ratings (like difficulty and so on) + * Rating is 5 color names from the tailwind colors that are mapped to indexed css vars starting with --fs-rt. + * They are used to color code ratings (like difficulty and so on) + * In this theme we do not color code ratings. they are all the primary color */ -export const rating = ['green-500', 'yellow-400', 'amber-500', 'orange-500', 'red-500'] +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} /* * This export is the Tailwind theme @@ -66,7 +89,7 @@ export const theme = { 'base-content': colors.neutral['950'], // primary: The main brand color and color of the primary button - primary: colors.purple['900'], + primary, // primary-focus: The :hover color for the primary button 'primary-focus': colors.purple['800'], // primary-content: The text color on a primary button @@ -96,19 +119,19 @@ export const theme = { // neutral-content: The text color on neutral backgrounds 'neutral-content': colors.neutral['50'], - // colors for the rainbows around the site - '--rb': colors.neutral['50'], - '--rb-red': colors.red['300'], - '--rb-orange': colors.orange['300'], - '--rb-yellow': colors.yellow['300'], - '--rb-lime': colors.lime['300'], - '--rb-green': colors.green['300'], - '--rb-teal': colors.teal['300'], - '--rb-cyan': colors.cyan['300'], - '--rb-blue': colors.blue['300'], - '--rb-indigo': colors.indigo['300'], - '--rb-violet': colors.violet['300'], - '--rb-purple': colors.purple['300'], + // // colors for the rainbows around the site + // '--rb': colors.neutral['50'], + // '--rb-red': colors.red['300'], + // '--rb-orange': colors.orange['300'], + // '--rb-yellow': colors.yellow['300'], + // '--rb-lime': colors.lime['300'], + // '--rb-green': colors.green['300'], + // '--rb-teal': colors.teal['300'], + // '--rb-cyan': colors.cyan['300'], + // '--rb-blue': colors.blue['300'], + // '--rb-indigo': colors.indigo['300'], + // '--rb-violet': colors.violet['300'], + // '--rb-purple': colors.purple['300'], // info: Used rarely, can be another color best somewhat neutral looking // and should work with the default text color @@ -322,4 +345,10 @@ export const theme = { * https://stripe.com/docs/elements/appearance-api */ stripeTheme: 'stripe', + + /** + * Add the spectrum and ratings vars last so they can pick up on other ones + */ + ...spectrum, + ...rating, } From 7a2400a8b8202a8db8182203665f52509b793a13 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Fri, 4 Aug 2023 19:04:46 +0000 Subject: [PATCH 20/28] visual accessability site and lab --- sites/org/components/header/index.mjs | 41 +++------ .../animations/how-does-it-work.mjs | 85 ++++++++++++------- sites/shared/components/collapse.mjs | 2 +- sites/shared/components/header.mjs | 40 ++++++--- .../shared/components/navigation/primary.mjs | 6 +- .../shared/components/navigation/sitenav.mjs | 21 ++--- sites/shared/components/sets/measie-input.mjs | 25 +++--- .../workbench/menus/shared/inputs.mjs | 9 +- .../views/inspect/inspector/path.mjs | 12 ++- .../views/inspect/inspector/shared.mjs | 2 +- .../workbench/views/test/options.mjs | 2 +- sites/shared/components/wrappers/header.mjs | 1 + sites/shared/config/tailwind.config.mjs | 2 +- 13 files changed, 129 insertions(+), 119 deletions(-) diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs index db983339605f..ff6aba3321f0 100644 --- a/sites/org/components/header/index.mjs +++ b/sites/org/components/header/index.mjs @@ -36,35 +36,25 @@ const NavIcons = ({ setModal, setSearch }) => { setModal()} label={t('header:menu')} - color={spectrum[0]} + color={0} extraClasses="md:px-4" > - + - + - + @@ -73,41 +63,32 @@ const NavIcons = ({ setModal, setSearch }) => { - + - + - setModal()} - label={t('header:theme')} - color={spectrum[8]} - > + setModal()} label={t('header:theme')} color={8}> setModal()} label={t('header:language')} - color={spectrum[9]} + color={9} > setSearch(true)} label={t('header:search')} - color={spectrum[10]} + color={10} extraClasses="md:px-4" > diff --git a/sites/shared/components/animations/how-does-it-work.mjs b/sites/shared/components/animations/how-does-it-work.mjs index 92811dbcccca..e5e5e31c6c46 100644 --- a/sites/shared/components/animations/how-does-it-work.mjs +++ b/sites/shared/components/animations/how-does-it-work.mjs @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react' +import { useState, useEffect, useRef } from 'react' import { useTranslation } from 'next-i18next' import { AaronFront, AaronBack } from 'shared/components/designs/linedrawings/aaron.mjs' import { BruceFront, BruceBack } from 'shared/components/designs/linedrawings/bruce.mjs' @@ -8,16 +8,37 @@ import { WahidFront, WahidBack } from 'shared/components/designs/linedrawings/wa export const ns = ['homepage'] const lineDrawings = [ - , - , - , - , - , - , - , - , + AaronFront, + AaronBack, + BruceFront, + BruceBack, + SimonFront, + SimonBack, + WahidFront, + WahidBack, ] +const LineDrawing = ({ i }) => { + const [Drawing, setDrawing] = useState(() => lineDrawings[i]) + const [opacity, setOpacity] = useState(0) + + useEffect(() => { + setOpacity(0) + setTimeout(() => { + setDrawing(() => lineDrawings[i]) + }, 700) + }, [i]) + + useEffect(() => { + setTimeout(() => setOpacity(100), 700) + }, [Drawing]) + return ( + + ) +} + const patternTweaks = [ { const { t } = useTranslation(ns) const [step, setStep] = useState(0) - const [halfStep, setHalfStep] = useState(0) - + const lineDrawing = useRef(lineDrawings[0]) + // const [halfStep, setHalfStep] = useState(0) + const halfStep = 0 useEffect(() => { - setTimeout(() => { - if (step > 6) setStep(0) - else setStep(step + 1) - if (halfStep > 7) setHalfStep(0) - else setHalfStep(halfStep + 0.5) - }, 800) - }, [step]) + const intervalId = setInterval(() => { + setStep((curStep) => { + if (curStep > 6) return 0 + return curStep + 1 + }) + + console.log(step) + // setHalfStep((curHalf) => { + // if (curHalf > 7) return 0 + // return curHalf + 0.5 + // }) + }, 5000) + + return () => clearInterval(intervalId) + }) return (
- {slides.map((i) => ( -
-
- {lineDrawings[i]} -
-
- ))} +
+ +
@@ -133,7 +154,7 @@ export const HowDoesItWorkAnimation = () => { <div key={i} className={`duration-700 ease-in-out transition-all ${ - Math.floor(halfStep) === i ? 'opacity-1' : 'opacity-0' + halfStep === i ? 'opacity-1' : 'opacity-0' } absolute top-0 text-center w-full`} > <div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center"> @@ -148,7 +169,7 @@ export const HowDoesItWorkAnimation = () => { <div className="relative w-full"> <div className="relative h-96 overflow-hidden"> <div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center"> - <Pattern key={step} i={step} /> + <Pattern i={step} /> </div> <Nr nr={3} /> <Title txt={t('customizeYourPattern')} /> diff --git a/sites/shared/components/collapse.mjs b/sites/shared/components/collapse.mjs index c89b24b9de60..b045e1a022bf 100644 --- a/sites/shared/components/collapse.mjs +++ b/sites/shared/components/collapse.mjs @@ -58,7 +58,7 @@ export const Collapse = ({ <div className={`p-2 lg:p-4 border-solid border border-${color} ${ !bottom ? 'rounded-b-lg' : '' - } text-${color}-content ${!top ? 'rounded-t-lg' : ''}`} + } ${!top ? 'rounded-t-lg' : ''}`} > {children} </div> diff --git a/sites/shared/components/header.mjs b/sites/shared/components/header.mjs index 3c21f687ac86..7849f4d03067 100644 --- a/sites/shared/components/header.mjs +++ b/sites/shared/components/header.mjs @@ -1,18 +1,18 @@ import Link from 'next/link' // can't use interpolation or these won't be compiled -const hoverColors = [ - 'hover:bg-spectrum-0', - 'hover:bg-spectrum-1', - 'hover:bg-spectrum-2', - 'hover:bg-spectrum-3', - 'hover:bg-spectrum-4', - 'hover:bg-spectrum-5', - 'hover:bg-spectrum-6', - 'hover:bg-spectrum-7', - 'hover:bg-spectrum-8', - 'hover:bg-spectrum-9', - 'hover:bg-spectrum-10', +const bgColors = [ + 'bg-spectrum-0', + 'bg-spectrum-1', + 'bg-spectrum-2', + 'bg-spectrum-3', + 'bg-spectrum-4', + 'bg-spectrum-5', + 'bg-spectrum-6', + 'bg-spectrum-7', + 'bg-spectrum-8', + 'bg-spectrum-9', + 'bg-spectrum-10', ] const textColors = [ 'text-spectrum-0', @@ -28,6 +28,20 @@ const textColors = [ 'text-spectrum-10', ] +const hoverColors = [ + 'hover:bg-spectrum-0', + 'hover:bg-spectrum-1', + 'hover:bg-spectrum-2', + 'hover:bg-spectrum-3', + 'hover:bg-spectrum-4', + 'hover:bg-spectrum-5', + 'hover:bg-spectrum-6', + 'hover:bg-spectrum-7', + 'hover:bg-spectrum-8', + 'hover:bg-spectrum-9', + 'hover:bg-spectrum-10', +] + export const iconSize = 'h-10 w-10 lg:h-12 lg:w-12' export const NavButton = ({ @@ -44,7 +58,7 @@ export const NavButton = ({ `${hoverColors[color]} ${ textColors[color] } hover:text-neutral grow xl:grow-0 relative ${extraClasses} - ${active ? 'font-heavy' : ''}` + ${active ? `font-heavy ${bgColors[color]}` : ''}` const span = <span className="font-bold text-lg hidden md:block md:pt-1 lg:pt-0">{label}</span> return onClick ? ( diff --git a/sites/shared/components/navigation/primary.mjs b/sites/shared/components/navigation/primary.mjs index 222bff3055b9..58be7cba2d9a 100644 --- a/sites/shared/components/navigation/primary.mjs +++ b/sites/shared/components/navigation/primary.mjs @@ -238,11 +238,7 @@ export const MainSections = () => { const act = isActive(page.s, slug) const txt = ( <> - {icons[page.s] ? ( - icons[page.s](`w-6 h-6 ${act ? 'text-base-100 opacity-70' : ''}`) - ) : ( - <BulletIcon fill={act} className={`w-6 h-6 ${act ? 'text-base-100 opacity-70' : ''}`} /> - )} + {icons[page.s] ? icons[page.s](`w-6 h-6`) : <BulletIcon fill={act} className={`w-6 h-6`} />} <span className={`font-bold ${act ? 'text-secondary-content' : ''}`}>{page.t}</span> </> ) diff --git a/sites/shared/components/navigation/sitenav.mjs b/sites/shared/components/navigation/sitenav.mjs index 36a3fe1933ab..c1d0fe345f5c 100644 --- a/sites/shared/components/navigation/sitenav.mjs +++ b/sites/shared/components/navigation/sitenav.mjs @@ -52,7 +52,7 @@ const SectionLink = ({ skey, tree, slug }) => <> <Link href={`/${tree[skey].s}`} - className="pl-2 border-l-2 py-2 block w-full hover:border-secondary hover:bg-secondary hover:bg-opacity-10" + className="pl-2 border-l-2 py-2 block w-full hover:border-secondary hover:bg-secondary hover:bg-opacity-20" > {tree[skey].t} </Link> @@ -61,7 +61,7 @@ const SectionLink = ({ skey, tree, slug }) => ) : ( <Link href={`/${tree[skey].s}`} - className="pl-2 border-l-2 py-2 block w-full hover:border-secondary hover:bg-secondary hover:bg-opacity-10" + className="pl-2 border-l-2 py-2 block w-full hover:border-secondary hover:bg-secondary hover:bg-opacity-20" > {tree[skey].t} </Link> @@ -87,7 +87,7 @@ const Section = ({ <span className={ 'pl-2 font-medium border-l-2 py-2 block w-full border-secondary ' + - 'bg-secondary bg-opacity-10' + 'bg-secondary bg-opacity-30' } > {page.t} @@ -115,15 +115,15 @@ const MainLink = ({ }) => { const classes = '' + - 'break-all py-2 px-2 block w-full font-bold text-lg ' + + 'break-normal py-2 px-2 block w-full font-bold text-lg ' + 'flex flex-row items-start gap-0.5 lg:gap-1 border-l-2' return s === slug ? ( - <span className={`${classes} border-secondary bg-secondary bg-opacity-10`}>{t}</span> + <span className={`${classes} border-secondary bg-secondary bg-opacity-30`}>{t}</span> ) : ( <Link href={`/${s}`} - className={`${classes} border-transparent hover:border-secondary hover:bg-secondary hover:bg-opacity-10`} + className={`${classes} border-transparent hover:border-secondary hover:bg-secondary hover:bg-opacity-30`} > {t} </Link> @@ -247,11 +247,7 @@ export const MainSections = () => { const act = isSlugPart(page.s, slug) const txt = ( <> - {icons[page.s] ? ( - icons[page.s](`w-6 h-6 ${act ? 'text-base-100 opacity-70' : ''}`) - ) : ( - <BulletIcon fill={act} className={`w-6 h-6 ${act ? 'text-base-100 opacity-70' : ''}`} /> - )} + {icons[page.s] ? icons[page.s](`w-6 h-6`) : <BulletIcon fill={act} className={`w-6 h-6`} />} <span className={`font-bold ${act ? 'text-secondary-content' : ''}`}>{page.t}</span> </> ) @@ -261,8 +257,7 @@ export const MainSections = () => { {act ? ( <span title={page.t} - className={`flex flex-row gap-4 items-center text-secondary-content - hover:text-base-content bg-secondary p-2 px-4 rounded bg-base-200 rounded-none`} + className={`flex flex-row gap-4 items-center text-secondary-content bg-secondary p-2 px-4 rounded bg-base-200 rounded-none`} > {txt} </span> diff --git a/sites/shared/components/sets/measie-input.mjs b/sites/shared/components/sets/measie-input.mjs index dfc832c3a7de..6352f69c21ab 100644 --- a/sites/shared/components/sets/measie-input.mjs +++ b/sites/shared/components/sets/measie-input.mjs @@ -4,6 +4,7 @@ import { Collapse } from 'shared/components/collapse.mjs' import { PlusIcon, EditIcon } from 'shared/components/icons.mjs' import { NumberInput } from 'shared/components/workbench/menus/shared/inputs.mjs' import { useState, useCallback } from 'react' +import { NoIcon } from '../icons.mjs' export const ns = ['account'] const Mval = ({ m, val = false, imperial = false, className = '' }) => @@ -27,7 +28,7 @@ const heightClasses = { } const fractionClasses = - 'w-full border-2 border-solid border-base-100 hover:border-secondary bg-secondary rounded bg-opacity-50 hover:bg-opacity-100' + 'w-full border-4 border-solid border-base-200 hover:border-secondary bg-secondary rounded bg-opacity-50 hover:bg-opacity-100' const FractionButtons = ({ t, fraction }) => ( <div className="flex flex-row mt-1 content-center items-center justify-around"> @@ -147,18 +148,18 @@ export const MeasieInput = ({ <div className="flex items-center gap-4 flex-wrap mx-auto"> <label className="shrink-0 grow max-w-full"> {children} - <span className="input-group"> + <span className="input-group focus-within:outline focus-within:ring outline-2 outline-offset-4 outline-primary-focus rounded-lg"> <NumberInput - className={`border-r-0 w-full`} + className={`border-r-0 w-full border-4 focus:outline-0`} value={val} onUpdate={update} onMount={setValid} /> <span - className={`bg-transparent border-y w-20 - ${valid === false && 'border-error text-neutral-content'} + className={`bg-transparent border-y border-y-4 w-20 + ${valid === false && 'border-error text-neutral-content'} ${valid && 'border-success text-neutral-content'} - ${valid === null && 'border-base-200 text-base-content'} + ${valid === null && 'text-base-content border-primary'} `} > <Mval @@ -170,20 +171,22 @@ export const MeasieInput = ({ </span> <span role="img" - className={`bg-transparent border-y + className={`bg-transparent border-y border-y-4 ${valid === false && 'border-error text-neutral-content'} ${valid && 'border-success text-neutral-content'} - ${valid === null && 'border-base-200 text-base-content'} + ${valid === null && 'border-primary text-base-content'} `} > - {valid && '👍'} - {valid === false && '🤔'} + <span className={`bg-transparent ${valid === null && 'invisible'}`}> + {' '} + {valid ? '👍' : '🤔'} + </span> </span> <span className={`w-14 text-center ${valid === false && 'bg-error text-neutral-content'} ${valid && 'bg-success text-neutral-content'} - ${valid === null && 'bg-base-200 text-base-content'} + ${valid === null && 'bg-primary text-primary-content'} `} > {isDegree ? '°' : mset.imperial ? 'in' : 'cm'} diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs index bceef2aad834..0ce6d56c3f58 100644 --- a/sites/shared/components/workbench/menus/shared/inputs.mjs +++ b/sites/shared/components/workbench/menus/shared/inputs.mjs @@ -112,16 +112,17 @@ export const NumberInput = ({ useEffect(() => { if (typeof onMount === 'function') { - console.log('mount', valid.current) - onMount(valid) + onMount(valid.current) } - }, [onMount]) + }, [onMount, valid]) return ( <input type="text" inputMode="number" - className={`input ${className || 'input-sm input-bordered grow text-base-content'} + className={`input input-bordered input-primary ${ + className || 'input-sm grow text-base-content' + } ${valid.current === false && 'input-error'} ${valid.current && 'input-success'} `} diff --git a/sites/shared/components/workbench/views/inspect/inspector/path.mjs b/sites/shared/components/workbench/views/inspect/inspector/path.mjs index b551c0537b47..afd9604ec665 100644 --- a/sites/shared/components/workbench/views/inspect/inspector/path.mjs +++ b/sites/shared/components/workbench/views/inspect/inspector/path.mjs @@ -5,12 +5,10 @@ import { formatMm } from 'shared/utils.mjs' import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs' const Op = ({ op, len, i }) => ( - <tr - className={`${['move', 'close'].includes(op.type) ? 'text-base-300' : ''} bg-primary w-full ${ - i % 2 === 0 ? 'bg-opacity-0' : 'bg-opacity-10' - }`} - > - <td className="text-right px-1">{op.type}</td> + <tr className={`bg-primary w-full bg-opacity-10 odd:bg-opacity-0`}> + <td className={`${['move', 'close'].includes(op.type) ? 'italic' : ''} text-right px-1`}> + {op.type} + </td> <td className="text-center px-1">{pointCoords(op.to)}</td> <td className="text-center px-1">{op.cp1 ? pointCoords(op.cp1) : ''}</td> <td className="text-center px-1">{op.cp2 ? pointCoords(op.cp2) : ''}</td> @@ -138,7 +136,7 @@ const InspectPath = ({ stackName, pathName, path, t, inspector }) => { d={path.d} {...utils.getProps(path)} className={`hover:opacity-20 text-primary hover:cursor-pointer ${ - inspector.data.reveal[id] ? 'pulse-stroke stroke-3xl' : 'opacity-0 stroko-0 stroke-5xl' + inspector.data.reveal[id] ? 'pulse-stroke stroke-3xl' : 'opacity-0 stroke-0 stroke-5xl' }`} onClick={() => inspector.show(pathInfo({ id, pathName, stackName, path, t, inspector }))} markerStart="none" diff --git a/sites/shared/components/workbench/views/inspect/inspector/shared.mjs b/sites/shared/components/workbench/views/inspect/inspector/shared.mjs index 022ba57e3256..14e56d381ad1 100644 --- a/sites/shared/components/workbench/views/inspect/inspector/shared.mjs +++ b/sites/shared/components/workbench/views/inspect/inspector/shared.mjs @@ -5,7 +5,7 @@ export const KeyValTable = ({ rows }) => ( <tbody> {rows.map((row, i) => ( <tr key={i}> - <td className="font-bold p-0 text-right">{row[0]}:</td> + <td className="font-bold p-0 text-right ">{row[0]}:</td> <td className="px-1">{row[1]}</td> </tr> ))} diff --git a/sites/shared/components/workbench/views/test/options.mjs b/sites/shared/components/workbench/views/test/options.mjs index a825408a0a5f..939745add05b 100644 --- a/sites/shared/components/workbench/views/test/options.mjs +++ b/sites/shared/components/workbench/views/test/options.mjs @@ -41,7 +41,7 @@ export const SampleItem = ({ name, passProps, t, updateFunc }) => { ref={input} type="radio" checked={checked} - className="radio radio-primary mr-2 radio-sm" + className="radio checked:radio-primary radio-secondary mr-2 radio-sm" readOnly /> <span className="ml-2">{t([name + '.t', name])}</span> diff --git a/sites/shared/components/wrappers/header.mjs b/sites/shared/components/wrappers/header.mjs index e355198e16ad..713d746eebaf 100644 --- a/sites/shared/components/wrappers/header.mjs +++ b/sites/shared/components/wrappers/header.mjs @@ -4,6 +4,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs' import { Ribbon } from 'shared/components/ribbon.mjs' export const HeaderWrapper = ({ show, children }) => { + // FIXME active section highlight const { loading } = useContext(LoadingContext) return ( <header diff --git a/sites/shared/config/tailwind.config.mjs b/sites/shared/config/tailwind.config.mjs index d7f98e77f477..f173d8fb307b 100644 --- a/sites/shared/config/tailwind.config.mjs +++ b/sites/shared/config/tailwind.config.mjs @@ -6,7 +6,7 @@ import { colord } from 'colord' const toHSL = (key, color) => { const parser = colord(color) // only parse it if it's a color that daisyUI doesn't want anything to do with - if (!parser.isValid() || !key.match(/^--/)) return color + if (!parser.isValid() || !key.match(/^--fs/)) return color const hslArray = parser.toHsl() return `${hslArray.h} ${hslArray.s}% ${hslArray.l}%` } From f487cb5e52364544e1ae713713b9227823145fde Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Fri, 4 Aug 2023 23:10:06 +0000 Subject: [PATCH 21/28] add spectrum implementation to the rest of the themes --- sites/shared/components/social/icons.mjs | 30 +++++++--------- sites/shared/themes/aqua.mjs | 20 +++++++++-- sites/shared/themes/dark.mjs | 10 +++--- sites/shared/themes/hax0r.mjs | 21 ++++++++--- sites/shared/themes/lgbtq.mjs | 44 ++++++++++++++++-------- sites/shared/themes/monochrome.mjs | 21 ++++++++--- sites/shared/themes/pastel.mjs | 20 +++++++++-- 7 files changed, 117 insertions(+), 49 deletions(-) diff --git a/sites/shared/components/social/icons.mjs b/sites/shared/components/social/icons.mjs index 3f21d2fda7f7..6f1d68fb9f3f 100644 --- a/sites/shared/components/social/icons.mjs +++ b/sites/shared/components/social/icons.mjs @@ -14,25 +14,11 @@ import { import { social } from 'config/social.mjs' import { siteConfig } from 'site/site.config.mjs' -// force tailwind compilation -const hoverClasses = [ - 'hover:text-spectrum-focus-0', - 'hover:text-spectrum-focus-1', - 'hover:text-spectrum-focus-2', - 'hover:text-spectrum-focus-3', - 'hover:text-spectrum-focus-4', - 'hover:text-spectrum-focus-5', - 'hover:text-spectrum-focus-6', - 'hover:text-spectrum-focus-7', - 'hover:text-spectrum-focus-8', - 'hover:text-spectrum-focus-9', - 'hover:text-spectrum-focus-10', -] - const iconClasses = (i) => ({ - className: `w-8 lg:w-12 h-8 lg:h-12 text-spectrum-${i} ${hoverClasses[i]}`, + className: `w-8 lg:w-12 h-8 lg:h-12 text-spectrum-${i} hover:text-neutral`, }) +const outlineClasses = (i) => `hover:bg-spectrum-${i} rounded-full p-2 lg:p-4` export const socialList = { MSF: { icon: <MsfIcon {...iconClasses(0)} fill />, @@ -42,51 +28,61 @@ export const socialList = { : 'https://freesewing.org/docs/various/pledge', name: 'Doctors Without Borders / Médecins Sans Frontières', community: false, + className: outlineClasses(0), }, Discord: { icon: <DiscordIcon {...iconClasses(1)} />, href: social.Discord, community: true, + className: outlineClasses(1), }, Instagram: { icon: <InstagramIcon {...iconClasses(2)} />, href: social.Instagram, community: true, + className: outlineClasses(2), }, Facebook: { icon: <FacebookIcon {...iconClasses(3)} />, href: social.Facebook, community: true, + className: outlineClasses(3), }, GitHub: { icon: <GitHubIcon {...iconClasses(4)} />, href: social.GitHub, community: true, + className: outlineClasses(4), }, Reddit: { icon: <RedditIcon {...iconClasses(5)} />, href: social.Reddit, community: true, + className: outlineClasses(5), }, Twitter: { icon: <TwitterIcon {...iconClasses(6)} />, href: social.Twitter, community: true, + className: outlineClasses(6), }, YouTube: { icon: <YouTubeIcon {...iconClasses(7)} fill stroke={0} />, href: social.YouTube, community: true, + className: outlineClasses(7), }, 'Open Souce License: MIT': { icon: <OpenSourceIcon {...iconClasses(8)} />, href: 'https://github.com/freesewing/freesewing/blob/develop/LICENSE', community: false, + className: outlineClasses(8), }, 'Contact Information': { icon: <HelpIcon {...iconClasses(9)} />, href: '/contact', community: false, + className: outlineClasses(9), }, } @@ -94,7 +90,7 @@ export const SocialIcons = () => { const list = socialList return Object.keys(list).map((item) => ( - <Link key={item} href={list[item].href} title={item}> + <Link key={item} href={list[item].href} title={item} className={list[item].className}> {list[item].icon} </Link> )) diff --git a/sites/shared/themes/aqua.mjs b/sites/shared/themes/aqua.mjs index fa975456d9ec..6b4d42af5255 100644 --- a/sites/shared/themes/aqua.mjs +++ b/sites/shared/themes/aqua.mjs @@ -1,12 +1,20 @@ import colors from 'tailwindcss/colors' +const primary = colors.indigo['400'] /* * See the light theme for an example with inline comments */ -export const spectrum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(() => 'blue-200') +const spectrum = {} +for (let s = 0; s < 11; s++) { + spectrum[`--fs-sp-${s}`] = colors.blue['200'] + spectrum[`--fs-spf-${s}`] = colors.indigo['500'] +} -export const rating = ['blue-300', 'blue-400', 'blue-500', 'blue-600', 'blue-700'] +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} export const theme = { fontFamily: @@ -15,7 +23,7 @@ export const theme = { 'base-200': colors.blue['100'], 'base-300': colors.blue['300'], 'base-content': colors.blue['900'], - primary: colors.indigo['400'], + primary, 'primary-focus': colors.indigo['500'], 'primary-content': colors.indigo['900'], secondary: colors.sky['700'], @@ -121,4 +129,10 @@ export const theme = { '--pattern-sample-9': colors.fuchsia['500'], '--pattern-sample-10': colors.rose['500'], stripeTheme: 'stripe', + + /** + * Add the spectrum and ratings vars last so they can pick up on other ones + */ + ...spectrum, + ...rating, } diff --git a/sites/shared/themes/dark.mjs b/sites/shared/themes/dark.mjs index 83b87b798dda..4a6cbb9e488e 100644 --- a/sites/shared/themes/dark.mjs +++ b/sites/shared/themes/dark.mjs @@ -1,8 +1,10 @@ import colors from 'tailwindcss/colors' +const primary = colors.violet['300'] -export const spectrum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(() => 'violet-400') - -export const rating = ['green-400', 'yellow-400', 'amber-500', 'orange-500', 'red-500'] +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} export const theme = { fontFamily: @@ -13,7 +15,7 @@ export const theme = { 'base-300': colors.neutral['600'], 'base-content': colors.neutral['300'], - primary: colors.violet['300'], + primary, 'primary-focus': colors.violet['400'], 'primary-content': colors.violet['950'], diff --git a/sites/shared/themes/hax0r.mjs b/sites/shared/themes/hax0r.mjs index 9d8519cd4e21..98bc28bfb7d2 100644 --- a/sites/shared/themes/hax0r.mjs +++ b/sites/shared/themes/hax0r.mjs @@ -1,14 +1,21 @@ import colors from 'tailwindcss/colors' - +const primary = colors.lime['700'] /* * See the light theme for an example with inline comments */ const bg = '#002808' -export const spectrum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(() => 'lime-500') +const spectrum = {} +for (let s = 0; s < 11; s++) { + spectrum[`--fs-sp-${s}`] = colors.lime['500'] + spectrum[`--fs-spf-${s}`] = colors.lime['600'] +} -export const rating = [0, 1, 2, 3, 4].map(() => 'lime-500') +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} export const theme = { fontFamily: `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`, @@ -16,7 +23,7 @@ export const theme = { 'base-200': colors.lime['900'], 'base-300': colors.lime['800'], 'base-content': colors.lime['500'], - primary: colors.lime['700'], + primary, 'primary-focus': colors.lime['600'], 'primary-content': colors.lime['50'], secondary: colors.lime['600'], @@ -110,4 +117,10 @@ export const theme = { '--pattern-stroke-3xl': '6px', '--pattern-stroke-4xl': '8px', stripeTheme: 'stripe', + + /** + * Add the spectrum and ratings vars last so they can pick up on other ones + */ + ...spectrum, + ...rating, } diff --git a/sites/shared/themes/lgbtq.mjs b/sites/shared/themes/lgbtq.mjs index dba664de130c..1f54cad79b36 100644 --- a/sites/shared/themes/lgbtq.mjs +++ b/sites/shared/themes/lgbtq.mjs @@ -1,24 +1,34 @@ import colors from 'tailwindcss/colors' +const primary = colors.sky['500'] /* * See the light theme for an example with inline comments */ -export const spectrum = [ - 'red-400', - 'orange-400', - 'yellow-400', - 'lime-400', - 'green-400', - 'teal-400', - 'cyan-400', - 'blue-400', - 'indigo-400', - 'violet-400', - 'purple-400', +const rainbow = [ + colors.red['300'], + colors.orange['300'], + colors.yellow['300'], + colors.lime['300'], + colors.green['300'], + colors.teal['300'], + colors.cyan['300'], + colors.blue['300'], + colors.indigo['300'], + colors.violet['300'], + colors.purple['300'], ] -export const rating = ['green-500', 'yellow-400', 'orange-500', 'red-500', 'pink-500'] +const spectrum = {} +for (let s = 0; s < 11; s++) { + spectrum[`--fs-sp-${s}`] = rainbow[s] + spectrum[`--fs-spf-${s}`] = rainbow[10 - s] +} + +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} export const theme = { fontFamily: @@ -27,7 +37,7 @@ export const theme = { 'base-200': colors.neutral['200'], 'base-300': colors.neutral['400'], 'base-content': colors.neutral['700'], - primary: colors.sky['500'], + primary, 'primary-focus': colors.sky['400'], 'primary-content': colors.sky['50'], secondary: colors.violet['500'], @@ -126,4 +136,10 @@ export const theme = { '--pattern-stroke-3xl': '6px', '--pattern-stroke-4xl': '8px', stripeTheme: 'stripe', + + /** + * Add the spectrum and ratings vars last so they can pick up on other ones + */ + ...spectrum, + ...rating, } diff --git a/sites/shared/themes/monochrome.mjs b/sites/shared/themes/monochrome.mjs index 4a32d476b861..8c638ebef37f 100644 --- a/sites/shared/themes/monochrome.mjs +++ b/sites/shared/themes/monochrome.mjs @@ -5,10 +5,17 @@ import colors from 'tailwindcss/colors' */ const color = colors.stone +const primary = color[800] -export const spectrum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(() => 'stone-300') - -export const rating = ['stone-400', 'stone-500', 'stone-600', 'stone-700', 'stone-800'] +const spectrum = {} +for (let s = 0; s < 11; s++) { + spectrum[`--fs-sp-${s}`] = color['300'] + spectrum[`--fs-spf-${s}`] = color['900'] +} +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} export const theme = { fontFamily: "Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;", @@ -16,7 +23,7 @@ export const theme = { 'base-200': color['100'], 'base-300': color['500'], 'base-content': color['900'], - primary: color['800'], + primary, 'primary-focus': color['900'], 'primary-content': color['50'], secondary: color['800'], @@ -122,4 +129,10 @@ export const theme = { '--pattern-sample-9': color['500'], '--pattern-sample-10': color['500'], stripeTheme: 'stripe', + + /** + * Add the spectrum and ratings vars last so they can pick up on other ones + */ + ...spectrum, + ...rating, } diff --git a/sites/shared/themes/pastel.mjs b/sites/shared/themes/pastel.mjs index 535eb6c3e0fa..ae4c4c5ceed7 100644 --- a/sites/shared/themes/pastel.mjs +++ b/sites/shared/themes/pastel.mjs @@ -1,12 +1,20 @@ import colors from 'tailwindcss/colors' +const primary = colors.indigo['300'] /* * See the light theme for an example with inline comments */ -export const spectrum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(() => 'indigo-300') +const spectrum = {} +for (let s = 0; s < 11; s++) { + spectrum[`--fs-sp-${s}`] = colors.indigo['300'] + spectrum[`--fs-spf-${s}`] = colors.indigo['400'] +} -export const rating = ['green-500', 'yellow-400', 'amber-500', 'orange-500', 'red-500'] +const rating = {} +for (let r = 0; r < 5; r++) { + rating[`--fs-rt-${r}`] = primary +} export const theme = { fontFamily: "'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;", @@ -14,7 +22,7 @@ export const theme = { 'base-200': colors.red['100'], 'base-300': colors.red['300'], 'base-content': colors.neutral['700'], - primary: colors.indigo['300'], + primary, 'primary-focus': colors.indigo['400'], 'primary-content': colors.indigo['800'], secondary: colors.pink['400'], @@ -120,4 +128,10 @@ export const theme = { '--pattern-sample-9': colors.fuchsia['500'], '--pattern-sample-10': colors.rose['500'], stripeTheme: 'stripe', + + /** + * Add the spectrum and ratings vars last so they can pick up on other ones + */ + ...spectrum, + ...rating, } From 988e2d3ff43d75eed6c8359388b7a847a22644cd Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Fri, 4 Aug 2023 23:21:24 +0000 Subject: [PATCH 22/28] slow down how-it-works animations --- .../animations/how-does-it-work.mjs | 94 +++++++++---------- 1 file changed, 45 insertions(+), 49 deletions(-) diff --git a/sites/shared/components/animations/how-does-it-work.mjs b/sites/shared/components/animations/how-does-it-work.mjs index e5e5e31c6c46..607a80ee5cd2 100644 --- a/sites/shared/components/animations/how-does-it-work.mjs +++ b/sites/shared/components/animations/how-does-it-work.mjs @@ -18,27 +18,6 @@ const lineDrawings = [ WahidBack, ] -const LineDrawing = ({ i }) => { - const [Drawing, setDrawing] = useState(() => lineDrawings[i]) - const [opacity, setOpacity] = useState(0) - - useEffect(() => { - setOpacity(0) - setTimeout(() => { - setDrawing(() => lineDrawings[i]) - }, 700) - }, [i]) - - useEffect(() => { - setTimeout(() => setOpacity(100), 700) - }, [Drawing]) - return ( - <Drawing - className={`h-72 md:h-96 duration-700 ease-in-out transition-opacity opacity-${opacity}`} - /> - ) -} - const patternTweaks = [ <path key={1} @@ -114,54 +93,71 @@ const Title = ({ txt }) => ( const slides = [0, 1, 2, 3, 4, 5, 6, 7] +const useCarousel = (i, items) => { + const [Item, setItem] = useState(() => items[i]) + const [opacity, setOpacity] = useState(0) + + useEffect(() => { + setOpacity(0) + setTimeout(() => { + setItem(() => items[i]) + setOpacity(100) + }, 700) + }, [i, items]) + + return { opacity, Item } +} + +const transitionClasses = 'duration-700 ease-in-out transition-opacity' +const LineDrawing = ({ i }) => { + const { Item, opacity } = useCarousel(Math.floor(i / 2), lineDrawings) + return ( + <div + className={`${transitionClasses} opacity-${opacity} + w-full flex flex-row items-center h-full overflow-hidden`} + > + <Item className="h-full" /> + </div> + ) +} + +const measieImages = slides.map((i) => `/img/models/model-${i}.png`) +const MeasiesImage = ({ i }) => { + const { Item, opacity } = useCarousel(Math.floor(i), measieImages) + return <img src={Item} className={`h-72 md:h-96 ${transitionClasses} opacity-${opacity}`} /> +} + export const HowDoesItWorkAnimation = () => { const { t } = useTranslation(ns) const [step, setStep] = useState(0) - const lineDrawing = useRef(lineDrawings[0]) - // const [halfStep, setHalfStep] = useState(0) - const halfStep = 0 + const [halfStep, setHalfStep] = useState(0) + useEffect(() => { const intervalId = setInterval(() => { setStep((curStep) => { - if (curStep > 6) return 0 + if (curStep === patternTweaks.length - 1) return 0 return curStep + 1 }) - console.log(step) - // setHalfStep((curHalf) => { - // if (curHalf > 7) return 0 - // return curHalf + 0.5 - // }) - }, 5000) + setHalfStep((curHalf) => { + if (curHalf > 7) return 0 + return curHalf + 0.5 + }) + }, 4000) return () => clearInterval(intervalId) }) return ( <div className="flex flex-col md:grid md:grid-cols-3"> - <div className="relative w-full"> - <div className="relative h-72 md:h-96 overflow-hidden"> - <div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center"> - <LineDrawing i={step} /> - </div> - </div> + <div className="relative w-full h-72 md:h-96 overflow-hidden"> + <LineDrawing i={step} /> <Nr nr={1} /> <Title txt={t('pickAnyDesign')} /> </div> <div className="relative w-full"> <div className="relative h-72 md:h-96 overflow-hidden"> - {slides.map((i) => ( - <div - key={i} - className={`duration-700 ease-in-out transition-all ${ - halfStep === i ? 'opacity-1' : 'opacity-0' - } absolute top-0 text-center w-full`} - > - <div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center"> - <img src={`/img/models/model-${i}.png`} className="h-72 md:h-96 shrink-0 px-8" /> - </div> - </div> - ))} + <MeasiesImage i={halfStep} /> <Nr nr={2} /> <Title txt={t('addASet')} /> </div> From bacfcf22acf3b9171a588d2d57e69f48fa63bf7b Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Sat, 5 Aug 2023 15:31:12 +0000 Subject: [PATCH 23/28] lint fixes --- sites/lab/components/layouts/bare.mjs | 5 ----- sites/org/components/header/index.mjs | 1 - .../components/animations/how-does-it-work.mjs | 16 ++++++++++------ sites/shared/components/navigation/sitenav.mjs | 2 +- sites/shared/components/sets/measie-input.mjs | 1 - .../workbench/menus/shared/inputs.mjs | 17 ++++++----------- .../workbench/menus/shared/values.mjs | 2 +- .../workbench/views/inspect/inspector/path.mjs | 2 +- .../components/workbench/views/view-header.mjs | 1 - 9 files changed, 19 insertions(+), 28 deletions(-) diff --git a/sites/lab/components/layouts/bare.mjs b/sites/lab/components/layouts/bare.mjs index fcc3bd668241..210b87858fca 100644 --- a/sites/lab/components/layouts/bare.mjs +++ b/sites/lab/components/layouts/bare.mjs @@ -1,10 +1,5 @@ -import { useRouter } from 'next/router' - export const ns = [''] export const BareLayout = ({ children = [] }) => { - const router = useRouter() - const slug = router.asPath.slice(1) - return <>{children}</> } diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs index ff6aba3321f0..45ef0bd06ddc 100644 --- a/sites/org/components/header/index.mjs +++ b/sites/org/components/header/index.mjs @@ -29,7 +29,6 @@ export const ns = ['header', 'sections', ...themeNs, ...localeNs] const NavIcons = ({ setModal, setSearch }) => { const { t } = useTranslation(['header']) - const { spectrum } = useTheme() return ( <> diff --git a/sites/shared/components/animations/how-does-it-work.mjs b/sites/shared/components/animations/how-does-it-work.mjs index 90e41c2bb578..1e8abd2b8403 100644 --- a/sites/shared/components/animations/how-does-it-work.mjs +++ b/sites/shared/components/animations/how-does-it-work.mjs @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react' +import { useState, useEffect } from 'react' import { useTranslation } from 'next-i18next' import { AaronFront } from 'shared/components/designs/linedrawings/aaron.mjs' import { BruceFront, BruceBack } from 'shared/components/designs/linedrawings/bruce.mjs' @@ -10,13 +10,13 @@ export const ns = ['homepage'] const lineDrawings = [ AaronFront, - AaronBack, BruceFront, BruceBack, SimonFront, SimonBack, WahidFront, - WahidBack + WahidBack, + AlbertFront, ] const patternTweaks = [ @@ -92,16 +92,20 @@ const Title = ({ txt }) => ( </div> ) -const slides = [0, 1, 2, 3, 4, 5, 6, 7] - +/** A display switcher that handles its own transition animations */ const useCarousel = (i, items) => { const [Item, setItem] = useState(() => items[i]) const [opacity, setOpacity] = useState(0) + // when the index changes, switch the opacity useEffect(() => { + // set to 0 setOpacity(0) + // wait for the animation to end setTimeout(() => { + // set the next item setItem(() => items[i]) + // set the opacity back to full setOpacity(100) }, 700) }, [i, items]) @@ -122,7 +126,7 @@ const LineDrawing = ({ i }) => { ) } -const measieImages = slides.map((i) => `/img/models/model-${i}.png`) +const measieImages = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => `/img/models/model-${i}.png`) const MeasiesImage = ({ i }) => { const { Item, opacity } = useCarousel(Math.floor(i), measieImages) return <img src={Item} className={`h-72 md:h-96 ${transitionClasses} opacity-${opacity}`} /> diff --git a/sites/shared/components/navigation/sitenav.mjs b/sites/shared/components/navigation/sitenav.mjs index c1d0fe345f5c..f5a4ed6d285a 100644 --- a/sites/shared/components/navigation/sitenav.mjs +++ b/sites/shared/components/navigation/sitenav.mjs @@ -241,7 +241,7 @@ export const NavLinks = () => { */ export const MainSections = () => { // Grab siteNav and slug from the navigation context - const { siteNav, slug, locale } = useContext(NavigationContext) + const { siteNav, slug } = useContext(NavigationContext) const output = [] for (const page of onlyMainSections(siteNav)) { const act = isSlugPart(page.s, slug) diff --git a/sites/shared/components/sets/measie-input.mjs b/sites/shared/components/sets/measie-input.mjs index 6352f69c21ab..288ad300b6ff 100644 --- a/sites/shared/components/sets/measie-input.mjs +++ b/sites/shared/components/sets/measie-input.mjs @@ -4,7 +4,6 @@ import { Collapse } from 'shared/components/collapse.mjs' import { PlusIcon, EditIcon } from 'shared/components/icons.mjs' import { NumberInput } from 'shared/components/workbench/menus/shared/inputs.mjs' import { useState, useCallback } from 'react' -import { NoIcon } from '../icons.mjs' export const ns = ['account'] const Mval = ({ m, val = false, imperial = false, className = '' }) => diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs index 0ce6d56c3f58..27f5f9d7ab40 100644 --- a/sites/shared/components/workbench/menus/shared/inputs.mjs +++ b/sites/shared/components/workbench/menus/shared/inputs.mjs @@ -8,7 +8,6 @@ import { } from 'shared/utils.mjs' import { ChoiceButton } from 'shared/components/choice-button.mjs' import debounce from 'lodash.debounce' -import { primary } from '../../../../themes/light' /******************************************************************************************* * This file contains the base components to be used by inputs in menus in the workbench @@ -194,7 +193,7 @@ const useBoolConfig = (name, config) => { } /** a toggle input for list/boolean values */ -export const ListToggle = ({ config, changed, updateFunc, name }) => { +export const ListToggle = ({ config, changed, updateFunc, name, color }) => { const boolConfig = useBoolConfig(name, config) const handleChange = useSharedHandlers({ dflt: boolConfig.dflt, updateFunc, name }) @@ -209,7 +208,7 @@ export const ListToggle = ({ config, changed, updateFunc, name }) => { return ( <input type="checkbox" - className={`toggle ${changed ? 'text-base-content' : 'text-base-content'}`} + className={`toggle ${changed ? 'toggle-secondary' : 'toggle-primary'}`} checked={checked} onChange={doToggle} onClick={(evt) => evt.stopPropagation()} @@ -346,17 +345,13 @@ export const SliderInput = ({ /> ) : ( <> - <span className="opacity-50"> + <span> <span dangerouslySetInnerHTML={{ __html: valFormatter(min) + suffix }} /> </span> - <span - className={`font-bold ${ - displayVal === config.dflt ? 'text-base-content' : 'text-base-content' - }`} - > + <span className={`font-bold ${changed ? 'text-accent' : 'text-secondary'}`}> <span dangerouslySetInnerHTML={{ __html: valFormatter(displayVal) + suffix }} /> </span> - <span className="opacity-50"> + <span> <span dangerouslySetInnerHTML={{ __html: valFormatter(max) + suffix }} /> </span> </> @@ -484,7 +479,7 @@ export const ConstantInput = ({ type={type} className={` input input-bordered w-full text-base-content - input-${changed ? 'base-content' : 'base-content'} + input-${changed ? 'accent' : 'secondary'} `} value={changed ? current : config.dflt} onChange={(evt) => updateFunc([name], evt.target.value)} diff --git a/sites/shared/components/workbench/menus/shared/values.mjs b/sites/shared/components/workbench/menus/shared/values.mjs index 3676c198c325..c380e2690da5 100644 --- a/sites/shared/components/workbench/menus/shared/values.mjs +++ b/sites/shared/components/workbench/menus/shared/values.mjs @@ -6,7 +6,7 @@ import { formatMm } from 'shared/utils.mjs' *********************************************************************************************************/ /** The basis of it all. Handles the changed/unchanged styling for the wrapped value */ -export const HighlightedValue = ({ changed, children }) => <span> {children} </span> +export const HighlightedValue = ({ children }) => <span> {children} </span> /** * A wrapper for displaying the correct value based on whether or not the value has changed diff --git a/sites/shared/components/workbench/views/inspect/inspector/path.mjs b/sites/shared/components/workbench/views/inspect/inspector/path.mjs index afd9604ec665..05f6ac8b7d8d 100644 --- a/sites/shared/components/workbench/views/inspect/inspector/path.mjs +++ b/sites/shared/components/workbench/views/inspect/inspector/path.mjs @@ -4,7 +4,7 @@ import { Attributes, pointCoords, KeyValTable } from './shared.mjs' import { formatMm } from 'shared/utils.mjs' import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs' -const Op = ({ op, len, i }) => ( +const Op = ({ op, len }) => ( <tr className={`bg-primary w-full bg-opacity-10 odd:bg-opacity-0`}> <td className={`${['move', 'close'].includes(op.type) ? 'italic' : ''} text-right px-1`}> {op.type} diff --git a/sites/shared/components/workbench/views/view-header.mjs b/sites/shared/components/workbench/views/view-header.mjs index 9223f366eb52..0cf6cb4c4f97 100644 --- a/sites/shared/components/workbench/views/view-header.mjs +++ b/sites/shared/components/workbench/views/view-header.mjs @@ -13,7 +13,6 @@ import { ClearIcon, } from 'shared/components/icons.mjs' import { ClearAllButton } from 'shared/components/workbench/menus/core-settings/index.mjs' -import { shownHeaderSelector } from 'shared/components/wrappers/header.mjs' export const ns = ['common', 'core-settings', 'ui-settings'] From 9c7946dc90a4e7f9b5fc8d43856effa63d585a8f Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Sat, 5 Aug 2023 22:27:12 +0000 Subject: [PATCH 24/28] some additional tweaks --- sites/shared/components/workbench/menus/shared/inputs.mjs | 3 ++- sites/shared/components/workbench/menus/shared/menu-item.mjs | 2 +- .../shared/components/workbench/menus/shared/menu-wrapper.mjs | 2 +- sites/shared/components/workbench/pan-zoom-pattern.mjs | 1 + sites/shared/styles/svg-freesewing-draft.css | 1 + 5 files changed, 6 insertions(+), 3 deletions(-) diff --git a/sites/shared/components/workbench/menus/shared/inputs.mjs b/sites/shared/components/workbench/menus/shared/inputs.mjs index 27f5f9d7ab40..4cd0d6e1dd08 100644 --- a/sites/shared/components/workbench/menus/shared/inputs.mjs +++ b/sites/shared/components/workbench/menus/shared/inputs.mjs @@ -208,7 +208,8 @@ export const ListToggle = ({ config, changed, updateFunc, name, color }) => { return ( <input type="checkbox" - className={`toggle ${changed ? 'toggle-secondary' : 'toggle-primary'}`} + // force tailwind: toggle-accent toggle-primary toggle-secondary + className={`toggle toggle-${color}`} checked={checked} onChange={doToggle} onClick={(evt) => evt.stopPropagation()} diff --git a/sites/shared/components/workbench/menus/shared/menu-item.mjs b/sites/shared/components/workbench/menus/shared/menu-item.mjs index af57bb781b15..2f2cd1ccea79 100644 --- a/sites/shared/components/workbench/menus/shared/menu-item.mjs +++ b/sites/shared/components/workbench/menus/shared/menu-item.mjs @@ -133,7 +133,7 @@ export const MenuItem = ({ } if (allowToggle) { - buttons.push(<ListToggle key="toggle" {...{ config, changed, updateFunc, name }} />) + buttons.push(<ListToggle key="toggle" {...{ config, changed, updateFunc, name, color }} />) } else { openButtons.push(<ResetButton open disabled={!changed} key="clear" />) } diff --git a/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs b/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs index b7f748165cb4..c1920f260c93 100644 --- a/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs +++ b/sites/shared/components/workbench/menus/shared/menu-wrapper.mjs @@ -2,7 +2,7 @@ import { useMemo } from 'react' import { WrenchIcon } from 'shared/components/icons.mjs' import { useMobileMenu } from 'shared/context/mobile-menubar-context.mjs' -const defaultClasses = `w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-full overflow-scroll` +const defaultClasses = `w-1/3 shrink grow-0 lg:p-4 max-w-md h-full overflow-scroll` /** * a wrapper that displays its contents normally on larger screens diff --git a/sites/shared/components/workbench/pan-zoom-pattern.mjs b/sites/shared/components/workbench/pan-zoom-pattern.mjs index e459766d7cbf..222c6dab4980 100644 --- a/sites/shared/components/workbench/pan-zoom-pattern.mjs +++ b/sites/shared/components/workbench/pan-zoom-pattern.mjs @@ -23,6 +23,7 @@ export const PanZoomPattern = forwardRef((props, ref) => { <TransformWrapper minScale={0.1} centerZoomedOut={true} + centerOnInit={true} wheel={{ activationKeys: ['Control'] }} doubleClick={{ mode: 'reset' }} onTransformed={onTransformed} diff --git a/sites/shared/styles/svg-freesewing-draft.css b/sites/shared/styles/svg-freesewing-draft.css index d6f88c3cbb7e..700d4c028809 100644 --- a/sites/shared/styles/svg-freesewing-draft.css +++ b/sites/shared/styles/svg-freesewing-draft.css @@ -2,6 +2,7 @@ svg.freesewing.pattern { /* Don't let the SVG surpass the parent container */ max-width: 100%; max-height: 100%; + margin: auto; /* Reset */ path, From 520fdb6526fca53de45ba21278253ae824f0aa22 Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Sun, 6 Aug 2023 16:05:10 +0000 Subject: [PATCH 25/28] tidy view-header --- sites/shared/components/workbench/header.mjs | 2 +- .../workbench/menus/core-settings/index.mjs | 16 ++++++++++++---- .../components/workbench/views/view-header.mjs | 16 +++++++++------- 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/sites/shared/components/workbench/header.mjs b/sites/shared/components/workbench/header.mjs index 99a4bddf6c3b..965ba2613bd0 100644 --- a/sites/shared/components/workbench/header.mjs +++ b/sites/shared/components/workbench/header.mjs @@ -160,7 +160,7 @@ export const WorkbenchHeader = ({ view, setView }) => { return ( <MenuWrapper Icon={icons[view]} - wrapperClass={`w-64 min-h-screen pt-4 + wrapperClass={`w-64 min-h-screen bg-base-200 shrink-0 grow-0 self-stretch transition-all diff --git a/sites/shared/components/workbench/menus/core-settings/index.mjs b/sites/shared/components/workbench/menus/core-settings/index.mjs index 4dc36c6a5cb5..50011ee25f08 100644 --- a/sites/shared/components/workbench/menus/core-settings/index.mjs +++ b/sites/shared/components/workbench/menus/core-settings/index.mjs @@ -43,16 +43,24 @@ const CoreSetting = ({ name, config, control, updateFunc, current, passProps, .. ) } -export const ClearAllButton = ({ setSettings, compact = false }) => { +export const ClearAllButton = ({ setSettings, compact, className }) => { const { t } = useTranslation('core-settings') + const title = t('clearSettings') return ( - <div className={`${compact ? '' : 'text-center mt-8'}`}> + <div + className={`${compact ? 'tooltip tooltip-bottom tooltip-primary' : 'text-center mt-8'}`} + data-tip={title} + > <button - className={`justify-self-center btn btn-primary btn-outline ${compact ? 'btn-sm' : ''}`} + className={`${ + className || + 'justify-self-center btn-outline btn btn-primary' + (compact ? ' btn-sm' : '') + }`} onClick={() => setSettings({})} + title={compact && title} > <TrashIcon /> - {t('clearSettings')} + {compact ? '' : title} </button> </div> ) diff --git a/sites/shared/components/workbench/views/view-header.mjs b/sites/shared/components/workbench/views/view-header.mjs index 0cf6cb4c4f97..beac24d48fd8 100644 --- a/sites/shared/components/workbench/views/view-header.mjs +++ b/sites/shared/components/workbench/views/view-header.mjs @@ -29,14 +29,12 @@ const ZoomOutIcon = (props) => ( ) const IconButton = ({ Icon, onClick, dflt = true, title, hide = false, extraClasses = '' }) => ( - <div className="tooltip tooltip-bottom tooltip-accent flex items-center" data-tip={title}> + <div className={`${!hide && 'tooltip'} tooltip-bottom tooltip-accent`} data-tip={title}> <button onClick={onClick} className={`${ dflt ? 'text-base-content bg-transparent' : 'bg-accent text-accent-content' - } p-2 hover:bg-accent rounded-full hover:text-accent-content ${ - hide ? 'invisible' : '' - } ${extraClasses}`} + } p-2 hover:bg-accent hover:text-accent-content ${hide ? 'invisible' : ''} ${extraClasses}`} title={title} > <Icon className="w-6 h-6" /> @@ -91,7 +89,7 @@ export const ViewHeader = ({ update, settings, ui, control, setSettings }) => { return ( <div className={`hidden lg:flex sticky top-0 z-20 transition-[top] duration-300 ease-in-out`}> - <div className="hidden lg:flex flex-row flex-wrap py-2 gap-2 w-full bg-base-200 text-base-content items-center justify-center"> + <div className="hidden lg:flex flex-row flex-wrap gap-2 w-full bg-base-200 text-base-content items-center justify-center"> {headerZoomButtons} <Spacer /> <div className="flex flex-row items-center gap-2"> @@ -133,7 +131,7 @@ export const ViewHeader = ({ update, settings, ui, control, setSettings }) => { </div> <Spacer /> <div - className="tooltip tooltip-primary tooltip-bottom flex flex-row items-center" + className="tooltip tooltip-accent tooltip-bottom flex flex-row items-center" data-tip={t('ui-settings:control.t')} > {[1, 2, 3, 4, 5].map((score) => ( @@ -153,7 +151,11 @@ export const ViewHeader = ({ update, settings, ui, control, setSettings }) => { </div> <Spacer /> <div className="flex flex-row items-center gap-2"> - <ClearAllButton setSettings={setSettings} compact /> + <ClearAllButton + setSettings={setSettings} + compact + className="text-primary hover:bg-primary hover:text-primary-content p-2" + /> </div> </div> </div> From 4c96032f566c9478976f28e6d2c1e8bbba9d604f Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Sun, 6 Aug 2023 16:38:44 +0000 Subject: [PATCH 26/28] more lint and cleanup --- sites/org/components/header/index.mjs | 1 - .../animations/how-does-it-work.mjs | 24 ++++++++++++------- sites/shared/components/patrons/subscribe.mjs | 5 +++- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs index 45ef0bd06ddc..707efb7c556f 100644 --- a/sites/org/components/header/index.mjs +++ b/sites/org/components/header/index.mjs @@ -1,7 +1,6 @@ // Hooks import { useContext } from 'react' import { useTranslation } from 'next-i18next' -import { useTheme } from 'shared/hooks/use-theme.mjs' // Context import { ModalContext } from 'shared/context/modal-context.mjs' // Components diff --git a/sites/shared/components/animations/how-does-it-work.mjs b/sites/shared/components/animations/how-does-it-work.mjs index 1e8abd2b8403..a089704e43d4 100644 --- a/sites/shared/components/animations/how-does-it-work.mjs +++ b/sites/shared/components/animations/how-does-it-work.mjs @@ -115,13 +115,13 @@ const useCarousel = (i, items) => { const transitionClasses = 'duration-700 ease-in-out transition-opacity' const LineDrawing = ({ i }) => { - const { Item, opacity } = useCarousel(Math.floor(i / 2), lineDrawings) + const { Item, opacity } = useCarousel(Math.floor(i), lineDrawings) return ( <div className={`${transitionClasses} opacity-${opacity} w-full flex flex-row items-center h-full overflow-hidden`} > - <Item className="h-full" /> + <Item className="h-full m-auto" /> </div> ) } @@ -129,7 +129,13 @@ const LineDrawing = ({ i }) => { const measieImages = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => `/img/models/model-${i}.png`) const MeasiesImage = ({ i }) => { const { Item, opacity } = useCarousel(Math.floor(i), measieImages) - return <img src={Item} className={`h-72 md:h-96 ${transitionClasses} opacity-${opacity}`} /> + return ( + <img + src={Item} + className={`h-72 md:h-96 ${transitionClasses} opacity-${opacity} m-auto`} + alt="" + /> + ) } export const HowDoesItWorkAnimation = () => { @@ -145,7 +151,7 @@ export const HowDoesItWorkAnimation = () => { }) setHalfStep((curHalf) => { - if (curHalf > 7) return 0 + if (curHalf === measieImages.length - 1) return 0 return curHalf + 0.5 }) }, 4000) @@ -155,10 +161,12 @@ export const HowDoesItWorkAnimation = () => { return ( <div className="flex flex-col md:grid md:grid-cols-3"> - <div className="relative w-full h-72 md:h-96 overflow-hidden"> - <LineDrawing i={step} /> - <Nr nr={1} /> - <Title txt={t('pickAnyDesign')} /> + <div className="relative w-full"> + <div className="relative h-72 md:h-96 overflow-hidden"> + <LineDrawing i={step} /> + <Nr nr={1} /> + <Title txt={t('pickAnyDesign')} /> + </div> </div> <div className="relative w-full"> <div className="relative h-72 md:h-96 overflow-hidden"> diff --git a/sites/shared/components/patrons/subscribe.mjs b/sites/shared/components/patrons/subscribe.mjs index 945361940e55..c3183b6517c9 100644 --- a/sites/shared/components/patrons/subscribe.mjs +++ b/sites/shared/components/patrons/subscribe.mjs @@ -121,7 +121,10 @@ export const Subscribe = ({ <input type="radio" name="period" - className={`radio checked:bg-${color} border-${color} radio-xs lg:radio-sm`} + className={ + /** border-secondary-content border-primary-content checked:radio-secondary checked:radio-primary*/ + `radio checked:radio-${color} border-${color}-content radio-xs lg:radio-sm` + } value={val} onChange={() => setPeriod(val)} checked={val === period ? 1 : 0} From a84ffc77471856f13b4d5c720c02481bcb4b2009 Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Sun, 6 Aug 2023 17:08:08 +0000 Subject: [PATCH 27/28] clean up tailwind force --- .eslintignore | 2 +- sites/shared/config/tailwind-force.html | 145 ++---------------------- 2 files changed, 8 insertions(+), 139 deletions(-) diff --git a/.eslintignore b/.eslintignore index 1731df6fa9f4..9117bc465858 100644 --- a/.eslintignore +++ b/.eslintignore @@ -18,4 +18,4 @@ dist node_modules yarn.lock package.json -.html +*.html diff --git a/sites/shared/config/tailwind-force.html b/sites/shared/config/tailwind-force.html index bcc4fdc31562..6795249a957d 100644 --- a/sites/shared/config/tailwind-force.html +++ b/sites/shared/config/tailwind-force.html @@ -7,118 +7,18 @@ --> <!-- Classes for the Popout component --> -<p class="border-accent bg-accent text-accent" /> -<p class="border-secondary bg-secondary text-secondary" /> -<p class="border-error bg-error text-error" /> -<p class="border-warning bg-warning text-warning" /> -<p class="border-info bg-info text-info" /> -<p class="border-success bg-success text-success" /> -<p class="border-primary bg-primary text-primary" /> +<span class="border-accent bg-accent text-accent" /> +<span class="border-secondary bg-secondary text-secondary" /> +<span class="border-error bg-error text-error" /> +<span class="border-warning bg-warning text-warning" /> +<span class="border-info bg-info text-info" /> +<span class="border-success bg-success text-success" /> +<span class="border-primary bg-primary text-primary" /> <!-- Background opacity for highlighted lines in code --> <code class="bg-yellow-300 bg-opacity-5" /> <code class="bg-orange-300 bg-opacity-5 opacity-80 line-through decoration-orange-500" /> -<!-- Colors for the wordmark --> -<div className="hover:bg-red-400"></div> -<div className="hover:bg-orange-400"></div> -<div className="hover:bg-amber-400"></div> -<div className="hover:bg-yellow-400"></div> -<div className="hover:bg-lime-400"></div> -<div className="hover:bg-green-400"></div> -<div className="hover:bg-teal-400"></div> -<div className="hover:bg-cyan-400"></div> -<div className="hover:bg-blue-400"></div> -<div className="hover:bg-indigo-400"></div> -<div className="hover:bg-violet-400"></div> -<div className="hover:bg-purple-400"></div> -<div className="hover:bg-fuchsia-400"></div> -<div className="hover:bg-pink-400"></div> -<div className="hover:bg-rose-400"></div> - -<!-- Colors for the header --> -<div className="bg-red-400"></div> -<div className="bg-orange-400"></div> -<div className="bg-amber-400"></div> -<div className="bg-yellow-400"></div> -<div className="bg-lime-400"></div> -<div className="bg-green-400"></div> -<div className="bg-teal-400"></div> -<div className="bg-cyan-400"></div> -<div className="bg-blue-400"></div> -<div className="bg-indigo-400"></div> -<div className="bg-violet-400"></div> -<div className="bg-purple-400"></div> -<div className="bg-fuchsia-400"></div> -<div className="bg-pink-400"></div> -<div className="bg-rose-400"></div> - -<div className="rainbow-red"></div> -<div className="rainbow-orange"></div> -<div className="rainbow-yellow"></div> -<div className="rainbow-lime"></div> -<div className="rainbow-green"></div> -<div className="rainbow-teal"></div> -<div className="rainbow-cyan"></div> -<div className="rainbow-blue"></div> -<div className="rainbow-indigo"></div> -<div className="rainbow-violet"></div> -<div className="rainbow-purple"></div> - -<div className="bg-rainbow-red"></div> -<div className="bg-rainbow-orange"></div> -<div className="bg-rainbow-yellow"></div> -<div className="bg-rainbow-lime"></div> -<div className="bg-rainbow-green"></div> -<div className="bg-rainbow-teal"></div> -<div className="bg-rainbow-cyan"></div> -<div className="bg-rainbow-blue"></div> -<div className="bg-rainbow-indigo"></div> -<div className="bg-rainbow-violet"></div> -<div className="bg-rainbow-purple"></div> - -<div className="hover:bg-rainbow-red"></div> -<div className="hover:bg-rainbow-orange"></div> -<div className="hover:bg-rainbow-yellow"></div> -<div className="hover:bg-rainbow-lime"></div> -<div className="hover:bg-rainbow-green"></div> -<div className="hover:bg-rainbow-teal"></div> -<div className="hover:bg-rainbow-cyan"></div> -<div className="hover:bg-rainbow-blue"></div> -<div className="hover:bg-rainbow-indigo"></div> -<div className="hover:bg-rainbow-violet"></div> -<div className="hover:bg-rainbow-purple"></div> - -<div className="text-rainbow-red"></div> -<div className="text-rainbow-orange"></div> -<div className="text-rainbow-yellow"></div> -<div className="text-rainbow-lime"></div> -<div className="text-rainbow-green"></div> -<div className="text-rainbow-teal"></div> -<div className="text-rainbow-cyan"></div> -<div className="text-rainbow-blue"></div> -<div className="text-rainbow-indigo"></div> -<div className="text-rainbow-violet"></div> -<div className="text-rainbow-purple"></div> - - - -<div className="text-red-400"></div> -<div className="text-orange-400"></div> -<div className="text-amber-400"></div> -<div className="text-yellow-400"></div> -<div className="text-lime-400"></div> -<div className="text-green-400"></div> -<div className="text-teal-400"></div> -<div className="text-cyan-400"></div> -<div className="text-blue-400"></div> -<div className="text-indigo-400"></div> -<div className="text-violet-400"></div> -<div className="text-purple-400"></div> -<div className="text-fuchsia-400"></div> -<div className="text-pink-400"></div> -<div className="text-rose-400"></div> - <!-- Collapse colors --> <button className="bg-primary text-primary-content">primary</button> <button className="bg-secondary text-secondary-content">secondary</button> @@ -129,14 +29,6 @@ <button className="bg-warning text-warning-content">warning</button> <button className="bg-error text-error-content">error</button> -<!-- colors for the difficulty rating --> -<svg className="text-red-500" /> -<svg className="text-orange-500" /> -<svg className="text-amber-500" /> -<svg className="text-lime-500" /> -<svg className="text-green-500" /> -<svg className="text-yellow-300" /> - <!-- badges for tags --> <badge class="badge badge-success hover:badge-success" /> <badge class="badge badge-warning hover:badge-warning" /> @@ -156,29 +48,6 @@ <!-- toc list padding --> <li className="pl-3"></li> -<!-- light theme --> -<div className='text-violet-300 hover:bg-violet-300 bg-violet-300'></div> -<!-- dark theme --> -<div className='text-violet-400 hover:bg-violet-400'></div> -<!-- aqua theme --> -<div className='text-blue-200 hover:bg-blue-200 bg-blue-200'></div> -<svg class="text-blue-600"/> -<svg class="text-blue-700"/> -<!-- lgbtq theme --> -<svg class="text-pink-500"/> -<!-- monochrome theme --> -<div className='text-stone-300 hover:bg-stone-300 bg-stone-300'></div> -<svg class="text-stone-300"/> -<svg class="text-stone-400"/> -<svg class="text-stone-500"/> -<svg class="text-stone-600"/> -<svg class="text-stone-700"/> -<svg class="text-stone-800"/> -<!-- pastel theme --> -<div className='text-indigo-300 hover:bg-indigo-300 bg-indigo-300'></div> -<!-- hax0r theme --> -<div className='bg-lime-500 text-lime-500 hover:bg-lime-500'></div> - <!-- homepage --> <a className="bg-accent text-accent-content"></a> From 41e71a36731124f56e40129cc7057e73868d9927 Mon Sep 17 00:00:00 2001 From: Enoch Riese <enoch.riese@gmail.com> Date: Sun, 6 Aug 2023 13:35:30 -0500 Subject: [PATCH 28/28] Delete settings.json didn't mean to include that --- .vscode/settings.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 8bb69fd4f528..000000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "files.autoSave": "off" -}