+
+
+ {logo ? (
+
+ ) : (
+
+ )}
+
+
-
-
+
-
diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx
index 0cef5b30b..da28d6618 100644
--- a/app/soapbox/features/compose/components/compose_form_button.tsx
+++ b/app/soapbox/features/compose/components/compose_form_button.tsx
@@ -21,7 +21,7 @@ const ComposeFormButton: React.FC = ({
return (
{shortNumberFormat(account.get('statuses_count'))}
{shortNumberFormat(account.get('followers_count'))}
-
);
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index a33b9e871..226438d03 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -72,7 +72,7 @@ const LandingPage = () => {
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
{account.get('last_status_at') === null ? : }
+ {account.get('last_status_at') === null ? : }
+
{instance.title}
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 97a2818fe..26f56025f 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { HotKeys } from 'react-hotkeys';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import Icon from '../../../components/icon';
@@ -204,7 +204,7 @@ const Notification: React.FC = (props) => {
return (
);
} else {
@@ -286,10 +286,11 @@ const Notification: React.FC = (props) => {
{renderIcon()}
-
+
{message}
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 0b530fd2a..4087e4f03 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
import ReactSwipeableViews from 'react-swipeable-views';
import { endOnboarding } from 'soapbox/actions/onboarding';
+import LandingGradient from 'soapbox/components/landing-gradient';
import { HStack } from 'soapbox/components/ui';
import AvatarSelectionStep from './steps/avatar-selection-step';
@@ -68,7 +69,7 @@ const OnboardingWizard = () => {
return (
-
+
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 27d3d842d..08cfb07bd 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
-
+
@@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
onClick={openFilePicker}
type='button'
className={classNames({
- 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true,
+ 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true,
'opacity-50 pointer-events-none': isSubmitting,
})}
disabled={isSubmitting}
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 310093691..60f6fba13 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { FormattedMessage } from'react-intl';
+import { FormattedMessage } from 'react-intl';
import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
-
+
diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx
index 62c50a42d..f6a8ce21e 100644
--- a/app/soapbox/features/public_layout/components/sonar.tsx
+++ b/app/soapbox/features/public_layout/components/sonar.tsx
@@ -8,7 +8,7 @@ const Sonar = () => (
-
+
);
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index a96e269e3..30c206838 100644
--- a/app/soapbox/features/public_layout/index.js
+++ b/app/soapbox/features/public_layout/index.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { Switch, Route, Redirect } from 'react-router-dom';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import LandingGradient from 'soapbox/components/landing-gradient';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
NotificationsContainer,
@@ -35,7 +36,7 @@ class PublicLayout extends ImmutablePureComponent {
return (
-
+
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index bc4e3694c..2f9427eba 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -25,8 +25,8 @@ const BackgroundShapes: React.FC = ({ position = 'fixed' }) =
-
-
+
+
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index e50c47741..86d5dde48 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => {
value={rule.id}
checked={isSelected}
readOnly
- className='h-4 w-4 cursor-pointer text-primary-600 border-gray-300 rounded focus:ring-primary-500'
+ className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500'
/>
);
diff --git a/app/soapbox/features/verification/email_passthru.js b/app/soapbox/features/verification/email_passthru.js
index dac2cc3bd..131d5dd1a 100644
--- a/app/soapbox/features/verification/email_passthru.js
+++ b/app/soapbox/features/verification/email_passthru.js
@@ -31,7 +31,7 @@ const Success = () => {
return (
-
+
{intl.formatMessage(messages.emailConfirmedHeading)}
diff --git a/app/soapbox/features/verification/steps/email-verification.js b/app/soapbox/features/verification/steps/email-verification.js
index be83406cc..fba2862c1 100644
--- a/app/soapbox/features/verification/steps/email-verification.js
+++ b/app/soapbox/features/verification/steps/email-verification.js
@@ -34,7 +34,7 @@ const EmailSent = ({ handleSubmit }) => {
return (
-
+
We sent you an email
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index a40e62835..ef2d573ae 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.js
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import LandingGradient from 'soapbox/components/landing-gradient';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
@@ -23,7 +24,9 @@ const WaitlistPage = ({ account }) => {
};
return (
-
+
+
+
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index aad2a13da..cab8dc44c 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -52,8 +52,6 @@ const DEFAULT_COLORS = ImmutableMap({
800: '#991b1b',
900: '#7f1d1d',
}),
- 'gradient-purple': '#b8a3f9',
- 'gradient-blue': '#9bd5ff',
'sea-blue': '#2feecc',
});
@@ -158,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa
const colors = soapboxConfig.get('colors');
const missing = ImmutableMap({
- 'bg-shape-1': colors.getIn(['accent', '500']),
- 'bg-shape-2': colors.getIn(['primary', '500']),
+ 'gradient-start': colors.getIn(['primary', '500']),
+ 'gradient-end': colors.getIn(['accent', '500']),
});
return soapboxConfig.set('colors', missing.mergeDeep(colors));
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 98f9a5584..160fef0b4 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -771,7 +771,7 @@
}
a {
- @apply text-primary-600 no-underline hover:underline;
+ @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
}
}
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index f5a25d018..60cb58409 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -113,5 +113,5 @@
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
- @apply bg-primary-50 hover:bg-primary-100 text-primary-600;
+ @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400;
}
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 33eb45875..a49315450 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -193,7 +193,7 @@
}
.button.button-secondary {
- @apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600;
+ @apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600;
}
li {
diff --git a/app/styles/utilities.scss b/app/styles/utilities.scss
index 30eb71eed..cb7f1919f 100644
--- a/app/styles/utilities.scss
+++ b/app/styles/utilities.scss
@@ -13,5 +13,5 @@
}
.mention {
- @apply text-primary-600 hover:underline;
+ @apply text-primary-600 dark:text-primary-400 hover:underline;
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 70278445b..0aa665e2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,11 +41,9 @@ module.exports = {
success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
accent: [300, 500],
- 'gradient-purple': true,
- 'gradient-blue': true,
+ 'gradient-start': true,
+ 'gradient-end': true,
'sea-blue': true,
- 'bg-shape-1': true,
- 'bg-shape-2': true,
}),
animation: {
'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
index cf11f1461..89836edb7 100644
--- a/tailwind/__tests__/colors-test.js
+++ b/tailwind/__tests__/colors-test.js
@@ -40,14 +40,14 @@ describe('parseColorMatrix()', () => {
success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
accent: [300, 500],
- 'gradient-purple': true,
- 'gradient-blue': true,
+ 'gradient-start': true,
+ 'gradient-end': true,
'sea-blue': true,
};
const result = parseColorMatrix(colorMatrix);
expect(result['sea-blue']({})).toEqual('rgb(var(--color-sea-blue))');
- expect(result['gradient-purple']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-purple) / 0.7)');
+ expect(result['gradient-start']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-start) / 0.7)');
});
});
+
{message}
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 0b530fd2a..4087e4f03 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
import ReactSwipeableViews from 'react-swipeable-views';
import { endOnboarding } from 'soapbox/actions/onboarding';
+import LandingGradient from 'soapbox/components/landing-gradient';
import { HStack } from 'soapbox/components/ui';
import AvatarSelectionStep from './steps/avatar-selection-step';
@@ -68,7 +69,7 @@ const OnboardingWizard = () => {
return (
-
+
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 27d3d842d..08cfb07bd 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
-
+
@@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
onClick={openFilePicker}
type='button'
className={classNames({
- 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true,
+ 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true,
'opacity-50 pointer-events-none': isSubmitting,
})}
disabled={isSubmitting}
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 310093691..60f6fba13 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { FormattedMessage } from'react-intl';
+import { FormattedMessage } from 'react-intl';
import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
-
+
diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx
index 62c50a42d..f6a8ce21e 100644
--- a/app/soapbox/features/public_layout/components/sonar.tsx
+++ b/app/soapbox/features/public_layout/components/sonar.tsx
@@ -8,7 +8,7 @@ const Sonar = () => (
-
+
);
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index a96e269e3..30c206838 100644
--- a/app/soapbox/features/public_layout/index.js
+++ b/app/soapbox/features/public_layout/index.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { Switch, Route, Redirect } from 'react-router-dom';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import LandingGradient from 'soapbox/components/landing-gradient';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
NotificationsContainer,
@@ -35,7 +36,7 @@ class PublicLayout extends ImmutablePureComponent {
return (
-
+
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index bc4e3694c..2f9427eba 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -25,8 +25,8 @@ const BackgroundShapes: React.FC = ({ position = 'fixed' }) =
-
-
+
+
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index e50c47741..86d5dde48 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => {
value={rule.id}
checked={isSelected}
readOnly
- className='h-4 w-4 cursor-pointer text-primary-600 border-gray-300 rounded focus:ring-primary-500'
+ className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500'
/>
);
diff --git a/app/soapbox/features/verification/email_passthru.js b/app/soapbox/features/verification/email_passthru.js
index dac2cc3bd..131d5dd1a 100644
--- a/app/soapbox/features/verification/email_passthru.js
+++ b/app/soapbox/features/verification/email_passthru.js
@@ -31,7 +31,7 @@ const Success = () => {
return (
-
+
{intl.formatMessage(messages.emailConfirmedHeading)}
diff --git a/app/soapbox/features/verification/steps/email-verification.js b/app/soapbox/features/verification/steps/email-verification.js
index be83406cc..fba2862c1 100644
--- a/app/soapbox/features/verification/steps/email-verification.js
+++ b/app/soapbox/features/verification/steps/email-verification.js
@@ -34,7 +34,7 @@ const EmailSent = ({ handleSubmit }) => {
return (
-
+
We sent you an email
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index a40e62835..ef2d573ae 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.js
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import LandingGradient from 'soapbox/components/landing-gradient';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
@@ -23,7 +24,9 @@ const WaitlistPage = ({ account }) => {
};
return (
-
+
+
+
diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts
index aad2a13da..cab8dc44c 100644
--- a/app/soapbox/normalizers/soapbox/soapbox_config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts
@@ -52,8 +52,6 @@ const DEFAULT_COLORS = ImmutableMap({
800: '#991b1b',
900: '#7f1d1d',
}),
- 'gradient-purple': '#b8a3f9',
- 'gradient-blue': '#9bd5ff',
'sea-blue': '#2feecc',
});
@@ -158,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa
const colors = soapboxConfig.get('colors');
const missing = ImmutableMap({
- 'bg-shape-1': colors.getIn(['accent', '500']),
- 'bg-shape-2': colors.getIn(['primary', '500']),
+ 'gradient-start': colors.getIn(['primary', '500']),
+ 'gradient-end': colors.getIn(['accent', '500']),
});
return soapboxConfig.set('colors', missing.mergeDeep(colors));
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 98f9a5584..160fef0b4 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -771,7 +771,7 @@
}
a {
- @apply text-primary-600 no-underline hover:underline;
+ @apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
}
}
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index f5a25d018..60cb58409 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -113,5 +113,5 @@
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
- @apply bg-primary-50 hover:bg-primary-100 text-primary-600;
+ @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400;
}
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 33eb45875..a49315450 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -193,7 +193,7 @@
}
.button.button-secondary {
- @apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600;
+ @apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600;
}
li {
diff --git a/app/styles/utilities.scss b/app/styles/utilities.scss
index 30eb71eed..cb7f1919f 100644
--- a/app/styles/utilities.scss
+++ b/app/styles/utilities.scss
@@ -13,5 +13,5 @@
}
.mention {
- @apply text-primary-600 hover:underline;
+ @apply text-primary-600 dark:text-primary-400 hover:underline;
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 70278445b..0aa665e2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,11 +41,9 @@ module.exports = {
success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
accent: [300, 500],
- 'gradient-purple': true,
- 'gradient-blue': true,
+ 'gradient-start': true,
+ 'gradient-end': true,
'sea-blue': true,
- 'bg-shape-1': true,
- 'bg-shape-2': true,
}),
animation: {
'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
index cf11f1461..89836edb7 100644
--- a/tailwind/__tests__/colors-test.js
+++ b/tailwind/__tests__/colors-test.js
@@ -40,14 +40,14 @@ describe('parseColorMatrix()', () => {
success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
accent: [300, 500],
- 'gradient-purple': true,
- 'gradient-blue': true,
+ 'gradient-start': true,
+ 'gradient-end': true,
'sea-blue': true,
};
const result = parseColorMatrix(colorMatrix);
expect(result['sea-blue']({})).toEqual('rgb(var(--color-sea-blue))');
- expect(result['gradient-purple']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-purple) / 0.7)');
+ expect(result['gradient-start']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-start) / 0.7)');
});
});