@rovula/ui 0.0.19 → 0.0.20

package/src/theme/main-preset.js

@@ -1,6 +1,5 @@
 const { fontFamily } = require("tailwindcss/defaultTheme");
 
-/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
   theme: {
@@ -14,157 +13,222 @@ module.exports = {
     extend: {
       fontSize: {
         h1: [
-          "64px",
+          "var(--h1-size, 64px)",
           {
-            lineHeight: "80px",
-            fontWeight: "700",
+            lineHeight: "var(--h1-line-height, 80px)",
+            fontWeight: "var(--h1-weight, 700)",
+            fontFamily: "var(--h1-family, 'Poppins')",
           },
         ],
         h2: [
-          "48px",
+          "var(--h2-size, 48px)",
           {
-            lineHeight: "60px",
-            fontWeight: "700",
+            lineHeight: "var(--h2-line-height, 60px)",
+            fontWeight: "var(--h2-weight, 700)",
+            fontFamily: "var(--h2-family, 'Poppins')",
           },
         ],
         h3: [
-          "32px",
+          "var(--h3-size, 32px)",
           {
-            lineHeight: "48px",
-            fontWeight: "700",
+            lineHeight: "var(--h3-line-height, 48px)",
+            fontWeight: "var(--h3-weight, 700)",
+            fontFamily: "var(--h3-family, 'Poppins')",
           },
         ],
         h4: [
-          "24px",
+          "var(--h4-size, 24px)",
           {
-            lineHeight: "32px",
-            fontWeight: "700",
+            lineHeight: "var(--h4-line-height, 32px)",
+            fontWeight: "var(--h4-weight, 700)",
+            fontFamily: "var(--h4-family, 'Poppins')",
           },
         ],
         h5: [
-          "20px",
+          "var(--h5-size, 20px)",
           {
-            lineHeight: "28px",
-            fontWeight: "700",
+            lineHeight: "var(--h5-line-height, 28px)",
+            fontWeight: "var(--h5-weight, 700)",
+            fontFamily: "var(--h5-family, 'Poppins')",
           },
         ],
         h6: [
-          "18px",
+          "var(--h6-size, 18px)",
           {
-            lineHeight: "24px",
-            fontWeight: "700",
+            lineHeight: "var(--h6-line-height, 24px)",
+            fontWeight: "var(--h6-weight, 700)",
+            fontFamily: "var(--h6-family, 'Poppins')",
           },
         ],
         subtitile1: [
-          "16px",
+          "var(--subtitle1-size, 16px)",
           {
-            lineHeight: "24px",
-            fontWeight: "400",
+            lineHeight: "var(--subtitle1-line-height, 24px)",
+            fontWeight: "var(--subtitle1-weight, 400)",
+            fontFamily: "var(--subtitle1-family, 'Poppins')",
           },
         ],
         subtitile2: [
-          "16px",
+          "var(--subtitle2-size, 16px)",
           {
-            lineHeight: "24px",
-            fontWeight: "500",
+            lineHeight: "var(--subtitle2-line-height, 24px)",
+            fontWeight: "var(--subtitle2-weight, 500)",
+            fontFamily: "var(--subtitle2-family, 'Poppins')",
           },
         ],
         subtitile3: [
-          "16px",
+          "var(--subtitle3-size, 16px)",
           {
-            lineHeight: "24px",
-            fontWeight: "600",
+            lineHeight: "var(--subtitle3-line-height, 24px)",
+            fontWeight: "var(--subtitle3-weight, 600)",
+            fontFamily: "var(--subtitle3-family, 'Poppins')",
           },
         ],
         subtitile4: [
-          "14px",
+          "var(--subtitle4-size, 14px)",
           {
-            lineHeight: "22px",
-            fontWeight: "400",
+            lineHeight: "var(--subtitle4-line-height, 22px)",
+            fontWeight: "var(--subtitle4-weight, 400)",
+            fontFamily: "var(--subtitle4-family, 'Poppins')",
           },
         ],
         subtitile5: [
-          "14px",
+          "var(--subtitle5-size, 14px)",
           {
-            lineHeight: "22px",
-            fontWeight: "500",
+            lineHeight: "var(--subtitle5-line-height, 22px)",
+            fontWeight: "var(--subtitle5-weight, 500)",
+            fontFamily: "var(--subtitle5-family, 'Poppins')",
           },
         ],
         subtitile6: [
-          "14px",
+          "var(--subtitle6-size, 14px)",
           {
-            lineHeight: "22px",
-            fontWeight: "600",
+            lineHeight: "var(--subtitle6-line-height, 22px)",
+            fontWeight: "var(--subtitle6-weight, 600)",
+            fontFamily: "var(--subtitle6-family, 'Poppins')",
           },
         ],
         body1: [
-          "16px",
+          "var(--body1-size, 16px)",
           {
-            lineHeight: "20px",
-            fontWeight: "400",
+            lineHeight: "var(--body1-line-height, 20px)",
+            fontWeight: "var(--body1-weight, 400)",
+            fontFamily: "var(--body1-family, 'Poppins')",
           },
         ],
         body2: [
-          "16px",
+          "var(--body2-size, 16px)",
           {
-            lineHeight: "20px",
-            fontWeight: "500",
+            lineHeight: "var(--body2-line-height, 20px)",
+            fontWeight: "var(--body2-weight, 500)",
+            fontFamily: "var(--body2-family, 'Poppins')",
           },
         ],
         body3: [
-          "14px",
+          "var(--body3-size, 14px)",
           {
-            lineHeight: "18px",
-            fontWeight: "400",
+            lineHeight: "var(--body3-line-height, 18px)",
+            fontWeight: "var(--body3-weight, 400)",
+            fontFamily: "var(--body3-family, 'Poppins')",
           },
         ],
         body4: [
-          "14px",
+          "var(--body4-size, 14px)",
           {
-            lineHeight: "18px",
-            fontWeight: "500",
+            lineHeight: "var(--body4-line-height, 18px)",
+            fontWeight: "var(--body4-weight, 500)",
+            fontFamily: "var(--body4-family, 'Poppins')",
           },
         ],
         small1: [
-          "12px",
+          "var(--small1-size, 12px)",
           {
-            lineHeight: "14px",
-            fontWeight: "400",
+            lineHeight: "var(--small1-line-height, 14px)",
+            fontWeight: "var(--small1-weight, 400)",
+            fontFamily: "var(--small1-family, 'Poppins')",
           },
         ],
         small2: [
-          "12px",
+          "var(--small2-size, 12px)",
           {
-            lineHeight: "14px",
-            fontWeight: "500",
+            lineHeight: "var(--small2-line-height, 14px)",
+            fontWeight: "var(--small2-weight, 500)",
+            fontFamily: "var(--small2-family, 'Poppins')",
           },
         ],
         small3: [
-          "10px",
+          "var(--small3-size, 12px)",
           {
-            lineHeight: "12px",
-            fontWeight: "400",
+            lineHeight: "var(--small3-line-height, 14px)",
+            fontWeight: "var(--small3-weight, 600)",
+            fontFamily: "var(--small3-family, 'Poppins')",
+          },
+        ],
+        small4: [
+          "var(--small4-size, 10px)",
+          {
+            lineHeight: "var(--small4-line-height, 12px)",
+            fontWeight: "var(--small4-weight, 400)",
+            fontFamily: "var(--small4-family, 'Poppins')",
+          },
+        ],
+        small5: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small5-line-height, 12px)",
+            fontWeight: "var(--small5-weight, 500)",
+            fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
         label1: [
-          "12px",
+          "var(--label-label1-size, 12px)",
           {
-            lineHeight: "12px",
-            fontWeight: "400",
+            lineHeight: "var(--label-label1-line-height, 12px)",
+            fontWeight: "var(--label-label1-weight, 400)",
+            fontFamily: "var(--label-label1-family, 'Poppins')",
           },
         ],
         label2: [
-          "10px",
+          "var(--label-label2-size, 10px)",
           {
-            lineHeight: "10px",
-            fontWeight: "400",
+            lineHeight: "var(--label-label2-line-height, 10px)",
+            fontWeight: "var(--label-label2-weight, 400)",
+            fontFamily: "var(--label-label2-family, 'Poppins')",
+          },
+        ],
+        buttonL: [
+          "var(--button-button-l-size, 16px)",
+          {
+            lineHeight: "var(--button-button-l-line-height, 24px)",
+            fontWeight: "var(--button-button-l-weight, 700)",
+            fontFamily: "var(--button-button-l-family, 'Poppins')",
+          },
+        ],
+        buttonMS: [
+          "var(--button-button-ms-size, 14px)",
+          {
+            lineHeight: "var(--button-button-ms-line-height, 22px)",
+            fontWeight: "var(--button-button-ms-weight, 700)",
+            fontFamily: "var(--button-button-ms-family, 'Poppins')",
           },
         ],
       },
       borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
+        xl: "var(--radius-radius-xl)",
+        lg: "var(--radius-radius-l)",
+        md: "var(--radius-radius-m)",
+        sm: "var(--radius-radius-s)",
+        xs: "var(--radius-radius-xs)",
+      },
+      spacing: {
+        xxs: "var(--spacing-spacing-xxs)",
+        xs: "var(--spacing-spacing-xs)",
+        sm: "var(--spacing-spacing-s)",
+        md: "var(--spacing-spacing-m)",
+        lg: "var(--spacing-spacing-l)",
+        xl: "var(--spacing-spacing-xl)",
+        xxl: "var(--spacing-spacing-xxl)",
+        xxxl: "var(--spacing-spacing-xxxl)",
       },
       keyframes: {
         "accordion-down": {

package/src/theme/plugins/utilities/typography.js

@@ -59,11 +59,23 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small3": {
       "@apply text-small3": {},
     },
+    ".typography-small4": {
+      "@apply text-small4": {},
+    },
+    ".typography-small5": {
+      "@apply text-small5": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },
     ".typography-label2": {
       "@apply text-label2": {},
     },
+    ".typography-buttonL": {
+      "@apply text-buttonL": {},
+    },
+    ".typography-buttonMS": {
+      "@apply text-buttonMS": {},
+    },
   });
 });