Skip to content

Commit bf996ce

Browse files
padmspadms
committed
Fix style bugs from Mette on argentina
1 parent c811fa6 commit bf996ce

File tree

6 files changed

+96
-202
lines changed

6 files changed

+96
-202
lines changed

‎packages/energyvision/src/brand/tailwind/theme.css‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,40 +21,74 @@
2121
--color-slate-blue-90: hsl(207, 14%, 37%);
2222
--color-slate-80: rgba(61, 61, 61, 1);
2323
--color-mist-blue-100: hsl(199, 58%, 90%);
24-
--color-spruce-wood-100: hsl(25, 100%, 92%);
24+
--color-spruce-wood-20: #fef8f4;
2525
--color-spruce-wood-90: hsl(25, 100%, 94%);
26-
--color-green-50: #c3e4ce;
26+
--color-spruce-wood-100: hsl(25, 100%, 92%);
27+
--color-green-50: #c3e4ce
28+
--color-yellow-20: #010101;
2729
--color-yellow-50: #fff5b8;
30+
--color-blue-20: #f2f9fc;
2831
--color-blue-50: #49709c;
2932
--color-orange-50: #f8d1af;
3033
--color-north-sea-90: #051b33;
3134
--color-north-sea-80: #2a4d74;
3235
--color-north-sea-50: #a8c3db;
3336
--color-norwegian-woods-100: #007079;
3437
--color-norwegian-woods-70: #aad5bb;
38+
--color-norwegian-woods-50: #d6f0de;
3539
--color-norwegian-woods-60: #c3e4ce;
3640
--color-norwegian-woods-40: #e6faec;
3741
--color-sand-and-summer-50: #ffe7d6;
3842
--color-autumn-storm-60: #86a7ac;
3943
--color-autumn-storm-40: #c2d4d6;
44+
--color-gray-20: #f8f8f8;
45+
--color-grey-10: hsl(0,0%,97%);
4046
--color-grey-20: hsl(0, 0%, 92%);
4147
--color-grey-50: hsl(0, 0%, 55%);
4248
--color-grey-60: hsl(0, 0%, 44%);
4349
--color-white-100: hsl(0, 0%, 100%);
4450

4551
--text-2xs: clamp(calc(11.11 / 16 * 1rem), 0.19vw + 0.65rem, calc(14.08 / 16 * 1rem));
52+
--text-2xs--line-height: calc(1 / 0.75);
4653
--text-xs: clamp(calc(13.33 / 16 * 1rem), 0.28vw + 0.77rem, calc(17.6 / 16 * 1rem));
54+
--text-xs--line-height: calc(1 / 0.75);
4755
--text-sm: clamp(calc(14.61 / 16 * 1rem), 0.33vw + 0.84rem, calc(19.68 / 16 * 1rem));
56+
--text-sm--line-height: calc(1.25 / 0.875);
4857
--text-base: clamp(calc(16 / 16 * 1rem), 0.39vw + 0.91rem, calc(22 / 16 * 1rem));
58+
--text-base--line-height: calc(1.5 / 1);
4959
--text-md: clamp(calc(19.2 / 16 * 1rem), 0.54vw + 1.07rem, calc(27.5 / 16 * 1rem));
60+
--text-md--line-height: calc(1.5 / 1);
5061
--text-lg: clamp(calc(23.04 / 16 * 1rem), 0.73vw + 1.27rem, calc(34.38 / 16 * 1rem));
62+
--text-lg--line-height: calc(1.75 / 1.125);
5163
--text-xl: clamp(calc(27.65 / 16 * 1rem), 0.99vw + 1.5rem, calc(42.97 / 16 * 1rem));
64+
--text-xl--line-height: calc(1.75 / 1.25);
5265
--text-2xl: clamp(calc(33.73 / 16 * 1rem), 1.38vw + 1.785rem, calc(55.055 / 16 * 1rem));
66+
--text-2xl--line-height: calc(2 / 1.5);
5367
--text-3xl: clamp(calc(39.81 / 16 * 1rem), 1.77vw + 2.07rem, calc(67.14 / 16 * 1rem));
68+
--text-3xl--line-height: calc(2.25 / 1.875);
5469
--text-4xl: clamp(calc(45.89 / 16 * 1rem), 2.16vw + 2.355rem, calc(79.225 / 16 * 1rem));
70+
--text-4xl--line-height: calc(2.5 / 2.25);
5571
--text-5xl: clamp(calc(51.97 / 16 * 1rem), 2.55vw + 2.64rem, calc(91.31 / 16 * 1rem));
72+
--text-5xl--line-height: 1;
5673
--text-6xl: clamp(calc(58.05 / 16 * 1rem), 2.94vw + 2.925rem, calc(103.39 / 16 * 1rem));
74+
--text-6xl--line-height: 1;
5775
--text-8xl: clamp(calc(59.19 / 16 * 1rem), 3.72vw + 3.495rem, calc(115.47 / 16 * 1rem));
76+
--text-8xl--line-height: 1;
77+
78+
--leading-text: 2.3rem;
79+
--leading-inherit: inherit;
80+
--leading-lofty: 1.02; /* 49.7px h3 large screen */
81+
--leading-earthy: 1.172; /* 57.1828px h2 large screen */
82+
--leading-misty: 1.25;
83+
--leading-cloudy: 1.4; /*68.3071px h1 larger screen */
84+
--leading-planetary: 1.5;
85+
86+
--tracking-display: -3px;
87+
88+
--spacing-layout-sm: clamp(16px, calc(-38.3689px + 15.4984vw), 13dvw);
89+
--spacing-layout-md: clamp(16px, calc(-69.4369px + 23.7832vw), 18.8dvw);
90+
--spacing-layout-lg: clamp(16px, calc(-101.4757px + 32.3269vw), 23.3dvw);
91+
--spacing-text-end: clamp(16px, calc(-150px + 38vw), 26dvw);
5892

