@netlify/spark-ui 2.2.0 → 2.4.0

package/packages/styles/fonts.css

@@ -60,11 +60,39 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+
 /* Text */
 body {
   font-family: var(--font-family-text);
   font-size: var(--font-size-text-lg);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--ntl-font-weight-regular);
   line-height: var(--line-height-text);
   color: var(--body-text-color);
 }
@@ -77,7 +105,7 @@ strong {
 i,
 em {
   font-style: italic;
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--ntl-font-weight-regular);
 }
 
 /* Headings */
@@ -87,7 +115,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-family-display);
+  font-family: var(--ntl-font-family-heading);
 }
 
 h1,
@@ -183,6 +211,6 @@ code,
 kbd {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-text-xs);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--ntl-font-weight-regular);
   line-height: var(--line-height-text);
 }

package/packages/styles/layout.css

@@ -23,7 +23,7 @@
   display: grid;
   grid-template-columns: repeat(
     var(--ntl-grid-repeat-count, auto-fill),
-    minmax(min(100%, var(--ntl-grid-column-min-size)), 1fr)
+    minmax(min(100%, var(--ntl-grid-column-min-size, 300px)), 1fr)
   );
   gap: var(--ntl-grid-gap, var(--space-m));
   grid-auto-rows: var(--ntl-grid-auto-rows, auto);
@@ -35,7 +35,7 @@
   gap: var(--ntl-grid-gap, var(--space-m));
 
   > * {
-    flex: 1 1 var(--ntl-grid-column-min-size);
+    flex: 1 1 var(--ntl-grid-column-min-size, 300px);
   }
 }
 

package/packages/styles/tokens.compat.css

@@ -294,6 +294,8 @@
   --button-primary-bg-color: var(--ntl-button-primary-bg-color);
   --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
   --button-primary-text-color: var(--ntl-button-primary-text-color);
+  --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
+  --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
   --button-secondary-text-color: var(--ntl-button-secondary-text-color);
   --card-bg-color: var(--ntl-card-bg-color);
   --card-border-color: var(--ntl-card-border-color);
@@ -303,7 +305,9 @@
   --color-bg-2: var(--ntl-color-bg-2);
   --color-bg-3: var(--ntl-color-bg-3);
   --color-bg-inverse: var(--ntl-color-bg-inverse);
+  --color-border-default: var(--ntl-color-border-default);
   --color-border-strong: var(--ntl-color-border-strong);
+  --color-border-subtle: var(--ntl-color-border-subtle);
   --color-brand-primary: var(--ntl-color-brand-primary);
   --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
   --color-brand-secondary: var(--ntl-color-brand-secondary);
@@ -325,8 +329,10 @@
   --color-link-default: var(--ntl-color-link-default);
   --color-link-hover: var(--ntl-color-link-hover);
   --color-link-inverse: var(--ntl-color-link-inverse);
+  --color-logo-inactive: var(--ntl-color-logo-inactive);
   --color-logo-spark: var(--ntl-color-logo-spark);
   --color-logo-type: var(--ntl-color-logo-type);
+  --color-stroke: var(--ntl-color-stroke);
   --color-success-bg: var(--ntl-color-success-bg);
   --color-success-border: var(--ntl-color-success-border);
   --color-success-text: var(--ntl-color-success-text);
@@ -340,6 +346,18 @@
   --color-warning-border: var(--ntl-color-warning-border);
   --color-warning-text: var(--ntl-color-warning-text);
   --eyebrow-text-color: var(--ntl-eyebrow-text-color);
+  --font-family-display: var(--ntl-font-family-display);
+  --font-family-mono: var(--ntl-font-family-mono);
+  --font-family-text: var(--ntl-font-family-text);
+  --font-size-display-2xl: var(--ntl-font-size-display-2xl);
+  --font-size-display-2xs: var(--ntl-font-size-display-2xs);
+  --font-size-display-3xl: var(--ntl-font-size-display-3xl);
+  --font-size-display-4xl: var(--ntl-font-size-display-4xl);
+  --font-size-display-lg: var(--ntl-font-size-display-lg);
+  --font-size-display-md: var(--ntl-font-size-display-md);
+  --font-size-display-sm: var(--ntl-font-size-display-sm);
+  --font-size-display-xl: var(--ntl-font-size-display-xl);
+  --font-size-display-xs: var(--ntl-font-size-display-xs);
   --gold-000: var(--ntl-gold-000);
   --gold-100: var(--ntl-gold-100);
   --gold-200: var(--ntl-gold-200);
@@ -361,6 +379,7 @@
   --green-800: var(--ntl-green-800);
   --green-900: var(--ntl-green-900);
   --heading-text-color: var(--ntl-heading-text-color);
+  --line-height-heading: var(--ntl-line-height-heading);
   --neutral-000: var(--ntl-neutral-000);
   --neutral-100: var(--ntl-neutral-100);
   --neutral-200: var(--ntl-neutral-200);
@@ -431,6 +450,10 @@
   --search-source-list-color: var(--ntl-search-source-list-color);
   --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
   --search-user-message-color: var(--ntl-search-user-message-color);
+  --shadow-deep: var(--ntl-shadow-deep);
+  --shadow-heavy: var(--ntl-shadow-heavy);
+  --shadow-hover: var(--ntl-shadow-hover);
+  --shadow-light: var(--ntl-shadow-light);
   --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
   --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
   --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
