@ludo.ninja/components 1.1.8 → 1.2.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.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/src/fonts/FontsInitializeLayout.tsx +37 -43
  3. package/src/fonts/index.ts +2 -0
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@ludo.ninja/components",
3
- "version": "1.1.8",
3
+ "version": "1.2.0",
4
4
  "private": false,
5
5
  "scripts": {
6
- "dev": "next dev -p 3000",
6
+ "dev": "next dev -p 4000",
7
7
  "build": "next build",
8
8
  "start": "next start",
9
9
  "analyze": "cross-env ANALYZE=true next build",
package/src/fonts/FontsInitializeLayout.tsx CHANGED
@@ -6,167 +6,161 @@ import { css } from 'styled-components';
6
6
 
7
7
  import { poppinsFontVarCss } from '@/fonts/vars';
8
8
 
9
- // const poppinsFont = Poppins({
10
- // subsets: ['latin'],
11
- // style: ['normal'],
12
- // weight: ['200', '300', '400', '500', '600', '700', '800'],
13
- // });
14
-
15
9
  const fallbackPoppins = 'LocalPoppinsFont, sans-serif';
16
10
  const fallbackDMSans = 'LocalDMSansFont';
17
11
 
18
12
  const poppinsFont = Poppins({
19
13
  subsets: ['latin'],
20
14
  weight: ['200', '300', '400', '500', '600', '700', '800'],
21
- variable: '--PoppinsFont', //poppinsFontVarCss.variable
22
- fallback: ['LocalPoppinsFont, sans-serif'], // fallbackPoppins
15
+ variable: '--PoppinsFont',
16
+ fallback: ['LocalPoppinsFont, sans-serif'],
23
17
  });
24
18
 
25
19
  const dmsansFont = DM_Sans({
26
20
  subsets: ['latin'],
27
21
  style: ['normal', 'italic'],
28
22
  weight: ['400', '500', '600', '700'],
29
- variable: '--DMSansFont', //dmsansFontVarCss.variable
30
- fallback: ['LocalDMSansFont'], // fallbackDMSans
23
+ variable: '--DMSansFont',
24
+ fallback: ['LocalDMSansFont'],
31
25
  });
32
26
 
33
27
  const FontsInitializeLayout = ({ children }: { children: ReactNode }) => {
34
28
  useEffect(() => {
35
- // update fonts to react portal elements
36
29
  document.body.classList.add(poppinsFont.variable);
37
30
  document.body.classList.add(dmsansFont.variable);
38
- document.body.style.fontFamily = poppinsFontVarCss.css; // initial font family
31
+ document.body.style.fontFamily = poppinsFontVarCss.css;
39
32
  }, []);
40
33
 
41
34
  return (
42
35
  <main
43
- style={{ fontFamily: poppinsFontVarCss.css }} // initial font family
36
+ style={{ fontFamily: poppinsFontVarCss.css }}
44
37
  className={`${dmsansFont.variable} ${poppinsFont.variable}`}
45
38
  >
46
39
  {children}
47
40
  </main>
48
41
  );
49
42
  };
43
+
50
44
  export const GlobalFontsFallback = css`
51
45
  /* poppins-200 - latin */
52
46
  @font-face {
53
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
47
+ font-display: swap;
54
48
  font-family: ${fallbackPoppins};
55
49
  font-style: normal;
56
50
  font-weight: 200;
57
- src: url('/fonts/poppins-v21-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
51
+ src: url('/fonts/poppins-v21-latin-200.woff2') format('woff2');
58
52
  }
59
53
  /* poppins-300 - latin */
60
54
  @font-face {
61
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
55
+ font-display: swap;
62
56
  font-family: ${fallbackPoppins};
63
57
  font-style: normal;
64
58
  font-weight: 300;
65
- src: url('/fonts/poppins-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
59
+ src: url('/fonts/poppins-v21-latin-300.woff2') format('woff2');
66
60
  }
67
61
  /* poppins-regular - latin */
68
62
  @font-face {
69
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
63
+ font-display: swap;
70
64
  font-family: ${fallbackPoppins};
71
65
  font-style: normal;
72
66
  font-weight: 400;
73
- src: url('/fonts/poppins-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
67
+ src: url('/fonts/poppins-v21-latin-regular.woff2') format('woff2');
74
68
  }
75
69
  /* poppins-500 - latin */
76
70
  @font-face {
77
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
71
+ font-display: swap;
78
72
  font-family: ${fallbackPoppins};
79
73
  font-style: normal;
80
74
  font-weight: 500;
81
- src: url('/fonts/poppins-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
75
+ src: url('/fonts/poppins-v21-latin-500.woff2') format('woff2');
82
76
  }
83
77
  /* poppins-600 - latin */
84
78
  @font-face {
85
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
79
+ font-display: swap;
86
80
  font-family: ${fallbackPoppins};
87
81
  font-style: normal;
88
82
  font-weight: 600;
89
- src: url('/fonts/poppins-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
83
+ src: url('/fonts/poppins-v21-latin-600.woff2') format('woff2');
90
84
  }
91
85
  /* poppins-700 - latin */
92
86
  @font-face {
93
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
87
+ font-display: swap;
94
88
  font-family: ${fallbackPoppins};
95
89
  font-style: normal;
96
90
  font-weight: 700;
97
- src: url('/fonts/poppins-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
91
+ src: url('/fonts/poppins-v21-latin-700.woff2') format('woff2');
98
92
  }
99
93
  /* poppins-800 - latin */
100
94
  @font-face {
101
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
95
+ font-display: swap;
102
96
  font-family: ${fallbackPoppins};
103
97
  font-style: normal;
104
98
  font-weight: 800;
105
- src: url('/fonts/poppins-v21-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
99
+ src: url('/fonts/poppins-v21-latin-800.woff2') format('woff2');
106
100
  }
107
101
  /* dm-sans-regular - latin */
108
102
  @font-face {
109
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
103
+ font-display: swap;
110
104
  font-family: ${fallbackDMSans};
111
105
  font-style: normal;
112
106
  font-weight: 400;
113
- src: url('/fonts/dm-sans-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
107
+ src: url('/fonts/dm-sans-v15-latin-regular.woff2') format('woff2');
114
108
  }
115
109
  /* dm-sans-italic - latin */
116
110
  @font-face {
117
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
111
+ font-display: swap;
118
112
  font-family: ${fallbackDMSans};
119
113
  font-style: italic;
120
114
  font-weight: 400;
121
- src: url('/fonts/dm-sans-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
115
+ src: url('/fonts/dm-sans-v15-latin-italic.woff2') format('woff2');
122
116
  }
123
117
  /* dm-sans-500 - latin */
124
118
  @font-face {
125
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
119
+ font-display: swap;
126
120
  font-family: ${fallbackDMSans};
127
121
  font-style: normal;
128
122
  font-weight: 500;
129
- src: url('/fonts/dm-sans-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
123
+ src: url('/fonts/dm-sans-v15-latin-500.woff2') format('woff2');
130
124
  }
131
125
  /* dm-sans-500italic - latin */
132
126
  @font-face {
133
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
127
+ font-display: swap;
134
128
  font-family: ${fallbackDMSans};
135
129
  font-style: italic;
136
130
  font-weight: 500;
137
- src: url('/fonts/dm-sans-v15-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
131
+ src: url('/fonts/dm-sans-v15-latin-500italic.woff2') format('woff2');
138
132
  }
139
133
  /* dm-sans-600 - latin */
140
134
  @font-face {
141
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
135
+ font-display: swap;
142
136
  font-family: ${fallbackDMSans};
143
137
  font-style: normal;
144
138
  font-weight: 600;
145
- src: url('/fonts/dm-sans-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
139
+ src: url('/fonts/dm-sans-v15-latin-600.woff2') format('woff2');
146
140
  }
147
141
  /* dm-sans-600italic - latin */
148
142
  @font-face {
149
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
143
+ font-display: swap;
150
144
  font-family: ${fallbackDMSans};
151
145
  font-style: italic;
152
146
  font-weight: 600;
153
- src: url('/fonts/dm-sans-v15-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
147
+ src: url('/fonts/dm-sans-v15-latin-600italic.woff2') format('woff2');
154
148
  }
155
149
  /* dm-sans-700 - latin */
156
150
  @font-face {
157
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
151
+ font-display: swap;
158
152
  font-family: ${fallbackDMSans};
159
153
  font-style: normal;
160
154
  font-weight: 700;
161
- src: url('/fonts/dm-sans-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
155
+ src: url('/fonts/dm-sans-v15-latin-700.woff2') format('woff2');
162
156
  }
163
157
  /* dm-sans-700italic - latin */
164
158
  @font-face {
165
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
159
+ font-display: swap;
166
160
  font-family: ${fallbackDMSans};
167
161
  font-style: italic;
168
162
  font-weight: 700;
169
- src: url('/fonts/dm-sans-v15-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
163
+ src: url('/fonts/dm-sans-v15-latin-700italic.woff2') format('woff2');
170
164
  }
171
165
  `;
172
166
 
package/src/fonts/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as FontsInitializeLayout } from './FontsInitializeLayout';
2
+ export * from './vars';