5993
--spacing-single-carousel-card-w-sm: 350px; /*275px;*/
6094
--spacing-single-carousel-card-w-md: 692px;
@@ -64,23 +98,18 @@
6498
--spacing-single-carousel-card-h-lg: 516px;
6599
--spacing-event-carousel-card-w: 383px;
66100
--spacing-arrow-right: 1.58rem;
67-
--spacing-envis-prose: 75ch; /* recommended 66ch, can we go 80ch*/
68-
--spacing-text: clamp(75ch, 1200px);
101+
--spacing-text: 70rem;
102+
--spacing-topbar: 85px;
103+
--spacing-news-banner-vertical: clamp(40px, calc(14.3125px + 11.0032vw), 210px);
69104

70105
--font-weight-semibolder: 650;
71106

72107
--radius-2xs: 0.1rem;
73108

74-
--leading-text: 2.3rem;
75-
--leading-inherit: inherit;
76-
--leading-lofty: 1.02; /* 49.7px h3 large screen */
77-
--leading-earthy: 1.172; /* 57.1828px h2 large screen */
78-
--leading-misty: 1.25;
79-
--leading-cloudy: 1.4; /*68.3071px h1 larger screen */
80-
--leading-planetary: 1.5;
81-
82109
--scale-99: 0.99;
83110

111+
--radius-card: 13px;
112+
84113
--shadow-card: rgba(0, 0, 0, 0.08) 0px 1px 3px, 1px -1px 2px 0px rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.2) 0px 1px 2px;
85114
--shadow-card-interact: rgba(0, 0, 0, 0.14) 0px 1px 3px, rgba(0, 0, 0, 0.36) 0px 1px 2px;
86115

@@ -105,4 +134,4 @@
105134
fr: '1 1 1',
106135
},
107136
*/
108-
}
137+
}

‎web/app/globals.css‎

