diff --git a/dev-app/app.html b/dev-app/app.html index e2a7c4e9..d1517d0d 100644 --- a/dev-app/app.html +++ b/dev-app/app.html @@ -24,7 +24,7 @@ state="${link.isActive ? 'active' : ''}" > - + diff --git a/dev-app/routes/components/forms/text/properties/index.html b/dev-app/routes/components/forms/text/properties/index.html index db3a2c82..41ab36c8 100644 --- a/dev-app/routes/components/forms/text/properties/index.html +++ b/dev-app/routes/components/forms/text/properties/index.html @@ -20,7 +20,7 @@ - + diff --git a/dev-app/routes/components/icon/methods/index.html b/dev-app/routes/components/icon/methods/index.html index 0a532764..5dcb4da6 100644 --- a/dev-app/routes/components/icon/methods/index.html +++ b/dev-app/routes/components/icon/methods/index.html @@ -18,7 +18,7 @@ action - + diff --git a/dev-app/routes/components/icon/properties/index.html b/dev-app/routes/components/icon/properties/index.html index c8011365..2ab786a4 100644 --- a/dev-app/routes/components/icon/properties/index.html +++ b/dev-app/routes/components/icon/properties/index.html @@ -19,14 +19,11 @@ color - - - - - - - - + + + + + diff --git a/dev-app/routes/components/icon/properties/index.ts b/dev-app/routes/components/icon/properties/index.ts index 0a0f6ff6..5c147cf5 100644 --- a/dev-app/routes/components/icon/properties/index.ts +++ b/dev-app/routes/components/icon/properties/index.ts @@ -22,7 +22,7 @@ export class IconProperties { }, { _class: 'monospaced', - colClass: 't120', + colClass: 't190', colHeadName: 'default', colHeadValue: 'Default', }, @@ -30,16 +30,16 @@ export class IconProperties { public iconProperties = [ { - default: 'lightGray', + default: 'var(--c_lightGray)', description: 'Set the color of the icon.', name: 'color', - value: 'white | lightGray | gray | charcoal | primary | primaryLight | secondary | subOne | subTwo', + value: 'CSS Color', }, { default: '', description: 'Set which icon you want to use.', name: 'icon', - value: '', + value: 'Name of your icon', }, { default: 'small', diff --git a/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.html b/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.html index e100da37..2eea2e77 100644 --- a/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.html +++ b/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.html @@ -36,7 +36,7 @@ - + diff --git a/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.ts b/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.ts index 882fad5c..d2900748 100644 --- a/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.ts +++ b/dev-app/routes/components/navs/horizontal/horizontal-nav-item/properties/index.ts @@ -36,10 +36,10 @@ export class HorizontalItemProperties { value: 'Any icon value', }, { - default: 'primaryLight', + default: 'var(--c_primaryLight)', description: 'Use to set the color of the icon.', name: 'icon-color', - value: 'white | lightGray | gray | primary | primaryLight | secondary | subOne | subTwo', + value: 'CSS Color', }, { default: '', diff --git a/dev-app/routes/components/navs/horizontal/horizontal-nav/index.html b/dev-app/routes/components/navs/horizontal/horizontal-nav/index.html index fb858465..e8153881 100644 --- a/dev-app/routes/components/navs/horizontal/horizontal-nav/index.html +++ b/dev-app/routes/components/navs/horizontal/horizontal-nav/index.html @@ -47,5 +47,19 @@ + + + +
+ + background-color + + + + + + + +
diff --git a/dev-app/routes/components/navs/horizontal/horizontal-nav/index.ts b/dev-app/routes/components/navs/horizontal/horizontal-nav/index.ts index c0eb23a0..c58c8d9b 100644 --- a/dev-app/routes/components/navs/horizontal/horizontal-nav/index.ts +++ b/dev-app/routes/components/navs/horizontal/horizontal-nav/index.ts @@ -22,13 +22,19 @@ export class Horizontal { }, { _class: 'monospaced', - colClass: 't120', + colClass: 't175', colHeadName: 'default', colHeadValue: 'Default', }, ]; public horizontalProperties = [ + { + default: 'var(--c_darkGray)', + description: 'Set the background color of the nav.', + name: 'background-color', + value: 'CSS Color', + }, { default: 'center', description: 'Set the vertical alignment.', diff --git a/dev-app/routes/components/pill/properties/index.html b/dev-app/routes/components/pill/properties/index.html index e348aad7..4b38a571 100644 --- a/dev-app/routes/components/pill/properties/index.html +++ b/dev-app/routes/components/pill/properties/index.html @@ -26,7 +26,7 @@ Pill with no link - + Pill link @@ -46,7 +46,7 @@ I have an icon - + Pill link diff --git a/dev-app/routes/components/pill/properties/index.ts b/dev-app/routes/components/pill/properties/index.ts index 7147a761..c2dc6f1d 100644 --- a/dev-app/routes/components/pill/properties/index.ts +++ b/dev-app/routes/components/pill/properties/index.ts @@ -24,7 +24,7 @@ export class PillProperties { }, { _class: 'monospaced', - colClass: 't120', + colClass: 't175', colHeadName: 'default', colHeadValue: 'Default', }, @@ -32,10 +32,10 @@ export class PillProperties { public pillProperties = [ { - default: 'info', + default: 'var(--c_subOneMain)', description: 'Set the color', name: 'color', - value: 'info | neutral', + value: 'CSS Color', }, { description: 'Optional: Set the URL the pill should link to.', diff --git a/dev-app/routes/components/tables/table/actions/index.html b/dev-app/routes/components/tables/table/actions/index.html index 4d0d000b..2162e304 100644 --- a/dev-app/routes/components/tables/table/actions/index.html +++ b/dev-app/routes/components/tables/table/actions/index.html @@ -18,7 +18,7 @@ actions - Pass in callbacks for c-table. These include:
getRowClass - Assigns class to a tr
getColClass - Assigns class to a td

+ Pass in callbacks for c-table. These include:
getRowClass - Assigns class to a tr
getColClass - Assigns class to a td
getBarColor - Sets the bar color of a row. Can be any CSS Color.

Available classes to assign:
  • bgHealthy
    • @@ -26,12 +26,8 @@
  • bgCritical
  • bgInfo
  • bgProcess
    • -
  • healthy
    • -
  • info
  • notAllowed
    • -
  • warning
    • -
  • critical
    • -
  • neutral
    • +
  • bar
    •      constructor() { @@ -54,33 +50,46 @@ this.basicData = [ { + _barColor: 'var(--c_primaryLight)', + _status: 'bar', + gender: 'Male', name: 'Luke Skywalker', ship: 'X-Wing', - gender: 'Male', - _status: 'crtiical', }, { + _barColor: 'var(--c_subTwoMain)', + _status: 'bar', + gender: 'Female', name: 'Han Solo', - ship: 'M. Falcon', - gender: 'Male', - _status: 'warning', + ship: 'M.Falcon', }, { - name: 'Fin', - ship: 'Tie Fighter', + _barColor: 'var(--c_secondaryMain)', + _status: 'bar', gender: 'Male', + name: 'Fin', + ship: 'M. Falcon', }, { + _barColor: '#0000FF', + _status: 'bar', + gender: 'Female', name: 'Ray', ship: 'M. Falcon', - gender: 'Female', - _status: 'healthy', }, { + _barColor: 'var(--c_subOneMain)', + _status: 'bar', + gender: 'Male', name: 'Yoda', - ship: 'None', + ship: '', + }, + { + _barColor: 'var(--c_subFourMain)', + _status: 'bar', gender: 'Male', - _status: 'info', + name: 'Palpatine', + ship: '', }, ]; } @@ -122,6 +131,11 @@ } return cls; }, + + getBarColor: (row, col) => { + const color = row._barColor || ''; + return color; + }, }; diff --git a/dev-app/routes/components/tables/table/actions/index.ts b/dev-app/routes/components/tables/table/actions/index.ts index d845e194..3daab3be 100644 --- a/dev-app/routes/components/tables/table/actions/index.ts +++ b/dev-app/routes/components/tables/table/actions/index.ts @@ -57,6 +57,11 @@ export class TableActions { } return cls; }, + + getBarColor: (row, col) => { + const color = row._barColor || ''; + return color; + }, }; constructor() { @@ -107,39 +112,45 @@ export class TableActions { this.basicData = [ { - _status: 'critical', + _barColor: 'var(--c_primaryLight)', + _status: 'bar', gender: 'Male', name: 'Luke Skywalker', ship: 'X-Wing', }, { - _status: 'warning', + _barColor: 'var(--c_subTwoMain)', + _status: 'bar', gender: 'Female', name: 'Han Solo', ship: 'M.Falcon', }, { - _status: 'healthy', + _barColor: 'var(--c_secondaryMain)', + _status: 'bar', gender: 'Male', name: 'Fin', ship: 'M. Falcon', }, { - _status: 'critical', + _barColor: '#0000FF', + _status: 'bar', gender: 'Female', name: 'Ray', ship: 'M. Falcon', }, { - _status: 'info', + _barColor: 'var(--c_subOneMain)', + _status: 'bar', gender: 'Male', name: 'Yoda', ship: '', }, { - _status: 'info', + _barColor: 'var(--c_subFourMain)', + _status: 'bar', gender: 'Male', - name: 'Yoda', + name: 'Palpatine', ship: '', }, ]; diff --git a/dev-app/routes/components/tile/properties/index.html b/dev-app/routes/components/tile/properties/index.html index 061f0226..01d904db 100644 --- a/dev-app/routes/components/tile/properties/index.html +++ b/dev-app/routes/components/tile/properties/index.html @@ -20,11 +20,11 @@ - - - - - + + + + + diff --git a/dev-app/routes/components/tile/properties/index.ts b/dev-app/routes/components/tile/properties/index.ts index 91f0d410..82792251 100644 --- a/dev-app/routes/components/tile/properties/index.ts +++ b/dev-app/routes/components/tile/properties/index.ts @@ -35,6 +35,11 @@ export class TileProperties { name: 'check-value', value: '', }, + { + description: 'Set the colored bar at the top of the tile. Status will override this.', + name: 'color', + value: 'CSS Color', + }, { default: 'true', description: 'Set if you do not need the hover animation on the tile.', @@ -106,7 +111,7 @@ export class TileProperties { { description: 'This adds a colors bar on the tile.', name: 'status', - value: 'processing | healthy | info | warning | error', + value: 'processing', }, { default: 'actions', diff --git a/dev-app/routes/components/type/p/index.html b/dev-app/routes/components/type/p/index.html index d14cb4c6..72af0e25 100644 --- a/dev-app/routes/components/type/p/index.html +++ b/dev-app/routes/components/type/p/index.html @@ -90,7 +90,7 @@ truncate - This is truncated text. It does this because the text is really long. + This is truncated text. It does this because the text is really long. This is truncated text. It does this because the text is really long. This is truncated text. It does this because the text is really long. This is truncated text. It does this because the text is really long. diff --git a/dev-app/routes/components/type/p/index.ts b/dev-app/routes/components/type/p/index.ts index bac23656..79734b5e 100644 --- a/dev-app/routes/components/type/p/index.ts +++ b/dev-app/routes/components/type/p/index.ts @@ -39,7 +39,7 @@ export class P { default: 'var(--c_smoke)', description: 'Set the color on a

    tag.', name: 'color', - value: 'Any color value. It is advised that you use the Core Color CSS Properties.', + value: 'CSS Color', }, { default: 'true', diff --git a/dev-app/routes/components/utilities/status/index.html b/dev-app/routes/components/utilities/status/index.html index b6fc7044..d376eec7 100644 --- a/dev-app/routes/components/utilities/status/index.html +++ b/dev-app/routes/components/utilities/status/index.html @@ -18,11 +18,34 @@ example - - - - - + + + + + diff --git a/dev-app/routes/components/utilities/status/index.ts b/dev-app/routes/components/utilities/status/index.ts index 0f142096..fe1d8680 100644 --- a/dev-app/routes/components/utilities/status/index.ts +++ b/dev-app/routes/components/utilities/status/index.ts @@ -23,18 +23,30 @@ export class Status { }, { _class: 'monospaced', - colClass: 't120', + colClass: 't190', colHeadName: 'default', colHeadValue: 'Default', }, ]; public statusProperties = [ + { + default: 'var(--c_secondaryMain)', + description: 'Set the color of the dot', + name: 'color', + value: 'CSS Color', + }, { description: 'Set to a URL to go to if clicked.', name: 'href', value: 'string', }, + { + default: 'slow', + description: 'Set the speed of the pulse', + name: 'pulse-speed', + value: 'slow | medium | fast', + }, { default: 'auto', description: @@ -43,12 +55,6 @@ export class Status { name: 'max-width', value: 'string', }, - { - default: 'healthy', - description: 'Set to change the colored dot. None will give you no dot at all.', - name: 'state', - value: 'healthy | info | warning | crticial | none', - }, { default: 'false', description: 'Set if you want the click to open a new window.', diff --git a/dev-app/routes/layouts/cluster/index.html b/dev-app/routes/layouts/cluster/index.html index 0f9b96f7..f10a2cb7 100644 --- a/dev-app/routes/layouts/cluster/index.html +++ b/dev-app/routes/layouts/cluster/index.html @@ -249,7 +249,6 @@ A really long title here that will truncate when it hits the end of the window and all that diff --git a/package-lock.json b/package-lock.json index 6f0a4a22..e919e496 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bindable-ui/bindable", - "version": "1.0.26", + "version": "1.0.27", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c942ee6f..07e7c33b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bindable-ui/bindable", "description": "An Aurelia component library", - "version": "1.0.26", + "version": "1.0.27", "repository": { "type": "git", "url": "https://github.com/bindable-ui/bindable" diff --git a/src/components/forms/text/c-form-text/c-form-text.ts b/src/components/forms/text/c-form-text/c-form-text.ts index c67a2a5b..ceaf05d1 100644 --- a/src/components/forms/text/c-form-text/c-form-text.ts +++ b/src/components/forms/text/c-form-text/c-form-text.ts @@ -37,7 +37,7 @@ export class CFormText { @bindable public labelIcon; @bindable - public labelIconColor = 'lightGray'; + public labelIconColor = 'var(--c_lightGray)'; @bindable public placeholder; @bindable diff --git a/src/components/icons/c-icon/c-icon.css b/src/components/icons/c-icon/c-icon.css index 3a889ccf..8d6fd427 100644 --- a/src/components/icons/c-icon/c-icon.css +++ b/src/components/icons/c-icon/c-icon.css @@ -9,8 +9,8 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project /** * BASE - * COLORS * SIZE + * ACTION */ @@ -23,50 +23,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project .icon{ vertical-align: middle; -} - - - - - -/*------------------------------------*\ - !COLORS -\*------------------------------------*/ - -.white{ - fill: var(--c_white); -} - -.light-gray{ - fill: var(--c_lightGray); -} - -.gray{ - fill: var(--c_gray); -} - -.charcoal{ - fill: var(--c_charcoal); -} - -.primary{ - fill: var(--c_primaryMain); -} - -.primary-light{ - fill: var(--c_primaryLight); -} - -.secondary{ - fill: var(--c_secondaryMain); -} - -.sub-one{ - fill: var(--c_subOneMain); -} - -.sub-two{ - fill: var(--c_subTwoMain); + fill: var(--icon-color); } diff --git a/src/components/icons/c-icon/c-icon.html b/src/components/icons/c-icon/c-icon.html index 04a5a353..abc6673d 100644 --- a/src/components/icons/c-icon/c-icon.html +++ b/src/components/icons/c-icon/c-icon.html @@ -9,11 +9,11 @@ diff --git a/src/components/icons/c-icon/c-icon.test.ts b/src/components/icons/c-icon/c-icon.test.ts index b55c24e0..f6c0257c 100644 --- a/src/components/icons/c-icon/c-icon.test.ts +++ b/src/components/icons/c-icon/c-icon.test.ts @@ -69,34 +69,6 @@ describe('c-icon component', () => { } }); - const existingColorClasses = [ - 'white', - 'light-gray', - 'gray', - 'primary', - 'primary-light', - 'secondary', - 'sub-one', - 'sub-two', - ]; - existingColorClasses.forEach(color => { - it(`css class ${color}`, async done => { - component = StageComponent.withResources() - .inView('') - .boundTo({ - customColor: `${color}`, - }); - - try { - await bootStrapEnvironment(component); - expect(component.viewModel.styles[component.viewModel.color]).not.toBe(undefined); - done(); - } catch (e) { - done.fail(e); - } - }); - }); - const existingSizesClasses = ['tiny', 'small', 'medium', 'large', 'huge']; existingSizesClasses.forEach(size => { it(`css class: ${size}`, async done => { diff --git a/src/components/icons/c-icon/c-icon.ts b/src/components/icons/c-icon/c-icon.ts index 5583b04a..4c96c728 100644 --- a/src/components/icons/c-icon/c-icon.ts +++ b/src/components/icons/c-icon/c-icon.ts @@ -11,7 +11,7 @@ export class CIcon { @bindable public action; @bindable - public color = 'lightGray'; + public color = 'var(--c_lightGray)'; @bindable public icon; @bindable diff --git a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.ts b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.ts index c4bb3a1b..3897e79e 100644 --- a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.ts +++ b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.ts @@ -18,7 +18,7 @@ export class CNavHorizontalItem { @bindable public icon = false; @bindable - public iconColor = 'primaryLight'; + public iconColor = 'var(--c_primaryLight)'; @bindable public position; @bindable diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.css b/src/components/navs/c-nav-horizontal/c-nav-horizontal.css index 6ba77fc5..1427c8de 100644 --- a/src/components/navs/c-nav-horizontal/c-nav-horizontal.css +++ b/src/components/navs/c-nav-horizontal/c-nav-horizontal.css @@ -29,7 +29,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project \*------------------------------------*/ .nav-horizontal{ - background-color: var(--c_darkGray); + background-color: var(--nav-background-color); } .nav-horizontal ul{ diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html index 41688bed..2218e0e7 100644 --- a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html +++ b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html @@ -11,6 +11,7 @@ ${styles.navHorizontal} ${styles[size]} " + css="--nav-background-color: ${backgroundColor}" hide.bind="state === 'hidden'" >