@educarehq/solaris-ui 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@educarehq/solaris-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/styles/_button.scss

@@ -495,39 +495,44 @@
   );
 }
 
-[solaris-button][data-size='sm'] {
-  --solaris-button-gap: var(--solaris-spacing-1);
-  --solaris-button-height: var(--solaris-spacing-8);
-  --solaris-button-padding-x: var(--solaris-spacing-3);
+[solaris-button][data-density='compact'] {
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
   --solaris-button-padding-y: var(--solaris-spacing-1);
   --solaris-button-min-width: var(--solaris-spacing-16);
-  --solaris-button-icon-size: var(--solaris-font-size-sm);
-  --solaris-button-font-size: var(--solaris-font-size-sm);
+  --solaris-button-icon-size: var(--solaris-density-font-size);
+  --solaris-button-font-size: var(--solaris-density-font-size);
   --solaris-button-font-weight: var(--solaris-font-weight-medium);
 }
 
-[solaris-button][data-size='md'] {
-  --solaris-button-gap: var(--solaris-spacing-2);
-  --solaris-button-height: var(--solaris-spacing-10);
+[solaris-button][data-density='normal'] {
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
   --solaris-button-padding-y: var(--solaris-spacing-2);
-  --solaris-button-padding-x: var(--solaris-spacing-4);
-  --solaris-button-icon-size: var(--solaris-spacing-4);
   --solaris-button-min-width: var(--solaris-spacing-20);
-  --solaris-button-font-size: var(--solaris-font-size-md);
+  --solaris-button-icon-size: var(--solaris-density-font-size);
+  --solaris-button-font-size: var(--solaris-density-font-size);
   --solaris-button-font-weight: var(--solaris-font-weight-medium);
 }
 
-[solaris-button][data-size='lg'] {
-  --solaris-button-gap: var(--solaris-spacing-2);
-  --solaris-button-height: var(--solaris-spacing-12);
+[solaris-button][data-density='comfortable'] {
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
   --solaris-button-padding-y: var(--solaris-spacing-2);
-  --solaris-button-padding-x: var(--solaris-spacing-5);
-  --solaris-button-icon-size: var(--solaris-spacing-5);
   --solaris-button-min-width: var(--solaris-spacing-24);
-  --solaris-button-font-size: var(--solaris-font-size-lg);
+  --solaris-button-icon-size: var(--solaris-density-font-size);
+  --solaris-button-font-size: var(--solaris-density-font-size);
   --solaris-button-font-weight: var(--solaris-font-weight-semibold);
 }
 
+[solaris-button][data-shape='wide'] {
+  --solaris-button-padding-x: calc(var(--solaris-density-padding-lg) * 2.5);
+  --solaris-button-min-width: calc(var(--solaris-density-min-height) * 3);
+}
+
 [solaris-button][data-radius='none'] {
   --solaris-button-radius: var(--solaris-radius-none);
 }
@@ -547,20 +552,3 @@
 [solaris-button][data-radius='full'] {
   --solaris-button-radius: var(--solaris-radius-full);
 }
-
-[solaris-button][data-density='compact'] {
-  --solaris-button-gap: var(--solaris-density-gap-md);
-  --solaris-button-padding-y: var(--solaris-spacing-4);
-  --solaris-button-min-width: var(--solaris-spacing-10);
-  --solaris-button-icon-size: var(--solaris-font-size-sm);
-  --solaris-button-height: var(--solaris-density-min-height);
-  --solaris-button-padding-x: var(--solaris-density-padding-lg);
-}
-
-[solaris-button][data-density='comfortable'] {
-  --solaris-button-gap: var(--solaris-density-gap-md);
-  --solaris-button-icon-size: var(--solaris-spacing-4);
-  --solaris-button-padding-y: var(--solaris-spacing-4);
-  --solaris-button-height: var(--solaris-density-min-height);
-  --solaris-button-padding-x: var(--solaris-density-padding-lg);
-}

package/styles/_core.scss

@@ -1,7 +1,7 @@
 /// Solaris UI Core
 /// Uses the browser's default font-size (100%, typically 16px).
-/// All design tokens are calculated at 1rem = 16px.
-/// Do NOT set a custom root font-size — it breaks accessibility (WCAG 1.4.4).
+/// All design tokens use px so rendering is deterministic regardless of the
+/// consumer's root font-size. Page zoom satisfies WCAG 1.4.4 (Resize Text).
 ///
 /// Usage:
 ///   @use '@solaris-ui/angular/styles' as solaris;

package/styles/_icon-button.scss

@@ -435,24 +435,6 @@
   );
 }
 
-[solaris-icon-button][data-size='sm'] {
-  --solaris-icon-button-size: var(--solaris-spacing-8);
-
-  font-size: var(--solaris-font-size-sm);
-}
-
-[solaris-icon-button][data-size='md'] {
-  --solaris-icon-button-size: var(--solaris-spacing-10);
-
-  font-size: var(--solaris-font-size-md);
-}
-
-[solaris-icon-button][data-size='lg'] {
-  --solaris-icon-button-size: var(--solaris-spacing-12);
-
-  font-size: var(--solaris-font-size-lg);
-}
-
 [solaris-icon-button][data-radius='none'] {
   --solaris-icon-button-radius: var(--solaris-radius-none);
 }
@@ -476,11 +458,23 @@
 [solaris-icon-button][data-density='compact'] {
   --solaris-icon-button-size: var(--solaris-density-min-height);
 
-  font-size: var(--solaris-font-size-sm);
+  font-size: var(--solaris-density-font-size);
+}
+
+[solaris-icon-button][data-density='normal'] {
+  --solaris-icon-button-size: var(--solaris-density-min-height);
+
+  font-size: var(--solaris-density-font-size);
 }
 
 [solaris-icon-button][data-density='comfortable'] {
   --solaris-icon-button-size: var(--solaris-density-min-height);
 
-  font-size: var(--solaris-font-size-md);
+  font-size: var(--solaris-density-font-size);
+}
+
+[solaris-icon-button][data-shape='wide'] {
+  width: auto;
+  min-width: var(--solaris-icon-button-size);
+  padding-inline: calc(var(--solaris-density-padding-lg) * 2.5);
 }

package/styles/_index.scss

@@ -1,7 +1,8 @@
 /// Solaris UI — Design System Styles
 ///
 /// Public entry point for the Solaris design system SCSS API.
-/// All tokens use browser default font-size (1rem = 16px).
+/// All design tokens use px so rendering is deterministic regardless of the
+/// consumer's root font-size. Page zoom satisfies WCAG 1.4.4 (Resize Text).
 ///
 /// Usage:
 ///   @use '@solaris-ui/angular/styles' as solaris;

package/styles/_input.scss

@@ -150,11 +150,21 @@ input[solaris-input][data-size='lg'] {
 input[solaris-input][data-density='compact'] {
   --solaris-input-height: var(--solaris-density-min-height);
   --solaris-input-line-height: var(--solaris-line-height-sm);
+  --solaris-input-font-size: var(--solaris-density-font-size);
+  --solaris-input-padding-y: var(--solaris-density-padding-xs);
+}
+
+input[solaris-input][data-density='normal'] {
+  --solaris-input-height: var(--solaris-density-min-height);
+  --solaris-input-line-height: var(--solaris-line-height-sm);
+  --solaris-input-font-size: var(--solaris-density-font-size);
   --solaris-input-padding-y: var(--solaris-density-padding-xs);
 }
 
 input[solaris-input][data-density='comfortable'] {
+  --solaris-input-height: var(--solaris-density-min-height);
   --solaris-input-line-height: var(--solaris-line-height-md);
+  --solaris-input-font-size: var(--solaris-density-font-size);
   --solaris-input-padding-y: var(--solaris-density-padding-sm);
 }
 
@@ -237,6 +247,11 @@ solaris-form-field input[solaris-input][data-density='compact'] {
   padding-bottom: var(--solaris-density-padding-xs);
 }
 
+solaris-form-field input[solaris-input][data-density='normal'] {
+  padding-top: var(--solaris-density-padding-xs);
+  padding-bottom: var(--solaris-density-padding-xs);
+}
+
 solaris-form-field input[solaris-input][data-density='comfortable'] {
   padding-top: var(--solaris-density-padding-sm);
   padding-bottom: var(--solaris-density-padding-sm);

package/styles/_textarea.scss

@@ -132,11 +132,19 @@ textarea[solaris-textarea][data-size='lg'] {
 }
 
 textarea[solaris-textarea][data-density='compact'] {
+  --solaris-textarea-font-size: var(--solaris-density-font-size);
   --solaris-textarea-line-height: var(--solaris-line-height-sm);
   --solaris-textarea-padding-y: var(--solaris-spacing-half);
 }
 
+textarea[solaris-textarea][data-density='normal'] {
+  --solaris-textarea-font-size: var(--solaris-density-font-size);
+  --solaris-textarea-line-height: var(--solaris-line-height-sm);
+  --solaris-textarea-padding-y: var(--solaris-spacing-1);
+}
+
 textarea[solaris-textarea][data-density='comfortable'] {
+  --solaris-textarea-font-size: var(--solaris-density-font-size);
   --solaris-textarea-padding-y: var(--solaris-spacing-1);
   --solaris-textarea-line-height: var(--solaris-line-height-md);
 }
@@ -231,13 +239,18 @@ solaris-form-field textarea[solaris-textarea][readonly] {
 }
 
 solaris-form-field textarea[solaris-textarea][data-density='compact'] {
-  padding-top: var(--solaris-spacing-half);
-  padding-bottom: var(--solaris-spacing-half);
+  padding-top: var(--solaris-density-padding-xs);
+  padding-bottom: var(--solaris-density-padding-xs);
+}
+
+solaris-form-field textarea[solaris-textarea][data-density='normal'] {
+  padding-top: var(--solaris-density-padding-xs);
+  padding-bottom: var(--solaris-density-padding-xs);
 }
 
 solaris-form-field textarea[solaris-textarea][data-density='comfortable'] {
-  padding-top: var(--solaris-spacing-1);
-  padding-bottom: var(--solaris-spacing-1);
+  padding-top: var(--solaris-density-padding-sm);
+  padding-bottom: var(--solaris-density-padding-sm);
 }
 
 solaris-form-field textarea[solaris-textarea]:autofill,

package/styles/_theme.scss

@@ -26,7 +26,7 @@
 
 $-default-config: (
   color-scheme: system,
-  density: comfortable,
+  density: normal,
   radius: md,
   motion: auto,
 );
@@ -50,8 +50,10 @@ $-default-config: (
 
     @if $density == compact {
       --solaris-density-default: compact;
-    } @else {
+    } @else if $density == comfortable {
       --solaris-density-default: comfortable;
+    } @else {
+      --solaris-density-default: normal;
     }
 
     @if $radius ==

package/styles/token/density/_comfortable.scss

@@ -1,15 +1,16 @@
 [data-density='comfortable'] {
   --solaris-density-scale: 1;
-  --solaris-density-padding-xs: 0.375rem;
-  --solaris-density-padding-sm: 0.5rem;
-  --solaris-density-padding-md: 0.625rem;
-  --solaris-density-padding-lg: 1rem;
-  --solaris-density-padding-xl: 1.25rem;
-  --solaris-density-gap-xs: 0.25rem;
-  --solaris-density-gap-sm: 0.375rem;
-  --solaris-density-gap-md: 0.5rem;
-  --solaris-density-gap-lg: 0.625rem;
-  --solaris-density-gap-xl: 1rem;
-  --solaris-density-min-height: 3.5rem;
-  --solaris-density-min-width: 3.5rem;
+  --solaris-density-padding-xs: 6px;
+  --solaris-density-padding-sm: 8px;
+  --solaris-density-padding-md: 10px;
+  --solaris-density-padding-lg: 16px;
+  --solaris-density-padding-xl: 20px;
+  --solaris-density-gap-xs: 4px;
+  --solaris-density-gap-sm: 6px;
+  --solaris-density-gap-md: 8px;
+  --solaris-density-gap-lg: 10px;
+  --solaris-density-gap-xl: 16px;
+  --solaris-density-min-width: 56px;
+  --solaris-density-min-height: 56px;
+  --solaris-density-font-size: var(--solaris-font-size-lg);
 }

package/styles/token/density/_compact.scss

@@ -1,15 +1,16 @@
 [data-density='compact'] {
   --solaris-density-scale: 0.75;
-  --solaris-density-padding-xs: 0.125rem;
-  --solaris-density-padding-sm: 0.25rem;
-  --solaris-density-padding-md: 0.375rem;
-  --solaris-density-padding-lg: 0.5rem;
-  --solaris-density-padding-xl: 0.75rem;
-  --solaris-density-gap-xs: 0.125rem;
-  --solaris-density-gap-sm: 0.25rem;
-  --solaris-density-gap-md: 0.375rem;
-  --solaris-density-gap-lg: 0.5rem;
-  --solaris-density-gap-xl: 0.625rem;
-  --solaris-density-min-height: 2.75rem;
-  --solaris-density-min-width: 2.75rem;
+  --solaris-density-padding-xs: 2px;
+  --solaris-density-padding-sm: 4px;
+  --solaris-density-padding-md: 6px;
+  --solaris-density-padding-lg: 8px;
+  --solaris-density-padding-xl: 12px;
+  --solaris-density-gap-xs: 2px;
+  --solaris-density-gap-sm: 4px;
+  --solaris-density-gap-md: 6px;
+  --solaris-density-gap-lg: 8px;
+  --solaris-density-gap-xl: 10px;
+  --solaris-density-min-width: 36px;
+  --solaris-density-min-height: 36px;
+  --solaris-density-font-size: var(--solaris-font-size-xs);
 }

package/styles/token/density/_index.scss

@@ -1,2 +1,3 @@
 @forward 'compact';
+@forward 'normal';
 @forward 'comfortable';

package/styles/token/density/_normal.scss

@@ -0,0 +1,16 @@
+[data-density='normal'] {
+  --solaris-density-scale: 0.875;
+  --solaris-density-padding-xs: 4px;
+  --solaris-density-padding-sm: 6px;
+  --solaris-density-padding-md: 8px;
+  --solaris-density-padding-lg: 12px;
+  --solaris-density-padding-xl: 16px;
+  --solaris-density-gap-xs: 3px;
+  --solaris-density-gap-sm: 5px;
+  --solaris-density-gap-md: 7px;
+  --solaris-density-gap-lg: 9px;
+  --solaris-density-gap-xl: 12px;
+  --solaris-density-min-width: 48px;
+  --solaris-density-min-height: 48px;
+  --solaris-density-font-size: var(--solaris-font-size-md);
+}

package/styles/token/glass/_glass.scss

@@ -2,16 +2,10 @@
   --solaris-glass-blur: 22px;
   --solaris-glass-backdrop-filter: blur(22px) saturate(150%) contrast(108%);
   --solaris-glass-texture-opacity: 0.18;
-  --solaris-glass-border-color: rgb(255 255 255 / 22%);
+  --solaris-glass-border-color: #ffffff38;
   --solaris-glass-shadow:
-    0 24px 80px rgb(0 0 0 / 38%), inset 0 1px 0 rgb(255 255 255 / 28%),
-    inset 0 -1px 0 rgb(255 255 255 / 6%);
+    0 24px 80px #00000061, inset 0 1px 0 #ffffff47, inset 0 -1px 0 #ffffff0f;
   --solaris-glass-background:
-    linear-gradient(
-      135deg,
-      rgb(255 255 255 / 24%) 0%,
-      rgb(255 255 255 / 10%) 34%,
-      rgb(255 255 255 / 4%) 100%
-    ),
-    rgb(24 20 18 / 34%);
+    linear-gradient(135deg, #ffffff3d 0%, #ffffff1a 34%, #ffffff0a 100%),
+    #18141257;
 }

package/styles/token/radius/_radius.scss

@@ -1,8 +1,8 @@
 :root {
   --solaris-radius-none: 0;
-  --solaris-radius-sm: 0.125rem;
-  --solaris-radius-md: 0.25rem;
-  --solaris-radius-lg: 0.5rem;
-  --solaris-radius-xl: 0.75rem;
-  --solaris-radius-full: 9999rem;
+  --solaris-radius-sm: 2px;
+  --solaris-radius-md: 4px;
+  --solaris-radius-lg: 8px;
+  --solaris-radius-xl: 12px;
+  --solaris-radius-full: 9999px;
 }

package/styles/token/shadow/_shadow.scss

@@ -1,40 +1,37 @@
 :root {
-  --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
-  --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 4%);
-  --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 6%), 0 2px 4px rgb(0 0 0 / 4%);
-  --solaris-shadow-lg: 0 10px 15px rgb(0 0 0 / 8%), 0 4px 6px rgb(0 0 0 / 4%);
-  --solaris-shadow-xl: 0 20px 25px rgb(0 0 0 / 10%), 0 8px 10px rgb(0 0 0 / 4%);
-  --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 15%);
+  --solaris-shadow-xs: 0 1px 2px #0000000d;
+  --solaris-shadow-sm: 0 1px 3px #00000014, 0 1px 2px #0000000a;
+  --solaris-shadow-md: 0 4px 6px #0000000f, 0 2px 4px #0000000a;
+  --solaris-shadow-lg: 0 10px 15px #00000014, 0 4px 6px #0000000a;
+  --solaris-shadow-xl: 0 20px 25px #0000001a, 0 8px 10px #0000000a;
+  --solaris-shadow-2xl: 0 25px 50px #00000026;
 }
 
 [data-theme='dark'] {
-  --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
-  --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 35%), 0 1px 2px rgb(0 0 0 / 25%);
-  --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 35%), 0 2px 4px rgb(0 0 0 / 25%);
-  --solaris-shadow-lg: 0 10px 15px rgb(0 0 0 / 35%), 0 4px 6px rgb(0 0 0 / 25%);
-  --solaris-shadow-xl:
-    0 20px 25px rgb(0 0 0 / 40%), 0 8px 10px rgb(0 0 0 / 25%);
-  --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 50%);
+  --solaris-shadow-xs: 0 1px 2px #0000004d;
+  --solaris-shadow-sm: 0 1px 3px #00000059, 0 1px 2px #00000040;
+  --solaris-shadow-md: 0 4px 6px #00000059, 0 2px 4px #00000040;
+  --solaris-shadow-lg: 0 10px 15px #00000059, 0 4px 6px #00000040;
+  --solaris-shadow-xl: 0 20px 25px #00000066, 0 8px 10px #00000040;
+  --solaris-shadow-2xl: 0 25px 50px #00000080;
 }
 
 [data-theme='high-contrast'] {
-  --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 50%);
-  --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 50%);
-  --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 50%);
-  --solaris-shadow-lg: 0 10px 15px rgb(0 0 0 / 50%);
-  --solaris-shadow-xl: 0 20px 25px rgb(0 0 0 / 50%);
-  --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 50%);
+  --solaris-shadow-xs: 0 1px 2px #00000080;
+  --solaris-shadow-sm: 0 1px 3px #00000080;
+  --solaris-shadow-md: 0 4px 6px #00000080;
+  --solaris-shadow-lg: 0 10px 15px #00000080;
+  --solaris-shadow-xl: 0 20px 25px #00000080;
+  --solaris-shadow-2xl: 0 25px 50px #00000080;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --solaris-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
-    --solaris-shadow-sm: 0 1px 3px rgb(0 0 0 / 35%), 0 1px 2px rgb(0 0 0 / 25%);
-    --solaris-shadow-md: 0 4px 6px rgb(0 0 0 / 35%), 0 2px 4px rgb(0 0 0 / 25%);
-    --solaris-shadow-lg:
-      0 10px 15px rgb(0 0 0 / 35%), 0 4px 6px rgb(0 0 0 / 25%);
-    --solaris-shadow-xl:
-      0 20px 25px rgb(0 0 0 / 40%), 0 8px 10px rgb(0 0 0 / 25%);
-    --solaris-shadow-2xl: 0 25px 50px rgb(0 0 0 / 50%);
+    --solaris-shadow-xs: 0 1px 2px #0000004d;
+    --solaris-shadow-sm: 0 1px 3px #00000059, 0 1px 2px #00000040;
+    --solaris-shadow-md: 0 4px 6px #00000059, 0 2px 4px #00000040;
+    --solaris-shadow-lg: 0 10px 15px #00000059, 0 4px 6px #00000040;
+    --solaris-shadow-xl: 0 20px 25px #00000066, 0 8px 10px #00000040;
+    --solaris-shadow-2xl: 0 25px 50px #00000080;
   }
 }

