@tidbcloud/uikit 2.0.0-beta.22 → 2.0.0-beta.24

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.24
4
+
5
+ ### Minor Changes
6
+
7
+ - ActionIcon default to subtle, Anchor default to peacock, ProTable row hover to bg caron.3
8
+
9
+ ## 2.0.0-beta.23
10
+
11
+ ### Minor Changes
12
+
13
+ - make PageShell back icon and CodeBlock Copy icon to subtle
14
+
3
15
  ## 2.0.0-beta.22
4
16
 
5
17
  ### Minor Changes
@@ -9,10 +9,11 @@ const Copy01 = require("../../icons/react/Copy01.cjs");
9
9
  const styles = require("../../utils/styles.cjs");
10
10
  const Prism = require("../../primitive/Prism/Prism.cjs");
11
11
  const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.cjs");
12
- const Tooltip = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Tooltip/Tooltip.cjs");
12
+ const HoverCard = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/HoverCard/HoverCard.cjs");
13
13
  const ActionIcon = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/ActionIcon/ActionIcon.cjs");
14
14
  const CopyButton = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/CopyButton/CopyButton.cjs");
15
15
  const Code = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Code/Code.cjs");
16
+ const Tooltip = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Tooltip/Tooltip.cjs");
16
17
  const useLocalStorage = require("../../node_modules/.pnpm/@mantine_hooks@5.10.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-local-storage/use-local-storage.cjs");
17
18
  const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
18
19
  function useFold(persistenceKey) {
@@ -88,31 +89,37 @@ const CodeBlock = ({
88
89
  }
89
90
  ),
90
91
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { spacing: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.carbon[8] }), children: [
91
- foldIconVisible && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: folded ? "Expand" : "Collapse", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
92
- ActionIcon.ActionIcon,
93
- {
94
- variant: "transparent",
95
- size: "sm",
96
- onClick: () => {
97
- const v = !folded;
98
- setFolded(v);
99
- onFoldIconClick == null ? void 0 : onFoldIconClick(v);
100
- },
101
- children: folded ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
102
- }
103
- ) }),
104
- /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyButton.CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
105
- ActionIcon.ActionIcon,
106
- {
107
- variant: "transparent",
108
- size: "sm",
109
- onClick: () => {
110
- copy();
111
- onCopyClick == null ? void 0 : onCopyClick();
112
- },
113
- children: copied ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Check, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Copy01, { size: 14, strokeWidth: 2.5 })
114
- }
115
- ) }) })
92
+ foldIconVisible && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", children: [
93
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
94
+ ActionIcon.ActionIcon,
95
+ {
96
+ size: "sm",
97
+ variant: "subtle",
98
+ onClick: () => {
99
+ const v = !folded;
100
+ setFolded(v);
101
+ onFoldIconClick == null ? void 0 : onFoldIconClick(v);
102
+ },
103
+ children: folded ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
104
+ }
105
+ ) }),
106
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Dropdown, { children: folded ? "Expand" : "Collapse" })
107
+ ] }),
108
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyButton.CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", children: [
109
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
110
+ ActionIcon.ActionIcon,
111
+ {
112
+ size: "sm",
113
+ variant: "subtle",
114
+ onClick: () => {
115
+ copy();
116
+ onCopyClick == null ? void 0 : onCopyClick();
117
+ },
118
+ children: copied ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Check, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Copy01, { size: 14, strokeWidth: 2.5 })
119
+ }
120
+ ) }),
121
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Dropdown, { children: copied ? "Copied" : "Copy" })
122
+ ] }) })
116
123
  ] })
117
124
  ] });
118
125
  };
