token

Author: Adithya Thejas

component/Accordion/Accordion.module.scss

@@ -12,24 +12,24 @@
 
 @keyframes accordion-down {
   from {
-    height: 0;
+    height: $accordian-height-up;
   }
   to {
-    height: 67px;
+    height: $accordian-height-down;
   }
 }
 
 @keyframes accordion-up {
   from {
-    height: 67px;
+    height: $accordian-height-down;
   }
   to {
-    height: 0;
+    height: $accordian-height-up;
   }
 }
 
 .accordian-primitive {
-  border-bottom-width: 1px;
+  border-bottom-width: $accordian-width-primary;
   color: $accordian-text-primary;
 }
 .accordion-primitive-trigger {
@@ -39,17 +39,17 @@
   background-image: none;
   display: flex;
   flex: 1 1 0%;
-  padding-top: 1rem;
-  padding-bottom: 1.2rem;
-  font-size: 16px;
-  font-weight: 500;
+  padding-top: $accordian-padding-primary;
+  padding-bottom: $accordian-padding-secondary;
+  font-size: $accordian-font-primary;
+  font-weight: $accordian-font-danger;
   justify-content: space-between;
   align-items: center;
   border-top: none;
   border-left: none;
   border-right: none;
   border-bottom-color: $accordian-border; // rgb(226, 232, 240)
-  border-bottom-width: 1px;
+  border-bottom-width: $accordian-width-primary;
   border-image-width: 1;
   color: $accordian-text; // #0F172A // #E1E7EF
 
@@ -62,16 +62,16 @@
   }
 }
 .chevron-down {
-  width: 1rem;
-  height: 1rem;
+  width: $accordian-width-secondary;
+  height: $accordian-height-primary;
   transition-property: transform;
   transition-duration: 200ms;
   color: $accordian-text;
 }
 
 .space {
   padding-top: 0;
-  padding-bottom: 1rem;
+  padding-bottom: $accordian-padding-primary;
 }
 
 .header {
@@ -81,9 +81,9 @@
 .accordion-primitive-content {
   overflow: hidden;
   transition-property: all;
-  font-size: 14px;
+  font-size: $accordian-font-secondary;
   line-height: 1.25rem;
-  font-weight: 100;
+  font-weight: $accordian-fontweight-primary;
 
   &[data-state="closed"] {
     @include animate-accordion-up;

next.config.js

@@ -14,3 +14,12 @@ module.exports = {
     prependData: `@import "colors.scss";`,
   },
 };
+
+// const paths = require("path");
+
+// module.exports = {
+//   sassOptions: {
+//     includePaths: [paths.join(__dirname, "styles")],
+//     prependData: `@import "spacing.scss";`,
+//   },
+// };

pages/index.tsx

@@ -47,7 +47,7 @@ export default function Home() {
 
       {/* <Input type={"email"} placeholder={"Email"} />
       <br></br> */}
-      {/* <AccordionDemo /> */}
+      <AccordionDemo />
       {/* <SelectDemo /> */}
       {/* <CheckboxDemo /> */}
       {/* <ContextMenuDemo /> */}
@@ -61,7 +61,7 @@ export default function Home() {
       {/* <NavigationMenuDemo /> */}
       {/* <ToggleDemo /> */}
       {/* <ToastDemo /> */}
-      <PopoverDemo />
+      {/* <PopoverDemo /> */}
     </>
   );
 }

styles/colors.scss

@@ -1,3 +1,5 @@
+@import "./spacing.scss";
+
 @function color($color-name) {
   @return var(--color-#{$color-name});
 }

styles/spacing.scss

@@ -1,16 +1,41 @@
+@function space($space-name) {
+  @return var(--space-#{$space-name});
+}
+
+$accordian-height-up: space(height-0);
+$accordian-height-down: space(spacing-850);
+$accordian-width-primary: space(spacing-1);
+$accordian-width-secondary: space(space-rem-1);
+$accordian-height-primary: space(space-rem-1);
+$accordian-padding-primary: space(space-rem-1);
+$accordian-padding-secondary: space(space-rem-1A);
+$accordian-font-primary: space(spacing-300);
+$accordian-font-secondary: space(spacing-250);
+$accordian-font-danger: space(weight-500);
+$accordian-fontweight-primary: space(weight-100);
+
 $map-space: (
+  spacing-1: 1px,
   spacing-50: 2px,
   spacing-75: 4px,
   spacing-100: 8px,
   spacing-200: 12px,
+  spacing-250: 14px,
   spacing-300: 16px,
   spacing-400: 24px,
   spacing-500: 32px,
   spacing-600: 40px,
   spacing-700: 48px,
   spacing-800: 64px,
+  spacing-850: 67px,
   spacing-900: 80px,
   spacing-1000: 96px,
+  height-0: 0,
+  space-rem-1: 1rem,
+  space-rem-1A: 1.2rem,
+  space-rem-2: 2rem,
+  weight-100: 100,
+  weight-500: 500,
 );
 
 @mixin apply-space-map($map) {