feat: checklist

package.json

@@ -7,9 +7,12 @@
     "test": "tests"
   },
   "scripts": {
-    "watch": "sass --watch --style compressed --source-map scss/styles.scss:css/styles.css",
+    "build": "npx prettier --write scss && sass --style compressed --source-map scss/styles.scss:css/styles.css",
     "lint:scss": "npx stylelint scss/**/*.scss",
     "lint-fix:scss": "npx stylelint --fix scss/**/*.scss",
+    "prettier": "npx prettier --write scss",
+    "prettier-check": "npx prettier --check scss",
+    "watch": "sass --watch --style compressed --source-map scss/styles.scss:css/styles.css",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

scss/_mixins.scss

@@ -6,4 +6,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

scss/_variables.scss

@@ -1 +1 @@
-$ua-prefix: "#update_assistant";
+$ua-prefix: "#update_assistant";

scss/components/_alert.scss

@@ -6,4 +6,4 @@ $e: ".alert";
   #{$e} {
     margin-block-end: 0;
   }
-}
+}

scss/components/_badge.scss

@@ -6,4 +6,4 @@ $e: ".badge";
   #{$e} {
     
   }
-} */
+} */

scss/components/_check-requirements.scss

@@ -7,7 +7,7 @@ $e: ".check-requirements";
   #{$e} {
     --ua-requirements-background-color: #f7f7f7;
     --ua-requirements-loader-color: #1d1d1b;
-    --ua-requirements-loader-dot-color: #5C92AA;
+    --ua-requirements-loader-dot-color: #5c92aa;
     margin-block-start: 0.5rem;
     padding: 1rem;
     background-color: var(--ua-requirements-background-color);
@@ -38,7 +38,7 @@ $e: ".check-requirements";
         display: block;
         width: 0.1875rem;
         height: 0.1875rem;
-        background: #5C92AA;
+        background: #5c92aa;
         border-radius: 50%;
         transform: translate(-50%, -100%);
       }
@@ -55,7 +55,7 @@ $e: ".check-requirements";
     &__message {
       margin-block-end: 1rem;
     }
-    
+
     &__list {
       display: flex;
       flex-direction: column;
@@ -74,7 +74,7 @@ $e: ".check-requirements";
       &--nok {
         background-image: url("../img/close.svg");
       }
-      
+
       &--warning {
         background-image: url("../img/warning.svg");
       }
@@ -83,5 +83,10 @@ $e: ".check-requirements";
         background-image: url("../img/check.svg");
       }
     }
+
+    &--success {
+      background-color: none;
+      padding: 0;
+    }
   }
 }

scss/components/_index.scss

@@ -3,4 +3,4 @@
 @use "check-requirements";
 @use "form";
 @use "radio-card";
-@use "typography";
+@use "typography";

scss/components/_radio-card.scss

@@ -4,44 +4,50 @@ $e: ".radio-card";
 
 #{$ua-prefix} {
   #{$e} {
-    --ua-radio-card-title-color: #1D1D1B;
-    --ua-radio-card-title-color-disabled: #BBBBBB;
-    --ua-radio-card-message-color: #5E5E5E;
-    --ua-radio-card-message-color-disabled: #BBBBBB;
-    --ua-radio-card-disabled-message-color: #FFFFFF;
-    --ua-radio-card-disabled-message-background-color: #1D1D1B;
+    --ua-radio-card-title-color: #1d1d1b;
+    --ua-radio-card-title-color-disabled: #bbbbbb;
+    --ua-radio-card-message-color: #5e5e5e;
+    --ua-radio-card-message-color-disabled: #bbbbbb;
+    --ua-radio-card-disabled-message-color: #ffffff;
+    --ua-radio-card-disabled-message-background-color: #1d1d1b;
     --ua-radio-card-border-radius: 0;
-    --ua-radio-card-border-color: #DDDDDD;
-    --ua-radio-card-border-color-hover: #1D1D1B;
+    --ua-radio-card-border-color: #dddddd;
+    --ua-radio-card-border-color-hover: #1d1d1b;
     --ua-radio-card-border-color-active: var(--ua-radio-card-border-color-hover);
-    --ua-radio-card-release-color: #1D1D1B;
-    --ua-radio-card-release-border-color: #DDDDDD;
-    --ua-radio-card-badge-color: #1D1D1B;
-    --ua-radio-card-badge-background-color: #D1DCFC;
+    --ua-radio-card-release-color: #1d1d1b;
+    --ua-radio-card-release-border-color: #dddddd;
+    --ua-radio-card-release-border-color-hover: var(--ua-radio-card-release-color);
+    --ua-radio-card-badge-color: #1d1d1b;
+    --ua-radio-card-badge-background-color: #f7f7f7;
+    --ua-radio-card-badge-border-color: #dddddd;
+    --ua-radio-card-badge-major-background-color: #f8f0f7;
+    --ua-radio-card-badge-major-border-color: #decde7;
+    --ua-radio-card-badge-minor-background-color: #e4f4f8;
+    --ua-radio-card-badge-minor-border-color: #a4dbe8;
     all: unset;
     display: flex;
     gap: 0.5rem;
     padding: 1rem;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
     border: 1px solid var(--ua-radio-card-border-color);
     border-radius: var(--ua-radio-card-border-radius);
     transition: border-color 0.15s;
