gbs-add-block 2.0.4 → 2.1.0

package/source/beta-components/button/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .bt-root {
     --bt-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --bt-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/card/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .cd-root,
   .st-root {
     --cd-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));

package/source/beta-components/checkbox/styles.css

@@ -3,12 +3,13 @@
  *
  * The box is the native <input> with `appearance: none`, so it keeps native
  * behavior. Tokens read the shared --gbs-* variables when they are set on an
- * ancestor (set them on :root to theme every component at once). Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * ancestor (set them on :root to theme every component at once). Rules live
+ * in the `gbs` layer. Declare where that sits in your global CSS — e.g.
+ * `@layer reset, gbs, app, utilities;` — and anything in a later layer,
+ * Tailwind utilities included, overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .ck-root,
   .ck-group {
     --ck-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/combobox/styles.css

@@ -3,12 +3,12 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so
- * utility classes passed through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer; declare
+ * where it sits in your global CSS, e.g. `@layer reset, gbs, app,
+ * utilities;`, and anything in a later layer overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .cb-root {
     --cb-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --cb-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/data-grid/styles.css

@@ -1,15 +1,14 @@
 /*
- * DataGrid styles. Everything lives in the `components` layer, so utility
- * classes (e.g. Tailwind) passed through `classNames` override it. Declaring
- * the layer order keeps that true whichever stylesheet loads first.
+ * DataGrid styles. Rules live in the `gbs` layer; declare where it sits in
+ * your global CSS, e.g. `@layer reset, gbs, app, utilities;`, and anything in
+ * a later layer overrides them.
  *
- * Theme: override the --dg-* variables on .dg-root or any ancestor.
- * Colors follow the page's `color-scheme`; `.dark` / `[data-theme]` ancestors
- * or `data-theme` on the grid force a scheme.
+ * Theme: override the --dg-* variables on .dg-root or any ancestor. Colors
+ * follow the page's `color-scheme`; `.dark` / `[data-theme]` ancestors or
+ * `data-theme` on the grid force a scheme.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .dg-root {
     --dg-font-size: var(--gbs-font-size, 13px);
     --dg-bg: var(--gbs-bg, light-dark(#ffffff, #0b0b0e));

package/source/beta-components/date-picker/styles.css

@@ -3,12 +3,12 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so
- * utility classes passed through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer; declare
+ * where it sits in your global CSS, e.g. `@layer reset, gbs, app,
+ * utilities;`, and anything in a later layer overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .dp-root {
     --dp-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --dp-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/dialog/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .dl-root {
     --dl-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --dl-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/file-uploader/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .fu-root {
     --fu-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --fu-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/input/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .in-root {
     --in-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --in-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/menu/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .mn-root {
     --mn-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --mn-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/modal/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .md-root {
     --md-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --md-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/number-input/styles.css

@@ -4,13 +4,13 @@
  * The field is a text input, so it looks and sizes exactly like the Input
  * component; the spinner is two buttons the stylesheet owns rather than the
  * browser's, which cannot be styled. Tokens read the shared --gbs-* variables
- * when they are set on an ancestor (set them on :root to theme every component
- * at once). Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * when they are set on an ancestor (set them on :root to theme every
+ * component at once). Rules live in the `gbs` layer. Declare where that sits
+ * in your global CSS — e.g. `@layer reset, gbs, app, utilities;` — and
+ * anything in a later layer, Tailwind utilities included, overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .nm-root {
     --nm-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
     --nm-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));

package/source/beta-components/popover/styles.css

@@ -3,12 +3,13 @@
  *
  * Tokens read the shared --gbs-* variables when they are set on an ancestor
  * (set them on :root to theme every component at once) and fall back to the
- * same default palette otherwise. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
+ * same default palette otherwise. Rules live in the `gbs` layer. Declare
+ * where that sits in your global CSS — e.g. `@layer reset, gbs, app,
+ * utilities;` — and anything in a later layer, Tailwind utilities included,
+ * overrides them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .pv-root {
     --pv-bg: var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e)));
     --pv-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));

package/source/beta-components/progress/styles.css

@@ -8,9 +8,8 @@
  * layer, so utility classes passed through `className` / `classNames` override
  * them.
  */
-@layer theme, base, components, utilities;
 
-@layer components {
+@layer gbs {
   .pr-root,
   .pr-circle {
     --pr-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));