@rescui/card 0.12.1-remove-core-js-dep-e582ebda.2 → 0.13.1

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 (7) hide show
  1. package/lib/card.d.ts +32 -10
  2. package/lib/card.js +22 -19
  3. package/lib/card.p.module.css.js +26 -21
  4. package/lib/index.css +396 -146
  5. package/lib/index.d.ts +1 -1
  6. package/lib/index.js +1 -1
  7. package/package.json +8 -7
package/lib/card.d.ts CHANGED
@@ -1,53 +1,75 @@
1
1
  export declare type CardIsClickable = boolean;
2
2
  export declare type CardTheme = 'light' | 'dark';
3
3
  export declare type CardMode = 'classic' | 'rock';
4
- export declare type CardPaddings = 16 | 24 | 32;
4
+ export declare type CardPaddings = 0 | 16 | 24 | 32;
5
5
  export declare type CardBorderRadius = 0 | 8 | 16 | 24;
6
6
  export declare type CardGlowHover = boolean;
7
7
  export declare type CardImageType = 'cardImageImg' | 'cardImageDiv';
8
8
  export declare type CardProps = {
9
- /** Card clickable property
9
+ /** Clickable property
10
10
  * @default false
11
11
  * */
12
12
  isClickable?: CardIsClickable;
13
13
  /** Appearance theme
14
- * @default light
14
+ * @default auto
15
15
  * */
16
16
  theme?: CardTheme;
17
- /** Appearance mode
17
+ /** Appearance mode, only works for `clickable` cards
18
18
  * @default classic
19
19
  * */
20
20
  mode?: CardMode;
21
21
  /** Appearance paddings
22
22
  * @default 24
23
23
  * */
24
+ padding?: CardPaddings;
25
+ /**
26
+ * @default 24
27
+ * @deprecated use `padding` instead
28
+ * */
24
29
  paddings?: CardPaddings;
25
30
  /** Card borders style
26
31
  * @default 8
27
32
  * */
28
33
  borderRadius?: CardBorderRadius;
29
- /** Card has glowHover effect provided by `useGlowHover` hook
34
+ /**
30
35
  * @default false
36
+ * @deprecated with latest `@rescui/use-glow-hover` version it resolves automatically
31
37
  * */
32
38
  hasGlowHover?: CardGlowHover;
33
- /** Disable border for all cases except isClickable without glow-hover
39
+ /** Disables border
34
40
  * @default false
35
41
  * */
36
42
  disableBorder?: boolean;
43
+ /** Make borders of solid color. This prop is useful when using `cardImageCn` helper so the border wouldn't mix with the image.
44
+ *
45
+ * @default false
46
+ * */
47
+ disableBorderTransparency?: boolean;
48
+ /**
49
+ * @default false
50
+ * @deprecated Render card borders using legacy `border` CSS property.
51
+ *
52
+ * Use only as a last resort. The reason is that `border` width scales with display scaling, and it's not possible to offset it using padding reliably. [More info](https://stackoverflow.com/questions/46105681/get-wrong-border-width-on-firefox).
53
+ *
54
+ * Customize borders using [CSS vars](/components/card-cn/css/) instead.
55
+ */
56
+ legacyBorder?: boolean;
37
57
  };
38
58
  export declare type CardImgType = {
39
- /**
59
+ /** Sets a type of image in a card
40
60
  * @default cardImageDiv
41
61
  * */
42
62
  cardImageType?: CardImageType;
43
- /** Disable predefined image height, if you use this prop you should manually equalize image heights between cards on one row/group
63
+ /** Disable predefined image height, when using this prop manually equalize image heights within cards in one row or group
44
64
  * @default false
45
65
  * */
46
66
  disableFixedHeight?: boolean;
47
- /** Disable image stretching to the card width. Applied only to the `cardImageImg` card image type.
67
+ /** Disable stretching the image to the card width, only applies to the `cardImageImg` card image type
48
68
  * @default false
49
69
  * */
50
70
  disableFullWidth?: boolean;
51
71
  };
52
- export declare const cardCn: ({ isClickable, theme, mode, paddings, borderRadius, hasGlowHover, disableBorder }?: CardProps) => string;
72
+ export declare const cardLinkCn: () => any;
73
+ export declare const cardButtonCn: () => any;
74
+ export declare const cardCn: ({ isClickable, theme, mode, padding, borderRadius, disableBorder, disableBorderTransparency, paddings, hasGlowHover, legacyBorder }?: CardProps) => string;
53
75
  export declare const cardImageCn: ({ cardImageType, disableFixedHeight, disableFullWidth }: CardImgType) => string;
package/lib/card.js CHANGED
@@ -1,5 +1,10 @@
1
1
  import cn from 'classnames';
2
2
  import styles from './card.p.module.css.js';
