maverick-wave 3.3.0 → 3.3.2

package/src/partials/tags-container.html

@@ -43,11 +43,36 @@
 
       <!-- Secondary (Tools) -->
       <h5 class="mw-text-medium mw-mb-2">Secondary</h5>
-      <div class="mw-tags mw-tags-secondary">
+      <div class="mw-tags mw-tags-secondary mw-mb-4">
         <span class="mw-tags-item">Docker</span>
         <span class="mw-tags-item">Kubernetes</span>
         <span class="mw-tags-item">Git</span>
       </div>
+
+      <!-- Warning (Pending) -->
+      <h5 class="mw-text-medium mw-mb-2">Warning</h5>
+      <div class="mw-tags mw-tags-warning mw-mb-4">
+        <span class="mw-tags-item">
+          <i class="fas fa-clock mw-tags-icon"></i>Pending
+        </span>
+        <span class="mw-tags-item">Review</span>
+      </div>
+
+      <!-- Danger (Failed) -->
+      <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+      <div class="mw-tags mw-tags-danger mw-mb-4">
+        <span class="mw-tags-item">
+          <i class="fas fa-xmark mw-tags-icon"></i>Failed
+        </span>
+        <span class="mw-tags-item">Deprecated</span>
+      </div>
+
+      <!-- Muted (Neutral) -->
+      <h5 class="mw-text-medium mw-mb-2">Muted</h5>
+      <div class="mw-tags mw-tags-muted">
+        <span class="mw-tags-item">Draft</span>
+        <span class="mw-tags-item">Archived</span>
+      </div>
     </div>
   </div>
 
@@ -165,4 +190,33 @@
       </div>
     </div>
   </div>
+
+  <!-- COLUMN 4: Single tag -->
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Single Tag</h3>
+    <div class="mw-card mw-card-simple">
+      <p class="mw-text-muted mw-mb-4">
+        For a single status chip &ndash; e.g. in a table cell &ndash; use
+        <strong>mw-tag</strong>. It carries the colour itself, so no
+        <strong>mw-tags</strong> container is needed.
+      </p>
+
+      <h5 class="mw-text-medium mw-mb-2">Variants</h5>
+      <div class="mw-d-flex mw-flex-wrap mw-gap-2 mw-mb-4">
+        <span class="mw-tag mw-tag-primary">Primary</span>
+        <span class="mw-tag mw-tag-secondary">Secondary</span>
+        <span class="mw-tag mw-tag-success">Paid</span>
+        <span class="mw-tag mw-tag-info">Info</span>
+        <span class="mw-tag mw-tag-warning">Open</span>
+        <span class="mw-tag mw-tag-danger">Cancelled</span>
+        <span class="mw-tag mw-tag-muted">Draft</span>
+      </div>
+
+      <h5 class="mw-text-medium mw-mb-2">Large</h5>
+      <div class="mw-d-flex mw-flex-wrap mw-gap-2">
+        <span class="mw-tag mw-tag-success mw-tag-lg">Paid</span>
+        <span class="mw-tag mw-tag-muted mw-tag-lg">Draft</span>
+      </div>
+    </div>
+  </div>
 </div>

package/src/scss/abstracts/_index.scss

@@ -1,3 +1,6 @@
+// 'variables' first: it is the only configurable module, and both 'functions'
+// and 'mixins' load it themselves. Forwarding it later would mean it is
+// already loaded by the time a `with (...)` configuration reaches it.
+@forward 'variables';
 @forward 'functions';
 @forward 'mixins';
-@forward 'variables';

package/src/scss/abstracts/_variables.scss

@@ -1,135 +1,157 @@
-@use 'sass:map';
-@use 'sass:color';
+@use 'sass:string';
 
 $mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
 
 $mw-hero-image: url('https://images.unsplash.com/photo-1591638462868-19cfad9c49d1?q=80&w=1300&auto=format&fit=crop') !default;
 
