@triptease/stylesheet 1.0.6

package/dist/triptease.css

@@ -0,0 +1,1172 @@
+/*
+ * @triptease/stylesheet v1.0.6
+ */
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
+@import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
+@layer base{
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --asset-font-noe-text-name: 'Noe Text';
+  --asset-font-noe-text-style: normal;
+  --asset-font-noe-text-weight: 400;
+  --asset-font-inter-name: Inter;
+  --asset-font-inter-style: normal;
+  --color-alert-100: #ffd6d6;
+  --color-alert-200: #ff9999;
+  --color-alert-300: #f93939;
+  --color-alert-400: #da0707;
+  --color-alert-500: #a80505;
+  --color-border-100: #e8eaec;
+  --color-border-200: #e0e1e5;
+  --color-border-300: #d7d9dd;
+  --color-border-400: #c5c8ce;
+  --color-border-500: #b7bbc2;
+  --color-text-100: #ffffff;
+  --color-text-200: #b5b0b5;
+  --color-text-300: #575157;
+  --color-text-400: #3b353b;
+  --color-text-500: #0d0c0d;
+  --color-text-inverted-100: #0d0c0d;
+  --color-text-inverted-200: #77758a;
+  --color-text-inverted-300: #9d9cab;
+  --color-text-inverted-400: #d3d3da;
+  --color-text-inverted-500: #ffffff;
+  --color-info-100: #e5f3ff;
+  --color-info-400: #0b99ff;
+  --color-primary-100: #f3f0fa;
+  --color-primary-200: #e8e3f6;
+  --color-primary-300: #cfc6ed;
+  --color-primary-400: #5e43c2;
+  --color-primary-500: #4d35a1;
+  --color-success-100: #e8f6e3;
+  --color-success-200: #c8e9bb;
+  --color-success-300: #a7db93;
+  --color-success-400: #86d06d;
+  --color-success-500: #65c345;
+  --color-surface-100: #ffffff;
+  --color-surface-200: #f9fafb;
+  --color-surface-300: #f1f2f4;
+  --color-surface-400: #e8eaec;
+  --color-surface-500: #e0e1e5;
+  --color-surface-600: #d7d9dd;
+  --color-surface-700: #75767e;
+  --color-surface-800: #1c1b27;
+  --color-surface-inverted-100: #1c1b27;
+  --color-surface-inverted-200: #3a384d;
+  --color-surface-inverted-300: #5b5974;
+  --color-surface-inverted-400: #7f7d95;
+  --color-surface-inverted-500: #acaabc;
+  --color-warning-100: #ffedd6;
+  --color-warning-200: #ffe0b8;
+  --color-warning-300: #ffce8f;
+  --color-warning-400: #ffb95e;
+  --color-warning-500: #ff9d1f;
+  --font-family-serif: 'Noe Text', 'PT Serif', serif;
+  --font-family-sans: 'Roboto', sans-serif;
+  --font-family-inter: 'Inter', 'Helvetica Neue', sans-serif;
+  --font-line-height-100: 1.4; /** Line height for small text */
+  --font-line-height-200: 1.5; /** Line height for body text */
+  --font-line-height-300: 1.3; /** Line height for heading 3 text */
+  --font-line-height-400: 1.4; /** Line height for heading 2 text */
+  --font-line-height-500: 1.3; /** Line height for heading 1 text */
+  --font-line-height-600: 1.5; /** Line height for display text */
+  --font-size-100: 0.875rem; /** Small text */
+  --font-size-200: 1rem; /** Body text */
+  --font-size-300: 1.125rem; /** Heading 3 text */
+  --font-size-400: 1.25rem; /** Heading 2 text */
+  --font-size-500: 1.5rem; /** Heading 1 text */
+  --font-size-600: 2rem; /** Display text */
+  --font-weight-light: 300;
+  --font-weight-normal: 400; /** This is called 'regular' in Figma. */
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --space-scale-1: 0.5rem;
+  --space-scale-2: 1rem;
+  --space-scale-3: 1.5rem;
+  --space-scale-4: 2.5rem;
+  --space-scale-5: 3.5rem;
+  --space-scale-6: 4.5rem;
+  --space-scale-7: 5.5rem;
+  --space-scale-8: 6.5rem;
+  --space-scale-9: 7.5rem;
+  --space-scale-10: 8.5rem;
+  --space-scale-0-5: 0.25rem;
+  --space-scale-1-5: 0.75rem;
+  --space-scale-2-5: 1.25rem;
+  --space-scale-3-5: 2rem;
+  --space-scale-4-5: 3rem;
+  --space-scale-5-5: 4rem;
+  --space-scale-6-5: 5rem;
+  --space-scale-7-5: 6rem;
+  --space-scale-8-5: 7rem;
+  --space-scale-9-5: 8rem;
+  --border-radius: 0.5rem; /** Legacy border radius, use 'border-radius-100' instead */
+  --border-radius-50: 0.25rem; /** Small border radius for badges and other small visual components */
+  --border-radius-100: 0.5rem;
+  --border-radius-200: 1rem;
+  --box-shadow-sm: 0px 2px 5px rgba(0, 0, 0, 0.1);
+  --box-shadow-lg: 0px 2px 20px rgba(0, 0, 0, 0.1);
+  --box-shadow-lg-hover: 0px 10px 20px rgba(0, 0, 0, 0.2); /** Large box shadow used for hover effects */
+}
+}
+@layer base{
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  font-family: var(--font-family-inter);
+  font-size: 16px;
+  color: var(--color-text-500);
+  line-height: 1;
+  background-color: var(--color-surface-200);
+  min-height: 100vh;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+}
+/*
+  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
+  handled by our bundler, not standard CSS. WebStorm doesn't recognize it.
+*/
+/* noinspection CssInvalidAtRule */
+@layer base{
+
+button,
+.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  position: relative;
+  height: var(--button-height, -moz-max-content);
+  height: var(--button-height, max-content);
+  font-size: var(--font-size-200);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--space-scale-3);
+  padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
+  border-radius: var(--border-radius-100);
+  border: var(--button-border, none);
+  outline: none;
+  transition:
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
+  background-color: var(--button-background-color, transparent);
+  color: var(--button-color, var(--color-text-500));
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-scale-1);
+
+  &:is([disabled], [aria-disabled='true']) {
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled):not([aria-disabled='true']) {
+    background-color: var(--button-hover-background-color, var(--button-background-color));
+    color: var(--button-hover-color, var(--button-color));
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
+    outline-offset: 0;
+  }
+
+  &[data-theme='primary'] {
+    --color-border: var(--color-primary-500);
+    --button-background-color: var(--color-primary-400);
+    --button-color: var(--color-text-100);
+    --button-hover-background-color: var(--color-primary-500);
+    --button-border: 1px solid var(--color-border);
+    box-shadow:
+      inset 0 -2px 2px 0 var(--color-primary-400),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
+      0 1px 2px rgba(94, 66, 194, 0.2);
+
+    &:disabled {
+      --button-background-color: var(--color-primary-300);
+      box-shadow: none;
+      --color-border: var(--color-primary-300);
+    }
+
+    &[data-loading='true'] {
+      --button-background-color: var(--color-primary-300);
+      box-shadow: none;
+      --color-border: var(--color-primary-200);
+    }
+  }
+
+  &[data-theme='secondary'] {
+    --color-border: var(--color-primary-400);
+    --button-background-color: var(--color-surface-200);
+    --button-color: var(--color-primary-400);
+    --button-border: 1px solid var(--color-border);
+    box-shadow:
+      inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
+      inset 0 0 0 2px rgba(255, 255, 255, 0.4),
+      0 1px 2px 0 rgba(60, 66, 87, 0.08);
+
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      --button-border: 1px solid var(--color-primary-500);
+      --button-color: var(--color-primary-500);
+    }
+
+    &:disabled {
+      box-shadow: none;
+      --color-border: var(--color-primary-300);
+      --button-color: var(--color-primary-300);
+    }
+
+    &[data-loading='true'] {
+      --color-border: var(--color-primary-300);
+      box-shadow: none;
+    }
+  }
+
+  &[data-theme='suggestion'] {
+    --button-horizontal-spacing: var(--space-scale-2);
+    --button-background-color: var(--color-surface-200);
+    --button-color: var(--color-primary-400);
+    --button-border: 1px solid var(--color-primary-400);
+    line-height: var(--space-scale-2);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-100);
+    border-radius: var(--border-radius-200);
+    box-shadow:
+      inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
+      inset 0 0 0 2px rgba(255, 255, 255, 0.4),
+      0 1px 2px 0 rgba(60, 66, 87, 0.08);
+
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      --button-background-color: var(--color-surface-300);
+    }
+  }
+
+  &[data-theme='tertiary'] {
+    --button-color: var(--color-primary-400);
+    --button-hover-color: var(--color-primary-500);
+
+    &:disabled {
+      box-shadow: none;
+      --button-color: var(--color-primary-300);
+    }
+
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      --button-background-color: var(--color-primary-100);
+    }
+
+    &[data-loading='true'] {
+      box-shadow: none;
+    }
+  }
+
+  &[data-theme='destructive-primary'] {
+    --color-border: var(--color-alert-500);
+    --button-background-color: var(--color-alert-400);
+    --button-color: var(--color-text-100);
+    --button-hover-background-color: var(--color-alert-500);
+    --button-border: 1px solid var(--color-border);
+    box-shadow:
+      inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
+      0 1px 2px rgba(60, 66, 87, 0.08);
+
+    &:disabled {
+      --button-background-color: var(--color-alert-200);
+      box-shadow: none;
+      --color-border: var(--color-alert-200);
+    }
+
+    &[data-loading='true'] {
+      --button-background-color: var(--color-alert-200);
+      box-shadow: none;
+      --color-border: var(--color-alert-100);
+      --spinner-color: var(--color-surface-100);
+    }
+  }
+
+  &[data-theme='destructive-secondary'] {
+    --button-background-color: var(--color-surface-200);
+    --button-color: var(--color-alert-400);
+    --color-border: var(--color-alert-300);
+    --button-border: 1px solid var(--color-border);
+    box-shadow:
+      inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
+      inset 0 0 0 2px rgba(255, 255, 255, 0.4),
+      0 1px 2px 0 rgba(60, 66, 87, 0.08);
+
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      --color-border: var(--color-alert-500);
+      --button-color: var(--color-alert-500);
+    }
+
+    &:disabled {
+      box-shadow: none;
+      --color-border: var(--color-alert-200);
+      --button-color: var(--color-alert-200);
+    }
+
+    &[data-loading='true'] {
+      box-shadow: none;
+      --spinner-color: var(--color-alert-400);
+    }
+  }
+
+  &[data-theme='destructive-tertiary'] {
+    --button-color: var(--color-alert-400);
+    --button-hover-color: var(--color-alert-500);
+
+    &:disabled {
+      box-shadow: none;
+      --color-border: var(--color-border-100);
+      --button-color: var(--color-alert-200);
+    }
+
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      --button-background-color: var(--color-alert-100);
+    }
+
+    &[data-loading='true'] {
+      box-shadow: none;
+      --spinner-color: var(--color-alert-400);
+    }
+  }
+
+  &.small {
+    --button-horizontal-spacing: var(--space-scale-1);
+    --button-vertical-spacing: var(--space-scale-0-5);
+  }
+
+  &.large {
+    --button-horizontal-spacing: 0.75rem;
+    --button-vertical-spacing: var(--space-scale-1);
+  }
+
+  &[data-loading='true'] {
+    position: relative;
+    color: transparent !important;
+    pointer-events: none;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    --spinner-color: var(--color-primary-400);
+  }
+
+  /*Spinner magic*/
+  &[data-loading='true']::after {
+    content: '';
+    position: absolute;
+    top: calc(50% - 10px);
+    left: calc(50% - 10px);
+    width: 20px;
+    height: 20px;
+    transform: translate(-50%, -50%);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    background-color: var(--spinner-color);
+    animation: spin-animation 1s infinite linear;
+  }
+}
+
+@keyframes spin-animation {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+}
+@layer base{
+
+@font-face {
+  font-family: 'Noe Text';
+  src:
+    url("assets/fonts/Noe/noeTextBook.woff") format('woff'),
+    url("assets/fonts/Noe/noeTextBook.ttf") format('truetype');
+}
+
+@font-face {
+  font-family: 'Noe Display';
+  src:
+    url("assets/fonts/Noe/noeDisplayRegular.woff") format('woff'),
+    url("assets/fonts/Noe/noeDisplayRegular.ttf") format('truetype');
+}
+}
+@layer base{
+
+input[type='checkbox'] {
+  accent-color: var(--color-primary-400);
+  width: var(--checkbox-size, var(--space-scale-2));
+  aspect-ratio: 1;
+}
+
+input[type='checkbox'][data-theme='toggle'],
+[role='switch'] {
+  --toggle-width: var(--space-scale-5);
+  --toggle-height: 1.75rem;
+  --toggle-background-color: var(--color-surface-700);
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          appearance: none;
+  width: var(--toggle-width);
+  height: var(--toggle-height);
+  border-radius: 18px;
+  color: var(--toggle-color, var(--color-text-200));
+  background-color: var(--toggle-background-color);
+  transition:
+    color var(--toggle-transition-speed, 0.25s),
+    background-color var(--toggle-transition-speed, 0.25s);
+  cursor: pointer;
+  display: block;
+  border-color: var(--toggle-border-color, transparent);
+  border-width: var(--toggle-border-width, 0px);
+  padding: 2px;
+  position: relative;
+  min-width: var(--toggle-width);
+
+  &:hover {
+    color: var(--toggle-hover-color, var(--color-text-300));
+    background-color: var(--toggle-hover-background-color, var(--color-surface-800));
+  }
+
+  &[disabled],
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &:checked,
+  &[aria-checked='true'] {
+    --toggle-color: var(--color-success-300);
+    --toggle-background-color: var(--color-success-300);
+    --toggle-hover-color: var(--color-success-500);
+    --toggle-hover-background-color: var(--color-success-500);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    right: calc(100% - var(--toggle-height) + 2px);
+    height: calc(100% - 4px);
+    aspect-ratio: 1;
+    border-radius: inherit;
+    background-color: var(--color-surface-100);
+    transition: right var(--toggle-transition-speed, 0.25s) ease;
+    z-index: 1;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  &::after {
+    content: '';
+    -webkit-mask-image: url("assets/icons/close.svg");
+            mask-image: url("assets/icons/close.svg");
+    -webkit-mask-size: 18px;
+            mask-size: 18px;
+    -webkit-mask-position: center center;
+            mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    position: absolute;
+    top: 2px;
+    right: calc(100% - var(--toggle-height) + 2px);
+    height: calc(100% - 4px);
+    aspect-ratio: 1;
+    border-radius: inherit;
+    background-color: var(--toggle-background-color);
+    transition: right var(--toggle-transition-speed, 0.25s) ease;
+    z-index: 2;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  &:is(:checked, [aria-checked='true']) {
+    &::before,
+    &::after {
+      right: 2px;
+    }
+
+    &::after {
+      -webkit-mask-image: url("assets/icons/tick.svg");
+              mask-image: url("assets/icons/tick.svg");
+      -webkit-mask-size: 14px;
+              mask-size: 14px;
+      background-size: 12px;
+      background-position: center center;
+      -webkit-mask-position: center calc(50% + 1px);
+              mask-position: center calc(50% + 1px);
+    }
+  }
+
+  &[aria-invalid]:not([aria-invalid='false']),
+  &:user-invalid {
+    accent-color: var(--color-alert-400);
+  }
+}
+}
+@layer base{
+label {
+  font-size: var(--font-size-200);
+  line-height: 1.5;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-300);
+}
+}
+@layer base{
+
+input[type='number'] {
+  position: relative;
+}
+
+input[type='number']::-webkit-inner-spin-button {
+  position: absolute;
+  top: var(--space-scale-0-5);
+  right: var(--input-horizontal-spacing);
+  height: calc(100% - var(--space-scale-1));
+}
+}
+@layer base{
+input[type='radio'] {
+  --radio-size: var(--space-scale-2);
+  --radio-accent-color: var(--color-primary-400);
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          appearance: none;
+  accent-color: var(--radio-accent-color);
+  width: var(--radio-size);
+  aspect-ratio: 1;
+  cursor: pointer;
+  border: 1px solid var(--radio-accent-color);
+  border-radius: 50%;
+
+  display: inline-grid;
+  place-content: center;
+  margin: 0;
+
+  &::before {
+    transform: scale(0);
+    content: '';
+    width: calc(var(--radio-size) * 0.75);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    transition: 120ms transform ease-in-out;
+    background: var(--radio-accent-color);
+  }
+
+  &:checked::before {
+    transform: scale(1);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    + label {
+      opacity: 0.75;
+    }
+  }
+}
+}
+@layer base{
+
+@property --input-horizontal-spacing {
+  syntax: '*';
+  inherits: true;
+  initial-value: 1rem;
+}
+
+input:not([type='checkbox'], [type='radio']),
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--input-background-color, var(--color-surface-100));
+  border-color: var(--input-border-color, var(--color-border-400));
+  border-radius: var(--border-radius-100);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
+  box-sizing: border-box;
+  color: var(--input-color, inherit);
+  height: var(--input-height, var(--space-scale-4));
+  padding: var(--input-vertical-spacing, 0) var(--input-horizontal-spacing, var(--space-scale-2));
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-100);
+  line-height: var(--line-height-200);
+  transition:
+    background-color ease-in 100ms,
+    border-color ease-in 200ms;
+  width: 100%;
+
+  &:hover {
+    --input-background-color: var(--color-surface-300);
+  }
+
+  &::-moz-placeholder {
+    font-size: var(--font-size-100);
+    color: var(--placeholder-color, var(--color-text-300));
+  }
+
+  &::placeholder {
+    font-size: var(--font-size-100);
+    color: var(--placeholder-color, var(--color-text-300));
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--input-focus-border-color, var(--color-primary-400));
+    box-shadow: 0px 0px 0px 4px rgba(1, 150, 237, 0.24);
+  }
+
+  &:disabled,
+  [aria-disabled='true'] {
+    --input-color: var(--color-text-200);
+    --placeholder-color: var(--color-text-200);
+    --input-background-color: var(--color-surface-200);
+  }
+
+  &[aria-invalid]:not([aria-invalid='false']),
+  &:user-invalid {
+    --input-border-color: var(--color-alert-400);
+    --input-focus-border-color: var(--color-alert-400);
+  }
+}
+}
+@layer base{
+textarea {
+  --input-vertical-spacing: var(--space-scale-2);
+  --input-height: auto;
+  resize: none;
+  text-align: left;
+}
+}
+@layer base{
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-family-inter);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-500);
+}
+
+.display {
+  font-size: var(--font-size-600);
+  line-height: var(--font-line-height-600);
+}
+
+h1,
+.heading-1 {
+  font-size: var(--font-size-500);
+  line-height: var(--font-line-height-500);
+}
+
+h2,
+.heading-2 {
+  font-size: var(--font-size-400);
+  line-height: var(--font-line-height-400);
+}
+
+h3,
+.heading-3 {
+  font-size: var(--font-size-300);
+  line-height: var(--font-line-height-300);
+}
+
+h4,
+.heading-4 {
+  font-size: var(--font-size-200);
+  line-height: var(--font-line-height-200);
+}
+
+p,
+.body {
+  line-height: var(--font-line-height-200);
+  font-size: var(--font-size-200);
+  color: var(--color-text-400);
+}
+
+strong,
+.strong {
+  font-weight: var(--font-weight-semibold);
+}
+
+.small {
+  font-size: var(--font-size-100);
+  line-height: var(--font-line-height-100);
+}
+
+a {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary-400);
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1.4;
+}
+
+body {
+  color: var(--color-text-500);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-200);
+}
+}
+/* noinspection CssInvalidAtRule */
+@layer blocks{
+
+@property --badge-bg-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --badge-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: transparent;
+}
+
+.badge {
+  --badge-bg-color: var(--color-surface-300);
+  --badge-border-color: var(--color-border-300);
+
+  background-color: var(--badge-bg-color);
+  border: 1px solid var(--badge-border-color);
+  border-radius: var(--border-radius-50);
+  display: inline-block;
+  color: var(--color-text-400);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-200);
+  line-height: var(--font-line-height-200);
+  padding-inline: var(--space-scale-1);
+
+  &[data-theme='danger'] {
+    --badge-bg-color: var(--color-alert-100);
+    --badge-border-color: var(--color-alert-200);
+  }
+
+  &[data-theme='success'] {
+    --badge-bg-color: var(--color-success-100);
+    --badge-border-color: var(--color-success-200);
+  }
+
+  &[data-theme='warning'] {
+    --badge-bg-color: var(--color-warning-100);
+    --badge-border-color: var(--color-warning-200);
+  }
+
+  &[data-theme='info'] {
+    --badge-bg-color: var(--color-info-100);
+    --badge-border-color: var(--color-info-100);
+  }
+
+  &[data-theme='primary'] {
+    --badge-bg-color: var(--color-primary-100);
+    --badge-border-color: var(--color-primary-200);
+  }
+
+  &[data-theme='subtle'] {
+    --badge-bg-color: var(--color-surface-200);
+    --badge-border-color: var(--color-border-100);
+  }
+}
+}
+@layer blocks{
+
+.card {
+  border-radius: var(--border-radius-100);
+  border: 1px solid var(--color-border-100);
+  background-color: var(--color-surface-100);
+  box-shadow: 0 2px 0 0 var(--color-border-200);
+  padding: var(--card-padding, var(--space-scale-3));
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-vertical-spacing, var(--space-scale-3));
+}
+
+[class*='card'] {
+  background-color: var(--color-surface-100);
+  box-shadow: var(--box-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-vertical-spacing, var(--space-scale-1));
+
+  padding: var(--card-padding, var(--space-scale-3));
+  font-size: var(--font-size-200);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.5;
+
+  .value {
+    font-size: var(--font-size-600);
+    font-weight: var(--font-weight-normal);
+    line-height: normal;
+    display: block;
+    font-family: var(--font-family-serif);
+  }
+}
+
+.card-dataview {
+  --card-vertical-spacing: 0;
+  --card-padding: var(--space-scale-2);
+
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+
+  .title {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  .status {
+    align-self: center;
+  }
+}
+}
+@layer blocks{
+header[data-theme='top-nav'] {
+  background-color: var(--color-surface-800);
+  color: var(--color-text-100);
+  padding: var(--space-scale-2) var(--space-scale-6);
+  min-height: var(--space-scale-7-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-scale-4);
+  width: 100%;
+  box-sizing: border-box;
+
+  img {
+  }
+
+  nav {
+    > ul {
+      display: flex;
+      gap: var(--space-scale-3);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      align-items: center;
+      height: 100%;
+    }
+
+    a {
+      color: inherit;
+      text-underline-offset: var(--space-scale-1-5);
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-100);
+
+      &:is(:hover, [data-active='true']) {
+        text-decoration: underline;
+        text-decoration-thickness: 2px;
+        text-decoration-color: var(--color-primary-300);
+      }
+    }
+  }
+}
+}
+@layer blocks{
+.status {
+  --tag-background-color: var(--color-surface-100);
+  --tag-color: var(--color-text-500);
+
+  background-color: var(--tag-background-color);
+  color: var(--tag-color);
+  border-radius: var(--border-radius-100);
+  padding: var(--space-scale-0-5) var(--space-scale-1);
+  font-size: var(--font-size-100);
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+
+  &[data-status='warning'] {
+    --tag-background-color: var(--color-warning-100);
+    --tag-color: var(--color-warning-400);
+  }
+}
+}
+@layer blocks{
+table {
+  width: 100%;
+  border: 1px solid var(--color-surface-500);
+}
+thead {
+  background-color: var(--color-surface-300);
+  color: var(--color-text-400);
+}
+
+th {
+  padding: var(--space-scale-1);
+  text-align: right;
+
+  &:first-child {
+    text-align: left;
+  }
+}
+
+td {
+  padding: var(--space-scale-1);
+  text-align: right;
+  vertical-align: middle;
+
+  &:first-child {
+    text-align: left;
+  }
+}
+
+tr {
+  border-top: 1px solid var(--color-surface-500);
+  border-bottom: 1px solid var(--color-surface-500);
+}
+
+tfoot {
+}
+}
+/* noinspection CssInvalidAtRule */
+@layer compositions{
+
+[class^='column'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--column-vertical-spacing, var(--space-scale-1));
+
+  &[data-align='end'] {
+    align-items: flex-end;
+  }
+
+  &[data-align='center'] {
+    align-items: center;
+  }
+
+  &[data-align='start'] {
+    align-items: flex-start;
+  }
+
+  &[data-justify='end'] {
+    justify-content: flex-end;
+  }
+
+  &[data-justify='center'] {
+    justify-content: center;
+  }
+}
+
+.column-xs {
+  --column-vertical-spacing: var(--space-scale-0-5);
+}
+
+.column-sm {
+  --column-vertical-spacing: var(--space-scale-1);
+}
+
+.column-md {
+  --column-vertical-spacing: var(--space-scale-2);
+}
+
+.column-lg {
+  --column-vertical-spacing: var(--space-scale-3);
+}
+
+.column-xl {
+  --column-vertical-spacing: var(--space-scale-4);
+}
+
+.column-2xl {
+  --column-vertical-spacing: var(--space-scale-5);
+}
+}
+@layer compositions{
+
+@property --stack-vertical-spacing {
+  syntax: '<length>';
+  initial-value: var(--space-scale-1);
+  inherits: false;
+}
+
+[class^='stack'] > * + * {
+  margin-top: var(--stack-vertical-spacing);
+}
+
+.stack-xs {
+  --stack-vertical-spacing: var(--space-scale-0-5);
+}
+
+.stack-sm {
+  --stack-vertical-spacing: var(--space-scale-1);
+}
+
+.stack-md {
+  --stack-vertical-spacing: var(--space-scale-2);
+}
+
+.stack-lg {
+  --stack-vertical-spacing: var(--space-scale-3);
+}
+
+.stack-xl {
+  --stack-vertical-spacing: var(--space-scale-4);
+}
+
+.stack-2xl {
+  --stack-vertical-spacing: var(--space-scale-5);
+}
+}
+/* noinspection CssInvalidAtRule */
+/* noinspection CssInvalidAtRule */