@canlooks/can-ui 0.0.43 → 0.0.45

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 (24) hide show
  1. package/dist/cjs/components/card/card.style.js +2 -2
  2. package/dist/cjs/components/form/form.d.ts +1 -1
  3. package/dist/cjs/components/placeholder/placeholder.js +3 -3
  4. package/dist/cjs/components/segmented/segmented.d.ts +3 -1
  5. package/dist/cjs/components/segmented/segmented.js +2 -2
  6. package/dist/cjs/components/segmented/segmented.style.d.ts +4 -1
  7. package/dist/cjs/components/segmented/segmented.style.js +94 -90
  8. package/dist/cjs/components/theme/themeVariables.js +6 -6
  9. package/dist/cjs/types.d.ts +1 -1
  10. package/dist/cjs/utils/style.js +5 -1
  11. package/dist/esm/components/card/card.style.js +2 -2
  12. package/dist/esm/components/form/form.d.ts +1 -1
  13. package/dist/esm/components/placeholder/placeholder.js +3 -3
  14. package/dist/esm/components/segmented/segmented.d.ts +3 -1
  15. package/dist/esm/components/segmented/segmented.js +3 -3
  16. package/dist/esm/components/segmented/segmented.style.d.ts +4 -1
  17. package/dist/esm/components/segmented/segmented.style.js +93 -90
  18. package/dist/esm/components/theme/themeVariables.js +6 -6
  19. package/dist/esm/types.d.ts +1 -1
  20. package/dist/esm/utils/style.js +5 -1
  21. package/documentation/dist/assets/{index-DXo4Z-bc.js → index-Dqm5gD_7.js} +387 -387
  22. package/documentation/dist/components/segmented.md +14 -13
  23. package/documentation/dist/index.html +1 -1
  24. package/package.json +1 -1
package/dist/esm/components/segmented/segmented.style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from '@emotion/react';
2
- import { defineInnerClasses, defineCss } from '../../utils';
2
+ import { defineInnerClasses, useColor, useCss } from '../../utils';
3
3
  import Color from 'color';
