diff --git a/less/_defaults/_btn-mixins.less b/less/_defaults/_btn-mixins.less new file mode 100644 index 00000000..9d1b1ed7 --- /dev/null +++ b/less/_defaults/_btn-mixins.less @@ -0,0 +1,14 @@ +// Notify and Drawer controls (< > x) + +// DEPRECATED +// for legacy support only, replaced by .ui-btn-ctrl() +.notify-btn-icon() { + .ui-btn-ctrl(); +} +// + +.ui-btn-ctrl() { + margin: @ui-btn-controls-margin; + padding: @ui-btn-controls-padding; + border-radius: @ui-btn-controls-border-radius; +} diff --git a/less/_defaults/_btn-style.less b/less/_defaults/_btn-style.less new file mode 100644 index 00000000..2516a07e --- /dev/null +++ b/less/_defaults/_btn-style.less @@ -0,0 +1,13 @@ +// Button styles +// Note: default styles include 'filled' and 'outline' +// -------------------------------------------------- +@item-color-style: filled; +@item-ui-color-style: filled; +@btn-color-style: filled; +@menu-item-btn-color-style: filled; +@ui-color-style: filled; +@nav-ui-btn-ctrl-color-style: filled; +@notify-ui-btn-ctrl-color-style: filled; +@notify-btn-color-style: filled; +@drawer-ui-btn-ctrl-color-style: filled; +@drawer-item-color-style: filled; diff --git a/less/_defaults/_buttonMixins/_btn.less b/less/_defaults/_buttonMixins/_btn.less new file mode 100644 index 00000000..423fa017 --- /dev/null +++ b/less/_defaults/_buttonMixins/_btn.less @@ -0,0 +1,70 @@ +// -------------------------------------------------- +// BUTTON COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.btn-color() { + background-color: @btn-color; + color: @btn-color-inverted; + border-radius: @btn-border-radius; +} + +.btn-color-hover() { + background-color: @btn-color-hover; + color: @btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.btn-color-focus() { + background-color: @btn-color-focus; + color: @btn-color-inverted-focus; +} + +.btn-color-selected() { + background-color: @btn-color-selected; + color: @btn-color-inverted-selected; +} + +.btn-color-locked() { + background-color: @btn-color-locked; + color: @btn-color-inverted-locked; +} + +.btn-color-disabled() { + background-color: @btn-color-disabled; + color: @btn-color-inverted-disabled; +} + +// Outline +.btn-color-outline() { + background-color: @btn-color-inverted; + color: @btn-color; + box-shadow: 0 0 0 @btn-color-border-width @btn-color inset; + border-radius: @btn-border-radius; +} + +.btn-color-outline-hover() { + .btn-color-hover; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.btn-color-outline-focus() { + .btn-color-focus; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-focus inset; +} + +.btn-color-outline-selected() { + .btn-color-selected; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-selected inset; +} + +.btn-color-outline-locked() { + .btn-color-locked; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-locked inset; +} + +.btn-color-outline-disabled() { + .btn-color-disabled; + box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset; +} diff --git a/less/_defaults/_buttonMixins/_drawerItem.less b/less/_defaults/_buttonMixins/_drawerItem.less new file mode 100644 index 00000000..789ac8cf --- /dev/null +++ b/less/_defaults/_buttonMixins/_drawerItem.less @@ -0,0 +1,65 @@ +// -------------------------------------------------- +// DRAWER ITEM COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.drawer-item-color() { + background-color: @drawer-item; + color: @drawer-item-inverted; + border-color: @drawer-item-hover; + border-radius: @drawer-item-border-radius; +} + +.drawer-item-color-hover() { + background-color: @drawer-item-hover; + color: @drawer-item-inverted-hover; + border-color: @drawer-item-hover; + .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;); +} + +.drawer-item-color-focus() { + background-color: @drawer-item-focus; + color: @drawer-item-inverted-focus; + border-color: @drawer-item-focus; +} + +.drawer-item-color-locked() { + background-color: @disabled; + color: @disabled-inverted; + border-color: @drawer-item-hover; +} + +.drawer-item-color-selected() { + background-color: @drawer-item-selected; + color: @drawer-item-inverted-selected; + border-color: @drawer-item-hover; +} + +// Outline +.drawer-item-color-outline() { + background-color: @drawer-item-inverted; + color: @drawer-item; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset; + border-radius: @drawer-item-border-radius; +} + +.drawer-item-color-outline-hover() { + .drawer-item-color-hover; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-item-color-outline-focus() { + .drawer-item-color-focus; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-focus inset; +} + +.drawer-item-color-outline-selected() { + .drawer-item-color-selected; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset; +} + +.drawer-item-color-outline-locked() { + .drawer-item-color-locked; + box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset; +} diff --git a/less/_defaults/_buttonMixins/_drawerUI.less b/less/_defaults/_buttonMixins/_drawerUI.less new file mode 100644 index 00000000..2b128656 --- /dev/null +++ b/less/_defaults/_buttonMixins/_drawerUI.less @@ -0,0 +1,38 @@ +// -------------------------------------------------- +// DRAWER UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.drawer-ui-btn-ctrl-color() { + background-color: @drawer-icon; + color: @drawer-icon-inverted; +} + +.drawer-ui-btn-ctrl-color-hover() { + background-color: @drawer-icon-hover; + color: @drawer-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.drawer-ui-btn-ctrl-color-focus() { + background-color: @drawer-icon-focus; + color: @drawer-icon-inverted-focus; +} + +// Outline +.drawer-ui-btn-ctrl-color-outline() { + background-color: @drawer-icon-inverted; + color: @drawer-icon; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon inset; +} + +.drawer-ui-btn-ctrl-color-outline-hover() { + .drawer-ui-btn-ctrl-color-hover; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.drawer-ui-btn-ctrl-color-outline-focus() { + .drawer-ui-btn-ctrl-color-focus; + box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-focus inset; +} diff --git a/less/_defaults/_buttonMixins/_item.less b/less/_defaults/_buttonMixins/_item.less new file mode 100644 index 00000000..2783eee4 --- /dev/null +++ b/less/_defaults/_buttonMixins/_item.less @@ -0,0 +1,70 @@ +// -------------------------------------------------- +// ITEM COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.item-color() { + background-color: @item-color; + color: @item-color-inverted; + border-radius: @item-border-radius; +} + +.item-color-hover() { + background-color: @item-color-hover; + color: @item-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-color-focus() { + background-color: @item-color-focus; + color: @item-color-inverted-focus; +} + +.item-color-selected() { + background-color: @item-color-selected; + color: @item-color-inverted-selected; +} + +.item-color-visited() { + background-color: @visited; + color: @visited-inverted; +} + +.item-color-disabled() { + background-color: @item-color-disabled; + color: @item-color-inverted-disabled; +} + +// Outline +.item-color-outline() { + background-color: @item-color-inverted; + color: @item-color; + box-shadow: 0 0 0 @item-color-border-width @item-color inset; + border-radius: @item-border-radius; +} + +.item-color-outline-hover() { + .item-color-hover; + box-shadow: 0 0 0 @item-color-border-width @item-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.item-color-outline-focus() { + .item-color-focus; + box-shadow: 0 0 0 @item-color-border-width @item-color-focus inset; +} + +.item-color-outline-selected() { + .item-color-selected; + box-shadow: 0 0 0 @item-color-border-width @item-color-selected inset; +} + +.item-color-outline-visited() { + .item-color-visited; + box-shadow: 0 0 0 @item-color-border-width @item-color-visited inset; +} + +.item-color-outline-disabled() { + .item-color-disabled; + box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset; +} diff --git a/less/_defaults/_buttonMixins/_itemUI.less b/less/_defaults/_buttonMixins/_itemUI.less new file mode 100644 index 00000000..f40b698a --- /dev/null +++ b/less/_defaults/_buttonMixins/_itemUI.less @@ -0,0 +1,80 @@ +// -------------------------------------------------- +// ITEM UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.item-ui-color() { + background-color: @item-ui-color; + color: @item-ui-color-inverted; + border-radius: @item-ui-border-radius; +} + +.item-ui-color-hover() { + background-color: @item-ui-color-hover; + color: @item-ui-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.item-ui-color-focus() { + background-color: @item-ui-color-focus; + color: @item-ui-color-inverted-focus; +} + +.item-ui-color-visited() { + background-color: @item-ui-color-visited; + color: @item-ui-color-inverted-visited; +} + +.item-ui-color-selected() { + background-color: @item-ui-color-selected; + color: @item-ui-color-inverted-selected; +} + +.item-ui-color-locked() { + background-color: @item-ui-color-locked; + color: @item-ui-color-inverted-locked; +} + +.item-ui-color-disabled() { + background-color: @item-ui-color-disabled; + color: @item-ui-color-inverted-disabled; +} + +// Outline +.item-ui-color-outline() { + background-color: @item-ui-color-inverted; + color: @item-ui-color; + box-shadow: 0 0 0 @item-ui-border-width @item-color inset; + border-radius: @item-ui-border-radius; +} + +.item-ui-color-outline-hover() { + .item-ui-color-hover; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.item-ui-color-outline-focus() { + .item-ui-color-focus; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-focus inset; +} + +.item-ui-color-outline-selected() { + .item-ui-color-selected; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-selected inset; +} + +.item-ui-color-outline-visited() { + .item-ui-color-visited; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-visited inset; +} + +.item-ui-color-outline-locked() { + .item-ui-color-locked; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-locked inset; +} + +.item-ui-color-outline-disabled() { + .item-ui-color-disabled; + box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-disabled inset; +} diff --git a/less/_defaults/_buttonMixins/_menuItem.less b/less/_defaults/_buttonMixins/_menuItem.less new file mode 100644 index 00000000..4e9db1a9 --- /dev/null +++ b/less/_defaults/_buttonMixins/_menuItem.less @@ -0,0 +1,60 @@ +// -------------------------------------------------- +// MENU ITEM BUTTON COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.menu-item-btn-color() { + background-color: @menu-item-btn-color; + color: @menu-item-btn-color-inverted; + border-radius: @menu-item-btn-border-radius; +} + +.menu-item-btn-color-hover() { + background-color: @menu-item-btn-color-hover; + color: @menu-item-btn-color-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.menu-item-btn-color-focus() { + background-color: @menu-item-btn-color-focus; + color: @menu-item-btn-color-inverted-focus; +} + +.menu-item-btn-color-locked() { + background-color: @menu-item-btn-color-locked; + color: @menu-item-btn-color-inverted-locked; +} + +// Outline +.menu-item-btn-color-outline() { + background-color: @menu-item-btn-color-inverted; + color: @menu-item-btn-color; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color inset; + border-radius: @menu-item-btn-border-radius; +} + +.menu-item-btn-color-outline-hover() { + .menu-item-btn-color-hover; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.menu-item-btn-color-outline-focus() { + .menu-item-btn-color-focus; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-focus inset; +} + +.menu-item-btn-color-outline-selected() { + .menu-item-btn-color-selected; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-selected inset; +} + +.menu-item-btn-color-outline-locked() { + .menu-item-btn-color-locked; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-locked inset; +} + +.menu-item-btn-color-outline-disabled() { + .menu-item-btn-color-disabled; + box-shadow: 0 0 0 @menu-item-btn-border-width @menu-item-btn-color-disabled inset; +} diff --git a/less/_defaults/_buttonMixins/_navUI.less b/less/_defaults/_buttonMixins/_navUI.less new file mode 100644 index 00000000..1b6868a6 --- /dev/null +++ b/less/_defaults/_buttonMixins/_navUI.less @@ -0,0 +1,50 @@ +// -------------------------------------------------- +// NAV UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.nav-ui-btn-ctrl-color() { + background-color: @nav-icon; + color: @nav-icon-inverted; + border-radius: @nav-btn-border-radius; +} + +.nav-ui-btn-ctrl-color-hover() { + background-color: @nav-icon-hover; + color: @nav-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.nav-ui-btn-ctrl-color-focus() { + background-color: @nav-icon-focus; + color: @nav-icon-inverted-focus; +} + +.nav-ui-btn-ctrl-color-locked() { + background-color: @nav-icon-locked; + color: @nav-icon-inverted-locked; +} + +.nav-ui-btn-ctrl-color-disabled() { + background-color: @nav-icon-disabled; + color: @nav-icon-inverted-disabled; +} + +// Outline +.nav-ui-btn-ctrl-color-outline() { + background-color: @nav-icon-inverted; + color: @nav-icon; + box-shadow: 0 0 0 @nav-btn-border-width @nav-icon inset; + border-radius: @nav-btn-border-radius; +} + +.nav-ui-btn-ctrl-color-outline-hover() { + .nav-ui-btn-ctrl-color-hover; + box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.nav-ui-btn-ctrl-color-outline-focus() { + .nav-ui-btn-ctrl-color-focus; + box-shadow: 0 0 0 @nav-btn-border-width @nav-icon-focus inset; +} diff --git a/less/_defaults/_buttonMixins/_notifyBtn.less b/less/_defaults/_buttonMixins/_notifyBtn.less new file mode 100644 index 00000000..339d86e7 --- /dev/null +++ b/less/_defaults/_buttonMixins/_notifyBtn.less @@ -0,0 +1,70 @@ +// -------------------------------------------------- +// NOTIFY BTN COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.notify-btn-color() { + background-color: @notify-btn; + color: @notify-btn-inverted; + border-radius: @notify-btn-border-radius; +} + +.notify-btn-color-hover() { + background-color: @notify-btn-hover; + color: @notify-btn-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-btn-color-focus() { + background-color: @notify-btn-focus; + color: @notify-btn-inverted-focus; +} + +.notify-btn-color-selected() { + background-color: @notify-btn-selected; + color: @notify-btn-inverted-selected; +} + +.notify-btn-color-locked() { + background-color: @notify-btn-locked; + color: @notify-btn-inverted-locked; +} + +.notify-btn-color-disabled() { + background-color: @notify-btn-disabled; + color: @notify-btn-inverted-disabled; +} + +// Outline +.notify-btn-color-outline() { + background-color: @notify-btn-inverted; + color: @notify-btn; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn inset; + border-radius: @notify-btn-border-radius; +} + +.notify-btn-color-outline-hover() { + .notify-btn-color-hover; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-btn-color-outline-focus() { + .notify-btn-color-focus; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-focus inset; +} + +.notify-btn-color-outline-selected() { + .notify-btn-color-selected; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-selected inset; +} + +.notify-btn-color-outline-locked() { + .notify-btn-color-locked; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-locked inset; +} + +.notify-btn-color-outline-disabled() { + .notify-btn-color-disabled; + box-shadow: 0 0 0 @notify-btn-border-width @notify-btn-disabled inset; +} diff --git a/less/_defaults/_buttonMixins/_notifyUI.less b/less/_defaults/_buttonMixins/_notifyUI.less new file mode 100644 index 00000000..c5115d3e --- /dev/null +++ b/less/_defaults/_buttonMixins/_notifyUI.less @@ -0,0 +1,48 @@ +// -------------------------------------------------- +// NOTIFY UI COLOUR MIXINS +// -------------------------------------------------- + +// Default - Filled +.notify-ui-btn-ctrl-color() { + background-color: @notify-icon; + color: @notify-icon-inverted; +} + +.notify-ui-btn-ctrl-color-hover() { + background-color: @notify-icon-hover; + color: @notify-icon-inverted-hover; + .transition(background-color @duration ease-in, color @duration ease-in;); +} + +.notify-ui-btn-ctrl-color-focus() { + background-color: @notify-icon-focus; + color: @notify-icon-inverted-focus; +} + +.notify-ui-btn-ctrl-color-disabled() { + background-color: @notify-icon-disabled; + color: @notify-icon-inverted-disabled; +} + +// Outline +.notify-ui-btn-ctrl-color-outline() { + background-color: @notify-icon-inverted; + color: @notify-icon; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon inset; +} + +.notify-ui-btn-ctrl-color-outline-hover() { + .notify-ui-btn-ctrl-color-hover; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-hover inset; + .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;); +} + +.notify-ui-btn-ctrl-color-outline-focus() { + .notify-ui-btn-ctrl-color-focus; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-focus inset; +} + +.notify-ui-btn-ctrl-color-outline-disabled() { + .notify-ui-btn-ctrl-color-disabled; + box-shadow: 0 0 0 @ui-btn-controls-border-width @notify-icon-disabled inset; +} diff --git a/less/_defaults/_colors.less b/less/_defaults/_colors.less index 7ec7a550..1dde3d0d 100644 --- a/less/_defaults/_colors.less +++ b/less/_defaults/_colors.less @@ -2,7 +2,7 @@ // -------------------------------------------------- @blue: #117F93; @blueDark: #263944; -@grey: #9096A0; +@grey: #DDDDDD; @greyDark: #4D4D4D; @greyLight: #f9f9f9; @@ -29,7 +29,7 @@ @heading-color: @blue; @heading-color-inverted: @white; -// Items - components +// Content Item (components) // -------------------------------------------------- @item-color: @blue; @item-color-inverted: @white; @@ -37,34 +37,90 @@ @item-color-hover: darken(@item-color, 10%); @item-color-inverted-hover: @item-color-inverted; +@item-color-focus: @item-color-hover; +@item-color-inverted-focus: @item-color-inverted-hover; + @item-color-selected: darken(@item-color, 20%); @item-color-inverted-selected: @item-color-inverted; -// Visited - presentation components -// -------------------------------------------------- +// DEPRECATED +// replaced by @item-color-visited and @item-color-inverted-visited +// Note: @visited is only used by presentation components @visited: darken(@item-color, 15%); @visited-inverted: @item-color-inverted; +// + +@item-color-visited: @visited; +@item-color-inverted-visited: @visited-inverted; + +@item-color-disabled: @disabled; +@item-color-inverted-disabled: @disabled-inverted; + +// Content UI (action not content) +// boxmenu item btn, hotgraphic pin, media transcript, narrative controls/strapline, trickle +// logic: if outputting course content into word doc, these buttons wouldn’t need including +// -------------------------------------------------- +@item-ui-color: @item-color; +@item-ui-color-inverted: @item-color-inverted; + +@item-ui-color-hover: darken(@item-ui-color, 10%); +@item-ui-color-inverted-hover: @item-ui-color-inverted; + +@item-ui-color-focus: @item-ui-color-hover; +@item-ui-color-inverted-focus: @item-ui-color-inverted-hover; + +@item-ui-color-selected: darken(@item-ui-color, 20%); +@item-ui-color-inverted-selected: @item-ui-color-inverted; -// Buttons +@item-ui-color-visited: darken(@item-ui-color, 15%); +@item-ui-color-inverted-visited: @item-ui-color-inverted; + +@item-ui-color-locked: @disabled; +@item-ui-color-inverted-locked: @disabled-inverted; + +@item-ui-color-disabled: @disabled; +@item-ui-color-inverted-disabled: @disabled-inverted; + +// Content Buttons // -------------------------------------------------- +// Filled @btn-color: @greyDark; @btn-color-inverted: @white; @btn-color-hover: darken(@btn-color, 10%); @btn-color-inverted-hover: @btn-color-inverted; -// Button icon -// -------------------------------------------------- +@btn-color-focus: @btn-color-hover; +@btn-color-inverted-focus: @btn-color-inverted-hover; + +@btn-color-selected: darken(@btn-color, 20%); +@btn-color-inverted-selected: @btn-color-inverted; + +@btn-color-locked: @disabled; +@btn-color-inverted-locked: @disabled-inverted; + +// DEPRECATED +// replaced by @btn-color-disabled and @btn-color-disabled-inverted +@disabled: @grey; +@disabled-inverted: @black; +// + +@btn-color-disabled: @disabled; +@btn-color-inverted-disabled: @disabled-inverted; + +// DEPRECATED +// for legacy support only, not utilised in _buttonMixins @btn-icon-color: @nav-icon; @btn-icon-color-inverted: @nav-icon-inverted; @btn-icon-color-hover: @nav-icon-hover; @btn-icon-color-inverted-hover: @nav-icon-inverted-hover; +// -// Disabled - question components +// UI (global default for nav, notify, drawer) // -------------------------------------------------- -@disabled: #DDDDDD; -@disabled-inverted: @black; +@ui-color: @white; +@ui-color-inverted: @greyDark; // Validation states - question marking // -------------------------------------------------- @@ -76,9 +132,9 @@ // Progress // -------------------------------------------------- -@progress: @grey; +@progress: @greyDark; @progress-inverted: @white; -@progress-border: @grey; +@progress-border: @greyDark; // Menu // -------------------------------------------------- @@ -96,23 +152,39 @@ @menu-item-progress-inverted: @progress-inverted; @menu-item-progress-border: @progress-border; -@menu-item-btn-color: @btn-color; -@menu-item-btn-color-inverted: @btn-color-inverted; +@menu-item-btn-color: @item-ui-color; +@menu-item-btn-color-inverted: @item-ui-color-inverted; + +@menu-item-btn-color-hover: @item-ui-color-hover; +@menu-item-btn-color-inverted-hover: @item-ui-color-inverted-hover; -@menu-item-btn-color-hover: @btn-color-hover; -@menu-item-btn-color-inverted-hover: @btn-color-inverted-hover; +@menu-item-btn-color-focus: @item-ui-color-hover; +@menu-item-btn-color-inverted-focus: @item-ui-color-inverted-hover; + +@menu-item-btn-color-locked: @item-ui-color-locked; +@menu-item-btn-color-inverted-locked: @item-ui-color-inverted-locked; // Navigation // -------------------------------------------------- -@nav: @white; -@nav-inverted: @grey; +@nav: @ui-color; +@nav-inverted: @ui-color-inverted; +// UI @nav-icon: @nav-inverted; @nav-icon-inverted: @nav; @nav-icon-hover: darken(@nav-icon, 10%); @nav-icon-inverted-hover: @nav-icon-inverted; +@nav-icon-focus: @nav-icon-hover; +@nav-icon-inverted-focus: @nav-icon-inverted-hover; + +@nav-icon-locked: @disabled; +@nav-icon-inverted-locked: @disabled-inverted; + +@nav-icon-disabled: @disabled; +@nav-icon-inverted-disabled: @disabled-inverted; + @nav-progress: @nav-icon-inverted; @nav-progress-inverted: @nav-icon; @nav-progress-border: @nav-icon-inverted; @@ -123,50 +195,81 @@ // Notify // -------------------------------------------------- -@notify: @blue; -@notify-inverted: @white; +@notify: @ui-color; +@notify-inverted: @ui-color-inverted; @notify-link: @notify-inverted; @notify-link-hover: @notify-link; -@notify-btn: @btn-color-inverted; -@notify-btn-inverted: @btn-color; +// UI +@notify-icon: @notify-inverted; +@notify-icon-inverted: @notify; + +@notify-icon-hover: darken(@notify-icon, 10%); +@notify-icon-inverted-hover: @notify-icon-inverted; + +@notify-icon-focus: @notify-icon-hover; +@notify-icon-inverted-focus: @notify-icon-inverted-hover; + +@notify-icon-disabled: @disabled; +@notify-icon-inverted-disabled: @disabled-inverted; + +// Button +@notify-btn: @btn-color; +@notify-btn-inverted: @btn-color-inverted; @notify-btn-hover: darken(@notify-btn, 10%); @notify-btn-inverted-hover: @notify-btn-inverted; -@notify-icon: darken(@notify, 10%); -@notify-icon-inverted: @notify-inverted; +@notify-btn-focus: @btn-color-focus; +@notify-btn-inverted-focus: @btn-color-inverted-focus; -@notify-icon-hover: darken(@notify, 15%); -@notify-icon-inverted-hover: @notify-icon-inverted; +@notify-btn-selected: @btn-color-selected; +@notify-btn-inverted-selected: @btn-color-inverted-selected; + +@notify-btn-locked: @btn-color-locked; +@notify-btn-inverted-locked: @btn-color-inverted-locked; + +@notify-btn-disabled: @btn-color-disabled; +@notify-btn-inverted-disabled: @btn-color-inverted-disabled; // Drawer // -------------------------------------------------- -@drawer: @blueDark; -@drawer-inverted: @white; +@drawer: @ui-color; +@drawer-inverted: @ui-color-inverted; @drawer-link: @drawer-inverted; @drawer-link-hover: @drawer-link; -@drawer-icon: @drawer; -@drawer-icon-inverted: @drawer-inverted; +// UI +@drawer-icon: @drawer-inverted; +@drawer-icon-inverted: @drawer; @drawer-icon-hover: darken(@drawer-icon, 10%); @drawer-icon-inverted-hover: @drawer-icon-inverted; +@drawer-icon-focus: @drawer-icon-hover; +@drawer-icon-inverted-focus: @drawer-icon-inverted-hover; + +// Item @drawer-item: @drawer; @drawer-item-inverted: @drawer-inverted; @drawer-item-hover: darken(@drawer-item, 10%); @drawer-item-inverted-hover: @drawer-item-inverted; +@drawer-item-focus: @drawer-item-hover; +@drawer-item-inverted-focus: @drawer-item-inverted-hover; + @drawer-item-selected: darken(@drawer-item, 20%); @drawer-item-inverted-selected: @drawer-item-inverted; @drawer-item-selected-underline: @drawer-item-inverted; +@drawer-item-locked: @disabled; +@drawer-item-inverted-locked: @disabled-inverted; + @drawer-progress: @drawer-item-inverted; @drawer-progress-inverted: @drawer-item; @drawer-progress-border: @drawer-item-inverted; diff --git a/less/_defaults/_spacing-config.less b/less/_defaults/_spacing-config.less index 3b4abd3f..57a883c8 100644 --- a/less/_defaults/_spacing-config.less +++ b/less/_defaults/_spacing-config.less @@ -2,31 +2,75 @@ // -------------------------------------------------- @icon-padding: 1rem; -// Item +// Content Item // -------------------------------------------------- @item-margin: 0.5rem; @item-padding: 1rem; @item-border-radius: 0.25rem; +@item-color-border-width: 1px; -// Button +// Content UI (action not content) +// -------------------------------------------------- +@item-ui-border-radius: @item-border-radius; +@item-ui-border-width: @item-color-border-width; + +// Content Button // -------------------------------------------------- @btn-margin: 1rem; @btn-padding: 1rem; @btn-border-radius: 0.25rem; +@btn-color-border-width: 1px; + +// UI Button +// -------------------------------------------------- +@ui-btn-controls-margin: @btn-margin / 2; +@ui-btn-controls-padding: @btn-padding / 2; + +@ui-btn-controls-border-radius: 50%; +@ui-btn-controls-border-width: 1px; + +// Menu +// -------------------------------------------------- +@menu-item-btn-border-radius: @item-ui-border-radius; +@menu-item-btn-border-width: @item-ui-border-width; // Navigation // -------------------------------------------------- @nav-btn-margin: 0; +@nav-btn-padding-ver: @icon-padding; +@nav-btn-padding-hoz: @icon-padding; + @nav-btn-border-radius: 0; +@nav-btn-border-width: 1px; +// Notify button +// -------------------------------------------------- +@notify-btn-margin: 0; + +@notify-btn-padding-ver: @btn-padding / 2; +@notify-btn-padding-hoz: @btn-padding; + +@notify-btn-border-radius: @btn-border-radius; +@notify-btn-border-width: 1px; + +// Drawer item +// -------------------------------------------------- +@drawer-item-margin: 0; + +@drawer-item-padding-ver: @item-padding; +@drawer-item-padding-hoz: @item-padding; + +@drawer-item-border-radius: 0; +@drawer-item-border-width: 1px; // Progress // -------------------------------------------------- @progress-border-radius: 50px; + // Menu header text margin // -------------------------------------------------- @menu-title-margin: 1rem; diff --git a/less/core/button.less b/less/core/button.less index cf17788a..da4ca734 100644 --- a/less/core/button.less +++ b/less/core/button.less @@ -3,53 +3,55 @@ margin-top: @btn-margin; } - &-icon { - background-color: @btn-icon-color; - color: @btn-icon-color-inverted; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @btn-icon-color-hover; - color: @btn-icon-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } - } - &-text { .button-text; } + &-text.is-locked, + &-icon.is-locked { + cursor: not-allowed; + } + + // DEPRECATED + // legacy color styles for generic .btn-text and .btn-icon + // color mixins applied to plugin selectors instead &-text { - background-color: @btn-color; - color: @btn-color-inverted; - border-radius: @btn-border-radius; + .btn-color; .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @btn-color-hover; - color: @btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; } } - &-icon.is-disabled, &-text.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + .btn-color-disabled; } - &-icon.is-locked, &-text.is-locked { - background-color: @disabled; - color: @disabled-inverted; - cursor: not-allowed; + .btn-color-locked; + } + + &-icon { + .nav-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .nav-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .nav-ui-btn-ctrl-color-focus; + } } - &__marking { - padding: @item-padding * 0.75; - border-radius: 50%; + &-icon.is-disabled { + .nav-ui-btn-ctrl-color-disabled; } - .can-show-marking &__action.is-full-width, - .can-show-marking &__feedback.is-full-width { - margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2); + &-icon.is-locked { + .nav-ui-btn-ctrl-color-locked; } } diff --git a/less/core/buttonQuestion.less b/less/core/buttonQuestion.less new file mode 100644 index 00000000..e9ee4f65 --- /dev/null +++ b/less/core/buttonQuestion.less @@ -0,0 +1,46 @@ +.btn { + &__action, + &__feedback { + & when (@btn-color-style = filled) { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + + &.is-disabled { + .btn-color-disabled; + } + } + + & when (@btn-color-style = outline) { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } + + &.is-disabled { + .btn-color-outline-disabled; + } + } + } + + &__marking { + padding: @item-padding * 0.75; + border-radius: 50%; + } + + .can-show-marking &__action.is-full-width, + .can-show-marking &__feedback.is-full-width { + margin-inline-end: @icon-size + (@item-margin * 2) + ((@item-padding * 0.75) * 2); + } +} diff --git a/less/core/drawer.less b/less/core/drawer.less index cc059cdb..1496f3e3 100644 --- a/less/core/drawer.less +++ b/less/core/drawer.less @@ -7,16 +7,30 @@ } &__btn { - margin: @btn-margin / 2; - padding: @btn-padding / 2; - background-color: @drawer-icon; - color: @drawer-icon-inverted; - border-radius: 50%; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @drawer-icon-hover; - color: @drawer-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .ui-btn-ctrl; + + & when (@drawer-ui-btn-ctrl-color-style = filled) { + .drawer-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-ui-btn-ctrl-color-focus; + } + } + + & when (@drawer-ui-btn-ctrl-color-style = outline) { + .drawer-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-ui-btn-ctrl-color-outline-focus; + } } } } diff --git a/less/core/drawerItem.less b/less/core/drawerItem.less index efe11aa6..3600d8a0 100644 --- a/less/core/drawerItem.less +++ b/less/core/drawerItem.less @@ -1,38 +1,76 @@ .drawer { &__item-btn { display: block; - padding: @item-padding; - background-color: @drawer-item; - border-bottom: 1px solid @drawer-item-hover; - color: @drawer-item-inverted; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @drawer-item-hover; - color: @drawer-item-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + padding: @drawer-item-padding-ver @drawer-item-padding-hoz; + margin: @drawer-item-margin; + border-bottom: @drawer-item-border-width solid; + + & when (@drawer-item-margin > 0) { + @total-margin: @drawer-item-margin * 2; + width: calc(100% ~'-' @total-margin); + border: @drawer-item-border-width solid; } } - &__item-btn.is-locked, - &__item-btn.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + & when (@drawer-item-color-style = filled) { + &__item-btn { + .drawer-item-color(); + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-focus; + } + } + + &__item-btn.is-locked, + &__item-btn.is-disabled { + .drawer-item-color-locked; + } + + // aria-current="true" is used by languagePicker + &__item-btn[aria-current="true"], + &__item-btn.is-selected { + .drawer-item-color-selected; + } } - &__item-btn.is-selected { - background-color: @drawer-item-selected; - color: @drawer-item-inverted-selected; + & when (@drawer-item-color-style = outline) { + &__item-btn { + .drawer-item-color-outline(); + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .drawer-item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-outline-focus; + } + } + + &__item-btn.is-locked, + &__item-btn.is-disabled { + .drawer-item-color-outline-locked; + } + + // aria-current="true" is used by languagePicker + &__item-btn[aria-current="true"], + &__item-btn.is-selected { + .drawer-item-color-outline-selected; + } } &__item-title { .drawer-item-title; text-align: start; } - + &__item-title + &__item-body { margin-top: @drawer-title-margin; } - + &__item-body { margin-bottom: @drawer-body-margin; .drawer-item-body; diff --git a/less/core/nav.less b/less/core/nav.less index 290c57d7..e74f2d92 100644 --- a/less/core/nav.less +++ b/less/core/nav.less @@ -12,14 +12,30 @@ &__btn { margin: @nav-btn-margin (@nav-btn-margin / 2); - background-color: @nav-icon; - color: @nav-icon-inverted; - border-radius: @nav-btn-border-radius; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @nav-icon-hover; - color: @nav-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + padding: @nav-btn-padding-ver @nav-btn-padding-hoz; + + & when (@nav-ui-btn-ctrl-color-style = filled) { + .nav-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .nav-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .nav-ui-btn-ctrl-color-focus; + } + } + + & when (@nav-ui-btn-ctrl-color-style = outline) { + .nav-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .nav-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .nav-ui-btn-ctrl-color-outline-focus; + } } } diff --git a/less/core/notify.less b/less/core/notify.less index 12699593..dc3f473b 100644 --- a/less/core/notify.less +++ b/less/core/notify.less @@ -50,19 +50,75 @@ margin-top: @btn-margin; } + // Button &__btn { - background-color: @notify-btn; - color: @notify-btn-inverted; + margin: @notify-btn-margin; + padding: @notify-btn-padding-ver @notify-btn-padding-hoz; + } + + & when (@notify-btn-color-style = filled) { + &__btn { + .notify-btn-color; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @notify-btn-hover; - color: @notify-btn-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-focus; + } + } + + &__btn.is-disabled { + .notify-btn-color-disabled; } } + & when (@notify-btn-color-style = outline) { + &__btn { + .notify-btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-outline-focus; + } + } + + &__btn.is-disabled { + .notify-btn-color-outline-disabled; + } + } + + // UI &__btn-icon { - .notify-btn-icon; + .ui-btn-ctrl; + + & when (@notify-btn-color-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } + } + + & when (@notify-btn-color-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } + } } &__close-btn { @@ -90,23 +146,6 @@ // } } -// Global Notify button icon -// -------------------------------------------------- -.notify-btn-icon() { - margin: @btn-margin / 2; - padding: @btn-padding / 2; - background-color: @notify-icon; - color: @notify-icon-inverted; - border-radius: 50%; - - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @notify-icon-hover; - color: @notify-icon-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } -} - - .notify:not(.disable-animation) > .notify__popup { .transition(top var(--adapt-notify-duration) @animation-easing, transform var(--adapt-notify-duration) @animation-easing, opacity var(--adapt-notify-duration) @animation-easing, height var(--adapt-notify-duration) @animation-easing;); opacity: 0; diff --git a/less/core/notifyPush.less b/less/core/notifyPush.less index 95ee9e6a..ce9864f0 100644 --- a/less/core/notifyPush.less +++ b/less/core/notifyPush.less @@ -33,7 +33,31 @@ position: absolute; top: 0; right: 0; - .notify-btn-icon; + .ui-btn-ctrl; + + & when (@notify-ui-btn-ctrl-color-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } + } + + & when (@notify-ui-btn-ctrl-color-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } + } .dir-rtl & { right: auto; diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less index a5231606..d4531890 100644 --- a/less/plugins/adapt-contrib-accordion/accordion.less +++ b/less/plugins/adapt-contrib-accordion/accordion.less @@ -8,29 +8,54 @@ padding-inline-start: @item-padding; padding-inline-end: @icon-size + (@item-padding * 2); text-align: start; - background-color: @item-color; - color: @item-color-inverted; - border-radius: @item-border-radius; - - .no-touch &:not(.is-selected):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } } - + &__btn.has-title-icon { padding-inline-start: @icon-size + (@item-padding * 2); } - &__btn.is-visited { - background-color: @visited; - color: @visited-inverted; + & when (@item-color-style = filled) { + &__btn { + .item-color; + + .no-touch &:not(.is-selected):hover { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-focus; + } + } + + &__btn.is-visited { + .item-color-visited; + } + + &__btn.is-selected { + .item-color-selected; + } } - &__btn.is-selected { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + & when (@item-color-style = outline) { + &__btn { + .item-color-outline; + + .no-touch &:not(.is-selected):hover { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-outline-focus; + } + } + + &__btn.is-visited { + .item-color-outline-visited; + } + + &__btn.is-selected { + .item-color-outline-selected; + } } &:not(.is-center-aligned) &__title-icon { diff --git a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less index c6186fab..e5571770 100644 --- a/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less +++ b/less/plugins/adapt-contrib-assessmentResults/assessmentResults.less @@ -2,4 +2,40 @@ &__retry-feedback { margin-bottom: @component-body-margin; } -} \ No newline at end of file + + & when (@btn-color-style = filled) { + &__retry-btn { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + } + + &__retry-btn.is-disabled { + .btn-color-disabled; + } + } + + & when (@btn-color-style = outline) { + &__retry-btn { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } + } + + &__retry-btn.is-disabled { + .btn-color-outline-disabled; + } + } +} diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less index 9d20a12d..93c30818 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenuItem.less @@ -1,6 +1,6 @@ .boxmenu-item { display: flex; - + &__inner { width: 100%; margin: 0 @menu-item-padding-hoz @menu-item-padding-ver; @@ -43,21 +43,40 @@ align-items: center; } - &__button { - background-color: @menu-item-btn-color; - color: @menu-item-btn-color-inverted; + & when (@menu-item-btn-color-style = filled) { + &__button { + .menu-item-btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .menu-item-btn-color-hover; + } - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @menu-item-btn-color-hover; - color: @menu-item-btn-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + html:not(.a11y-disable-focusoutline) &:focus-visible { + .menu-item-btn-color-focus; + } + } + + &__button.is-locked { + .menu-item-btn-color-locked; } } - &__button.is-locked, - &__button.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + & when (@menu-item-btn-color-style = outline) { + &__button { + .menu-item-btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .menu-item-btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .menu-item-btn-color-outline-focus; + } + } + + &__button.is-locked { + .menu-item-btn-color-outline-locked; + } } &__status { diff --git a/less/plugins/adapt-contrib-glossary/glossary.less b/less/plugins/adapt-contrib-glossary/glossary.less index 2a907111..08ed0cf9 100644 --- a/less/plugins/adapt-contrib-glossary/glossary.less +++ b/less/plugins/adapt-contrib-glossary/glossary.less @@ -1,6 +1,6 @@ .glossary { &__textbox-container { - padding: @item-padding; + padding: @drawer-item-padding-ver @drawer-item-padding-hoz; } &__textbox { @@ -8,7 +8,7 @@ } &__checkbox-container { - padding: 0 @item-padding @item-padding; + padding: 0 @drawer-item-padding-hoz @drawer-item-padding-ver; } &__checkbox-input, diff --git a/less/plugins/adapt-contrib-gmcq/gmcq.less b/less/plugins/adapt-contrib-gmcq/gmcq.less index 0f14bb55..c63ca816 100644 --- a/less/plugins/adapt-contrib-gmcq/gmcq.less +++ b/less/plugins/adapt-contrib-gmcq/gmcq.less @@ -10,26 +10,50 @@ &__option { margin-top: @item-margin; padding: @item-padding / 2; - background-color: @item-color; - color: @item-color-inverted; - border-radius: @item-border-radius; } - .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option, - html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } + & when (@item-color-style = filled) { + &__option { + .item-color; + } - &__label.is-disabled &__option { - background-color: @disabled; - color: @disabled-inverted; + .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { + .item-color-focus; + } + + &__label.is-disabled &__option { + .item-color-disabled; + } + + &__label.is-selected &__option { + .item-color-selected; + } } - &__label.is-selected &__option { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + & when (@item-color-style = outline) { + &__option { + .item-color-outline; + } + + .no-touch &__label:not(.is-disabled):not(.is-selected):hover &__option { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &__input:focus-visible + &__label &__option { + .item-color-outline-focus; + } + + &__label.is-disabled &__option { + .item-color-outline-disabled; + } + + &__label.is-selected &__option { + .item-color-outline-selected; + } } &__state { diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less index bce82bce..841513f1 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphic.less @@ -7,21 +7,42 @@ } } - &__pin:not(.has-pin-image) { - background-color: @item-color; - color: @item-color-inverted; - border-radius: 50%; + & when (@item-ui-color-style = filled) { + &__pin:not(.has-pin-image) { + .item-ui-color; + border-radius: 50%; - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-focus; + } + } + + &__pin:not(.has-pin-image).is-visited { + .item-ui-color-visited; } } - &__pin:not(.has-pin-image).is-visited { - background-color: @visited; - color: @visited-inverted; + & when (@item-ui-color-style = outline) { + &__pin:not(.has-pin-image) { + .item-ui-color-outline; + border-radius: 50%; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-outline-focus; + } + } + + &__pin:not(.has-pin-image).is-visited { + .item-ui-color-outline-visited; + } } // Numbered pins diff --git a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less index 66700d95..7742b908 100644 --- a/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less +++ b/less/plugins/adapt-contrib-hotgraphic/hotgraphicPopup.less @@ -8,7 +8,39 @@ &__controls, &__close { - .notify-btn-icon; + .ui-btn-ctrl; + + & when (@notify-ui-btn-ctrl-color-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } + + &.is-disabled { + .notify-ui-btn-ctrl-color-disabled; + } + } + + & when (@notify-ui-btn-ctrl-color-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } + + &.is-disabled { + .notify-ui-btn-ctrl-color-outline-disabled; + } + } } &__item-title { diff --git a/less/plugins/adapt-contrib-languagePicker/languagePicker.less b/less/plugins/adapt-contrib-languagePicker/languagePicker.less index c835b063..f1b15b74 100644 --- a/less/plugins/adapt-contrib-languagePicker/languagePicker.less +++ b/less/plugins/adapt-contrib-languagePicker/languagePicker.less @@ -27,6 +27,42 @@ &__language-btn { margin: @item-margin / 2; } + + & when (@btn-color-style = filled) { + &__language-btn { + .btn-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-focus; + } + } + + &__language-btn.is-disabled { + .btn-color-disabled; + } + } + + & when (@btn-color-style = outline) { + &__language-btn { + .btn-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .btn-color-outline-focus; + } + } + + &__language-btn.is-disabled { + .btn-color-outline-disabled; + } + } } // Language picker notify confirmation override diff --git a/less/plugins/adapt-contrib-matching/dropdown.less b/less/plugins/adapt-contrib-matching/dropdown.less index 066c4d7c..dc8fea15 100644 --- a/less/plugins/adapt-contrib-matching/dropdown.less +++ b/less/plugins/adapt-contrib-matching/dropdown.less @@ -6,25 +6,52 @@ padding-inline: @item-padding (@icon-size + (@item-padding * 2)); line-height: @body-line-height; text-align: start; - background-color: @item-color; - color: @item-color-inverted; - - .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover, - html:not(.a11y-disable-focusoutline) &:focus-visible { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } } - &__btn.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + & when (@item-color-style = filled) { + &__btn { + .item-color; + border-radius: 0; + + .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-focus; + } + } + + &__btn.is-disabled { + .item-color-disabled; + } + + &__btn[aria-expanded="true"] { + .item-color-selected; + } } - &__btn[aria-expanded="true"] { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + & when (@item-color-style = outline) { + &__btn { + .item-color-outline; + border-radius: 0; + + .no-touch &:not(.is-disabled):not([aria-expanded="true"]):hover { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-color-outline-focus; + } + } + + &__btn.is-disabled { + .item-color-outline-disabled; + } + + &__btn[aria-expanded="true"] { + .item-color-outline-selected; + } } &__icon { @@ -46,29 +73,49 @@ .dropdown-item { padding: @item-padding; - background-color: @item-color; - border-bottom: 1px solid @item-color-hover; - color: @item-color-inverted; - &:last-child { - border-bottom: none; - } + & when (@item-color-style = filled) { + .item-color; + border-radius: 0; + border-bottom: 1px solid @item-color-hover; + + &:last-child { + border-bottom: none; + } + + .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + .item-color-hover; + } + + &:focus-visible, + &[aria-selected="true"] { + // This code can be used to style a non-native dropdown as closely + // as possible to the default browser settings + // background-color: Highlight; + // background-color: -webkit-focus-ring-color; + // color: white; - .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .item-color-selected; + } } - &:focus-visible, - &[aria-selected="true"] { - // This code can be used to style a non-native dropdown as closely - // as possible to the default browser settings - // background-color: Highlight; - // background-color: -webkit-focus-ring-color; - // color: white; + & when (@item-color-style = outline) { + .item-color-outline; + border-radius: 0; + box-shadow: none; + border-bottom: 1px solid @item-color-hover; + + &:last-child { + border-bottom: none; + } + + .no-touch &:not(:focus-visible):not([aria-selected="true"]):hover { + .item-color-outline-hover; + } - background-color: @item-color-selected; - color: @item-color-inverted-selected; + &:focus-visible, + &[aria-selected="true"] { + .item-color-outline-selected; + } } } diff --git a/less/plugins/adapt-contrib-mcq/mcq.less b/less/plugins/adapt-contrib-mcq/mcq.less index 07d2d5cc..942801cd 100644 --- a/less/plugins/adapt-contrib-mcq/mcq.less +++ b/less/plugins/adapt-contrib-mcq/mcq.less @@ -1,30 +1,54 @@ .mcq-item { &__label { margin-bottom: @item-margin / 2; - background-color: @item-color; - color: @item-color-inverted; - border-radius: @item-border-radius; - - .no-touch &:not(.is-disabled):not(.is-selected):hover, - html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } .no-touch &:not(.is-disabled):not(.is-selected):hover .mcq-item__icon { .effect-scalePulse; } } - &__label.is-disabled { - background-color: @disabled; - color: @disabled-inverted; + & when (@item-color-style = filled) { + &__label { + .item-color; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .item-color-hover; + } + + html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { + .item-color-focus; + } + } + + &__label.is-disabled { + .item-color-disabled; + } + + &__label.is-selected { + .item-color-selected; + } } - &__label.is-selected { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + & when (@item-color-style = outline) { + &__label { + .item-color-outline; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) .mcq-item__input:focus-visible + & { + .item-color-outline-focus; + } + } + + &__label.is-disabled { + .item-color-outline-disabled; + } + + &__label.is-selected { + .item-color-outline-selected; + } } &__state { diff --git a/less/plugins/adapt-contrib-media/media.less b/less/plugins/adapt-contrib-media/media.less index 2cb50376..8d409d1f 100644 --- a/less/plugins/adapt-contrib-media/media.less +++ b/less/plugins/adapt-contrib-media/media.less @@ -5,25 +5,50 @@ &__transcript-btn { padding: @item-padding; - background-color: @item-color; - color: @item-color-inverted; - border-radius: @item-border-radius; - - .no-touch &:not([aria-expanded="true"]):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } } - &.is-complete &__transcript-btn { - background-color: @visited; - color: @visited-inverted; + & when (@item-ui-color-style = filled) { + &__transcript-btn { + .item-ui-color; + + .no-touch &:not([aria-expanded="true"]):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible { + .item-ui-color-focus; + } + } + + &.is-complete &__transcript-btn { + .item-ui-color-visited; + } + + &__transcript-btn[aria-expanded="true"] { + .item-ui-color-selected; + } } - &__transcript-btn[aria-expanded="true"] { - background-color: @item-color-selected; - color: @item-color-inverted-selected; + & when (@item-ui-color-style = outline) { + &__transcript-btn { + .item-ui-color-outline; + + .no-touch &:not([aria-expanded="true"]):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:not([aria-expanded="true"]):focus-visible { + .item-ui-color-outline-focus; + } + } + + &.is-complete &__transcript-btn { + .item-ui-color-outline-visited; + } + + &__transcript-btn[aria-expanded="true"] { + .item-ui-color-outline-selected; + } } &__transcript-body-inline { diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less index 2cafc3b7..ce56fc32 100644 --- a/less/plugins/adapt-contrib-narrative/narrative.less +++ b/less/plugins/adapt-contrib-narrative/narrative.less @@ -8,14 +8,39 @@ .link-text; } - &__controls { - background-color: @item-color; - color: @item-color-inverted; + & when (@item-ui-color-style = filled) { + &__controls { + .item-ui-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-focus; + } + } - .no-touch &:not(.is-disabled):not(.is-locked):hover { - background-color: @item-color-hover; - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + &__controls.is-disabled { + .item-ui-color-disabled; + } + } + + & when (@item-ui-color-style = outline) { + &__controls { + .item-ui-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-outline-focus; + } + } + + &__controls.is-disabled { + .item-ui-color-outline-disabled; } } @@ -40,43 +65,49 @@ &__strapline-btn { text-align: start; - background-color: @item-color; - color: @item-color-inverted; } - // set icon background color to transparent to 'inherit' strapline styling - &__strapline-icon { - background-color: transparent; - color: @item-color-inverted; - } + & when (@item-ui-color-style = filled) { + &__strapline-btn { + .item-ui-color; + } - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover, - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon { - color: @item-color-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); - } + .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; + } - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { - background-color: @item-color-hover; - } + html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { + .item-ui-color-focus; + } - // set icon hover background color to transparent to 'inherit' strapline styling - .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover &__strapline-icon { - background-color: transparent; + &__strapline-btn.is-visited { + .item-ui-color-visited; + } } - &__strapline-btn.is-visited, - &__strapline-btn.is-visited &__strapline-icon { - color: @visited-inverted; - } + & when (@item-ui-color-style = outline) { + &__strapline-btn { + .item-ui-color-outline; + } - &__strapline-btn.is-visited { - background-color: @visited; + .no-touch &__strapline-btn:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &__strapline-btn:focus-visible { + .item-ui-color-outline-focus; + } + + &__strapline-btn.is-visited { + .item-ui-color-outline-visited; + } } - // set icon visited background color to transparent to 'inherit' strapline styling - &__strapline-btn.is-visited &__strapline-icon { + // set icon background color to transparent to 'inherit' strapline styling + // prevents icon background obscuring the btn focus outline + &__strapline-icon { background-color: transparent; + color: inherit; } &.has-img-zoom &__slider-image-container { @@ -87,6 +118,7 @@ &__inner.is-stacked &__content-item { margin-bottom: (@item-margin * 4); } + &__inner.is-stacked &__content-image { margin-bottom: @item-title-margin; } diff --git a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less index eb3a11d6..8ccc99c0 100644 --- a/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less +++ b/less/plugins/adapt-contrib-pageLevelProgress/pageLevelProgressIndicator.less @@ -44,6 +44,10 @@ .pagelevelprogress__nav-btn { .pagelevelprogress__indicator { border-color: @nav-progress-border; + + & when (@nav-ui-btn-ctrl-color-style = outline) { + border-color: @nav-progress-inverted; + } } .pagelevelprogress__indicator-inner { @@ -75,16 +79,32 @@ // Drawer overrides // -------------------------------------------------- .pagelevelprogress__item-btn:not(.is-disabled) { - .pagelevelprogress__indicator { - border-color: @drawer-progress-border; - } + & when (@drawer-item-color-style = filled) { + .pagelevelprogress__indicator { + border-color: @drawer-progress-border; + } - .pagelevelprogress__indicator-inner { - background-color: @drawer-progress-inverted; + .pagelevelprogress__indicator-inner { + background-color: @drawer-progress-inverted; + } + + .pagelevelprogress__indicator-bar { + background-color: @drawer-progress; + } } - .pagelevelprogress__indicator-bar { - background-color: @drawer-progress; + & when (@drawer-item-color-style = outline) { + .pagelevelprogress__indicator { + border-color: @drawer-progress-inverted; + } + + .pagelevelprogress__indicator-inner { + background-color: @drawer-progress; + } + + .pagelevelprogress__indicator-bar { + background-color: @drawer-progress-inverted; + } } .no-touch &:hover { diff --git a/less/plugins/adapt-contrib-resources/resources.less b/less/plugins/adapt-contrib-resources/resources.less index 505fd832..c19468a6 100644 --- a/less/plugins/adapt-contrib-resources/resources.less +++ b/less/plugins/adapt-contrib-resources/resources.less @@ -2,15 +2,31 @@ &__filter-btn { padding: @item-padding (@item-padding / 2); .resources-filter-btn; - background-color: @drawer-item; - border-bottom: 1px solid @drawer-item-hover; - border-right: 1px solid @drawer-item-hover; - color: @drawer-item-inverted; - - .no-touch &:not(.is-disabled):not(.is-selected):hover { - background-color: @drawer-item-hover; - color: @drawer-item-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + border-bottom: 1px solid; + border-right: 1px solid; + + & when (@drawer-item-color-style = filled) { + .drawer-item-color; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .drawer-item-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-focus; + } + } + + & when (@drawer-item-color-style = outline) { + .drawer-item-color-outline; + + .no-touch &:not(.is-disabled):not(.is-selected):hover { + .drawer-item-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .drawer-item-color-outline-focus; + } } &:last-child { @@ -19,8 +35,7 @@ } &__filter-btn.is-selected { - background-color: @drawer-item-selected; - color: @drawer-item-inverted-selected; + .drawer-item-color-selected; box-shadow: inset 0 -0.625rem 0 -0.4375rem @drawer-item-selected-underline; } diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less index a95864d8..2e0beccf 100644 --- a/less/plugins/adapt-contrib-slider/slider.less +++ b/less/plugins/adapt-contrib-slider/slider.less @@ -9,28 +9,26 @@ min-height: 2.5rem; } - &__number, - &__number-selection, - &__number-model-answer { - height: 2.5rem; - width: 2.5rem; - line-height: 2.5; - text-align: center; - border-radius: 50%; - } - &__widget:not(.is-disabled) &__number { cursor: pointer; } &__number-selection { - background-color: @item-color; - color: @item-color-inverted; + .item-color; } &__number-model-answer { - background-color: @item-color; - color: @item-color-inverted; + .item-color; + } + + &__number, + &__number-selection, + &__number-model-answer { + height: 2.5rem; + width: 2.5rem; + line-height: 2.5; + text-align: center; + border-radius: 50%; } // Scale diff --git a/less/plugins/adapt-contrib-trickle/trickle.less b/less/plugins/adapt-contrib-trickle/trickle.less index cef2d9f4..b94b6df4 100644 --- a/less/plugins/adapt-contrib-trickle/trickle.less +++ b/less/plugins/adapt-contrib-trickle/trickle.less @@ -1,4 +1,48 @@ .trickle { + & when (@item-ui-color-style = filled) { + &__btn { + .item-ui-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-focus; + } + } + + &__btn.is-disabled { + .item-ui-color-disabled; + } + + &__btn.is-locked { + .item-ui-color-locked; + } + } + + & when (@item-ui-color-style = outline) { + &__btn { + .item-ui-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .item-ui-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .item-ui-color-outline-focus; + } + } + + &__btn.is-disabled { + .item-ui-color-outline-disabled; + } + + &__btn.is-locked { + .item-ui-color-outline-locked; + } + } + &__btn-icon { display: inline-block; vertical-align: middle; diff --git a/less/plugins/adapt-contrib-tutor/tutor.less b/less/plugins/adapt-contrib-tutor/tutor.less index 4fcc833b..668a1616 100644 --- a/less/plugins/adapt-contrib-tutor/tutor.less +++ b/less/plugins/adapt-contrib-tutor/tutor.less @@ -18,7 +18,31 @@ } &__btn-icon { - .notify-btn-icon; + .ui-btn-ctrl; + + & when (@notify-ui-btn-ctrl-color-style = filled) { + .notify-ui-btn-ctrl-color; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } + } + + & when (@notify-ui-btn-ctrl-color-style = outline) { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:not(.is-disabled):not(.is-locked):hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; + } + } } // overlay @@ -42,23 +66,54 @@ } } - &-type-overlay &__btn { - background-color: @notify-btn; - color: @notify-btn-inverted; + & when (@notify-btn-color-style = filled) { + &-type-overlay &__btn { + .notify-btn-color; - .no-touch &:hover { - background-color: @notify-btn-hover; - color: @notify-btn-inverted-hover; - .transition(background-color @duration ease-in, color @duration ease-in;); + .no-touch &:hover { + .notify-btn-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-focus; + } } - &-icon { - background-color: @notify-icon; - color: @notify-icon-inverted; + &-type-overlay &__btn-icon { + .notify-ui-btn-ctrl-color; .no-touch &:hover { - background-color: @notify-icon-hover; - color: @notify-icon-inverted-hover; + .notify-ui-btn-ctrl-color-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-focus; + } + } + } + + & when (@notify-btn-color-style = outline) { + &-type-overlay &__btn { + .notify-btn-color-outline; + + .no-touch &:hover { + .notify-btn-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-btn-color-outline-focus; + } + } + + &-type-overlay &__btn-icon { + .notify-ui-btn-ctrl-color-outline; + + .no-touch &:hover { + .notify-ui-btn-ctrl-color-outline-hover; + } + + html:not(.a11y-disable-focusoutline) &:focus-visible { + .notify-ui-btn-ctrl-color-outline-focus; } } } diff --git a/properties.schema b/properties.schema index 5ae46748..086dadf5 100644 --- a/properties.schema +++ b/properties.schema @@ -23,7 +23,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global body font colour inverted. Either a lightened/darkened alternative to Font colour." + "help": "Global body font colour inverted. Either a lightened / darkened alternative to Font colour." }, "link": { "title": "Link font colour", @@ -36,7 +36,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global link font colour inverted. Either a lightened/darkened alternative to Link colour." + "help": "Global link font colour inverted. Either a lightened / darkened alternative to Link colour." }, "link-hover": { "title": "Link font colour - hover", @@ -49,7 +49,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global link font colour when hovered over inverted. Either a lightened/darkened alternative to Link hover colour." + "help": "Global link font colour when hovered over inverted. Either a lightened / darkened alternative to Link hover colour." }, "heading-color": { "title": "Heading colour", @@ -63,7 +63,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Global title colour inverted. Either a lightened/darkened alternative to Title colour." + "help": "Global title colour inverted. Either a lightened / darkened alternative to Title colour." } } }, @@ -71,21 +71,21 @@ "_items": { "type": "object", "required": false, - "title": "Items (Components)", + "title": "Content Items (components)", "properties": { "item-color": { "title": "Item colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the clickable areas or points of interest in components." + "help": "Defines the selectable areas or points of interest in components." }, "item-color-inverted": { "title": "Item colour - inverted", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour. Should be a colour that provides good contrast against the Item colour." + "help": "Defines the item text / icon colour. Should be a colour that provides good contrast against the item colour." }, "item-color-hover": { "title": "Item colour - hover", @@ -98,7 +98,20 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour when hovered over. Should be a colour that provides good contrast against the Item hover colour." + "help": "Defines the item text / icon colour when hovered over. Should be a colour that provides good contrast against the item hover colour." + }, + "item-color-focus": { + "title": "Item colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "item-color-inverted-focus": { + "title": "Item colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item text / icon colour when focused. Should be a colour that provides good contrast against the item focus colour." }, "item-color-selected": { "title": "Item colour - selected", @@ -111,21 +124,139 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour when selected. Should be a colour that provides good contrast against the Item selected colour." + "help": "Defines the item text / icon colour when selected. Should be a colour that provides good contrast against the item selected colour." }, "visited": { - "title": "Visited colour", + "title": "Item colour - visited", "type": "string", "inputType": "ColourPicker", - "default": "", - "help": "Defines the Item colour when it has been visited." + "default": "" }, "visited-inverted": { - "title": "Visited colour - inverted", + "title": "Item colour - inverted visited", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item text / icon colour when visited. Should be a colour that provides good contrast against the item visited colour." + }, + "item-color-disabled": { + "title": "Item colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "item-color-inverted-disabled": { + "title": "Item colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item text / icon colour when disabled. Should be a colour that provides good contrast against the item disabled colour." + } + } + }, + + "_itemsUi": { + "type": "object", + "required": false, + "title": "Content Items UI (action not content)", + "properties": { + "item-ui-color": { + "title": "Item UI colour", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the selectable areas in components that don't contain course content." + }, + "item-ui-color-inverted": { + "title": "Item UI colour - inverted", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour. Should be a colour that provides good contrast against the item UI colour." + }, + "item-ui-color-hover": { + "title": "Item UI colour - hover", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-hover": { + "title": "Item UI colour - inverted hover", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when hovered over. Should be a colour that provides good contrast against the item UI hover colour." + }, + "item-ui-color-focus": { + "title": "Item UI colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-focus": { + "title": "Item UI colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when focused. Should be a colour that provides good contrast against the item UI focus colour." + }, + "item-ui-color-selected": { + "title": "Item UI colour - selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-selected": { + "title": "Item UI colour - inverted selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when selected. Should be a colour that provides good contrast against the item UI selected colour." + }, + "item-ui-color-visited": { + "title": "Item UI colour - visited", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-visited": { + "title": "Item UI colour - inverted visited", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Item text / icon colour when visited. Should be a colour that provides good contrast against the Item visited colour." + "help": "Defines the item UI text / icon colour when visited. Should be a colour that provides good contrast against the item UI visited colour." + }, + "item-ui-color-locked": { + "title": "Item UI colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-locked": { + "title": "Item UI colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when locked. Should be a colour that provides good contrast against the item UI locked colour." + }, + "item-ui-color-disabled": { + "title": "Item UI colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "" + }, + "item-ui-color-inverted-disabled": { + "title": "Item UI colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the item UI text / icon colour when disabled. Should be a colour that provides good contrast against the item UI disabled colour." } } }, @@ -162,6 +293,58 @@ "default": "", "help": "Defines the button text / icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour." }, + "btn-color-focus": { + "title": "Button colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "btn-color-inverted-focus": { + "title": "Button colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when focused. Should be a colour that provides good contrast against the button focus colour." + }, + "btn-color-selected": { + "title": "Button colour - selected", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "btn-color-inverted-selected": { + "title": "Button colour - inverted selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when selected. Should be a colour that provides good contrast against the button selected colour." + }, + "btn-color-locked": { + "title": "Button colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "btn-color-inverted-locked": { + "title": "Button colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when locked. Should be a colour that provides good contrast against the button locked colour." + }, + "disabled": { + "title": "Button colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "disabled-inverted": { + "title": "Button colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the button text / icon colour when disabled. Should be a colour that provides good contrast against the button disabled colour." + }, "btn-icon-color": { "title": "Button icon colour", "type": "string", @@ -188,19 +371,28 @@ "inputType": "ColourPicker", "default": "", "help": "Defines the button icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour." - }, - "disabled": { - "title": "Disabled colour", + } + } + }, + + "_globalUi": { + "type": "object", + "required": false, + "title": "Global UI", + "properties": { + "ui-color": { + "title": "UI colour", "type": "string", "inputType": "ColourPicker", - "default": "" + "default": "", + "help": "Defines the global UI colour scheme for nav, notify, and drawer." }, - "disabled-inverted": { - "title": "Disabled colour - inverted", + "ui-color-inverted": { + "title": "UI colour - inverted", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the button text / icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour." + "help": "Defines the global UI text / icon colour. Should be a colour that provides good contrast against the global UI colour." } } }, @@ -236,7 +428,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the question marking error text / icon colour. Should be a colour that provices good contrast against the question marking error colour." + "help": "Defines the question marking error text / icon colour. Should be a colour that provides good contrast against the question marking error colour." } } }, @@ -316,7 +508,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item text colour. Should be a colour that provides good contrast against the Menu Item colour." + "help": "Defines the menu item text colour. Should be a colour that provides good contrast against the menu item colour." }, "menu-item-border-color": { "title": "Menu item border colour", @@ -329,14 +521,14 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item specific global progress width fill override colour." + "help": "Defines the menu-item-specific progress width fill override colour." }, "menu-item-progress-inverted": { "title": "Menu item progress background colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item specific global progress fill background override colour." + "help": "Defines the menu-item-specific progress fill background override colour." }, "menu-item-progress-border": { "title": "Menu item progress border colour", @@ -355,7 +547,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item button text colour. Should be a colour that provides good contrast against the Menu Item button colour." + "help": "Defines the menu item button text colour. Should be a colour that provides good contrast against the menu item button colour." }, "menu-item-btn-color-hover": { "title": "Menu item button background colour - hover", @@ -368,7 +560,33 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Menu Item button text colour when hovered over. Should be a colour that provides good contrast against the Menu Item button hover colour." + "help": "Defines the menu item button text colour when hovered over. Should be a colour that provides good contrast against the menu item button hover colour." + }, + "menu-item-btn-color-focus": { + "title": "Menu item button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "menu-item-btn-color-inverted-focus": { + "title": "Menu item button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the menu item button text colour when focused. Should be a colour that provides good contrast against the menu item button focus colour." + }, + "menu-item-btn-color-locked": { + "title": "Menu item button background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "menu-item-btn-color-inverted-locked": { + "title": "Menu item button background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the menu item button text colour when locked. Should be a colour that provides good contrast against the menu item button locked colour." } } }, @@ -376,7 +594,7 @@ "_nav": { "type": "object", "required": false, - "title": "Navigation", + "title": "Navigation bar", "properties": { "nav": { "title": "Navigation background colour", @@ -389,7 +607,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the general Navigation inverted colour. Should be a colour that provides good contrast against the Navigation colour." + "help": "Defines the general navigation inverted colour. Should be a colour that provides good contrast against the navigation colour." }, "nav-icon": { "title": "Navigation button background colour", @@ -402,7 +620,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation Btn text / icon colour. Should be a colour that provides good contrast against the Navigation Btn colour." + "help": "Defines the navigation button text / icon colour. Should be a colour that provides good contrast against the navigation button colour." }, "nav-icon-hover": { "title": "Navigation button background colour - hover", @@ -415,21 +633,60 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation button text / icon colour when hovered over. Should be a colour that provides good contrast against the Navigation button hover colour." + "help": "Defines the navigation button text / icon colour when hovered over. Should be a colour that provides good contrast against the navigation button hover colour." + }, + "nav-icon-focus": { + "title": "Navigation button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "nav-icon-inverted-focus": { + "title": "Navigation button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the navigation button text / icon colour when focused. Should be a colour that provides good contrast against the navigation button focus colour." + }, + "nav-icon-locked": { + "title": "Navigation button background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "nav-icon-inverted-locked": { + "title": "Navigation button background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the navigation button text / icon colour when locked. Should be a colour that provides good contrast against the navigation button locked colour." + }, + "nav-icon-disabled": { + "title": "Navigation button background colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "nav-icon-inverted-disabled": { + "title": "Navigation button background colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the navigation button text / icon colour when disabled. Should be a colour that provides good contrast against the navigation button disabled colour." }, "nav-progress": { "title": "Navigation progress fill color", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress width fill override colour." + "help": "Defines the navigation-specific progress width fill override colour." }, "nav-progress-inverted": { "title": "Navigation progress background color - inverted", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress fill background override colour." + "help": "Defines the navigation-specific progress fill background override colour." }, "nav-progress-border": { "title": "Navigation progress border colour", @@ -442,14 +699,14 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress width fill override colour when hovered over." + "help": "Defines the navigation-specific progress width fill override colour when hovered over." }, "nav-progress-inverted-hover": { "title": "Navigation progress background color - inverted hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Navigation specific progress fill background override colour when hovered over." + "help": "Defines the navigation-specific progress fill background override colour when hovered over." }, "nav-progress-border-hover": { "title": "Navigation progress border colour - hover", @@ -463,7 +720,7 @@ "_notify": { "type": "object", "required": false, - "title": "Notify (pop up)", + "title": "Notify (popup)", "properties": { "notify": { "title": "Notify background colour", @@ -476,7 +733,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify text colour. Should be a colour that provides good contrast against the Notify colour." + "help": "Defines the notify text colour. Should be a colour that provides good contrast against the notify colour." }, "notify-link": { "title": "Notify link font colour", @@ -490,6 +747,58 @@ "inputType": "ColourPicker", "default": "" }, + "notify-icon": { + "title": "Notify icon button background colour", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted": { + "title": "Notify icon button background colour - inverted", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon inverse colour. Should be a colour that provides good contrast against the notify icon colour." + }, + "notify-icon-hover": { + "title": "Notify icon button background colour - hover", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted-hover": { + "title": "Notify icon button background colour - inverted hover", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon colour when hovered over. Should be a colour that provides good contrast against the notify icon hover colour." + }, + "notify-icon-focus": { + "title": "Notify icon button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted-focus": { + "title": "Notify icon button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon colour when focused. Should be a colour that provides good contrast against the notify icon focus colour." + }, + "notify-icon-disabled": { + "title": "Notify icon button background colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-icon-inverted-disabled": { + "title": "Notify icon button background colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify icon colour when disabled. Should be a colour that provides good contrast against the notify icon disabled colour." + }, "notify-btn": { "title": "Notify button background colour", "type": "string", @@ -501,7 +810,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify button text / icon colour. Should be a colour that provides good contrast against the Notify button colour." + "help": "Defines the notify button text / icon colour. Should be a colour that provides good contrast against the notify button colour." }, "notify-btn-hover": { "title": "Notify button background colour - hover", @@ -514,33 +823,59 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify button text / icon colour when hovered over. Should be a colour that provides good contrast against the Notify button hover colour." + "help": "Defines the notify button text / icon colour when hovered over. Should be a colour that provides good contrast against the notify button hover colour." }, - "notify-icon": { - "title": "Notify icon button background colour", + "notify-btn-focus": { + "title": "Notify button background colour - focus", "type": "string", "inputType": "ColourPicker", "default": "" }, - "notify-icon-inverted": { - "title": "Notify icon button background colour - inverted", + "notify-btn-inverted-focus": { + "title": "Notify button background colour - inverted focus", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify Icon inverse colour. Should be a colour that provides good contrast against the Notify Icon colour." + "help": "Defines the notify button text / icon colour when focused. Should be a colour that provides good contrast against the notify button focus colour." }, - "notify-icon-hover": { - "title": "Notify icon button background colour - hover", + "notify-btn-selected": { + "title": "Notify button background colour - selected", "type": "string", "inputType": "ColourPicker", "default": "" }, - "notify-icon-inverted-hover": { - "title": "Notify icon button background colour - inverted hover", + "notify-btn-inverted-selected": { + "title": "Notify button background colour - inverted selected", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify button text / icon colour when selected. Should be a colour that provides good contrast against the notify button selected colour." + }, + "notify-btn-locked": { + "title": "Notify button background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-btn-inverted-locked": { + "title": "Notify button background colour - inverted locked", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Notify Icon colour when hovered over. Should be a colour that provides good contrast against the Notify Icon colour." + "help": "Defines the notify button text / icon colour when locked. Should be a colour that provides good contrast against the notify button locked colour." + }, + "notify-btn-disabled": { + "title": "Notify button background colour - disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "notify-btn-inverted-disabled": { + "title": "Notify button background colour - inverted disabled", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the notify button text / icon colour when disabled. Should be a colour that provides good contrast against the notify button disabled colour." } } }, @@ -561,7 +896,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer text colour. Should be a colour that provides good contrast against the Drawer colour." + "help": "Defines the drawer text colour. Should be a colour that provides good contrast against the Drawer colour." }, "drawer-link": { "title": "Drawer link font colour", @@ -586,7 +921,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Icon button inverse colour. Should be a colour that provides good contrast against the Drawer Icon button colour" + "help": "Defines the drawer icon button inverse colour. Should be a colour that provides good contrast against the drawer icon button colour." }, "drawer-icon-hover": { "title": "Drawer icon button background colour - hover", @@ -599,7 +934,20 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Icon button inverse colour when hovered over. Should be a colour that provides good contrast against the Drawer Icon button hover colour." + "help": "Defines the drawer icon button inverse colour when hovered over. Should be a colour that provides good contrast against the drawer icon button hover colour." + }, + "drawer-icon-focus": { + "title": "Drawer icon button background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "drawer-icon-inverted-focus": { + "title": "Drawer icon button background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the drawer icon button inverse colour when focused. Should be a colour that provides good contrast against the drawer icon button focus colour." }, "drawer-item": { "title": "Drawer item background colour", @@ -612,7 +960,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Item text / icon colour. Should be a colour that provides good contrast against the Drawer Item colour." + "help": "Defines the drawer item text / icon colour. Should be a colour that provides good contrast against the drawer item colour." }, "drawer-item-hover": { "title": "Drawer item background colour - hover", @@ -625,7 +973,20 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Item text / icon colour when hovered over. Should be a colour that provides good contrast against the Drawer Item hover colour." + "help": "Defines the drawer item text / icon colour when hovered over. Should be a colour that provides good contrast against the drawer item hover colour." + }, + "drawer-item-focus": { + "title": "Drawer item background colour - focus", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "drawer-item-inverted-focus": { + "title": "Drawer item background colour - inverted focus", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the drawer item text / icon colour when focused. Should be a colour that provides good contrast against the drawer item focus colour." }, "drawer-item-selected": { "title": "Drawer item background colour - selected", @@ -638,49 +999,62 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer Item text / icon colour when selected. Should be a colour that provides good contrast against the Drawer Item selected colour." + "help": "Defines the drawer item text / icon colour when selected. Should be a colour that provides good contrast against the drawer item selected colour." + }, + "drawer-item-locked": { + "title": "Drawer item background colour - locked", + "type": "string", + "inputType": "ColourPicker", + "default": "" + }, + "drawer-item-inverted-locked": { + "title": "Drawer item background colour - inverted locked", + "type": "string", + "inputType": "ColourPicker", + "default": "", + "help": "Defines the drawer item text / icon colour when locked. Should be a colour that provides good contrast against the drawer item locked colour." }, "drawer-progress": { "title": "Drawer progress fill colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress width fill override colour." + "help": "Defines the drawer-specific progress width fill override colour." }, "drawer-progress-inverted": { "title": "Drawer progress background colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress fill background override colour." + "help": "Defines the drawer-specific progress fill background override colour." }, "drawer-progress-border": { "title": "Drawer progress border colour", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific border override colour that appears around the progress fill bar." + "help": "Defines the drawer-specific border override colour that appears around the progress fill bar." }, "drawer-progress-hover": { "title": "Drawer progress colour - hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress width fill override colour when hovered over." + "help": "Defines the drawer-specific progress width fill override colour when hovered over." }, "drawer-progress-inverted-hover": { "title": "Drawer progress colour - inverted hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific progress fill background override colour when hovered over." + "help": "Defines the drawer-specific progress fill background override colour when hovered over." }, "drawer-progress-border-hover": { "title": "Drawer progress border colour - hover", "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Drawer-specific border override colour that appears around the progress fill bar when hovered over." + "help": "Defines the drawer-specific border override colour that appears around the progress fill bar when hovered over." } } }, @@ -702,10 +1076,10 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Background text / icon colour. Should be a colour that provides good contrast against the Background colour." + "help": "Defines the background text / icon colour. Should be a colour that provides good contrast against the background colour." }, "shadow": { - "title": "Shadow background colour (loading / pop up background)", + "title": "Shadow background colour (loading / popup background)", "type": "string", "inputType": "ColourPicker", "default": "" @@ -715,7 +1089,7 @@ "type": "string", "inputType": "ColourPicker", "default": "", - "help": "Defines the Shadow text / icon colour. Should be a colour that provides good contrast against the Shadow colour." + "help": "Defines the shadow text / icon colour. Should be a colour that provides good contrast against the shadow colour." }, "loading": { "title": "Loading animation background colour", @@ -733,6 +1107,7 @@ } } }, + "pluginLocations": { "type": "object", "required": true, diff --git a/schema/theme.schema.json b/schema/theme.schema.json index e0054247..5718894d 100644 --- a/schema/theme.schema.json +++ b/schema/theme.schema.json @@ -3,6 +3,7 @@ "$schema": "https://json-schema.org/draft/2020-12/schema", "type": "object", "properties": { + "_global": { "type": "object", "title": "Global", @@ -11,14 +12,14 @@ "font-color": { "type": "string", "title": "Font colour", - "description": "Global body font colour", + "description": "Global body font colour.", "default": "", "_backboneForms": "ColourPicker" }, "font-color-inverted": { "type": "string", "title": "Font colour - inverted", - "description": "Global body font colour inverted. Either a lightened/darkened alternative to Font colour", + "description": "Global body font colour inverted. Either a lightened / darkened alternative to Font colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -31,7 +32,7 @@ "link-inverted": { "type": "string", "title": "Link font colour - inverted", - "description": "Global link font colour inverted. Either a lightened/darkened alternative to Link colour", + "description": "Global link font colour inverted. Either a lightened / darkened alternative to Link colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -44,7 +45,7 @@ "link-inverted-hover": { "type": "string", "title": "Link font colour - inverted hover", - "description": "Global link font colour when hovered over inverted. Either a lightened/darkened alternative to Link hover colour", + "description": "Global link font colour when hovered over inverted. Either a lightened / darkened alternative to Link hover colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -58,28 +59,29 @@ "heading-color-inverted": { "type": "string", "title": "Heading colour - inverted", - "description": "Global title colour inverted. Either a lightened/darkened alternative to Title colour", + "description": "Global title colour inverted. Either a lightened / darkened alternative to Title colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_items": { "type": "object", - "title": "Items (components)", + "title": "Content Items (components)", "default": {}, "properties": { "item-color": { "type": "string", "title": "Item colour", - "description": "Defines the clickable areas or points of interest in components", + "description": "Defines the selectable areas or points of interest in components.", "default": "", "_backboneForms": "ColourPicker" }, "item-color-inverted": { "type": "string", "title": "Item colour - inverted", - "description": "Defines the item text/icon colour. Should be a colour that provides good contrast against the item colour", + "description": "Defines the item text / icon colour. Should be a colour that provides good contrast against the item colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -92,7 +94,20 @@ "item-color-inverted-hover": { "type": "string", "title": "Item colour - inverted hover", - "description": "Defines the item text/icon colour when hovered over. Should be a colour that provides good contrast against the item hover colour", + "description": "Defines the item text / icon colour when hovered over. Should be a colour that provides good contrast against the item hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-focus": { + "type": "string", + "title": "Item colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-inverted-focus": { + "type": "string", + "title": "Item colour - inverted focus", + "description": "Defines the item text / icon colour when focused. Should be a colour that provides good contrast against the item focus colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -105,26 +120,139 @@ "item-color-inverted-selected": { "type": "string", "title": "Item colour - inverted selected", - "description": "Defines the item text/icon colour when selected. Should be a colour that provides good contrast against the Item selected colour", + "description": "Defines the item text / icon colour when selected. Should be a colour that provides good contrast against the item selected colour.", "default": "", "_backboneForms": "ColourPicker" }, "visited": { "type": "string", - "title": "Visited colour", - "description": "Defines the item colour when it has been visited", + "title": "Item colour - visited", "default": "", "_backboneForms": "ColourPicker" }, "visited-inverted": { "type": "string", - "title": "Visited colour - inverted", - "description": "Defines the item text/icon colour when visited. Should be a colour that provides good contrast against the item visited colour", + "title": "Item colour - inverted visited", + "description": "Defines the item text / icon colour when visited. Should be a colour that provides good contrast against the item visited colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-disabled": { + "type": "string", + "title": "Item colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-color-inverted-disabled": { + "type": "string", + "title": "Item colour - inverted disabled", + "description": "Defines the item text / icon colour when disabled. Should be a colour that provides good contrast against the item disabled colour.", + "default": "", + "_backboneForms": "ColourPicker" + } + } + }, + + "_itemsUi": { + "type": "object", + "title": "Content Items UI (action not content)", + "default": {}, + "properties": { + "item-ui-color": { + "type": "string", + "title": "Item UI colour", + "description": "Defines the selectable areas in components that don't contain course content.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted": { + "type": "string", + "title": "Item UI colour - inverted", + "description": "Defines the item UI text / icon colour. Should be a colour that provides good contrast against the item UI colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-hover": { + "type": "string", + "title": "Item UI colour - hover", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-hover": { + "type": "string", + "title": "Item UI colour - inverted hover", + "description": "Defines the item UI text / icon colour when hovered over. Should be a colour that provides good contrast against the item UI hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-focus": { + "type": "string", + "title": "Item UI colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-focus": { + "type": "string", + "title": "Item UI colour - inverted focus", + "description": "Defines the item UI text / icon colour when focused. Should be a colour that provides good contrast against the item UI focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-selected": { + "type": "string", + "title": "Item UI colour - selected", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-selected": { + "type": "string", + "title": "Item UI colour - inverted selected", + "description": "Defines the item UI text / icon colour when selected. Should be a colour that provides good contrast against the item UI selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-visited": { + "type": "string", + "title": "Item UI colour - visited", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-visited": { + "type": "string", + "title": "Item UI colour - inverted visited", + "description": "Defines the item UI text / icon colour when visited. Should be a colour that provides good contrast against the item UI visited colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-locked": { + "type": "string", + "title": "Item UI colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-locked": { + "type": "string", + "title": "Item UI colour - inverted locked", + "description": "Defines the item UI text / icon colour when locked. Should be a colour that provides good contrast against the item UI locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-disabled": { + "type": "string", + "title": "Item UI colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "item-ui-color-inverted-disabled": { + "type": "string", + "title": "Item UI colour - inverted disabled", + "description": "Defines the item UI text / icon colour when disabled. Should be a colour that provides good contrast against the item UI disabled colour", "default": "", "_backboneForms": "ColourPicker" } } }, + "_buttons": { "type": "object", "title": "Buttons", @@ -133,14 +261,14 @@ "btn-color": { "type": "string", "title": "Button colour", - "description": "Defines component question buttons and navigational elements", + "description": "Defines component question buttons and navigational elements.", "default": "", "_backboneForms": "ColourPicker" }, "btn-color-inverted": { "type": "string", "title": "Button colour - inverted", - "description": "Defines the button text/icon colour. Should be a colour that provides good contrast against the button colour", + "description": "Defines the button text / icon colour. Should be a colour that provides good contrast against the button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -153,21 +281,73 @@ "btn-color-inverted-hover": { "type": "string", "title": "Button colour - inverted hover", - "description": "Defines the button text/icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour", + "description": "Defines the button text / icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-focus": { + "type": "string", + "title": "Button colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-inverted-focus": { + "type": "string", + "title": "Button colour - inverted focus", + "description": "Defines the button text / icon colour when focused. Should be a colour that provides good contrast against the button focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-selected": { + "type": "string", + "title": "Button colour - selected", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-inverted-selected": { + "type": "string", + "title": "Button colour - inverted selected", + "description": "Defines the button text / icon colour when selected. Should be a colour that provides good contrast against the button selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-locked": { + "type": "string", + "title": "Button colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "btn-color-inverted-locked": { + "type": "string", + "title": "Button colour - inverted locked", + "description": "Defines the button text / icon colour when locked. Should be a colour that provides good contrast against the button locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "disabled": { + "type": "string", + "title": "Button colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "disabled-inverted": { + "type": "string", + "title": "Button colour - inverted disabled", + "description": "Defines the button text / icon colour when disabled. Should be a colour that provides good contrast against the button disabled colour.", "default": "", "_backboneForms": "ColourPicker" }, "btn-icon-color": { "type": "string", "title": "Button icon colour", - "description": "Defines the standardised icon button background colour", + "description": "Defines the standardised icon button background colour.", "default": "", "_backboneForms": "ColourPicker" }, "btn-icon-color-inverted": { "type": "string", "title": "Button icon colour - inverted", - "description": "Defines the button icon colour. Should be a colour that provides good contrast against the button colour", + "description": "Defines the button icon colour. Should be a colour that provides good contrast against the button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -180,25 +360,35 @@ "btn-icon-color-inverted-hover": { "type": "string", "title": "Button icon colour - inverted hover", - "description": "Defines the button icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour", + "description": "Defines the button icon colour when hovered over. Should be a colour that provides good contrast against the button hover colour.", "default": "", "_backboneForms": "ColourPicker" - }, - "disabled": { + } + } + }, + + "_globalUi": { + "type": "object", + "title": "Global UI", + "default": {}, + "properties": { + "ui-color": { "type": "string", - "title": "Disabled colour", + "title": "UI colour", + "description": "Defines the global UI colour scheme for nav, notify, and drawer.", "default": "", "_backboneForms": "ColourPicker" }, - "disabled-inverted": { + "ui-color-inverted": { "type": "string", - "title": "Disabled colour - inverted", - "description": "Defines the button text/icon colour when it is disabled. Should be a colour that provides good contrast against the button disabled colour", + "title": "UI colour - inverted", + "description": "Defines the global UI text / icon colour. Should be a colour that provides good contrast against the global UI colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_validation": { "type": "object", "title": "Validation states", @@ -207,33 +397,34 @@ "validation-success": { "type": "string", "title": "Validation success colour", - "description": "Defines the question marking success colour", + "description": "Defines the question marking success colour.", "default": "", "_backboneForms": "ColourPicker" }, "validation-success-inverted": { "type": "string", "title": "Validation success colour - inverted", - "description": "Defines the question marking success text/icon colour. Should be a colour that provides good contrast against the question marking success colour", + "description": "Defines the question marking success text / icon colour. Should be a colour that provides good contrast against the question marking success colour.", "default": "", "_backboneForms": "ColourPicker" }, "validation-error": { "type": "string", "title": "Validation error colour", - "description": "Defines the question marking error colour", + "description": "Defines the question marking error colour.", "default": "", "_backboneForms": "ColourPicker" }, "validation-error-inverted": { "type": "string", "title": "Validation error colour - inverted", - "description": "Defines the question marking error text/icon colour. Should be a colour that provices good contrast against the question marking error colour", + "description": "Defines the question marking error text / icon colour. Should be a colour that provides good contrast against the question marking error colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_progress": { "type": "object", "title": "Progress bars", @@ -242,26 +433,27 @@ "progress": { "type": "string", "title": "Progress fill colour", - "description": "Defines the global progress width fill colour", + "description": "Defines the global progress width fill colour.", "default": "", "_backboneForms": "ColourPicker" }, "progress-inverted": { "type": "string", "title": "Progress background colour", - "description": "Defines the global progress fill background colour", + "description": "Defines the global progress fill background colour.", "default": "", "_backboneForms": "ColourPicker" }, "progress-border": { "type": "string", "title": "Progress border colour", - "description": "Defines the global border colour that appears around the progress fill bar", + "description": "Defines the global border colour that appears around the progress fill bar.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_menu": { "type": "object", "title": "Menu", @@ -306,7 +498,7 @@ "menu-item-inverted": { "type": "string", "title": "Menu item colour - inverted", - "description": "Defines the menu item text colour. Should be a colour that provides good contrast against the menu item colour", + "description": "Defines the menu item text colour. Should be a colour that provides good contrast against the menu item colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -319,14 +511,14 @@ "menu-item-progress": { "type": "string", "title": "Menu item progress fill colour", - "description": "Defines the menu-item-specific progress width fill override colour", + "description": "Defines the menu-item-specific progress width fill override colour.", "default": "", "_backboneForms": "ColourPicker" }, "menu-item-progress-inverted": { "type": "string", "title": "Menu item progress background colour", - "description": "Defines the menu-item-specific progress fill background override colour", + "description": "Defines the menu-item-specific progress fill background override colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -345,7 +537,7 @@ "menu-item-btn-color-inverted": { "type": "string", "title": "Menu item button background colour - inverted", - "description": "Defines the menu item button text colour. Should be a colour that provides good contrast against the menu item button colour", + "description": "Defines the menu item button text colour. Should be a colour that provides good contrast against the menu item button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -358,12 +550,39 @@ "menu-item-btn-color-inverted-hover": { "type": "string", "title": "Menu item button background colour - inverted hover", - "description": "Defines the menu item button text colour when hovered over. Should be a colour that provides good contrast against the menu item button hover colour", + "description": "Defines the menu item button text colour when hovered over. Should be a colour that provides good contrast against the menu item button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-focus": { + "type": "string", + "title": "Menu item button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-inverted-focus": { + "type": "string", + "title": "Menu item button background colour - inverted focus", + "description": "Defines the menu item button text colour when focused. Should be a colour that provides good contrast against the menu item button focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-locked": { + "type": "string", + "title": "Menu item button background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "menu-item-btn-color-inverted-locked": { + "type": "string", + "title": "Menu item button background colour - inverted locked", + "description": "Defines the menu item button text colour when locked. Should be a colour that provides good contrast against the menu item button locked colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_nav": { "type": "object", "title": "Navigation bar", @@ -378,7 +597,7 @@ "nav-inverted": { "type": "string", "title": "Navigation background colour - inverted", - "description": "Defines the general navigation inverted colour. Should be a colour that provides good contrast against the navigation colour", + "description": "Defines the general navigation inverted colour. Should be a colour that provides good contrast against the navigation colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -391,7 +610,7 @@ "nav-icon-inverted": { "type": "string", "title": "Navigation button background colour - inverted", - "description": "Defines the navigation button text/icon colour. Should be a colour that provides good contrast against the navigation button colour", + "description": "Defines the navigation button text / icon colour. Should be a colour that provides good contrast against the navigation button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -404,21 +623,60 @@ "nav-icon-inverted-hover": { "type": "string", "title": "Navigation button background colour - inverted hover", - "description": "Defines the navigation button text/icon colour when hovered over. Should be a colour that provides good contrast against the navigation button hover colour", + "description": "Defines the navigation button text / icon colour when hovered over. Should be a colour that provides good contrast against the navigation button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-focus": { + "type": "string", + "title": "Navigation button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-inverted-focus": { + "type": "string", + "title": "Navigation button background colour - inverted focus", + "description": "Defines the navigation button text / icon colour when focused. Should be a colour that provides good contrast against the navigation button focus colour,", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-locked": { + "type": "string", + "title": "Navigation button background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-inverted-locked": { + "type": "string", + "title": "Navigation button background colour - inverted locked", + "description": "Defines the navigation button text / icon colour when locked. Should be a colour that provides good contrast against the navigation button locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-disabled": { + "type": "string", + "title": "Navigation button background colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "nav-icon-inverted-disabled": { + "type": "string", + "title": "Navigation button background colour - inverted disabled", + "description": "Defines the navigation button text / icon colour when disabled. Should be a colour that provides good contrast against the navigation button disabled colour.", "default": "", "_backboneForms": "ColourPicker" }, "nav-progress": { "type": "string", "title": "Navigation progress fill color", - "description": "Defines the navigation-specific progress width fill override colour", + "description": "Defines the navigation-specific progress width fill override colour.", "default": "", "_backboneForms": "ColourPicker" }, "nav-progress-inverted": { "type": "string", "title": "Navigation progress background color - inverted", - "description": "Defines the navigation-specific progress fill background override colour", + "description": "Defines the navigation-specific progress fill background override colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -431,14 +689,14 @@ "nav-progress-hover": { "type": "string", "title": "Navigation progress fill color - hover", - "description": "Defines the navigation-specific progress width fill override colour when hovered over", + "description": "Defines the navigation-specific progress width fill override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, "nav-progress-inverted-hover": { "type": "string", "title": "Navigation progress background color - inverted hover", - "description": "Defines the navigation-specific progress fill background override colour when hovered over", + "description": "Defines the navigation-specific progress fill background override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, @@ -450,6 +708,7 @@ } } }, + "_notify": { "type": "object", "title": "Notify (popup)", @@ -464,7 +723,7 @@ "notify-inverted": { "type": "string", "title": "Notify background colour - inverted", - "description": "Defines the notify text colour. Should be a colour that provides good contrast against the notify colour", + "description": "Defines the notify text colour. Should be a colour that provides good contrast against the notify colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -480,6 +739,58 @@ "default": "", "_backboneForms": "ColourPicker" }, + "notify-icon": { + "type": "string", + "title": "Notify icon button background colour", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted": { + "type": "string", + "title": "Notify icon button background colour - inverted", + "description": "Defines the notify icon inverse colour. Should be a colour that provides good contrast against the notify icon colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-hover": { + "type": "string", + "title": "Notify icon button background colour - hover", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted-hover": { + "type": "string", + "title": "Notify icon button background colour - inverted hover", + "description": "Defines the notify icon colour when hovered over. Should be a colour that provides good contrast against the notify icon hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-focus": { + "type": "string", + "title": "Notify icon button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted-focus": { + "type": "string", + "title": "Notify icon button background colour - inverted focus", + "description": "Defines the notify icon colour when focused. Should be a colour that provides good contrast against the notify icon focus colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-disabled": { + "type": "string", + "title": "Notify icon button background colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-icon-inverted-disabled": { + "type": "string", + "title": "Notify icon button background colour - inverted disabled", + "description": "Defines the notify icon colour when disabled. Should be a colour that provides good contrast against the notify icon disabled colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, "notify-btn": { "type": "string", "title": "Notify button background colour", @@ -489,7 +800,7 @@ "notify-btn-inverted": { "type": "string", "title": "Notify button background colour - inverted", - "description": "Defines the notify button text/icon colour. Should be a colour that provides good contrast against the notify button colour", + "description": "Defines the notify button text / icon colour. Should be a colour that provides good contrast against the notify button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -502,38 +813,65 @@ "notify-btn-inverted-hover": { "type": "string", "title": "Notify button background colour - inverted hover", - "description": "Defines the notify button text/icon colour when hovered over. Should be a colour that provides good contrast against the notify button hover colour", + "description": "Defines the notify button text / icon colour when hovered over. Should be a colour that provides good contrast against the notify button hover colour.", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon": { + "notify-btn-focus": { "type": "string", - "title": "Notify icon button background colour", + "title": "Notify button background colour - focus", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon-inverted": { + "notify-btn-inverted-focus": { "type": "string", - "title": "Notify icon button background colour - inverted", - "description": "Defines the notify icon inverse colour. Should be a colour that provides good contrast against the notify icon colour", + "title": "Notify button background colour - inverted focus", + "description": "Defines the notify button text / icon colour when focused. Should be a colour that provides good contrast against the notify button focus colour.", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon-hover": { + "notify-btn-selected": { "type": "string", - "title": "Notify icon button background colour - hover", + "title": "Notify button background colour - selected", "default": "", "_backboneForms": "ColourPicker" }, - "notify-icon-inverted-hover": { + "notify-btn-inverted-selected": { "type": "string", - "title": "Notify icon button background colour - inverted hover", - "description": "Defines the notify icon colour when hovered over. Should be a colour that provides good contrast against the notify icon colour", + "title": "Notify button background colour - inverted selected", + "description": "Defines the notify button text / icon colour when selected. Should be a colour that provides good contrast against the notify button selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-locked": { + "type": "string", + "title": "Notify button background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-inverted-locked": { + "type": "string", + "title": "Notify button background colour - inverted locked", + "description": "Defines the notify button text / icon colour when locked. Should be a colour that provides good contrast against the notify button locked colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-disabled": { + "type": "string", + "title": "Notify button background colour - disabled", + "default": "", + "_backboneForms": "ColourPicker" + }, + "notify-btn-inverted-disabled": { + "type": "string", + "title": "Notify button background colour - inverted disabled", + "description": "Defines the notify button text / icon colour when disabled. Should be a colour that provides good contrast against the notify button disabled colour.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_drawer": { "type": "object", "title": "Drawer", @@ -548,7 +886,7 @@ "drawer-inverted": { "type": "string", "title": "Drawer background colour - inverted", - "description": "Defines the drawer text colour. Should be a colour that provides good contrast against the drawer colour", + "description": "Defines the drawer text colour. Should be a colour that provides good contrast against the drawer colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -573,7 +911,7 @@ "drawer-icon-inverted": { "type": "string", "title": "Drawer icon button background colour - inverted", - "description": "Defines the drawer icon button inverse colour. Should be a colour that provides good contrast against the drawer icon button colour", + "description": "Defines the drawer icon button inverse colour. Should be a colour that provides good contrast against the drawer icon button colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -586,7 +924,20 @@ "drawer-icon-inverted-hover": { "type": "string", "title": "Drawer icon button background colour - inverted hover", - "description": "Defines the drawer icon button inverse colour when hovered over. Should be a colour that provides good contrast against the drawer icon button hover colour", + "description": "Defines the drawer icon button inverse colour when hovered over. Should be a colour that provides good contrast against the drawer icon button hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-icon-focus": { + "type": "string", + "title": "Drawer icon button background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-icon-inverted-focus": { + "type": "string", + "title": "Drawer icon button background colour - inverted focus", + "description": "Defines the drawer icon button inverse colour when focused. Should be a colour that provides good contrast against the drawer icon button focus colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -599,7 +950,7 @@ "drawer-item-inverted": { "type": "string", "title": "Drawer item background colour - inverted", - "description": "Defines the drawer item text/icon colour. Should be a colour that provides good contrast against the drawer item colour", + "description": "Defines the drawer item text / icon colour. Should be a colour that provides good contrast against the drawer item colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -612,7 +963,20 @@ "drawer-item-inverted-hover": { "type": "string", "title": "Drawer item background colour - inverted hover", - "description": "Defines the drawer item text/icon colour when hovered over. Should be a colour that provides good contrast against the drawer item hover colour", + "description": "Defines the drawer item text / icon colour when hovered over. Should be a colour that provides good contrast against the drawer item hover colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-focus": { + "type": "string", + "title": "Drawer item background colour - focus", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-inverted-focus": { + "type": "string", + "title": "Drawer item background colour - inverted focus", + "description": "Defines the drawer item text / icon colour when focused. Should be a colour that provides good contrast against the drawer item focus colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -625,54 +989,68 @@ "drawer-item-inverted-selected": { "type": "string", "title": "Drawer item background colour - inverted selected", - "description": "Defines the drawer item text/icon colour when selected. Should be a colour that provides good contrast against the drawer item selected colour", + "description": "Defines the drawer item text / icon colour when selected. Should be a colour that provides good contrast against the drawer item selected colour.", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-locked": { + "type": "string", + "title": "Drawer item background colour - locked", + "default": "", + "_backboneForms": "ColourPicker" + }, + "drawer-item-inverted-locked": { + "type": "string", + "title": "Drawer item background colour - inverted locked", + "description": "Defines the drawer item text / icon colour when locked. Should be a colour that provides good contrast against the drawer item locked colour.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress": { "type": "string", "title": "Drawer progress fill colour", - "description": "Defines the drawer-specific progress width fill override colour", + "description": "Defines the drawer-specific progress width fill override colour.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-inverted": { "type": "string", "title": "Drawer progress background colour", - "description": "Defines the drawer-specific progress fill background override colour", + "description": "Defines the drawer-specific progress fill background override colour.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-border": { "type": "string", "title": "Drawer progress border colour", - "description": "Defines the drawer-specific border override colour that appears around the progress fill bar", + "description": "Defines the drawer-specific border override colour that appears around the progress fill bar.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-hover": { "type": "string", "title": "Drawer progress colour - hover", - "description": "Defines the drawer-specific progress width fill override colour when hovered over", + "description": "Defines the drawer-specific progress width fill override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-inverted-hover": { "type": "string", "title": "Drawer progress colour - inverted hover", - "description": "Defines the drawer-specific progress fill background override colour when hovered over", + "description": "Defines the drawer-specific progress fill background override colour when hovered over.", "default": "", "_backboneForms": "ColourPicker" }, "drawer-progress-border-hover": { "type": "string", "title": "Drawer progress border colour - hover", - "description": "Defines the drawer-specific border override colour that appears around the progress fill bar when hovered over", + "description": "Defines the drawer-specific border override colour that appears around the progress fill bar when hovered over.", "default": "", "_backboneForms": "ColourPicker" } } }, + "_misc": { "type": "object", "title": "Miscellaneous", @@ -681,27 +1059,27 @@ "background": { "type": "string", "title": "Background colour", - "description": "Sets the generic background colour", + "description": "Sets the generic background colour.", "default": "", "_backboneForms": "ColourPicker" }, "background-inverted": { "type": "string", "title": "Background colour - inverted", - "description": "Defines the background text/icon colour. Should be a colour that provides good contrast against the background colour", + "description": "Defines the background text / icon colour. Should be a colour that provides good contrast against the background colour.", "default": "", "_backboneForms": "ColourPicker" }, "shadow": { "type": "string", - "title": "Shadow background colour (loading/popup background)", + "title": "Shadow background colour (loading / popup background)", "default": "", "_backboneForms": "ColourPicker" }, "shadow-inverted": { "type": "string", "title": "Shadow background colour - inverted", - "description": "Defines the shadow text/icon colour. Should be a colour that provides good contrast against the shadow colour", + "description": "Defines the shadow text / icon colour. Should be a colour that provides good contrast against the shadow colour.", "default": "", "_backboneForms": "ColourPicker" }, @@ -714,11 +1092,12 @@ "loading-inverted": { "type": "string", "title": "Loading animation colour - inverted", - "description": "Defines the loading animation bar colour. Should be a colour that provides good contrast against the loading colour", + "description": "Defines the loading animation bar colour. Should be a colour that provides good contrast against the loading colour.", "default": "", "_backboneForms": "ColourPicker" } } } + } }