@aziontech/theme 4.3.0 → 5.0.0

package/dist/v4/globals.css

@@ -173,7 +173,7 @@
 
 
 /*
- * `@aziontech/webkit` components use arbitrary values (`bg-[var(--x)]`) that
+ * `@aziontech/webkit` components use arbitrary values (`bg-(--x)`) that
  * Tailwind v4 only picks up when the source files are inside the scan.
  * Auto-detect scans the CWD only, so we point `@source` at the webkit
  * package via a monorepo-relative path (this file is under
@@ -197,12 +197,16 @@
   --color-blue-950: #000C1A;
   --color-gray-50: #FAFAFA;
   --color-gray-100: #F5F5F5;
+  --color-gray-150: #ECECEC;
   --color-gray-200: #E5E5E5;
+  --color-gray-250: #DADADA;
   --color-gray-300: #B2B2B2;
   --color-gray-400: #999999;
   --color-gray-500: #808080;
   --color-gray-600: #666666;
   --color-gray-700: #4D4D4D;
+  --color-gray-750: #2B2B2B;
+  --color-gray-775: #242424;
   --color-gray-800: #1A1A1A;
   --color-gray-900: #141414;
   --color-gray-950: #0A0A0A;
@@ -404,7 +408,9 @@
   --animate-fade-in: fadeIn 220ms ease-in-out;
   --animate-fade-out: fadeOut 220ms ease-in-out;
   --animate-slide-down: slideDown 220ms ease-in-out;
-  --animate-highlight-fade: highlight ease-in forwards;
+  --animate-highlight-fade: highlight 1100ms ease-in forwards;
+  --animate-page-enter: pageEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-content-enter: contentEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1) var(--content-enter-delay, 0s) backwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
@@ -663,7 +669,9 @@
   --animate-fade-in: fadeIn 220ms ease-in-out;
   --animate-fade-out: fadeOut 220ms ease-in-out;
   --animate-slide-down: slideDown 220ms ease-in-out;
-  --animate-highlight-fade: highlight ease-in forwards;
+  --animate-highlight-fade: highlight 1100ms ease-in forwards;
+  --animate-page-enter: pageEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
+  --animate-content-enter: contentEnter 240ms cubic-bezier(0.39, 0.57, 0.56, 1) var(--content-enter-delay, 0s) backwards;
   --animate-popup-scale-in: popupScaleIn 150ms cubic-bezier(0.39, 0.57, 0.56, 1);
   --animate-popup-scale-out: popupScaleOut 110ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
   --animate-slide-in-left: slideInLeft 240ms cubic-bezier(0.39, 0.57, 0.56, 1);
@@ -687,6 +695,19 @@
   --z-input-field: 1;
   --z-input-popup: 10;
   --z-input-overlay: 1100;
+  --layout-boundary-inline: var(--spacing-lg);
+  --layout-boundary-end: var(--spacing-lg);
+  --layout-boundary-start: var(--spacing-lg);
+  --layout-section-gap: var(--spacing-xl);
+  --layout-group-gap: var(--spacing-md);
+  --layout-measure: var(--container-7xl);
+  --layout-measure-focused: var(--container-4xl);
+  --layout-measure-form: var(--container-4xl);
+  --layout-measure-form-create: var(--container-5xl);
+  --layout-measure-content: var(--container-3xl);
+  --layout-measure-site: var(--container-6xl);
+  --layout-measure-site-header: var(--container-7xl);
+  --layout-measure-control: var(--container-3xs);
   --text-big-number-md-font-size: 1.25rem;
   --text-big-number-md-line-height: 1.25;
   --text-big-number-md-font-weight: 400;
@@ -699,6 +720,20 @@
   --text-big-number-lg-line-height: 1.25;
   --text-big-number-lg-font-weight: 400;
   --text-big-number-lg-font-family: Proto Mono;
+  --text-amount-lg-text-wrap-style: balance;
+  --text-amount-lg-font-size: 1.875rem;
+  --text-amount-lg-line-height: 1.25;
+  --text-amount-lg-font-weight: 400;
+  --text-amount-lg-letter-spacing: -0.08em;
+  --text-amount-md-text-wrap-style: balance;
+  --text-amount-md-font-size: 1rem;
+  --text-amount-md-line-height: 1.25;
+  --text-amount-md-font-weight: 400;
+  --text-amount-md-letter-spacing: -0.08em;
+  --text-amount-sm-font-size: 1rem;
+  --text-amount-sm-line-height: 1.5;
+  --text-amount-sm-font-weight: 400;
+  --text-amount-sm-letter-spacing: -0.08em;
   --text-heading-2xl-font-size: 1.875rem;
   --text-heading-2xl-line-height: 1.25;
   --text-heading-2xl-font-weight: 400;
@@ -734,6 +769,12 @@
   --text-label-code-sm-line-height: 1;
   --text-label-code-sm-font-weight: 400;
   --text-label-code-sm-letter-spacing: 0;
+  --text-body-code-sm-text-wrap-style: pretty;
+  --text-body-code-sm-font-family: Roboto Mono;
+  --text-body-code-sm-font-size: 0.75rem;
+  --text-body-code-sm-line-height: 1.625;
+  --text-body-code-sm-font-weight: 400;
+  --text-body-code-sm-letter-spacing: 0;
   --text-label-code-md-font-family: Roboto Mono;
   --text-label-code-md-font-size: 0.875rem;
   --text-label-code-md-line-height: 1;
@@ -745,21 +786,29 @@
   --text-label-code-lg-font-weight: 400;
   --text-label-code-lg-letter-spacing: 0;
   --text-body-lg-font-size: 1rem;
-  --text-body-lg-line-height: 1.5;
+  --text-body-lg-font-weight: 400;
+  --text-body-lg-line-height: 1.375;
   --text-body-md-font-size: 1rem;
-  --text-body-md-line-height: 1.5;
+  --text-body-md-font-weight: 400;
+  --text-body-md-line-height: 1.375;
+  --text-body-prose-md-font-size: 1rem;
+  --text-body-prose-md-font-weight: 400;
+  --text-body-prose-md-line-height: 1.625;
   --text-body-sm-font-size: 0.875rem;
-  --text-body-sm-line-height: 1.5;
+  --text-body-sm-font-weight: 400;
+  --text-body-sm-line-height: 1.375;
   --text-body-xs-font-size: 0.75rem;
-  --text-body-xs-line-height: 1.5;
+  --text-body-xs-font-weight: 400;
+  --text-body-xs-line-height: 1.375;
+  --text-body-xxs-font-size: 0.75rem;
+  --text-body-xxs-font-weight: 400;
+  --text-body-xxs-line-height: 1.5;
   --text-tag-sm-font-size: 0.75rem;
   --text-tag-sm-line-height: 1.25;
-  --text-tag-sm-font-weight: 600;
+  --text-tag-sm-font-weight: 400;
   --text-tag-md-font-size: 0.75rem;
   --text-tag-md-line-height: 1.25;
-  --text-tag-md-font-weight: 600;
-  --text-body-xxs-font-size: 0.75rem;
-  --text-body-xxs-line-height: 1.5;
+  --text-tag-md-font-weight: 400;
   --text-overline-md-font-family: Proto Mono;
   --text-overline-md-font-size: 0.75rem;
   --text-overline-md-line-height: 1.375;
@@ -801,6 +850,8 @@
     --text-big-number-md-font-size: 1.5rem;
     --text-big-number-sm-font-size: 1.25rem;
     --text-big-number-lg-font-size: 2.25rem;
+    --text-amount-lg-font-size: 3rem;
+    --text-amount-md-font-size: 1.25rem;
     --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
@@ -811,6 +862,8 @@
   @media (min-width: 768px) {
     --text-big-number-md-font-size: 2.25rem;
     --text-big-number-lg-font-size: 3.5rem;
+    --text-amount-lg-font-size: 3.5rem;
+    --text-amount-md-font-size: 1.5rem;
     --text-heading-2xl-font-size: 3.5rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
@@ -833,12 +886,16 @@
   --surface-0: #FFFFFF;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
+  --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
+  --surface-250: #DADADA;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
+  --surface-750: #2B2B2B;
+  --surface-775: #242424;
   --surface-800: #1A1A1A;
   --surface-900: #141414;
   --surface-950: #0A0A0A;
@@ -867,8 +924,8 @@
   --bg-selected: #E5E5E5;
   --bg-contrast: #141414;
   --bg-disabled: #E5E5E5;
-  --border-default: #00000014;
-  --border-muted: #00000014;
+  --border-default: #DADADA;
+  --border-muted: #ECECEC;
   --border-strong: #000000;
   --border-selected: #F3652B;
   --text-default: #141414;
@@ -904,12 +961,16 @@
   --surface-0: #FFFFFF;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
+  --surface-150: #ECECEC;
   --surface-200: #E5E5E5;
+  --surface-250: #DADADA;
   --surface-300: #B2B2B2;
   --surface-400: #999999;
   --surface-500: #808080;
   --surface-600: #666666;
   --surface-700: #4D4D4D;
+  --surface-750: #2B2B2B;
+  --surface-775: #242424;
   --surface-800: #1A1A1A;
   --surface-900: #141414;
   --surface-950: #0A0A0A;
@@ -938,8 +999,8 @@
   --bg-selected: #1A1A1A;
   --bg-contrast: #FAFAFA;
   --bg-disabled: #1A1A1A;
-  --border-default: #FFFFFF1A;
-  --border-muted: #FFFFFF0D;
+  --border-default: #2B2B2B;
+  --border-muted: #242424;
   --border-strong: #FFFFFF;
   --border-selected: #F3652B;
   --text-default: #FAFAFA;
@@ -992,8 +1053,8 @@
 }
 
 @keyframes highlight {
-  0% { background-color: var(--surface-hover); font-weight: 500; }
-  100% { background-color: var(--surface-hover); font-weight: 500; }
+  0%, 40% { background-color: var(--surface-hover); font-weight: 500; }
+  100% { background-color: transparent; font-weight: 400; }
 }
 
 @keyframes shimmer {
@@ -1001,6 +1062,16 @@
   100% { background-position: -200% 0; }
 }
 
+@keyframes pageEnter {
+  0% { opacity: 0; translate: calc(var(--page-enter-distance, var(--layout-boundary-inline)) * -1) 0; }
+  100% { opacity: 1; translate: 0 0; }
+}
+
+@keyframes contentEnter {
+  0% { opacity: 0; translate: 0 var(--spacing-xs); }
+  100% { opacity: 1; translate: 0 0; }
+}
+
 @keyframes popupScaleIn {
   0% { opacity: 0; transform: scale(0.9); }
   100% { opacity: 1; transform: scale(1); }
@@ -1096,6 +1167,29 @@
   font-family: var(--text-big-number-lg-font-family);
 }
 
+@utility text-amount-lg {
+  text-wrap-style: var(--text-amount-lg-text-wrap-style);
+  font-size: var(--text-amount-lg-font-size);
+  line-height: var(--text-amount-lg-line-height);
+  font-weight: var(--text-amount-lg-font-weight);
+  letter-spacing: var(--text-amount-lg-letter-spacing);
+}
+
+@utility text-amount-md {
+  text-wrap-style: var(--text-amount-md-text-wrap-style);
+  font-size: var(--text-amount-md-font-size);
+  line-height: var(--text-amount-md-line-height);
+  font-weight: var(--text-amount-md-font-weight);
+  letter-spacing: var(--text-amount-md-letter-spacing);
+}
+
+@utility text-amount-sm {
+  font-size: var(--text-amount-sm-font-size);
+  line-height: var(--text-amount-sm-line-height);
+  font-weight: var(--text-amount-sm-font-weight);
+  letter-spacing: var(--text-amount-sm-letter-spacing);
+}
+
 @utility text-heading-2xl {
   font-size: var(--text-heading-2xl-font-size);
   line-height: var(--text-heading-2xl-line-height);
@@ -1164,6 +1258,15 @@
   letter-spacing: var(--text-label-code-sm-letter-spacing);
 }
 
+@utility text-body-code-sm {
+  text-wrap-style: var(--text-body-code-sm-text-wrap-style);
+  font-family: var(--text-body-code-sm-font-family);
+  font-size: var(--text-body-code-sm-font-size);
+  line-height: var(--text-body-code-sm-line-height);
+  font-weight: var(--text-body-code-sm-font-weight);
+  letter-spacing: var(--text-body-code-sm-letter-spacing);
+}
+
 @utility text-label-code-md {
   font-family: var(--text-label-code-md-font-family);
   font-size: var(--text-label-code-md-font-size);
@@ -1182,24 +1285,40 @@
 
 @utility text-body-lg {
   font-size: var(--text-body-lg-font-size);
+  font-weight: var(--text-body-lg-font-weight);
   line-height: var(--text-body-lg-line-height);
 }
 
 @utility text-body-md {
   font-size: var(--text-body-md-font-size);
+  font-weight: var(--text-body-md-font-weight);
   line-height: var(--text-body-md-line-height);
 }
 
+@utility text-body-prose-md {
+  font-size: var(--text-body-prose-md-font-size);
+  font-weight: var(--text-body-prose-md-font-weight);
+  line-height: var(--text-body-prose-md-line-height);
+}
+
 @utility text-body-sm {
   font-size: var(--text-body-sm-font-size);
+  font-weight: var(--text-body-sm-font-weight);
   line-height: var(--text-body-sm-line-height);
 }
 
 @utility text-body-xs {
   font-size: var(--text-body-xs-font-size);
+  font-weight: var(--text-body-xs-font-weight);
   line-height: var(--text-body-xs-line-height);
 }
 
+@utility text-body-xxs {
+  font-size: var(--text-body-xxs-font-size);
+  font-weight: var(--text-body-xxs-font-weight);
+  line-height: var(--text-body-xxs-line-height);
+}
+
 @utility text-tag-sm {
   font-size: var(--text-tag-sm-font-size);
   line-height: var(--text-tag-sm-line-height);
@@ -1212,11 +1331,6 @@
   font-weight: var(--text-tag-md-font-weight);
 }
 
-@utility text-body-xxs {
-  font-size: var(--text-body-xxs-font-size);
-  line-height: var(--text-body-xxs-line-height);
-}
-
 @utility text-overline-md {
   font-family: var(--text-overline-md-font-family);
   font-size: var(--text-overline-md-font-size);
@@ -1271,6 +1385,77 @@
   .text-link { transition: none; }
 }
 
+@utility layout-boundary {
+  padding-inline: var(--layout-boundary-inline);
+  padding-block-start: var(--layout-boundary-start);
+  padding-block-end: var(--layout-boundary-end);
+}
+
+@utility layout-boundary-inline {
+  padding-inline: var(--layout-boundary-inline);
+}
+
+@utility layout-section-start {
+  margin-block-start: var(--layout-boundary-start);
+  &:first-child { margin-block-start: 0; }
+}
+
+@utility layout-group-start {
+  margin-block-start: var(--layout-group-gap);
+  &:first-child { margin-block-start: 0; }
+}
+
+@utility layout-column {
+  --layout-column-measure: var(--layout-measure);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-focused {
+  --layout-column-measure: var(--layout-measure-focused);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-form {
+  --layout-column-measure: var(--layout-measure-form);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-form-create {
+  --layout-column-measure: var(--layout-measure-form-create);
+  --layout-measure-control: var(--container-md);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-content {
+  --layout-column-measure: var(--layout-measure-content);
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--layout-column-measure);
+  &:is(.layout-boundary, .layout-boundary-inline) { max-width: calc(var(--layout-column-measure) + 2 * var(--layout-boundary-inline)); }
+}
+
+@utility layout-column-site {
+  margin-inline: auto;
+  width: 100%;
+  max-width: min(var(--layout-measure-site), 100% - 2 * var(--layout-boundary-inline));
+}
+
+@utility layout-field-control {
+  &:not(#\#) { display: flex; flex: 1 1 0%; justify-content: flex-end; max-width: var(--layout-measure-control); }
+}
+
 @utility bg-surface-0 { background-color: var(--surface-0); }
 @utility text-surface-0 { color: var(--surface-0); }
 @utility border-surface-0 { border-color: var(--surface-0); }
@@ -1280,9 +1465,15 @@
 @utility bg-surface-100 { background-color: var(--surface-100); }
 @utility text-surface-100 { color: var(--surface-100); }
 @utility border-surface-100 { border-color: var(--surface-100); }
+@utility bg-surface-150 { background-color: var(--surface-150); }
+@utility text-surface-150 { color: var(--surface-150); }
+@utility border-surface-150 { border-color: var(--surface-150); }
 @utility bg-surface-200 { background-color: var(--surface-200); }
 @utility text-surface-200 { color: var(--surface-200); }
 @utility border-surface-200 { border-color: var(--surface-200); }
+@utility bg-surface-250 { background-color: var(--surface-250); }
+@utility text-surface-250 { color: var(--surface-250); }
+@utility border-surface-250 { border-color: var(--surface-250); }
 @utility bg-surface-300 { background-color: var(--surface-300); }
 @utility text-surface-300 { color: var(--surface-300); }
 @utility border-surface-300 { border-color: var(--surface-300); }
@@ -1298,6 +1489,12 @@
 @utility bg-surface-700 { background-color: var(--surface-700); }
 @utility text-surface-700 { color: var(--surface-700); }
 @utility border-surface-700 { border-color: var(--surface-700); }
+@utility bg-surface-750 { background-color: var(--surface-750); }
+@utility text-surface-750 { color: var(--surface-750); }
+@utility border-surface-750 { border-color: var(--surface-750); }
+@utility bg-surface-775 { background-color: var(--surface-775); }
+@utility text-surface-775 { color: var(--surface-775); }
+@utility border-surface-775 { border-color: var(--surface-775); }
 @utility bg-surface-800 { background-color: var(--surface-800); }
 @utility text-surface-800 { color: var(--surface-800); }
 @utility border-surface-800 { border-color: var(--surface-800); }