@graphprotocol/gds-css 0.0.1 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Edge & Node
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -12,9 +12,9 @@ pnpm add @graphprotocol/gds-css
 
 ## Setup
 
-1. [Set up Tailwind CSS](https://tailwindcss.com/docs/installation) in your project if you haven't already (ideally using Vite).
+1. Ensure [Tailwind CSS is installed and configured](https://tailwindcss.com/docs/installation) in your project (preferably with Vite).
 
-2. Add the following to your main CSS file:
+2. Replace the `tailwind` import in your main CSS file with `@graphprotocol/gds-css` and register the Tailwind plugin:
 
    ```diff
    - @import 'tailwindcss';
@@ -22,8 +22,6 @@ pnpm add @graphprotocol/gds-css
    + @plugin '@graphprotocol/gds-css/tailwind-plugin';
    ```
 
-   Tailwind is already imported by `@graphprotocol/gds-css`, so you don't need the `@import 'tailwindcss'` line.
-
 3. [Register source paths](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) relative to your CSS file:
 
    ```diff

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@graphprotocol/gds-css",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Tailwind preset and design tokens for The Graph Design System",
   "author": "Edge & Node and contributors",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/graphprotocol/gds.git",
+    "url": "git+https://github.com/graphprotocol/gds.git",
     "directory": "packages/css"
   },
   "homepage": "https://github.com/graphprotocol/gds/tree/main/packages/css",
@@ -16,24 +16,10 @@
   "exports": {
     ".": {
       "style": "./styles/tailwind.css",
-      "typecheck": "./dist/index.d.ts",
-      "default": "./src/index.ts"
+      "default": "./dist/index.js"
     },
     "./tailwind.css": "./styles/tailwind.css",
-    "./tailwind-plugin": {
-      "typecheck": "./dist/tailwind-plugin.d.ts",
-      "default": "./src/tailwind-plugin.ts"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "style": "./styles/tailwind.css",
-        "default": "./dist/index.js"
-      },
-      "./tailwind.css": "./styles/tailwind.css",
-      "./tailwind-plugin": "./dist/tailwind-plugin.js"
-    }
+    "./tailwind-plugin": "./dist/tailwind-plugin.js"
   },
   "files": [
     "styles",
@@ -46,20 +32,19 @@
     "tailwindcss": "^4.1.14"
   },
   "dependencies": {
-    "@graphprotocol/gds-utils": "workspace:*",
-    "@graphprotocol/tailwindcss-animate": "workspace:*",
     "cssesc": "^3.0.0",
-    "ts-extras": "^0.16.0"
+    "ts-extras": "^0.16.0",
+    "@graphprotocol/gds-utils": "0.1.0",
+    "@graphprotocol/tailwindcss-animate": "0.1.1"
   },
   "devDependencies": {
     "@types/cssesc": "^3.0.2",
-    "@types/node": "^24.10.2"
+    "@types/node": "^24.10.4"
   },
   "scripts": {
-    "prepare": "pnpm generate:design-tokens",
     "generate:design-tokens": "tsx scripts/generate-design-tokens.ts",
     "build": "tsc --build tsconfig.build.json",
     "test": "vitest run",
     "test:watch": "vitest"
   }
-}
+}

package/styles/global.css

@@ -58,21 +58,22 @@
      * 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.
+     * - `outline-offset-1` and `outline-focus` are in case a `transition` is used on an element with a focus indicator.
+     *   Because `transition` includes `outline-color`, only applying `outline-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 (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);
+    @apply outline-0 outline-offset-1 outline-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.
+     * Technically, we shouldn't have to repeat the `outline-offset-1 outline-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 and report the bug.
      */
     &:focus-visible {
-      @apply outline outline-offset-1 outline-(--border-color-focus);
+      @apply outline outline-offset-1 outline-focus;
     }
     /* Prevent accidental animations (e.g. `text-20 sm:text-24 duration-200`) */
     @apply transition-none;
@@ -201,3 +202,19 @@
   inherits: false;
   initial-value: 0;
 }
+
+/**
+ * Restrict the transition of particular properties (e.g. `width`) to specific state changes, e.g. when toggling between
+ * idle and hover, but not when a prop changes. See how it's used in the `Search` component, and the CSS proposal that
+ * would make this hacky workaround obsolete: https://github.com/w3c/csswg-drafts/issues/13224.
+ */
+@keyframes width-1 {
+  100% {
+    width: revert-layer;
+  }
+}
+@keyframes width-2 {
+  100% {
+    width: revert-layer;
+  }
+}

package/styles/theme.css

@@ -167,6 +167,8 @@
 
   /* Border colors */
   --border-color-focus: var(--color-brand-500);
+  --outline-color-focus: var(--color-brand-500);
+
   --border-color-subtle: light-dark(var(--color-foam-300), var(--color-space-1500));
   --border-color-muted: light-dark(var(--color-foam-400), var(--color-space-1400));
   --border-color-default: light-dark(var(--color-foam-500), var(--color-space-1300));