Lines changed: 1 addition & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,10 @@
11
@import "tailwindcss" source("../");
2+
@import '@energyvision/shared/brand.css';
23
/* @source '../styles/components/imagezoom.css'; */
34
@source '../styles/components/videojs.css';
45
@source '../styles/components/cookiebot.css';
56
@source 'video.js/dist/video-js.css';
67
7-
@theme {
8-
--font-sans: 'Equinor', 'Open Sans', sans-serif;
9-
--breakpoint-md: 43.75rem;
10-
--breakpoint-xl: 81.25rem;
11-
--breakpoint-3xl: 100rem;
12-
--breakpoint-4xl: 120rem;
13-
--breakpoint-6xl: 140rem;
14-
15-
--color-moss-green-100: hsl(184, 100%, 17%);
16-
--color-moss-green-95: hsl(184, 100%, 24%);
17-
--color-moss-green-90: hsl(184, 31%, 58%);
18-
--color-moss-green-80: hsl(184, 31%, 74%);
19-
--color-moss-green-60: hsl(184, 31%, 89%);
20-
--color-moss-green-50: hsl(184, 30%, 96%);
21-
--color-energy-red-100: hsl(348, 100%, 54%);
22-
--color-clear-red-100: hsl(0, 100%, 46%);
23-
--color-black-100: hsl(0, 0%, 0%);
24-
--color-black-80: hsl(0, 0%, 20%);
25-
--color-slate-blue-100: hsl(206, 34%, 14%);
26-
--color-slate-blue-95: hsl(206, 32%, 21%);
27-
--color-slate-blue-90: hsl(207, 14%, 37%);
28-
--color-slate-80: rgba(61, 61, 61, 1);
29-
--color-mist-blue-100: hsl(199, 58%, 90%);
30-
--color-spruce-wood-20: #fef8f4;
31-
--color-spruce-wood-90: hsl(25, 100%, 94%);
32-
--color-spruce-wood-100: hsl(25, 100%, 92%);
33-
--color-green-50: #c3e4ce
34-
--color-yellow-20: #010101;
35-
--color-yellow-50: #fff5b8;
36-
--color-blue-20: #f2f9fc;
37-
--color-blue-50: #49709c;
38-
--color-orange-50: #f8d1af;
39-
--color-north-sea-90: #051b33;
40-
--color-north-sea-80: #2a4d74;
41-
--color-north-sea-50: #a8c3db;
42-
--color-norwegian-woods-100: #007079;
43-
--color-norwegian-woods-70: #aad5bb;
44-
--color-norwegian-woods-50: #d6f0de;
45-
--color-norwegian-woods-60: #c3e4ce;
46-
--color-norwegian-woods-40: #e6faec;
47-
--color-sand-and-summer-50: #ffe7d6;
48-
--color-autumn-storm-60: #86a7ac;
49-
--color-autumn-storm-40: #c2d4d6;
50-
--color-gray-20: #f8f8f8;
51-
--color-grey-20: hsl(0, 0%, 92%);
52-
--color-grey-50: hsl(0, 0%, 55%);
53-
--color-grey-60: hsl(0, 0%, 44%);
54-
--color-white-100: hsl(0, 0%, 100%);
55-
56-
--text-2xs: clamp(calc(11.11 / 16 * 1rem), 0.19vw + 0.65rem, calc(14.08 / 16 * 1rem));
57-
--text-2xs--line-height: calc(1 / 0.75);
58-
--text-xs: clamp(calc(13.33 / 16 * 1rem), 0.28vw + 0.77rem, calc(17.6 / 16 * 1rem));
59-
--text-xs--line-height: calc(1 / 0.75);
60-
--text-sm: clamp(calc(14.61 / 16 * 1rem), 0.33vw + 0.84rem, calc(19.68 / 16 * 1rem));
61-
--text-sm--line-height: calc(1.25 / 0.875);
62-
--text-base: clamp(calc(16 / 16 * 1rem), 0.39vw + 0.91rem, calc(22 / 16 * 1rem));
63-
--text-base--line-height: calc(1.5 / 1);
64-
--text-md: clamp(calc(19.2 / 16 * 1rem), 0.54vw + 1.07rem, calc(27.5 / 16 * 1rem));
65-
--text-md--line-height: calc(1.5 / 1);
66-
--text-lg: clamp(calc(23.04 / 16 * 1rem), 0.73vw + 1.27rem, calc(34.38 / 16 * 1rem));
67-
--text-lg--line-height: calc(1.75 / 1.125);
68-
--text-xl: clamp(calc(27.65 / 16 * 1rem), 0.99vw + 1.5rem, calc(42.97 / 16 * 1rem));
69-
--text-xl--line-height: calc(1.75 / 1.25);
70-
--text-2xl: clamp(calc(33.73 / 16 * 1rem), 1.38vw + 1.785rem, calc(55.055 / 16 * 1rem));
71-
--text-2xl--line-height: calc(2 / 1.5);
72-
--text-3xl: clamp(calc(39.81 / 16 * 1rem), 1.77vw + 2.07rem, calc(67.14 / 16 * 1rem));
73-
--text-3xl--line-height: calc(2.25 / 1.875);
74-
--text-4xl: clamp(calc(45.89 / 16 * 1rem), 2.16vw + 2.355rem, calc(79.225 / 16 * 1rem));
75-
--text-4xl--line-height: calc(2.5 / 2.25);
76-
--text-5xl: clamp(calc(51.97 / 16 * 1rem), 2.55vw + 2.64rem, calc(91.31 / 16 * 1rem));
77-
--text-5xl--line-height: 1;
78-
--text-6xl: clamp(calc(58.05 / 16 * 1rem), 2.94vw + 2.925rem, calc(103.39 / 16 * 1rem));
79-
--text-6xl--line-height: 1;
80-
--text-8xl: clamp(calc(59.19 / 16 * 1rem), 3.72vw + 3.495rem, calc(115.47 / 16 * 1rem));
81-
--text-8xl--line-height: 1;
82-
83-
--leading-text: 2.3rem;
84-
--leading-inherit: inherit;
85-
--leading-lofty: 1.02; /* 49.7px h3 large screen */
86-
--leading-earthy: 1.172; /* 57.1828px h2 large screen */
87-
--leading-misty: 1.25;
88-
--leading-cloudy: 1.4; /*68.3071px h1 larger screen */
89-
--leading-planetary: 1.5;
90-
91-
--tracking-display: -3px;
92-
93-
--spacing-layout-sm: clamp(16px, calc(-38.3689px + 15.4984vw), 13dvw);
94-
--spacing-layout-md: clamp(16px, calc(-69.4369px + 23.7832vw), 18.8dvw);
95-
--spacing-layout-lg: clamp(16px, calc(-101.4757px + 32.3269vw), 23.3dvw);
96-
--spacing-text-end: clamp(16px, calc(-150px + 38vw), 26dvw);
97-
98-
--spacing-single-carousel-card-w-sm: 350px; /*275px;*/
99-
--spacing-single-carousel-card-w-md: 692px;
100-
--spacing-single-carousel-card-w-lg: 980px;
101-
--spacing-single-carousel-card-h-sm: 400px;
102-
--spacing-single-carousel-card-h-md: 430px;
103-
--spacing-single-carousel-card-h-lg: 516px;
104-
--spacing-event-carousel-card-w: 383px;
105-
--spacing-arrow-right: 1.58rem;
106-
--spacing-text: 70rem;
107-
--spacing-topbar: 85px;
108-
--spacing-news-banner-vertical: clamp(40px, calc(14.3125px + 11.0032vw), 210px);
109-
110-
--font-weight-semibolder: 650;
111-
112-
--radius-2xs: 0.1rem;
113-
114-
--scale-99: 0.99;
115-
116-
--radius-card: 13px;
117-
118-
--shadow-card: rgba(0, 0, 0, 0.08) 0px 1px 3px, 1px -1px 2px 0px rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.2) 0px 1px 2px;
119-
--shadow-card-interact: rgba(0, 0, 0, 0.14) 0px 1px 3px, rgba(0, 0, 0, 0.36) 0px 1px 2px;
120-
121-
--ease-scroll: cubic-bezier(0.645, 0.045, 0.355, 1);
122-
--ease-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
123-
124-
/* Modal */
125-
--modal-transition-duration: 0.4s;
126-
--modal-transition-easing: cubic-bezier(0.45, 0, 0.55, 1);
127-
128-
/* or just --fr? flex-(--fr) */
129-
--flex-fr: 1 1 1;
130-
131-
/* or just --motion-safe? transition-(--my-properties) */
132-
--transition-motion-safe: motion-safe;
133-
134-
/*just --card ? grid-cols-(--my-grid-cols) */
135-
--grid-cols-card: repeat(auto-fill, minmax(min(100%, 220px), 400px));
136-
137-
/* Implement in code and check
138-
flex: {
139-
fr: '1 1 1',
140-
},
141-
*/
142-
}
1438
@utility grid-overlay {
1449
grid: [overlay] 1fr / [overlay] 1fr;
14510
}

