feat(colors): adds warning color

2026-03-13 10:22:08 +08:00 · 2017-12-14 12:09:03 -05:00
parent 8a6b3165c7
commit 6d32c361c7
16 changed files with 48 additions and 3 deletions
--- a/packages/core/src/components/badge/test/standalone/index.html
+++ b/packages/core/src/components/badge/test/standalone/index.html
@@ -11,8 +11,9 @@
 <body>
  <ion-badge color="primary">11</ion-badge>
  <ion-badge color="secondary">22</ion-badge>
-  <ion-badge color="danger">33</ion-badge>
-  <ion-badge color="light">44</ion-badge>
-  <ion-badge color="dark">55</ion-badge>
+  <ion-badge color="warning">33</ion-badge>
+  <ion-badge color="danger">44</ion-badge>
+  <ion-badge color="light">55</ion-badge>
+  <ion-badge color="dark">66a</ion-badge>
 </body>
 </html>
--- a/packages/core/src/components/button/test/anchor/index.html
+++ b/packages/core/src/components/button/test/anchor/index.html
@@ -28,6 +28,10 @@
            <ion-button href="#" color="secondary">Secondary</ion-button>
            <ion-button href="#" color="secondary" class="activated">Secondary.activated</ion-button>
          </p>
+          <p>
+            <ion-button href="#" color="warning">Warning</ion-button>
+            <ion-button href="#" color="warning" class="activated">Warning.activated</ion-button>
+          </p>
          <p>
            <ion-button href="#" color="danger">Danger</ion-button>
            <ion-button href="#" color="danger" class="activated">Danger.activated</ion-button>
--- a/packages/core/src/components/button/test/basic/index.html
+++ b/packages/core/src/components/button/test/basic/index.html
@@ -31,6 +31,11 @@
          <ion-button color="secondary" class="activated">Secondary.activated</ion-button>
        </p>

+        <p>
+          <ion-button color="warning">Warning</ion-button>
+          <ion-button color="warning" class="activated">Warning.activated</ion-button>
+        </p>
+
        <p>
          <ion-button color="danger">Danger</ion-button>
          <ion-button color="danger" class="activated">Danger.activated</ion-button>
--- a/packages/core/src/components/button/test/fill/index.html
+++ b/packages/core/src/components/button/test/fill/index.html
@@ -28,6 +28,10 @@
            <ion-button fill="outline" color="secondary">Secondary</ion-button>
            <ion-button fill="outline" color="secondary" class="activated">Secondary.activated</ion-button>
          </p>
+          <p>
+            <ion-button fill="outline" color="warning">Warning</ion-button>
+            <ion-button fill="outline" color="warning" class="activated">Warning.activated</ion-button>
+          </p>
          <p>
            <ion-button fill="outline" color="danger">Danger</ion-button>
            <ion-button fill="outline" color="danger" class="activated">Danger.activated</ion-button>
--- a/packages/core/src/components/button/test/round/index.html
+++ b/packages/core/src/components/button/test/round/index.html
@@ -19,12 +19,14 @@
        <ion-button round>Button</ion-button>
        <ion-button round color="light">Button Light</ion-button>
        <ion-button round color="secondary">Button Secondary</ion-button>
+        <ion-button round color="warning">Button Warning</ion-button>
        <ion-button round color="danger">Button Danger</ion-button>
        <ion-button round color="dark">Button Dark</ion-button>

        <ion-button fill="outline" round>Button</ion-button>
        <ion-button fill="outline" round color="light">Button Light</ion-button>
        <ion-button fill="outline" round color="secondary">Button Secondary</ion-button>
+        <ion-button fill="outline" round color="warning">Button Warning</ion-button>
        <ion-button fill="outline" round color="danger">Button Danger</ion-button>
        <ion-button fill="outline" round color="dark">Button Dark</ion-button>

--- a/packages/core/src/components/button/test/standalone/index.html
+++ b/packages/core/src/components/button/test/standalone/index.html
@@ -11,6 +11,7 @@
 <body>
  <ion-button color="primary">Primary</ion-button>
  <ion-button color="secondary">Secondary</ion-button>
+  <ion-button color="warning">Warning</ion-button>
  <ion-button color="danger">Danger</ion-button>
  <ion-button color="light">Light</ion-button>
  <ion-button color="dark">Dark</ion-button>
--- a/packages/core/src/components/checkbox/test/basic/index.html
+++ b/packages/core/src/components/checkbox/test/basic/index.html
@@ -28,6 +28,10 @@
          <ion-label>Secondary</ion-label>
          <ion-checkbox color="secondary" checked></ion-checkbox>
        </ion-item>