@@ -140,7 +147,7 @@ const CopyText = ({ children, value, ...rest }) => {
140
147
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyButton.CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
141
148
  ActionIcon.ActionIcon,
142
149
  {
143
- variant: "transparent",
150
+ variant: "subtle",
144
151
  size: "sm",
145
152
  ml: 8,
146
153
  display: "inline-block",
@@ -7,10 +7,11 @@ import IconCopy01 from "../../icons/react/Copy01.js";
7
7
  import { mergeSxList, mergeStylesList } from "../../utils/styles.js";
8
8
  import { MantinePrism } from "../../primitive/Prism/Prism.js";
9
9
  import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.js";
10
- import { Tooltip } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Tooltip/Tooltip.js";
10
+ import { HoverCard } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/HoverCard/HoverCard.js";
11
11
  import { ActionIcon } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/ActionIcon/ActionIcon.js";
12
12
  import { CopyButton } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/CopyButton/CopyButton.js";
13
13
  import { Code } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Code/Code.js";
14
+ import { Tooltip } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Tooltip/Tooltip.js";
14
15
  import { useLocalStorage } from "../../node_modules/.pnpm/@mantine_hooks@5.10.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-local-storage/use-local-storage.js";
15
16
  import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
16
17
  function useFold(persistenceKey) {
@@ -86,31 +87,37 @@ const CodeBlock = ({
86
87
  }
87
88
  ),
88
89
  /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { spacing: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.carbon[8] }), children: [
89
- foldIconVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: folded ? "Expand" : "Collapse", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
90
- ActionIcon,
91
- {
92
- variant: "transparent",
93
- size: "sm",
94
- onClick: () => {
95
- const v = !folded;
96
- setFolded(v);
97
- onFoldIconClick == null ? void 0 : onFoldIconClick(v);
98
- },
99
- children: folded ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
100
- }
101
- ) }),
102
- /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
103
- ActionIcon,
104
- {
105
- variant: "transparent",
106
- size: "sm",
107
- onClick: () => {
108
- copy();
109
- onCopyClick == null ? void 0 : onCopyClick();
110
- },
111
- children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconCopy01, { size: 14, strokeWidth: 2.5 })
112
- }
113
- ) }) })
90
+ foldIconVisible && /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { withArrow: true, position: "top", children: [
91
+ /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
92
+ ActionIcon,
93
+ {
94
+ size: "sm",
95
+ variant: "subtle",
96
+ onClick: () => {
97
+ const v = !folded;
98
+ setFolded(v);
99
+ onFoldIconClick == null ? void 0 : onFoldIconClick(v);
100
+ },
101
+ children: folded ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
102
+ }
103
+ ) }),
104
+ /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Dropdown, { children: folded ? "Expand" : "Collapse" })
105
+ ] }),
106
+ /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(HoverCard, { withArrow: true, position: "top", children: [
107
+ /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
108
+ ActionIcon,
109
+ {
110
+ size: "sm",
111
+ variant: "subtle",
112
+ onClick: () => {
113
+ copy();
114
+ onCopyClick == null ? void 0 : onCopyClick();
115
+ },
116
+ children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(IconCopy01, { size: 14, strokeWidth: 2.5 })
117
+ }
118
+ ) }),
119
+ /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Dropdown, { children: copied ? "Copied" : "Copy" })
120
+ ] }) })
114
121
  ] })
115
122
  ] });
116
123
  };