@@ -451,7 +474,107 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root, [data-brand="hues"] {
+  :root {
+    --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
+    --badge-bg-color: var(--ntl-badge-bg-color);
+    --badge-border-color: var(--ntl-badge-border-color);
+    --badge-text-color: var(--ntl-badge-text-color);
+    --blockquote-accent-color: var(--ntl-blockquote-accent-color);
+    --button-outline-bg-color: var(--ntl-button-outline-bg-color);
+    --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
+    --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
+    --button-outline-text-color: var(--ntl-button-outline-text-color);
+    --button-primary-bg-color: var(--ntl-button-primary-bg-color);
+    --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
+    --button-primary-text-color: var(--ntl-button-primary-text-color);
+    --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
+    --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
+    --button-secondary-text-color: var(--ntl-button-secondary-text-color);
+    --card-bg-color: var(--ntl-card-bg-color);
+    --card-border-color: var(--ntl-card-border-color);
+    --card-border-color-hover: var(--ntl-card-border-color-hover);
+    --code-bg-color: var(--ntl-code-bg-color);
+    --color-bg: var(--ntl-color-bg);
+    --color-bg-2: var(--ntl-color-bg-2);
+    --color-bg-3: var(--ntl-color-bg-3);
+    --color-bg-inverse: var(--ntl-color-bg-inverse);
+    --color-bg-translucent: var(--ntl-color-bg-translucent);
+    --color-border-default: var(--ntl-color-border-default);
+    --color-border-strong: var(--ntl-color-border-strong);
+    --color-border-subtle: var(--ntl-color-border-subtle);
+    --color-brand-primary: var(--ntl-color-brand-primary);
+    --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
+    --color-brand-secondary: var(--ntl-color-brand-secondary);
+    --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
+    --color-disabled-bg: var(--ntl-color-disabled-bg);
+    --color-disabled-border: var(--ntl-color-disabled-border);
+    --color-disabled-text: var(--ntl-color-disabled-text);
+    --color-highlight-bg: var(--ntl-color-highlight-bg);
+    --color-highlight-border: var(--ntl-color-highlight-border);
+    --color-highlight-text: var(--ntl-color-highlight-text);
+    --color-icon: var(--ntl-color-icon);
+    --color-info-bg: var(--ntl-color-info-bg);
+    --color-info-border: var(--ntl-color-info-border);
+    --color-info-text: var(--ntl-color-info-text);
+    --color-invalid-bg: var(--ntl-color-invalid-bg);
+    --color-invalid-border: var(--ntl-color-invalid-border);
+    --color-invalid-text: var(--ntl-color-invalid-text);
+    --color-link: var(--ntl-color-link);
+    --color-link-default: var(--ntl-color-link-default);
+    --color-link-hover: var(--ntl-color-link-hover);
+    --color-link-inverse: var(--ntl-color-link-inverse);
+    --color-logo-inactive: var(--ntl-color-logo-inactive);
+    --color-logo-spark: var(--ntl-color-logo-spark);
+    --color-logo-type: var(--ntl-color-logo-type);
+    --color-stroke: var(--ntl-color-stroke);
+    --color-success-bg: var(--ntl-color-success-bg);
+    --color-success-border: var(--ntl-color-success-border);
+    --color-success-text: var(--ntl-color-success-text);
+    --color-text: var(--ntl-color-text);
+    --color-text-accent: var(--ntl-color-text-accent);
+    --color-text-default: var(--ntl-color-text-default);
+    --color-text-inverse: var(--ntl-color-text-inverse);
+    --color-text-weak: var(--ntl-color-text-weak);
+    --color-text-weaker: var(--ntl-color-text-weaker);
+    --color-warning-bg: var(--ntl-color-warning-bg);
+    --color-warning-border: var(--ntl-color-warning-border);
+    --color-warning-text: var(--ntl-color-warning-text);
+    --eyebrow-text-color: var(--ntl-eyebrow-text-color);
+    --filter-invert: var(--ntl-filter-invert);
+    --heading-text-color: var(--ntl-heading-text-color);
+    --neutral-000: var(--ntl-neutral-000);
+    --neutral-100: var(--ntl-neutral-100);
+    --neutral-200: var(--ntl-neutral-200);
+    --neutral-300: var(--ntl-neutral-300);
+    --neutral-400: var(--ntl-neutral-400);
+    --neutral-500: var(--ntl-neutral-500);
+    --neutral-600: var(--ntl-neutral-600);
+    --neutral-700: var(--ntl-neutral-700);
+    --neutral-800: var(--ntl-neutral-800);
+    --neutral-900: var(--ntl-neutral-900);
+    --search-answer-message-color: var(--ntl-search-answer-message-color);
+    --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
+    --search-bg-color: var(--ntl-search-bg-color);
+    --search-highlight-color: var(--ntl-search-highlight-color);
+    --search-icon-color: var(--ntl-search-icon-color);
+    --search-input-bg-color: var(--ntl-search-input-bg-color);
+    --search-loading-color: var(--ntl-search-loading-color);
+    --search-source-list-color: var(--ntl-search-source-list-color);
+    --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
+    --search-user-message-color: var(--ntl-search-user-message-color);
+    --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
+    --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
+    --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
+    --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
+    --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
+    --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
+    --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
+    --title-text-color: var(--ntl-title-text-color);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-brand="hues"] {
     --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
     --badge-bg-color: var(--ntl-badge-bg-color);
     --badge-border-color: var(--ntl-badge-border-color);