Update fonts and colors to match the new design (Klimatbyran#593)

* Add new font DM Sans Variable and replace Borna

* Remove unneeded Borna font files

* Use consistent font weights

* Update default font weights. Also tweak table font size.

* Remove unused fonts Source Serif and Roboto

* WIP: Replace Anonymous Pro

* Format numbers with locale-aware formatter

* Remove Anonymous Pro and use new font DM Sans Variable instead

* Improve styles

* Make footer links look a bit nicer with the new font

* No need to override default font for graph

* Add new colors

* Remove unused spacingTheme and move colors config

* Fix broken translation

* Use locale-aware number formatting instead of Number.toFixed()

* Replace lightBlack with black2

* Update PageWrappers to use transparent background as default instead of passing explicit black (which was used almost everywhere)

* Tweak padding and remove gray table headers due to bad contrast and bad accessibility

* Update header to use new color scheme

* Update social icons to match new colors

* Remove @types/styled-components since styled-components provides its own types as of v6.0.0

* Declare types for our styled-components Theme to provide auto-completion

* Use new colors for PillSwitch

* Tweak colors for landing page

* Improve table colors

* Use currentColor in SVG icons

* Remove unused export

* Tweak colors

* Tweak colors

* Use consistent colors

* Ensure MapLabels always stay on top of the map. Fix Klimatbyran#528

* Improve map labels

* Ensure placeholder styles are applied

* Update map colors to make it easier to distinguish between different values

* Replace remaining old colors with new alternatives

* Remove unused colors and icon

* Remove unused margins

* Initial color improvement for graphs

* UX: Don't show the budget tooltips during step 1 of the municipality Graph to avoid confusing users

* Remove remaining old colors from theme

* Fix invalid order for gray colors

* Fix button colors

* Add transparency for blue color in the graph

* Add red coolor scale and isuggestion for map colors

* Suggestion: Change the boundaries for municipality emission colors, to make it better reflect the dataset

* Improve contrast for PillSwitch

* Memoize map data to improve rendering performance

* Remove unused variable and simplify logic

* Use red colors in graph

* Whitespace fix

* Fix/only show climateplan link for actual links (Klimatbyran#608)

* Only show link to climate plan when it exists. This makes it more obvious when the plan is missing.

* Use link instead of button

* Highlight if climate plans are missing

* Remove link underline

* Improve UX and fix bugs for Municipality pages (Klimatbyran#609)

* Improve Footer layout and allow adding partial footers

* Add layout and footer to municipality pages

* Navigate back to municipality datasets instead of company datasets to make it easier to compare

* Bugfix: Render correct RegionalView based on URL state

* Bugfix: use correct margin top for the list view

* Merge branch 'feature/new-font-and-colors' into fix/add-footer-to-municipality-pages

* Remove irrelevant comment

* Increase font-size on larger screens for the ComparisionTable footer text

* Change opacity

* Make it possible to change the default dataView for RegionalView in one place. This fixes the same bug for the third time in the past few days.

* Add missing translation

* Remove dynamic to speed up loading for map

* Remove transition to reduce negative impact of slow load, rendering and blaoted page data

* Fix buggy default state for the dataView

* Use initialDataGroup instead of normalizedDataGroup to avoid nasty routing bugs

* Bug fix with invalid URL for redirect

* Simplify type

* Force useState to sync with the clicked URL

* Improve map colors to make it more accessible for people who only see black and white

* Make the emission reduction colors more representative for the actual state of the emission reductions. Also use even numeric spans, to make the scale show the spread of values instead of skewing towards one axis. (Klimatbyran#611)

For examle, the emissions map for municipalities was completely misrepresenting the data, and minimizing how serious the gap is between what is needed and what is happening.

* Tweak map colors to make better use of the current map colors

* Fix red color for MunicipalityEmissionNumbers

* Add transparency to the graph background colors

Author: Greenheart

Theme.tsx

@@ -8,9 +8,9 @@ const colors2024 = {
     150: '#C3C3C3',
     200: '#A5A5A5',
     250: '#878787',
-    300: '#444444',
+    300: '#717171',
     350: '#5B5B5B',
-    400: '#717171',
+    400: '#444444',
     500: '#2E2E2E',
     600: '#272727',
     650: '#202020',
@@ -97,6 +97,21 @@ const colors2024 = {
     900: '#7C2E45',
     950: '#73263D',
   },
+  // NOTE: This was generated from the base color 600: '#e72c4e' since we didn't get a red color scale from the designers.
+  // This explains why we only have 11 hues for this color.
+  red: {
+    50: '#fff1f1',
+    100: '#ffe4e5',
+    200: '#ffccd0',
+    300: '#fea3ab',
+    400: '#fd6f7e',
+    500: '#f73c55',
+    600: '#e72c4e',
+    700: '#c10f34',
+    800: '#a11033',
+    900: '#8a1131',
+    950: '#4d0416',
+  },
 }
 
 const namedColors2024 = {
@@ -134,50 +149,14 @@ const namedColors2024 = {
 export const colorTheme = {
   newColors: namedColors2024,
   huePalette: colors2024,
-
-  black: '#181818',
-  lightBlack: '#262626',
-  grey: '#939393',
-  offWhite: '#FFFDFA',
-
-  red: '#EF3030',
-  darkRed: '#8B1A1A',
-  darkRedOpaque: 'rgba(139, 26, 26, 0.6)',
-  darkDarkRed: '#450d0d',
-
-  orange: '#FF6813',
-  darkOrange: '#B55018',
-  darkOrangeOpaque: 'rgb(181, 80, 24, 0.6)',
-
-  darkYellow: '#FFA137',
-  lightYellow: '#FFE07A',
-
-  beige: '#FFF0D0',
-
-  lightBlue: '#81DFFF',
-
-  lightGreen: '#15D8D8',
-  lightGreenOpaqe: 'rgba(103, 255, 238, 0.6)',
-  lightGreenDark: 'rgb(0, 179, 159, 0.2)',
-
-  midGreen: '#30ACB4',
-  darkGreenOne: '#216675',
-  darkGreenTwo: '#1B3940',
-
-  gradientBlack: 'linear-gradient(#181818, #404040)',
-  gradientGreen: 'linear-gradient(#216675, #30ACB4)',
-  gradientOrange: 'linear-gradient(#EF3030, #FF6813)',
-  gradientRed: 'linear-gradient(#EF3030, #8B1A1A)',
-}
-
-export const spacingTheme = {
-  smallSpacing: '8px',
 }
 
 type Props = {
   children: ReactNode
 }
 
+export type ColorTheme = typeof colorTheme
+
 function Theme({ children }: Props) {
   return <ThemeProvider theme={colorTheme}>{children}</ThemeProvider>
 }

components/CompanyView.tsx

@@ -13,7 +13,7 @@ const InfoText = styled.div`
   position: -webkit-sticky;
   position: sticky;
   bottom: 0;
-  background: ${({ theme }) => theme.lightBlack};
+  background: ${({ theme }) => theme.newColors.black2};
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 
@@ -38,10 +38,16 @@ const InfoText = styled.div`
       font-size: 14px;
     }
   }
+
+  @media screen and (${devices.laptop}) {
+    p {
+      font-size: 16px;
+    }
+  }
 `
 
 const ParagraphSource = styled(Paragraph)`
-  color: ${({ theme }) => theme.grey};
+  color: ${({ theme }) => theme.newColors.gray};
   margin: 0;
   font-size: 12px;
   padding: 0 16px 8px;
@@ -50,7 +56,7 @@ const ParagraphSource = styled(Paragraph)`
 const InfoContainer = styled.div`
   width: 100%;
   position: relative;
-  background: ${({ theme }) => theme.lightBlack};
+  background: ${({ theme }) => theme.newColors.black2};
   border-radius: 8px;
   margin: 32px 0;
   z-index: 15;
@@ -78,7 +84,7 @@ const DetailsHeader = styled.div`
 
   p {
     font-style: italic;
-    color: gray;
+    color: ${({ theme }) => theme.newColors.gray};
     padding-top: 0.5rem;
   }
 
@@ -119,7 +125,7 @@ function CompanyView({
                       {t('common:comment')}
                       :
                     </p>
-                    <a href={company.Url} target="_blank" rel="noopener noreferrer">Läs rapporten</a>
+                    <a href={company.Url} target="_blank" rel="noopener noreferrer">{t('startPage:companyView.readReport')}</a>
                   </DetailsHeader>
                   <p>{company.Comment}</p>
                 </Details>

components/ComparisonTable.tsx

@@ -22,12 +22,12 @@ const StyledTable = styled.table`
 
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.7em;
+  font-size: 0.8em;
   margin: var(--margin);
   margin-bottom: 0;
 
   @media only screen and (${devices.smallMobile}) {
-    font-size: 0.8em;
+    font-size: 0.85em;
   }
   
   @media only screen and (${devices.tablet}) {
@@ -40,14 +40,14 @@ const StyledTable = styled.table`
   }
 
   .data-column {
-    color: ${({ theme }) => theme.darkYellow};
+    color: ${({ theme }) => theme.newColors.orange3};
     text-align: right;
   }
 
   thead::before {
     content: ' ';
     position: absolute;
-    background: ${({ theme }) => theme.lightBlack};
+    background: ${({ theme }) => theme.newColors.black2};
     width: 100%;
     height: var(--margin);
     top: calc(-1 * var(--margin));
@@ -57,7 +57,7 @@ const StyledTable = styled.table`
   }
 
   thead {
-    background: ${({ theme }) => theme.lightBlack};
+    background: ${({ theme }) => theme.newColors.black2};
     position: -webkit-sticky;
     position: sticky;
     top: calc(var(--header-offset) - (3 * var(--margin)));
@@ -84,11 +84,11 @@ const TableData = styled.td`
 
 const TableHeader = styled.th`
   padding: 8px 6px;
-  font-weight: bold;
+  font-weight: 400;
   text-align: left;
   cursor: pointer;
-  background: ${({ theme }) => theme.black};
-  font-size: 0.6rem;
+  background: ${({ theme }) => theme.newColors.black3};
+  font-size: 0.75rem;
   z-index: 40;
 
   &:first-child {
@@ -102,12 +102,12 @@ const TableHeader = styled.th`
   }
 
   @media only screen and (${devices.smallMobile}) {
-    font-size: 0.65rem;
+    font-size: 0.875rem;
   }
 
   @media only screen and (${devices.tablet}) {
-    font-size: 0.875rem;
-    padding: 16px 8px 16px 12px;
+    font-size: 1rem;
+    padding: 12px 8px 12px 12px;
   }
 `
 
@@ -119,20 +119,19 @@ const TableHeaderInner = styled.span`
 `
 
 const TableRow = styled.tr<{ interactive?: boolean, showBorder?: boolean, isExpanded?: boolean }>`
-  border-bottom: ${({ showBorder, theme }) => (showBorder ? `1px solid ${theme.midGreen}` : '')};
+  border-bottom: ${({ showBorder, theme }) => (showBorder ? `1px solid ${theme.newColors.blue3}` : '')};
   cursor: ${({ interactive }) => (interactive ? 'pointer' : '')};
-  background: ${({ isExpanded, theme }) => (isExpanded ? `${theme.black}88` : '')};
+  background: ${({ isExpanded, theme }) => (isExpanded ? theme.newColors.black1 : '')};
   z-index: 10;
 `
 
 const SortingIcon = styled(ArrowIcon)`
-  color: ${({ theme }) => theme.midGreen};
+  color: ${({ theme }) => theme.newColors.blue3};
 `
 
 type TableProps<T extends object> = {
   data: T[]
   columns: ColumnDef<T>[]
-  routeString?: string
   // IDEA: It might be better to turn ComparisionTable into two specific components, one for every use case
   dataType?: 'municipalities' | 'companies'
   renderSubComponent?: ({ row }: { row: Row<T> }) => JSX.Element
@@ -155,7 +154,6 @@ function prepareColumnsForDefaultSorting<T extends object>(columns: TableProps<T
 function ComparisonTable<T extends object>({
   data,
   columns,
-  routeString,
   dataType = 'municipalities',
   renderSubComponent,
 }: TableProps<T>) {
@@ -194,12 +192,10 @@ function ComparisonTable<T extends object>({
 
   const handleRowClick = (row: Row<T>) => {
     if (dataType === 'municipalities') {
-      if (routeString) {
-        const cells = row.getAllCells()
-        const value = cells.at(1)?.renderValue()
-        const route = `/${routeString}/${(value as unknown as string).toLowerCase()}`
-        router.push(route)
-      }
+      const cells = row.getAllCells()
+      const value = cells.at(1)?.renderValue()
+      const route = `/kommun/${(value as unknown as string).toLowerCase()}`
+      router.push(route)
     } else if (dataType === 'companies') {
       row.toggleExpanded()
     }
@@ -254,7 +250,7 @@ function ComparisonTable<T extends object>({
             <Fragment key={row.id}>
               <TableRow
                 onClick={() => handleRowClick(row)}
-                interactive={enableExpanding || routeString !== undefined}
+                interactive={enableExpanding || dataType === 'municipalities'}
                 showBorder={enableExpanding ? !isRowExpanded : true}
                 isExpanded={isRowExpanded}
                 aria-expanded={isRowExpanded}

components/DatasetButtonMenu.tsx

@@ -1,12 +1,11 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { DataDescriptions, DatasetKey } from '../utils/types'
 import { devices } from '../utils/devices'
 
 const ButtonContainer = styled.div`
   margin: 8px 0 32px 0;
   gap: 8px;
   display: flex;
-  font-weight: bolder;
   flex-wrap: wrap;
   justify-content: center;
 
@@ -18,31 +17,26 @@ const ButtonContainer = styled.div`
 
 const Button = styled.button<{active: boolean}>`
   padding: 8px 16px;
-  font-family: 'Anonymous Pro';
   font-size: 16px;
+  font-weight: 400;
   text-decoration: none;
-  line-height: 19px;
-  color: ${({ theme }) => theme.offWhite};
-  background: ${({ theme }) => theme.lightBlack};
+  color: ${({ theme }) => theme.newColors.white};
+  background: ${({ theme }) => theme.newColors.black2};
   border: none;
   border-radius: 8px;
   white-space: nowrap;
   box-sizing: border-box;
   cursor: pointer;
 
   &:hover {
-    background: ${({ theme }) => theme.darkGreenTwo};
+    color: ${({ theme }) => theme.newColors.black3};
+    background: ${({ theme }) => theme.newColors.blue1};
   }
 
-  ${({ theme, active }) => active && `
-    color: ${theme.black};
-    background: ${theme.midGreen};
-
-    &:hover {
-      background-color: ${theme.lightGreen};
-  }
+  ${({ theme, active }) => active && css`
+    color: ${theme.newColors.black3};
+    background: ${theme.newColors.blue2} !important;
   `}
-
 `
 
 type MenuProps = {

components/DropDown.tsx

@@ -33,24 +33,23 @@ const Flex = styled.div`
 const StyledInput = styled.input`
   width: 100%;
   height: 56px;
-  background-color: transparent;
-  border: 1px solid ${({ theme }) => theme.midGreen};
+  background: ${({ theme }) => theme.newColors.white};
+  border: 0;
   border-radius: 4px;
-  color: ${({ theme }) => theme.offWhite};
+  color: ${({ theme }) => theme.newColors.black3};
   font-size: 16px;
-  font-weight: 300;
-  font-family: Borna;
+  font-family: 'DM Sans Variable', sans-serif;
   padding-left: 0.8rem;
   outline: none;
   width: 325px;
 
-  ::placeholder {
-    color: ${({ theme }) => theme.offWhite};
+  &::placeholder {
+    color: ${({ theme }) => theme.newColors.black2};
   }
 `
 
 const Btn = styled.button`
-  background-color: transparent;
+  background: transparent;
   width: 20px;
   height: 20px;
   right: 16px;
@@ -59,7 +58,7 @@ const Btn = styled.button`
 `
 
 const MunicipalitiesWrapper = styled.ul`
-  background-color: ${({ theme }) => theme.lightBlack};
+  background-color: ${({ theme }) => theme.newColors.black2};
   border-radius: 4px;
   max-height: 195px;
   overflow-y: scroll;
@@ -68,7 +67,7 @@ const MunicipalitiesWrapper = styled.ul`
 `
 
 const Municipality = styled.li`
-  color: ${({ theme }) => theme.offWhite};
+  color: ${({ theme }) => theme.newColors.white};
   text-decoration: none;
   width: 310px;
   height: 56px;