@graphprotocol/gds-css 0.0.1

package/styles/utilities.css

@@ -0,0 +1,305 @@
+/**
+ * Extend Tailwind's `scheme-*` properties, then register utilities to force a specific theme / color scheme
+ * for a subtree. We don't use `@utility` for those because we want to prevent variants being used on them
+ * (as it would break selectors like the one used in the `light` variant or in the React package's global styles).
+ */
+@utility scheme-only-dark {
+  --gds-color-scheme: dark;
+}
+@utility scheme-only-light {
+  --gds-color-scheme: light;
+}
+@utility scheme-light-dark {
+  @media (prefers-color-scheme: dark) {
+    --gds-color-scheme: dark;
+  }
+  @media (prefers-color-scheme: light) {
+    --gds-color-scheme: light;
+  }
+}
+@layer utilities {
+  .gds-dark {
+    @apply scheme-only-dark;
+  }
+  .gds-light {
+    @apply scheme-only-light;
+  }
+  .gds-system {
+    @apply scheme-light-dark;
+  }
+}
+
+/**
+ * Add `root-{display}` utilities for components to force their inner display type independently from their
+ * outer one, which may be controlled by the consumer (e.g. `<Avatar className="inline" />`).
+ */
+@theme static {
+  --root-display-inside-block: flow-root;
+  --root-display-inside-inline: flow;
+  --root-display-inside-flex: flex;
+  --root-display-inside-grid: grid;
+  --root-display-inside-table: table;
+  --root-display-outside-block: block;
+  --root-display-outside-inline: inline;
+}
+@utility root-* {
+  @variant u {
+    --gds-display-inside: --value(--root-display-inside- *);
+    --gds-display-outside: block;
+    --gds-display-outside: --value('inline');
+    --gds-display-outside: --modifier(--root-display-outside- *);
+    --gds-display-none: initial;
+  }
+  @variant i {
+    display: var(--gds-display-none, var(--gds-display-outside) var(--gds-display-inside));
+  }
+}
+
+/**
+ * Extend the display utilities to support the `root-{display}` utilities.
+ */
+@utility hidden {
+  --gds-display-none: none;
+}
+@utility flow-root {
+  --gds-display-outside: block;
+  --gds-display-none: initial;
+}
+@utility block {
+  --gds-display-outside: block;
+  --gds-display-none: initial;
+}
+@utility flex {
+  --gds-display-outside: block;
+  --gds-display-none: initial;
+}
+@utility grid {
+  --gds-display-outside: block;
+  --gds-display-none: initial;
+}
+@utility table {
+  --gds-display-outside: block;
+  --gds-display-none: initial;
+}
+@utility inline {
+  --gds-display-outside: inline;
+  --gds-display-none: initial;
+}
+@utility inline-block {
+  --gds-display-outside: inline;
+  --gds-display-none: initial;
+}
+@utility inline-flex {
+  --gds-display-outside: inline;
+  --gds-display-none: initial;
+}
+@utility inline-grid {
+  --gds-display-outside: inline;
+  --gds-display-none: initial;
+}
+@utility inline-table {
+  --gds-display-outside: inline;
+  --gds-display-none: initial;
+}
+
+/**
+ * Extend the default pointer events utilities to allow restoring the pointer events on an element
+ * with the `pointer-events-previous` utility after an ancestor disabled them with `pointer-events-none`,
+ * while respecting any consumer's `pointer-events-none` higher up the tree.
+ */
+:root {
+  --gds-pointer-events: auto;
+  --gds-pointer-events-previous: auto;
+}
+@utility pointer-events-none {
+  --gds-pointer-events-previous: var(--gds-pointer-events);
+  :where(&) > * {
+    --gds-pointer-events: none;
+  }
+}
+@utility pointer-events-auto {
+  --gds-pointer-events-previous: var(--gds-pointer-events);
+  :where(&) > * {
+    --gds-pointer-events: auto;
+  }
+}
+@utility pointer-events-previous {
+  --gds-pointer-events-previous: revert;
+  --gds-pointer-events: var(--gds-pointer-events-previous) !important;
+  pointer-events: var(--gds-pointer-events);
+}
+
+/**
+ * Extend the `grid-template-columns` utilities to support responsive grids with a simple syntax
+ * (`auto-fill` or `auto-fit` columns with the specified minimum width).
+ */
+@utility grid-cols-auto-fill-* {
+  grid-template-columns: repeat(auto-fill, minmax(min(--spacing(--value(integer)), 100%), 1fr));
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(--value(--spacing-*, [percentage], [length]), 100%), 1fr)
+  );
+}
+@utility grid-cols-auto-fit-* {
+  grid-template-columns: repeat(auto-fit, minmax(min(--spacing(--value(integer)), 100%), 1fr));
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(--value(--spacing-*, [percentage], [length]), 100%), 1fr)
+  );
+}
+
+/* Tab size utilities */
+@utility tab-* {
+  tab-size: --value('2', '4', '8', integer);
+}
+
+/* Scrollbar width utilities */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    display: initial;
+  }
+}
+@utility scrollbar-auto {
+  scrollbar-width: auto;
+  &::-webkit-scrollbar {
+    display: initial;
+  }
+}
+
+/* Gradient mask utilities */
+@utility gradient-mask-x {
+  @supports (animation-timeline: scroll(x self)) {
+    --gds-gradient-mask-size: 32px;
+    --gds-gradient-mask-offset: 0px;
+    --gds-gradient-mask-inline-start: var(--gds-gradient-mask-left);
+    --gds-gradient-mask-inline-end: var(--gds-gradient-mask-right);
+    @variant rtl {
+      --gds-gradient-mask-inline-start: var(--gds-gradient-mask-right);
+      --gds-gradient-mask-inline-end: var(--gds-gradient-mask-left);
+    }
+    animation-name: gradient-mask-left, gradient-mask-right;
+    animation-timing-function: linear, linear;
+    animation-timeline: scroll(x self), scroll(x self);
+    animation-range:
+      0 calc(var(--gds-gradient-mask-size) / 2),
+      calc(100% - calc(var(--gds-gradient-mask-size) / 2)) 100%;
+    animation-fill-mode: both, both;
+    mask-image: linear-gradient(
+      to right,
+      var(--gds-gradient-mask-inline-start) var(--gds-gradient-mask-offset),
+      black calc(var(--gds-gradient-mask-offset) + var(--gds-gradient-mask-size)),
+      black calc(100% - var(--gds-gradient-mask-size) - var(--gds-gradient-mask-offset)),
+      var(--gds-gradient-mask-inline-end) calc(100% - var(--gds-gradient-mask-offset))
+    );
+  }
+}
+@utility gradient-mask-y {
+  @supports (animation-timeline: scroll(y self)) {
+    --gds-gradient-mask-size: 32px;
+    --gds-gradient-mask-offset: 0px;
+    --gds-gradient-mask-block-start: var(--gds-gradient-mask-top);
+    --gds-gradient-mask-block-end: var(--gds-gradient-mask-bottom);
+    animation-name: gradient-mask-top, gradient-mask-bottom;
+    animation-timing-function: linear, linear;
+    animation-timeline: scroll(y self), scroll(y self);
+    animation-range:
+      0 calc(var(--gds-gradient-mask-size) / 2),
+      calc(100% - calc(var(--gds-gradient-mask-size) / 2)) 100%;
+    animation-fill-mode: both, both;
+    mask-image: linear-gradient(
+      to bottom,
+      var(--gds-gradient-mask-block-start) var(--gds-gradient-mask-offset),
+      black calc(var(--gds-gradient-mask-offset) + var(--gds-gradient-mask-size)),
+      black calc(100% - var(--gds-gradient-mask-size) - var(--gds-gradient-mask-offset)),
+      var(--gds-gradient-mask-block-end) calc(100% - var(--gds-gradient-mask-offset))
+    );
+  }
+}
+@utility gradient-mask-* {
+  --gds-gradient-mask-size: --spacing(--value(integer));
+  --gds-gradient-mask-size: --value([length]);
+}
+@utility gradient-mask-offset-* {
+  --gds-gradient-mask-offset: --spacing(--value(integer));
+  --gds-gradient-mask-offset: --value([length]);
+}
+@utility gradient-mask-reverse {
+  @variant not-safari {
+    --gds-gradient-mask-inline-start: var(--gds-gradient-mask-right);
+    --gds-gradient-mask-inline-end: var(--gds-gradient-mask-left);
+    --gds-gradient-mask-block-start: var(--gds-gradient-mask-bottom);
+    --gds-gradient-mask-block-end: var(--gds-gradient-mask-top);
+    @variant rtl {
+      --gds-gradient-mask-inline-start: var(--gds-gradient-mask-left);
+      --gds-gradient-mask-inline-end: var(--gds-gradient-mask-right);
+    }
+  }
+}
+@property --gds-gradient-mask-left {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: black;
+}
+@property --gds-gradient-mask-right {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: black;
+}
+@property --gds-gradient-mask-top {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: black;
+}
+@property --gds-gradient-mask-bottom {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: black;
+}
+@keyframes gradient-mask-left {
+  from {
+    --gds-gradient-mask-left: black;
+  }
+  to {
+    --gds-gradient-mask-left: transparent;
+  }
+}
+@keyframes gradient-mask-right {
+  from {
+    --gds-gradient-mask-right: transparent;
+  }
+  to {
+    --gds-gradient-mask-right: black;
+  }
+}
+@keyframes gradient-mask-top {
+  from {
+    --gds-gradient-mask-top: black;
+  }
+  to {
+    --gds-gradient-mask-top: transparent;
+  }
+}
+@keyframes gradient-mask-bottom {
+  from {
+    --gds-gradient-mask-bottom: transparent;
+  }
+  to {
+    --gds-gradient-mask-bottom: black;
+  }
+}
+
+/* Use an element's background as its border (gradient border hack) */
+@utility border-bg {
+  border-color: transparent;
+  background-origin: border-box;
+  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
+  mask-clip: padding-box, border-box;
+  mask-composite: exclude, exclude;
+}

