Init

1 files changed, 202 insertions, 0 deletions

diff --git a/src/_vars.scss b/src/_vars.scss
new file mode 100644
index 0000000..5a6c1d0
--- /dev/null
+++ b/src/_vars.scss
@@ -0,0 +1,202 @@
+@use 'iro-sass/src/index' as iro;
+
+iro.$vars-root-size: 16px;
+
+$breakpoints: (
+    md: 40rem,
+    sm: 28rem
+);
+
+$unit-intervals: (
+    'px':  1,
+    'em':  .01,
+    'rem': .01,
+    '':    0
+);
+
+//
+
+$font--main: (
+    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+    line-height: 1.5
+);
+
+$font--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,
+);
+
+$line-height: map-get($font--main, line-height);
+
+//
+
+$theme-light: (
+    --gray1:  hsl(210, 0%, 100%), // 1.11
+    --gray2:  hsl(210, 0%, 98%), // 1.07
+    --gray3:  hsl(210, 0%, 95%), // 1
+    --gray4:  hsl(210, 0%, 90%), // 1.11
+    --gray5:  hsl(210, 0%, 87%), // 1.2
+    --gray6:  hsl(210, 0%, 78%), // 1.51
+    --gray7:  hsl(210, 0%, 69%), // 1.93
+    --gray8:  hsl(210, 0%, 55%), // 3
+    --gray9:  hsl(210, 0%, 38%), // 5.53
+    --gray10: hsl(210, 0%, 19%), // 11.78
+    --gray11: hsl(210, 0%, 0%), // 18.75 
+);
+
+$theme-lighter: (
+    --gray1:  hsl(210, 0%, 100%), // 1
+    --gray2:  hsl(210, 0%, 100%), // 1
+    --gray3:  hsl(210, 0%, 100%), // 1
+    --gray4:  hsl(210, 0%, 95%), // 1.11
+    --gray5:  hsl(210, 0%, 92%), // 1.19
+    --gray6:  hsl(210, 0%, 82%), // 1.52
+    --gray7:  hsl(210, 0%, 73%), // 1.94
+    --gray8:  hsl(210, 0%, 58%), // 3.03
+    --gray9:  hsl(210, 0%, 41%), // 5.48
+    --gray10: hsl(210, 0%, 22%), // 11.72
+    --gray11: hsl(210, 0%, 0%), // 21
+);
+
+//
+
+@include iro.fn-execute {
+    $primary-accent-base: hsl(222, 49.8%, 52.4%);
+    $error-accent-base:   hsl(352, 49.8%, 52.4%);
+    $success-accent-base: hsl(113, 49.8%, 39.6%);
+
+    @include iro.props-store((
+        --dims: (
+            --spacing: (
+                --base: 1.6rem,
+                --factors: (
+                    --xs: .25,
+                    --sm: .5,
+                    --md: 1,
+                    --lg: 1.5,
+                    --xl: 2,
+                ),
+                --x: (
+                    --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
+                    --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
+                    --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
+                ),
+                --y: (
+                    --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)),
+                    --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
+                    --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
+                    --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
+                    --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)),
+                ),
+            ),
+
+            --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: iro.props-get(--dims --spacing --y --sm, null),
+            ),
+
+            --list: (
+                --indent: 3rem,
+            ),
+        ),
+        
+        --colors: (
+            --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background
+            --bg-hi:  iro.props-get(--colors --gray2, null), // Lighter background
+            --bg:     iro.props-get(--colors --gray3, null), // Background
+
+            --obj-hi: iro.props-get(--colors --gray4, null),
+            --obj:    iro.props-get(--colors --gray5, null),
+            --obj-lo: iro.props-get(--colors --gray6, null),
+
+            --fg-hi3: iro.props-get(--colors --gray7, null),  // Disabled text
+            --fg-hi2: iro.props-get(--colors --gray8, null),  // Placeholder text
+            --fg-hi:  iro.props-get(--colors --gray9, null),  // Faint text
+            --fg:     iro.props-get(--colors --gray10, null), // Text
+            --fg-lo:  iro.props-get(--colors --gray11, null), // Strong text
+
+            --accent: (
+                --primary-const-hi:        scale-color($primary-accent-base, $lightness: 15%),
+                --primary-const:           $primary-accent-base,
+                --primary-const-lo:        scale-color($primary-accent-base, $lightness: -15%),
+                --primary-const-lo2:       scale-color($primary-accent-base, $lightness: -25%),
+                --primary-const-semi:      rgba($primary-accent-base, .4),
+                --primary-const-selection: rgba($primary-accent-base, .99),
+                --primary-const-fg:        #fff,
+
+                --primary-hi:   iro.props-get(--colors --accent --primary-const-hi, null),
+                --primary:      iro.props-get(--colors --accent --primary-const, null),
+                --primary-lo:   iro.props-get(--colors --accent --primary-const-lo, null),
+                --primary-lo2:  iro.props-get(--colors --accent --primary-const-lo2, null),
+                --primary-fg:   iro.props-get(--colors --accent --primary-const-fg, null),
+
+                --error-hi:   scale-color($error-accent-base, $lightness: 15%),
+                --error:      $error-accent-base,
+                --error-lo:   scale-color($error-accent-base, $lightness: -15%),
+                --error-lo2:  scale-color($error-accent-base, $lightness: -25%),
+                --error-fg:   #fff,
+
+                --success-hi:   scale-color($success-accent-base, $lightness: 15%),
+                --success:      $success-accent-base,
+                --success-lo:   scale-color($success-accent-base, $lightness: -15%),
+                --success-lo2:  scale-color($success-accent-base, $lightness: -25%),
+                --success-fg:   #fff,
+            ),
+
+            --grayscale-accent: (
+                --primary-hi:  iro.props-get(--colors --fg-hi2, null),
+                --primary:     iro.props-get(--colors --fg-hi, null),
+                --primary-lo:  iro.props-get(--colors --fg, null),
+                --primary-lo2: iro.props-get(--colors --fg-lo, null),
+                --primary-fg:  #fff,
+            ),
+
+            --selection: (
+                --bg:     iro.props-get(--colors --accent --primary-const-selection, null),
+                --bg-img: iro.props-get(--colors --accent --primary-const-semi, null),
+                --fg:     iro.props-get(--colors --accent --primary-const-fg, null),
+            ),
+
+            --focus: (
+                --shadow:    0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null),
+                --fill:      iro.props-get(--colors --accent --primary-const, null),
+                --text:      iro.props-get(--colors --accent --primary-const-lo, null),
+                --fill-text: iro.props-get(--colors --accent --primary-const-fg, null),
+            ),
+        ),
+    ));
+}
+
+//
+
+@include iro.fn-execute {
+    @include iro.props-store((), 'dark');
+}
+
+//
+
+@each $breakpoint in map-keys($breakpoints) {
+    @include media('<=#{$breakpoint}') {
+        @include iro.props-store((
+            --colors: ()
+        ), $breakpoint);
+    }
+}