adjust label styles, make label text mandatory

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a design library of components for use with VueJS. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "0.28.2",
+  "version": "0.29.0",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

src/app/views/presentation/label/Label.vue

@@ -15,15 +15,16 @@
           ></neon-label>
         </div>
       </div>
-      <h2>Icon only</h2>
+      <h2>Labels with icons</h2>
       <div class="collection">
         <div v-for="size in labelSizes" :key="`label-${size}-solid-icon-only`" class="neon-vertically-spaced">
           <neon-label
             v-for="color in colors"
             :key="`label-${color}-${size}-outline-with-icon`"
             :color="color"
             :size="size"
-            icon="check"
+            :label="color"
+            icon="lock"
           ></neon-label>
         </div>
       </div>

src/components/presentation/label/NeonLabel.ts

@@ -17,11 +17,11 @@ export default class NeonLabel extends Vue {
   /**
    * The label text
    */
-  @Prop()
-  public label?: TranslateResult;
+  @Prop({ required: true })
+  public label!: TranslateResult;
 
   /**
-   * The name of the label icon
+   * The name of the optional label icon
    */
   @Prop()
   public icon?: string;

src/sass/_label.scss

@@ -4,7 +4,7 @@
   &--xs {
     height: $size-xs - $base-space;
     min-width: $size-xs - $base-space;
-    font-size: $font-size-xs;
+    font-size: $font-size-xxs;
     padding: 0 $base-space;
 
     .neon-icon {
@@ -14,10 +14,10 @@
   }
 
   &--s {
-    height: $size-s;
-    min-width: $size-s;
+    height: $size-s - $base-space;
+    min-width: $size-s - $base-space;
 
-    font-size: $base-font-size;
+    font-size: $font-size-s;
 
     .neon-icon {
       width: $font-size-s;
@@ -33,10 +33,10 @@
   align-items: center;
   justify-content: center;
   user-select: none;
-  padding: 0 3 * $base-space;
+  padding: 0 2 * $base-space;
   min-width: fit-content;
   width: fit-content;
-  font-weight: 400;
+  font-weight: 600;
 
   &__label {
     white-space: nowrap;
@@ -50,12 +50,12 @@
 
     &.neon-label--with-label {
       &.neon-label--icon-left .neon-icon {
-        margin-right: 2 * $base-space;
+        margin-right: $base-space;
       }
 
       &.neon-label--icon-right .neon-icon {
         order: 1;
-        margin-left: 2 * $base-space;
+        margin-left: $base-space;
       }
     }
   }

themes/classic/theme.scss

@@ -4,8 +4,7 @@
 $color-brand: #5b0a9b !default;
 $color-primary: #3a9b79 !default;
 $color-info: #3c8eff !default;
-// $color-success: #3a9b79 !default;
-$color-success: #008d33 !default;
+$color-success: #3a9b79 !default;
 $color-warn: #ffb22a !default;
 $color-error: #ec4145 !default;
 
@@ -48,9 +47,12 @@ $border-style: solid !default;
 /* typography */
 $typography-scale: 1.15 !default;
 $base-font-size: 16px !default;
+
+$font-size-xxs: $base-font-size / ($typography-scale * $typography-scale * $typography-scale) !default;
 $font-size-xs: $base-font-size / ($typography-scale * $typography-scale) !default;
 $font-size-s: $base-font-size / $typography-scale !default;
 $font-size-l: $base-font-size * $typography-scale !default;
+
 $h6-size: $font-size-l !default;
 $h5-size: $h6-size * $typography-scale !default;
 $h4-size: $h5-size * $typography-scale !default;
@@ -60,13 +62,13 @@ $h1-size: $h2-size * $typography-scale !default;
 // AKA branding font size, used for landing page & banners etc...
 $h0-size: $h1-size * $typography-scale * $typography-scale !default;
 
-$h6-weight: 700 !default;
-$h5-weight: 700 !default;
-$h4-weight: 800 !default;
-$h3-weight: 800 !default;
-$h2-weight: 900 !default;
-$h1-weight: 900 !default;
-$h0-weight: 900 !default;
+$h6-weight: 500 !default;
+$h5-weight: 500 !default;
+$h4-weight: 600 !default;
+$h3-weight: 600 !default;
+$h2-weight: 700 !default;
+$h1-weight: 700 !default;
+$h0-weight: 700 !default;
 
 $line-height-headings-ratio: 1.125 !default;
 $line-height-ratio: 1.618 !default;