Re-implemented design via iro-design

1 files changed, 31 insertions, 0 deletions

diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss
new file mode 100644
index 0000000..4a9513c
--- /dev/null
+++ b/assets/css/_declare-vars.scss
@@ -0,0 +1,31 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-store((
+    --dims: (
+        --font-size: (
+            --50:   iro.fn-px-to-rem(13px),
+            --75:   iro.fn-px-to-rem(14px),
+            --100:  iro.fn-px-to-rem(16px),
+            --150:  iro.fn-px-to-rem(18px),
+            --200:  iro.fn-px-to-rem(20px),
+            --300:  iro.fn-px-to-rem(24px),
+            --400:  iro.fn-px-to-rem(28px),
+            --500:  iro.fn-px-to-rem(32px),
+            --600:  iro.fn-px-to-rem(36px),
+            --700:  iro.fn-px-to-rem(40px),
+            --800:  iro.fn-px-to-rem(45px),
+            --900:  iro.fn-px-to-rem(50px),
+            --1000: iro.fn-px-to-rem(60px),
+            --1100: iro.fn-px-to-rem(70px),
+        ),
+
+        --paragraph: (
+            --margin-top: fn.dim(--size --400, null),
+        ),
+
+        --heading: (
+            --margin-top: fn.dim(--size --700, null),
+        ),
+    )
+), 'dims');