[v0.4.0]: Progress bar and button changes

Changed:
- Generalized button states

Added:
- Buttons in system colors
- Progress bars
  - Default color
  - Primary color
  - Accent color
  - System colors
  - Sizes: XS, S, M, L, XL

CHANGELOG

@@ -5,9 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [Released]
 
-## [0.3.0] - 2023-03-27
+## [0.4.0] - 2023-04-29
+
+### Changed
+
+- Generalized button states
+
+### Added
+
+- Buttons in system colors
+- Progress bars
+  - Default color
+  - Primary color
+  - Accent color
+  - System colors
+  - Sizes: XS, S, M, L, XL
+
+## [0.3.0] - 2023-04-27
 
 ### Changed
 

css/components/buttons.css

@@ -10,8 +10,11 @@ button {
     transition: var(--transition-duration);
 }
 
-button:hover {
-    cursor: pointer;
+button:hover { cursor: pointer;}
+button:disabled { cursor: not-allowed;}
+button:focus {
+    outline-color: transparent;
+    outline-style: solid;
 }
 
 /* Button sizes */
@@ -43,18 +46,9 @@ button:hover {
 .button-primary { background-color: var(--primary);}
 .button-primary:hover { background-color: var(--primary-60);}
 .button-primary:active { background-color: var(--primary-40);}
-.button-primary:focus {
-    box-shadow: 0 0 0 3px var(--primary-80);
-    outline-color: transparent;
-    outline-style: solid;
-}
-.button-primary:disabled {
-    background-color: var(--primary-80);
-}
-.button-primary:disabled:hover {
-    background-color: var(--primary-80);
-    cursor: not-allowed;
-}
+.button-primary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
+.button-primary:disabled { background-color: var(--primary-80);}
+.button-primary:disabled:hover { background-color: var(--primary-80);}
 
 /* secondary button */
 .button-secondary { 
@@ -63,34 +57,56 @@ button:hover {
     background-color: transparent;
     color: var(--primary);
 }
-.button-secondary:hover { background-color: var(--primary-60);}
-.button-secondary:active { background-color: var(--primary-40);}
-.button-secondary:focus {
-    box-shadow: 0 0 0 3px var(--primary-80);
-    outline-color: transparent;
-    outline-style: solid;
-}
-.button-secondary:disabled {
-    background-color: var(--primary-80);
+
+.button-secondary:hover { 
+    color: var(--text-button);
+    background-color: var(--primary-60);
+    border: 3px solid var(--primary-60);
 }
-.button-secondary:disabled:hover {
-    background-color: var(--primary-l-80);
-    cursor: not-allowed;
+.button-secondary:active { background-color: var(--primary-40);}
+.button-secondary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
+.button-secondary:disabled { 
+    border: 3px solid var(--primary-80);
+    color: var(--primary-80);
 }
+.button-secondary:disabled:hover { background-color: var(--primary-80);}
 
 /* CTA button */
-.button-cta { background-color: var(--accent-50);}
+.button-cta { background-color: var(--accent);}
 .button-cta:hover { background-color: var(--accent-60);}
 .button-cta:active { background-color: var(--accent-40);}
-.button-cta:focus {
-    box-shadow: 0 0 0 3px var(--accent-80);
-    outline-color: transparent;
-    outline-style: solid;
-}
-.button-cta:disabled {
-    background-color: var(--accent-80);
-}
-.button-cta:disabled:hover {
-    background-color: var(--accent-80);
-    cursor: not-allowed;
-}
+.button-cta:focus { box-shadow: 0 0 0 3px var(--accent-80);}
+.button-cta:disabled { background-color: var(--accent-80);}
+.button-cta:disabled:hover { background-color: var(--accent-80);}
+
+/* Information button */
+.button-info { background-color: var(--info);}
+.button-info:hover { background-color: var(--info-60);}
+.button-info:active { background-color: var(--info-40);}
+.button-info:focus { box-shadow: 0 0 0 3px var(--info-80);}
+.button-info:disabled { background-color: var(--info-80);}
+.button-info:disabled:hover { background-color: var(--info-80);}
+
+/* Success button */
+.button-success { background-color: var(--success);}
+.button-success:hover { background-color: var(--success-60);}
+.button-success:active { background-color: var(--success-40);}
+.button-success:focus { box-shadow: 0 0 0 3px var(--success-80);}
+.button-success:disabled { background-color: var(--success-80);}
+.button-success:disabled:hover { background-color: var(--success-80);}
+
+/* Warning button */
+.button-warning { background-color: var(--warning);}
+.button-warning:hover { background-color: var(--warning-60);}
+.button-warning:active { background-color: var(--warning-40);}
+.button-warning:focus { box-shadow: 0 0 0 3px var(--warning-80);}
+.button-warning:disabled { background-color: var(--warning-80);}
+.button-warning:disabled:hover {background-color: var(--warning-80);}
+
+/* Error button */
+.button-error { background-color: var(--error);}
+.button-error:hover { background-color: var(--error-60);}
+.button-error:active { background-color: var(--error-40);}
+.button-error:focus { box-shadow: 0 0 0 3px var(--error-80);}
+.button-error:disabled { background-color: var(--error-80);}
+.button-error:disabled:hover { background-color: var(--error-80);}

css/components/progress.css

@@ -0,0 +1,58 @@
+/* Default progress bar */
+.progress {
+    position: relative;
+    width: 25rem;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--background);
+    border-radius: var(--rounded-m);
+    background-color: var(--background-light);
+}
+
+.progress .progress-bar {
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 100%;
+    border-radius: var(--rounded-m);
+    background-color: var(--background);
+    z-index: 200;
+}
+
+/* Colors */
+/* Primary */
+.progress-primary > .progress-bar { background-color: var(--primary);}
+
+/* Accent */
+.progress-accent > .progress-bar { background-color: var(--accent);}
+
+/* Information */
+.progress-info > .progress-bar { background-color: var(--info);}
+
+/* Success */
+.progress-success > .progress-bar { background-color: var(--success);}
+
+/* Warning */
+.progress-warning > .progress-bar { background-color: var(--warning);}
+
+/* Error */
+.progress-error > .progress-bar { background-color: var(--error);}
+
+/* Sizes */
+/* Progress bar XS */
+.progress-xs { height: .5rem;}
+
+/* Progress bar S */
+.progress-s { height: 1rem;}
+
+/* Progress bar M */
+.progress-m { height: 2rem;}
+
+/* Progress bar L */
+.progress-l { height: 2.5rem;}
+
+/* Progress bar XL */
+.progress-xl { height: 3rem;}

examamples/components/example_badges.html

@@ -15,50 +15,52 @@
         <title>Badges | Neptune examples</title>
     </head>
     <body>
-        <h3 class="example-title">Default badges</h3>
+        <h1 class="main-headline">Badges</h1>
+
         <div class="example-box">
+            <h3 class="example-title">Default badges</h3>
             <span class="badge badge-s">Default S</span>
             <span class="badge badge-m">Default M</span>
             <span class="badge badge-l">Default L</span>
         </div>
 
-        <h3 class="example-title">Primary badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Primary badges</h3>
             <span class="badge badge-primary badge-s">Primary S</span>
             <span class="badge badge-primary badge-m">Primary M</span>
             <span class="badge badge-primary badge-l">Primary L</span>
         </div>
 
-        <h3 class="example-title">Accent badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Accent badges</h3>
             <span class="badge badge-accent badge-s">Accent S</span>
             <span class="badge badge-accent badge-m">Accent M</span>
             <span class="badge badge-accent badge-l">Accent L</span>
         </div>
 
-        <h3 class="example-title">Information badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Information badges</h3>
             <span class="badge badge-info badge-s">Information S</span>
             <span class="badge badge-info badge-m">Information M</span>
             <span class="badge badge-info badge-l">Information L</span>
         </div>
 
-        <h3 class="example-title">Success badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Success badges</h3>
             <span class="badge badge-success badge-s">Sucess S</span>
             <span class="badge badge-success badge-m">Sucess M</span>
             <span class="badge badge-success badge-l">Sucess L</span>
         </div>
 
-        <h3 class="example-title">Warning badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Warning badges</h3>
             <span class="badge badge-warning badge-s">Warning S</span>
             <span class="badge badge-warning badge-m">Warning M</span>
             <span class="badge badge-warning badge-l">Warning L</span>
         </div>
 
-        <h3 class="example-title">Error badges</h3>
         <div class="example-box">
+            <h3 class="example-title">Error badges</h3>
             <span class="badge badge-error badge-s">Error S</span>
             <span class="badge badge-error badge-m">Error M</span>
             <span class="badge badge-error badge-l">Error L</span>

examamples/components/example_buttons.html

@@ -15,27 +15,62 @@
         <title>Buttons | Neptune examples</title>
     </head>
     <body id="body" data-scrollbar>
-        <h3 class="example-title">Primary button</h3>
         <div class="example-box">
+            <h3 class="example-title">Default button</h3>
+            <button class="button button-l">Default L</button>
+            <button class="button button-m">Default M</button>
+            <button class="button button-s">Default S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Primary button</h3>
             <button class="button-primary button-l">Primary L</button>
             <button class="button-primary button-m">Primary M</button>
             <button class="button-primary button-s">Primary S</button>
         </div>
 
-        <h3 class="example-title">Secondary button</h3>
         <div class="example-box">
+            <h3 class="example-title">Secondary button</h3>
             <button class="button-secondary button-l">Secondary L</button>
             <button class="button-secondary button-m">Secondary M</button>
             <button class="button-secondary button-s">Secondary S</button>
         </div>
 
-        <h3 class="example-title">CTA button</h3>
         <div class="example-box">
+            <h3 class="example-title">CTA button</h3>
             <button class="button-cta button-l">CTA L</button>
             <button class="button-cta button-m">CTA M</button>
             <button class="button-cta button-s">CTA S</button>
         </div>
 
+        <div class="example-box">
+            <h3 class="example-title">Information button</h3>
+            <button class="button-info button-l">Info L</button>
+            <button class="button-info button-m">Info M</button>
+            <button class="button-info button-s">Info S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Success button</h3>
+            <button class="button-success button-l">Success L</button>
+            <button class="button-success button-m">Success M</button>
+            <button class="button-success button-s">Success S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Warning button</h3>
+            <button class="button-warning button-l">Warning L</button>
+            <button class="button-warning button-m">Warning M</button>
+            <button class="button-warning button-s">Warning S</button>
+        </div>
+
+        <div class="example-box">
+            <h3 class="example-title">Error button</h3>
+            <button class="button-error button-l">Error L</button>
+            <button class="button-error button-m">Error M</button>
+            <button class="button-error button-s">Error S</button>
+        </div>
+
         <!-- Init scrollbar -->
         <script src="/node_modules/smooth-scrollbar/dist/smooth-scrollbar.js"></script>
         <div id="scrollbar"></div>