@node-core/ui-components 0.0.1 → 1.0.1-f948ce8a25da149fc61135f90a43e189c4909f5d

package/styles/base.css

@@ -0,0 +1,17 @@
+* {
+  @apply subpixel-antialiased;
+}
+
+html,
+body {
+  @apply h-full;
+}
+
+body {
+  @apply font-open-sans
+    bg-white
+    text-neutral-950
+    motion-safe:scroll-smooth
+    dark:bg-neutral-950
+    dark:text-white;
+}

package/styles/effects.css

@@ -0,0 +1,12 @@
+h1.special {
+  @apply bg-gradient-subtle-gray
+    dark:bg-gradient-subtle-white
+    bg-clip-text
+    text-4xl
+    leading-[3rem]
+    -tracking-[0.045rem]
+    [-webkit-text-fill-color:transparent]
+    md:text-5xl
+    md:leading-[4rem]
+    md:-tracking-[0.06rem];
+}

package/styles/index.css

@@ -0,0 +1,34 @@
+@charset "utf-8";
+
+/* IDE Support
+ * We recommend Stylelint and Tailwind Extensions for better IDE support.
+ * @see https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
+ * @see https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
+*/
+
+@import 'tailwindcss';
+@import './theme.css';
+@import './animations.css';
+@import './effects.css';
+@import './base.css' layer(utilities);
+@import './markdown.css' layer(utilities);
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@custom-variant aria-current (&[aria-current="page"]);

package/styles/markdown.css

@@ -0,0 +1,173 @@
+main {
+  @apply flex
+    w-full
+    flex-col
+    gap-6;
+
+  hr {
+    @apply w-full
+      border-t
+      border-t-neutral-200
+      bg-white
+      dark:border-t-neutral-900
+      dark:bg-neutral-950;
+  }
+
+  h1 {
+    @apply text-3xl;
+  }
+
+  h2 {
+    @apply text-2xl;
+  }
+
+  h3 {
+    @apply text-xl;
+  }
+
+  h4 {
+    @apply text-lg;
+  }
+
+  h5,
+  h6 {
+    @apply text-base;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold
+      text-neutral-900
+      dark:text-white;
+
+    &[id] a {
+      @apply text-neutral-900
+        dark:text-white;
+    }
+  }
+
+  strong {
+    @apply font-semibold;
+  }
+
+  code {
+    @apply font-ibm-plex-mono
+      rounded-xs
+      bg-neutral-100
+      px-1
+      text-base
+      font-semibold
+      text-neutral-900
+      dark:bg-neutral-900
+      dark:text-white;
+  }
+
+  p {
+    @apply text-neutral-900
+      dark:text-white;
+  }
+
+  /* link that isn't inside a heading */
+  a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
+  .anchor {
+    @apply max-xs:font-semibold
+      text-green-600
+      dark:text-green-400;
+
+    &:hover {
+      @apply text-green-900
+        dark:text-green-300;
+    }
+
+    &[role='button'] {
+      @apply max-xs:font-regular;
+    }
+
+    &:has(code) {
+      @apply max-xs:decoration-neutral-800
+        dark:max-xs:decoration-neutral-200;
+
+      code {
+        @apply text-inherit;
+      }
+    }
+  }
+
+  ul {
+    @apply list-disc
+      pl-9
+      pr-5
+      leading-6
+      text-neutral-900
+      dark:text-white;
+
+    li div:has(> pre) {
+      @apply my-1!;
+    }
+  }
+
+  ol {
+    @apply list-decimal
+      px-5
+      leading-6
+      text-neutral-900
+      dark:text-white;
+
+    li div:has(> pre) {
+      @apply my-1!;
+    }
+  }
+
+  table {
+    @apply rounded-xs
+      mb-1
+      w-full
+      border-separate
+      border-spacing-0
+      border
+      border-neutral-200
+      text-left
+      text-sm
+      dark:border-neutral-800;
+
+    th,
+    td {
+      @apply max-xs:block
+        max-xs:border-l-0
+        border
+        border-r-0
+        border-t-0
+        border-neutral-200
+        px-4
+        py-2
+        text-neutral-900
+        dark:border-neutral-800
+        dark:text-white;
+
+      > a {
+        @apply pr-2;
+      }
+    }
+
+    th {
+      @apply font-semibold;
+    }
+
+    tr:last-child td {
+      @apply sm:border-b-0;
+
+      &:last-child {
+        @apply max-xs:border-b-0;
+      }
+    }
+
+    td:first-child,
+    th:first-child {
+      @apply sm:border-l-0;
+    }
+  }
+}

