APP-306: update colors for project pages (#2506)

regen-network · Oct 20, 2024 · 445585b · 445585b
1 parent d6bdecb
commit 445585b
Show file tree

Hide file tree

Showing 19 changed files with 155 additions and 35 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
  'classes',
  'classNames',
  'previewClassName',
+ 'color',
  ],
  ignoreProperty: [
  'border',

diff --git a/web-components/src/components/atoms/CardRibbon/CardRibbon.tsx b/web-components/src/components/atoms/CardRibbon/CardRibbon.tsx
@@ -28,7 +28,7 @@ const CardRibbon = ({
  sx={[
  {
  background:
- 'linear-gradient(201.8deg, #4FB573 14.67%, #B9E1C7 97.14%)',
+ 'linear-gradient(201.8deg, rgba(var(--sc-tag-credit-category-500) / 1) 14.67%, rgba(var(--sc-tag-credit-category-300) / 1) 97.14%)',
  py: { xs: 1.25, sm: 2.5 },
  px: { xs: 5 },
  width: 'fit-content',

diff --git a/web-components/src/components/buttons/ContainedButton.tsx b/web-components/src/components/buttons/ContainedButton.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material';
 import Button from '@mui/material/Button';
 
 const gradient =
- 'linear-gradient(204.4deg, #527984 5.94%, #79C6AA 51.92%, #C4DAB5 97.89%)';
+ 'linear-gradient(204.4deg, rgba(var(--sc-gradient-heavy-gradient-600)) 5.94%, rgba(var(--sc-gradient-heavy-gradient-500)) 51.92%, rgba(var(--sc-gradient-heavy-gradient-400)) 97.89%)';
 
 const ContainedButton = styled(Button)(({ theme }) => {
  return {

diff --git a/web-components/src/components/buttons/PrevNextButton.tsx b/web-components/src/components/buttons/PrevNextButton.tsx
@@ -36,7 +36,7 @@ const getBorderColor = (
  ? // eslint-disable-next-line lingui/no-unlocalized-strings
  `linear-gradient(${disabledColor}, ${disabledColor})`
  : // eslint-disable-next-line lingui/no-unlocalized-strings
- 'linear-gradient(204.4deg, #527984 5.94%, #79C6AA 51.92%, #C4DAB5 97.89%)';
+ 'linear-gradient(204.4deg, rgba(var(--sc-gradient-heavy-gradient-600)) 5.94%, rgba(var(--sc-gradient-heavy-gradient-500)) 51.92%, rgba(var(--sc-gradient-heavy-gradient-400)) 97.89%)'
 };
 
 const getBackgroundColor = (

diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.tsx b/web-components/src/components/cards/CredibilityCard/CredibilityCard.tsx
@@ -1,7 +1,10 @@
 import { Box } from '@mui/material';
+import { IS_REGEN } from 'lib/env';
 
+import isString from '../../../utils/isString';
 import { BlockContent } from '../../block-content';
 import OutlinedCheckIcon from '../../icons/OutlinedCheckIcon';
+import SvgColorOverride from '../../icons/utils/SvgColorOverride';
 import { Body, Title } from '../../typography';
 import Card from '../Card';
 import { CredibilityCardProps } from './CredibilityCard.types';
@@ -13,6 +16,7 @@ export const CredibilityCard: React.FC<CredibilityCardProps> = ({
  descriptionRaw,
  icon,
  claims,
+ overrideIconColor = false,
 }) => (
  <Card
  borderColor="grey.100"
@@ -26,11 +30,24 @@ export const CredibilityCard: React.FC<CredibilityCardProps> = ({
  },
  }}
  >
- {icon && (
+ {icon && isString(icon) && overrideIconColor ? (
+ <SvgColorOverride
+ alt={title}
+ src={icon}
+ color="rgba(var(--ac-neutral-500))"
+ filterIntensity={1}
+ sx={{
+ float: 'right',
+ mr: [1.75, 4.5],
+ height: [100, 126],
+ width: [100, 126],
+ }}
+ />
+ ) : (
  <Box
  component="img"
  alt={title}
- src={icon}
+ src={icon as string}
  height={[100, 126]}
  sx={{ float: 'right', mr: [1.75, 4.5] }}
  />

diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.types.ts b/web-components/src/components/cards/CredibilityCard/CredibilityCard.types.ts
@@ -6,4 +6,5 @@ export type CredibilityCardProps = {
  descriptionRaw: SanityBlockContent;
  icon?: string | null;
  claims: Array<{ description: string }>;
+ overrideIconColor?: boolean;
 };
diff --git a/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts b/web-components/src/components/cards/CredibilityCard/CredibilityCard.utils.ts
@@ -1,5 +1,5 @@
 export const getBackground = (index: number, value: number) => {
  const percentage = `${Math.min(100, 55 + index * value)}%`;
  // eslint-disable-next-line lingui/no-unlocalized-strings
- return `linear-gradient(-8deg, #F1F7F6 ${percentage}, transparent ${percentage})`;
+ return `linear-gradient(-8deg, rgba(var(--sc-card-credibility-diagonal-background) / 1) ${percentage}, transparent ${percentage})`;
 };
diff --git a/web-components/src/components/cards/ProjectImpactCard/ProjectImpactCard.tsx b/web-components/src/components/cards/ProjectImpactCard/ProjectImpactCard.tsx
@@ -1,7 +1,9 @@
 import { Box, Grid, SxProps, Theme } from '@mui/material';
+import { IS_REGEN } from 'lib/env';
 
 import { ImageType } from '../../../types/shared/imageType';
 import { sxToArray } from '../../../utils/mui/sxToArray';
+import SvgColorOverride from '../../icons/utils/SvgColorOverride';
 import { Image } from '../../image';
 import { Body, Label, Title } from '../../typography';
 import Card from '../Card';
@@ -68,14 +70,13 @@ export default function ProjectImpactCard({
  top: [15, 25],
  left: 0,
  width: 'fit-content',
- backgroundColor: 'secondary.main',
- color: 'primary.main',
  borderRadius: '0px 2px 2px 0px',
  p: 1.25,
  pl: 2.5,
  },
  ...sxToArray(labelSx),
  ]}
+ className="text-sc-tag-prefinance-text-icon bg-sc-tag-impact-background"
  >
  {label}
  </Label>
@@ -100,15 +101,27 @@ export default function ProjectImpactCard({
  <Grid container spacing={2.5} sx={{ mb: 3.125, mt: -2.5 }}>
  {sdgs.map(sdg => (
  <Grid key={sdg.src} item>
- <Box
- component="img"
- sx={{
- width: { xs: 50, sm: 60 },
- height: { xs: 50, sm: 60 },
- }}
- src={sdg.src}
- alt={sdg.alt}
- />
+ {IS_REGEN ? (
+ <Box
+ component="img"
+ sx={{
+ width: { xs: 50, sm: 60 },
+ height: { xs: 50, sm: 60 },
+ }}
+ src={sdg.src}
+ alt={sdg.alt}
+ />
+ ) : (
+ <SvgColorOverride
+ src={sdg.src}
+ color="rgba(var(--ac-neutral-500) / 1)"
+ filterIntensity={6}
+ sx={{
+ width: { xs: 50, sm: 60 },
+ height: { xs: 50, sm: 60 },
+ }}
+ />
+ )}
  </Grid>
  ))}
  </Grid>

diff --git a/web-components/src/components/icons/GreenPinIcon.tsx b/web-components/src/components/icons/GreenPinIcon.tsx
@@ -7,12 +7,12 @@ export const GreenPinIcon = (props: React.SVGProps<SVGSVGElement>) => (
  cy="45.5114"
  rx="9.99124"
  ry="3.57954"
- fill="#D2D5D9"
  fillOpacity="0.3"
+ style={{ fill: 'rgba(var(--ac-neutral-400, #d2d5d9))' }}
  />
  <path
  d="M36.2263 17.9297C36.2263 32.3673 20.7011 43.3452 18.5003 44.8289C18.3383 44.9381 18.1458 44.9381 17.9838 44.8289C15.783 43.3452 0.257812 32.3674 0.257812 17.9297C0.257812 8.02739 8.30962 0 18.242 0C28.1744 0 36.2263 8.02739 36.2263 17.9297Z"
- fill="#4FB573"
+ style={{ fill: 'rgba(var(--ac-primary-500, #4fb573))' }}
  />
  <ellipse cx="18.2419" cy="18.2812" rx="9.68381" ry="9.84375" fill="white" />
  </svg>

diff --git a/web-components/src/components/icons/OutlinedCheckIcon.tsx b/web-components/src/components/icons/OutlinedCheckIcon.tsx
@@ -58,9 +58,26 @@ export default function OutlinedCheckIcon({
  y2="19.2302"
  gradientUnits="userSpaceOnUse"
  >
- <stop stopColor="#527984" />
- <stop offset="0.5" stopColor="#79C6AA" />
- <stop offset="1" stopColor="#C4DAB5" />
+ <stop
+ style={{
+ stopColor:
+ 'rgba(var(--ac-gradients-primary-gradient-600, #527984) / 1)',
+ }}
+ />
+ <stop
+ offset="0.5"
+ style={{
+ stopColor:
+ 'rgba(var(--ac-gradients-primary-gradient-500, #79C6AA) / 1)',
+ }}
+ />
+ <stop
+ offset="1"
+ style={{
+ stopColor:
+ 'rgba(var(--ac-gradients-primary-gradient-400, #C4DAB5) / 1)',
+ }}
+ />
  </linearGradient>
  <linearGradient
  id="paint1_linear_8447_24777"
@@ -70,9 +87,26 @@ export default function OutlinedCheckIcon({
  y2="19.2302"
  gradientUnits="userSpaceOnUse"
  >
- <stop stopColor="#527984" />
- <stop offset="0.5" stopColor="#79C6AA" />
- <stop offset="1" stopColor="#C4DAB5" />
+ <stop
+ style={{
+ stopColor:
+ 'rgba(var(--ac-gradients-primary-gradient-600, #527984) / 1)',
+ }}
+ />
+ <stop
+ offset="0.5"
+ style={{
+ stopColor:
+ 'rgba(var(--ac-gradients-primary-gradient-500, #79C6AA) / 1)',
+ }}
+ />
+ <stop
+ offset="1"
+ style={{
+ stopColor:
+ 'rgba(var(--ac-gradients-primary-gradient-400, #C4DAB5) / 1)',
+ }}
+ />
  </linearGradient>
  </defs>
  </SvgIcon>

diff --git a/web-components/src/components/icons/utils/SvgColorOverride.tsx b/web-components/src/components/icons/utils/SvgColorOverride.tsx
@@ -1,28 +1,39 @@
 import { useMemo } from 'react';
 import { SvgIcon, SxProps } from '@mui/material';
 
-export default function SvgThemeWrapper({
+export default function SvgColorOverride({
  src,
  sx,
  color,
+ filterIntensity = 10,
+ alt,
+ className,
 }: {
  src: string;
  sx?: SxProps;
  color: string;
+ filterIntensity?: number;
+ alt?: string;
+ className?: string;
 }) {
  const maskId = useMemo(() => `mask_${Math.random()}`, []);
  return (
- <SvgIcon sx={sx}>
+ <SvgIcon sx={sx} aria-label={alt} className={className}>
  <mask id={maskId}>
  <image
  href={src}
  // filter: 'brightness(10)' is used to make the image full intensity for the mask
- style={{ filter: 'brightness(10)' }}
+ style={{ filter: `brightness(${filterIntensity})` }}
  height="100%"
  width="100%"
  />
  </mask>
- <rect mask={`url(#${maskId})`} width="100%" height="100%" fill={color} />
+ <rect
+ mask={`url(#${maskId})`}
+ width="100%"
+ height="100%"
+ style={{ fill: color }}
+ />
  </SvgIcon>
  );
 }
diff --git a/web-components/src/components/organisms/ImpactTags/ImpactTags.tsx b/web-components/src/components/organisms/ImpactTags/ImpactTags.tsx
@@ -22,6 +22,7 @@ export interface Props {
  ecosystemLabel: string;
  seeMoreText: string;
  seeLessText: string;
+ overrideIconColor?: boolean;
 }
 
 const ImpactTags = ({
@@ -33,6 +34,7 @@ const ImpactTags = ({
  ecosystemLabel,
  seeMoreText,
  seeLessText,
+ overrideIconColor = false,
 }: Props) => {
  const isImpactCollapsed = impact.length > DEFAULT_COLLAPSED_ITEMS;
  return (
@@ -74,6 +76,7 @@ const ImpactTags = ({
  }}
  activitiesLabel={activitiesLabel}
  ecosystemLabel={ecosystemLabel}
+ overrideIconColor={overrideIconColor}
  />
  )}
  </Box>

diff --git a/web-components/src/components/organisms/ProjectTags/ProjectTags.tsx b/web-components/src/components/organisms/ProjectTags/ProjectTags.tsx
@@ -4,14 +4,19 @@ import { ProjectTag } from '../../../components/molecules/ProjectTag/ProjectTag'
 import { Label } from '../../../components/typography';
 import { Theme } from '../../../theme/muiTheme';
 import { sxToArray } from '../../../utils/mui/sxToArray';
-import { ProjectTagType } from '../../molecules/ProjectTag/ProjectTag.types';
+import SvgColorOverride from '../../icons/utils/SvgColorOverride';
+import {
+ isImageType,
+ ProjectTagType,
+} from '../../molecules/ProjectTag/ProjectTag.types';
 
 export interface Props {
  activities?: ProjectTagType[];
  ecosystems?: ProjectTagType[];
  sx?: SxProps<Theme>;
  activitiesLabel?: string;
  ecosystemLabel: string;
+ overrideIconColor?: boolean;
 }
 
 const ProjectTags = ({
@@ -20,6 +25,7 @@ const ProjectTags = ({
  sx = [],
  activitiesLabel,
  ecosystemLabel,
+ overrideIconColor = false,
 }: Props): JSX.Element => {
  const hasActivities = activities.length > 0;
  const hasManyActivities = activities.length > 1;
@@ -85,7 +91,20 @@ const ProjectTags = ({
  >
  {ecosystems.map(ecosystem => (
  <ProjectTag
- tag={ecosystem}
+ tag={{
+ ...ecosystem,
+ icon:
+ overrideIconColor && isImageType(ecosystem.icon) ? (
+ <SvgColorOverride
+ src={ecosystem.icon.src}
+ color="rgba(var(--sc-icon-ecosystem-600))"
+ className="h-[40px] w-[40px]"
+ sx={{ mr: 2.5 }}
+ />
+ ) : (
+ ecosystem.icon
+ ),
+ }}
  key={ecosystem.name}
  sx={{
  mb: hasManyEcosystems ? { xs: 2.5, sm: 3.75 } : 0,

diff --git a/web-components/src/utils/isString.ts b/web-components/src/utils/isString.ts
@@ -0,0 +1,3 @@
+export default function isString(value: unknown): value is string {
+ return typeof value === 'string';
+}
diff --git a/web-marketplace/src/components/organisms/DetailsSection/DetailsSection.tsx b/web-marketplace/src/components/organisms/DetailsSection/DetailsSection.tsx
@@ -9,6 +9,8 @@ import ResponsiveSlider from 'web-components/src/components/sliders/ResponsiveSl
 import { Body, Label, Title } from 'web-components/src/components/typography';
 import { headerFontFamily, Theme } from 'web-components/src/theme/muiTheme';
 
+import { IS_REGEN } from 'lib/env';
+
 import { DetailsSectionButton } from './DetailsSection.Button';
 import {
  CREDIT,
@@ -91,6 +93,7 @@ export const DetailsSection: React.FC<
  item
  sx={{
  background:
+ // TODO: get design system colors for this gradient
  'linear-gradient(206deg, #7D9AA2 0%, #9AD3BE 50%, #D1E2C7 100%)',
  '-webkit-background-clip': 'text',
  '-webkit-text-fill-color': 'transparent',
@@ -132,6 +135,7 @@ export const DetailsSection: React.FC<
  title={card?.credibilityCard?.title as string}
  descriptionRaw={card?.credibilityCard?.descriptionRaw}
  icon={card?.credibilityCard?.icon?.asset?.url}
+ overrideIconColor={!IS_REGEN}
  claims={
  card?.claims?.map(claim => ({
  description: claim?.description as string,