bindable-ui · lukelarsen · Apr 15, 2020 · Mar 19, 2020 · Mar 20, 2020 · Apr 6, 2020
diff --git a/dev-app/app.html b/dev-app/app.html
@@ -24,7 +24,7 @@
                         state="${link.isActive ? 'active' : ''}"
                     >
                     </c-nav-horizontal-item>
-                    <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.26"></c-nav-horizontal-item>
+                    <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.27"></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>
         </l-sidebar>

diff --git a/dev-app/routes/components/forms/text/properties/index.html b/dev-app/routes/components/forms/text/properties/index.html
@@ -20,7 +20,7 @@
                 <c-code-sample>
                     <l-grid min-size="25ch">
                         <c-form-text text-value.bind="vFormTextOutput" label="Label Text" placeholder="Placeholder Text"></c-form-text>
-                        <c-form-text text-value.bind="vFormTextOutput" label="Label Icon" label-icon="time" placeholder="Placeholder Text"></c-form-text>
+                        <c-form-text text-value.bind="vFormTextOutput" label="Label Icon" label-icon="time" label-icon-color="var(--c_primaryLight)" placeholder="Placeholder Text"></c-form-text>
                         <c-form-text placeholder="No Label" align-input.bind="true"></c-form-text>
                         <c-form-text placeholder="No Label"></c-form-text>
                     </l-grid>

diff --git a/dev-app/routes/components/icon/methods/index.html b/dev-app/routes/components/icon/methods/index.html
@@ -18,7 +18,7 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>action</c-h3>
                 <c-code-sample>
-                    <c-icon icon="info" spacing-right="srSmall" action.call="testFunction()"></c-icon>
+                    <c-icon icon="info" action.call="testFunction()"></c-icon>
                 </c-code-sample>
             </l-stack>
         </div>

diff --git a/dev-app/routes/components/icon/properties/index.html b/dev-app/routes/components/icon/properties/index.html
@@ -19,14 +19,11 @@
                 <c-h3>color</c-h3>
                 <c-code-sample>
                     <c-icon icon="warning" color="white"></c-icon>
-                    <c-icon icon="warning" color="lightGray"></c-icon>
-                    <c-icon icon="warning" color="gray"></c-icon>
-                    <c-icon icon="warning" color="charcoal"></c-icon>
-                    <c-icon icon="warning" color="primary"></c-icon>
-                    <c-icon icon="warning" color="primaryLight"></c-icon>
-                    <c-icon icon="warning" color="secondary"></c-icon>
-                    <c-icon icon="warning" color="subOne"></c-icon>
-                    <c-icon icon="warning" color="subTwo"></c-icon>
+                    <c-icon icon="warning" color="var(--c_lightGray)"></c-icon>
+                    <c-icon icon="warning" color="var(--c_gray)"></c-icon>
+                    <c-icon icon="warning" color="var(--c_primaryLight)"></c-icon>
+                    <c-icon icon="warning" color="var(--c_secondaryMain)"></c-icon>
+                    <c-icon icon="warning" color="teal"></c-icon>
                 </c-code-sample>
             </l-stack>
         </div>

diff --git a/dev-app/routes/components/icon/properties/index.ts b/dev-app/routes/components/icon/properties/index.ts
@@ -22,24 +22,24 @@ export class IconProperties {
         },
         {
             _class: 'monospaced',
-            colClass: 't120',
+            colClass: 't190',
             colHeadName: 'default',
             colHeadValue: 'Default',
         },
     ];
 
     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
@@ -36,7 +36,7 @@
                     <c-nav-horizontal size="small">
                         <c-nav-horizontal-item title="Nav Link 1" href="http://google.com"></c-nav-horizontal-item>
                         <c-nav-horizontal-item icon="warning" title="Nav Link 2" href="http://google.com"></c-nav-horizontal-item>
-                        <c-nav-horizontal-item icon="checkmark" icon-color="secondary" title="Nav Link 3" href="http://google.com"></c-nav-horizontal-item>
+                        <c-nav-horizontal-item icon="checkmark" icon-color="var(--c_secondaryMain)" title="Nav Link 3" href="http://google.com"></c-nav-horizontal-item>
                     </c-nav-horizontal>
                 </c-code-sample>
             </l-stack>

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
@@ -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
@@ -47,5 +47,19 @@
                 </c-code-sample>
             </l-stack>
         </div>
+
+        <c-divider></c-divider>
+
+        <div>
+            <l-stack spacing="var(--s-3)">
+                <c-h3>background-color</c-h3>
+                <c-code-sample>
+                    <c-nav-horizontal background-color="var(--c_black)">
+                        <c-nav-horizontal-item title="Nav Link 1" href="http://google.com"></c-nav-horizontal-item>
+                        <c-nav-horizontal-item title="Nav Link 2" href="http://google.com"></c-nav-horizontal-item>
+                    </c-nav-horizontal>
+                </c-code-sample>
+            </l-stack>
+        </div>
     </l-stack>
 </template>
