Bläddra i källkod

feat: :sparkles: feat (estilizacao) aplicando cores e fontes padroes do sistema

foi preenchido o arquivo main.css com todas as cores e fontes do sistema com base no figma apresentado

fase:dev | origin:escopo
Gustavo Zanatta 2 veckor sedan
förälder
incheckning
3abf4a0232
1 ändrade filer med 134 tillägg och 1 borttagningar
  1. 134 1
      app/assets/css/main.css

+ 134 - 1
app/assets/css/main.css

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 @theme {
   --color-primary: #35A30A;
@@ -14,8 +14,141 @@
   --color-border: #C0C0C0;
 
   --color-error: #D4183D;
+
+  /* Violet */
+  --color-violet-light: #f0e8f1;
+  --color-violet-light-hover: #e8ddea;
+  --color-violet-light-active: #d0b9d4;
+  --color-violet-normal: #661d75;
+  --color-violet-normal-hover: #5c1a69;
+  --color-violet-normal-active: #52175e;
+  --color-violet-dark: #4d1658;
+  --color-violet-dark-hover: #3d1146;
+  --color-violet-dark-active: #2e0d35;
+  --color-violet-darker: #240a29;
+
+  /* Neutral */
+  --color-neutral-light: #fefefe;
+  --color-neutral-light-hover: #fdfdfd;
+  --color-neutral-light-active: #fbfbfb;
+  --color-neutral-normal: #f2f2f2;
+  --color-neutral-normal-hover: #dadada;
+  --color-neutral-normal-active: #c2c2c2;
+  --color-neutral-dark: #b6b6b6;
+  --color-neutral-dark-hover: #919191;
+  --color-neutral-dark-active: #6d6d6d;
+  --color-neutral-darker: #555555;
+}
+
+/* ── Typography ─────────────────────────────────────────────────── */
+
+.text-h1 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 300;
+  font-size: 96px;
+  line-height: 100%;
+  letter-spacing: -1.5px;
+}
+
+.text-h2 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 300;
+  font-size: 60px;
+  line-height: 100%;
+  letter-spacing: -0.5px;
+}
+
+.text-h3 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 48px;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+.text-h4 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 100%;
+  letter-spacing: 0.25px;
+}
+
+.text-h5 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+.text-h6 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 100%;
+  letter-spacing: 0.15px;
 }
 
+.text-subtitle-1 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0.15px;
+}
+
+.text-subtitle-2 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 100%;
+  letter-spacing: 0.1px;
+}
+
+.text-body-1 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0.5px;
+}
+
+.text-body-2 {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 100%;
+  letter-spacing: 0.25px;
+}
+
+.text-button {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 100%;
+  letter-spacing: 1.25px;
+}
+
+.text-caption {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 100%;
+  letter-spacing: 0.4px;
+}
+
+.text-overline {
+  font-family: "Nunito", sans-serif;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 100%;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+/* ─────────────────────────────────────────────────────────────── */
+
 ::selection,
 ::-moz-selection {
   background-color: #E38B37;