@@ -138,7 +145,7 @@ const CopyText = ({ children, value, ...rest }) => {
138
145
  /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
139
146
  ActionIcon,
140
147
  {
141
- variant: "transparent",
148
+ variant: "subtle",
142
149
  size: "sm",
143
150
  ml: 8,
144
151
  display: "inline-block",
@@ -6,9 +6,9 @@ const lodashEs = require("lodash-es");
6
6
  const React = require("react");
7
7
  const reactHookForm = require("react-hook-form");
8
8
  const Radio = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Radio/Radio.cjs");
9
- const HoverCard = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/HoverCard/HoverCard.cjs");
10
9
  const Tooltip = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Tooltip/Tooltip.cjs");
11
10
  const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
11
+ const HoverCard = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/HoverCard/HoverCard.cjs");
12
12
  const FormRadioGroup = ({ name, rules, onChange, data, ...rest }) => {
13
13
  const { control, formState, getFieldState } = reactHookForm.useFormContext();
14
14
  const { error } = getFieldState(name, formState);
@@ -4,9 +4,9 @@ import { omit } from "lodash-es";
4
4
  import { Fragment } from "react";
5
5
  import { useFormContext, Controller } from "react-hook-form";
6
6
  import { Radio } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Radio/Radio.js";
7
- import { HoverCard } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/HoverCard/HoverCard.js";
8
7
  import { Tooltip } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Tooltip/Tooltip.js";
9
8
  import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
9
+ import { HoverCard } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/HoverCard/HoverCard.js";
10
10
  const FormRadioGroup = ({ name, rules, onChange, data, ...rest }) => {
11
11
  const { control, formState, getFieldState } = useFormContext();
12
12
  const { error } = getFieldState(name, formState);
@@ -56,13 +56,7 @@ const PageShell = ({
56
56
  const leftSection = (!!withBack || !!headerBack) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
57
57
  ActionIcon.ActionIcon,
58
58
  {
59
- variant: "light",
60
- bg: "carbon.3",
61
- sx: (theme) => ({
62
- ":hover": {
63
- backgroundColor: theme.colors.carbon[4]
64
- }
65
- }),
59
+ variant: "default",
66
60
  onClick: () => {
67
61
  if (onBackClick) {
68
62
  onBackClick();
@@ -54,13 +54,7 @@ const PageShell = ({
54
54
  const leftSection = (!!withBack || !!headerBack) && /* @__PURE__ */ jsxRuntimeExports.jsx(
55
55
  ActionIcon,
56
56
  {
57
- variant: "light",
58
- bg: "carbon.3",
59
- sx: (theme) => ({
60
- ":hover": {
61
- backgroundColor: theme.colors.carbon[4]
62
- }
63
- }),
57
+ variant: "default",
64
58
  onClick: () => {
65
59
  if (onBackClick) {
66
60
  onBackClick();
@@ -71,6 +71,9 @@ const ProTable = ({
71
71
  transition: "none",
72
72
  backgroundColor: theme.colors.carbon[0],
73
73
  color: theme.colors.carbon[8],
74
+ "&:hover": {
75
+ backgroundColor: `${theme.colors.carbon[3]} !important`
76
+ },
74
77
  td: {
75
78
  borderColor: theme.colors.carbon[2]
76
79
  },
@@ -69,6 +69,9 @@ const ProTable = ({
69
69
  transition: "none",
70
70
  backgroundColor: theme.colors.carbon[0],
71
71
  color: theme.colors.carbon[8],
72
+ "&:hover": {
73
+ backgroundColor: `${theme.colors.carbon[3]} !important`
74
+ },
72
75
  td: {
73
76
  borderColor: theme.colors.carbon[2]
74
77
  },
@@ -60,14 +60,17 @@ const TimeRangePicker = ({
60
60
  Button.Button,
61
61
  {
62
62
  variant: "default",
63
+ bg: "carbon.0",
63
64
  styles: (theme) => ({
64
65
  root: {
65
66
  paddingLeft: "12px",
66
67
  paddingRight: "12px",
67
- borderColor: opened ? theme.colors.blue[7] : "",
68
+ borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[4],
68
69
  "&:hover": {
69
- background: "transparent"
70
- }
70
+ backgroundColor: theme.colors.carbon[0],
71
+ borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[4]
72
+ },
73
+ "&:active": { transform: "none" }
71
74
  },
72
75
  inner: {
73
76
  width: "100%"
@@ -59,14 +59,17 @@ const TimeRangePicker = ({
59
59
  Button,
60
60
  {
61
61
  variant: "default",
62
+ bg: "carbon.0",
62
63
  styles: (theme) => ({
63
64
  root: {
64
65
  paddingLeft: "12px",
65
66
  paddingRight: "12px",
66
- borderColor: opened ? theme.colors.blue[7] : "",
67
+ borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[4],
67
68
  "&:hover": {
68
- background: "transparent"
69
- }
69
+ backgroundColor: theme.colors.carbon[0],
70
+ borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[4]
71
+ },
72
+ "&:active": { transform: "none" }
70
73
  },
71
74
  inner: {
72
75
  width: "100%"
@@ -1,117 +1,93 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const dark = (theme) => ({
3
+ const light = (theme) => ({
4
4
  plain: {
5
- color: theme.colors.carbon[5],
6
- backgroundColor: theme.colors.carbon[8]
5
+ color: theme.colors.carbon[9],
6
+ backgroundColor: theme.fn.rgba(theme.colors.carbon[1], 0.65)
7
7
  },
8
8
  styles: [
9
+ // from sql editor
9
10
  {
10
- types: ["comment"],
11
+ types: ["comment", "meta"],
11
12
  style: {
12
- color: theme.colors.carbon[7]
13
+ color: theme.colors.green[8]
13
14
  }
14
15
  },
15
16
  {
16
- types: ["string", "inserted", "selector", "atrule"],
17
+ types: ["keyword", "strong"],
17
18
  style: {
18
- color: theme.colors.aqua[4]
19
+ color: theme.colors.sky[8]
19
20
  }
20
21
  },
21
22
  {
22
23
  types: ["number"],
23
24
  style: {
24
- color: theme.colors.peacock[4]
25
- }
26
- },
27
- {
28
- types: ["builtin", "char", "constant", "function"],
29
- style: {
30
- color: theme.colors.yellow[5]
25
+ color: theme.colors.rosy[8]
31
26
  }
32
27
  },
33
28
  {
34
- types: ["punctuation"],
29
+ types: ["string"],
35
30
  style: {
36
- color: theme.colors.carbon[6]
31
+ color: theme.colors.purple[8]
37
32
  }
38
33
  },
39
34
  {
40
35
  types: ["variable"],
41
36
  style: {
42
- color: theme.colors.carbon[6]
37
+ color: theme.colors.airy[9]
43
38
  }
44
39
  },
45
40
  {
46
- types: ["class-name", "attr-name"],
41
+ types: ["escape"],
47
42
  style: {
48
- color: theme.colors.yellow[5]
43
+ color: theme.colors.ocher[8]
49
44
  }
50
45
  },
51
46
  {
52
- types: ["tag", "deleted"],
47
+ types: ["tag"],
53
48
  style: {
54
- color: theme.colors.red[6]
49
+ color: theme.colors.aqua[8]
55
50
  }
56
51
  },
57
52
  {
58
- types: ["operator"],
53
+ types: ["heading"],
59
54
  style: {
60
- color: theme.colors.carbon[6]
55
+ color: theme.colors.blue[8]
61
56
  }
62
57
  },
63
58
  {
64
- types: ["boolean"],
59
+ types: ["quote"],
65
60
  style: {
66
- color: theme.colors.red[6]
61
+ color: theme.colors.carbon[8]
67
62
  }
68
63
  },
69
64
  {
70
- types: ["keyword"],
65
+ types: ["list"],
71
66
  style: {
72
- color: theme.colors.violet[3]
67
+ color: theme.colors.magenta[8]
73
68
  }
74
69
  },
75
70
  {
76
- types: ["doctype"],
71
+ types: ["documentMeta"],
77
72
  style: {
78
- color: theme.colors.carbon[6]
73
+ color: theme.colors.gray[8]
79
74
  }
80
75
  },
81
76
  {
82
- types: ["url"],
77
+ types: ["function"],
83
78
  style: {
84
- color: theme.colors.carbon[6]
85
- }
86
- }
87
- ]
88
- });
89
- const light = (theme) => ({
90
- plain: {
91
- color: theme.colors.carbon[9],
92
- backgroundColor: theme.fn.rgba(theme.colors.carbon[1], 0.65)
93
- },
94
- styles: [
95
- {
96
- types: ["comment"],
97
- style: {
98
- color: theme.colors.carbon[7]
99
- }
100
- },
101
- {
102
- types: ["string", "inserted"],
103
- style: {
104
- color: theme.colors.violet[9]
79
+ color: theme.colors.mauve[8]
105
80
  }
106
81
  },
107
82
  {
108
- types: ["number"],
83
+ types: ["type", "class-name"],
109
84
  style: {
110
- color: theme.colors.blue[7]
85
+ color: theme.colors.violet[8]
111
86
  }
112
87
  },
88
+ // other languages
113
89
  {
114
- types: ["builtin", "char", "constant", "function", "selector", "atrule"],
90
+ types: ["builtin", "char", "constant", "selector", "atrule"],
115
91
  style: {
116
92
  color: theme.colors.thyme[9]
117
93
  }
@@ -122,12 +98,6 @@ const light = (theme) => ({
122
98
  color: theme.colors.carbon[8]
123
99
  }
124
100
  },
125
- {
126
- types: ["variable"],
127
- style: {
128
- color: theme.colors.violet[9]
129
- }
130
- },
131
101
  {
132
102
  types: ["attr-name"],
133
103
  style: {
@@ -135,13 +105,7 @@ const light = (theme) => ({
135
105
  }
136
106
  },
137
107
  {
138
- types: ["class-name"],
139
- style: {
140
- color: theme.colors.red[9]
141
- }
142
- },
143
- {
144
- types: ["tag", "deleted"],
108
+ types: ["deleted"],
145
109
  style: {
146
110
  color: theme.colors.violet[9]
147
111
  }
@@ -158,12 +122,6 @@ const light = (theme) => ({
158
122
  color: theme.colors.red[9]
159
123
  }
160
124
  },
161
- {
162
- types: ["keyword"],
163
- style: {
164
- color: theme.colors.red[9]
165
- }
166
- },
167
125
  {
168
126
  types: ["doctype"],
169
127
  style: {
@@ -178,7 +136,6 @@ const light = (theme) => ({
178
136
  }
179
137
  ]
180
138
  });
181
- const getPrismTheme = (theme, colorScheme) => colorScheme === "dark" ? dark(theme) : light(theme);
182
- exports.dark = dark;
139
+ const getPrismTheme = (theme) => light(theme);
183
140
  exports.getPrismTheme = getPrismTheme;
184
141
  exports.light = light;
@@ -3,4 +3,4 @@ import { PrismTheme } from 'prism-react-renderer';
3
3
 
4
4
  export declare const dark: (theme: MantineTheme) => PrismTheme;
5
5
  export declare const light: (theme: MantineTheme) => PrismTheme;
6
- export declare const getPrismTheme: (theme: MantineTheme, colorScheme: "light" | "dark") => PrismTheme;
6
+ export declare const getPrismTheme: (theme: MantineTheme) => PrismTheme;
@@ -3,4 +3,4 @@ import { PrismTheme } from 'prism-react-renderer';
3
3
 
4
4
  export declare const dark: (theme: MantineTheme) => PrismTheme;
5
5
  export declare const light: (theme: MantineTheme) => PrismTheme;
6
- export declare const getPrismTheme: (theme: MantineTheme, colorScheme: "light" | "dark") => PrismTheme;
6
+ export declare const getPrismTheme: (theme: MantineTheme) => PrismTheme;
@@ -1,115 +1,91 @@
1
- const dark = (theme) => ({
1
+ const light = (theme) => ({
2
2
  plain: {
3
- color: theme.colors.carbon[5],
4
- backgroundColor: theme.colors.carbon[8]
3
+ color: theme.colors.carbon[9],
4
+ backgroundColor: theme.fn.rgba(theme.colors.carbon[1], 0.65)
5
5
  },
6
6
  styles: [
7
+ // from sql editor
7
8
  {
8
- types: ["comment"],
9
+ types: ["comment", "meta"],
9
10
  style: {
10
- color: theme.colors.carbon[7]
11
+ color: theme.colors.green[8]
11
12
  }
12
13
  },
13
14
  {
14
- types: ["string", "inserted", "selector", "atrule"],
15
+ types: ["keyword", "strong"],
15
16
  style: {
16
- color: theme.colors.aqua[4]
17
+ color: theme.colors.sky[8]
17
18
  }
18
19
  },
19
20
  {
20
21
  types: ["number"],
21
22
  style: {
22
- color: theme.colors.peacock[4]
23
- }
24
- },
25
- {
26
- types: ["builtin", "char", "constant", "function"],
27
- style: {
28
- color: theme.colors.yellow[5]
23
+ color: theme.colors.rosy[8]
29
24
  }
30
25
  },
31
26
  {
32
- types: ["punctuation"],
27
+ types: ["string"],
33
28
  style: {
34
- color: theme.colors.carbon[6]
29
+ color: theme.colors.purple[8]
35
30
  }
36
31
  },
37
32
  {
38
33
  types: ["variable"],
39
34
  style: {
40
- color: theme.colors.carbon[6]
35
+ color: theme.colors.airy[9]
41
36
  }
42
37
  },
43
38
  {
44
- types: ["class-name", "attr-name"],
39
+ types: ["escape"],
45
40
  style: {
46
- color: theme.colors.yellow[5]
41
+ color: theme.colors.ocher[8]
47
42
  }
48
43
  },
49
44
  {
50
- types: ["tag", "deleted"],
45
+ types: ["tag"],
51
46
  style: {
52
- color: theme.colors.red[6]
47
+ color: theme.colors.aqua[8]
53
48
  }
54
49
  },
55
50
  {
56
- types: ["operator"],
51
+ types: ["heading"],
57
52
  style: {
58
- color: theme.colors.carbon[6]
53
+ color: theme.colors.blue[8]
59
54
  }
60
55
  },
61
56
  {
62
- types: ["boolean"],
57
+ types: ["quote"],
63
58
  style: {
64
- color: theme.colors.red[6]
59
+ color: theme.colors.carbon[8]
65
60
  }
66
61
  },
67
62
  {
68
- types: ["keyword"],
63
+ types: ["list"],
69
64
  style: {
70
- color: theme.colors.violet[3]
65
+ color: theme.colors.magenta[8]
71
66
  }
72
67
  },
73
68
  {
74
- types: ["doctype"],
69
+ types: ["documentMeta"],
75
70
  style: {
76
- color: theme.colors.carbon[6]
71
+ color: theme.colors.gray[8]
77
72
  }
78
73
  },
79
74
  {
80
- types: ["url"],
75
+ types: ["function"],
81
76
  style: {
82
- color: theme.colors.carbon[6]
83
- }
84
- }
85
- ]
86
- });
87
- const light = (theme) => ({
88
- plain: {
89
- color: theme.colors.carbon[9],
90
- backgroundColor: theme.fn.rgba(theme.colors.carbon[1], 0.65)
91
- },
92
- styles: [
93
- {
94
- types: ["comment"],
95
- style: {
96
- color: theme.colors.carbon[7]
97
- }
98
- },
99
- {
100
- types: ["string", "inserted"],
101
- style: {
102
- color: theme.colors.violet[9]
77
+ color: theme.colors.mauve[8]
103
78
  }
104
79
  },
105
80
  {
106
- types: ["number"],
81
+ types: ["type", "class-name"],
107
82
  style: {
108
- color: theme.colors.blue[7]
83
+ color: theme.colors.violet[8]
109
84
  }
110
85
  },
86
+ // other languages
111
87
  {
112
- types: ["builtin", "char", "constant", "function", "selector", "atrule"],
88
+ types: ["builtin", "char", "constant", "selector", "atrule"],
113
89
  style: {
114
90
  color: theme.colors.thyme[9]
115
91
  }
@@ -120,12 +96,6 @@ const light = (theme) => ({
120
96
  color: theme.colors.carbon[8]
121
97
  }
122
98
  },
123
- {
124
- types: ["variable"],
125
- style: {
126
- color: theme.colors.violet[9]
127
- }
128
- },
129
99
  {
130
100
  types: ["attr-name"],
131
101
  style: {
@@ -133,13 +103,7 @@ const light = (theme) => ({
133
103
  }
134
104
  },
135
105
  {
136
- types: ["class-name"],
137
- style: {
138
- color: theme.colors.red[9]
139
- }
140
- },
141
- {
142
- types: ["tag", "deleted"],
106
+ types: ["deleted"],
143
107
  style: {
144
108
  color: theme.colors.violet[9]
145
109
  }
@@ -156,12 +120,6 @@ const light = (theme) => ({
156
120
  color: theme.colors.red[9]
157
121
  }
158
122
  },
159
- {
160
- types: ["keyword"],
161
- style: {
162
- color: theme.colors.red[9]
163
- }
164
- },
165
123
  {
166
124
  types: ["doctype"],
167
125
  style: {
@@ -176,9 +134,8 @@ const light = (theme) => ({
176
134
  }
177
135
  ]
178
136
  });
179
- const getPrismTheme = (theme, colorScheme) => colorScheme === "dark" ? dark(theme) : light(theme);
137
+ const getPrismTheme = (theme) => light(theme);
180
138
  export {
181
- dark,
182
139
  getPrismTheme,
183
140
  light
184
141
  };
@@ -826,7 +826,6 @@ const theme = {
826
826
  },
827
827
  ActionIcon: {
828
828
  defaultProps: {
829
- variant: "default",
830
829
  color: "carbon"
831
830
  },
832
831
  styles(theme2, params) {
@@ -899,6 +898,34 @@ const theme = {
899
898
  }
900
899
  };
901
900
  }
901
+ },
902
+ RangeCalendar: {
903
+ styles: (theme2) => ({
904
+ day: {
905
+ "&[data-first-in-range]": {
906
+ borderTopLeftRadius: theme2.defaultRadius,
907
+ borderBottomLeftRadius: theme2.defaultRadius
908
+ },
909
+ "&[data-last-in-range]": {
910
+ borderTopRightRadius: theme2.defaultRadius,
911
+ borderBottomRightRadius: theme2.defaultRadius
912
+ }
913
+ }
914
+ })
915
+ },
916
+ Anchor: {
917
+ styles: (theme2, params) => {
918
+ const color = params.color ?? "peacock";
919
+ const shade = color.includes("carbon") ? 9 : theme2.fn.primaryShade();
920
+ return {
921
+ root: {
922
+ color: theme2.fn.themeColor(color, shade),
923
+ "&:hover": {
924
+ color: theme2.fn.themeColor(color, shade)
925
+ }
926
+ }
927
+ };
928
+ }
902
929
  }
903
930
  }
904
931
  };
@@ -824,7 +824,6 @@ const theme = {
824
824
  },
825
825
  ActionIcon: {
826
826
  defaultProps: {
827
- variant: "default",
828
827
  color: "carbon"
829
828
  },
830
829
  styles(theme2, params) {
@@ -897,6 +896,34 @@ const theme = {
897
896
  }
898
897
  };
899
898
  }
899
+ },
900
+ RangeCalendar: {
901
+ styles: (theme2) => ({
902
+ day: {
903
+ "&[data-first-in-range]": {
904
+ borderTopLeftRadius: theme2.defaultRadius,
905
+ borderBottomLeftRadius: theme2.defaultRadius
906
+ },
907
+ "&[data-last-in-range]": {
908
+ borderTopRightRadius: theme2.defaultRadius,
909
+ borderBottomRightRadius: theme2.defaultRadius
910
+ }
911
+ }
912
+ })
913
+ },
914
+ Anchor: {
915
+ styles: (theme2, params) => {
916
+ const color = params.color ?? "peacock";
917
+ const shade = color.includes("carbon") ? 9 : theme2.fn.primaryShade();
918
+ return {
919
+ root: {
920
+ color: theme2.fn.themeColor(color, shade),
921
+ "&:hover": {
922
+ color: theme2.fn.themeColor(color, shade)
923
+ }
924
+ }
925
+ };
926
+ }
900
927
  }
901
928
  }
902
929
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.22",
3
+ "version": "2.0.0-beta.24",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",