-  
+
     &:not(#{$e}--disabled) {
       &:hover {
         border-color: var(--ua-radio-card-border-color-hover);
         cursor: pointer;
       }
     }
-  
+
     &:has(input[type="radio"]:checked) {
       border-color: var(--ua-radio-card-border-color-active);
     }
-  
+
     &__radio-wrapper {
       flex-shrink: 0;
     }
-    
+
     &__infos-wrapper {
       flex-grow: 1;
     }
@@ -53,7 +59,7 @@ $e: ".radio-card";
       align-items: center;
       justify-content: space-between;
     }
-    
+
     &__title {
       display: inline-flex;
       flex-wrap: wrap;
@@ -71,18 +77,29 @@ $e: ".radio-card";
       padding: 0.125rem 0.5rem;
       background-color: var(--ua-radio-card-badge-background-color);
       border-radius: 2rem;
-      font-size: 0.875rem;
+      font-size: 12px;
       font-weight: 500;
       color: var(--ua-radio-card-badge-color);
-      line-height: 1.4;
+      line-height: 1.5;
+      border: 0.0625rem solid var(--ua-radio-card-badge-border-color);
+
+      &--major {
+        background-color: var(--ua-radio-card-badge-major-background-color);
+        border-color: var(--ua-radio-card-badge-major-border-color);
+      }
+
+      &--minor {
+        background-color: var(--ua-radio-card-badge-minor-background-color);
+        border-color: var(--ua-radio-card-badge-minor-border-color);
+      }
     }
-    
+
     &__message {
       font-size: 0.875rem;
       margin-block: 0.5rem 0;
       color: var(--ua-radio-card-message-color);
     }
-    
+
     &__release-note {
       display: inline-flex;
       gap: 0.25rem;
@@ -93,11 +110,13 @@ $e: ".radio-card";
       line-height: 1.4;
       text-decoration: none;
       border-bottom: 1px solid var(--ua-radio-card-release-border-color);
-
+      transition: border-color 0.15s;
+
       &:hover {
         text-decoration: none;
+        border-color: var(--ua-radio-card-release-border-color-hover);
       }
-      
+
       i {
         font-size: 0.875rem;
       }
@@ -119,11 +138,11 @@ $e: ".radio-card";
     &__local-archive {
       padding-block-start: 0.5rem;
     }
-    
+
     &--disabled {
       position: relative;
       cursor: not-allowed;
-      
+
       #{$e}__title {
         color: var(--ua-radio-card-title-color-disabled);
       }

scss/components/_typography.scss

@@ -3,7 +3,7 @@
 #{$ua-prefix} {
   --ua-typography-color: #1d1d1b;
   --ua-link-color: #1d1d1b;
-  --ua-link-hover-color: #1d1d1b;
+  --ua-link-color-hover: #1d1d1b;
 
   h1,
   h2,
@@ -49,7 +49,7 @@
     transition: text-underline-offset 0.15s;
 
     &:hover {
-      color: var(--ua-link-hover-color);
+      color: var(--ua-link-color-hover);
       text-underline-offset: 0.25rem;
     }
   }

scss/components/form/_index.scss

@@ -1,2 +1,2 @@
 @use "form";
-@use "radio";
+@use "radio";

scss/components/form/_radio.scss

@@ -4,10 +4,10 @@ $e: ".radio";
 
 #{$ua-prefix} {
   #{$e} {
-    --ua-radio-border-color: #1D1D1B;
-    --ua-radio-background-color-checked: #1D1D1B;
-    --ua-radio-border-color-checked: #1D1D1B;
-    --ua-radio-border-color-disabled: #BBBBBB;
+    --ua-radio-border-color: #1d1d1b;
+    --ua-radio-background-color-checked: #1d1d1b;
+    --ua-radio-border-color-checked: #1d1d1b;
+    --ua-radio-border-color-disabled: #bbbbbb;
     position: relative;
     margin: 0;
     padding: 0;
@@ -22,13 +22,13 @@ $e: ".radio";
     line-height: 0;
     -webkit-appearance: none;
     cursor: pointer;
-  
+
     &:checked {
       padding: 3px;
       background-color: var(--ua-radio-background-color-checked);
       border: 2px solid var(--ua-radio-border-color-checked);
     }
-    
+
     &:disabled {
       border-color: var(--ua-radio-border-color-disabled);
     }