Merge pull request #18 from ttab/feature/ele-277-add-necessary-font-w…

…eights-in-elephant-ui-for-inter

Added font weights for light, medium, bold and extra bold

src/showroom/app.tsx

@@ -12,9 +12,11 @@ import { BadgeExample } from './components/badge'
 import { TooltipExample } from './components/tooltip'
 import { TabsExample } from './components/tabs'
 import { CalendarExample } from './components/calendar'
+import { TypographyExample } from './components/typography'
 
 export function App(): JSX.Element {
   return <div className="grid grid-cols-2 gap-4 gap-y-8 max-w-[900px] m-10">
+    <TypographyExample />
     <ButtonExample />
     <InputExample />
     <PopoverExample />

src/showroom/components/typography.tsx

@@ -0,0 +1,62 @@
+import { Header } from '../header'
+import { Code } from '../code'
+
+export function TypographyExample(): JSX.Element {
+  const exampleString = 'å ä æ ö ø Þ ß Å Ä Æ Ö Ø þ'
+
+  return <>
+    <Header>Typography</Header>
+
+    <div>
+      <div className="font-light">
+        Light text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-light">
+Normal text
+</div>`} />
+
+    <div>
+      <div className="font-normal">
+        Normal text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-normal">
+Normal text
+</div>`} />
+
+    <div>
+      <div className="font-medium">
+        Medium text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-medium">
+Medium text
+</div>`} />
+
+    <div>
+      <div className="font-bold">
+        Bold text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-bold">
+Bold text
+</div>`} />
+
+    <div>
+      <div className="font-extrabold">
+        Extra bold text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-extrabold">
+Extra bold text
+</div>`} />
+
+
+  </>
+}

src/styles/inter.css

@@ -1,9 +1,49 @@
+/* inter-latin-300-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url(./assets/inter-latin-300-normal.woff2) format('woff2'), url(./assets/inter-latin-300-normal.woff) format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* inter-latin-400-normal */
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-display: swap;
   font-weight: 400;
   src: url(../assets/inter-latin-400-normal.woff2) format('woff2'), url(../assets/inter-latin-400-normal.woff) format('woff');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* inter-latin-500-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(../assets/inter-latin-500-normal.woff2) format('woff2'), url(../assets/inter-latin-500-normal.woff) format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* inter-latin-700-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(../assets/inter-latin-700-normal.woff2) format('woff2'), url(../assets/inter-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* inter-latin-800-normal */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src: url(../assets/inter-latin-800-normal.woff2) format('woff2'), url(../assets/inter-latin-800-normal.woff) format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

vite.config.ts

@@ -44,7 +44,7 @@ export default defineConfig({
           dest: './styles'
         },
         {
-          src: 'node_modules/@fontsource/inter/files/inter-latin-400-normal.{woff,woff2}',
+          src: 'node_modules/@fontsource/inter/files/inter-latin-{300,400,500,700,800}-normal.{woff,woff2}',
           dest: './styles'
         }
       ]