pixel-react-excel-sheet 1.0.91 → 1.0.93

package/lib/styles/Typography.scss

@@ -1,25 +1,99 @@
-@mixin fontPoppins($size: 16px) {
-  font-family: 'Poppins', sans-serif;
-  font-size: $size;
+@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;
 }
 
-.ff-text {
-  @include fontPoppins();
+.font-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+}
 
-  &--regular {
-    font-weight: 400;
-  }
-  &--medium {
-    font-weight: 500;
-  }
-  &--semi-bold {
+.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;
   }
-  &--bold {
+
+  .font-sample {
+    @extend .font-size-80;
     font-weight: 700;
   }
-  .required-asterisk {
-    color: var(--input-error-text-color);
-    padding-right: 4px;
+
+  .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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react-excel-sheet",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",