-$primary-color: #1031bb;
-$secondary-color: #bb3110;
-$success-color: #28a745;
-$warning-color: #d4a310;
-$danger-color: #d72537;
-$info-color: #17a2b8;
-$gray-color: #565656;
-$dark-background: #0b111a;
-$dark-text-color: #d6dbdf;
-$light-background: #d2d1e1;
-$light-text-color: #1a1a1d;
-
-// Base colors that don't change between themes
+// ---------------------------------------------------------------------------
+// Root colors
+//
+// These are the only values a project has to set. Every other tone is derived
+// from them at runtime via color-mix(), so overriding a root token in plain
+// CSS (:root { --mw-primary-color: ... }) cascades to all of its variants.
+// ---------------------------------------------------------------------------
+$primary-color: #1031bb !default;
+$secondary-color: #bb3110 !default;
+// Darkened a little so light button text stays readable on the solid surface
+$success-color: #218838 !default;
+$warning-color: #d4a310 !default;
+// Darkened a little so light button text stays readable on the solid surface
+$danger-color: #c82333 !default;
+$info-color: #17a2b8 !default;
+$gray-color: #565656 !default;
+$dark-background: #0b111a !default;
+$dark-text-color: #d6dbdf !default;
+$light-background: #d2d1e1 !default;
+$light-text-color: #1a1a1d !default;
+// Form controls stay light in both themes, so they get their own root value
+$form-elements-background: #efefef !default;
+
+// ---------------------------------------------------------------------------
+// Derivation helpers
+//
+// They emit color-mix() referring back to another --mw-* token instead of
+// baking a value at compile time.
+//
+// shade()/tint() mix `in hsl`, which behaves like color.adjust($lightness: ...)
+// and scales proportionally, so a derivation looks the same on every palette.
+// Mixing with black/white also lowers the saturation a little — that is why
+// hover tones read slightly softer than the base color. Alpha blending uses
+// `srgb` against `transparent`.
+// ---------------------------------------------------------------------------
+
+// Reference another token as-is
+@function token($name) {
+  @return string.unquote('var(--mw-#{$name})');
+}
+
+// Translucent variant of a token ($amount = remaining opacity)
+@function fade($name, $amount) {
+  @return string.unquote(
+    'color-mix(in srgb, var(--mw-#{$name}) #{$amount}, transparent)'
+  );
+}
+
+// Darker, fully opaque variant of a token
+@function shade($name, $amount) {
+  @return string.unquote(
+    'color-mix(in hsl, var(--mw-#{$name}), black #{$amount})'
+  );
+}
+
+// Lighter, fully opaque variant of a token
+@function tint($name, $amount) {
+  @return string.unquote(
+    'color-mix(in hsl, var(--mw-#{$name}), white #{$amount})'
+  );
+}
+
+// Uniform hover tone for every solid brand/status surface
+$hover-shift: 18%;
+
+// Base colors that don't change between themes.
+// Emitted as --mw-<key>.
 $base-colors: (
   'primary-color': $primary-color,
-  'primary-color-hover': color.adjust(
-      $primary-color,
-      $lightness: -3%,
-      $alpha: -0.3
-    ),
-  'primary-background': color.adjust(
-      $primary-color,
-      $lightness: -8%,
-      $alpha: -0.8
-    ),
-  'primary-background-hover': color.adjust(
-      $primary-color,
-      $lightness: -4%,
-      $alpha: -0.5
-    ),
-  'primary-info-background': color.adjust(
-      $primary-color,
-      $lightness: -1%,
-      $alpha: -0.3
-    ),
-  'primary-text-color': $dark-text-color,
+  'primary-color-hover': shade('primary-color', $hover-shift),
+  'primary-background': fade('primary-color', 20%),
+  'primary-background-hover': fade('primary-color', 50%),
+  'primary-info-background': fade('primary-color', 70%),
   'secondary-color': $secondary-color,
-  'secondary-color-hover': color.adjust(
-      $secondary-color,
-      $lightness: -3%,
-      $alpha: -0.4
-    ),
-  'secondary-background': color.adjust(
-      $secondary-color,
-      $lightness: -8%,
-      $alpha: -0.8
-    ),
-  'secondary-background-hover': color.adjust(
-      $secondary-color,
-      $lightness: -3%,
-      $alpha: -0.6
-    ),
-  'secondary-info-background': color.adjust(
-      $secondary-color,
-      $lightness: -8%,
-      $alpha: -0.3
-    ),
-  'secondary-text-color': $dark-text-color,
+  'secondary-color-hover': shade('secondary-color', $hover-shift),
+  'secondary-background': fade('secondary-color', 20%),
+  'secondary-background-hover': fade('secondary-color', 40%),
+  'secondary-info-background': fade('secondary-color-hover', 70%),
+  // Translucent accent line used for dividers, rules and outlines
+  'border-accent': fade('primary-color', 70%),
+  // Text on any solid colored surface — buttons of every variant, table and
+  // panel headers, badges, stepper dots. Deliberately not derived from a brand
+  // color, so retuning the palette never drags it along.
+  'accent-text-color': token('dark-text-color'),
   'gray-color': $gray-color,
-  'white-color': $dark-text-color,
-  'gray-background': color.adjust($gray-color, $lightness: +5%, $alpha: -0.4),
-  'section-alternate-pattern': color.adjust($gray-color, $alpha: -0.55),
-  'form-elements-background': color.adjust($light-background, $lightness: +15%),
-  'form-elements-color': color.adjust($light-text-color, $lightness: -2%),
+  // Subtle neutral surface: zebra rows, disabled fields, tracks, skeletons
+  'gray-background': fade('gray-color', 20%),
+  // Heavy scrim behind modals and blocking spinners
+  'overlay-background': fade('gray-color', 60%),
+  'section-alternate-pattern': fade('gray-color', 45%),
+  'form-elements-background': $form-elements-background,
+  'form-elements-color': shade('light-text-color', 18%),
 );
 
