create button, textlink, add icons and font

2025-07-18 16:17:10 +03:00
parent 5bb273d4cc
commit ca6dfe6ccb
39 changed files with 2265 additions and 33 deletions
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,138 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@theme { 
+    --font-work: "work-sans", "sans-serif";
+}
+@theme inline {
+	--color-bg-dark:#212121;
+	--color-bg-light:#FFFFFF;
+
+    --color-text-light-900:#0A0A0A;
+    --color-text-light-500:#939393;
+    --color-text-light-200:#C0C0C0;
+    --color-text-light-100:#FFFFFF;
+
+    --color-text-dark-100:#F5F5F5;
+    --color-text-dark-500:#E8E8E8;
+    --color-text-dark-900:#ADADAD;
+
+    --color-fill-900:#0A0A0A;
+    --color-fill-800:#212121;
+    --color-fill-700:#363636;
+    --color-fill-400:#939393;
+    --color-fill-300:#C0C0C0;
+    --color-fill-150:#E8E8E8;
+    --color-fill-100:#F5F5F5;
+
+    --color-feedback-positive-900:#00CF1B;
+    --color-feedback-positive-100:#CCF5D1;
+
+    --color-feedback-negative-900:#FF514F;
+    --color-feedback-negative-100:#FFDCDC;
+
+    --color-feedback-attention-900:#FFBA00;
+    --color-feedback-attention-100:#FFF1CC;
+
+    --color-feedback-info-900:#386AFF;
+    --color-feedback-info-100:#D7E1FF;
+}
+
+@layer theme {
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-Thin.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-Thin.woff") format("woff");
+      font-weight: 100;
+      /* Thin */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-ExtraLight.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-ExtraLight.woff") format("woff");
+      font-weight: 200;
+      /* ExtraLight */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-Light.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-Light.woff") format("woff");
+      font-weight: 300;
+      /* Light */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-Regular.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-Regular.woff") format("woff");
+      font-weight: 400;
+      /* Regular */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-Medium.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-Medium.woff") format("woff");
+      font-weight: 500;
+      /* Medium */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-SemiBold.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-SemiBold.woff") format("woff");
+      font-weight: 600;
+      /* SemiBold */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-Bold.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-Bold.woff") format("woff");
+      font-weight: 700;
+      /* Bold */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-ExtraBold.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-ExtraBold.woff") format("woff");
+      font-weight: 800;
+      /* ExtraBold */
+      font-style: normal;
+      font-display: swap;
+    }
+  
+    @font-face {
+      font-family: "work-sans";
+      src:
+        url("/fonts/work-sans/WorkSans-Black.woff2") format("woff2"),
+        url("/fonts/work-sans/WorkSans-Black.woff") format("woff");
+      font-weight: 900;
+      /* Black */
+      font-style: normal;
+      font-display: swap;
+    }
+  }