style(NcProgressBar): fix BEM naming, use correct variable, and update code style

Signed-off-by: nikhil2297 <nikhillohar2297@gmail.com>

Author: nikhil2297

src/components/NcProgressBar/NcProgressBar.vue

@@ -24,7 +24,7 @@ This is a simple progress bar component.
 		<NcProgressBar :value="60" size="medium" />
 		<br />
 		Custom size (changes the progress bar height)
-		<NcProgressBar :value="55" :size="8" showValue="true" />
+		<NcProgressBar :value="55" :size="8" showValue />
 	</span>
 </template>
 ```
@@ -162,14 +162,14 @@ const clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body
 				:cy="circleCenterPosition" />
 		</svg>
 	</span>
-	<div v-else class="progress-bar--container">
+	<div v-else class="progress-bar-container">
 		<progress
 			class="progress-bar progress-bar--linear vue"
 			:class="{ 'progress-bar--error': error }"
-			:value="value"
+			:value
 			max="100" />
 
-		<span v-if="showValue" class="progress-bar--value">{{ value }}%</span>
+		<span v-if="showValue" class="progress-bar__value">{{ value }}%</span>
 	</div>
 </template>
 
@@ -219,15 +219,15 @@ const clickableAreaSmall = Number.parseInt(window.getComputedStyle(document.body
 		}
 	}
 
-	&--container {
+	&-container {
 		display: flex;
 		align-items: center;
-		gap: 0.5em;
+		gap: calc(2 * var(--default-grid-baseline));
 	}
 
-	&--value {
-		font-size: var(--font-size-small, 0.875rem);
-		color: var(--color-text-secondary);
+	&__value {
+		font-size: var(--font-size-small, 13px);
+		color: var(--color-main-text);
 		font-variant-numeric: tabular-nums;
 		min-width: 4ch;
 		text-align: end;