3
+
4
+ const cardLinkCn = () => styles.innerLink;
5
+
6
+ const cardButtonCn = () => styles.innerButton;
7
+
3
8
  const THEME_STYLES = {
4
9
  light: styles.themeLight,
5
10
  dark: styles.themeDark
@@ -8,16 +13,17 @@ const MODE_STYLES = {
8
13
  classic: styles.modeClassic,
9
14
  rock: styles.modeRock
10
15
  };
11
- const PADDINGS_STYLES = {
12
- 16: styles.paddings16,
13
- 24: styles.paddings24,
14
- 32: styles.paddings32
16
+ const PADDING_STYLES = {
17
+ 0: styles.padding0,
18
+ 16: styles.padding16,
19
+ 24: styles.padding24,
20
+ 32: styles.padding32
15
21
  };
16
22
  const BORDER_RADIUS_STYLES = {
17
- 0: styles.bordersRadius0,
18
- 8: styles.bordersRadius8,
19
- 16: styles.bordersRadius16,
20
- 24: styles.bordersRadius24
23
+ 0: styles.borderRadius0,
24
+ 8: styles.borderRadius8,
25
+ 16: styles.borderRadius16,
26
+ 24: styles.borderRadius24
21
27
  };
22
28
  const CARD_IMAGE_STYLES = {
23
29
  cardImageImg: styles.cardImageImg,
@@ -29,22 +35,19 @@ const cardCn = function () {
29
35
  isClickable,
30
36
  theme,
31
37
  mode,
32
- paddings,
38
+ padding,
33
39
  borderRadius,
40
+ disableBorder,
41
+ disableBorderTransparency,
42
+ paddings,
34
43
  hasGlowHover,
35
- disableBorder
44
+ legacyBorder
36
45
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
37
46
  const themeClass = THEME_STYLES[theme] ?? '';
38
47
  const modeClass = MODE_STYLES[mode] ?? MODE_STYLES.classic;
39
- const paddingsClass = PADDINGS_STYLES[paddings] ?? PADDINGS_STYLES[24];
48
+ const paddingClass = PADDING_STYLES[padding ?? paddings] ?? PADDING_STYLES[24];
40
49
  const borderRadiusClass = BORDER_RADIUS_STYLES[borderRadius] ?? BORDER_RADIUS_STYLES[8];
41
- const showBorderStatesClass = isClickable && (!disableBorder || !hasGlowHover);
42
- return cn(styles.card, themeClass, modeClass, paddingsClass, borderRadiusClass, {
43
- [styles.cardPlain]: !isClickable,
44
- [styles.glowHover]: hasGlowHover,
45
- [styles.withStaticBorder]: !disableBorder,
46
- [styles.withStatesBorder]: showBorderStatesClass
47
- });
50
+ return cn(isClickable ? styles.clickable : styles.tile, themeClass, isClickable ? modeClass : MODE_STYLES.classic, paddingClass, borderRadiusClass, hasGlowHover && styles.hasGlowHover, disableBorder && styles.disableBorder, disableBorderTransparency ? styles.transparentBorderFalse : styles.transparentBorderTrue, legacyBorder && styles.legacyBorder);
48
51
  };
49
52
 
50
53
  const cardImageCn = _ref => {
@@ -57,4 +60,4 @@ const cardImageCn = _ref => {
57
60
  return cn(styles.cardImage, cardImgExtraStyles, !disableFixedHeight && styles.fixedImageHeight, !disableFullWidth && styles.fullImageWidth);
58
61
  };
59
62
 
60
- export { cardCn, cardImageCn };
63
+ export { cardButtonCn, cardCn, cardImageCn, cardLinkCn };
package/lib/card.p.module.css.js CHANGED
@@ -1,24 +1,29 @@
1
1
  var styles = {
2
- "card": "_card_kmytob_6",
3
- "themeLight": "_themeLight_kmytob_50",
4
- "themeDark": "_themeDark_kmytob_54",
5
- "withStaticBorder": "_withStaticBorder_kmytob_58",
6
- "cardPlain": "_cardPlain_kmytob_62",
7
- "modeClassic": "_modeClassic_kmytob_62",
8
- "modeRock": "_modeRock_kmytob_63",
9
- "withStatesBorder": "_withStatesBorder_kmytob_67",
10
- "paddings16": "_paddings16_kmytob_96",
11
- "paddings24": "_paddings24_kmytob_100",
12
- "paddings32": "_paddings32_kmytob_104",
13
- "glowHover": "_glowHover_kmytob_72",
14
- "bordersRadius0": "_bordersRadius0_kmytob_108",
15
- "bordersRadius8": "_bordersRadius8_kmytob_112",
16
- "bordersRadius16": "_bordersRadius16_kmytob_116",
17
- "bordersRadius24": "_bordersRadius24_kmytob_120",
18
- "cardImage": "_cardImage_kmytob_124",
19
- "cardImageImg": "_cardImageImg_kmytob_132",
20
- "cardImageDiv": "_cardImageDiv_kmytob_166",
21
- "fixedImageHeight": "_fixedImageHeight_kmytob_199",
22
- "fullImageWidth": "_fullImageWidth_kmytob_217"
2
+ "themeLight": "_themeLight_8ildiv_8",
3
+ "themeDark": "_themeDark_8ildiv_11",
4
+ "padding0": "_padding0_8ildiv_15",
5
+ "padding16": "_padding16_8ildiv_18",
6
+ "padding24": "_padding24_8ildiv_21",
7
+ "padding32": "_padding32_8ildiv_24",
8
+ "borderRadius0": "_borderRadius0_8ildiv_28",
9
+ "borderRadius8": "_borderRadius8_8ildiv_31",
10
+ "borderRadius16": "_borderRadius16_8ildiv_34",
11
+ "borderRadius24": "_borderRadius24_8ildiv_37",
12
+ "modeClassic": "_modeClassic_8ildiv_41",
13
+ "modeRock": "_modeRock_8ildiv_51",
14
+ "transparentBorderTrue": "_transparentBorderTrue_8ildiv_60",
15
+ "transparentBorderFalse": "_transparentBorderFalse_8ildiv_63",
16
+ "clickable": "_clickable_8ildiv_111",
17
+ "disableBorder": "_disableBorder_8ildiv_70",
18
+ "hasGlowHover": "_hasGlowHover_8ildiv_88",
19
+ "legacyBorder": "_legacyBorder_8ildiv_133",
20
+ "tile": "_tile_8ildiv_245",
21
+ "fixedImageHeight": "_fixedImageHeight_8ildiv_321",
22
+ "fullImageWidth": "_fullImageWidth_8ildiv_330",
23
+ "cardImage": "_cardImage_8ildiv_334",
24
+ "cardImageImg": "_cardImageImg_8ildiv_342",
25
+ "cardImageDiv": "_cardImageDiv_8ildiv_367",
26
+ "innerLink": "_innerLink_8ildiv_392",
27
+ "innerButton": "_innerButton_8ildiv_404"
23
28
  };
24
29
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,72 @@
1
- ._card_kmytob_6{
1
+ ._themeLight_8ildiv_8{
2
+ --rs-theme-dark:0;
3
+ }
4
+
5
+ ._themeDark_8ildiv_11{
6
+ --rs-theme-dark:1;
7
+ }
8
+
9
+ ._padding0_8ildiv_15{
10
+ --_rs-card-padding:0px;
11
+ }
12
+
13
+ ._padding16_8ildiv_18{
14
+ --_rs-card-padding:16px;
15
+ }
16
+
17
+ ._padding24_8ildiv_21{
18
+ --_rs-card-padding:24px;
19
+ }
20
+
21
+ ._padding32_8ildiv_24{
22
+ --_rs-card-padding:32px;
23
+ }
24
+
25
+ ._borderRadius0_8ildiv_28{
26
+ --_rs-card-border-radius:0px;
27
+ }
28
+
29
+ ._borderRadius8_8ildiv_31{
30
+ --_rs-card-border-radius:8px;
31
+ }
32
+
33
+ ._borderRadius16_8ildiv_34{
34
+ --_rs-card-border-radius:16px;
35
+ }
36
+
37
+ ._borderRadius24_8ildiv_37{
38
+ --_rs-card-border-radius:24px;
39
+ }
40
+
41
+ ._modeClassic_8ildiv_41{
42
+ --_rs-card-states-theme-flip:0;
43
+
44
+ --_rs-card-hover-focus-active-border-color:rgb(
45
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
46
+ );
47
+
48
+ --_rs-card-hover-focus-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
49
+ --_rs-card-active-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
50
+ }
51
+
52
+ ._modeRock_8ildiv_51{
53
+ --_rs-card-states-theme-flip:1;
54
+
55
+ --_rs-card-hover-focus-active-border-color:transparent;
56
+
57
+ --_rs-card-hover-focus-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
58
+ --_rs-card-active-background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
59
+ }
60
+
61
+ ._transparentBorderTrue_8ildiv_60{
62
+ --_rs-card-grey-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
63
+ }
64
+
65
+ ._transparentBorderFalse_8ildiv_63{
66
+ --_rs-card-grey-border-color:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*115), calc(209 - var(--_rs-theme-dark-coefficient, 0)*115), calc(210 - var(--_rs-theme-dark-coefficient, 0)*114));
67
+ }
68
+
69
+ ._clickable_8ildiv_111{
2
70
  --_rs-theme-dark:var(
3
71
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
72
  var(--rs-theme-dark, 0)
@@ -6,205 +74,387 @@
6
74
  --_rs-theme-flip:var(--rs-theme-flip, 0);
7
75
  --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
8
76
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
77
+ --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
78
+ }
9
79
 
10
- overflow:hidden;
80
+ ._clickable_8ildiv_111._disableBorder_8ildiv_70{
81
+ --_rs-card-native-static-border-color:transparent;
82
+ }
11
83
 
12
- box-sizing:border-box;
13
- min-height:0;
84
+ ._clickable_8ildiv_111 {
85
+ --_rs-card-native-hover-border-color:var(
86
+ --_rs-card-hover-focus-active-border-color
87
+ );
88
+ --_rs-card-native-active-border-width:2px;
89
+ --_rs-card-native-active-border-color:var(
90
+ --_rs-card-hover-focus-active-border-color
91
+ );
92
+ }
93
+
94
+ ._clickable_8ildiv_111:is([data-extra-hover-effect], ._hasGlowHover_8ildiv_88){
95
+ --_rs-card-native-hover-border-color:var(--_rs-card-grey-border-color);
96
+ }
97
+
98
+ ._clickable_8ildiv_111:is([data-extra-hover-effect], ._hasGlowHover_8ildiv_88)[data-extra-active-effect]{
99
+ --_rs-card-native-active-border-width:1px;
100
+ --_rs-card-native-active-border-color:var(--_rs-card-grey-border-color);
101
+ }
102
+
103
+ ._clickable_8ildiv_111:is([data-extra-hover-effect], ._hasGlowHover_8ildiv_88)._disableBorder_8ildiv_70{
104
+ --_rs-card-native-hover-border-color:transparent;
14
105
 
15
- border-width:1px;
16
- border-style:solid;
106
+ --_rs-card-native-active-border-width:1px;
107
+ }
108
+
109
+ ._clickable_8ildiv_111:is([data-extra-hover-effect], ._hasGlowHover_8ildiv_88)._disableBorder_8ildiv_70[data-extra-active-effect]{
110
+ --_rs-card-native-active-border-color:transparent;
111
+ }
17
112
 
18
- border-color:var(--rs-card-border-color, transparent);
19
- border-radius:var(
113
+ ._clickable_8ildiv_111 {
114
+
115
+ --_rs-card-env-background:var(
116
+ --rs-card-static-background,
117
+ rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204))
118
+ );
119
+ --_rs-card-env-border-width:var(--rs-card-static-border-width, 1px);
120
+ --_rs-card-env-border-color:var(
121
+ --rs-card-static-border-color,
122
+ var(--_rs-card-native-static-border-color)
123
+ );
124
+ --_rs-card-padding-final:var(--rs-card-padding, var(--_rs-card-padding));
125
+ --_rs-card-border-radius-final:var(
20
126
  --rs-card-border-radius,
21
- var(--_rs-card-border-radius, 0)
127
+ var(--_rs-card-border-radius)
22
128
  );
23
129
 
130
+ --_rs-card-css-padding:var(--_rs-card-padding-final);
131
+ --_rs-card-css-border:none;
132
+ }
133
+
134
+ ._clickable_8ildiv_111._legacyBorder_8ildiv_133{
135
+ --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
136
+ --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
137
+ }
138
+
139
+ ._clickable_8ildiv_111 {
140
+ --rs-out-card-padding:var(--_rs-card-padding-final);
141
+ --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
142
+ --rs-out-card-border-width:var(--_rs-card-env-border-width);
143
+ --rs-out-card-border-color:var(--_rs-card-env-border-color);
144
+ --rs-out-card-background:var(--_rs-card-env-background);
145
+
146
+ position:relative;
147
+
148
+ display:block;
149
+
150
+ overflow:hidden;
151
+
152
+ box-sizing:border-box;
153
+ min-height:0;
154
+ padding:var(--_rs-card-css-padding);
155
+
156
+ border:var(--_rs-card-css-border);
157
+ border-radius:var(--_rs-card-border-radius-final);
158
+
24
159
  cursor:pointer;
25
160
  text-align:inherit;
26
161
 
27
- background-color:var(--rs-card-background-color, rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204)));
162
+ background:var(--_rs-card-env-background);
28
163
 
29
164
  transition:color 100ms, background-color 100ms, border-color 100ms;
30
165
  -webkit-appearance:none;
31
166
  -moz-appearance:none;
32
167
  appearance:none;
33
- -webkit-mask-image:-webkit-radial-gradient(white, black);
34
168
  }
35
- ._card_kmytob_6:focus-visible{
36
- outline:none;
37
- }
38
- a._card_kmytob_6{
39
- display:block;
40
169
 
41
- text-decoration:none;
42
- }
43
- a._card_kmytob_6:hover{
44
- text-decoration:none;
45
- }
46
- ._themeLight_kmytob_50{
47
- --rs-theme-dark:0;
48
- }
49
- ._themeDark_kmytob_54{
50
- --rs-theme-dark:1;
51
- }
52
- ._withStaticBorder_kmytob_58{
53
- border-color:var(--rs-card-border-color, rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), .2));
54
- }
55
- ._cardPlain_kmytob_62._modeClassic_kmytob_62,
56
- ._cardPlain_kmytob_62._modeRock_kmytob_63{
57
- cursor:auto;
58
- }
59
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:active{
60
- border-width:2px;
61
- }
62
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:active._paddings16_kmytob_96{
63
- padding:calc(var(--rs-card-padding, 16px) - 1px);
64
- }
65
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:active._paddings24_kmytob_100{
66
- padding:calc(var(--rs-card-padding, 24px) - 1px);
170
+ ._clickable_8ildiv_111:not(._legacyBorder_8ildiv_133)::after{
171
+ position:absolute;
172
+ top:0;
173
+ right:0;
174
+ bottom:0;
175
+ left:0;
176
+
177
+ display:block;
178
+
179
+ border-radius:inherit;
180
+
181
+ content:'';
182
+ pointer-events:none;
183
+
184
+ box-shadow:inset 0 0 0 var(--_rs-card-env-border-width) var(--_rs-card-env-border-color);
185
+
186
+ transition:box-shadow 100ms;
67
187
  }
68
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:active._paddings32_kmytob_104{
69
- padding:calc(var(--rs-card-padding, 32px) - 1px);
188
+
189
+ ._clickable_8ildiv_111,
190
+ ._clickable_8ildiv_111:hover{
191
+ text-decoration:none;
70
192
  }
71
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:not(._glowHover_kmytob_72):hover,
72
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:not(._glowHover_kmytob_72):focus[data-focus-method='key'],
73
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:not(._glowHover_kmytob_72):focus-visible,
74
- ._modeClassic_kmytob_62._withStatesBorder_kmytob_67:not(._glowHover_kmytob_72):active{
75
- --rs-card-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
193
+
194
+ @media (hover: hover){
195
+ ._clickable_8ildiv_111:hover{
196
+ --rs-theme-flip:var(--_rs-card-states-theme-flip);
197
+
198
+ --_rs-card-env-background:var(
199
+ --rs-card-hover-background,
200
+ var(--_rs-card-hover-focus-background)
201
+ );
202
+ --_rs-card-env-border-width:var(--rs-card-hover-border-width, 1px);
203
+ --_rs-card-env-border-color:var(
204
+ --rs-card-hover-border-color,
205
+ var(--_rs-card-native-hover-border-color)
206
+ );
76
207
  }
77
- ._modeRock_kmytob_63:hover,
78
- ._modeRock_kmytob_63:focus[data-focus-method='key'],
79
- ._modeRock_kmytob_63:focus-visible{
80
- --rs-theme-flip:1;
81
- background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
82
208
  }
83
- ._modeRock_kmytob_63:active{
84
- --rs-theme-flip:1;
85
- background-color:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
209
+
210
+ ._clickable_8ildiv_111:focus-visible{
211
+ --rs-theme-flip:var(--_rs-card-states-theme-flip);
212
+
213
+ --_rs-card-env-background:var(
214
+ --rs-card-focus-background,
215
+ var(--_rs-card-hover-focus-background)
216
+ );
217
+ --_rs-card-env-border-width:var(--rs-card-focus-border-width, 1px);
218
+ --_rs-card-env-border-color:var(
219
+ --rs-card-focus-border-color,
220
+ var(--_rs-card-hover-focus-active-border-color)
221
+ );
222
+ outline:none;
86
223
  }
87
- ._paddings16_kmytob_96{
88
- padding:var(--rs-card-padding, 16px);
89
- }
90
- ._paddings24_kmytob_100{
91
- padding:var(--rs-card-padding, 24px);
92
- }
93
- ._paddings32_kmytob_104{
94
- padding:var(--rs-card-padding, 32px);
224
+
225
+ ._clickable_8ildiv_111:active{
226
+ --rs-theme-flip:var(--_rs-card-states-theme-flip);
227
+
228
+ --_rs-card-env-background:var(
229
+ --rs-card-active-background,
230
+ var(--_rs-card-active-background)
231
+ );
232
+ --_rs-card-env-border-width:var(
233
+ --rs-card-active-border-width,
234
+ var(--_rs-card-native-active-border-width)
235
+ );
236
+ --_rs-card-env-border-color:var(
237
+ --rs-card-active-border-color,
238
+ var(--_rs-card-native-active-border-color)
239
+ );
240
+ }
241
+
242
+ ._tile_8ildiv_245{
243
+ --_rs-theme-dark:var(
244
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
245
+ var(--rs-theme-dark, 0)
246
+ );
247
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
248
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
249
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
250
+ --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
95
251
  }
96
- ._bordersRadius0_kmytob_108{
97
- --_rs-card-border-radius:0;
252
+
253
+ ._tile_8ildiv_245._disableBorder_8ildiv_70{
254
+ --_rs-card-native-static-border-color:transparent;
255
+ }
256
+
257
+ ._tile_8ildiv_245 {
258
+
259
+ --_rs-card-env-background:var(
260
+ --rs-card-static-background,
261
+ rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204))
262
+ );
263
+ --_rs-card-env-border-width:var(--rs-card-static-border-width, 1px);
264
+ --_rs-card-env-border-color:var(
265
+ --rs-card-static-border-color,
266
+ var(--_rs-card-native-static-border-color)
267
+ );
268
+ --_rs-card-padding-final:var(--rs-card-padding, var(--_rs-card-padding));
269
+ --_rs-card-border-radius-final:var(
270
+ --rs-card-border-radius,
271
+ var(--_rs-card-border-radius)
272
+ );
273
+
274
+ --_rs-card-css-padding:var(--_rs-card-padding-final);
275
+ --_rs-card-css-border:none;
98
276
  }
99
- ._bordersRadius8_kmytob_112{
100
- --_rs-card-border-radius:8px;
277
+
278
+ ._tile_8ildiv_245._legacyBorder_8ildiv_133{
279
+ --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
280
+ --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
281
+ }
282
+
283
+ ._tile_8ildiv_245 {
284
+ --rs-out-card-padding:var(--_rs-card-padding-final);
285
+ --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
286
+ --rs-out-card-border-width:var(--_rs-card-env-border-width);
287
+ --rs-out-card-border-color:var(--_rs-card-env-border-color);
288
+ --rs-out-card-background:var(--_rs-card-env-background);
289
+
290
+ position:relative;
291
+
292
+ display:block;
293
+ overflow:hidden;
294
+
295
+ box-sizing:border-box;
296
+ min-height:0;
297
+ padding:var(--_rs-card-css-padding);
298
+
299
+ border:var(--_rs-card-css-border);
300
+ border-radius:var(--_rs-card-border-radius-final);
301
+
302
+ cursor:auto;
303
+ text-align:inherit;
304
+ text-decoration:none;
305
+
306
+ background:var(--_rs-card-env-background);
307
+
308
+ -webkit-appearance:none;
309
+
310
+ -moz-appearance:none;
311
+
312
+ appearance:none;
101
313
  }
102
- ._bordersRadius16_kmytob_116{
103
- --_rs-card-border-radius:16px;
314
+
315
+ ._tile_8ildiv_245:not(._legacyBorder_8ildiv_133)::after{
316
+ position:absolute;
317
+ top:0;
318
+ right:0;
319
+ bottom:0;
320
+ left:0;
321
+
322
+ display:block;
323
+
324
+ border-radius:inherit;
325
+
326
+ content:'';
327
+ pointer-events:none;
328
+
329
+ box-shadow:inset 0 0 0 var(--_rs-card-env-border-width) var(--_rs-card-env-border-color);
330
+ }
331
+
332
+ ._fixedImageHeight_8ildiv_321{
333
+ height:calc(188px + var(--_rs-card-padding-final));
334
+ max-height:calc(188px + var(--_rs-card-padding-final));
104
335
  }
105
- ._bordersRadius24_kmytob_120{
106
- --_rs-card-border-radius:24px;
336
+
337
+ ._fixedImageHeight_8ildiv_321 img{
338
+ height:100%;
339
+ }
340
+
341
+ ._fullImageWidth_8ildiv_330 img{
342
+ width:100%;
107
343
  }
108
- ._cardImage_kmytob_124{
344
+
345
+ ._cardImage_8ildiv_334{
109
346
  position:relative;
110
347
 
111
348
  overflow:hidden;
112
349
 
113
350
  box-sizing:border-box;
114
351
  }
115
- ._cardImageImg_kmytob_132{
352
+
353
+ ._cardImageImg_8ildiv_342{
354
+ top:calc(var(--_rs-card-padding-final)*-1);
355
+ left:calc(var(--_rs-card-padding-final)*-1);
356
+
116
357
  display:flex;
117
358
  justify-content:center;
118
359
  align-items:center;
360
+
361
+ width:calc(100% + var(--_rs-card-padding-final)*2);
119
362
  }
120
- ._paddings16_kmytob_96 ._cardImageImg_kmytob_132{
121
- top:calc(var(--rs-card-padding, 16px)*-1);
122
- left:calc(var(--rs-card-padding, 16px)*-1);
123
- width:calc(100% + var(--rs-card-padding, 16px)*2);
124
- }
125
- ._paddings24_kmytob_100 ._cardImageImg_kmytob_132{
126
- top:calc(var(--rs-card-padding, 24px)*-1);
127
- left:calc(var(--rs-card-padding, 24px)*-1);
128
- width:calc(100% + var(--rs-card-padding, 24px)*2);
129
- }
130
- ._paddings32_kmytob_104 ._cardImageImg_kmytob_132{
131
- top:calc(var(--rs-card-padding, 32px)*-1);
132
- left:calc(var(--rs-card-padding, 32px)*-1);
133
- width:calc(100% + var(--rs-card-padding, 32px)*2);
134
- }
135
- ._cardImageImg_kmytob_132 img{
363
+
364
+ ._cardImageImg_8ildiv_342 img{
136
365
  max-width:100%;
137
366
  max-height:100%;
138
-
139
- transition:transform .2s;
140
- transform:scale(1);
141
- }
142
- ._card_kmytob_6:hover ._cardImageImg_kmytob_132 img{
143
- transform:scale(1.1);
144
367
  }
145
- ._card_kmytob_6._cardPlain_kmytob_62:hover ._cardImageImg_kmytob_132 img{
146
- transform:none;
147
- }
148
- ._cardImageDiv_kmytob_166{
368
+
369
+ ._clickable_8ildiv_111 ._cardImageImg_8ildiv_342 img{
370
+ transition:transform 0.2s;
371
+ transform:scale(1);
372
+ }
373
+
374
+ ._clickable_8ildiv_111:hover ._cardImageImg_8ildiv_342 img{
375
+ transform:scale(1.1);
376
+ }
377
+
378
+ ._cardImageDiv_8ildiv_367{
379
+ top:calc(var(--_rs-card-padding-final)*-1);
380
+ left:calc(var(--_rs-card-padding-final)*-1);
381
+
149
382
  display:flex;
150
383
  flex-direction:column;
151
384
  justify-content:flex-end;
152
385
 
386
+ width:calc(100% + var(--_rs-card-padding-final)*2);
387
+ padding:var(--_rs-card-padding-final);
388
+
153
389
  background-color:transparent;
154
390
  background-repeat:no-repeat;
155
391
  background-position:center;
156
392
  background-size:100% 100%;
157
-
158
- transition:background-size .2s;
159
393
  }
160
- ._paddings16_kmytob_96 ._cardImageDiv_kmytob_166{
161
- top:calc(var(--rs-card-padding, 16px)*-1);
162
- left:calc(var(--rs-card-padding, 16px)*-1);
163
- padding:var(--rs-card-padding, 16px);
164
- width:calc(100% + var(--rs-card-padding, 16px)*2);
165
- }
166
- ._card_kmytob_6:active ._paddings16_kmytob_96 ._cardImageDiv_kmytob_166{
167
- padding:calc(var(--rs-card-padding, 16px) - 1);
168
- }
169
- ._paddings24_kmytob_100 ._cardImageDiv_kmytob_166{
170
- top:calc(var(--rs-card-padding, 24px)*-1);
171
- left:calc(var(--rs-card-padding, 24px)*-1);
172
- padding:var(--rs-card-padding, 24px);
173
- width:calc(100% + var(--rs-card-padding, 24px)*2);
174
- }
175
- ._card_kmytob_6:active ._paddings24_kmytob_100 ._cardImageDiv_kmytob_166{
176
- padding:calc(var(--rs-card-padding, 24px) - 1);
177
- }
178
- ._paddings32_kmytob_104 ._cardImageDiv_kmytob_166{
179
- top:calc(var(--rs-card-padding, 32px)*-1);
180
- left:calc(var(--rs-card-padding, 32px)*-1);
181
- padding:var(--rs-card-padding, 32px);
182
- width:calc(100% + var(--rs-card-padding, 32px)*2);
183
- }
184
- ._card_kmytob_6:active ._paddings32_kmytob_104 ._cardImageDiv_kmytob_166{
185
- padding:calc(var(--rs-card-padding, 32px) - 1);
394
+
395
+ ._clickable_8ildiv_111 ._cardImageDiv_8ildiv_367{
396
+ transition:background-size 0.2s;
186
397
  }
187
- ._card_kmytob_6:hover ._cardImageDiv_kmytob_166{
398
+
399
+ ._clickable_8ildiv_111:hover ._cardImageDiv_8ildiv_367{
188
400
  background-size:110% 110%;
189
401
  }
190
- ._card_kmytob_6._cardPlain_kmytob_62:hover ._cardImageDiv_kmytob_166{
191
- background-size:100% 100%;
402
+
403
+ @media (hover: hover){
404
+ ._clickable_8ildiv_111:hover ._innerLink_8ildiv_392{
405
+ --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
406
+ --_rs-typography-link-border-bottom-width-from-state-hover:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
407
+ --_rs-typography-link-border-bottom-color-from-state-hover:var(
408
+ --_rs-typography-link-hover-underline-color-wf
409
+ );
410
+ --_rs-typography-link-border-image-from-state-hover:var(
411
+ --_rs-typography-link-hover-border-image-wf
412
+ );
413
+ --_rs-typography-link-color-from-state-hover:var(
414
+ --_rs-typography-link-hover-color-wf
415
+ );
416
+ --_rs-typography-link-background-size-from-state-hover:auto calc(100% + 4px);
417
+ --_rs-typography-link-after-margin-right-from-state-hover:var(
418
+ --_rs-typography-link-hover-after-offset-right-wf
419
+ );
420
+ --_rs-typography-link-after-margin-left-from-state-hover:var(
421
+ --_rs-typography-link-hover-after-offset-left-wf
422
+ );
423
+ }
192
424
  }
193
- ._fixedImageHeight_kmytob_199 img{
194
- height:100%;
425
+
426
+ ._clickable_8ildiv_111:focus-visible ._innerLink_8ildiv_392{
427
+ --_rs-typography-link-box-shadow-from-state-focus-visible:var(
428
+ --_rs-color-primary
429
+ ) 0 0 0 4px;
430
+ }
431
+
432
+ @media (hover: hover){
433
+ ._clickable_8ildiv_111:hover ._innerButton_8ildiv_404{
434
+ --_rs-button-border-inner-color:rgba(
435
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
436
+ calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
437
+ );
438
+ --_rs-button-background-from-state-hover:var(--_rs-button-hover-background);
439
+ }
195
440
  }
196
- ._paddings16_kmytob_96 ._fixedImageHeight_kmytob_199{
197
- height:calc(188px + var(--rs-card-padding, 16px));
198
- max-height:calc(188px + var(--rs-card-padding, 16px));
441
+
442
+ ._clickable_8ildiv_111:active ._innerButton_8ildiv_404{
443
+ --_rs-button-border-inner-width:2px;
444
+ --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
445
+ --_rs-button-background-from-state-active:var(
446
+ --_rs-button-active-background
447
+ );
199
448
  }
200
- ._paddings24_kmytob_100 ._fixedImageHeight_kmytob_199{
201
- height:calc(188px + var(--rs-card-padding, 24px));
202
- max-height:calc(188px + var(--rs-card-padding, 24px));
449
+
450
+ ._clickable_8ildiv_111:focus-visible ._innerButton_8ildiv_404{
451
+ --_rs-button-box-shadow-from-state-focus-visible:var(
452
+ --_rs-color-primary-t-dim
453
+ ) 0 0 0 4px;
203
454
  }
204
- ._paddings32_kmytob_104 ._fixedImageHeight_kmytob_199{
205
- height:calc(188px + var(--rs-card-padding, 32px));
206
- max-height:calc(188px + var(--rs-card-padding, 32px));
455
+
456
+ ._clickable_8ildiv_111:active:focus-visible:not(:hover) ._innerButton_8ildiv_404{
457
+ --_rs-button-background-from-state-active-focus-visible-no-hover:var(
458
+ --_rs-button-active-focus-visible-no-hover-background
459
+ );
207
460
  }
208
- ._fullImageWidth_kmytob_217 img{
209
- width:100%;
210
- }
package/lib/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { cardCn, cardImageCn } from './card';
1
+ export { cardCn, cardImageCn, cardButtonCn, cardLinkCn } from './card';
2
2
  export type { CardProps, CardImgType } from './card';
3
3
  export { useCardCn } from './use-card-cn';
package/lib/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import './index.css';
2
- export { cardCn, cardImageCn } from './card.js';
2
+ export { cardButtonCn, cardCn, cardImageCn, cardLinkCn } from './card.js';
3
3
  export { useCardCn } from './use-card-cn.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/card",
3
- "version": "0.12.1-remove-core-js-dep-e582ebda.2+e582ebda",
3
+ "version": "0.13.1",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.js",
@@ -23,15 +23,16 @@
23
23
  },
24
24
  "devDependencies": {
25
25
  "@jetbrains/logos": "^1.4.16",
26
- "@rescui/colors": "0.2.11-remove-core-js-dep-e582ebda.2+e582ebda",
27
- "@rescui/postcss-preset-library": "0.2.2",
28
- "@rescui/scripts": "0.5.1",
29
- "@rescui/typography": "0.24.1-remove-core-js-dep-e582ebda.2+e582ebda",
30
- "@rescui/visual-regression": "0.1.2"
26
+ "@rescui/button": "^0.22.1",
27
+ "@rescui/colors": "^0.2.10",
28
+ "@rescui/postcss-preset-library": "^0.2.2",
29
+ "@rescui/scripts": "^0.5.1",
30
+ "@rescui/typography": "^0.24.0",
31
+ "@rescui/visual-regression": "^0.1.2"
31
32
  },
32
33
  "scripts": {
33
34
  "build": "rescui-scripts build"
34
35
  },
35
36
  "nx": {},
36
- "gitHead": "e582ebda8e4a1120fbf651940b389dcc226128c8"
37
+ "gitHead": "53dd6e122cd7b7fe03fbff320ad5c3bfd0e72533"
37
38
  }