pixel-react 1.6.8 → 1.6.9

package/src/StyleGuide/Typography/Typography.scss

@@ -1,99 +1,99 @@
-@use '../../assets/styles/fonts';
-
-.typography-container {
-  .typography-header {
-    & div {
-      @extend .font2Xl;
-      font-weight: 600;
-    }
-    & span {
-      @extend .fontSm;
-      font-weight: 400;
-      color: var(--tooltip-bg-color); // need to change color #7A7A7A
-    }
-  }
-}
-.font-display {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.font-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 20px;
-}
-
-.font-left {
-  width: 60%;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-color);
-  padding: 10px;
-  gap: 10px;
-
-  .font-name {
-    @extend .fontLg;
-    font-weight: 600;
-  }
-
-  .font-sample {
-    @extend .font-size-80;
-    font-weight: 700;
-  }
-
-  .font-characters {
-    @extend .font2Xl;
-    font-weight: 400;
-    line-height: 36px;
-    letter-spacing: 0.16em;
-    white-space: pre;
-  }
-}
-
-.font-right {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 20px;
-  gap: 20px;
-
-  .font-right-section {
-    display: flex;
-    align-items: center;
-
-    .font-sample-large {
-      font-size: 40px;
-      margin-right: 10px;
-    }
-
-    // Apply specific font weight different sections
-    &.bold {
-      @extend .font2Xl;
-      font-weight: 700;
-    }
-    &.semi-bold {
-      @extend .font2Xl;
-      font-weight: 600;
-    }
-    &.regular {
-      @extend .font2Xl;
-      font-weight: 400;
-    }
-
-    .font-info {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-
-      // Specific styling for the font-size part
-      .font-size {
-        @extend .fontLg;
-        font-weight: 400;
-        color: var(--tooltip-bg-color);
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+
+.typography-container {
+  .typography-header {
+    & div {
+      @extend .font2Xl;
+      font-weight: 600;
+    }
+    & span {
+      @extend .fontSm;
+      font-weight: 400;
+      color: var(--tooltip-bg-color); // need to change color #7A7A7A
+    }
+  }
+}
+.font-display {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.font-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+}
+
+.font-left {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-color);
+  padding: 10px;
+  gap: 10px;
+
+  .font-name {
+    @extend .fontLg;
+    font-weight: 600;
+  }
+
+  .font-sample {
+    @extend .font-size-80;
+    font-weight: 700;
+  }
+
+  .font-characters {
+    @extend .font2Xl;
+    font-weight: 400;
+    line-height: 36px;
+    letter-spacing: 0.16em;
+    white-space: pre;
+  }
+}
+
+.font-right {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px;
+  gap: 20px;
+
+  .font-right-section {
+    display: flex;
+    align-items: center;
+
+    .font-sample-large {
+      font-size: 40px;
+      margin-right: 10px;
+    }
+
+    // Apply specific font weight different sections
+    &.bold {
+      @extend .font2Xl;
+      font-weight: 700;
+    }
+    &.semi-bold {
+      @extend .font2Xl;
+      font-weight: 600;
+    }
+    &.regular {
+      @extend .font2Xl;
+      font-weight: 400;
+    }
+
+    .font-info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      // Specific styling for the font-size part
+      .font-size {
+        @extend .fontLg;
+        font-weight: 400;
+        color: var(--tooltip-bg-color);
+      }
+    }
+  }
+}

package/src/StyleGuide/Typography/Typography.stories.tsx

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Typography from './Typography';
-
-const meta: Meta<typeof Typography> = {
-  title: 'StyleGuide/Typography',
-  component: Typography,
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Typography>;
-
-export const AllFonts: Story = {
-  args: {},
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  title: 'StyleGuide/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Typography>;
+
+export const AllFonts: Story = {
+  args: {},
+};
+
+export default meta;

package/src/StyleGuide/Typography/Typography.tsx

@@ -1,60 +1,60 @@
-import './Typography.scss';
-
-const Typography = () => {
-  return (
-    <div className="typography-container">
-      <div className="typography-header">
-        <div>_Typography</div>
-        <span>
-          Our design system leverages a purposeful set of typography styles.
-          We'he stress-tested this typographic scale across dozens of projects
-          to make sure it's robust enough to use across (almost) any project,
-          while remaining as accessible as possible for everyone.
-        </span>
-      </div>
-      <div className="font-display">
-        <div className="font-row">
-          <div className="font-left">
-            <div className="font-name">Poppins</div>
-            <div className="font-sample">Aa</div>
-            <div className="font-characters">
-              ABCDEFGHIJKLMNOPQRSTUVWXYZ
-              <br />
-              abcdefghijklmnopqrstuvwxyz
-              <br />
-              0123456789
-              <br />
-              !@#$%^&*()
-            </div>
-          </div>
-
-          <div className="font-right">
-            <div className="font-right-section bold">
-              <div className="font-sample-large">Aa</div>
-              <div className="font-info">
-                <span>Bold</span>
-                <div className="font-size">font size: 12px = 0.75rem</div>
-              </div>
-            </div>
-            <div className="font-right-section semi-bold">
-              <div className="font-sample-large">Aa</div>
-              <div className="font-info">
-                <span>SemiBold</span>
-                <div className="font-size">font size: 12px = 0.75rem</div>
-              </div>
-            </div>
-            <div className="font-right-section regular">
-              <div className="font-sample-large">Aa</div>
-              <div className="font-info">
-                <span>Regular</span>
-                <div className="font-size">font size: 12px = 0.75rem</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Typography;
+import './Typography.scss';
+
+const Typography = () => {
+  return (
+    <div className="typography-container">
+      <div className="typography-header">
+        <div>_Typography</div>
+        <span>
+          Our design system leverages a purposeful set of typography styles.
+          We'he stress-tested this typographic scale across dozens of projects
+          to make sure it's robust enough to use across (almost) any project,
+          while remaining as accessible as possible for everyone.
+        </span>
+      </div>
+      <div className="font-display">
+        <div className="font-row">
+          <div className="font-left">
+            <div className="font-name">Poppins</div>
+            <div className="font-sample">Aa</div>
+            <div className="font-characters">
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
+              0123456789
+              <br />
+              !@#$%^&*()
+            </div>
+          </div>
+
+          <div className="font-right">
+            <div className="font-right-section bold">
+              <div className="font-sample-large">Aa</div>
+              <div className="font-info">
+                <span>Bold</span>
+                <div className="font-size">font size: 12px = 0.75rem</div>
+              </div>
+            </div>
+            <div className="font-right-section semi-bold">
+              <div className="font-sample-large">Aa</div>
+              <div className="font-info">
+                <span>SemiBold</span>
+                <div className="font-size">font size: 12px = 0.75rem</div>
+              </div>
+            </div>
+            <div className="font-right-section regular">
+              <div className="font-sample-large">Aa</div>
+              <div className="font-info">
+                <span>Regular</span>
+                <div className="font-size">font size: 12px = 0.75rem</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Typography;

package/src/StyleGuide/Typography/TypographyList.ts

@@ -1,3 +1,3 @@
-export const fontData = [
-  { name: 'Poppins', fontSizePx: '12px', fontSizeRem: '0.75rem' },
-];
+export const fontData = [
+  { name: 'Poppins', fontSizePx: '12px', fontSizeRem: '0.75rem' },
+];

package/src/StyleGuide/Typography/types.ts

@@ -1,9 +1,9 @@
-export interface FontData {
-  name: string;
-  fontSizePx: string;
-  fontSizeRem: string;
-}
-
-export interface TypographyProps {
-  fonts: FontData[];
-}
+export interface FontData {
+  name: string;
+  fontSizePx: string;
+  fontSizeRem: string;
+}
+
+export interface TypographyProps {
+  fonts: FontData[];
+}