@rockshin/tao-ui 0.0.5 → 0.0.6

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 (8) hide show
  1. package/dist/components/button/button.css +8 -3
  2. package/dist/components/date-picker/date-picker.css +2 -0
  3. package/dist/components/select/select.css +1 -0
  4. package/dist/components/textarea/textarea.css +1 -0
  5. package/dist/provider/tao-provider.js +25 -7
  6. package/dist/theme/control.css +9 -12
  7. package/dist/theme/theme.css +13 -8
  8. package/package.json +1 -1
package/dist/components/button/button.css CHANGED
@@ -3,15 +3,17 @@ button[data-tao-variant] {
3
3
  align-items: center;
4
4
  gap: var(--tao-padding-xs);
5
5
  font-family: var(--tao-font-family);
6
- font-weight: var(--tao-font-weight-normal);
6
+ font-weight: var(--tao-font-weight-medium);
7
7
  border: var(--tao-line-width) solid transparent;
8
8
  cursor: pointer;
9
9
  -webkit-user-select: none;
10
10
  user-select: none;
11
11
  white-space: nowrap;
12
12
  transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
13
- border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
13
+ border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
14
+ box-shadow var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
14
15
  outline: none;
16
+ line-height: 1;
15
17
  display: inline-flex;
16
18
  }
17
19
 