package/styles/theme.css

@@ -0,0 +1,175 @@
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@source '../Common';
+@source '../Containers';
+@source '../Icons';
+
+@theme {
+  --color-green-100: #edf2eb;
+  --color-green-200: #c5e5b4;
+  --color-green-300: #99cc7d;
+  --color-green-400: #84ba64;
+  --color-green-500: #5fa04e;
+  --color-green-600: #417e38;
+  --color-green-700: #2c682c;
+  --color-green-800: #2c682c;
+  --color-green-900: #1a3f1d;
+  --color-neutral-100: #f6f7f9;
+  --color-neutral-200: #e9edf0;
+  --color-neutral-300: #d9e1e4;
+  --color-neutral-400: #cbd4d9;
+  --color-neutral-500: #b1bcc2;
+  --color-neutral-600: #929fa5;
+  --color-neutral-700: #6e7b83;
+  --color-neutral-800: #556066;
+  --color-neutral-900: #2c3437;
+  --color-neutral-950: #0d121c;
+  --color-danger-100: #fbf1f0;
+  --color-danger-200: #fad3d4;
+  --color-danger-300: #fab6b7;
+  --color-danger-400: #fa8e8e;
+  --color-danger-500: #f65354;
+  --color-danger-600: #de1a1b;
+  --color-danger-700: #b80c0c;
+  --color-danger-800: #900e0e;
+  --color-danger-900: #661514;
+  --color-warning-100: #fdf3e7;
+  --color-warning-200: #fad9b0;
+  --color-warning-300: #f5bc75;
+  --color-warning-400: #e99c40;
+  --color-warning-500: #d07912;
+  --color-warning-600: #ae5f00;
+  --color-warning-700: #8b4d04;
+  --color-warning-800: #683d08;
+  --color-warning-900: #4d2f0b;
+  --color-info-100: #e9f4fa;
+  --color-info-200: #bce6fc;
+  --color-info-300: #8ed4f8;
+  --color-info-400: #52baed;
+  --color-info-500: #229ad6;
+  --color-info-600: #0c7bb3;
+  --color-info-700: #066291;
+  --color-info-800: #074d71;
+  --color-info-900: #0a3953;
+  --color-accent1-100: #f7f1fb;
+  --color-accent1-200: #ead9fb;
+  --color-accent1-300: #dbbdf9;
+  --color-accent1-400: #c79bf2;
+  --color-accent1-500: #af74e8;
+  --color-accent1-600: #9756d6;
+  --color-accent1-700: #7d3cbe;
+  --color-accent1-800: #642b9e;
+  --color-accent1-900: #361b52;
+  --color-accent2-100: #fbf0f4;
+  --color-accent2-200: #fbd4e6;
+  --color-accent2-300: #fbb4d2;
+  --color-accent2-400: #f68bb7;
+  --color-accent2-500: #ed5393;
+  --color-accent2-600: #d6246e;
+  --color-accent2-700: #b01356;
+  --color-accent2-800: #8b1245;
+  --color-accent2-900: #411526;
+  --color-pulse-100: #0000330f;
+  --color-pulse-200: #00002d17;
+  --color-pulse-300: #ddeaf814;
+  --color-pulse-400: #d3edf81d;
+  --color-white: #fff;
+  --color-transparent: 'transparent';
+  --color-shadow: #101828;
+  --shadow-xs: 0px 1px 2px 0px --alpha(var(--color-shadow, #101828) / 5%);
+  --shadow-lg:
+    0px 4px 6px -2px --alpha(var(--color-shadow, #101828) / 3%),
+    0px 12px 16px -4px --alpha(var(--color-shadow, #101828) / 8%);
+
+  /* TODO(@avivkeller): The --font-xyz-xyz variable is assigned by Next.js in apps/site.
+      Ideally, this package shouldn't depend on the consuming application's
+      variables, it should remain self-contained. */
+  --font-open-sans: var(--font-open-sans);
+  --font-ibm-plex-mono: var(--font-ibm-plex-mono);
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-xs: 0.75rem;
+  --font-xs-line-height: 1rem;
+  --font-sm: 0.87rem;
+  --font-sm-line-height: 1.25rem;
+  --font-base: 1rem;
+  --font-base-line-height: 1.5rem;
+  --font-lg: 1.125rem;
+  --font-lg-line-height: 1.75rem;
+  --font-xl: 1.25rem;
+  --font-xl-line-height: 1.875rem;
+  --font-2xl: 1.5rem;
+  --font-2xl-line-height: 2rem;
+  --font-3xl: 1.875rem;
+  --font-3xl-line-height: 2.25rem;
+  --font-4xl: 2.25rem;
+  --font-4xl-line-height: 2.5rem;
+  --font-5xl: 3rem;
+  --font-5xl-line-height: 3rem;
+  --font-6xl: 3.75rem;
+  --font-6xl-line-height: 3.75rem;
+  --font-7xl: 4.5rem;
+  --font-7xl-line-height: 4.5rem;
+  --breakpoint-xs: 670px;
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+@utility max-w-8xl {
+  max-width: 95rem;
+}
+
+@utility bg-gradient-subtle-dark {
+  background-image: linear-gradient(
+    180deg,
+    --alpha(var(--color-neutral-900) / 50%) 0%,
+    --alpha(var(--color-neutral-900) / 0%) 48.32%
+  );
+}
+
+@utility bg-gradient-subtle {
+  background-image: linear-gradient(
+    180deg,
+    --alpha(var(--color-neutral-100) / 50%) 0%,
+    --alpha(var(--color-neutral-100) / 0%) 48.32%
+  );
+}
+
+@utility bg-gradient-subtle-gray {
+  background-image: linear-gradient(
+    180deg,
+    var(--color-neutral-900) 0%,
+    --alpha(var(--color-neutral-900) / 80%) 100%
+  );
+}
+
+@utility bg-gradient-subtle-white {
+  background-image: linear-gradient(
+    180deg,
+    var(--color-white) 0%,
+    --alpha(var(--color-white) / 80%) 100%
+  );
+}
+
+@utility bg-gradient-glow-backdrop {
+  background-image: radial-gradient(
+    8em circle at calc(50%) 10px,
+    var(--color-green-400),
+    transparent 30%
+  );
+}
+
+@utility bg-gradient-radial {
+  background-image: radial-gradient(
+    var(--tw-gradient-from),
+    var(--tw-gradient-to)
+  );
+}
+
+@utility text-inherit {
+  color: inherit;
+}

package/types.ts

@@ -0,0 +1,25 @@
+import type {
+  SVGProps,
+  AnchorHTMLAttributes,
+  ReactElement,
+  JSXElementConstructor,
+  ReactNode,
+} from 'react';
+
+export type LogoVariant = 'default' | 'pride';
+export type TailwindSVG = SVGProps<SVGSVGElement> & { tw?: string };
+export type BlogPreviewType = 'announcements' | 'release' | 'vulnerability';
+export type LinkLike =
+  | JSXElementConstructor<AnchorHTMLAttributes<HTMLAnchorElement>>
+  | 'a';
+
+export type FormattedMessage =
+  | string
+  | ReactElement<HTMLElement, string | JSXElementConstructor<HTMLElement>>
+  | ReadonlyArray<ReactNode>;
+
+export type SimpleLocaleConfig = {
+  code: string;
+  localName: string;
+  name: string;
+};

package/README.md

@@ -1 +0,0 @@
-nodejs.org