@askrjs/themes 0.0.8 → 0.0.10

package/templates/theme/styles/actions/button.css

@@ -1,22 +1,23 @@
 :where(.btn, .btn-close, [data-slot="button"]) {
   --_button-height: var(--ak-density-control-height-md);
   --_button-padding-x: var(--ak-density-control-padding-x-md);
-  --_button-radius: var(--ak-radius-md);
-  --_button-border: var(--ak-color-border);
+  --_button-radius: var(--ak-radius-lg);
+  --_button-border: transparent;
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
+  gap: var(--ak-space-sm);
   min-height: var(--_button-height);
+  padding-block: 0;
   padding-inline: var(--_button-padding-x);
   border: 1px solid var(--_button-border);
   border-radius: var(--_button-radius);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-primary);
+  color: var(--ak-color-text-inverse);
+  box-shadow: none;
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
+  font-weight: var(--ak-font-weight-medium);
   line-height: 1;
   letter-spacing: 0;
   text-decoration: none;
@@ -44,7 +45,18 @@
   min-inline-size: 0;
 }
 
-:where([data-slot="theme-toggle-content"]) > :where([data-slot="icon"], svg) {
+:where([data-slot="theme-toggle-icon"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+:where([data-slot="theme-toggle-icon"][hidden]) {
+  display: none;
+}
+
+:where([data-slot="theme-toggle-content"]) :where([data-slot="icon"], svg) {
   flex: none;
   inline-size: var(--_ak-theme-toggle-icon-size);
   block-size: var(--_ak-theme-toggle-icon-size);
@@ -54,88 +66,78 @@
 :where(.btn) > :where([data-slot="icon"], svg),
 :where([data-slot="button"]) > :where([data-slot="icon"], svg) {
   flex: none;
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
   color: currentColor;
+  pointer-events: none;
+}
+
+:where([data-slot="button"][data-width="full"]) {
+  inline-size: 100%;
 }
 
 :where(.btn:hover, [data-slot="button"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-primary-hover);
 }
 
 :where(.btn:active, [data-slot="button"]:active) {
-  background: color-mix(in srgb, var(--ak-color-active) 100%, var(--ak-color-surface));
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-primary-active);
 }
 
 :where(.btn:focus-visible, [data-slot="button"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  border-color: var(--ak-color-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where(.btn[data-disabled], .btn:disabled, [data-slot="button"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  box-shadow: none;
-  color: var(--ak-color-disabled-text);
-  cursor: not-allowed;
   pointer-events: none;
-  opacity: 1;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 :where(.btn-primary, [data-slot="button"][data-variant="primary"]) {
   background: var(--ak-color-primary);
-  border-color: color-mix(in srgb, var(--ak-color-primary-active) 64%, var(--ak-color-primary));
+  border-color: transparent;
   color: var(--ak-color-text-inverse);
-  box-shadow: var(--ak-shadow-sm);
 }
 
 :where(.btn-primary:hover, [data-slot="button"][data-variant="primary"]:hover) {
   background: var(--ak-color-primary-hover);
-  border-color: var(--ak-color-primary-hover);
-  box-shadow: var(--ak-shadow-sm);
 }
 
 :where(.btn-primary:active, [data-slot="button"][data-variant="primary"]:active) {
   background: var(--ak-color-primary-active);
-  border-color: var(--ak-color-primary-active);
 }
 
 :where(.btn-secondary, [data-slot="button"][data-variant="secondary"]) {
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface));
-  border-color: color-mix(in srgb, var(--ak-color-primary) 18%, var(--ak-color-border));
-  color: var(--ak-color-primary-ink);
+  background: var(--ak-color-surface-muted);
+  border-color: transparent;
+  color: var(--ak-color-text);
 }
 
 :where(.btn-secondary:hover, [data-slot="button"][data-variant="secondary"]:hover) {
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface));
-  border-color: color-mix(in srgb, var(--ak-color-primary) 26%, var(--ak-color-border-strong));
-  box-shadow: var(--ak-shadow-sm);
+  background: color-mix(in oklch, var(--ak-color-surface-muted) 80%, transparent);
 }
 
 :where(.btn-secondary:active, [data-slot="button"][data-variant="secondary"]:active) {
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-active));
-  border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border));
+  background: var(--ak-color-active);
 }
 
 :where(.btn-outline, [data-slot="button"][data-variant="outline"]) {
-  background: var(--ak-color-surface);
-  border-color: var(--ak-color-border);
+  background: var(--ak-color-bg);
+  border-color: var(--ak-color-input);
   color: var(--ak-color-text);
+  box-shadow: none;
 }
 
 :where(.btn-outline:hover, [data-slot="button"][data-variant="outline"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
 }
 
 :where(.btn-outline:active, [data-slot="button"][data-variant="outline"]:active) {
-  background: color-mix(in srgb, var(--ak-color-active) 72%, var(--ak-color-surface-muted));
-  border-color: var(--ak-color-border-strong);
+  background: var(--ak-color-active);
 }
 
 :where(.btn-ghost, [data-slot="button"][data-variant="ghost"]) {
@@ -145,29 +147,31 @@
 }
 
 :where(.btn-ghost:hover, [data-slot="button"][data-variant="ghost"]:hover) {
-  background: var(--ak-color-hover);
-  border-color: transparent;
+  background: var(--ak-color-accent);
+  color: var(--ak-color-accent-ink);
 }
 
 :where(.btn-ghost:active, [data-slot="button"][data-variant="ghost"]:active) {
   background: var(--ak-color-active);
-  border-color: transparent;
 }
 
 :where(.btn-destructive, [data-slot="button"][data-variant="destructive"]) {
   background: var(--ak-color-danger);
-  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 40%, var(--ak-color-danger));
+  border-color: transparent;
   color: var(--ak-color-text-inverse);
 }
 
 :where(.btn-destructive:hover, [data-slot="button"][data-variant="destructive"]:hover) {
-  background: color-mix(in srgb, var(--ak-color-danger) 94%, var(--ak-color-danger-ink) 6%);
-  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 48%, var(--ak-color-danger));
+  background: color-mix(in oklch, var(--ak-color-danger) 90%, transparent);
 }
 
