mayak-common-library-payload 0.1.0

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.
@@ -0,0 +1,207 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ corePlugins: {
4
+ preflight: false,
5
+ },
6
+ important: 'body',
7
+ content: [
8
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
9
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
10
+ './src/**/*.{js,ts,jsx,tsx,mdx}',
11
+ ],
12
+ theme: {
13
+ extend: {
14
+ keyframes: {
15
+ showSelect: {
16
+ '0%': { opacity: '0', transform: 'translateY(2rem)' },
17
+ '100%': { opacity: '1', transform: 'translateY(0)' },
18
+ },
19
+ hideSelect: {
20
+ '0%': { opacity: '1', transform: 'translateY(0)' },
21
+ '100%': { opacity: '0', transform: 'translateY(2rem)' },
22
+ },
23
+ },
24
+ animation: {
25
+ selectOpen: 'showSelect 0.3s ease-out',
26
+ selectClose: 'hideSelect 0.2s ease-out',
27
+ },
28
+ backgroundImage: {
29
+ 'custom-gradient':
30
+ 'linear-gradient(83.29deg, rgba(200, 188, 161, 0.7) 9.26%, rgba(98, 92, 79, 0.7) 113.9%), linear-gradient(267.16deg, rgba(200, 188, 161, 0) 38.42%, #C8BCA1 58.56%)',
31
+ 'custom-gradient-bottom':
32
+ 'linear-gradient(0deg, rgba(200, 188, 161, 0.7) 9.26%, rgba(98, 92, 79, 0.7) 113.9%), linear-gradient(180deg, rgba(200, 188, 161, 0) 38.42%, #C8BCA1 91.56%)',
33
+ 'black-bottom-gradient':
34
+ 'linear-gradient(180deg, rgba(0, 0, 0, 0) 68%, #000000 100%)',
35
+ },
36
+ boxShadow: {
37
+ sm: '0 8px 24px 0 #00000029',
38
+ },
39
+ fontSize: {
40
+ 10: ['10px', '12px'],
41
+ 11: ['11px', '11px'],
42
+ 12: ['12px', '16px'],
43
+ 14: ['14px', '20px'],
44
+ 16: ['16px', '20px'],
45
+ 18: ['18px', '19px'],
46
+ 20: ['20px', '22px'],
47
+ 22: ['22px', '26px'],
48
+ 24: ['24px', '30px'],
49
+ 26: ['26px', '31px'],
50
+ 28: ['28px', '31px'],
51
+ 30: ['30px', '33px'],
52
+ 32: ['32px', '35px'],
53
+ 34: ['34px', '38px'],
54
+ 40: ['40px', '48px'],
55
+ 50: ['50px', '55px'],
56
+ 60: ['60px', '66px'],
57
+ 100: ['100px', '110px'],
58
+ },
59
+ fontWeight: {
60
+ 400: 400,
61
+ 800: 800,
62
+ },
63
+ height: {
64
+ 4.5: '18px',
65
+ 5.5: '22px',
66
+ 6.5: '26px',
67
+ 8.5: '33px',
68
+ 9.5: '38px',
69
+ 12.5: '50px',
70
+ 50: '200px',
71
+ 90: '350px',
72
+ 25: '100px',
73
+ },
74
+ width: {
75
+ 4.5: '18px',
76
+ 5.5: '22px',
77
+ 6.5: '26px',
78
+ 12.5: '50px',
79
+ 25: '100px',
80
+ fill: '-webkit-fill-available',
81
+ },
82
+ padding: {
83
+ 4.5: '18px',
84
+ 5.5: '22px',
85
+ 6.5: '26px',
86
+ 7.5: '30px',
87
+ '19px': '19px',
88
+ 12.5: '50px',
89
+ 15: '60px',
90
+ 17: '70px',
91
+ 25: '100px',
92
+ },
93
+ margin: {
94
+ 4.5: '18px',
95
+ 5.5: '22px',
96
+ 6.5: '26px',
97
+ 7.5: '30px',
98
+ 12.5: '50px',
99
+ 15: '60px',
100
+ 25: '100px',
101
+ },
102
+ gap: {
103
+ 4.5: '18px',
104
+ 5.5: '22px',
105
+ 6.5: '26px',
106
+ 7.5: '30px',
107
+ 12.5: '50px',
108
+ 15: '60px',
109
+ 17: '70px',
110
+ 25: '100px',
111
+ },
112
+ spacing: {
113
+ 7.5: '30px',
114
+ 12.5: '50px',
115
+ 15: '60px',
116
+ 25: '100px',
117
+ },
118
+ inset: {
119
+ 6.5: '26px',
120
+ 7.5: '30px',
121
+ 12.5: '50px',
122
+ 15: '60px',
123
+ 25: '100px',
124
+ },
125
+ lineHeight: {
126
+ 100: '100%',
127
+ 110: '110%',
128
+ 120: '120%',
129
+ 130: '130%',
130
+ 140: '140%',
131
+ 150: '150%',
132
+ 160: '160%',
133
+ 167: '167%',
134
+ },
135
+ objectPosition: {
136
+ '100-bottom': '100px bottom',
137
+ },
138
+ maxWidth: {
139
+ 'screen-xl': '1200px',
140
+ },
141
+ colors: {
142
+ gold2: '#99835F', // Define your gold color here
143
+ gold: '#C8BCA1', // Define your gold color here
144
+ 'accent-black': '#000000',
145
+ 'accent-dark': '#343434',
146
+ 'accent-white': '#ffffff',
147
+ 'accent-beige': '#C8BCA1',
148
+ 'accent-beige-2': '#A0916F',
149
+ 'accent-silver': '#F5F5F5',
150
+ 'accent-silver-2': '#939393',
151
+ 'accent-silver-3': '#757575',
152
+ 'accent-silver-4': '#ECECEC',
153
+ 'accent-silver-5': '#DBDBDB',
154
+ 'accent-disable': '#CFCFCF',
155
+ 'accent-grey-medium': '#D0CED2',
156
+ 'accent-red': '#D2132A',
157
+ primary: {
158
+ light: '#EAEDF6',
159
+ main: '#3041C7',
160
+ dark: '#000320',
161
+ accent: '#0f30ab',
162
+ 'contrast-text': '#ffffff',
163
+ },
164
+ },
165
+ screens: {
166
+ xxs: { max: '390px' },
167
+ xs: { max: '649px' },
168
+ tab: { max: '800px' },
169
+ sm: { max: '900px' },
170
+ laptop: { min: '901px', max: '1000px' },
171
+ md: { max: '1270px' },
172
+ lg: { max: '1536px' },
173
+ portrait: { raw: '(orientation: portrait)' },
174
+ landscape: { raw: '(orientation: landscape)' },
175
+ 'landscape-no-standard': {
176
+ raw: '(orientation: landscape) and (max-width: 1200px) and (max-height: 580px)',
177
+ },
178
+ 'sm-only': { min: '650px', max: '750px' },
179
+ '800-900': { min: '800px', max: '900px' },
180
+ },
181
+ },
182
+ },
183
+ variants: {
184
+ extend: {
185
+ textColor: ['group-hover'],
186
+ // transform: ['responsive', 'hover', 'focus', 'motion-safe'],
187
+ },
188
+ },
189
+ plugins: [
190
+ function ({ addUtilities }) {
191
+ addUtilities({
192
+ '.filter-dark': {
193
+ filter:
194
+ 'invert(18%) sepia(13%) saturate(19%) hue-rotate(5deg) brightness(60%) contrast(90%)',
195
+ },
196
+ '.filter-white': {
197
+ filter:
198
+ 'brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(0%) hue-rotate(92deg) brightness(106%) contrast(107%)',
199
+ },
200
+ '.filter-beige': {
201
+ filter:
202
+ 'brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(705%) hue-rotate(4deg) brightness(105%) contrast(87%)',
203
+ },
204
+ })
205
+ },
206
+ ],
207
+ }
package/theme.ts ADDED
@@ -0,0 +1,28 @@
1
+ 'use client'
2
+ import './styles/globals.scss'
3
+ import 'keen-slider/keen-slider.min.css'
4
+ import { createTheme } from '@mui/material/styles'
5
+
6
+ const _theme = {
7
+ typography: {
8
+ fontFamily: 'RockStar, sans-serif',
9
+ body1: {
10
+ fontSize: 14,
11
+ lineHeight: '20px',
12
+ },
13
+ },
14
+ body: {
15
+ backgroundColor: '#F5F5F5',
16
+ },
17
+ breakpoints: {
18
+ values: {
19
+ xs: 0,
20
+ sm: 650,
21
+ md: 900,
22
+ lg: 1200,
23
+ xl: 1536,
24
+ },
25
+ },
26
+ }
27
+
28
+ export const theme = createTheme({ palette: { mode: 'light' }, ..._theme })