trepur_components 2.3.7 → 2.3.9

package/src/documentation/typography/Fonts/Fonts.tsx

@@ -0,0 +1,73 @@
+import { Icon } from '@components/Icon';
+import { faCheck } from '@fortawesome/fontawesome-free-solid';
+
+import '../../../styles/global.css';
+
+export const Fonts = () => {
+  return (
+    <div>
+      <h2>Font sizes</h2>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-xxs font-regular">This text is xxs</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="font-regular text-xs">This text is xs</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="font-regular text-sm">This text is sm</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-regular">This text is md</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="font-regular text-lg">This text is lg</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="font-regular text-xl">This text is xl</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-xxl font-regular">This text is xxl</p>
+      </div>
+      <h2>Font weights</h2>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-thin">This font is thin</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-extraLight">This font is extra light</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-light">This font is light</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-regular">This font is regular</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-medium">This font is medium</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-semiBold">This font is semi bold</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-bold">This font is bold</p>
+      </div>
+      <div className="flex items-center">
+        <Icon icon={faCheck} />
+        <p className="text-md font-extraBold">This font is extra bold</p>
+      </div>
+    </div>
+  );
+};

package/src/styles/global.css

@@ -1,5 +1,5 @@
-@import './themes/palette.css';
 @import './themes/local.css';
+@import './themes/test.css';
 
 @tailwind base;
 @tailwind components;

package/src/styles/themes/local.css

