@tanstack/query-devtools 5.17.1 → 5.17.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/build/Devtools/{BSBCIQID.js → 2DAFLIRC.js} +10 -24
  2. package/build/Devtools/{A6DP7BKI.js → EJGC42YZ.js} +10 -24
  3. package/build/Devtools/{5J6EBFZD.jsx → TBWOHJON.jsx} +10 -24
  4. package/build/Devtools/{TCSAOOE4.jsx → XOPUKKPX.jsx} +10 -24
  5. package/build/dev.cjs +11 -25
  6. package/build/dev.js +1 -1
  7. package/build/dev.jsx +1 -1
  8. package/build/index.cjs +11 -25
  9. package/build/index.js +1 -1
  10. package/build/index.jsx +1 -1
  11. package/package.json +2 -2
  12. package/src/theme.ts +18 -30
package/build/Devtools/{BSBCIQID.js → 2DAFLIRC.js} RENAMED
@@ -8326,29 +8326,6 @@ delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
8326
8326
  createContext();
8327
8327
 
8328
8328
  // src/theme.ts
8329
- var ShadowVariants = {
8330
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
8331
- sm: "0 1px 3px 0 color, 0 1px 2px -1px color",
8332
- md: "0 4px 6px -1px color, 0 2px 4px -2px color",
8333
- lg: "0 10px 15px -3px color, 0 4px 6px -4px color",
8334
- xl: "0 20px 25px -5px color, 0 8px 10px -6px color",
8335
- "2xl": "0 25px 50px -12px color",
8336
- inner: "inset 0 2px 4px 0 color",
8337
- none: "none"
8338
- };
8339
- var getShadow = (variant, color = "") => {
8340
- return ShadowVariants[variant].replace(/color/g, color);
8341
- };
8342
- var Shadow = {
8343
- xs: (color = "rgb(0 0 0 / 0.1)") => getShadow("xs", color),
8344
- sm: (color = "rgb(0 0 0 / 0.1)") => getShadow("sm", color),
8345
- md: (color = "rgb(0 0 0 / 0.1)") => getShadow("md", color),
8346
- lg: (color = "rgb(0 0 0 / 0.1)") => getShadow("lg", color),
8347
- xl: (color = "rgb(0 0 0 / 0.1)") => getShadow("xl", color),
8348
- "2xl": (color = "rgb(0 0 0 / 0.25)") => getShadow("2xl", color),
8349
- inner: (color = "rgb(0 0 0 / 0.05)") => getShadow("inner", color),
8350
- none: () => getShadow("none")
8351
- };
8352
8329
  var tokens = {
8353
8330
  colors: {
8354
8331
  inherit: "inherit",
@@ -8615,7 +8592,16 @@ var tokens = {
8615
8592
  80: "calc(var(--tsqd-font-size) * 20)",
8616
8593
  96: "calc(var(--tsqd-font-size) * 24)"
8617
8594
  },
8618
- shadow: Shadow,
8595
+ shadow: {
8596
+ xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
8597
+ sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
8598
+ md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
8599
+ lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
8600
+ xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
8601
+ "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
8602
+ inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
8603
+ none: () => `none`
8604
+ },
8619
8605
  zIndices: {
8620
8606
  hide: -1,
8621
8607
  auto: "auto",
package/build/Devtools/{A6DP7BKI.js → EJGC42YZ.js} RENAMED
@@ -8326,29 +8326,6 @@ delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
8326
8326
  createContext();
8327
8327
 
8328
8328
  // src/theme.ts
8329
- var ShadowVariants = {
8330
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
8331
- sm: "0 1px 3px 0 color, 0 1px 2px -1px color",
8332
- md: "0 4px 6px -1px color, 0 2px 4px -2px color",
8333
- lg: "0 10px 15px -3px color, 0 4px 6px -4px color",
8334
- xl: "0 20px 25px -5px color, 0 8px 10px -6px color",
8335
- "2xl": "0 25px 50px -12px color",
8336
- inner: "inset 0 2px 4px 0 color",
8337
- none: "none"
8338
- };
8339
- var getShadow = (variant, color = "") => {
8340
- return ShadowVariants[variant].replace(/color/g, color);
8341
- };
8342
- var Shadow = {
8343
- xs: (color = "rgb(0 0 0 / 0.1)") => getShadow("xs", color),
8344
- sm: (color = "rgb(0 0 0 / 0.1)") => getShadow("sm", color),
8345
- md: (color = "rgb(0 0 0 / 0.1)") => getShadow("md", color),
8346
- lg: (color = "rgb(0 0 0 / 0.1)") => getShadow("lg", color),
8347
- xl: (color = "rgb(0 0 0 / 0.1)") => getShadow("xl", color),
8348
- "2xl": (color = "rgb(0 0 0 / 0.25)") => getShadow("2xl", color),
8349
- inner: (color = "rgb(0 0 0 / 0.05)") => getShadow("inner", color),
8350
- none: () => getShadow("none")
8351
- };
8352
8329
  var tokens = {
8353
8330
  colors: {
8354
8331
  inherit: "inherit",
@@ -8615,7 +8592,16 @@ var tokens = {
8615
8592
  80: "calc(var(--tsqd-font-size) * 20)",
8616
8593
  96: "calc(var(--tsqd-font-size) * 24)"
8617
8594
  },
8618
- shadow: Shadow,
8595
+ shadow: {
8596
+ xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
8597
+ sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
8598
+ md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
8599
+ lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
8600
+ xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
8601
+ "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
8602
+ inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
8603
+ none: () => `none`
8604
+ },
8619
8605
  zIndices: {
8620
8606
  hide: -1,
8621
8607
  auto: "auto",
package/build/Devtools/{5J6EBFZD.jsx → TBWOHJON.jsx} RENAMED
@@ -8566,29 +8566,6 @@ delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
8566
8566
  var TooltipContext = createContext();
8567
8567
 
8568
8568
  // src/theme.ts
8569
- var ShadowVariants = {
8570
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
8571
- sm: "0 1px 3px 0 color, 0 1px 2px -1px color",
8572
- md: "0 4px 6px -1px color, 0 2px 4px -2px color",
8573
- lg: "0 10px 15px -3px color, 0 4px 6px -4px color",
8574
- xl: "0 20px 25px -5px color, 0 8px 10px -6px color",
8575
- "2xl": "0 25px 50px -12px color",
8576
- inner: "inset 0 2px 4px 0 color",
8577
- none: "none"
8578
- };
8579
- var getShadow = (variant, color = "") => {
8580
- return ShadowVariants[variant].replace(/color/g, color);
8581
- };
8582
- var Shadow = {
8583
- xs: (color = "rgb(0 0 0 / 0.1)") => getShadow("xs", color),
8584
- sm: (color = "rgb(0 0 0 / 0.1)") => getShadow("sm", color),
8585
- md: (color = "rgb(0 0 0 / 0.1)") => getShadow("md", color),
8586
- lg: (color = "rgb(0 0 0 / 0.1)") => getShadow("lg", color),
8587
- xl: (color = "rgb(0 0 0 / 0.1)") => getShadow("xl", color),
8588
- "2xl": (color = "rgb(0 0 0 / 0.25)") => getShadow("2xl", color),
8589
- inner: (color = "rgb(0 0 0 / 0.05)") => getShadow("inner", color),
8590
- none: () => getShadow("none")
8591
- };
8592
8569
  var tokens = {
8593
8570
  colors: {
8594
8571
  inherit: "inherit",
@@ -8855,7 +8832,16 @@ var tokens = {
8855
8832
  80: "calc(var(--tsqd-font-size) * 20)",
8856
8833
  96: "calc(var(--tsqd-font-size) * 24)"
8857
8834
  },
8858
- shadow: Shadow,
8835
+ shadow: {
8836
+ xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
8837
+ sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
8838
+ md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
8839
+ lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
8840
+ xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
8841
+ "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
8842
+ inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
8843
+ none: () => `none`
8844
+ },
8859
8845
  zIndices: {
8860
8846
  hide: -1,
8861
8847
  auto: "auto",
package/build/Devtools/{TCSAOOE4.jsx → XOPUKKPX.jsx} RENAMED
@@ -8566,29 +8566,6 @@ delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
8566
8566
  var TooltipContext = createContext();
8567
8567
 
8568
8568
  // src/theme.ts
8569
- var ShadowVariants = {
8570
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
8571
- sm: "0 1px 3px 0 color, 0 1px 2px -1px color",
8572
- md: "0 4px 6px -1px color, 0 2px 4px -2px color",
8573
- lg: "0 10px 15px -3px color, 0 4px 6px -4px color",
8574
- xl: "0 20px 25px -5px color, 0 8px 10px -6px color",
8575
- "2xl": "0 25px 50px -12px color",
8576
- inner: "inset 0 2px 4px 0 color",
8577
- none: "none"
8578
- };
8579
- var getShadow = (variant, color = "") => {
8580
- return ShadowVariants[variant].replace(/color/g, color);
8581
- };
8582
- var Shadow = {
8583
- xs: (color = "rgb(0 0 0 / 0.1)") => getShadow("xs", color),
8584
- sm: (color = "rgb(0 0 0 / 0.1)") => getShadow("sm", color),
8585
- md: (color = "rgb(0 0 0 / 0.1)") => getShadow("md", color),
8586
- lg: (color = "rgb(0 0 0 / 0.1)") => getShadow("lg", color),
8587
- xl: (color = "rgb(0 0 0 / 0.1)") => getShadow("xl", color),
8588
- "2xl": (color = "rgb(0 0 0 / 0.25)") => getShadow("2xl", color),
8589
- inner: (color = "rgb(0 0 0 / 0.05)") => getShadow("inner", color),
8590
- none: () => getShadow("none")
8591
- };
8592
8569
  var tokens = {
8593
8570
  colors: {
8594
8571
  inherit: "inherit",
@@ -8855,7 +8832,16 @@ var tokens = {
8855
8832
  80: "calc(var(--tsqd-font-size) * 20)",
8856
8833
  96: "calc(var(--tsqd-font-size) * 24)"
8857
8834
  },
8858
- shadow: Shadow,
8835
+ shadow: {
8836
+ xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
8837
+ sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
8838
+ md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
8839
+ lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
8840
+ xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
8841
+ "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
8842
+ inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
8843
+ none: () => `none`
8844
+ },
8859
8845
  zIndices: {
8860
8846
  hide: -1,
8861
8847
  auto: "auto",
package/build/dev.cjs CHANGED
@@ -11787,32 +11787,9 @@ var init_esm2 = __esm({
11787
11787
  });
11788
11788
 
11789
11789
  // src/theme.ts
11790
- var ShadowVariants, getShadow, Shadow, tokens;
11790
+ var tokens;
11791
11791
  var init_theme = __esm({
11792
11792
  "src/theme.ts"() {
11793
- ShadowVariants = {
11794
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
11795
- sm: "0 1px 3px 0 color, 0 1px 2px -1px color",
11796
- md: "0 4px 6px -1px color, 0 2px 4px -2px color",
11797
- lg: "0 10px 15px -3px color, 0 4px 6px -4px color",
11798
- xl: "0 20px 25px -5px color, 0 8px 10px -6px color",
11799
- "2xl": "0 25px 50px -12px color",
11800
- inner: "inset 0 2px 4px 0 color",
11801
- none: "none"
11802
- };
11803
- getShadow = (variant, color = "") => {
11804
- return ShadowVariants[variant].replace(/color/g, color);
11805
- };
11806
- Shadow = {
11807
- xs: (color = "rgb(0 0 0 / 0.1)") => getShadow("xs", color),
11808
- sm: (color = "rgb(0 0 0 / 0.1)") => getShadow("sm", color),
11809
- md: (color = "rgb(0 0 0 / 0.1)") => getShadow("md", color),
11810
- lg: (color = "rgb(0 0 0 / 0.1)") => getShadow("lg", color),
11811
- xl: (color = "rgb(0 0 0 / 0.1)") => getShadow("xl", color),
11812
- "2xl": (color = "rgb(0 0 0 / 0.25)") => getShadow("2xl", color),
11813
- inner: (color = "rgb(0 0 0 / 0.05)") => getShadow("inner", color),
11814
- none: () => getShadow("none")
11815
- };
11816
11793
  tokens = {
11817
11794
  colors: {
11818
11795
  inherit: "inherit",
@@ -12079,7 +12056,16 @@ var init_theme = __esm({
12079
12056
  80: "calc(var(--tsqd-font-size) * 20)",
12080
12057
  96: "calc(var(--tsqd-font-size) * 24)"
12081
12058
  },
12082
- shadow: Shadow,
12059
+ shadow: {
12060
+ xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
12061
+ sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
12062
+ md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
12063
+ lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
12064
+ xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
12065
+ "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
12066
+ inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
12067
+ none: () => `none`
12068
+ },
12083
12069
  zIndices: {
12084
12070
  hide: -1,
12085
12071
  auto: "auto",
package/build/dev.js CHANGED
@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
65
65
  if (this.#Component) {
66
66
  Devtools = this.#Component;
67
67
  } else {
68
- Devtools = lazy(() => import('./Devtools/A6DP7BKI.js'));
68
+ Devtools = lazy(() => import('./Devtools/EJGC42YZ.js'));
69
69
  this.#Component = Devtools;
70
70
  }
71
71
  setupStyleSheet(this.#styleNonce);
package/build/dev.jsx CHANGED
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
70
70
  if (this.#Component) {
71
71
  Devtools = this.#Component;
72
72
  } else {
73
- Devtools = lazy(() => import("./Devtools/5J6EBFZD.jsx"));
73
+ Devtools = lazy(() => import("./Devtools/TBWOHJON.jsx"));
74
74
  this.#Component = Devtools;
75
75
  }
76
76
  setupStyleSheet(this.#styleNonce);
package/build/index.cjs CHANGED
@@ -11786,32 +11786,9 @@ var init_esm2 = __esm({
11786
11786
  });
11787
11787
 
11788
11788
  // src/theme.ts
11789
- var ShadowVariants, getShadow, Shadow, tokens;
11789
+ var tokens;
11790
11790
  var init_theme = __esm({
11791
11791
  "src/theme.ts"() {
11792
- ShadowVariants = {
11793
- xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
11794
- sm: "0 1px 3px 0 color, 0 1px 2px -1px color",
11795
- md: "0 4px 6px -1px color, 0 2px 4px -2px color",
11796
- lg: "0 10px 15px -3px color, 0 4px 6px -4px color",
11797
- xl: "0 20px 25px -5px color, 0 8px 10px -6px color",
11798
- "2xl": "0 25px 50px -12px color",
11799
- inner: "inset 0 2px 4px 0 color",
11800
- none: "none"
11801
- };
11802
- getShadow = (variant, color = "") => {
11803
- return ShadowVariants[variant].replace(/color/g, color);
11804
- };
11805
- Shadow = {
11806
- xs: (color = "rgb(0 0 0 / 0.1)") => getShadow("xs", color),
11807
- sm: (color = "rgb(0 0 0 / 0.1)") => getShadow("sm", color),
11808
- md: (color = "rgb(0 0 0 / 0.1)") => getShadow("md", color),
11809
- lg: (color = "rgb(0 0 0 / 0.1)") => getShadow("lg", color),
11810
- xl: (color = "rgb(0 0 0 / 0.1)") => getShadow("xl", color),
11811
- "2xl": (color = "rgb(0 0 0 / 0.25)") => getShadow("2xl", color),
11812
- inner: (color = "rgb(0 0 0 / 0.05)") => getShadow("inner", color),
11813
- none: () => getShadow("none")
11814
- };
11815
11792
  tokens = {
11816
11793
  colors: {
11817
11794
  inherit: "inherit",
@@ -12078,7 +12055,16 @@ var init_theme = __esm({
12078
12055
  80: "calc(var(--tsqd-font-size) * 20)",
12079
12056
  96: "calc(var(--tsqd-font-size) * 24)"
12080
12057
  },
12081
- shadow: Shadow,
12058
+ shadow: {
12059
+ xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
12060
+ sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
12061
+ md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
12062
+ lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
12063
+ xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
12064
+ "2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
12065
+ inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
12066
+ none: () => `none`
12067
+ },
12082
12068
  zIndices: {
12083
12069
  hide: -1,
12084
12070
  auto: "auto",
package/build/index.js CHANGED
@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
65
65
  if (this.#Component) {
66
66
  Devtools = this.#Component;
67
67
  } else {
68
- Devtools = lazy(() => import('./Devtools/BSBCIQID.js'));
68
+ Devtools = lazy(() => import('./Devtools/2DAFLIRC.js'));
69
69
  this.#Component = Devtools;
70
70
  }
71
71
  setupStyleSheet(this.#styleNonce);
package/build/index.jsx CHANGED
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
70
70
  if (this.#Component) {
71
71
  Devtools = this.#Component;
72
72
  } else {
73
- Devtools = lazy(() => import("./Devtools/TCSAOOE4.jsx"));
73
+ Devtools = lazy(() => import("./Devtools/XOPUKKPX.jsx"));
74
74
  this.#Component = Devtools;
75
75
  }
76
76
  setupStyleSheet(this.#styleNonce);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/query-devtools",
3
- "version": "5.17.1",
3
+ "version": "5.17.21",
4
4
  "description": "Developer tools to interact with and visualize the TanStack Query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -50,7 +50,7 @@
50
50
  "superjson": "^1.13.3",
51
51
  "tsup-preset-solid": "^2.2.0",
52
52
  "vite-plugin-solid": "^2.8.0",
53
- "@tanstack/query-core": "5.17.1"
53
+ "@tanstack/query-core": "5.17.19"
54
54
  },
55
55
  "scripts": {
56
56
  "clean": "rimraf ./build && rimraf ./coverage",
package/src/theme.ts CHANGED
@@ -1,31 +1,3 @@
1
- const ShadowVariants = {
2
- xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
3
- sm: '0 1px 3px 0 color, 0 1px 2px -1px color',
4
- md: '0 4px 6px -1px color, 0 2px 4px -2px color',
5
- lg: '0 10px 15px -3px color, 0 4px 6px -4px color',
6
- xl: '0 20px 25px -5px color, 0 8px 10px -6px color',
7
- '2xl': '0 25px 50px -12px color',
8
- inner: 'inset 0 2px 4px 0 color',
9
- none: 'none',
10
- }
11
-
12
- type ShadowVariantType = keyof typeof ShadowVariants
13
-
14
- const getShadow = (variant: ShadowVariantType, color: string = ''): string => {
15
- return ShadowVariants[variant].replace(/color/g, color)
16
- }
17
-
18
- const Shadow = {
19
- xs: (color: string = 'rgb(0 0 0 / 0.1)') => getShadow('xs', color),
20
- sm: (color: string = 'rgb(0 0 0 / 0.1)') => getShadow('sm', color),
21
- md: (color: string = 'rgb(0 0 0 / 0.1)') => getShadow('md', color),
22
- lg: (color: string = 'rgb(0 0 0 / 0.1)') => getShadow('lg', color),
23
- xl: (color: string = 'rgb(0 0 0 / 0.1)') => getShadow('xl', color),
24
- '2xl': (color: string = 'rgb(0 0 0 / 0.25)') => getShadow('2xl', color),
25
- inner: (color: string = 'rgb(0 0 0 / 0.05)') => getShadow('inner', color),
26
- none: () => getShadow('none'),
27
- }
28
-
29
1
  export const tokens = {
30
2
  colors: {
31
3
  inherit: 'inherit',
@@ -292,7 +264,23 @@ export const tokens = {
292
264
  80: 'calc(var(--tsqd-font-size) * 20)',
293
265
  96: 'calc(var(--tsqd-font-size) * 24)',
294
266
  },
295
- shadow: Shadow,
267
+ shadow: {
268
+ xs: (_: string = 'rgb(0 0 0 / 0.1)') =>
269
+ `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,
270
+ sm: (color: string = 'rgb(0 0 0 / 0.1)') =>
271
+ `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,
272
+ md: (color: string = 'rgb(0 0 0 / 0.1)') =>
273
+ `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,
274
+ lg: (color: string = 'rgb(0 0 0 / 0.1)') =>
275
+ `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,
276
+ xl: (color: string = 'rgb(0 0 0 / 0.1)') =>
277
+ `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,
278
+ '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>
279
+ `0 25px 50px -12px ${color}` as const,
280
+ inner: (color: string = 'rgb(0 0 0 / 0.05)') =>
281
+ `inset 0 2px 4px 0 ${color}` as const,
282
+ none: () => `none` as const,
283
+ },
296
284
  zIndices: {
297
285
  hide: -1,
298
286
  auto: 'auto',
@@ -308,4 +296,4 @@ export const tokens = {
308
296
  toast: 1700,
309
297
  tooltip: 1800,
310
298
  },
311
- }
299
+ } as const