+        <ion-item>
+          <ion-label>Warning</ion-label>
+          <ion-checkbox color="warning" checked></ion-checkbox>
+        </ion-item>
        <ion-item>
          <ion-label>Danger</ion-label>
          <ion-checkbox color="danger" checked></ion-checkbox>
--- a/packages/core/src/components/checkbox/test/standalone/index.html
+++ b/packages/core/src/components/checkbox/test/standalone/index.html
@@ -12,6 +12,7 @@
  <ion-checkbox checked></ion-checkbox>
  <ion-checkbox color="primary" checked></ion-checkbox>
  <ion-checkbox color="secondary" checked></ion-checkbox>
+  <ion-checkbox color="warning" checked></ion-checkbox>
  <ion-checkbox color="danger" checked></ion-checkbox>
  <ion-checkbox color="dark" checked></ion-checkbox>
  <ion-checkbox color="light" checked></ion-checkbox>
--- a/packages/core/src/components/chip/readme.md
+++ b/packages/core/src/components/chip/readme.md
@@ -16,6 +16,10 @@ Chips represent complex entities in small blocks, such as a contact.
  <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>

+<ion-chip color="warning">
+  <ion-label>Warning</ion-label>
+</ion-chip>
+
 <ion-chip color="danger">
  <ion-label>Danger</ion-label>
 </ion-chip>
--- a/packages/core/src/components/chip/test/standalone/index.html
+++ b/packages/core/src/components/chip/test/standalone/index.html
@@ -30,6 +30,10 @@
    <ion-label color="dark">Secondary w/ Dark label</ion-label>
  </ion-chip>

+  <ion-chip color="warning">
+    <ion-label>Warning</ion-label>
+  </ion-chip>
+
  <ion-chip color="danger">
    <ion-label>Danger</ion-label>
  </ion-chip>
--- a/packages/core/src/components/searchbar/test/toolbar/index.html
+++ b/packages/core/src/components/searchbar/test/toolbar/index.html
@@ -47,6 +47,11 @@
          <ion-searchbar show-cancel-button></ion-searchbar>
        </ion-toolbar>

+        <h5 padding-left padding-top> Search - Warning Toolbar </h5>
+        <ion-toolbar color="warning">
+          <ion-searchbar></ion-searchbar>
+        </ion-toolbar>
+
        <h5 padding-left padding-top> Search - Dark Toolbar </h5>
        <ion-toolbar color="dark">
          <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
--- a/packages/core/src/components/toggle/test/standalone/index.html
+++ b/packages/core/src/components/toggle/test/standalone/index.html
@@ -13,6 +13,7 @@
  <ion-toggle color="secondary" (ionChange)="kiwiChange($event)" checked></ion-toggle>
  <ion-toggle color="danger" name="cherry" checked></ion-toggle>
  <ion-toggle color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+  <ion-toggle color="warning" checked></ion-toggle>
  <ion-toggle color="dark" checked></ion-toggle>
  <ion-toggle checked disabled></ion-toggle>
 </body>
--- a/packages/core/src/components/toolbar/test/standalone/index.html
+++ b/packages/core/src/components/toolbar/test/standalone/index.html
@@ -21,6 +21,10 @@
    <ion-title>Secondary</ion-title>
  </ion-toolbar>

+  <ion-toolbar color="warning">
+    <ion-title>Warning</ion-title>
+  </ion-toolbar>
+
  <ion-toolbar color="danger">
    <ion-title>Danger</ion-title>
  </ion-toolbar>
--- a/packages/core/src/components/toolbar/test/translucent/index.html
+++ b/packages/core/src/components/toolbar/test/translucent/index.html
@@ -25,6 +25,9 @@
        <ion-toolbar color="danger">
          <ion-title>Toolbar - Danger Translucent</ion-title>
        </ion-toolbar>
+        <ion-toolbar color="warning">
+          <ion-title>Toolbar - Warning Translucent</ion-title>
+        </ion-toolbar>
        <ion-toolbar color="dark">
          <ion-title>Toolbar - Dark Translucent</ion-title>
        </ion-toolbar>
--- a/packages/core/src/themes/ionic.theme.dark.scss
+++ b/packages/core/src/themes/ionic.theme.dark.scss
@@ -8,6 +8,7 @@ $colors: (

  primary:    #007aff,
  secondary:  #32db64,
+  warning:    #ffeb3b,
  danger:     #d91e18,
  light:      #f4f4f4,
  dark:       #222,
--- a/packages/core/src/themes/ionic.theme.default.scss
+++ b/packages/core/src/themes/ionic.theme.default.scss
@@ -8,6 +8,7 @@ $colors: (

  primary:    #488aff,
  secondary:  #32db64,
+  warning:    #ffeb3b,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,