-:where(.btn-destructive:active, [data-slot="button"][data-variant="destructive"]:active) {
-  background: color-mix(in srgb, var(--ak-color-danger) 88%, var(--ak-color-danger-ink) 12%);
-  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 56%, var(--ak-color-danger));
+:where(
+  .btn-destructive:focus-visible,
+  [data-slot="button"][data-variant="destructive"]:focus-visible
+) {
+  border-color: var(--ak-color-danger);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width)
+    color-mix(in oklch, var(--ak-color-danger) 20%, transparent);
 }
 
 :where(.btn-link, [data-slot="button"][data-variant="link"]) {
@@ -178,6 +182,7 @@
   background: transparent;
   box-shadow: none;
   color: var(--ak-color-link);
+  text-underline-offset: 4px;
 }
 
 :where(.btn-link:hover, [data-slot="button"][data-variant="link"]:hover) {
@@ -186,7 +191,6 @@
   box-shadow: none;
   color: var(--ak-color-link-hover);
   text-decoration: underline;
-  text-underline-offset: 0.14em;
 }
 
 :where(.btn-link:active, [data-slot="button"][data-variant="link"]:active) {
@@ -202,14 +206,17 @@
   inline-size: var(--_button-height);
   padding-inline: 0;
   border-color: transparent;
-  border-radius: var(--ak-radius-round);
   background: transparent;
   box-shadow: none;
+  color: var(--ak-color-text-subtle);
+  opacity: 0.7;
 }
 
 :where(.btn-close:hover) {
-  background: var(--ak-color-hover);
+  background: var(--ak-color-accent);
   border-color: transparent;
+  color: var(--ak-color-text);
+  opacity: 1;
 }
 
 :where(.btn-close:active) {
@@ -219,9 +226,7 @@
 
 :where(.btn-close:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where(.btn-close[data-disabled], .btn-close:disabled) {
@@ -231,12 +236,19 @@
   color: var(--ak-color-disabled-text);
   cursor: not-allowed;
   pointer-events: none;
-  opacity: 1;
+  opacity: 0.5;
 }
 
 :where(.btn-sm, [data-slot="button"][data-size="sm"]) {
   --_button-height: var(--ak-density-control-height-sm);
   --_button-padding-x: var(--ak-density-control-padding-x-sm);
+  gap: 0.375rem;
+}
+
+:where([data-slot="button"][data-size="xs"]) {
+  --_button-height: var(--ak-density-control-height-xs);
+  --_button-padding-x: var(--ak-density-control-padding-x-xs);
+  gap: 0.25rem;
   font-size: var(--ak-font-size-xs);
 }
 
@@ -247,6 +259,32 @@
 }
 
 :where(.btn-icon, [data-slot="button"][data-size="icon"]) {
-  width: var(--_button-height);
+  flex: none;
+  inline-size: var(--_button-height);
+  min-inline-size: var(--_button-height);
+  padding-inline: 0;
+}
+
+:where([data-slot="button"][data-size="icon-xs"]) {
+  --_button-height: var(--ak-density-control-height-xs);
+  flex: none;
+  inline-size: var(--_button-height);
+  min-inline-size: var(--_button-height);
+  padding-inline: 0;
+}
+
+:where([data-slot="button"][data-size="icon-sm"]) {
+  --_button-height: var(--ak-density-control-height-sm);
+  flex: none;
+  inline-size: var(--_button-height);
+  min-inline-size: var(--_button-height);
+  padding-inline: 0;
+}
+
+:where([data-slot="button"][data-size="icon-lg"]) {
+  --_button-height: var(--ak-density-control-height-lg);
+  flex: none;
+  inline-size: var(--_button-height);
+  min-inline-size: var(--_button-height);
   padding-inline: 0;
 }

package/templates/theme/styles/actions/toggle-group.css

@@ -1,27 +1,44 @@
 :where([data-slot="toggle-group"]) {
   display: inline-flex;
+  align-items: center;
   flex-wrap: wrap;
-  gap: 0.25rem;
+  gap: 0.125rem;
+  max-inline-size: 100%;
+  padding: 0.1875rem;
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-muted);
+  color: var(--ak-color-text);
 }
 
 :where([data-slot="toggle-group"][data-orientation="vertical"]) {
+  align-items: stretch;
   flex-direction: column;
 }
 