4
4
  export const classes = defineInnerClasses('segmented', [
5
5
  'option',
@@ -8,115 +8,118 @@ export const classes = defineInnerClasses('segmented', [
8
8
  'suffix',
9
9
  'indicator'
10
10
  ]);
11
- export const style = defineCss(({ mode, background, borderRadius, easing, text }) => {
12
- const bgColor = Color(background.body);
13
- const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
14
- const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
15
- return css `
16
- display: inline-flex;
17
- background-color: ${background.body};
18
- border-radius: ${borderRadius}px;
19
- padding: 2px;
20
- position: relative;
21
-
22
- .${classes.option} {
23
- display: flex;
24
- align-items: center;
25
- justify-content: center;
26
- gap: 6px;
27
- padding: 4px 12px;
11
+ export function useStyle({ indicatorColor }) {
12
+ const indicatorColorValue = useColor(indicatorColor);
13
+ return useCss(({ mode, background, borderRadius, easing, text }) => {
14
+ const bgColor = Color(background.body);
15
+ const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
16
+ const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
17
+ return css `
18
+ display: inline-flex;
19
+ background-color: ${background.body};
28
20
  border-radius: ${borderRadius}px;
29
- white-space: nowrap;
30
- text-overflow: ellipsis;
31
- overflow: hidden;
32
- z-index: 1;
33
- transition: background-color .3s ${easing.easeOut};
34
- -webkit-tap-highlight-color: transparent;
35
-
36
- &[data-active=true] {
37
- transition: background-color 0s;
38
- }
21
+ padding: 2px;
22
+ position: relative;
39
23
 
40
- &[data-orientation=vertical] {
41
- flex-direction: column;
42
- }
24
+ .${classes.option} {
25
+ display: flex;
26
+ align-items: center;
27
+ justify-content: center;
28
+ gap: 6px;
29
+ padding: 4px 12px;
30
+ border-radius: ${borderRadius}px;
31
+ white-space: nowrap;
32
+ text-overflow: ellipsis;
33
+ overflow: hidden;
34
+ z-index: 1;
35
+ transition: background-color .3s ${easing.easeOut};
36
+ -webkit-tap-highlight-color: transparent;
43
37
 
44
- &[data-disabled=true] {
45
- cursor: not-allowed;
46
- color: ${text.disabled};
47
- }
48
- }
38
+ &[data-active=true] {
39
+ transition: background-color 0s;
40
+ }
49
41
 
50
- &[data-size=small] {
51
- .${classes.option} {
52
- padding: 3px 12px;
53
- }
54
- }
42
+ &[data-orientation=vertical] {
43
+ flex-direction: column;
44
+ }
55
45
 
56
- &[data-size=large] {
57
- .${classes.option} {
58
- padding: 11px 12px;
46
+ &[data-disabled=true] {
47
+ cursor: not-allowed;
48
+ color: ${text.disabled};
49
+ }
59
50
  }
60
- }
61
51
 
62
- &[data-full-width=true] {
63
- display: flex;
52
+ &[data-size=small] {
53
+ .${classes.option} {
54
+ padding: 3px 12px;
55
+ }
56
+ }
64
57
 
65
- .${classes.option} {
66
- flex: 1;
58
+ &[data-size=large] {
59
+ .${classes.option} {
60
+ padding: 11px 12px;
61
+ }
67
62
  }
68
- }
69
63
 
70
- &[data-orientation=vertical] {
71
- flex-direction: column;
72
- }
64
+ &[data-full-width=true] {
65
+ display: flex;
73
66
 
74
- .${classes.indicator} {
75
- border-radius: ${borderRadius}px;
76
- background-color: ${background.content};
77
- box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
78
- position: absolute;
79
- transition: all .3s ${easing.bounce};
80
- }
67
+ .${classes.option} {
68
+ flex: 1;
69
+ }
70
+ }
81
71
 
82
- &[data-animating=true] {
83
- .${classes.option} {
84
- transition: background-color 0s;
72
+ &[data-orientation=vertical] {
73
+ flex-direction: column;
85
74
  }
86
- }
87
75
 
88
- &:not([data-animating=true]) {
89
- .${classes.option}[data-active=true] {
90
- background-color: ${background.content};
76
+ .${classes.indicator} {
77
+ border-radius: ${borderRadius}px;
78
+ background-color: ${indicatorColorValue};
91
79
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
80
+ position: absolute;
81
+ transition: all .3s ${easing.bounce};
92
82
  }
93
- }
94
83
 
95
- &:not(:has([data-active=true])) {
96
- .${classes.indicator} {
97
- display: none;
84
+ &[data-animating=true] {
85
+ .${classes.option} {
86
+ transition: background-color 0s;
87
+ }
98
88
  }
99
- }
100
-
101
- &:not([data-read-only=true]):not([data-disabled=true]) {
102
- .${classes.option}:not([data-disabled=true]) {
103
- cursor: pointer;
104
-
105
- &:not([data-active=true]):hover {
106
- background-color: ${hoverBg};
89
+
90
+ &:not([data-animating=true]) {
91
+ .${classes.option}[data-active=true] {
92
+ background-color: ${indicatorColorValue};
93
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
107
94
  }
108
-
109
- &:not([data-active=true]):active {
110
- transition: background-color 0s;
111
- background-color: ${activeBg};
95
+ }
96
+
97
+ &:not(:has([data-active=true])) {
98
+ .${classes.indicator} {
99
+ display: none;
112
100
  }
113
101
  }
114
- }
115
102
 
116
- &[data-disabled=true] {
117
- .${classes.option} {
118
- cursor: not-allowed;
103
+ &:not([data-read-only=true]):not([data-disabled=true]) {
104
+ .${classes.option}:not([data-disabled=true]) {
105
+ cursor: pointer;
106
+
107
+ &:not([data-active=true]):hover {
108
+ background-color: ${hoverBg};
109
+ }
110
+
111
+ &:not([data-active=true]):active {
112
+ transition: background-color 0s;
113
+ background-color: ${activeBg};
114
+ }
115
+ }
116
+ }
117
+
118
+ &[data-disabled=true] {
119
+ .${classes.option} {
120
+ cursor: not-allowed;
121
+ }
119
122
  }
120
- }
121
- `;
122
- });
123
+ `;
124
+ }, [indicatorColorValue]);
125
+ }
package/dist/esm/components/theme/themeVariables.js CHANGED
@@ -179,15 +179,15 @@ export const defaultLightTheme = {
179
179
  export const defaultDarkTheme = {
180
180
  mode: 'dark',
181
181
  background: {
182
- /* content: rGray(.2), */
183
- content: '#333333',
184
- /* body: rGray(.15), */
185
- body: '#252525',
182
+ /* content: rGray(.14), */
183
+ content: '#242424',
184
+ /* body: rGray(.1), */
185
+ body: '#1a1a1a',
186
186
  fixed: 'rgba(255, 255, 255, .06)'
187
187
  },
188
188
  gray: rGray,
189
- /* divider: rGray(.36), */
190
- divider: '#5c5c5c',
189
+ /* divider: rGray(.28), */
190
+ divider: '#474747',
191
191
  colors: {
192
192
  /* primary: Color(defaultLightTheme.colors!.primary).lighten(.1).hex(), */
193
193
  primary: '#3780EE',
package/dist/esm/types.d.ts CHANGED
@@ -46,7 +46,7 @@ export type SlotsAndProps<Default extends Record<string, any>> = {
46
46
  [P in keyof Default]?: ElementType;
47
47
  };
48
48
  slotProps?: {
49
- [P in keyof Default]?: Default[P] & Obj;
49
+ [P in keyof Default]?: Default[P] | Obj;
50
50
  };
51
51
  };
52
52
  /**
package/dist/esm/utils/style.js CHANGED
@@ -55,7 +55,7 @@ export function useCss(callback, deps) {
55
55
  * @param theme
56
56
  */
57
57
  export function colorTransfer(colorPropsValue, theme) {
58
- const { colors, text } = theme;
58
+ const { colors, text, background } = theme;
59
59
  if (colorPropsValue in colors) {
60
60
  return colors[colorPropsValue].main;
61
61
  }
@@ -68,6 +68,10 @@ export function colorTransfer(colorPropsValue, theme) {
68
68
  return text[member];
69
69
  }
70
70
  }
71
+ if (colorPropsValue.startsWith('background')) {
72
+ const [, member] = colorPropsValue.split('.');
73
+ return background[member];
74
+ }
71
75
  return colorPropsValue;
72
76
  }
73
77
  /**