+// Status colors. Every status offers the same four tones.
+// Emitted as --mw-<key>.
 $status-colors: (
   'success-color': $success-color,
-  'success-info-background': color.adjust(
-      $success-color,
-      $lightness: -9%,
-      $alpha: -0.1
-    ),
-  'success-info-background-hover': color.adjust(
-      $success-color,
-      $lightness: +4%,
-      $alpha: -0.3
-    ),
+  'success-color-hover': shade('success-color', $hover-shift),
+  'success-info-background': fade('success-color-hover', 90%),
+  'success-info-background-hover': fade('success-color', 70%),
   'warning-color': $warning-color,
-  'warning-info-background': color.adjust(
-      $warning-color,
-      $lightness: -9%,
-      $alpha: -0.1
-    ),
+  'warning-color-hover': shade('warning-color', $hover-shift),
+  'warning-info-background': fade('warning-color-hover', 90%),
+  'warning-info-background-hover': fade('warning-color', 70%),
   'danger-color': $danger-color,
-  'danger-info-background': color.adjust(
-      $danger-color,
-      $lightness: -9%,
-      $alpha: -0.1
-    ),
+  'danger-color-hover': shade('danger-color', $hover-shift),
+  'danger-info-background': fade('danger-color-hover', 90%),
+  'danger-info-background-hover': fade('danger-color', 70%),
   'info-color': $info-color,
-  'info-info-background': color.adjust(
-      $info-color,
-      $lightness: -9%,
-      $alpha: -0.1
-    ),
-  'info-info-background-hover': color.adjust(
-      $info-color,
-      $lightness: +4%,
-      $alpha: -0.3
-    ),
+  'info-color-hover': shade('info-color', $hover-shift),
+  'info-info-background': fade('info-color-hover', 90%),
+  'info-info-background-hover': fade('info-color', 70%),
 );
 
-// Dark theme colors
+// Dark theme colors. Emitted as --mw-dark-<key>, hence the prefixed references.
 $dark-theme-colors: (
   'page-background': $dark-background,
-  'hero-overlay-background': color.adjust($dark-background, $alpha: -0.7),
-  'card-background': color.adjust($dark-background, $lightness: +5%),
-  'footer-background': color.adjust($dark-background, $lightness: +3%),
-  'border': color.adjust($dark-background, $lightness: +15%),
-  'shadow': color.adjust($dark-text-color, $alpha: -0.7),
+  'hero-overlay-background': fade('dark-page-background', 30%),
+  'card-background': tint('dark-page-background', 5%),
+  'footer-background': tint('dark-page-background', 3%),
+  'border': tint('dark-page-background', 16%),
+  'shadow': fade('dark-text-color', 30%),
   'text-color': $dark-text-color,
-  'text-muted-color': color.adjust($dark-text-color, $lightness: -26%),
+  'text-muted-color': shade('dark-text-color', 30%),
 );
 
