From 55ec90a5c6ad6f652c73f6d73869300eb1aceb8c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 13 Feb 2022 11:58:14 +0100 Subject: Restructuring --- src/_base.scss | 3 +- src/_config.scss | 30 +++++++ src/_declare-vars.scss | 160 +++++++++++++++++++++++++++++++++ src/_functions.scss | 42 ++++++--- src/_layouts.scss | 4 + src/_mixins.scss | 11 +++ src/_objects.scss | 16 ++++ src/_vars.scss | 221 ---------------------------------------------- src/index.scss | 30 +------ src/layouts/_form.scss | 4 +- src/objects/_heading.scss | 7 +- 11 files changed, 264 insertions(+), 264 deletions(-) create mode 100644 src/_config.scss create mode 100644 src/_declare-vars.scss create mode 100644 src/_layouts.scss create mode 100644 src/_mixins.scss create mode 100644 src/_objects.scss delete mode 100644 src/_vars.scss diff --git a/src/_base.scss b/src/_base.scss index 6e404fe..6e8efbd 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use 'functions' as fn; +@use 'mixins' as mx; html, body { @@ -7,7 +8,7 @@ body { } body { - @include fn.set-font(--standard, (--size: fn.dim(--font-size --md))); + @include mx.set-font(--standard, (--size: fn.dim(--font-size --md))); margin: 0; padding: 0; diff --git a/src/_config.scss b/src/_config.scss new file mode 100644 index 0000000..d79153f --- /dev/null +++ b/src/_config.scss @@ -0,0 +1,30 @@ +@use 'iro-sass/src/index' as iro; +@use 'include-media/dist/include-media' as media; + +iro.$vars-root-size: 16px; + +media.$breakpoints: ( + md: 40rem, + sm: 28rem +); + +media.$unit-intervals: ( + 'px': 1, + 'em': .01, + 'rem': .01, + '': 0 +); + +$wanted-grays: ( + -1.25, + -1.1, + 1, + 1.15, + 1.37, + 1.73, + 2.4, + 3.26, + 5, + 11, + 21, +); 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); + } +} diff --git a/src/_functions.scss b/src/_functions.scss index 73a1ec9..56fdf39 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,5 +1,7 @@ @use 'sass:math'; +@use 'sass:map'; @use 'iro-sass/src/index' as iro; +@use 'config'; @use '@oddbird/blend'; @use '@oddbird/blend/sass/convert' as blend-convert; @@ -53,16 +55,6 @@ @return $map; } -@mixin set-font($basis, $values: ()) { - $values: set-font($basis, $values); - - @each $prop, $value in $values { - @if $value != null { - #{$prop}: $value; - } - } -} - @function multi-contrast($base-color, $colors, $wanted-contrasts) { $dir: if(lightness($base-color) >= 50%, -1, 1); $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05; @@ -104,3 +96,33 @@ @return $result; } + +@function accent-palette($base, $dir: 1) { + @return ( + --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), + --main: $base, + --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), + --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), + --semi: rgba($base, .4), + --selection: rgba($base, .99), + --fg: blend.contrast($base), + ); +} + +@function gray-palette($lightness) { + $grays: (); + + @for $i from 0 through 100 { + $grays: append($grays, blend.lch($i * 1% 0 0)); + } + + $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); + + $palette: (); + + @for $i from 1 through length($colors) { + $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i)))); + } + + @return $palette; +} diff --git a/src/_layouts.scss b/src/_layouts.scss new file mode 100644 index 0000000..99a003e --- /dev/null +++ b/src/_layouts.scss @@ -0,0 +1,4 @@ +@use 'layouts/card'; +@use 'layouts/container'; +@use 'layouts/button-group'; +@use 'layouts/form'; diff --git a/src/_mixins.scss b/src/_mixins.scss new file mode 100644 index 0000000..e8595f1 --- /dev/null +++ b/src/_mixins.scss @@ -0,0 +1,11 @@ +@use 'functions'; + +@mixin set-font($basis, $values: ()) { + $values: functions.set-font($basis, $values); + + @each $prop, $value in $values { + @if $value != null { + #{$prop}: $value; + } + } +} diff --git a/src/_objects.scss b/src/_objects.scss new file mode 100644 index 0000000..45415f1 --- /dev/null +++ b/src/_objects.scss @@ -0,0 +1,16 @@ +@use 'objects/icon'; +@use 'objects/heading'; +@use 'objects/rule'; +@use 'objects/button'; +@use 'objects/text-field'; +@use 'objects/field-label'; +@use 'objects/radio'; +@use 'objects/checkbox'; +@use 'objects/switch'; +@use 'objects/action-button'; +@use 'objects/status-indicator'; +@use 'objects/avatar'; +@use 'objects/action-menu'; +@use 'objects/menu'; +@use 'objects/backdrop'; +@use 'objects/dialog'; diff --git a/src/_vars.scss b/src/_vars.scss deleted file mode 100644 index d2fbc10..0000000 --- a/src/_vars.scss +++ /dev/null @@ -1,221 +0,0 @@ -@use 'sass:map'; -@use 'iro-sass/src/index' as iro; -@use 'include-media/dist/include-media' as media; -@use '@oddbird/blend'; -@use 'functions' as fn; - -iro.$vars-root-size: 16px; - -media.$breakpoints: ( - md: 40rem, - sm: 28rem -); - -media.$unit-intervals: ( - 'px': 1, - 'em': .01, - 'rem': .01, - '': 0 -); - -$grays: (); - -@for $i from 0 through 100 { - $grays: append($grays, blend.lch($i * 1% 0 0)); -} - -$wanted-grays: ( - -1.25, - -1.1, - 1, - 1.15, - 1.37, - 1.73, - 2.4, - 3.26, - 5, - 11, - 21, -); - -@function accent-palette($base, $dir: 1) { - @return ( - --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), - --main: $base, - --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), - --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), - --semi: rgba($base, .4), - --selection: rgba($base, .99), - --fg: blend.contrast($base), - ); -} - -@function gray-palette($lightness) { - $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays); - - $palette: (); - - @for $i from 1 through length($colors) { - $palette: map.set($palette, --gray#{$i}, hsl(fn.color(--gray-h), fn.color(--gray-s), lightness(nth($colors, $i)))); - } - - @return $palette; -} - -// - -@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: accent-palette(blend.lch(48% 50 279)), - --red: accent-palette(blend.lch(48% 50 23)), - --green: accent-palette(blend.lch(58% 50 141)), - --yellow: 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: gray-palette(94%) - ), 'palette-light'); - - @include iro.props-store(( - --colors: gray-palette(100%) - ), 'palette-light-raised'); -} - -// - -@include iro.fn-execute { - @include iro.props-store(( - --colors: ( - --accent: ( - --blue: accent-palette(blend.lch(58% 60 279), -1), - --red: accent-palette(blend.lch(58% 60 23), -1), - --green: accent-palette(blend.lch(68% 60 141), -1), - --yellow: 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: gray-palette(9%) - ), 'palette-dark'); - - @include iro.props-store(( - --colors: gray-palette(16%) - ), 'palette-dark-raised'); -} - -// - -@each $breakpoint in map-keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { - @include iro.props-store(( - --colors: () - ), $breakpoint); - } -} diff --git a/src/index.scss b/src/index.scss index 21054db..e090427 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,32 +1,8 @@ -@use 'functions'; - -@use 'vars'; +@use 'declare-vars'; @use 'base'; - -@use 'layouts/card'; -@use 'layouts/container'; -@use 'layouts/button-group'; - -@use 'objects/icon'; -@use 'objects/heading'; -@use 'objects/rule'; -@use 'objects/button'; -@use 'objects/text-field'; -@use 'objects/field-label'; -@use 'objects/radio'; -@use 'objects/checkbox'; -@use 'objects/switch'; -@use 'objects/action-button'; -@use 'objects/status-indicator'; -@use 'objects/avatar'; -@use 'objects/action-menu'; -@use 'objects/menu'; -@use 'objects/backdrop'; -@use 'objects/dialog'; - -@use 'layouts/form'; - +@use 'layouts'; +@use 'objects'; @use 'utils'; @use 'apply-vars'; diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 4334192..a8308af 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -1,6 +1,8 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +@use '../objects/field-label'; + @include iro.props-namespace('form') { @include iro.props-store(( --dims: ( @@ -11,8 +13,6 @@ ), 'dims'); @include iro.bem-layout(iro.props-namespace()) { - @include iro.bem-composed-of('field-label' 'object'); - display: flex; flex-direction: column; align-items: baseline; diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 24971bb..b5f02d8 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +@use '../mixins' as mx; @include iro.props-namespace('heading') { @include iro.props-store(( @@ -20,7 +21,7 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - @include fn.set-font(--headline); + @include mx.set-font(--headline); display: block; margin-top: fn.dim(--in-page-margin --top); @@ -51,7 +52,7 @@ } @include iro.bem-modifier('sm') { - @include fn.set-font(--standard, ( + @include mx.set-font(--standard, ( --line-height: null, --size: fn.global-dim(--font-size --md), --weight: 500 @@ -61,7 +62,7 @@ } @include iro.bem-modifier('xs') { - @include fn.set-font(--standard, ( + @include mx.set-font(--standard, ( --line-height: null, --size: fn.global-dim(--font-size --xs), --weight: 500, -- cgit v1.2.3-54-g00ecf