From 5c878876d3bdd2c7cd094871fa0644f3310bcec8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 23 Jul 2025 08:34:23 +0200 Subject: Commit merge of button and badge into action-button (and rename it to button) --- src/_iro-design.scss | 2 - src/layouts/_button-group.scss | 16 +- src/objects/_action-button.scss | 256 ------------------------- src/objects/_action-button.vars.scss | 359 ----------------------------------- src/objects/_badge.scss | 144 -------------- src/objects/_badge.vars.scss | 161 ---------------- src/objects/_button.scss | 226 +++++++++++++++------- src/objects/_button.vars.scss | 353 ++++++++++++++++++++++++++-------- src_demo/index.scss | 2 - tpl/index.pug | 6 - tpl/objects/action-button.pug | 36 ---- tpl/objects/badge.pug | 37 ---- tpl/objects/button.pug | 56 ++++-- tpl/objects/dialog.pug | 6 +- tpl/objects/icon-nav.pug | 8 +- tpl/objects/lightbox.pug | 6 +- tpl/objects/menu.pug | 2 +- tpl/objects/navbar.pug | 2 +- tpl/objects/side-nav.pug | 2 +- tpl/views/action-button.pug | 182 ------------------ tpl/views/badge.pug | 69 ------- tpl/views/button.pug | 207 ++++++++++++++------ tpl/views/card.pug | 8 +- tpl/views/dialog.pug | 4 +- tpl/views/emoji.pug | 8 +- tpl/views/form.pug | 2 +- tpl/views/menu.pug | 2 +- tpl/views/popover.pug | 2 +- tpl/views/text-field.pug | 6 +- 29 files changed, 659 insertions(+), 1511 deletions(-) delete mode 100644 src/objects/_action-button.scss delete mode 100644 src/objects/_action-button.vars.scss delete mode 100644 src/objects/_badge.scss delete mode 100644 src/objects/_badge.vars.scss delete mode 100644 tpl/objects/action-button.pug delete mode 100644 tpl/objects/badge.pug delete mode 100644 tpl/views/action-button.pug delete mode 100644 tpl/views/badge.pug diff --git a/src/_iro-design.scss b/src/_iro-design.scss index bad29c5..ede8d34 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss @@ -44,11 +44,9 @@ $breakpoints: ( @forward 'scopes/lists' as s-lists--*; @forward 'scopes/tables' as s-tables--*; -@forward 'objects/action-button' as o-action-button--*; @forward 'objects/alert' as o-alert--*; @forward 'objects/avatar' as o-avatar--*; @forward 'objects/backdrop' as o-backdrop--*; -@forward 'objects/badge' as o-badge--*; @forward 'objects/button' as o-button--*; @forward 'objects/card' as o-card--*; @forward 'objects/checkbox' as o-checkbox--*; diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index b0a3c8e..6c874e1 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss @@ -5,7 +5,7 @@ @forward 'button-group.vars'; @use 'button-group.vars' as vars; -@use '../objects/action-button.vars' as action-button; +@use '../objects/button.vars' as button; @mixin styles { @include materialize-at-root(meta.module-variables('vars')); @@ -22,26 +22,26 @@ } @include bem.modifier('align-block') { - margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width)); + margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width)); + margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); } @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); + margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); } - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes { + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { @include bem.modifier('action-#{$mod}') { - margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width)); + margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width)); + margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); } @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1)); + margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); } } } diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss deleted file mode 100644 index c997679..0000000 --- a/src/objects/_action-button.scss +++ /dev/null @@ -1,256 +0,0 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'iro-sass/src/bem'; -@use 'iro-sass/src/props'; -@use '../props' as *; - -@forward 'action-button.vars'; -@use 'action-button.vars' as vars; - -@mixin -apply-theme($theme, $key: ()) { - color: props.get($theme, list.join($key, --disabled --label-color)...); - background-color: props.get($theme, list.join($key, --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --disabled --border-color)...); - - &::after { - outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get($theme, list.join($key, --key-focus --outline-color)...); - } - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --label-color)...); - background-color: props.get($theme, list.join($key, --bg-color)...); - border-color: props.get($theme, list.join($key, --border-color)...); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --shadow-color)...); - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --hover --label-color)...); - background-color: props.get($theme, list.join($key, --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --hover --border-color)...); - } - - &:active { - color: props.get($theme, list.join($key, --active --label-color)...); - background-color: props.get($theme, list.join($key, --active --bg-color)...); - border-color: props.get($theme, list.join($key, --active --border-color)...); - box-shadow: none; - } - } - - @include bem.modifier('static') { - color: props.get($theme, list.join($key, --static --label-color)...); - background-color: props.get($theme, list.join($key, --static --bg-color)...); - border-color: props.get($theme, list.join($key, --static --border-color)...); - box-shadow: none; - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --static --label-color)...); - background-color: props.get($theme, list.join($key, --static --bg-color)...); - border-color: props.get($theme, list.join($key, --static --border-color)...); - box-shadow: none; - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --static --hover --label-color)...); - background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --static --hover --border-color)...); - } - - &:active { - color: props.get($theme, list.join($key, --static --active --label-color)...); - background-color: props.get($theme, list.join($key, --static --active --bg-color)...); - border-color: props.get($theme, list.join($key, --static --active --border-color)...); - } - } - } - - @include bem.modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); - background-color: transparent; - border-color: transparent; - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --quiet --label-color)...); - background-color: transparent; - border-color: transparent; - box-shadow: none; - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --quiet --hover --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); - border-color: transparent; - } - - &:active { - color: props.get($theme, list.join($key, --quiet --active --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); - border-color: transparent; - } - } - } - - @include bem.is('selected') { - color: props.get($theme, list.join($key, --selected --disabled --label-color)...); - background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); - - @include bem.modifier('static') { - color: props.get($theme, list.join($key, --selected --label-color)...); - background-color: props.get($theme, list.join($key, --selected --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --border-color)...); - } - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --selected --label-color)...); - background-color: props.get($theme, list.join($key, --selected --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --border-color)...); - - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --selected --hover --label-color)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); - } - - &:active { - color: props.get($theme, list.join($key, --selected --active --label-color)...); - background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --active --border-color)...); - } - } - } -} - -@mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('action-button') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - line-height: props.get(vars.$line-height); - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - border: props.get(vars.$border-width) solid transparent; - border-radius: props.get(vars.$rounding); - - &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; - pointer-events: none; - content: ''; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - outline: transparent solid props.get(vars.$key-focus--border-width); - } - - &:link, - &:visited, - &:enabled { - &:focus-visible { - &::after { - display: block; - } - } - } - - @include bem.elem('label') { - margin-inline: props.get(vars.$pad-i-label); - } - - @include -apply-theme(vars.$default-theme); - - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-theme(vars.$themes, $theme); - } - } - - @include bem.modifier('pill') { - padding-inline: props.get(vars.$pad-i-pill); - border-radius: 100em; - - &::after { - border-radius: 100em; - } - } - - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); - padding-inline: 0; - } - - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include bem.modifier($mod) { - padding-block: props.get($pad-b); - padding-inline: props.get($pad-i); - font-size: props.get($font-size); - - @include bem.elem('label') { - margin-inline: props.get($pad-i-label); - } - - @include bem.modifier('pill') { - padding-inline: props.get($pad-i-pill); - } - - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); - padding-inline: 0; - } - } - } - - @include bem.modifier('align-block') { - margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); - - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); - } - - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); - } - - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include bem.modifier($mod) { - margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); - - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); - } - - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); - } - } - } - } - } -} diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss deleted file mode 100644 index 6693b61..0000000 --- a/src/objects/_action-button.vars.scss +++ /dev/null @@ -1,359 +0,0 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'iro-sass/src/props'; -@use '../core.vars' as core; - -$line-height: props.def(--o-action-button--line-height, 1.4) !default; -$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; -$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default; - -$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default; -$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; -$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default; -$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; -$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; - -$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default; -$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default; -$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default; -$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; -$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; - -$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default; -$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default; -$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default; -$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; -$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; - -$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default; -$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default; -$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default; -$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; -$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; - -$shadow-x: props.def(--o-action-button--shadow-x, props.get(core.$shadow--l1--x)) !default; -$shadow-y: props.def(--o-action-button--shadow-y, props.get(core.$shadow--l1--y)) !default; -$shadow-blur: props.def(--o-action-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; -$shadow-grow: props.def(--o-action-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; - -$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; - -$fixed-sizes: ( - 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, -) !default; - -$themes: props.def(--o-action-button, (), 'color'); - -$default-theme-override: () !default; -$default-theme: map.deep-merge(( - --bg-color: props.get(core.$theme, --bg-l2), - --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), - --shadow-color: props.get(core.$theme, --shadow), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --text-mute-more), - ), - - --disabled: ( - --bg-color: transparent, - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), - - --hover: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --static: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, --text), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), -), $default-theme-override) !default; -$default-theme: props.def(--o-action-button, $default-theme, 'color'); - -$default-theme-dark-override: () !default; -$default-theme-dark: map.deep-merge(( - --bg-color: props.get(core.$theme, --border-mute), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-strong), - ), - - --selected: ( - --border-color: props.get(core.$theme, --text), - ), -), $default-theme-override) !default; -$default-theme-dark: props.def(--o-action-button, $default-theme-dark, 'dark'); - -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; - - $themes: props.merge($themes, ( - $button-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), - --shadow-color: props.get(core.$transparent-colors, --black, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --400), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --500), - ), - - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --300), - ), - - --key-focus: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), - - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - ), - - --static: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), - ), - - --quiet: ( - --label-color: props.get(core.$transparent-colors, $theme, --900), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), - - --disabled: ( - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), - ) - )); -} - -$themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, -) !default; - -@each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), - --shadow-color: props.get(core.$theme, $key, --200), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --600), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --400), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --800), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, #{$key}-static, --900), - --label-color: props.get(core.$theme, #{$key}-static, --900-text), - --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), - - --hover: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1000), - --label-color: props.get(core.$theme, #{$key}-static, --1000-text), - --border-color: props.get(core.$theme, #{$key}-static, --1000), - ), - - --active: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1100), - --label-color: props.get(core.$theme, #{$key}-static, --1100-text), - --border-color: props.get(core.$theme, #{$key}-static, --1100), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --static: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --300), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --400), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --500), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, $key, --1100), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), - ) - )); -} diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss deleted file mode 100644 index 9f3e307..0000000 --- a/src/objects/_badge.scss +++ /dev/null @@ -1,144 +0,0 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'iro-sass/src/bem'; -@use 'iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; - -@forward 'badge.vars'; -@use 'badge.vars' as vars; - -@mixin -apply-theme($theme, $key: (), $static: false) { - color: props.get($theme, list.join($key, --label)...); - background-color: props.get($theme, list.join($key, --bg)...); - - &:link, - &:visited, - &:enabled { - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --hover --label)...); - background-color: props.get($theme, list.join($key, --hover --bg)...); - } - - &:active { - color: props.get($theme, list.join($key, --active --label)...); - background-color: props.get($theme, list.join($key, --active --bg)...); - } - } - - @include bem.modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --label)...); - background-color: props.get($theme, list.join($key, --quiet --bg)...); - - &:link, - &:visited, - &:enabled { - &:hover, - &:focus-visible { - color: props.get($theme, list.join($key, --quiet --hover --label)...); - background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); - } - - &:active { - color: props.get($theme, list.join($key, --quiet --active --label)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg)...); - } - } - } - - @if $static { - &::after { - outline-color: props.get($theme, list.join($key, --key-focus --border)...); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get($theme, list.join($key, --key-focus --outline)...); - } - } -} - -@mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('badge') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - font-size: props.get(vars.$font-size); - line-height: props.get(core.$font--standard--line-height); - text-align: center; - text-decoration: none; - background-clip: padding-box; - border-radius: props.get(vars.$rounding); - - &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; - pointer-events: none; - content: ''; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - outline: transparent solid props.get(vars.$key-focus--border-width); - } - - &:link, - &:visited, - &:enabled { - &:focus-visible { - &::after { - display: block; - } - } - } - - @include bem.elem('label') { - margin-inline: props.get(vars.$pad-i-label); - } - - @include -apply-theme(vars.$default-theme, $static: true); - - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-theme(vars.$themes, $theme); - } - } - - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-theme(vars.$static-themes, $theme, true); - } - } - - @include bem.modifier('pill') { - padding-inline: props.get(vars.$pad-i-pill); - border-radius: 10em; - - &::after { - border-radius: 10em; - } - } - - @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { - @include bem.modifier($mod) { - padding-block: props.get($pad-b); - padding-inline: props.get($pad-i); - font-size: props.get($font-size); - - @include bem.elem('label') { - margin-inline: props.get($pad-i-label); - } - - @include bem.modifier('pill') { - padding-inline: props.get($pad-i-pill); - } - } - } - } -} diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss deleted file mode 100644 index ff07148..0000000 --- a/src/objects/_badge.vars.scss +++ /dev/null @@ -1,161 +0,0 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'iro-sass/src/props'; -@use '../core.vars' as core; - -$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default; -$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default; -$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default; -$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default; -$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default; -$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default; - -$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default; -$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default; -$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default; -$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default; -$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default; - -$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default; -$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default; -$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default; -$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default; -$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default; - -$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default; -$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default; -$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default; -$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default; -$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default; - -$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; - -$sizes: ( - 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm, - 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg, - 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, -) !default; - -$default-theme-override: () !default; -$default-theme: props.def(--o-badge, ( - --bg: props.get(core.$theme, --heading), - --label: props.get(core.$theme, --bg-l2), - - --hover: ( - --bg: props.get(core.$theme, --text), - --label: props.get(core.$theme, --bg-l2), - ), - - --active: ( - --bg: props.get(core.$theme, --text-mute), - --label: props.get(core.$theme, --bg-l2), - ), - - --key-focus: ( - --label: props.get(core.$theme, --focus, --text), - --border: props.get(core.$theme, --focus, --border), - --outline: props.get(core.$theme, --focus, --outline), - ), - - --quiet: ( - --bg: props.get(core.$theme, --border-mute), - --label: props.get(core.$theme, --heading), - - --hover: ( - --bg: props.get(core.$theme, --border), - --label: props.get(core.$theme, --heading), - ), - - --active: ( - --bg: props.get(core.$theme, --border-strong), - --label: props.get(core.$theme, --heading), - ), - ) -), 'color') !default; -$default-theme: props.merge($default-theme, $default-theme-override); - -$static-themes: props.def(--o-badge, (), 'color'); - -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $badge-theme: --static-#{string.slice($theme, 3)}; - - $static-themes: props.merge($static-themes, ( - $badge-theme: ( - --bg: props.get(core.$transparent-colors, $theme, --800), - --label: props.get(core.$transparent-colors, $theme, --text), - - --hover: ( - --bg: props.get(core.$transparent-colors, $theme, --900), - --label: props.get(core.$transparent-colors, $theme, --text), - ), - - --active: ( - --bg: props.get(core.$transparent-colors, $theme, --900), - --label: props.get(core.$transparent-colors, $theme, --text), - ), - - --key-focus: ( - --bg: props.get(core.$transparent-colors, $theme, --100), - --label: props.get(core.$transparent-colors, $theme, --900), - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), - ), - - --quiet: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --label: props.get(core.$transparent-colors, $theme, --900), - --hover: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --900), - ), - --active: ( - --bg: props.get(core.$transparent-colors, $theme, --400), - --label: props.get(core.$transparent-colors, $theme, --900), - ), - ) - ) - )); -} - -$themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, -) !default; - -$themes: props.def(--o-badge, (), 'color'); - -@each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg: props.get(core.$theme, #{$key}-static, --900), - --label: props.get(core.$theme, #{$key}-static, --900-text), - - --hover: ( - --bg: props.get(core.$theme, #{$key}-static, --1000), - --label: props.get(core.$theme, #{$key}-static, --1000-text), - ), - - --active: ( - --bg: props.get(core.$theme, #{$key}-static, --1100), - --label: props.get(core.$theme, #{$key}-static, --1000-text), - ), - - --quiet: ( - --bg: props.get(core.$theme, $key, --200), - --label: props.get(core.$theme, $key, --1100), - --hover: ( - --bg: props.get(core.$theme, $key, --300), - --label: props.get(core.$theme, $key, --1200), - ), - --active: ( - --bg: props.get(core.$theme, $key, --400), - --label: props.get(core.$theme, $key, --1300), - ), - ) - ) - )); -} diff --git a/src/objects/_button.scss b/src/objects/_button.scss index aaf55b5..0467f24 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -5,72 +5,141 @@ @use 'iro-sass/src/bem'; @use 'iro-sass/src/props'; @use '../props' as *; -@use '../core.vars' as core; @forward 'button.vars'; @use 'button.vars' as vars; @mixin -apply-theme($theme, $key: ()) { - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --label)...); - background-color: props.get($theme, list.join($key, --bg)...); - border-color: transparent; - } - - @include bem.modifier('outline') { - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --outline-label)...); - background-color: transparent; - border-color: props.get($theme, list.join($key, --outline-border)...); - } + color: props.get($theme, list.join($key, --disabled --label-color)...); + background-color: props.get($theme, list.join($key, --disabled --bg-color)...); + border-color: props.get($theme, list.join($key, --disabled --border-color)...); + + &::after { + outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get($theme, list.join($key, --key-focus --outline-color)...); } &:link, &:visited, &:enabled { + color: props.get($theme, list.join($key, --label-color)...); + background-color: props.get($theme, list.join($key, --bg-color)...); + border-color: props.get($theme, list.join($key, --border-color)...); + box-shadow: + props.get(vars.$shadow-x) + props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --shadow-color)...); + &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --hover --label)...); - background-color: props.get($theme, list.join($key, --hover --bg)...); - border-color: transparent; + color: props.get($theme, list.join($key, --hover --label-color)...); + background-color: props.get($theme, list.join($key, --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --active --label)...); - background-color: props.get($theme, list.join($key, --active --bg)...); - border-color: transparent; + color: props.get($theme, list.join($key, --active --label-color)...); + background-color: props.get($theme, list.join($key, --active --bg-color)...); + border-color: props.get($theme, list.join($key, --active --border-color)...); + box-shadow: none; } } -} -@mixin -apply-static-theme($theme, $key: ()) { - color: props.get($theme, list.join($key, --disabled --label)...); - background-color: props.get($theme, list.join($key, --disabled --bg)...); - border-color: transparent; + @include bem.modifier('static') { + color: props.get($theme, list.join($key, --static --label-color)...); + background-color: props.get($theme, list.join($key, --static --bg-color)...); + border-color: props.get($theme, list.join($key, --static --border-color)...); + box-shadow: none; - &::after { - outline-color: props.get($theme, list.join($key, --key-focus --border)...); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get($theme, list.join($key, --key-focus --outline)...); + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --static --label-color)...); + background-color: props.get($theme, list.join($key, --static --bg-color)...); + border-color: props.get($theme, list.join($key, --static --border-color)...); + box-shadow: none; + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --static --hover --label-color)...); + background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --static --hover --border-color)...); + } + + &:active { + color: props.get($theme, list.join($key, --static --active --label-color)...); + background-color: props.get($theme, list.join($key, --static --active --bg-color)...); + border-color: props.get($theme, list.join($key, --static --active --border-color)...); + } + } } - - @include bem.modifier('outline') { + + @include bem.modifier('quiet') { + color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); background-color: transparent; - border-color: props.get($theme, list.join($key, --disabled --outline-border)...); + border-color: transparent; + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --quiet --label-color)...); + background-color: transparent; + border-color: transparent; + box-shadow: none; + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --quiet --hover --label-color)...); + background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); + border-color: transparent; + } + + &:active { + color: props.get($theme, list.join($key, --quiet --active --label-color)...); + background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); + border-color: transparent; + } + } } - @include -apply-theme($theme, $key); + @include bem.is('selected') { + color: props.get($theme, list.join($key, --selected --disabled --label-color)...); + background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); - @include bem.modifier('primary') { - @include -apply-theme($theme, list.join($key, --primary)); + @include bem.modifier('static') { + color: props.get($theme, list.join($key, --selected --label-color)...); + background-color: props.get($theme, list.join($key, --selected --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); + } + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --selected --label-color)...); + background-color: props.get($theme, list.join($key, --selected --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); + + &:hover, + &:focus-visible { + color: props.get($theme, list.join($key, --selected --hover --label-color)...); + background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); + } + + &:active { + color: props.get($theme, list.join($key, --selected --active --label-color)...); + background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --active --border-color)...); + } + } } } @@ -82,11 +151,11 @@ display: inline-block; padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - font-size: props.get(vars.$font-size); - font-weight: 500; line-height: props.get(vars.$line-height); text-align: center; text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; border: props.get(vars.$border-width) solid transparent; border-radius: props.get(vars.$rounding); @@ -114,16 +183,30 @@ @include bem.elem('label') { margin-inline: props.get(vars.$pad-i-label); } - - @include bem.modifier('block') { - display: block; + + @include -apply-theme(vars.$default-theme); + + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.modifier(string.slice($theme, 3)) { + @include -apply-theme(vars.$themes, $theme); + } } - - @include bem.modifier('outline') { - background-color: transparent; + + @include bem.modifier('pill') { + padding-inline: props.get(vars.$pad-i-pill); + border-radius: 100em; + + &::after { + border-radius: 100em; + } + } + + @include bem.modifier('icon') { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); + padding-inline: 0; } - @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { @include bem.modifier($mod) { padding-block: props.get($pad-b); padding-inline: props.get($pad-i); @@ -132,27 +215,42 @@ @include bem.elem('label') { margin-inline: props.get($pad-i-label); } + + @include bem.modifier('pill') { + padding-inline: props.get($pad-i-pill); + } + + @include bem.modifier('icon') { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); + padding-inline: 0; + } } } - @include -apply-static-theme(vars.$default-theme); + @include bem.modifier('align-block') { + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-theme(vars.$themes, $theme); + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); } - } - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-static-theme(vars.$static-themes, $theme); + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); } - } + + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @include bem.modifier($mod) { + margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); - @include bem.modifier('round') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); - padding-inline: 0; - border-radius: 100em; + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); + } + + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + } + } + } } } } diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 4f7b552..1ab7e5a 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -4,164 +4,355 @@ @use '../core.vars' as core; $line-height: props.def(--o-button--line-height, 1.4) !default; -$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; -$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; -$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default; -$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default; -$rounding: props.def(--o-button--rounding, 10em) !default; -$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; +$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default; +$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; -$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; +$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default; $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; -$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; +$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default; +$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default; $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; -$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; -$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; -$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; +$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; +$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default; +$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default; +$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; +$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; + +$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; +$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default; +$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; +$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; -$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; -$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; +$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; +$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default; +$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; +$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; +$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; +$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; +$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; + $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$sizes: ( - 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, +$fixed-sizes: ( + 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, + 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, + 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, ) !default; +$themes: props.def(--o-button, (), 'color'); + $default-theme-override: () !default; -$default-theme: props.def(--o-button, ( - --bg: props.get(core.$theme, --border-mute), - --label: props.get(core.$theme, --text), - --outline-border: props.get(core.$theme, --border), - --outline-label: props.get(core.$theme, --text), +$default-theme: map.deep-merge(( + --bg-color: props.get(core.$theme, --bg-l2), + --label-color: props.get(core.$theme, --text), + --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), + --shadow-color: props.get(core.$theme, --shadow), --hover: ( - --bg: props.get(core.$theme, --border), - --label: props.get(core.$theme, --heading), + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), ), --active: ( - --bg: props.get(core.$theme, --border-strong), - --label: props.get(core.$theme, --heading), + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --text-mute-more), ), --disabled: ( - --bg: props.get(core.$theme, --border-mute), - --outline-border: props.get(core.$theme, --border), - --label: props.get(core.$theme, --text-disabled), + --bg-color: transparent, + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border), ), --key-focus: ( - --label: props.get(core.$theme, --focus, --text), - --border: props.get(core.$theme, --focus, --border), - --outline: props.get(core.$theme, --focus, --outline), + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --selected: ( + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), + + --hover: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --static: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-mute), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), + ), ), - --primary: ( - --bg: props.get(core.$theme, --base, --900), - --label: props.get(core.$theme, --base, --900-text), - --outline-border: props.get(core.$theme, --base, --900), - --outline-label: props.get(core.$theme, --text), + --quiet: ( + --label-color: props.get(core.$theme, --text), --hover: ( - --bg: props.get(core.$theme, --base, --800), - --label: props.get(core.$theme, --base, --800-text), + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), ), --active: ( - --bg: props.get(core.$theme, --base, --700), - --label: props.get(core.$theme, --base, --700-text), + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), ), ), -), 'color') !default; -$default-theme: props.merge($default-theme, $default-theme-override); +), $default-theme-override) !default; +$default-theme: props.def(--o-button, $default-theme, 'color'); + +$default-theme-dark-override: () !default; +$default-theme-dark: map.deep-merge(( + --bg-color: props.get(core.$theme, --border-mute), + --border-color: props.get(core.$theme, --border-mute), -$static-themes: props.def(--o-button, (), 'color'); + --hover: ( + --bg-color: props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-strong), + ), + + --selected: ( + --border-color: props.get(core.$theme, --text), + ), +), $default-theme-override) !default; +$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( + $themes: props.merge($themes, ( $button-theme: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --label: props.get(core.$transparent-colors, $theme, --900), - --outline-border: props.get(core.$transparent-colors, $theme, --300), - --outline-label: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), + --shadow-color: props.get(core.$transparent-colors, --black, --200), --hover: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --400), ), --active: ( - --bg: props.get(core.$transparent-colors, $theme, --400), - --label: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --500), ), --disabled: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --outline-border: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), + --bg-color: props.get(core.$transparent-colors, $theme, --100), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --300), ), --key-focus: ( - --bg: props.get(core.$transparent-colors, $theme, --100), - --label: props.get(core.$transparent-colors, $theme, --900), - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), ), - --primary: ( - --bg: props.get(core.$transparent-colors, $theme, --800), - --label: props.get(core.$transparent-colors, $theme, --text), - --outline-border: props.get(core.$transparent-colors, $theme, --800), - --outline-label: props.get(core.$transparent-colors, $theme, --900), - + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), + --hover: ( - --bg: props.get(core.$transparent-colors, $theme, --900), - --label: props.get(core.$transparent-colors, $theme, --text), + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100), ), --active: ( - --bg: props.get(core.$transparent-colors, $theme, --900), - --label: props.get(core.$transparent-colors, $theme, --text), + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --100), + ), + ), + + --static: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, ), - ) + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), + ), + + --quiet: ( + --label-color: props.get(core.$transparent-colors, $theme, --900), + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), + + --disabled: ( + --label-color: props.get(core.$transparent-colors, $theme, --500), + ), + ), ) )); } $themes-config: ( accent: --accent, + positive: --positive, negative: --negative, + warning: --warning, ) !default; -$themes: props.def(--o-button, (), 'color'); - @each $theme, $key in $themes-config { $themes: props.merge($themes, ( --#{$theme}: ( - --bg: props.get(core.$theme, #{$key}-static, --900), - --label: props.get(core.$theme, #{$key}-static, --900-text), - --outline-border: props.get(core.$theme, $key, --900), - --outline-label: props.get(core.$theme, $key, --1000), + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), + --shadow-color: props.get(core.$theme, $key, --200), --hover: ( - --bg: props.get(core.$theme, #{$key}-static, --1000), - --label: props.get(core.$theme, #{$key}-static, --1000-text), + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --600), ), --active: ( - --bg: props.get(core.$theme, #{$key}-static, --1100), - --label: props.get(core.$theme, #{$key}-static, --1100-text), + --bg-color: props.get(core.$theme, $key, --400), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --800), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --selected: ( + --bg-color: props.get(core.$theme, #{$key}-static, --900), + --label-color: props.get(core.$theme, #{$key}-static, --900-text), + --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), + + --hover: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1000), + --label-color: props.get(core.$theme, #{$key}-static, --1000-text), + --border-color: props.get(core.$theme, #{$key}-static, --1000), + ), + + --active: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1100), + --label-color: props.get(core.$theme, #{$key}-static, --1100-text), + --border-color: props.get(core.$theme, #{$key}-static, --1100), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --static: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --300), + + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --400), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --500), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, $key, --1100), + + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), ), ) )); diff --git a/src_demo/index.scss b/src_demo/index.scss index 5251a05..5614bc4 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss @@ -23,11 +23,9 @@ @include iro.l-split-view--styles; @include iro.o-icon--styles; -@include iro.o-action-button--styles; @include iro.o-alert--styles; @include iro.o-avatar--styles; @include iro.o-backdrop--styles; -@include iro.o-badge--styles; @include iro.o-button--styles; @include iro.o-card--styles; @include iro.o-checkbox--styles; diff --git a/tpl/index.pug b/tpl/index.pug index 7d73c75..0f1b5b0 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -9,7 +9,6 @@ include layouts/container.pug include objects/palette.pug include objects/heading.pug include objects/divider.pug -include objects/badge.pug include objects/button.pug include objects/text-field.pug include objects/field-label.pug @@ -17,7 +16,6 @@ include objects/radio.pug include objects/checkbox.pug include objects/switch.pug include objects/form.pug -include objects/action-button.pug include objects/overflow-button.pug include objects/status-indicator.pug include objects/avatar.pug @@ -62,7 +60,6 @@ include views/links.pug include views/code.pug include views/blockquote.pug include views/list.pug -include views/badge.pug include views/button.pug include views/text-field.pug include views/field-label.pug @@ -70,7 +67,6 @@ include views/radio.pug include views/checkbox.pug include views/switch.pug include views/form.pug -include views/action-button.pug include views/overflow-button.pug include views/status-indicator.pug include views/avatar.pug @@ -110,7 +106,6 @@ html +view-blockquote +view-list +view-emoji - +view-badge +view-button +view-text-field +view-field-label @@ -118,7 +113,6 @@ html +view-checkbox +view-switch +view-form - +view-action-button //+view-overflow-button +view-status-indicator +view-avatar diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug deleted file mode 100644 index 0e77e58..0000000 --- a/tpl/objects/action-button.pug +++ /dev/null @@ -1,36 +0,0 @@ -include icon.pug - -mixin action-button - - - let classes = { - 'o-action-button': true, - 'u-d-block': attributes.block, - 'o-action-button--secondary': attributes.secondary, - 'o-action-button--quiet': attributes.quiet, - 'o-action-button--pill': attributes.pill, - 'o-action-button--static': attributes.static, - 'o-action-button--icon': !!attributes.icon && !block, - 'is-selected': attributes.selected, - } - if (attributes.theme) { - classes['o-action-button--' + attributes.theme] = true - } - if (attributes.size) { - classes['o-action-button--' + attributes.size] = true - } - if (attributes.class) { - classes[attributes.class] = true; - } - - let href = attributes.disabled ? null : '#'; - - a(class=classes href=href) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-action-button__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug deleted file mode 100644 index 48e4029..0000000 --- a/tpl/objects/badge.pug +++ /dev/null @@ -1,37 +0,0 @@ -mixin badge(variant) - - - let classes = { - 'o-badge': true, - 'o-badge--pill': !!attributes.pill, - 'o-badge--quiet': !!attributes.quiet, - 'o-menu__badge': !!attributes.menu, - } - if (attributes.size) { - classes['o-badge--' + attributes.size] = true - } - if (variant) { - classes['o-badge--' + variant] = true - } - - if attributes.href - a(href=attributes.href class=classes) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-badge__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) - else - span(class=classes) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-badge__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 0884c8d..b9b4cbd 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -1,28 +1,48 @@ -mixin a-button +include icon.pug + +mixin button - let classes = { - 'o-button': true, - 'o-button--block': attributes.block, - 'o-button--primary': attributes.primary, - 'o-button--outline': attributes.outline, - 'o-button--round': !!attributes.icon && !block + 'o-button': true, + 'u-d-block': attributes.block, + 'o-button--secondary': attributes.secondary, + 'o-button--quiet': attributes.quiet, + 'o-button--pill': attributes.pill, + 'o-button--static': attributes.static, + 'o-button--icon': !!attributes.icon && !block, + 'is-selected': attributes.selected, } - if (attributes.variant) { - classes['o-button--' + attributes.variant] = true + if (attributes.theme) { + classes['o-button--' + attributes.theme] = true } if (attributes.size) { classes['o-button--' + attributes.size] = true } + if (attributes.class) { + classes[attributes.class] = true; + } let href = attributes.disabled ? null : '#'; - a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-button__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) + if attributes.badge + span(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) + else + a(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 3ceae69..1a2f061 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -54,13 +54,13 @@ mixin dialog(title) else if title +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') + +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') section(class=bodyClass) if slots.body - slots.body() footer.o-dialog__footer.l-button-group - +a-button(outline=true)= 'Cancel' + +button(outline=true)= 'Cancel' = ' ' - +a-button(variant='accent')= 'Continue' + +button(variant='accent')= 'Continue' diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug index f1c7d8a..afdf2db 100644 --- a/tpl/objects/icon-nav.pug +++ b/tpl/objects/icon-nav.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin icon-nav - @@ -19,9 +19,9 @@ mixin icon-nav-item(icon) - let classes = { 'o-icon-nav__item': true, - 'o-action-button': true, - 'o-action-button--round': true, - 'o-action-button--quiet': true, + 'o-button': true, + 'o-button--round': true, + 'o-button--quiet': true, 'is-selected': attributes.selected, } if (attributes.class) { diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 842d44a..2d520b5 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -23,14 +23,14 @@ mixin lightbox(images) header.o-lightbox__header div(class=linksClasses) block - +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') + +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') each img, i in images img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) if images.length > 1 - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') .o-lightbox__thumbnails each img, i in images diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 578f9bc..802f9bd 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin menu - diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug index 5c7642c..14ec9d3 100644 --- a/tpl/objects/navbar.pug +++ b/tpl/objects/navbar.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin navbar - diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug index ccd24e4..2dcbd84 100644 --- a/tpl/objects/side-nav.pug +++ b/tpl/objects/side-nav.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin side-nav - diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug deleted file mode 100644 index 4d2ffb6..0000000 --- a/tpl/views/action-button.pug +++ /dev/null @@ -1,182 +0,0 @@ -mixin view-action-button - +view('action-button', 'Action button') - .c-box - +action-button(size='sm')= 'Idle' - = ' ' - +action-button= 'Idle' - = ' ' - +action-button(size='lg')= 'Idle' - = ' ' - +action-button(size='xl')= 'Idle' - br - br - +action-button(icon='trash' size='sm') - = ' ' - +action-button(icon='trash') - = ' ' - +action-button(icon='trash' size='lg') - = ' ' - +action-button(icon='trash' size='xl') - br - br - +action-button(icon='user' size='sm')= 'Idle' - = ' ' - +action-button(icon='user')= 'Idle' - = ' ' - +action-button(icon='user' size='lg')= 'Idle' - = ' ' - +action-button(icon='user' size='xl')= 'Idle' - - .c-box - +action-button(pill=true size='sm')= 'Idle' - = ' ' - +action-button(pill=true)= 'Idle' - = ' ' - +action-button(pill=true size='lg')= 'Idle' - = ' ' - +action-button(pill=true size='xl')= 'Idle' - br - br - +action-button(pill=true icon='trash' size='sm') - = ' ' - +action-button(pill=true icon='trash') - = ' ' - +action-button(pill=true icon='trash' size='lg') - = ' ' - +action-button(pill=true icon='trash' size='xl') - br - br - +action-button(pill=true icon='user' size='sm')= 'Idle' - = ' ' - +action-button(pill=true icon='user')= 'Idle' - = ' ' - +action-button(pill=true icon='user' size='lg')= 'Idle' - = ' ' - +action-button(pill=true icon='user' size='xl')= 'Idle' - - .c-box - +action-button= 'Label' - = ' ' - +action-button(icon='trash')= 'Label' - = ' ' - +action-button(icon='trash') - br - br - +action-button(quiet=true)= 'Label' - = ' ' - +action-button(quiet=true icon='trash')= 'Label' - = ' ' - +action-button(quiet=true icon='trash') - - .c-box - +action-button= 'Idle' - = ' ' - +action-button(selected=true)= 'Selected' - = ' ' - +action-button(disabled=true)= 'Disabled' - = ' ' - +action-button(selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(static=true )= 'Idle' - = ' ' - +action-button(static=true selected=true)= 'Selected' - = ' ' - +action-button(static=true disabled=true)= 'Disabled' - = ' ' - +action-button(static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(quiet=true )= 'Idle' - = ' ' - +action-button(quiet=true selected=true)= 'Selected' - = ' ' - +action-button(quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' - - .c-box - +action-button(pill=true)= 'Idle' - = ' ' - +action-button(pill=true selected=true)= 'Selected' - = ' ' - +action-button(pill=true disabled=true)= 'Disabled' - = ' ' - +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(pill=true static=true)= 'Idle' - = ' ' - +action-button(pill=true static=true selected=true)= 'Selected' - = ' ' - +action-button(pill=true static=true disabled=true)= 'Disabled' - = ' ' - +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(pill=true quiet=true)= 'Idle' - = ' ' - +action-button(pill=true quiet=true selected=true)= 'Selected' - = ' ' - +action-button(pill=true quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' - - each theme, i in ['accent', 'positive', 'negative', 'warning'] - .c-box - +action-button(theme=theme)= 'Idle' - = ' ' - +action-button(theme=theme selected=true)= 'Selected' - = ' ' - +action-button(theme=theme disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme static=true)= 'Idle' - = ' ' - +action-button(theme=theme static=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme static=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme quiet=true)= 'Idle' - = ' ' - +action-button(theme=theme quiet=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' - - each theme in ['static-black', 'static-white'] - - - const bg = theme.startsWith('static-black') ? 500 : 1000; - - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) - +action-button(theme=theme)= 'Idle' - = ' ' - +action-button(theme=theme selected=true)= 'Selected' - = ' ' - +action-button(theme=theme disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme static=true)= 'Idle' - = ' ' - +action-button(theme=theme static=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme static=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme quiet=true)= 'Idle' - = ' ' - +action-button(theme=theme quiet=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug deleted file mode 100644 index cc1f346..0000000 --- a/tpl/views/badge.pug +++ /dev/null @@ -1,69 +0,0 @@ -mixin view-badge - +view('badge', 'Badge') - .c-box - +badge(size='sm' href='#')= '50' - = ' ' - +badge(href='#')= '100' - = ' ' - +badge(size='lg' href='#')= '200' - = ' ' - +badge(size='xl' href='#')= '300' - - .c-box - +badge(pill=true size='sm' href='#')= '50' - = ' ' - +badge(pill=true href='#')= '100' - = ' ' - +badge(pill=true size='lg' href='#')= '200' - = ' ' - +badge(pill=true size='xl' href='#')= '300' - - .c-box - +badge(icon='image' size='sm' href='#')= '50' - = ' ' - +badge(icon='image' href='#')= '100' - = ' ' - +badge(icon='image' size='lg' href='#')= '200' - = ' ' - +badge(icon='image' size='xl' href='#')= '300' - - .c-box - +badge(pill=true icon='image' size='sm' href='#')= '50' - = ' ' - +badge(pill=true icon='image' href='#')= '100' - = ' ' - +badge(pill=true icon='image' size='lg' href='#')= '200' - = ' ' - +badge(pill=true icon='image' size='xl' href='#')= '300' - - .c-box - +badge(href='#')= '100' - = ' ' - +badge(quiet=true href='#')= '100' - = ' ' - +badge(pill=true href='#')= '100' - = ' ' - +badge(quiet=true pill=true href='#')= '100' - - each theme in ['accent', 'positive', 'negative', 'warning'] - .c-box - +badge(theme)(href='#')= 'new' - = ' ' - +badge(theme)(quiet=true href='#')= 'new' - = ' ' - +badge(theme)(pill=true href='#')= 'new' - = ' ' - +badge(theme)(quiet=true pill=true href='#')= 'new' - - each theme in ['static-black', 'static-white'] - - - const bg = theme.startsWith('static-black') ? 500 : 1000; - - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) - +badge(theme)(href='#')= 'new' - = ' ' - +badge(theme)(quiet=true href='#')= 'new' - = ' ' - +badge(theme)(pill=true href='#')= 'new' - = ' ' - +badge(theme)(quiet=true pill=true href='#')= 'new' diff --git a/tpl/views/button.pug b/tpl/views/button.pug index da7531b..7e03e04 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -1,89 +1,182 @@ mixin view-button +view('button', 'Button') .c-box - +a-button(size='sm')= 'Button' + +button(size='sm')= 'Idle' = ' ' - +a-button= 'Button' + +button= 'Idle' = ' ' - +a-button(size='lg')= 'Button' + +button(size='lg')= 'Idle' = ' ' - +a-button(size='xl')= 'Button' + +button(size='xl')= 'Idle' + br + br + +button(icon='trash' size='sm') + = ' ' + +button(icon='trash') + = ' ' + +button(icon='trash' size='lg') + = ' ' + +button(icon='trash' size='xl') + br + br + +button(icon='user' size='sm')= 'Idle' + = ' ' + +button(icon='user')= 'Idle' + = ' ' + +button(icon='user' size='lg')= 'Idle' + = ' ' + +button(icon='user' size='xl')= 'Idle' .c-box - +a-button(size='sm' outline=true)= 'Button' + +button(pill=true size='sm')= 'Idle' + = ' ' + +button(pill=true)= 'Idle' + = ' ' + +button(pill=true size='lg')= 'Idle' + = ' ' + +button(pill=true size='xl')= 'Idle' + br + br + +button(pill=true icon='trash' size='sm') + = ' ' + +button(pill=true icon='trash') = ' ' - +a-button(outline=true)= 'Button' + +button(pill=true icon='trash' size='lg') = ' ' - +a-button(size='lg' outline=true)= 'Button' + +button(pill=true icon='trash' size='xl') + br + br + +button(pill=true icon='user' size='sm')= 'Idle' = ' ' - +a-button(size='xl' outline=true)= 'Button' + +button(pill=true icon='user')= 'Idle' + = ' ' + +button(pill=true icon='user' size='lg')= 'Idle' + = ' ' + +button(pill=true icon='user' size='xl')= 'Idle' .c-box - +a-button(postIcon='arrow-right' size='sm')= 'Button' + +button= 'Label' + = ' ' + +button(icon='trash')= 'Label' = ' ' - +a-button(postIcon='arrow-right')= 'Button' + +button(icon='trash') + br + br + +button(quiet=true)= 'Label' = ' ' - +a-button(postIcon='arrow-right' size='lg')= 'Button' + +button(quiet=true icon='trash')= 'Label' = ' ' - +a-button(postIcon='arrow-right' size='xl')= 'Button' + +button(quiet=true icon='trash') .c-box - .l-button-group - +a-button= 'Button' - +a-button(disabled=true)= 'Button' - +a-button(outline=true)= 'Button' - +a-button(outline=true disabled=true)= 'Button' - br - br - .l-button-group - +a-button(icon='trash') - +a-button(disabled=true icon='trash') - +a-button(outline=true icon='trash') - +a-button(outline=true disabled=true icon='trash') + +button= 'Idle' + = ' ' + +button(selected=true)= 'Selected' + = ' ' + +button(disabled=true)= 'Disabled' + = ' ' + +button(selected=true disabled=true)= 'Selected + disabled' + br + br + +button(static=true )= 'Idle' + = ' ' + +button(static=true selected=true)= 'Selected' + = ' ' + +button(static=true disabled=true)= 'Disabled' + = ' ' + +button(static=true selected=true disabled=true)= 'Selected + disabled' + br + br + +button(quiet=true )= 'Idle' + = ' ' + +button(quiet=true selected=true)= 'Selected' + = ' ' + +button(quiet=true disabled=true)= 'Disabled' + = ' ' + +button(quiet=true selected=true disabled=true)= 'Selected + disabled' - each theme in ['primary', 'accent', 'negative'] + .c-box + +button(pill=true)= 'Idle' + = ' ' + +button(pill=true selected=true)= 'Selected' + = ' ' + +button(pill=true disabled=true)= 'Disabled' + = ' ' + +button(pill=true selected=true disabled=true)= 'Selected + disabled' + br + br + +button(pill=true static=true)= 'Idle' + = ' ' + +button(pill=true static=true selected=true)= 'Selected' + = ' ' + +button(pill=true static=true disabled=true)= 'Disabled' + = ' ' + +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' + br + br + +button(pill=true quiet=true)= 'Idle' + = ' ' + +button(pill=true quiet=true selected=true)= 'Selected' + = ' ' + +button(pill=true quiet=true disabled=true)= 'Disabled' + = ' ' + +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' + + each theme, i in ['accent', 'positive', 'negative', 'warning'] .c-box - .l-button-group - +a-button(variant=theme)= 'Button' - +a-button(variant=theme disabled=true)= 'Button' - +a-button(variant=theme outline=true)= 'Button' - +a-button(variant=theme outline=true disabled=true)= 'Button' + +button(theme=theme)= 'Idle' + = ' ' + +button(theme=theme selected=true)= 'Selected' + = ' ' + +button(theme=theme disabled=true)= 'Disabled' + = ' ' + +button(theme=theme selected=true disabled=true)= 'Selected + disabled' + br br + +button(theme=theme static=true)= 'Idle' + = ' ' + +button(theme=theme static=true selected=true)= 'Selected' + = ' ' + +button(theme=theme static=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' br - .l-button-group - +a-button(variant=theme icon='trash') - +a-button(variant=theme disabled=true icon='trash') - +a-button(variant=theme outline=true icon='trash') - +a-button(variant=theme outline=true disabled=true icon='trash') + br + +button(theme=theme quiet=true)= 'Idle' + = ' ' + +button(theme=theme quiet=true selected=true)= 'Selected' + = ' ' + +button(theme=theme quiet=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' each theme in ['static-black', 'static-white'] - const bg = theme.startsWith('static-black') ? 500 : 1000; .c-box(style=`background-color: var(--colors--blue-static--${bg});`) - .l-button-group - +a-button(variant=theme)= 'Button' - +a-button(variant=theme disabled=true)= 'Button' - +a-button(variant=theme outline=true)= 'Button' - +a-button(variant=theme outline=true disabled=true)= 'Button' + +button(theme=theme)= 'Idle' + = ' ' + +button(theme=theme selected=true)= 'Selected' + = ' ' + +button(theme=theme disabled=true)= 'Disabled' + = ' ' + +button(theme=theme selected=true disabled=true)= 'Selected + disabled' br br - .l-button-group - +a-button(variant=theme icon='trash') - +a-button(variant=theme disabled=true icon='trash') - +a-button(variant=theme outline=true icon='trash') - +a-button(variant=theme outline=true disabled=true icon='trash') - - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) - .l-button-group - +a-button(variant=theme primary=true)= 'Button' - +a-button(variant=theme primary=true disabled=true)= 'Button' - +a-button(variant=theme primary=true outline=true)= 'Button' - +a-button(variant=theme primary=true outline=true disabled=true)= 'Button' + +button(theme=theme static=true)= 'Idle' + = ' ' + +button(theme=theme static=true selected=true)= 'Selected' + = ' ' + +button(theme=theme static=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' br br - .l-button-group - +a-button(variant=theme primary=true icon='trash') - +a-button(variant=theme primary=true disabled=true icon='trash') - +a-button(variant=theme primary=true outline=true icon='trash') - +a-button(variant=theme primary=true outline=true disabled=true icon='trash') + +button(theme=theme quiet=true)= 'Idle' + = ' ' + +button(theme=theme quiet=true selected=true)= 'Selected' + = ' ' + +button(theme=theme quiet=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 9a35b37..f030abf 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -83,17 +83,17 @@ mixin view-card +card-body .l-media .l-media__block - +badge('positive')(quiet=true icon='repeat' href='#') + +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#') strong= '12' .l-media__block - +badge('warning')(quiet=true icon='star' href='#') + +button(theme='warning' static=true pill=true size='sm' icon='star' href='#') strong= '34' .l-media__block.u-mis-auto - +a-button(primary=true)= 'Reply' + +button(selected=true)= 'Reply' +card(quiet=true href='#' class='l-card-list__card') +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) - +badge= 'Drawings' + +button(badge=true static=true selected=true)= 'Drawings' +card-body +card-title= 'XS Heading' +card-content diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 5a659dd..9c2e520 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -53,8 +53,8 @@ mixin view-dialog +dialog +slot('header') .l-media__block.l-flex - +action-button(quiet=true icon='chevron-left') - +action-button(quiet=true icon='chevron-right') + +button(quiet=true icon='chevron-left') + +button(quiet=true icon='chevron-right') .l-media__block.l-media__block--main +div-heading('xl')(class="u-mt-0")= 'Tags' +slot('sidebar') diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug index 3d01ca7..d6e2b56 100644 --- a/tpl/views/emoji.pug +++ b/tpl/views/emoji.pug @@ -1,14 +1,14 @@ mixin view-emoji +view('emoji', 'Emoji') .c-box - +action-button(icon='trash') + +button(icon='trash') = ' ' - +action-button + +button +emoji('drgn')(size='icon') = ' ' - +action-button(icon='trash' quiet=true) + +button(icon='trash' quiet=true) = ' ' - +action-button(quiet=true) + +button(quiet=true) +emoji('drgn')(size='icon') .c-box diff --git a/tpl/views/form.pug b/tpl/views/form.pug index 5b24757..ca9e224 100644 --- a/tpl/views/form.pug +++ b/tpl/views/form.pug @@ -27,4 +27,4 @@ mixin view-form +checkbox= 'I\'ve read and accept the terms and conditions' +form-item('') - +a-button(variant='primary')= 'Register' + +button(variant='primary')= 'Register' diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index 7c5df03..682f8bb 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug @@ -2,7 +2,7 @@ mixin view-menu +view('menu', 'Menu') .c-box div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) - +action-button(quiet=true selected=true)= 'Menu' + +button(quiet=true selected=true)= 'Menu' +popover +menu +menu-slot(class='l-media') diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug index b269596..bd78471 100644 --- a/tpl/views/popover.pug +++ b/tpl/views/popover.pug @@ -1,6 +1,6 @@ mixin view-popover +view('popover', 'Popover') .c-box - +action-button(quiet=true selected=true)= 'Popover' + +button(quiet=true selected=true)= 'Popover' +popover = loremIpsum diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 165e2ce..4309ff6 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -16,8 +16,8 @@ mixin view-text-field div +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') - +action-button(quiet=true class='l-media__block')= 'Volpeon' + +button(quiet=true class='l-media__block')= 'Volpeon' +divider('vertical')(class='u-mis-50') +slot('post') - +action-button(quiet=true icon='smile' class='l-media__block') - +action-button(quiet=true icon='send' class='l-media__block') + +button(quiet=true icon='smile' class='l-media__block') + +button(quiet=true icon='send' class='l-media__block') -- cgit v1.2.3-70-g09d2