@@ -1,40 +1,92 @@
 body {
-    --color-primary: #0036a0;
-    --color-secondary: #e2e2e2;
-    --color-tertiary: #921457;
-    --color-ink: #495863;
-    --color-transparent: transparent;
-    --color-white: #ffffff;
-    --color-black: #000000;
-    --color-red: #bb0a1e;
-    --color-grey: #2c373b;
-    --color-light-grey: #495c63;
-    --color-lightest-grey: #f5f5f5;
-    --color-primary-strict: #ff007d;
-    --color-border: #d0d0d0;
-    --color-border-lightest: #eeeeee;
-    --color-border-light: #d8d8d8;
-    --color-border-dark: #616161;
-    --color-error-light: #ffd9d9;
-    --color-success-light: #e7f5e7;
-    --color-facebook: #3b5999;
-    --color-whatsapp: #25d366;
-    --color-twitter: #55acee;
-    --color-linkedin: #0a66c2;
-    --color-email: #c71610;
-    --color-github: #171515;
-    --color-instagram: #8a3ab9;
-    --color-interactive-facebook: #2d4474;
-    --color-interactive-whatsapp: #25d566;
-    --color-interactive-twitter: #55acee;
-    --color-interactive-linkedin: #0a66c2;
-    --color-interactive-instagram: #6d2e92;
-    --color-interactive-email: #9f110c;
-    --color-interactive-github: #000000;
-    --color-gold: #e2b13c;
-    --color-error: #b11013;
-    --color-warning: #ffd35c;
-    --color-success: #69c364;
-    --color-info-light: #d8eaf5;
-    --color-linkedin: #0e76a8;
-  }
+  --color-ink: #495863;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-red: #bb0a1e;
+  --color-grey: #2c373b;
+  --color-light-grey: #495c63;
+  --color-lightest-grey: #f5f5f5;
+  --color-primary-strict: #ff007d;
+  --color-border: #d0d0d0;
+  --color-border-lightest: #eeeeee;
+  --color-border-light: #d8d8d8;
+  --color-border-dark: #616161;
+  --color-facebook: #3b5999;
+  --color-whatsapp: #25d366;
+  --color-twitter: #55acee;
+  --color-linkedin: #0a66c2;
+  --color-email: #c71610;
+  --color-github: #171515;
+  --color-instagram: #8a3ab9;
+  --color-interactive-facebook: #2d4474;
+  --color-interactive-whatsapp: #25d566;
+  --color-interactive-twitter: #55acee;
+  --color-interactive-linkedin: #0a66c2;
+  --color-interactive-instagram: #6d2e92;
+  --color-interactive-email: #9f110c;
+  --color-interactive-github: #000000;
+  --color-gold: #e2b13c;
+  --color-linkedin: #0e76a8;
+
+  --color-primary: #0036a0;
+  --color-secondary: #e2e2e2;
+  --color-tertiary: #921457;
+
+  /* pill */
+  --color-error-default: #b91c1c;
+  --color-warning-default: #a16207;
+  --color-success-default: #047857;
+  --color-info-default: #0369a1;
+
+  --color-error-light: #fca5a5;
+  --color-warning-light: #fde047;
+  --color-success-light: #6ee7b7;
+  --color-info-light: #7dd3fc;
+
+  /* Button */
+  --color-button-primary-active: #010c23;
+  --color-button-primary-border: #1b54c6;
+  --color-button-primary-bg: #1b54c6;
+  --color-button-primary-text: #ffffff;
+  --color-button-primary-hover: #012c82;
+
+  --color-button-secondary-active: #533200;
+  --color-button-secondary-border: #c65f1b;
+  --color-button-secondary-bg: #c67c1b;
+  --color-button-secondary-text: #b2b2b2;
+  --color-button-secondary-hover: #825101;
+
+  --color-button-ghost-active: #242424;
+  --color-button-ghost-border: #ffffff00;
+  --color-button-ghost-bg: #0055ff00;
+  --color-button-ghost-text: #000000;
+  --color-button-ghost-hover: #5f5f5f;
+
+  /* Footer */
+  --color-footer-bg: #1b54c6;
+  --color-footer-text: #ffffff;
+
+  /* Star */
+  --color-star: #f5bf1f;
+
+  /* Tubestops */
+  --color-tubestop-station-active: #57e31b;
+  --color-tubestop-station-complete: #c9c8c8;
+  --color-tubestop-station-future: #5a4f45;
+  --color-tubestop-line-complete: #c9c8c8;
+  --color-tubestop-line-future: #707070;
+  --color-tubestop-text-active: #000000;
+  --color-tubestop-text-complete: #c9c8c8;
+  --color-tubestop-text-future: #5b5b5b;
+
+  /* Carousel */
+  --color-carousel-dots-active: #1a1dd9;
+  --color-carousel-dots-default: #2c2525;
+  --color-carousel-dots-hover: #1a1dd9;
+  --color-carousel-arrow-default: #31a3dd;
+  --color-carousel-arrow-hover: #ae127a;
+
+  /* Nav */
+  --color-nav: #ae127a;
+}

package/src/styles/themes/test.css

@@ -0,0 +1,28 @@
+body.theme-test {
+  --color-primary: #0036a0;
+  --color-secondary: #0036a0;
+  --color-tertiary: #0036a0;
+  --color-ink: #0036a0;
+  --color-transparent: #0036a0;
+  --color-white: #0036a0;
+  --color-black: #0036a0;
+  --color-red: #0036a0;
+  --color-grey: #0036a0;
+  --color-light-grey: #0036a0;
+  --color-lightest-grey: #0036a0;
+  --color-primary-strict: #0036a0;
+  --color-border: #0036a0;
+  --color-border-lightest: #0036a0;
+  --color-border-light: #0036a0;
+  --color-border-dark: #0036a0;
+
+  --color-error-default: #0036a0;
+  --color-warning-default: #0036a0;
+  --color-success-default: #0036a0;
+  --color-info-default: #0036a0;
+
+  --color-error-light: #0036a0;
+  --color-warning-light: #0036a0;
+  --color-success-light: #0036a0;
+  --color-info-light: #0036a0;
+}

package/src/utils/screens.ts

@@ -1,6 +1,6 @@
 export const Screens = {
   xs: '320px',
-  sm: '500px',
+  sm: '640px',
   md: '768px',
   lg: '1024px',
   xl: '1280px',