@@ -39,6 +41,7 @@ button[data-tao-size="large"] {
39
41
  button[data-tao-variant="primary"] {
40
42
  background: var(--tao-primary);
41
43
  color: var(--tao-primary-fg);
44
+ box-shadow: var(--tao-box-shadow-xs);
42
45
  }
43
46
 
44
47
  button[data-tao-variant="primary"]:hover:not(:disabled) {
@@ -52,6 +55,7 @@ button[data-tao-variant="primary"]:active:not(:disabled) {
52
55
  button[data-tao-variant="secondary"] {
53
56
  color: var(--tao-color-text);
54
57
  border-color: var(--tao-color-border);
58
+ box-shadow: var(--tao-box-shadow-xs);
55
59
  background: none;
56
60
  }
57
61
 
@@ -81,6 +85,7 @@ button[data-tao-variant="ghost"]:active:not(:disabled) {
81
85
  button[data-tao-variant="destructive"] {
82
86
  background: var(--tao-error);
83
87
  color: var(--tao-error-fg);
88
+ box-shadow: var(--tao-box-shadow-xs);
84
89
  }
85
90
 
86
91
  button[data-tao-variant="destructive"]:hover:not(:disabled) {
@@ -97,7 +102,7 @@ button[data-tao-variant]:disabled {
97
102
  }
98
103
 
99
104
  button[data-tao-variant]:focus-visible {
100
- box-shadow: 0 0 0 2px var(--tao-control-outline);
105
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
101
106
  outline: none;
102
107
  }
103
108
 
package/dist/components/date-picker/date-picker.css CHANGED
@@ -1,6 +1,7 @@
1
1
  button[data-tao-picker-trigger] {
2
2
  align-items: center;
3
3
  gap: var(--tao-padding-xs);
4
+ width: 100%;
4
5
  font-family: var(--tao-font-family);
5
6
  cursor: pointer;
6
7
  appearance: none;
@@ -536,6 +537,7 @@ button[data-tao-picker-footer-btn][data-tao-primary]:hover {
536
537
  }
537
538
 
538
539
  button[data-tao-range-trigger] {
540
+ width: 100%;
539
541
  font-family: var(--tao-font-family);
540
542
  cursor: pointer;
541
543
  appearance: none;
package/dist/components/select/select.css CHANGED
@@ -1,6 +1,7 @@
1
1
  [data-tao-select] {
2
2
  align-items: center;
3
3
  gap: var(--tao-padding-xs);
4
+ width: 100%;
4
5
  font-family: var(--tao-font-family);
5
6
  cursor: pointer;
6
7
  outline: none;
package/dist/components/textarea/textarea.css CHANGED
@@ -1,4 +1,5 @@
1
1
  [data-tao-textarea] {
2
+ width: 100%;
2
3
  font-family: var(--tao-font-family);
3
4
  display: block;
4
5
  }
package/dist/provider/tao-provider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c } from "react/compiler-runtime";
3
- import { createContext, useContext, useMemo } from "react";
3
+ import { createContext, useContext, useMemo, useRef } from "react";
4
4
  const TaoConfigContext = /*#__PURE__*/ createContext({
5
5
  size: 'medium',
6
6
  disabled: false,
@@ -54,9 +54,16 @@ const TOKEN_TO_VAR_PX = {
54
54
  sizeUnit: '--tao-size-unit',
55
55
  lineWidth: '--tao-line-width'
56
56
  };
57
+ function useStableTokenKey(token) {
58
+ const key = token ? JSON.stringify(token) : '';
59
+ const ref = useRef(key);
60
+ if (ref.current !== key) ref.current = key;
61
+ return ref.current;
62
+ }
57
63
  function TaoProvider({ theme, size, disabled, variant, children }) {
58
64
  const parentConfig = useContext(TaoConfigContext);
59
65
  const inherit = theme?.inherit ?? true;
66
+ const tokenKey = useStableTokenKey(theme?.token);
60
67
  const ownVars = useMemo(()=>{
61
68
  if (!theme?.token) return;
62
69
  const vars = {};
@@ -71,7 +78,7 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
71
78
  }
72
79
  return vars;
73
80
  }, [
74
- theme?.token
81
+ tokenKey
75
82
  ]);
76
83
  const tokenStyle = useMemo(()=>({
77
84
  ...parentConfig.tokenStyle,
@@ -80,23 +87,34 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
80
87
  parentConfig.tokenStyle,
81
88
  ownVars
82
89
  ]);
90
+ const divStyle = useMemo(()=>({
91
+ display: 'contents',
92
+ ...ownVars
93
+ }), [
94
+ ownVars
95
+ ]);
96
+ const parentSize = parentConfig.size;
97
+ const parentDisabled = parentConfig.disabled;
98
+ const parentVariant = parentConfig.variant;
83
99
  const config = useMemo(()=>({
84
- size: size ?? (inherit ? parentConfig.size : 'medium'),
85
- disabled: disabled ?? (inherit ? parentConfig.disabled : false),
86
- variant: variant ?? (inherit ? parentConfig.variant : 'outlined'),
100
+ size: size ?? (inherit ? parentSize : 'medium'),
101
+ disabled: disabled ?? (inherit ? parentDisabled : false),
102
+ variant: variant ?? (inherit ? parentVariant : 'outlined'),
87
103
  tokenStyle
88
104
  }), [
89
105
  size,
90
106
  disabled,
91
107
  variant,
92
- parentConfig,
93
108
  inherit,
109
+ parentSize,
110
+ parentDisabled,
111
+ parentVariant,
94
112
  tokenStyle
95
113
  ]);
96
114
  return /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
97
115
  value: config,
98
116
  children: /*#__PURE__*/ jsx("div", {
99
- style: ownVars,
117
+ style: divStyle,
100
118
  "data-tao-provider": "",
101
119
  children: children
102
120
  })
package/dist/theme/control.css CHANGED
@@ -1,10 +1,5 @@
1
1
  [data-tao-control] {
2
2
  box-sizing: border-box;
3
- width: var(--tao-control-width);
4
- }
5
-
6
- [data-tao-control][data-tao-range-trigger] {
7
- width: var(--tao-control-range-width);
8
3
  }
9
4
 
10
5
  [data-tao-form-field] [data-tao-control] {
@@ -23,12 +18,14 @@
23
18
  }
24
19
 
25
20
  [data-tao-control][data-tao-variant="outlined"]:hover:not([data-disabled]):not(:focus-within):not([data-state="open"]) {
26
- border-color: var(--tao-primary-hover);
21
+ border-color: color-mix(in oklch,
22
+ var(--tao-color-text-base) 20%,
23
+ var(--tao-color-bg-base));
27
24
  }
28
25
 
29
26
  [data-tao-control][data-tao-variant="outlined"]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-state="open"] {
30
27
  border-color: var(--tao-primary);
31
- box-shadow: 0 0 0 2px var(--tao-control-outline);
28
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
32
29
  outline: none;
33
30
  }
34
31
 
@@ -42,7 +39,7 @@
42
39
 
43
40
  [data-tao-control][data-tao-variant="outlined"][data-tao-error]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-error][data-state="open"] {
44
41
  border-color: var(--tao-error);
45
- box-shadow: 0 0 0 2px var(--tao-color-error-outline);
42
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-error-outline);
46
43
  }
47
44
 
48
45
  [data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
@@ -55,7 +52,7 @@
55
52
 
56
53
  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
57
54
  border-color: var(--tao-warning);
58
- box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
55
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-warning-outline);
59
56
  }
60
57
 
61
58
  [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
@@ -78,7 +75,7 @@
78
75
  [data-tao-control][data-tao-variant="filled"]:focus-within, [data-tao-control][data-tao-variant="filled"][data-state="open"] {
79
76
  background: var(--tao-color-bg-container);
80
77
  border-color: var(--tao-primary);
81
- box-shadow: 0 0 0 2px var(--tao-control-outline);
78
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
82
79
  outline: none;
83
80
  }
84
81
 
@@ -95,7 +92,7 @@
95
92
  [data-tao-control][data-tao-variant="filled"][data-tao-error]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-error][data-state="open"] {
96
93
  background: var(--tao-color-bg-container);
97
94
  border-color: var(--tao-error);
98
- box-shadow: 0 0 0 2px var(--tao-color-error-outline);
95
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-error-outline);
99
96
  }
100
97
 
101
98
  [data-tao-control][data-tao-variant="filled"][data-tao-warning] {
@@ -111,7 +108,7 @@
111
108
  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
112
109
  background: var(--tao-color-bg-container);
113
110
  border-color: var(--tao-warning);
114
- box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
111
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-warning-outline);
115
112
  }
116
113
 
117
114
  [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
package/dist/theme/theme.css CHANGED
@@ -1,24 +1,28 @@
1
1
  @layer base {
2
- :root, [data-tao-provider] {
2
+ :root {
3
3
  --tao-color-primary: oklch(20.5% .01 70);
4
4
  --tao-color-success: oklch(55.5% .14 155);
5
5
  --tao-color-warning: oklch(70% .15 70);
6
6
  --tao-color-error: oklch(57% .19 25);
7
7
  --tao-color-bg-base: oklch(98.5% .004 70);
8
8
  --tao-color-text-base: oklch(15.5% .01 70);
9
- --tao-radius: 6px;
9
+ --tao-radius: 10px;
10
10
  --tao-font-size: 14px;
11
11
  --tao-control-height: 36px;
12
12
  --tao-control-width: 200px;
13
13
  --tao-control-range-width: 360px;
14
14
  --tao-size-unit: 4px;
15
15
  --tao-line-width: 1px;
16
+ --tao-ring-width: 3px;
16
17
  --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
17
18
  --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
18
19
  --tao-motion-unit: .1s;
19
20
  --tao-z-index-drawer: 1000;
20
21
  --tao-z-index-modal: 1000;
21
22
  --tao-z-index-popup: 1100;
23
+ }
24
+
25
+ :root, [data-tao-provider] {
22
26
  --tao-primary: var(--tao-color-primary);
23
27
  --tao-primary-hover: color-mix(in oklch,
24
28
  var(--tao-color-primary) 80%,
@@ -88,15 +92,15 @@
88
92
  --tao-color-bg-container: oklch(100% 0 0);
89
93
  --tao-color-bg-elevated: oklch(100% 0 0);
90
94
  --tao-color-border: color-mix(in oklch,
91
- var(--tao-color-text-base) 18%,
95
+ var(--tao-color-text-base) 12%,
92
96
  var(--tao-color-bg-base));
93
97
  --tao-color-border-secondary: #0000170b;
94
98
  --tao-radius-xs: 2px;
95
99
  --tao-radius-sm: calc(var(--tao-radius) - 2px);
96
100
  --tao-radius-md: var(--tao-radius);
97
101
  --tao-radius-lg: calc(var(--tao-radius) + 2px);
98
- --tao-radius-xl: calc(var(--tao-radius) * 2);
99
- --tao-radius-2xl: calc(var(--tao-radius) * 2.67);
102
+ --tao-radius-xl: calc(var(--tao-radius) + 4px);
103
+ --tao-radius-2xl: calc(var(--tao-radius) * 2);
100
104
  --tao-radius-full: 9999px;
101
105
  --tao-control-height-sm: calc(var(--tao-control-height) - 4px);
102
106
  --tao-control-height-lg: calc(var(--tao-control-height) + 4px);
@@ -124,17 +128,18 @@
124
128
  --tao-motion-ease-out: cubic-bezier(.215, .61, .355, 1);
125
129
  --tao-motion-ease-in-out: cubic-bezier(.645, .045, .355, 1);
126
130
  --tao-motion-ease-out-quint: cubic-bezier(.23, 1, .32, 1);
131
+ --tao-box-shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / .05);
127
132
  --tao-box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 0 1px oklch(0% 0 0 / .08);
128
133
  --tao-box-shadow-secondary: 0 2px 8px oklch(0% 0 0 / .06), 0 0 1px oklch(0% 0 0 / .06);
129
134
  --tao-box-shadow-tertiary: 0 1px 2px oklch(0% 0 0 / .04);
130
135
  --tao-control-outline: color-mix(in oklch,
131
- var(--tao-color-primary) 10%,
136
+ var(--tao-color-primary) 20%,
132
137
  transparent);
133
138
  --tao-color-error-outline: color-mix(in oklch,
134
- var(--tao-color-error) 10%,
139
+ var(--tao-color-error) 25%,
135
140
  transparent);
136
141
  --tao-color-warning-outline: color-mix(in oklch,
137
- var(--tao-color-warning) 10%,
142
+ var(--tao-color-warning) 25%,
138
143
  transparent);
139
144
  --tao-color-text-placeholder: var(--tao-color-text-quaternary);
140
145
  --tao-color-text-disabled: var(--tao-color-text-quaternary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rockshin/tao-ui",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "type": "module",
5
5
  "description": "A modern React 19 component library with semantic DOM customization and OKLCH-based theming.",
6
6
  "keywords": [