package/styles/variants.css

@@ -0,0 +1,34 @@
+/* "Disable" Tailwind's `dark` variant and add a `light` variant */
+@custom-variant dark {
+  --error: 'The dark variant is not supported by GDS';
+}
+@custom-variant light {
+  @container style(--gds-color-scheme: light) {
+    @slot;
+  }
+  @supports (-moz-orient: inline) {
+    &:is(.gds-light *):not(.gds-light .gds-dark *) {
+      @slot;
+    }
+  }
+}
+
+/* Override Tailwind's `ltr` and `rtl` variants to prioritize functionality over legacy browser support */
+@custom-variant ltr (&:where(:dir(ltr)));
+@custom-variant rtl (&:where(:dir(rtl)));
+
+/* Hover/touch capability */
+@custom-variant can-hover (@media (any-hover: hover));
+@custom-variant can-touch (@media (any-pointer: coarse));
+
+/* Browser detection (for hacks, e.g. working around CSS bugs) */
+@custom-variant safari (@supports (-webkit-appearance: -apple-pay-button));
+@custom-variant firefox (@supports (-moz-orient: inline));
+
+/* Unimportant and important */
+@custom-variant uuu (@layer uuu);
+@custom-variant uu (@layer uu);
+@custom-variant u (@layer u);
+@custom-variant i (&:is(#i, *));
+@custom-variant ii (&:is(#i#i, *));
+@custom-variant iii (&:is(#i#i#i, *));