diff --git 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
@@ -26,7 +26,7 @@
                                     Pill with no link
                                 </span>
                             </c-pill>
-                            <c-pill color="neutral" href="http://google.com">
+                            <c-pill color="purple" href="http://google.com">
                                 <span slot="pill-link-content">
                                     Pill link
                                 </span>
@@ -46,7 +46,7 @@
                     <c-pill icon="x" icon-action.call="testFunction()">
                         <span slot="pill-content">I have an icon</span>
                     </c-pill>
-                    <c-pill color="neutral" href="http://google.com" icon="x" icon-action.call="testFunction()">
+                    <c-pill color="var(--c_charcoal)" href="http://google.com" icon="x" icon-action.call="testFunction()">
                         <span slot="pill-link-content">
                             Pill link
                         </span>

diff --git a/dev-app/routes/components/pill/properties/index.ts b/dev-app/routes/components/pill/properties/index.ts
@@ -24,18 +24,18 @@ export class PillProperties {
         },
         {
             _class: 'monospaced',
-            colClass: 't120',
+            colClass: 't175',
             colHeadName: 'default',
             colHeadValue: 'Default',
         },
     ];
 
     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
@@ -18,20 +18,16 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>actions</c-h3>
                 <c-notification type="info">
-                    Pass in callbacks for c-table. These include:<br/>getRowClass - Assigns class to a tr<br/>getColClass - Assigns class to a td<br><br>
+                    Pass in callbacks for c-table. These include:<br/>getRowClass - Assigns class to a tr<br/>getColClass - Assigns class to a td<br/>getBarColor - Sets the bar color of a row. Can be any CSS Color.<br><br>
                     Available classes to assign:
                     <c-list>
                         <li>bgHealthy</li>
                         <li>bgWarning</li>
                         <li>bgCritical</li>
                         <li>bgInfo</li>
                         <li>bgProcess</li>
-                        <li>healthy</li>
-                        <li>info</li>
                         <li>notAllowed</li>
-                        <li>warning</li>
-                        <li>critical</li>
-                        <li>neutral</li>
+                        <li>bar</li>
                     </c-list>
                 </c-notification>
     <c-code>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: '',
         },
     ];
 }</c-code>
@@ -122,6 +131,11 @@
         }
         return cls;
     },
+
+    getBarColor: (row, col) => {
+        const color = row._barColor || '';
+        return color;
+    },
 };</c-code>
     <c-code-sample>
         <c-table hover.bind="true" actions.bind="tableActionsSample1" cols.bind="basicCols" rows.bind="basicData"></c-table>

diff --git 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
@@ -20,11 +20,11 @@
                 <c-code-sample>
                     <l-grid>
                         <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" status="processing" title="Processing Tile"></c-tile>
-                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" status="healthy" title="Title here that is really long so we can see the title truncate and all that n stuff."></c-tile>
-                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" status="info" title="Info Tile"></c-tile>
-                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" status="warning" title="Title wraps but no truncate"></c-tile>
-                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" status="error" title="aklsdlauneackakjbcnlakjeuybljahbdkfjahbskjbcakjehsb" title-icon="time" show-tip.bind="true" tip-icon="info">
-                            <template replace-part="tip-content">Content that replaces the default.</template>
+                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" color="var(--c_secondaryMain)" title="Title here that is really long so we can see the title truncate and all that n stuff."></c-tile>
+                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" color="var(--c_subOneMain)" title="Info Tile"></c-tile>
+                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" color="var(--c_subTwoMain)" title="Title wraps but no truncate"></c-tile>
+                        <c-tile image-url="https://placeimg.com/160/200/any" image-container-height.bind="200" color="#FF0000" title="aklsdlauneackakjbcnlakjeuybljahbdkfjahbskjbcakjehsb" title-icon="time" show-tip.bind="true" tip-icon="info">
+                            <template replace-part="tip-content"><c-p color="var(--c_white)">Content that replaces the default.</c-p></template>
                         </c-tile>
                         <c-tile image-url="https://placeimg.com/150/200/any" image-container-height.bind="200" title="Drag Icon" message="Hover Me" show-drag.bind="true"></c-tile>
                         <c-tile image-url="https://placeimg.com/150/100/any" image-container-height.bind="100" title="Smaller Image"></c-tile>

diff --git 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
@@ -90,7 +90,7 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>truncate</c-h3>
                 <c-code-sample>
-                    <c-p truncate.bind="true">This is truncated text. It does this because the text is really long.</c-p>
+                    <c-p truncate.bind="true">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.</c-p>
                 </c-code-sample>
             </l-stack>
         </div>

diff --git 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 <p> tag.',
             name: 'color',
-            value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
+            value: 'CSS Color',
         },
         {
             default: 'true',