‎web/core/IFrame/RequestConsentContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const RequestConsentContainer = ({
6161
})
6262
}
6363
return (
64-
<div className='flex w-fit flex-col rounded-md'>
64+
<div className='flex w-full flex-col rounded-md'>
6565
<div className='dark w-full rounded-t-md border border-slate-blue-95 bg-slate-blue-95 px-6 py-4'>
6666
<Typography variant='lg' as={hasSectionTitle ? 'h3' : 'h2'}>
6767
{intl('cookie_consent_header')}

‎web/core/Table/TableHead.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { type HTMLAttributes, forwardRef } from 'react'
2-
import { getColorConfigForTableTheme } from './TableTheme'
1+
import { forwardRef, type HTMLAttributes } from 'react'
2+
import { twMerge } from 'tailwind-merge'
33
import { InnerContext } from './Inner.context'
44
import { ThemeVariants, Variants } from './Table'
5-
import { twMerge } from 'tailwind-merge'
5+
import { getColorConfigForTableTheme } from './TableTheme'
66

77
export type TableHeadProps = {
88
/**
@@ -17,24 +17,26 @@ export type TableHeadProps = {
1717
themeVariant?: ThemeVariants | undefined
1818
} & HTMLAttributes<HTMLTableSectionElement>
1919

20-
export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(
21-
{ variant = 'zebra', themeVariant = 'grey', className = '', ...rest },
22-
ref,
23-
) {
24-
return (
25-
<InnerContext.Provider value={{ variant, themeVariant, section: 'head' }}>
26-
<thead
27-
ref={ref}
28-
className={twMerge(
29-
`text-base font-medium ${
30-
variant === 'border'
31-
? `border-b-2 ${getColorConfigForTableTheme(themeVariant)?.headerBorder}`
32-
: `${getColorConfigForTableTheme(themeVariant)?.headerBackground}`
33-
} }`,
34-
className,
35-
)}
36-
{...rest}
37-
/>
38-
</InnerContext.Provider>
39-
)
40-
})
20+
export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
21+
function TableHead(
22+
{ variant = 'zebra', themeVariant = 'grey', className = '', ...rest },
23+
ref,
24+
) {
25+
return (
26+
<InnerContext.Provider value={{ variant, themeVariant, section: 'head' }}>
27+
<thead
28+
ref={ref}
29+
className={twMerge(
30+
`font-medium text-base ${
31+
variant === 'border'
32+
? `border-b-2 ${getColorConfigForTableTheme(themeVariant)?.headerBorder}`
33+
: `${getColorConfigForTableTheme(themeVariant)?.headerBackground}`
34+
}`,
35+
className,
36+
)}
37+
{...rest}
38+
/>
39+
</InnerContext.Provider>
40+
)
41+
},
42+
)

‎web/core/Table/TableRow.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
1-
import { type HTMLAttributes, forwardRef } from 'react'
2-
import { getColorConfigForTableTheme } from './TableTheme'
3-
import { useTable } from './Inner.context'
1+
import { forwardRef, type HTMLAttributes } from 'react'
42
import { twMerge } from 'tailwind-merge'
3+
import { useTable } from './Inner.context'
4+
import { getColorConfigForTableTheme } from './TableTheme'
55

66
export type TableRowProps = HTMLAttributes<HTMLTableRowElement>
77

8-
export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(
9-
{ className = '', ...rest },
10-
ref,
11-
) {
12-
const { variant, themeVariant } = useTable()
13-
return (
14-
<tr
15-
ref={ref}
16-
className={twMerge(
17-
`${
18-
variant === 'zebra'
19-
? `${getColorConfigForTableTheme(themeVariant)?.rowZebraBackground} odd:last:border-b ${
20-
getColorConfigForTableTheme(themeVariant)?.rowZebraLastOdd
21-
}`
22-
: ''
23-
}`,
24-
className,
25-
)}
26-
{...rest}
27-
/>
28-
)
29-
})
8+
export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
9+
function TableRow({ className = '', ...rest }, ref) {
10+
const { variant, themeVariant } = useTable()
11+
return (
12+
<tr
13+
ref={ref}
14+
className={twMerge(
15+
`${
16+
variant === 'zebra'
17+
? `${getColorConfigForTableTheme(themeVariant)?.rowZebraBackground} odd:last:border-b ${
18+
getColorConfigForTableTheme(themeVariant)?.rowZebraLastOdd
19+
}`
20+
: ''
21+
}`,
22+
className,
23+
)}
24+
{...rest}
25+
/>
26+
)
27+
},
28+
)

‎web/languageConfig.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,11 @@ export const languages = getLanguages(dataset)
1212

1313
//@ts-ignore: configuration files set with lang
1414
export const getValidLanguagesLocales = () =>
15-
getLanguages(dataset).map(lang => lang!.iso)
15+
getLanguages(dataset).map(lang => lang.iso)
1616

1717
export const defaultLanguage =
1818
languages.find(lang => {
19-
console.log('Language ', lang!.id, defaultWebLanguage[dataset])
20-
return lang!.id === defaultWebLanguage[dataset]
19+
return lang.id === defaultWebLanguage[dataset]
2120
}) ?? languages[0]
2221

2322
export const domain = getDomain(dataset)

0 commit comments

Comments
 (0)