oddsgate-ds 1.0.63 → 1.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build-storybook.log +30 -0
- package/chromatic.config.json +6 -0
- package/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/organisms/Slider/Slider.component.d.ts +1 -1
- package/dist/cjs/types/components/organisms/Slider/Slider.interface.d.ts +2 -0
- package/dist/cjs/types/components/organisms/Slider/Slider.stories.d.ts +1 -0
- package/dist/cjs/types/helpers/isTouchDevice.d.ts +2 -0
- package/dist/cjs/types/styles/variables.d.ts +3 -3
- package/dist/esm/index.js +5 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/organisms/Slider/Slider.component.d.ts +1 -1
- package/dist/esm/types/components/organisms/Slider/Slider.interface.d.ts +2 -0
- package/dist/esm/types/components/organisms/Slider/Slider.stories.d.ts +1 -0
- package/dist/esm/types/helpers/isTouchDevice.d.ts +2 -0
- package/dist/esm/types/styles/variables.d.ts +3 -3
- package/dist/public/assets/empty-state.svg +27 -18
- package/dist/public/assets/placeholder.png +0 -0
- package/dist/types.d.ts +6 -4
- package/package.json +7 -3
- package/public/assets/empty-state.svg +27 -18
- package/public/assets/placeholder.png +0 -0
- package/src/components/organisms/Slider/Slider.component.tsx +11 -1
- package/src/components/organisms/Slider/Slider.interface.ts +2 -0
- package/src/components/organisms/Slider/Slider.stories.tsx +42 -0
- package/src/components/organisms/Slider/Slider.theme.ts +44 -12
- package/src/components/organisms/Tabs/Tabs.theme.ts +4 -2
- package/src/helpers/isTouchDevice.tsx +11 -0
- package/src/styles/utilities.ts +8 -9
- package/src/styles/variables.ts +17 -17
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ISlider } from './Slider.interface';
|
|
3
|
-
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, className, style, children, onSlide, ...props }: ISlider) => React.JSX.Element;
|
|
3
|
+
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, mobileOnly, className, style, children, onSlide, ...props }: ISlider) => React.JSX.Element;
|
|
4
4
|
export default Slider;
|
|
@@ -3,3 +3,4 @@ import { ISlider } from './Slider.interface';
|
|
|
3
3
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Simple: StoryObj<ISlider>;
|
|
6
|
+
export declare const MobileOnly: StoryObj<ISlider>;
|
|
@@ -2,9 +2,9 @@ export declare const pxToRem: (size: number) => string;
|
|
|
2
2
|
export declare const fontName = "MD Nichrome";
|
|
3
3
|
export declare const alternativeFont = "Red Hat Display";
|
|
4
4
|
export declare const gutter: string;
|
|
5
|
-
export declare const desktop_width
|
|
6
|
-
export declare const tablet_width
|
|
7
|
-
export declare const mobile_width
|
|
5
|
+
export declare const desktop_width: number;
|
|
6
|
+
export declare const tablet_width: number;
|
|
7
|
+
export declare const mobile_width: number;
|
|
8
8
|
export declare const responsiveMedia = "980px";
|
|
9
9
|
export declare const mobileMedia = "360px";
|
|
10
10
|
export declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
|
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<path
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<path
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
1
|
+
<svg width="326" height="312" viewBox="0 0 326 312" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<ellipse cx="85.5" cy="156" rx="85" ry="84" fill="#FC3151"/>
|
|
3
|
+
<ellipse cx="240.5" cy="228" rx="85" ry="84" fill="#FC3151"/>
|
|
4
|
+
<g clip-path="url(#clip0_3960_7751)">
|
|
5
|
+
<mask id="mask0_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="77" y="30" width="146" height="147">
|
|
6
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 252.971 105.64)" fill="#D9D9D9"/>
|
|
7
|
+
</mask>
|
|
8
|
+
<g mask="url(#mask0_3960_7751)">
|
|
9
|
+
<rect width="150.458" height="71.3627" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 254.1 106.015)" fill="#FC3151"/>
|
|
10
|
+
</g>
|
|
11
|
+
</g>
|
|
12
|
+
<g clip-path="url(#clip1_3960_7751)">
|
|
13
|
+
<mask id="mask1_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="168" width="149" height="143">
|
|
14
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(1 0 0 -1 7.5 310.83)" fill="#D9D9D9"/>
|
|
15
|
+
</mask>
|
|
16
|
+
<g mask="url(#mask1_3960_7751)">
|
|
17
|
+
<rect width="150.458" height="71.3627" transform="matrix(1 0 0 -1 6.4375 311.362)" fill="#FC3151"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<defs>
|
|
21
|
+
<clipPath id="clip0_3960_7751">
|
|
22
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(202.887 155.724) rotate(-135)"/>
|
|
23
|
+
</clipPath>
|
|
24
|
+
<clipPath id="clip1_3960_7751">
|
|
25
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(7.5 240)"/>
|
|
26
|
+
</clipPath>
|
|
27
|
+
</defs>
|
|
19
28
|
</svg>
|
|
Binary file
|
package/dist/types.d.ts
CHANGED
|
@@ -7,9 +7,9 @@ declare const pxToRem: (size: number) => string;
|
|
|
7
7
|
declare const fontName = "MD Nichrome";
|
|
8
8
|
declare const alternativeFont = "Red Hat Display";
|
|
9
9
|
declare const gutter: string;
|
|
10
|
-
declare const desktop_width
|
|
11
|
-
declare const tablet_width
|
|
12
|
-
declare const mobile_width
|
|
10
|
+
declare const desktop_width: number;
|
|
11
|
+
declare const tablet_width: number;
|
|
12
|
+
declare const mobile_width: number;
|
|
13
13
|
declare const responsiveMedia = "980px";
|
|
14
14
|
declare const mobileMedia = "360px";
|
|
15
15
|
declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
|
|
@@ -557,13 +557,15 @@ interface ISlider {
|
|
|
557
557
|
autoplay?: boolean;
|
|
558
558
|
spacing?: string;
|
|
559
559
|
mediaQueries?: object;
|
|
560
|
+
$mobileOnly?: boolean;
|
|
561
|
+
mobileOnly?: boolean;
|
|
560
562
|
onSlide?: () => void;
|
|
561
563
|
className?: string;
|
|
562
564
|
style?: CSSProperties;
|
|
563
565
|
children: React.ReactNode;
|
|
564
566
|
}
|
|
565
567
|
|
|
566
|
-
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, className, style, children, onSlide, ...props }: ISlider) => React__default.JSX.Element;
|
|
568
|
+
declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, mobileOnly, className, style, children, onSlide, ...props }: ISlider) => React__default.JSX.Element;
|
|
567
569
|
|
|
568
570
|
type ICover = {
|
|
569
571
|
id?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oddsgate-ds",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.65",
|
|
4
4
|
"description": "Miew theme component library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -19,13 +19,17 @@
|
|
|
19
19
|
"build-storybook": "storybook build",
|
|
20
20
|
"bump-version": "npm version patch --no-git-tag-version",
|
|
21
21
|
"lint:css": "stylelint './src/**/*.tsx'",
|
|
22
|
-
"clean": "rimraf dist"
|
|
22
|
+
"clean": "rimraf dist",
|
|
23
|
+
"chromatic": "npx chromatic --project-token=chpt_b2130961bd49687"
|
|
23
24
|
},
|
|
24
25
|
"repository": {
|
|
25
26
|
"type": "git",
|
|
26
27
|
"url": "git+https://github.com/wearemiew/miewtheme-ds.git"
|
|
27
28
|
},
|
|
28
|
-
"author":
|
|
29
|
+
"author": {
|
|
30
|
+
"name": "Rui Correia",
|
|
31
|
+
"email": "rui.correia@miew.pt"
|
|
32
|
+
},
|
|
29
33
|
"license": "MIT",
|
|
30
34
|
"devDependencies": {
|
|
31
35
|
"@chromatic-com/storybook": "^1",
|
|
@@ -1,19 +1,28 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<path
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<path
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
1
|
+
<svg width="326" height="312" viewBox="0 0 326 312" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<ellipse cx="85.5" cy="156" rx="85" ry="84" fill="#FC3151"/>
|
|
3
|
+
<ellipse cx="240.5" cy="228" rx="85" ry="84" fill="#FC3151"/>
|
|
4
|
+
<g clip-path="url(#clip0_3960_7751)">
|
|
5
|
+
<mask id="mask0_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="77" y="30" width="146" height="147">
|
|
6
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 252.971 105.64)" fill="#D9D9D9"/>
|
|
7
|
+
</mask>
|
|
8
|
+
<g mask="url(#mask0_3960_7751)">
|
|
9
|
+
<rect width="150.458" height="71.3627" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 254.1 106.015)" fill="#FC3151"/>
|
|
10
|
+
</g>
|
|
11
|
+
</g>
|
|
12
|
+
<g clip-path="url(#clip1_3960_7751)">
|
|
13
|
+
<mask id="mask1_3960_7751" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="168" width="149" height="143">
|
|
14
|
+
<ellipse cx="74.1657" cy="71.0964" rx="74.1657" ry="71.0964" transform="matrix(1 0 0 -1 7.5 310.83)" fill="#D9D9D9"/>
|
|
15
|
+
</mask>
|
|
16
|
+
<g mask="url(#mask1_3960_7751)">
|
|
17
|
+
<rect width="150.458" height="71.3627" transform="matrix(1 0 0 -1 6.4375 311.362)" fill="#FC3151"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<defs>
|
|
21
|
+
<clipPath id="clip0_3960_7751">
|
|
22
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(202.887 155.724) rotate(-135)"/>
|
|
23
|
+
</clipPath>
|
|
24
|
+
<clipPath id="clip1_3960_7751">
|
|
25
|
+
<rect width="148.331" height="71.8952" fill="white" transform="translate(7.5 240)"/>
|
|
26
|
+
</clipPath>
|
|
27
|
+
</defs>
|
|
19
28
|
</svg>
|
|
Binary file
|
|
@@ -4,6 +4,7 @@ import Button from '@/components/atoms/Button/Button.component'
|
|
|
4
4
|
import { ISlider } from './Slider.interface'
|
|
5
5
|
import Icon from '@/components/atoms/Icon/Icon.component'
|
|
6
6
|
import { StyledSlider } from './Slider.theme'
|
|
7
|
+
import isTouchDevice from '@/helpers/isTouchDevice'
|
|
7
8
|
import { useBlazeSlider } from './Slider.utils'
|
|
8
9
|
|
|
9
10
|
const Slider = ({
|
|
@@ -15,6 +16,7 @@ const Slider = ({
|
|
|
15
16
|
autoplay,
|
|
16
17
|
spacing,
|
|
17
18
|
mediaQueries,
|
|
19
|
+
mobileOnly,
|
|
18
20
|
className,
|
|
19
21
|
style,
|
|
20
22
|
children,
|
|
@@ -26,6 +28,8 @@ const Slider = ({
|
|
|
26
28
|
let elRef: any = null
|
|
27
29
|
let sliderRef: any = null
|
|
28
30
|
|
|
31
|
+
const isMobile = isTouchDevice();
|
|
32
|
+
|
|
29
33
|
const setConfig = () => {
|
|
30
34
|
if (sliderRef?.current) sliderRef.current.destroy()
|
|
31
35
|
responsiveCSS = `
|
|
@@ -101,11 +105,17 @@ const Slider = ({
|
|
|
101
105
|
// mediaQueries
|
|
102
106
|
// ])
|
|
103
107
|
|
|
104
|
-
|
|
108
|
+
if (mobileOnly) {
|
|
109
|
+
isMobile && setConfig();
|
|
110
|
+
} else {
|
|
111
|
+
setConfig();
|
|
112
|
+
}
|
|
113
|
+
|
|
105
114
|
|
|
106
115
|
return (
|
|
107
116
|
<StyledSlider
|
|
108
117
|
$responsiveCSS={responsiveCSS}
|
|
118
|
+
$mobileOnly={mobileOnly}
|
|
109
119
|
className={className}
|
|
110
120
|
style={style}
|
|
111
121
|
>
|
|
@@ -71,3 +71,45 @@ export const Simple: StoryObj<ISlider> = {
|
|
|
71
71
|
dots: true
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
export const MobileOnly: StoryObj<ISlider> = {
|
|
77
|
+
render: args => (
|
|
78
|
+
<div
|
|
79
|
+
style={{
|
|
80
|
+
maxWidth: '750px',
|
|
81
|
+
margin: 'auto'
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<Slider
|
|
85
|
+
slidesToShow={2}
|
|
86
|
+
slidesToScroll={1}
|
|
87
|
+
infinite={false}
|
|
88
|
+
spacing={'1rem'}
|
|
89
|
+
autoplay={false}
|
|
90
|
+
mediaQueries={{
|
|
91
|
+
900: {
|
|
92
|
+
slidesToShow: 2,
|
|
93
|
+
autoplay: true,
|
|
94
|
+
},
|
|
95
|
+
500: {
|
|
96
|
+
slidesToShow: 1
|
|
97
|
+
}
|
|
98
|
+
}}
|
|
99
|
+
{...args}
|
|
100
|
+
>
|
|
101
|
+
<div style={{ maxWidth: "100%" }}>{image}</div>
|
|
102
|
+
<div style={{ maxWidth: "25%" }}>{image}</div>
|
|
103
|
+
<div style={{ maxWidth: "25%" }}>{image}</div>
|
|
104
|
+
<div style={{ maxWidth: "25%" }}>{image}</div>
|
|
105
|
+
<div style={{ maxWidth: "25%" }}>{image}</div>
|
|
106
|
+
<div style={{ maxWidth: "25%" }}>{image}</div>
|
|
107
|
+
</Slider>
|
|
108
|
+
</div>
|
|
109
|
+
),
|
|
110
|
+
args: {
|
|
111
|
+
...Simple.args,
|
|
112
|
+
mobileOnly: true
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
@@ -3,10 +3,7 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
|
|
4
4
|
import { ISlider } from './Slider.interface';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
position:relative;
|
|
8
|
-
width: 100%;
|
|
9
|
-
|
|
6
|
+
const SliderStyles = `
|
|
10
7
|
//vendor styles
|
|
11
8
|
.blaze-slider {
|
|
12
9
|
/* default config */
|
|
@@ -36,16 +33,9 @@ export const StyledSlider = styled.div<ISlider>`
|
|
|
36
33
|
);
|
|
37
34
|
}
|
|
38
35
|
|
|
39
|
-
.blaze-track,
|
|
40
|
-
.blaze-track > div {
|
|
41
|
-
box-sizing: border-box;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
36
|
.blaze-track > div {
|
|
45
|
-
position: relative;
|
|
46
37
|
width: var(--slide-width);
|
|
47
|
-
|
|
48
|
-
max-width: unset;
|
|
38
|
+
max-width: unset !important;
|
|
49
39
|
flex-shrink: 0;
|
|
50
40
|
}
|
|
51
41
|
|
|
@@ -120,5 +110,47 @@ export const StyledSlider = styled.div<ISlider>`
|
|
|
120
110
|
${({ $responsiveCSS }) => $responsiveCSS && `
|
|
121
111
|
${$responsiveCSS};
|
|
122
112
|
`}
|
|
113
|
+
|
|
114
|
+
${({ $mobileOnly }) => $mobileOnly && `
|
|
115
|
+
@media only screen and (min-width: ${responsiveMedia}) {
|
|
116
|
+
.blaze-track{
|
|
117
|
+
flex-flow: row wrap;
|
|
118
|
+
width: 100% !important;
|
|
119
|
+
max-width: 100% !important;
|
|
120
|
+
transform: none !important;
|
|
121
|
+
gap: 0 !important;
|
|
122
|
+
|
|
123
|
+
&>div{
|
|
124
|
+
width: 100% !important;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.blaze-arrows,
|
|
129
|
+
.blaze-controls{
|
|
130
|
+
display:none;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
`}
|
|
123
134
|
}
|
|
124
135
|
`;
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
export const StyledSlider = styled.div<ISlider>`
|
|
139
|
+
position:relative;
|
|
140
|
+
width: 100%;
|
|
141
|
+
|
|
142
|
+
${({ $mobileOnly }) => $mobileOnly ? (`
|
|
143
|
+
@media only screen and (max-width: ${responsiveMedia}) {
|
|
144
|
+
${SliderStyles}
|
|
145
|
+
}
|
|
146
|
+
@media only screen and (min-width: ${responsiveMedia}) {
|
|
147
|
+
.blaze-controls{
|
|
148
|
+
display:none;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
`)
|
|
152
|
+
: (`
|
|
153
|
+
${SliderStyles}
|
|
154
|
+
`)}
|
|
155
|
+
|
|
156
|
+
`;
|
|
@@ -47,11 +47,13 @@ export const StyledTabsContent = styled.div<ITabsItem>`
|
|
|
47
47
|
border-radius: 48px 0;
|
|
48
48
|
padding: 36px;
|
|
49
49
|
|
|
50
|
-
min-height: 40rem;
|
|
51
|
-
|
|
52
50
|
opacity: 0;
|
|
53
51
|
transform: translateY(40px);
|
|
54
52
|
|
|
53
|
+
@media only screen and (min-width: ${responsiveMedia}) {
|
|
54
|
+
min-height: 40rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
55
57
|
& > span{
|
|
56
58
|
display: flex;
|
|
57
59
|
align-items:center;
|
package/src/styles/utilities.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
colors,
|
|
3
|
+
desktop_width,
|
|
3
4
|
gradients,
|
|
4
5
|
grid_conf,
|
|
5
6
|
radius,
|
|
@@ -12,17 +13,15 @@ import {
|
|
|
12
13
|
} from './variables';
|
|
13
14
|
|
|
14
15
|
export const fontSize = (typo: string) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
font-size: ${typography[typo].sizeMob};
|
|
16
|
+
const size = parseInt(typography[typo].size as string);
|
|
17
|
+
const percentage = 0.2;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
` : `
|
|
23
|
-
font-size: ${typography[typo].size};
|
|
24
|
-
`}
|
|
19
|
+
const min = typography[typo].sizeMob ?? typography[typo].size; // check if size mobile exists
|
|
20
|
+
const max = ((size / desktop_width) * 100).toFixed(3); // get vw value divise font size for desktop width
|
|
21
|
+
const range = Math.ceil(size + (size * percentage)); // use desktop font-size and add a range of percentage
|
|
25
22
|
|
|
23
|
+
return `
|
|
24
|
+
font-size: clamp(${min}, ${max}vw, ${range}px);
|
|
26
25
|
line-height: ${typography[typo].height};
|
|
27
26
|
`
|
|
28
27
|
}
|
package/src/styles/variables.ts
CHANGED
|
@@ -7,9 +7,9 @@ export const alternativeFont = "Red Hat Display";
|
|
|
7
7
|
|
|
8
8
|
export const gutter = pxToRem(8); //needs to be in this file
|
|
9
9
|
|
|
10
|
-
export const desktop_width =
|
|
11
|
-
export const tablet_width =
|
|
12
|
-
export const mobile_width =
|
|
10
|
+
export const desktop_width:number = 1620; //container size of design on desktop
|
|
11
|
+
export const tablet_width:number = 768; //container size of design on tablet
|
|
12
|
+
export const mobile_width:number = 375; //container size of design on mobile
|
|
13
13
|
export const responsiveMedia = "980px"; //mobile media value for bootstrap
|
|
14
14
|
export const mobileMedia = "360px"; //mobile media value
|
|
15
15
|
|
|
@@ -89,38 +89,38 @@ export const spacesNegative = <Record<string, string>>{
|
|
|
89
89
|
//if responsive is not needed for a size just set the size as px instead of rem
|
|
90
90
|
export const typography = <Record<string, Record<string, unknown>>>{
|
|
91
91
|
display: {
|
|
92
|
-
size:
|
|
93
|
-
sizeMob:
|
|
92
|
+
size: "250px",
|
|
93
|
+
sizeMob: "64px",
|
|
94
94
|
height: 1.2,
|
|
95
95
|
},
|
|
96
96
|
h1: {
|
|
97
|
-
size:
|
|
98
|
-
sizeMob:
|
|
97
|
+
size: "120px",
|
|
98
|
+
sizeMob: "48px",
|
|
99
99
|
height: 1.2,
|
|
100
100
|
},
|
|
101
101
|
h2: {
|
|
102
|
-
size:
|
|
103
|
-
sizeMob:
|
|
102
|
+
size: "80px",
|
|
103
|
+
sizeMob: "36px",
|
|
104
104
|
height: 1.2,
|
|
105
105
|
},
|
|
106
106
|
h3: {
|
|
107
|
-
size:
|
|
108
|
-
sizeMob:
|
|
107
|
+
size: "48px",
|
|
108
|
+
sizeMob: "24px",
|
|
109
109
|
height: 1.2,
|
|
110
110
|
},
|
|
111
111
|
h4: {
|
|
112
|
-
size:
|
|
113
|
-
sizeMob:
|
|
112
|
+
size: "36px",
|
|
113
|
+
sizeMob: "20px",
|
|
114
114
|
height: 1.2,
|
|
115
115
|
},
|
|
116
116
|
h5: {
|
|
117
|
-
size:
|
|
118
|
-
sizeMob:
|
|
117
|
+
size: "24px",
|
|
118
|
+
sizeMob: "18px",
|
|
119
119
|
height: 1.4,
|
|
120
120
|
},
|
|
121
121
|
h6: {
|
|
122
|
-
size:
|
|
123
|
-
sizeMob:
|
|
122
|
+
size: "18px",
|
|
123
|
+
sizeMob: "16px",
|
|
124
124
|
height: 1.4,
|
|
125
125
|
},
|
|
126
126
|
texts: {
|