@rovula/ui 0.0.19 → 0.0.21

package/src/stories/Typography.mdx

@@ -1,160 +1,16 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from '@storybook/blocks';
+
+import * as ButtonStories from '../components/Text/Text.stories';
 
 <Meta title="Guidelines/Typography" />
 
-export const code = ['<button className="scroll rounded-lg border border-primary-500">', "  button", "</button>"];
 
 # Typography
 
-The Typography styles makes it easy to apply a default set of font weights and sizes in your application.
+## Text
 
-<br />
+<Canvas of={ButtonStories.Default} />
 
-## Styles
+## Text colos
 
-<Canvas>
-  <div className="mx-auto max-w-3xl text-gray-100">
-    <div className="grid grid-cols-[auto_1fr] gap-x-8 gap-y-4">
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="whitespace-nowrap typography-code">typography-heading-1</code>
-        </div>
-      </div>
-      <div>
-        <h1 className="typography-heading-1">Heading 1</h1>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-heading-2</code>
-        </div>
-      </div>
-      <div>
-        <h2 className="typography-heading-2">Heading 2</h2>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-heading-3</code>
-        </div>
-      </div>
-      <div>
-        <h3 className="typography-heading-3">Heading 3</h3>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-heading-4</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <h4 className="typography-heading-4">Heading 4</h4>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-heading-5</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <h5 className="typography-heading-5">Heading 5</h5>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-heading-6</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <h6 className="typography-heading-6">Heading 6</h6>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="whitespace-nowrap typography-code">typography-subtitle-1</code>
-        </div>
-      </div>
-      <div className="">
-        <p className="typography-subtitle-1">
-          Subtitle 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="whitespace-nowrap typography-code">typography-subtitle-2</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <p className="typography-subtitle-2">
-          Subtitle 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-          labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-body-1</code>
-        </div>
-      </div>
-      <div>
-        <p className="typography-body-1">
-          Body 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-          ea commodo consequat.
-        </p>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-body-2</code>
-        </div>
-      </div>
-      <div>
-        <p className="typography-body-2">
-          Body 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
-          ea commodo consequat.
-        </p>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-button</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <span className="typography-button">BUTTON TEXT</span>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-caption</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <span className="typography-caption">caption text</span>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-overline</code>
-        </div>
-      </div>
-      <div className="flex items-center">
-        <span className="my-auto typography-overline">OVERLINE TEXT</span>
-      </div>
-      <div className="flex items-center">
-        <div>
-          <div className="typography-subtitle-1">Class Name:</div>
-          <code className="typography-code">typography-code</code>
-        </div>
-      </div>
-      <div className="overflow-x-auto">
-        <pre className="py-2 typography-code">{code.join("\n")}</pre>
-      </div>
-    </div>
-  </div>
-</Canvas>
+<Canvas of={ButtonStories.Color} />

package/src/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)]; */
   }
 }