-// Light theme colors
+// Light theme colors. Emitted as --mw-light-<key>.
 $light-theme-colors: (
   'page-background': $light-background,
-  'hero-overlay-background': color.adjust($light-background, $alpha: -0.7),
-  'card-background': color.adjust($light-background, $lightness: +6%),
-  'footer-background': color.adjust($light-background, $lightness: -2%),
-  'border': color.adjust($light-background, $lightness: -13%),
-  'shadow': color.adjust($light-text-color, $alpha: -0.7),
+  'hero-overlay-background': fade('light-page-background', 30%),
+  'card-background': tint('light-page-background', 40%),
+  'footer-background': shade('light-page-background', 2%),
+  'border': shade('light-page-background', 15%),
+  'shadow': fade('light-text-color', 30%),
   'text-color': $light-text-color,
-  'text-muted-color': color.adjust($light-text-color, $lightness: +29%),
+  'text-muted-color': tint('light-text-color', 32%),
+);
+
+// Header/navbar colors. They stay dark in both themes but can be retuned on
+// their own. Emitted as --mw-header-<key>.
+$header-colors: (
+  'background': token('dark-footer-background'),
+  'text-color': token('dark-text-color'),
+  'navbar-list-color': token('dark-text-muted-color'),
+  'navbar-list-active-color': token('primary-color'),
+  'burgerbutton-color': token('dark-text-color'),
+  'border': token('border-accent'),
 );
 
 // Typography

package/src/scss/base/_base.scss

@@ -1,122 +1,40 @@
-@use 'sass:map';
 @use '../abstracts' as *;
 
+// Active theme set and its token prefix, derived from $mw-theme-mode
+$_active-theme: $dark-theme-colors;
+$_active-prefix: 'dark';
+
+@if $mw-theme-mode == 'light' {
+  $_active-theme: $light-theme-colors;
+  $_active-prefix: 'light';
+}
+
 // CSS Variables for theming and overriding
 :root {
-  // Base colors
-  --mw-primary-color: #{map.get($base-colors, 'primary-color')};
-  --mw-primary-color-hover: #{map.get($base-colors, 'primary-color-hover')};
-  --mw-primary-background: #{map.get($base-colors, 'primary-background')};
-  --mw-primary-background-hover: #{map.get(
-      $base-colors,
-      'primary-background-hover'
-    )};
-  --mw-primary-info-background: #{map.get(
-      $base-colors,
-      'primary-info-background'
-    )};
-  --mw-primary-text-color: #{map.get($base-colors, 'primary-text-color')};
-  --mw-secondary-color: #{map.get($base-colors, 'secondary-color')};
-  --mw-secondary-color-hover: #{map.get($base-colors, 'secondary-color-hover')};
-  --mw-secondary-background: #{map.get($base-colors, 'secondary-background')};
-  --mw-secondary-background-hover: #{map.get(
-      $base-colors,
-      'secondary-background-hover'
-    )};
-  --mw-secondary-info-background: #{map.get(
-      $base-colors,
-      'secondary-info-background'
-    )};
-  --mw-secondary-text-color: #{map.get($base-colors, 'secondary-text-color')};
-  --mw-white-color: #{map.get($base-colors, 'white-color')};
-  --mw-gray-color: #{map.get($base-colors, 'gray-color')};
-  --mw-gray-background: #{map.get($base-colors, 'gray-background')};
-  --mw-section-alternate-pattern: #{map.get(
-      $base-colors,
-      'section-alternate-pattern'
-    )};
-
-  // form
-  --mw-form-elements-background: #{map.get(
-      $base-colors,
-      'form-elements-background'
-    )};
-  --mw-form-elements-color: #{map.get($base-colors, 'form-elements-color')};
+  // Brand and neutral colors
+  @each $name, $value in $base-colors {
+    --mw-#{$name}: #{$value};
+  }
 
   // Status colors
