@graphprotocol/gds-css 0.0.1

package/src/utils/wrapSelector.ts

@@ -0,0 +1,60 @@
+/**
+ * Wraps a CSS selector with a pseudo-class function like :is() or :not(). Returns the simplest
+ * equivalent selector by applying logical simplifications.
+ *
+ * @param pseudo - The pseudo-class to use (':is' or ':not').
+ * @param selector - The CSS selector to wrap.
+ * @returns The wrapped or simplified selector.
+ */
+export function wrapSelector(pseudo: ':is' | ':not', selector: string): string {
+  // Trim whitespace
+  selector = selector.trim()
+
+  // If there's nothing to wrap, return an empty string
+  if (!selector) {
+    return ''
+  }
+
+  // Check if the selector matches the pattern :something(...)
+  const pseudoMatch = selector.match(/^:(\w+)\(/)
+  if (pseudoMatch) {
+    const existingPseudo = `:${pseudoMatch[1]}`
+    const startIndex = existingPseudo.length + 1 // Length of ':something('
+
+    // Find the matching closing parenthesis for the opening one
+    let depth = 0
+
+    for (let i = startIndex; i < selector.length; i++) {
+      if (selector[i] === '(') depth++
+      else if (selector[i] === ')') {
+        if (depth === 0) {
+          // Found the matching closing parenthesis
+          if (i === selector.length - 1) {
+            // The entire selector is wrapped in a single pseudo-class function
+            if (pseudo === ':is') {
+              // Wrapping anything in :is() doesn't change its behavior
+              // :is(:not(...)) is equivalent to :not(...)
+              // :is(:is(...)) is equivalent to :is(...)
+              // :is(:where(...)) is equivalent to :where(...)
+              return selector
+            }
+            if (pseudo === ':not' && existingPseudo === ':not') {
+              // Double negation: :not(:not(...)) is equivalent to :is(...)
+              return `:is(${selector.slice(startIndex, -1)})`
+            }
+            if (pseudo === ':not' && existingPseudo === ':is') {
+              // :not(:is(...)) is equivalent to :not(...)
+              return `:not(${selector.slice(startIndex, -1)})`
+            }
+            // Otherwise wrap normally
+          }
+          break
+        }
+        depth--
+      }
+    }
+  }
+
+  // Otherwise, wrap the selector
+  return `${pseudo}(${selector})`
+}

package/styles/fonts.css

@@ -0,0 +1,83 @@
+/* ================================================================= *
+ * EuclidCircular (font-sans)                                        *
+ * ================================================================= */
+
+/* 300 (font-light) */
+@font-face {
+  src: url('./fonts/EuclidCircularA-Light.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  src: url('./fonts/EuclidCircularA-LightItalic.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 400 (font-regular) */
+@font-face {
+  src: url('./fonts/EuclidCircularA-Regular.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  src: url('./fonts/EuclidCircularA-RegularItalic.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 500 (font-medium) */
+@font-face {
+  src: url('./fonts/EuclidCircularA-Medium.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  src: url('./fonts/EuclidCircularA-MediumItalic.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 600 (font-semibold) */
+@font-face {
+  src: url('./fonts/EuclidCircularA-Semibold.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  src: url('./fonts/EuclidCircularA-SemiboldItalic.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* 700 (font-bold) */
+@font-face {
+  src: url('./fonts/EuclidCircularA-Bold.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  src: url('./fonts/EuclidCircularA-BoldItalic.woff2') format('woff2');
+  font-family: 'EuclidCircular';
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}

package/styles/global.css

@@ -0,0 +1,203 @@
+@layer base.resets {
+  /* Root and body styles */
+  :root {
+    @apply scroll-smooth bg-canvas text-default scheme-only-dark tab-4;
+    interpolate-size: allow-keywords;
+  }
+  body {
+    @apply text-start font-sans text-16 font-regular antialiased;
+    text-size-adjust: none; /* Fix weird font issues on mobile */
+    font-synthesis: none; /* Prevent accidental faux bold, italic, etc. */
+  }
+
+  /**
+   * Prevent horizontal scrolling when elements accidentally (or intentionally) overflow the page.
+   * It needs to be applied to both `:root` and `body` to work properly across all browsers.
+   */
+  :root,
+  body {
+    @apply overflow-x-clip;
+  }
+
+  /* Test if style queries are supported. */
+  :root {
+    --gds-style-queries-test: testing;
+  }
+  body {
+    @apply @style-[--gds-style-queries-test=testing]:[--gds-style-queries-test:success];
+  }
+
+  /**
+   * Provide a custom property that can be used to invert some values in RTL
+   * (e.g. `translate-x-[calc(100%*var(--gds-rtl-factor))]`).
+   */
+  :root,
+  [dir='ltr'] {
+    --gds-rtl-factor: 1;
+  }
+  [dir='rtl'] {
+    --gds-rtl-factor: -1;
+  }
+
+  /**
+   * Core resets not covered by Tailwind's Preflight.
+   * These are critical GDS-specific resets that enable our design patterns.
+   */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    /* Make absolutely-positioned elements relative to their parent by default */
+    @apply relative;
+    /* Prevent flex items from overflowing */
+    @apply min-h-0 min-w-0;
+    /* Better defaults for background images and masks */
+    @apply bg-center bg-no-repeat mask-center mask-no-repeat;
+    /**
+     * Better defaults for outlines.
+     * - `outline-0` makes them work like borders, which are reset similarly in Preflight
+     *   (https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css#L15)
+     * - `outline-offset-1` and `outline-(--border-color-focus)` are in case a `transition` is used on an element with a focus indicator.
+     *   Because `transition` includes `outline-color`, only applying `outline-(--border-color-focus)` on focus-visible would result in
+     *   an unexpected color transition (from `auto` to `focus`) when the indicator appears. And if a consumer actually wants to transition
+     *   the focus indicator's color (with e.g. `outline transition not-focus-visible:outline-transparent`), only applying `outline-offset-1`
+     *   on `:focus-visible` would make the outline "jump" when it appears or disappears, since the default offset is 0.
+     */
+    @apply outline-0 outline-offset-1 outline-(--border-color-focus);
+    /**
+     * Default focus indicator.
+     * Technically, we shouldn't have to repeat the `outline-offset-1 outline-(--border-color-focus)` from above, but Firefox has a bug
+     * where resetting the `outline-style` and/or `outline-width` (maybe just when done in a state like `:focus-visible`) also resets
+     * the `outline-color`, so better be safe than sorry. TODO: Investigate more and report the bug.
+     */
+    &:focus-visible {
+      @apply outline outline-offset-1 outline-(--border-color-focus);
+    }
+    /* Prevent accidental animations (e.g. `text-20 sm:text-24 duration-200`) */
+    @apply transition-none;
+  }
+
+  /* Default clickable styles */
+  * {
+    /* Turn the cursor into a pointer when hovering clickable elements (except checked radio buttons) */
+    @apply clickable:[:where(:not(.gds-checkable-label:has(input[type=radio]:checked)))]:cursor-pointer;
+    /* Remove the text cursor of disabled links */
+    @apply clickable-disabled:cursor-default;
+    /* Set some custom properties to detect the state of the nearest clickable */
+    @apply any-clickable:[--gds-clickable-pointer:idle];
+    @apply clickable:[--gds-clickable-pointer:var(--gds-state-pointer,idle)];
+    @apply clickable-hover:[--gds-clickable-pointer:var(--gds-state-pointer,hover)];
+    @apply clickable-active:[--gds-clickable-pointer:var(--gds-state-pointer,active)];
+    @apply any-clickable:[--gds-clickable-focus:false];
+    @apply clickable:[--gds-clickable-focus:var(--gds-state-focus,false)];
+    @apply clickable-focus-visible:[--gds-clickable-focus:var(--gds-state-focus,true)];
+    @apply any-clickable:[--gds-clickable-checked:var(--gds-state-checked,false)];
+    @apply any-clickable-indeterminate:[--gds-clickable-checked:var(--gds-state-checked,indeterminate)];
+    @apply any-clickable-checked:[--gds-clickable-checked:var(--gds-state-checked,true)];
+    @apply clickable:[--gds-clickable-disabled:var(--gds-state-disabled,false)];
+    @apply clickable-disabled:[--gds-clickable-disabled:var(--gds-state-disabled,true)];
+    @apply any-clickable:[--gds-clickable-open:var(--gds-state-open,false)];
+    @apply any-clickable-open:[--gds-clickable-open:var(--gds-state-open,true)];
+    @apply any-clickable:[--gds-clickable-current:var(--gds-state-current,false)];
+    @apply any-clickable-current:[--gds-clickable-current:var(--gds-state-current,true)];
+  }
+
+  /* Remove the opinionated text styles that browsers apply to some elements, like Preflight does with headings */
+  th {
+    font-weight: inherit; /* Default is `bold` */
+  }
+  th:not([align]),
+  caption:not([align]) {
+    text-align: inherit; /* Default is `center` */
+  }
+  address,
+  cite,
+  dfn,
+  var {
+    font-style: inherit; /* Default is `italic` */
+  }
+  mark {
+    color: inherit; /* Default is `black` */
+  }
+  abbr {
+    text-decoration: none; /* Chrome and Firefox set `text-decoration: underline dotted` on `abbr[title]` by default */
+  }
+
+  /* Apply our own opionated text styles to some elements */
+  b,
+  strong,
+  :where(select:is([multiple], [size])) optgroup {
+    @apply font-bolder;
+  }
+
+  /**
+   * Undo Preflight's `max-width: 100%` on images and videos, since it can be unexpected. For example, without this,
+   * using a class like `w-[120%]` or `w-[calc(100%+--spacing(4))]`) doesn't work as expected because the width is
+   * capped at 100%, unless you also add `max-w-none`, which is easy to forget.
+   */
+  img,
+  svg,
+  video {
+    @apply max-w-none;
+  }
+
+  /**
+   * On the other hand, the `height: auto` that Preflight applies to images and videos is useful even without the
+   * `max-width: 100%`, since it allows resizing images/videos that have `width` and `height` HTML attributes just by
+   * changing their width in CSS without distorting their aspect ratio. For some reason however, Preflight doesn't apply
+   * the same to SVGs even though they also accept `width` and `height` attributes and have an intrinsic aspect ratio.
+   * So we add it here. TODO: Remove if this PR gets merged and released: https://github.com/tailwindlabs/tailwindcss/pull/19368
+   */
+  svg {
+    @apply h-auto;
+  }
+
+  /* Undo Preflight's `border-top` on horizontal rules */
+  hr {
+    @apply border-0;
+  }
+
+  /* Reset more things than Preflight does on form elements */
+  button,
+  select,
+  input,
+  optgroup,
+  textarea,
+  ::file-selector-button,
+  label {
+    @apply block; /* We almost never want inline form elements, including labels */
+    /* TODO: Remove if this PR gets merged and released: https://github.com/tailwindlabs/tailwindcss/pull/19369 */
+    text-align: inherit;
+    text-transform: inherit;
+  }
+
+  /* Set our own default placeholder color, and fix Safari's wrong cursor in readonly inputs and textareas */
+  input,
+  textarea {
+    @apply placeholder:text-form-placeholder read-only:cursor-text;
+  }
+
+  /* Remove the default search input "clear" button in Chrome and Safari */
+  input[type='search']::-webkit-search-decoration,
+  input[type='search']::-webkit-search-cancel-button,
+  input[type='search']::-webkit-search-results-button,
+  input[type='search']::-webkit-search-results-decoration {
+    @apply hidden;
+  }
+}
+
+/**
+ * Register animatable custom properties so we can use them in transitions or animations and their values are properly
+ * interpolated.
+ */
+@property --gds-animatable-number {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+@property --gds-animatable-length {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}

package/styles/layers.css

@@ -0,0 +1,8 @@
+/**
+ * Customize Tailwind's cascade layers to introduce sub-layers for unimportant utilities,
+ * as well as a `base.components` layer since JS plugins cannot add styles to the `components`
+ * layer anymore since Tailwind 4 (see https://github.com/tailwindlabs/tailwindcss/issues/15045).
+ * And because `base` (unlayered) styles would always override `base.components` (layered) styles
+ * (see https://github.com/w3c/csswg-drafts/issues/6323), we add a `base.resets` layer as well.
+ */
+@layer theme, base.resets, base.components, utilities.uuu, utilities.uu, utilities.u;

package/styles/tailwind.css

@@ -0,0 +1,13 @@
+@import './layers.css';
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base.resets);
+@import 'tailwindcss/utilities.css' layer(utilities) source(none);
+@import '@graphprotocol/tailwindcss-animate';
+
+@import './theme.css';
+@import './typography.css';
+@import './utilities.css';
+@import './variants.css';
+@import './fonts.css';
+@import './global.css';

package/styles/tailwind.vscode.css

@@ -0,0 +1,11 @@
+/**
+ * This file is necessary for the Tailwind IntelliSense extension to be aware of utilities and variants added by
+ * our custom plugin while working in the `css` package (i.e. when using `@apply` in the CSS files), because the
+ * plugin is not actually registered in this package (it's only exported so that consuming packages, like `react`,
+ * can register it with some options, like the available components and their CSS props). If we were to register
+ * the plugin in `tailwind.css` instead of here, the CSS of utilities we use in `react` would be generated twice.
+ */
+
+@import './tailwind.css';
+
+@plugin '@graphprotocol/gds-css/tailwind-plugin';