From 2b9c02e09b66b73eb12951263aa8aa0da55653b8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 7 Feb 2022 17:07:30 +0100 Subject: Update --- .stylelintrc.json | 2 +- src/_apply-vars.scss | 50 ++++++++++++++++++++++++++ src/_base.scss | 87 ++++++++++++++++++++++++++++++++++++++++++++++ src/_general.scss | 87 ---------------------------------------------- src/index.scss | 84 ++++++++++---------------------------------- src/layouts/_form.scss | 2 ++ src/objects/_checkbox.scss | 2 +- src/objects/_radio.scss | 2 +- src/objects/_switch.scss | 2 +- 9 files changed, 162 insertions(+), 156 deletions(-) create mode 100644 src/_apply-vars.scss create mode 100644 src/_base.scss delete mode 100644 src/_general.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index f599304..79482ee 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -3,7 +3,7 @@ "rules": { "indentation": 4, "number-leading-zero": "never", - "max-nesting-depth": 6, + "max-nesting-depth": 8, "selector-class-pattern": [ "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", { "resolveNestedSelectors": true } diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss new file mode 100644 index 0000000..cf4c940 --- /dev/null +++ b/src/_apply-vars.scss @@ -0,0 +1,50 @@ +@use 'iro-sass/src/index' as iro; +@use 'include-media/dist/include-media' as media; + +:root { + @include iro.props-assign('dims'); + + @each $breakpoint in map-keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include iro.props-assign($breakpoint); + } + } + + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('palette-dark'); + } +} + +@include iro.bem-theme('raised') { + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light-raised'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('palette-dark-raised'); + } +} + +@include iro.bem-theme('grayscale') { + @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent); +} + +/*@media (prefers-color-scheme: dark) { + @include iro.props-assign('dark'); + @include iro.props-assign('dark-palette'); + + @include iro.bem-theme('grayscale') { + @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); + } + + @include iro.bem-theme('raised') { + @include iro.props-assign('dark-raised-palette'); + @include iro.props-assign('dark'); + + @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { + @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); + } + } +}*/ diff --git a/src/_base.scss b/src/_base.scss new file mode 100644 index 0000000..54df879 --- /dev/null +++ b/src/_base.scss @@ -0,0 +1,87 @@ +@use 'iro-sass/src/index' as iro; +@use 'functions' as fn; + +html, +body { + height: 100%; +} + +body { + @include fn.set-font(--standard, (--size: fn.dim(--font-size --md))); + + margin: 0; + padding: 0; + background-color: fn.color(--bg); + color: fn.color(--fg); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + font-size: fn.dim(--font-size --md); + font-weight: normal; +} + +p { + margin-top: fn.dim(--paragraph --margin-top); + margin-bottom: 0; + + &:empty { + display: none; + } +} + +ul, +ol { + margin: fn.dim(--paragraph --margin-top) 0 0; + padding-left: fn.dim(--list --indent); +} + +:focus { + outline: 0; +} + +:link, +:visited { + color: currentColor; + text-decoration: none; +} + + +button, +input, +textarea { + box-sizing: content-box; + margin: 0; + padding: 0; + border: 0; + background: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + text-align: inherit; + text-transform: inherit; + appearance: none; + + &::-moz-focus-inner { + border: 0; + } +} + +::selection { + background: fn.color(--selection --bg); + color: fn.color(--selection --fg); +} + +img { + &::selection { + background: fn.color(--selection --bg-img); + } +} diff --git a/src/_general.scss b/src/_general.scss deleted file mode 100644 index 54df879..0000000 --- a/src/_general.scss +++ /dev/null @@ -1,87 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use 'functions' as fn; - -html, -body { - height: 100%; -} - -body { - @include fn.set-font(--standard, (--size: fn.dim(--font-size --md))); - - margin: 0; - padding: 0; - background-color: fn.color(--bg); - color: fn.color(--fg); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - font-size: fn.dim(--font-size --md); - font-weight: normal; -} - -p { - margin-top: fn.dim(--paragraph --margin-top); - margin-bottom: 0; - - &:empty { - display: none; - } -} - -ul, -ol { - margin: fn.dim(--paragraph --margin-top) 0 0; - padding-left: fn.dim(--list --indent); -} - -:focus { - outline: 0; -} - -:link, -:visited { - color: currentColor; - text-decoration: none; -} - - -button, -input, -textarea { - box-sizing: content-box; - margin: 0; - padding: 0; - border: 0; - background: none; - color: currentColor; - font-family: inherit; - font-size: 1em; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - text-align: inherit; - text-transform: inherit; - appearance: none; - - &::-moz-focus-inner { - border: 0; - } -} - -::selection { - background: fn.color(--selection --bg); - color: fn.color(--selection --fg); -} - -img { - &::selection { - background: fn.color(--selection --bg-img); - } -} diff --git a/src/index.scss b/src/index.scss index 813764c..24b8d72 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,71 +1,25 @@ -@use 'iro-sass/src/index' as iro; -@use 'include-media/dist/include-media' as media; +@use 'functions'; -@import 'vars'; -@import 'general'; +@use 'vars'; -@import 'layouts/card'; -@import 'layouts/container'; +@use 'base'; -@import 'objects/icon'; -@import 'objects/heading'; -@import 'objects/rule'; -@import 'objects/button'; -@import 'objects/text-field'; -@import 'objects/field-label'; -@import 'objects/radio'; -@import 'objects/checkbox'; -@import 'objects/switch'; -@import 'objects/action-button'; -@import 'objects/status-indicator'; -@import 'objects/avatar'; +@use 'layouts/card'; +@use 'layouts/container'; -@import 'layouts/form'; +@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'; -:root { - @include iro.props-assign('dims'); +@use 'layouts/form'; - @each $breakpoint in map-keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { - @include iro.props-assign($breakpoint); - } - } - - @include iro.props-assign('colors'); - @include iro.props-assign('palette-light'); - - @media (prefers-color-scheme: dark) { - @include iro.props-assign('palette-dark'); - } -} - -@include iro.bem-theme('raised') { - @include iro.props-assign('colors'); - @include iro.props-assign('palette-light-raised'); - - @media (prefers-color-scheme: dark) { - @include iro.props-assign('palette-dark-raised'); - } -} - -@include iro.bem-theme('grayscale') { - @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent); -} - -/*@media (prefers-color-scheme: dark) { - @include iro.props-assign('dark'); - @include iro.props-assign('dark-palette'); - - @include iro.bem-theme('grayscale') { - @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); - } - - @include iro.bem-theme('raised') { - @include iro.props-assign('dark-raised-palette'); - @include iro.props-assign('dark'); - - @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { - @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); - } - } -}*/ +@use 'apply-vars'; diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index aa4a166..7225807 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -11,6 +11,8 @@ ), '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/_checkbox.scss b/src/objects/_checkbox.scss index 5ea2e4a..efc85d6 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -4,7 +4,7 @@ @include iro.props-namespace('checkbox') { @include iro.props-store(( --dims: ( - --size: iro.fn-px-to-rem(13px), + --size: iro.fn-px-to-rem(14px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), --pad-x: .3rem, diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 442034b..46f2a2a 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -4,7 +4,7 @@ @include iro.props-namespace('radio') { @include iro.props-store(( --dims: ( - --diameter: iro.fn-px-to-rem(14px), + --diameter: iro.fn-px-to-rem(15px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), --pad-x: .3rem, diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 9911b73..59e4c55 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -5,7 +5,7 @@ @include iro.props-store(( --dims: ( --width: iro.fn-px-to-rem(26px), - --height: iro.fn-px-to-rem(14px), + --height: iro.fn-px-to-rem(15px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), --pad-x: .3rem, -- cgit v1.2.3-70-g09d2