-  --mw-success-color: #{map.get($status-colors, 'success-color')};
-  --mw-success-info-background: #{map.get(
-      $status-colors,
-      'success-info-background'
-    )};
-  --mw-success-info-background-hover: #{map.get(
-      $status-colors,
-      'success-info-background-hover'
-    )};
-  --mw-warning-color: #{map.get($status-colors, 'warning-color')};
-  --mw-warning-info-background: #{map.get(
-      $status-colors,
-      'warning-info-background'
-    )};
-  --mw-danger-color: #{map.get($status-colors, 'danger-color')};
-  --mw-danger-info-background: #{map.get(
-      $status-colors,
-      'danger-info-background'
-    )};
-  --mw-info-color: #{map.get($status-colors, 'info-color')};
-  --mw-info-info-background: #{map.get($status-colors, 'info-info-background')};
-  --mw-info-info-background-hover: #{map.get(
-      $status-colors,
-      'info-info-background-hover'
-    )};
+  @each $name, $value in $status-colors {
+    --mw-#{$name}: #{$value};
+  }
 
-  // Header/navbar colors (they are fixed, but you can change them separately)
-  --mw-header-background: #{map.get($dark-theme-colors, 'footer-background')};
-  --mw-header-navbar-list-color: #{map.get(
-      $dark-theme-colors,
-      'text-muted-color'
-    )};
-  --mw-header-navbar-list-active-color: #{map.get(
-      $base-colors,
-      'primary-color'
-    )};
-  --mw-header-burgerbutton-color: #{map.get($dark-theme-colors, 'text-color')};
-  --mw-header-border: #{map.get($base-colors, 'primary-color-hover')};
+  // Header/navbar colors (fixed across themes, but overridable on their own)
+  @each $name, $value in $header-colors {
+    --mw-header-#{$name}: #{$value};
+  }
 
   // Dark theme colors
-  --mw-dark-page-background: #{map.get($dark-theme-colors, 'page-background')};
-  --mw-dark-hero-overlay-background: #{map.get(
-      $dark-theme-colors,
-      'hero-overlay-background'
-    )};
-  --mw-dark-card-background: #{map.get($dark-theme-colors, 'card-background')};
-  --mw-dark-footer-background: #{map.get(
-      $dark-theme-colors,
-      'footer-background'
-    )};
-  --mw-dark-border: #{map.get($dark-theme-colors, 'border')};
-  --mw-dark-shadow: #{map.get($dark-theme-colors, 'shadow')};
-  --mw-dark-text-color: #{map.get($dark-theme-colors, 'text-color')};
-  --mw-dark-text-muted-color: #{map.get($dark-theme-colors, 'text-muted-color')};
+  @each $name, $value in $dark-theme-colors {
+    --mw-dark-#{$name}: #{$value};
+  }
 
   // Light theme colors
-  --mw-light-page-background: #{map.get($light-theme-colors, 'page-background')};
-  --mw-light-hero-overlay-background: #{map.get(
-      $light-theme-colors,
-      'hero-overlay-background'
-    )};
-  --mw-light-card-background: #{map.get($light-theme-colors, 'card-background')};
-  --mw-light-footer-background: #{map.get(
-      $light-theme-colors,
-      'footer-background'
-    )};
-  --mw-light-border: #{map.get($light-theme-colors, 'border')};
-  --mw-light-shadow: #{map.get($light-theme-colors, 'shadow')};
-  --mw-light-text-color: #{map.get($light-theme-colors, 'text-color')};
-  --mw-light-text-muted-color: #{map.get(
-      $light-theme-colors,
-      'text-muted-color'
-    )};
+  @each $name, $value in $light-theme-colors {
+    --mw-light-#{$name}: #{$value};
+  }
 
   // Transitions
   --mw-transition: #{$transition-default};
@@ -127,39 +45,17 @@
   // hero background image
   --mw-hero-background: #{$mw-hero-image};
 
