@rovula/ui 0.0.19 → 0.0.21

package/dist/theme/global.css

@@ -1,237 +1,17 @@
+
+@import "./tokens/baseline.css";
+@import "./themes/xspector/baseline.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  :root {
-    --white: 255 255 255; /* #ffffff */
-    --black: 28 28 28; /* #1c1c1c */
-
-    --theme-50: 232 242 255; /* #E8F2FF -> 232 242 255 */
-    --theme-100: 213 230 255; /* #D5E6FF -> 213 230 255 */
-    --theme-200: 179 207 255; /* #B3CFFF -> 179 207 255 */
-    --theme-300: 136 174 255; /* #85AEFF -> 136 174 255 */
-    --theme-400: 86 126 255; /* #567EFF -> 86 126 255 */
-    --theme-500: 47 78 255; /* #2F4EFF -> 47 78 255 */
-    --theme-600: 12 26 255; /* #0C1AFF -> 12 26 255 */
-    --theme-700: 0 12 255; /* #000CFF -> 0 12 255 */
-    --theme-800: 6 18 205; /* #0612CD -> 6 18 205 */
-    --theme-900: 16 29 159; /* #101D9F -> 16 29 159 */
-    --theme-default: var(--theme-100);
-    --theme-foreground: var(--white);
-
-    --primary-5: 242 242 246; /* #F2F2F6 */
-    --primary-10: 230 230 236; /* #E6E6EC */
-    --primary-20: 204 204 218; /* #CCCCDA */
-    --primary-30: 179 179 199; /* #B3B3C7 */
-    --primary-40: 153 153 180; /* #9999B4 */
-    --primary-50: 128 128 161; /* #8080A1 */
-    --primary-60: 103 103 143; /* #67678F */
-    --primary-70: 77 77 124; /* #4D4D7C */
-    --primary-80: 52 52 105; /* #343469 */
-    --primary-90: 26 26 87; /* #1A1A57 */
-    --primary-100: 1 1 68; /* #010144 */
-    --primary-110: 1 1 61; /* #01013D */
-    --primary-120: 1 1 54; /* #010136 */
-    --primary-130: 1 1 48; /* #010130 */
-    --primary-140: 1 1 41; /* #010129 */
-    --primary-150: 1 1 34; /* #010122 */
-    --primary-default: var(--primary-100);
-    --primary-foreground: var(--white);
-
-    --secondary-5: 254 254 255; /* #FEFEFF */
-    --secondary-10: 253 254 255; /* #FDFEFF */
-    --secondary-20: 251 252 255; /* #FBFCFF */
-    --secondary-30: 249 251 255; /* #F9FBFF */
-    --secondary-40: 247 249 255; /* #F7F9FF */
-    --secondary-50: 245 248 255; /* #F5F8FF */
-    --secondary-60: 242 247 255; /* #F2F7FF */
-    --secondary-70: 240 245 255; /* #F0F5FF */
-    --secondary-80: 238 244 255; /* #EEF4FF */
-    --secondary-90: 236 242 255; /* #ECF2FF */
-    --secondary-100: 234 241 255; /* #EAF1FF */
-    --secondary-110: 211 217 229; /* #D3D9E5 */
-    --secondary-120: 187 193 204; /* #BBC1CC */
-    --secondary-130: 164 169 178; /* #A4A9B2 */
-    --secondary-140: 140 145 153; /* #8C9199 */
-    --secondary-150: 117 121 128; /* #757980 */
-    --secondary-default: var(--secondary-100);
-    --secondary-foreground: 1 1 68;
-
-    --tertiary-5: 245 246 255; /* #F5F6FF */
-    --tertiary-10: 234 237 255; /* #EAEDFF */
-    --tertiary-20: 213 220 255; /* #D5DCFF */
-    --tertiary-30: 193 202 255; /* #C1CAFF */
-    --tertiary-40: 172 184 255; /* #ACB8FF */
-    --tertiary-50: 151 166 255; /* #97A6FF */
-    --tertiary-60: 132 149 255; /* #8295FF */
-    --tertiary-70: 109 131 255; /* #6D83FF */
-    --tertiary-80: 89 113 255; /* #5971FF */
-    --tertiary-90: 68 96 255; /* #4460FF */
-    --tertiary-100: 47 78 255; /* #2F4EFF */
-    --tertiary-110: 42 70 229; /* #2A46E5 */
-    --tertiary-120: 38 62 204; /* #263ECC */
-    --tertiary-130: 33 55 178; /* #2137B2 */
-    --tertiary-140: 28 47 153; /* #1C2F99 */
-    --tertiary-150: 24 39 128; /* #182780 */
-    --tertiary-default: var(--tertiary-100);
-    --tertiary-foreground: var(--white);
-
-    --grey-5: 250 250 250; /* #FAFAFA */
-    --grey-10: 245 245 245; /* #F5F5F5 */
-    --grey-20: 236 236 236; /* #ECECEC */
-    --grey-30: 226 226 226; /* #E2E2E2 */
-    --grey-40: 216 216 216; /* #D8D8D8 */
-    --grey-50: 207 207 207; /* #CFCFCF */
-    --grey-60: 197 197 197; /* #C5C5C5 */
-    --grey-70: 187 187 187; /* #BBBBBB */
-    --grey-80: 177 177 177; /* #B1B1B1 */
-    --grey-90: 168 168 168; /* #A8A8A8 */
-    --grey-100: 158 158 158; /* #9E9E9E */
-    --grey-110: 142 142 142; /* #8E8E8E */
-    --grey-120: 126 126 126; /* #7E7E7E */
-    --grey-130: 111 111 111; /* #6F6F6F */
-    --grey-140: 95 95 95; /* #5F5F5F */
-    --grey-150: 79 79 79; /* #4F4F4F */
-    --grey-default: var(--grey-100);
-    --grey-foreground: 1 1 68;
-  
-    --grey2-100: 249 250 251; /* #F9FAFB */
-    --grey2-200: 244 246 248; /* #F4F6F8 */
-    --grey2-300: 223 227 232; /* #DFE3E8 */
-    --grey2-400: 196 205 213; /* #C4CDD5 */
-    --grey2-500: 145 158 171; /* #919EAB */
-    --grey2-600: 99 115 129; /* #637381 */
-    --grey2-700: 69 79 91; /* #454F5B */
-    --grey2-800: 33 43 54; /* #212B36 */
-    --grey2-900: 22 28 36; /* #161C24 */
-    --grey-default: var(--grey-100);
-    --grey-foreground: var(--white);
-  
-    --info-lighter: 208 242 255;
-    --info-light: 116 202 255;
-    --info-100: 41 152 255; /* #2998FF */
-    --info-120: 33 122 204; /* #217ACC */
-    --info-dark: 12 83 183;
-    --info-darker: 4 41 122;
-    --info-default: var(--info-100);
-    --info-foreground: var(--white);
-    
-    --success-lighter: 233 252 212;
-    --success-light: 170 242 127;
-    --success-100: 84 214 44; /* #54D62C */
-    --success-120: 67 171 35; /* #43AB23 */
-    --success-dark: 34 154 22;
-    --success-darker:8 102 13;
-    --success-default: var(--success-100);
-    --success-foreground: var(--white);
-    
-    --warning-lighter: 255 247 205;
-    --warning-light:255 225 106;
-    --warning-100: 255 193 7; /* #FFC107 */
-    --warning-120: 204 154 6; /* #CC9A06 */
-    --warning-dark: 183 129 3;
-    --warning-darker: 122 79 1;
-    --warning-default: var(--warning-100);
-    --warning-foreground: var(--white);
-    
-    --error-lighter: 255 231 217;
-    --error-light: 255 164 141;
-    --error-100: 255 77 53; /* #FF4D35 */
-    --error-120: 204 62 42; /* #CC3E2A */
-    --error-dark: 183 33 54;
-    --error-darker: 122 12 46;
-    --error-default: var(--error-100);
-    --error-foreground: var(--white);
-
-    --main-transparent-primary: 1 1 68;
-    --main-transparent-secondary: 234 241 255;
-    --main-transparent-tertiary: 47 78 255;
-
-    /* Button */
-    --btn-rounded-sm: 10px;
-    --btn-rounded-md: 12px;
-    --btn-rounded-lg: 16px;
-
-    /* Input */
-    --input-default-text-color: 164 169 178;
-    --input-default-stroke-color: 231 231 231;
-
-    --input-active-text-color: 29 30 39;
-    --input-active-stroke-color: 208 208 208;
-  
-    --input-disabled-text-color: 196 199 205;
-    --input-disabled-stroke-color: 239 239 239;
-    --input-disabled-background-color: 247 247 247;
-    
-    --input-label-background-color: 249 251 255;
-
-    /* Text */
-    --text-default-dark: 1 1 68;
-    --text-default-medium: 47 78 255;
-    --text-default-light: 213 230 255;
-
-    --text-grey-dark: 29 30 39;
-    --text-grey-medium: 117 121 128;
-    --text-grey-light: 164 169 178;
-    --text-white: 255 255 255;
-
-    /* Other */
-    --other-bg: var(--white);
-    --other-bg-2: var(--white);
-
-    /* Other/Popup */
-    --popup-background: 249 251 255;
-    /* Other/Popup Curtain */
-    --popup-overlay: 0 0 0;
-    --popup-overlay-alpha: 0.48;
-    --popup-rounded: 24px;
-
-    /* Navbar */
-    --navbar-height: 58px;
-    --navbar-bg-color: var(--primary-default);
-    --navbar-text-color: var(--primary-foreground);
-    --navbar-border-color: var(--primary-foreground);
-    --navbar-gap: 16px;
-  
-    /* TODO for shadcn, wait for refactor */
-    /* --background: 0 0% 100%; */
-    --background: var(--brand-background);
-    --foreground: var(--text-white:);
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --card: var(--white);
-    --card-foreground: var(--primary);
- 
-    --primary: var(--primary-default);
- 
-    --secondary: var(--secondary-default);
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 215 20.2% 65.1%;
- 
-    --radius: 0.5rem;
-  }
-}
-
 @layer base {
   * {
-    @apply border-border;
+    /* @apply border-border; */
   }
   body {
-    @apply bg-background text-foreground;
+    /* @apply bg-background text-foreground; */
+    /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
   }
 }

package/dist/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/dist/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": {},
+    },
   });
 });