Restructuring

1 files changed, 160 insertions, 0 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
new file mode 100644
index 0000000..38d39dd
--- /dev/null
+++ b/src/_declare-vars.scss
@@ -0,0 +1,160 @@
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
+@use '@oddbird/blend';
+@use 'functions' as fn;
+
+@include iro.props-store((
+    --dims: (
+        --spacing: (
+            --base: iro.fn-px-to-rem(24px),
+            --factors: (
+                --xxs: .125,
+                --xs:  .25,
+                --sm:  .5,
+                --md:  1,
+                --lg:  1.5,
+                --xl:  2,
+                --xxl: 2.5,
+            ),
+            --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)),
+            --xs:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
+            --sm:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
+            --md:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
+            --lg:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
+            --xl:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
+            --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)),
+        ),
+
+        --font: (
+            --standard: (
+                --family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+                --line-height: 1.5,
+            ),
+            --headline: (
+                --family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+                --line-height: 1.2,
+                --weight:      700,
+            )
+        ),
+
+        --font-size: (
+            --xs:   iro.fn-px-to-rem(11px),
+            --sm:   iro.fn-px-to-rem(13px),
+            --md:   iro.fn-px-to-rem(14px),
+            --lg:   iro.fn-px-to-rem(16px),
+            --xl:   iro.fn-px-to-rem(18px),
+            --xxl:  iro.fn-px-to-rem(22px),
+            --xxxl: iro.fn-px-to-rem(28px),
+        ),
+
+        --border-width: (
+            --thick:  4px,
+            --medium: 2px,
+            --thin:   1px,
+        ),
+
+        --focus-outline-width: 3px,
+
+        --paragraph: (
+            --margin-top: fn.dim(--spacing --sm, null),
+        ),
+
+        --list: (
+            --indent: 3rem,
+        ),
+    ),
+), 'dims');
+
+//
+
+@include iro.fn-execute {
+    @include iro.props-store((
+        --colors: (
+            --gray-h: 220,
+            --gray-s: 5%,
+
+            --bg-hi2: fn.color(--gray1, null), // Lightest background
+            --bg-hi:  fn.color(--gray2, null), // Lighter background
+            --bg:     fn.color(--gray3, null), // Background
+
+            --obj-hi: fn.color(--gray4, null),
+            --obj:    fn.color(--gray5, null),
+            --obj-lo: fn.color(--gray6, null),
+
+            --fg-hi3: fn.color(--gray7, null),  // Disabled text
+            --fg-hi2: fn.color(--gray8, null),  // Placeholder text
+            --fg-hi:  fn.color(--gray9, null),  // Faint text
+            --fg:     fn.color(--gray10, null), // Text
+            --fg-lo:  fn.color(--gray11, null), // Strong text
+
+            --accent: (
+                --blue:   fn.accent-palette(blend.lch(48% 50 279)),
+                --red:    fn.accent-palette(blend.lch(48% 50 23)),
+                --green:  fn.accent-palette(blend.lch(58% 50 141)),
+                --yellow: fn.accent-palette(blend.lch(73% 50 90)),
+
+                --primary: iro.props-ref('colors', --colors --accent --blue),
+                --error:   iro.props-ref('colors', --colors --accent --red),
+                --success: iro.props-ref('colors', --colors --accent --green),
+            ),
+
+            --selection: (
+                --bg:     fn.color(--accent --primary --selection, null),
+                --bg-img: fn.color(--accent --primary --semi, null),
+                --fg:     fn.color(--accent --primary --fg, null),
+            ),
+
+            --focus: (
+                --shadow:    0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
+                --fill:      fn.color(--accent --primary --main, null),
+                --text:      fn.color(--accent --primary --lo, null),
+                --fill-text: fn.color(--accent --primary --fg, null),
+            ),
+        ),
+    ), 'colors');
+
+    @include iro.props-store((
+        --colors: fn.gray-palette(94%)
+    ), 'palette-light');
+
+    @include iro.props-store((
+        --colors: fn.gray-palette(100%)
+    ), 'palette-light-raised');
+}
+
+//
+
+@include iro.fn-execute {
+    @include iro.props-store((
+        --colors: (
+            --accent: (
+                --blue:   fn.accent-palette(blend.lch(58% 60 279), -1),
+                --red:    fn.accent-palette(blend.lch(58% 60 23), -1),
+                --green:  fn.accent-palette(blend.lch(68% 60 141), -1),
+                --yellow: fn.accent-palette(blend.lch(83% 60 90), -1),
+
+                --primary: iro.props-ref('colors-dark', --colors --accent --blue),
+                --error:   iro.props-ref('colors-dark', --colors --accent --red),
+                --success: iro.props-ref('colors-dark', --colors --accent --green),
+            ),
+        )
+    ), 'colors-dark');
+
+    @include iro.props-store((
+        --colors: fn.gray-palette(9%)
+    ), 'palette-dark');
+
+    @include iro.props-store((
+        --colors: fn.gray-palette(16%)
+    ), 'palette-dark-raised');
+}
+
+//
+
+@each $breakpoint in map-keys(media.$breakpoints) {
+    @include media.media('<=#{$breakpoint}') {
+        @include iro.props-store((
+            --colors: ()
+        ), $breakpoint);
+    }
+}