-  @if $mw-theme-mode == 'dark' or $mw-theme-mode == 'switchable' {
-    // Dark theme variables
-    --mw-page-background: var(--mw-dark-page-background);
-    --mw-hero-overlay-background: var(--mw-dark-hero-overlay-background);
-    --mw-card-background: var(--mw-dark-card-background);
-    --mw-footer-background: var(--mw-dark-footer-background);
-    --mw-border: var(--mw-dark-border);
-    --mw-shadow: var(--mw-dark-shadow);
-    --mw-text-color: var(--mw-dark-text-color);
-    --mw-text-muted-color: var(--mw-dark-text-muted-color);
-  } @else {
-    // Light theme variables
-    --mw-page-background: var(--mw-light-page-background);
-    --mw-hero-overlay-background: var(--mw-light-hero-overlay-background);
-    --mw-card-background: var(--mw-light-card-background);
-    --mw-footer-background: var(--mw-light-footer-background);
-    --mw-border: var(--mw-light-border);
-    --mw-shadow: var(--mw-light-shadow);
-    --mw-text-color: var(--mw-light-text-color);
-    --mw-text-muted-color: var(--mw-light-text-muted-color);
+  // Active theme — aliases onto the dark or light set above
+  @each $name, $value in $_active-theme {
+    --mw-#{$name}: var(--mw-#{$_active-prefix}-#{$name});
   }
 }
 
 @if $mw-theme-mode == 'switchable' {
   .mw-theme-light {
     // Light theme variables for switching
-    --mw-page-background: var(--mw-light-page-background);
-    --mw-hero-overlay-background: var(--mw-light-hero-overlay-background);
-    --mw-card-background: var(--mw-light-card-background);
-    --mw-footer-background: var(--mw-light-footer-background);
-    --mw-border: var(--mw-light-border);
-    --mw-shadow: var(--mw-light-shadow);
-    --mw-text-color: var(--mw-light-text-color);
-    --mw-text-muted-color: var(--mw-light-text-muted-color);
+    @each $name, $value in $light-theme-colors {
+      --mw-#{$name}: var(--mw-light-#{$name});
+    }
   }
 }

package/src/scss/base/_reset.scss

@@ -72,7 +72,7 @@ td {
 
 th {
   background: var(--mw-primary-color);
-  color: var(--mw-primary-text-color);
+  color: var(--mw-accent-text-color);
 }
 
 tbody tr:nth-child(even) {

package/src/scss/base/_typography.scss

@@ -148,95 +148,3 @@ blockquote {
     right: spacing('4');
   }
 }
-
-// Text utilities
-.mw-text {
-  &-center {
-    text-align: center;
-  }
-
-  &-left {
-    text-align: left;
-  }
-
-  &-right {
-    text-align: right;
-  }
-
-  &-primary {
-    color: var(--mw-primary-color);
-  }
-
-  &-secondary {
-    color: var(--mw-secondary-color);
-  }
-
-  &-success {
-    color: var(--mw-success-color);
-  }
-
-  &-warning {
-    color: var(--mw-warning-color);
-  }
-
-  &-danger {
-    color: var(--mw-danger-color);
-  }
-
-  &-info {
-    color: var(--mw-info-color);
-  }
-
-  &-muted {
-    color: var(--mw-text-muted-color);
-  }
-
-  &-bold {
-    font-weight: font-weight('bold');
-  }
-
-  &-medium {
-    font-weight: font-weight('medium');
-  }
-
-  &-normal {
-    font-weight: font-weight('normal');
-  }
-
-  &-light {
-    font-weight: font-weight('light');
-  }
-
-  &-italic {
-    font-style: italic;
-  }
-
-  &-color-dark {
-    color: var(--mw-dark-text-color);
-  }
-
-  &-color-light {
-    color: var(--mw-light-text-color);
-  }
-
-  @each $name, $size in $font-sizes {
-    &-#{$name} {
-      font-size: $size;
-    }
-  }
-}
-
-// Line height utilities
-.mw-leading {
-  &-tight {
-    line-height: 1.2;
-  }
-
-  &-normal {
-    line-height: 1.5;
-  }
-
-  &-loose {
-    line-height: 1.8;
-  }
-}

package/src/scss/components/_accordions.scss

@@ -7,7 +7,7 @@
   margin: spacing('2');
 
   &-item {
-    border-bottom: 1px solid var(--mw-primary-color-hover);
+    border-bottom: 1px solid var(--mw-border-accent);
 
     &:last-child {
       border-bottom: none;
@@ -44,7 +44,7 @@
 
     &.active {
       background: var(--mw-primary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
 
       .mw-accordion-icon {
         transform: rotate(180deg);
@@ -61,7 +61,7 @@
 
     &-inner {
       padding: spacing('4');
-      border-top: 1px solid var(--mw-primary-color-hover);
+      border-top: 1px solid var(--mw-border-accent);
       @include media-down('sm') {
         font-size: font-size('sm');
       }