@askrjs/themes 0.0.8 → 0.0.10

package/src/themes/default/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/src/themes/default/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/src/themes/default/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);
   }
 }

package/src/themes/default/styles/base/utilities.css

@@ -17,253 +17,3 @@
   white-space: nowrap;
   border: 0;
 }
-
-:where(
-  .gap-1,
-  [data-slot="flex"][data-gap="initial:1"],
-  [data-slot="block"][data-gap="initial:1"],
-  [data-slot="shell"][data-gap="initial:1"]
-) {
-  gap: var(--ak-space-1);
-}
-
-:where(
-  .gap-2,
-  [data-slot="flex"][data-gap="initial:2"],
-  [data-slot="block"][data-gap="initial:2"],
-  [data-slot="shell"][data-gap="initial:2"]
-) {
-  gap: var(--ak-space-2);
-}
-
-:where(
-  .gap-3,
-  [data-slot="flex"][data-gap="initial:3"],
-  [data-slot="block"][data-gap="initial:3"],
-  [data-slot="shell"][data-gap="initial:3"]
-) {
-  gap: var(--ak-space-3);
-}
-
-:where(
-  .gap-4,
-  [data-slot="flex"][data-gap="initial:4"],
-  [data-slot="block"][data-gap="initial:4"],
-  [data-slot="shell"][data-gap="initial:4"]
-) {
-  gap: var(--ak-space-4);
-}
-
-:where(
-  .gap-xs,
-  [data-slot="flex"][data-gap="initial:xs"],
-  [data-slot="block"][data-gap="initial:xs"],
-  [data-slot="shell"][data-gap="initial:xs"]
-) {
-  gap: var(--ak-space-xs);
-}
-
-:where(
-  .gap-sm,
-  [data-slot="flex"][data-gap="initial:sm"],
-  [data-slot="block"][data-gap="initial:sm"],
-  [data-slot="shell"][data-gap="initial:sm"]
-) {
-  gap: var(--ak-space-sm);
-}
-
-:where(
-  .gap-md,
-  [data-slot="flex"][data-gap="initial:md"],
-  [data-slot="block"][data-gap="initial:md"],
-  [data-slot="shell"][data-gap="initial:md"]
-) {
-  gap: var(--ak-space-md);
-}
-
-:where(
-  .gap-lg,
-  [data-slot="flex"][data-gap="initial:lg"],
-  [data-slot="block"][data-gap="initial:lg"],
-  [data-slot="shell"][data-gap="initial:lg"]
-) {
-  gap: var(--ak-space-lg);
-}
-
-:where(
-  .gap-xl,
-  [data-slot="flex"][data-gap="initial:xl"],
-  [data-slot="block"][data-gap="initial:xl"],
-  [data-slot="shell"][data-gap="initial:xl"]
-) {
-  gap: var(--ak-space-xl);
-}
-
-:where(
-  .gap-x-sm,
-  [data-slot="flex"][data-gap-x="initial:sm"],
-  [data-slot="block"][data-gap-x="initial:sm"]
-) {
-  column-gap: var(--ak-space-sm);
-}
-
-:where(
-  .gap-x-md,
-  [data-slot="flex"][data-gap-x="initial:md"],
-  [data-slot="block"][data-gap-x="initial:md"]
-) {
-  column-gap: var(--ak-space-md);
-}
-
-:where(
-  .gap-x-lg,
-  [data-slot="flex"][data-gap-x="initial:lg"],
-  [data-slot="block"][data-gap-x="initial:lg"]
-) {
-  column-gap: var(--ak-space-lg);
-}
-
-:where(
-  .gap-y-sm,
-  [data-slot="flex"][data-gap-y="initial:sm"],
-  [data-slot="block"][data-gap-y="initial:sm"]
-) {
-  row-gap: var(--ak-space-sm);
-}
-
-:where(
-  .gap-y-md,
-  [data-slot="flex"][data-gap-y="initial:md"],
-  [data-slot="block"][data-gap-y="initial:md"]
-) {
-  row-gap: var(--ak-space-md);
-}
-
-:where(
-  .gap-y-lg,
-  [data-slot="flex"][data-gap-y="initial:lg"],
-  [data-slot="block"][data-gap-y="initial:lg"]
-) {
-  row-gap: var(--ak-space-lg);
-}
-
-:where(
-  .flex-col,
-  [data-slot="flex"][data-direction="initial:column"],
-  [data-slot="inline"][data-direction="initial:column"]
-) {
-  flex-direction: column;
-}
-
-:where(
-  .flex-row-reverse,
-  [data-slot="flex"][data-direction="initial:row-reverse"],
-  [data-slot="inline"][data-direction="initial:row-reverse"]
-) {
-  flex-direction: row-reverse;
-}
-
-:where(
-  .flex-col-reverse,
-  [data-slot="flex"][data-direction="initial:column-reverse"],
-  [data-slot="inline"][data-direction="initial:column-reverse"]
-) {
-  flex-direction: column-reverse;
-}
-
-:where(
-  .items-start,
-  [data-slot="flex"][data-align="initial:start"],
-  [data-slot="inline"][data-align="initial:start"],
-  [data-slot="block"][data-align="initial:start"]
-) {
-  align-items: flex-start;
-}
-
-:where(
-  .items-end,
-  [data-slot="flex"][data-align="initial:end"],
-  [data-slot="inline"][data-align="initial:end"],
-  [data-slot="block"][data-align="initial:end"]
-) {
-  align-items: flex-end;
-}
-
-:where(
-  .items-center,
-  [data-slot="flex"][data-align="initial:center"],
-  [data-slot="inline"][data-align="initial:center"],
-  [data-slot="block"][data-align="initial:center"]
-) {
-  align-items: center;
-}
-
-:where(
-  .items-stretch,
-  [data-slot="flex"][data-align="initial:stretch"],
-  [data-slot="inline"][data-align="initial:stretch"],
-  [data-slot="block"][data-align="initial:stretch"]
-) {
-  align-items: stretch;
-}
-
-:where(
-  .items-baseline,
-  [data-slot="flex"][data-align="initial:baseline"],
-  [data-slot="inline"][data-align="initial:baseline"],
-  [data-slot="block"][data-align="initial:baseline"]
-) {
-  align-items: baseline;
-}
-
-:where(
-  .justify-start,
-  [data-slot="flex"][data-justify="initial:start"],
-  [data-slot="inline"][data-justify="initial:start"],
-  [data-slot="block"][data-justify="initial:start"]
-) {
-  justify-content: flex-start;
-}
-
-:where(
-  .justify-end,
-  [data-slot="flex"][data-justify="initial:end"],
-  [data-slot="inline"][data-justify="initial:end"],
-  [data-slot="block"][data-justify="initial:end"]
-) {
-  justify-content: flex-end;
-}
-
-:where(
-  .justify-center,
-  [data-slot="flex"][data-justify="initial:center"],
-  [data-slot="inline"][data-justify="initial:center"],
-  [data-slot="block"][data-justify="initial:center"]
-) {
-  justify-content: center;
-}
-
-:where(
-  .justify-between,
-  [data-slot="flex"][data-justify="initial:between"],
-  [data-slot="inline"][data-justify="initial:between"],
-  [data-slot="block"][data-justify="initial:between"]
-) {
-  justify-content: space-between;
-}
-
-:where(
-  .flex-nowrap,
-  [data-slot="flex"][data-wrap="initial:nowrap"],
-  [data-slot="inline"][data-wrap="initial:nowrap"]
-) {
-  flex-wrap: nowrap;
-}
-
-:where(
-  .flex-wrap-reverse,
-  [data-slot="flex"][data-wrap="initial:wrap-reverse"],
-  [data-slot="inline"][data-wrap="initial:wrap-reverse"]
-) {
-  flex-wrap: wrap-reverse;
-}