-:where([data-slot="toggle-group-item"]) {
+:where([data-slot="toggle"], [data-slot="toggle-group-item"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-md);
-  border: 1px solid var(--ak-color-border);
+  gap: var(--ak-space-xs);
+  min-block-size: var(--ak-density-control-height-sm);
+  min-inline-size: var(--ak-density-control-height-sm);
+  padding-block: 0;
+  padding-inline: var(--ak-density-control-padding-x-sm);
+  border: 1px solid transparent;
   border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
+  background: transparent;
+  color: var(--ak-color-text-muted);
+  box-shadow: none;
+  font: inherit;
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
+  font-weight: var(--ak-font-weight-medium);
   line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
   cursor: pointer;
+  user-select: none;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     border-color var(--ak-duration-fast) var(--ak-ease-standard),
@@ -29,31 +46,50 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="toggle-group-item"]:hover) {
-  background: var(--ak-color-hover);
-  border-color: var(--ak-color-border-strong);
-}
-
-:where([data-slot="toggle-group-item"]:active) {
-  background: var(--ak-color-active);
+:where(
+  [data-slot="toggle"] > :where([data-slot="icon"], svg),
+  [data-slot="toggle-group-item"] > :where([data-slot="icon"], svg)
+) {
+  flex: none;
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
+  color: currentColor;
 }
 
-:where([data-slot="toggle-group-item"][data-state="on"]) {
-  border-color: var(--ak-color-primary);
-  background: var(--ak-color-primary-soft);
-  color: var(--ak-color-primary-ink);
+:where([data-slot="toggle"]:hover, [data-slot="toggle-group-item"]:hover) {
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
 }
 
-:where([data-slot="toggle-group-item"]:focus-visible) {
+:where([data-slot="toggle"]:focus-visible, [data-slot="toggle-group-item"]:focus-visible) {
   outline: none;
   box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-:where([data-slot="toggle-group-item"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  box-shadow: none;
-  color: var(--ak-color-disabled-text);
+:where([data-slot="toggle"][data-state="on"], [data-slot="toggle-group-item"][data-state="on"]) {
+  border-color: var(--ak-color-selected-border);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-xs);
+}
+
+:where(
+  [data-slot="toggle"][data-disabled],
+  [data-slot="toggle-group"][data-disabled],
+  [data-slot="toggle-group-item"][data-disabled]
+) {
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }
+
+@media (max-width: 30rem) {
+  :where([data-slot="toggle-group"]) {
+    inline-size: 100%;
+  }
+
+  :where([data-slot="toggle-group-item"]) {
+    flex: 1 1 auto;
+    white-space: normal;
+  }
+}

package/templates/theme/styles/base/text.css

@@ -0,0 +1,87 @@
+:where([data-slot="text"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-md);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where([data-slot="text"][data-size="sm"]) {
+  font-size: var(--ak-font-size-sm);
+}
+
+:where([data-slot="text"][data-size="lg"]) {
+  font-size: var(--ak-font-size-lg);
+}
+
+:where([data-slot="text"][data-tone="muted"]) {
+  color: var(--ak-color-text-muted);
+}
+
+:where([data-slot="text"][data-tone="subtle"]) {
+  color: var(--ak-color-text-subtle);
+}
+
+:where([data-slot="text"][data-tone="inverse"]) {
+  color: var(--ak-color-text-inverse);
+}
+
+:where([data-slot="text"][data-tone="success"]) {
+  color: var(--ak-color-success);
+}
+
+:where([data-slot="text"][data-tone="warning"]) {
+  color: var(--ak-color-warning);
+}
+
+:where([data-slot="text"][data-tone="danger"]) {
+  color: var(--ak-color-danger);
+}
+
+:where([data-slot="text"][data-tone="info"]) {
+  color: var(--ak-color-info);
+}
+
+:where([data-slot="text"][data-weight="normal"]) {
+  font-weight: var(--ak-font-weight-normal);
+}
+
+:where([data-slot="text"][data-weight="medium"]) {
+  font-weight: var(--ak-font-weight-medium);
+}
+
+:where([data-slot="text"][data-weight="semibold"]) {
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+:where([data-slot="text"][data-weight="bold"]) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where([data-slot="text"][data-font="mono"]) {
+  font-family: var(--ak-font-family-mono);
+}
+
+:where([data-slot="text"][data-numeric="tabular"]) {
+  font-variant-numeric: tabular-nums;
+}
+
+:where([data-slot="text"][data-wrap="normal"]) {
+  white-space: normal;
+}
+
+:where([data-slot="text"][data-wrap="nowrap"]) {
+  white-space: nowrap;
+}
+
+:where([data-slot="text"][data-wrap="anywhere"]) {
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+:where([data-slot="text"][data-truncate="true"]) {
+  min-inline-size: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/templates/theme/styles/base/typography.css

@@ -11,52 +11,52 @@
 
 :where(h1, h2, h3, h4, h5, h6) {
   color: var(--ak-color-text);
-  font-family: var(--ak-font-family-body);
+  font-family: var(--ak-font-family-display);
   font-weight: var(--ak-font-weight-semibold);
   text-wrap: balance;
   margin: 0;
 }
 
 :where(h1) {
-  font-size: clamp(2.75rem, 5.2vw, var(--ak-type-9-size));
-  line-height: 0.98;
-  letter-spacing: var(--ak-type-9-letter-spacing);
-  font-family: var(--ak-font-family-body);
-  font-weight: 700;
-}
-
-:where(h2) {
-  font-size: clamp(2rem, 3.4vw, var(--ak-type-8-size));
-  line-height: 1.04;
+  font-size: var(--ak-type-8-size);
+  line-height: var(--ak-type-8-line-height);
   letter-spacing: var(--ak-type-8-letter-spacing);
-  font-family: var(--ak-font-family-body);
+  font-family: var(--ak-font-family-display);
   font-weight: 700;
 }
 
-:where(h3) {
+:where(h2) {
   font-size: var(--ak-type-7-size);
-  line-height: 1.12;
+  line-height: var(--ak-type-7-line-height);
   letter-spacing: var(--ak-type-7-letter-spacing);
+  font-family: var(--ak-font-family-display);
+  font-weight: 700;
 }
 
-:where(h4) {
+:where(h3) {
   font-size: var(--ak-type-6-size);
-  line-height: 1.16;
+  line-height: var(--ak-type-6-line-height);
   letter-spacing: var(--ak-type-6-letter-spacing);
 }
 
-:where(h5) {
+:where(h4) {
   font-size: var(--ak-type-5-size);
   line-height: var(--ak-type-5-line-height);
   letter-spacing: var(--ak-type-5-letter-spacing);
 }
 
-:where(h6) {
+:where(h5) {
   font-size: var(--ak-type-4-size);
   line-height: var(--ak-type-4-line-height);
   letter-spacing: var(--ak-type-4-letter-spacing);
 }
 
+:where(h6) {
+  font-size: var(--ak-type-3-size);
+  line-height: var(--ak-type-3-line-height);
+  letter-spacing: var(--ak-type-3-letter-spacing);
+}
+
 :where(p, li, dd, dt) {
   color: var(--ak-color-text-muted);
 }
@@ -117,112 +117,19 @@
   line-height: var(--ak-type-2-line-height);
 }
 
-.ak-prose {
-  display: grid;
-  gap: 0.875rem;
-  max-inline-size: 44rem;
-}
-
-.ak-prose > * {
-  margin: 0;
-}
-
-.ak-prose > h1,
-.ak-prose > h2,
-.ak-prose > h3,
-.ak-prose > h4,
-.ak-prose > h5,
-.ak-prose > h6 {
-  max-inline-size: 22ch;
-}
-
-.ak-prose > p,
-.ak-prose > ul,
-.ak-prose > ol,
-.ak-prose > blockquote {
-  max-inline-size: 66ch;
-}
-
-.ak-prose > ul,
-.ak-prose > ol {
-  margin: 0;
-  padding-inline-start: 1.25rem;
-}
-
-.ak-type-scale {
-  display: grid;
-  gap: 0.75rem;
-  inline-size: 100%;
-}
-
-.ak-type-scale__row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto auto;
-  gap: 1rem;
-  align-items: baseline;
-  padding-block: 0.625rem;
-  border-bottom: 1px solid var(--ak-color-border-subtle);
-}
-
-.ak-type-scale__row:last-child {
-  border-bottom: none;
-}
-
-.ak-type-scale__sample {
-  color: var(--ak-color-text);
-  font-weight: var(--ak-font-weight-medium);
-}
-
-.ak-type-scale__meta {
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-type-2-size);
-  line-height: var(--ak-type-2-line-height);
-  white-space: nowrap;
-}
-
-.ak-type-grid {
-  display: grid;
-  gap: 0.875rem;
-  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
-}
-
-.ak-type-card {
-  display: grid;
-  gap: 0.4rem;
-  padding: 0.875rem;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 86%, var(--ak-color-surface) 14%);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  box-shadow: var(--ak-shadow-sm);
-}
-
-.ak-type-card > p {
-  color: var(--ak-color-text-muted);
-}
-
-.ak-type-card__eyebrow {
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-type-1-size);
-  line-height: var(--ak-type-1-line-height);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
 @media (max-width: 720px) {
   :where(h1) {
-    font-size: clamp(2.25rem, 12vw, 3.25rem);
+    font-size: var(--ak-type-7-size);
+    line-height: var(--ak-type-7-line-height);
   }
 
   :where(h2) {
-    font-size: clamp(1.8rem, 9vw, 2.4rem);
+    font-size: var(--ak-type-6-size);
+    line-height: var(--ak-type-6-line-height);
   }
 
   :where(h3) {
-    font-size: clamp(1.5rem, 7vw, var(--ak-type-7-size));
-  }
-
-  .ak-type-scale__row {
-    grid-template-columns: 1fr;
-    gap: 0.35rem;
+    font-size: var(--ak-type-5-size);
+    line-height: var(--ak-type-5-line-height);
   }
 }