package/styles/token/spacing/_spacing.scss

@@ -1,18 +1,18 @@
 :root {
   --solaris-spacing-0: 0;
-  --solaris-spacing-quarter: 0.0625rem;
-  --solaris-spacing-half: 0.125rem;
-  --solaris-spacing-1: 0.25rem;
-  --solaris-spacing-2: 0.5rem;
-  --solaris-spacing-3: 0.75rem;
-  --solaris-spacing-4: 1rem;
-  --solaris-spacing-5: 1.25rem;
-  --solaris-spacing-6: 1.5rem;
-  --solaris-spacing-8: 2rem;
-  --solaris-spacing-9: 2.25rem;
-  --solaris-spacing-10: 2.5rem;
-  --solaris-spacing-12: 3rem;
-  --solaris-spacing-16: 4rem;
-  --solaris-spacing-20: 5rem;
-  --solaris-spacing-24: 6rem;
+  --solaris-spacing-quarter: 1px;
+  --solaris-spacing-half: 2px;
+  --solaris-spacing-1: 4px;
+  --solaris-spacing-2: 8px;
+  --solaris-spacing-3: 12px;
+  --solaris-spacing-4: 16px;
+  --solaris-spacing-5: 20px;
+  --solaris-spacing-6: 24px;
+  --solaris-spacing-8: 32px;
+  --solaris-spacing-9: 36px;
+  --solaris-spacing-10: 40px;
+  --solaris-spacing-12: 48px;
+  --solaris-spacing-16: 64px;
+  --solaris-spacing-20: 80px;
+  --solaris-spacing-24: 96px;
 }

package/styles/token/typography/_typography.scss

@@ -1,13 +1,13 @@
 :root {
-  --solaris-font-size-2xs: 0.5rem;
-  --solaris-font-size-xs: 0.75rem;
-  --solaris-font-size-sm: 0.875rem;
-  --solaris-font-size-md: 1rem;
-  --solaris-font-size-lg: 1.125rem;
-  --solaris-font-size-xl: 1.25rem;
-  --solaris-font-size-2xl: 1.5rem;
-  --solaris-font-size-3xl: 1.875rem;
-  --solaris-font-size-4xl: 2.25rem;
+  --solaris-font-size-2xs: 8px;
+  --solaris-font-size-xs: 12px;
+  --solaris-font-size-sm: 14px;
+  --solaris-font-size-md: 16px;
+  --solaris-font-size-lg: 18px;
+  --solaris-font-size-xl: 20px;
+  --solaris-font-size-2xl: 24px;
+  --solaris-font-size-3xl: 32px;
+  --solaris-font-size-4xl: 48px;
 
   --solaris-font-weight-regular: 400;
   --solaris-font-weight-medium: 500;