@optigrit/optigrit-ui 0.0.6 → 0.0.8
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/dist/components/index.js +25 -25
- package/package.json +1 -1
package/dist/components/index.js
CHANGED
|
@@ -24,36 +24,36 @@ import {
|
|
|
24
24
|
var getVariantClasses = (variant, color) => {
|
|
25
25
|
const styles = {
|
|
26
26
|
contained: {
|
|
27
|
-
primary: "bg-primary text-
|
|
28
|
-
secondary: "bg-secondary text-
|
|
29
|
-
error: "bg-error text-
|
|
30
|
-
success: "bg-success text-
|
|
31
|
-
warning: "bg-warning text-
|
|
32
|
-
info: "bg-info text-
|
|
27
|
+
primary: "bg-primary text-white shadow-sm hover:shadow",
|
|
28
|
+
secondary: "bg-primary-secondary text-white shadow-sm hover:shadow",
|
|
29
|
+
error: "bg-error text-white shadow-sm hover:shadow",
|
|
30
|
+
success: "bg-success text-white shadow-sm hover:shadow",
|
|
31
|
+
warning: "bg-warning text-white shadow-sm hover:shadow",
|
|
32
|
+
info: "bg-info text-white shadow-sm hover:shadow"
|
|
33
33
|
},
|
|
34
34
|
outlined: {
|
|
35
|
-
primary: "border border-
|
|
36
|
-
secondary: "border border-
|
|
37
|
-
error: "border border-
|
|
38
|
-
success: "border border-
|
|
39
|
-
warning: "border border-
|
|
40
|
-
info: "border border-
|
|
35
|
+
primary: "border border-primary-500 text-primary hover:border-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)]",
|
|
36
|
+
secondary: "border border-primary-secondary-500 text-secondary hover:border-primary-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)]",
|
|
37
|
+
error: "border border-error-500 text-error hover:border-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)]",
|
|
38
|
+
success: "border border-success-500 text-success hover:border-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)]",
|
|
39
|
+
warning: "border border-warning-500 text-warning hover:border-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)]",
|
|
40
|
+
info: "border border-info-500 text-info hover:border-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)]"
|
|
41
41
|
},
|
|
42
42
|
soft: {
|
|
43
|
-
primary: "bg-
|
|
44
|
-
secondary: "bg-
|
|
45
|
-
error: "bg-
|
|
46
|
-
success: "bg-
|
|
47
|
-
warning: "bg-
|
|
48
|
-
info: "bg-
|
|
43
|
+
primary: "bg-primary-100 text-primary hover:bg-primary-200",
|
|
44
|
+
secondary: "bg-primary-secondary-100 text-secondary hover:bg-primary-secondary-200",
|
|
45
|
+
error: "bg-error-100 text-error hover:bg-error-200",
|
|
46
|
+
success: "bg-success-100 text-success hover:bg-success-200",
|
|
47
|
+
warning: "bg-warning-100 text-warning hover:bg-warning-200",
|
|
48
|
+
info: "bg-info-100 text-info hover:bg-info-200"
|
|
49
49
|
},
|
|
50
50
|
text: {
|
|
51
|
-
primary: "text-primary hover:bg-[color-mix(in_srgb,var(--primary
|
|
52
|
-
secondary: "text-secondary hover:bg-[color-mix(in_srgb,var(--secondary
|
|
53
|
-
error: "text-error hover:bg-[color-mix(in_srgb,var(--error
|
|
54
|
-
success: "text-success hover:bg-[color-mix(in_srgb,var(--success
|
|
55
|
-
warning: "text-warning hover:bg-[color-mix(in_srgb,var(--warning
|
|
56
|
-
info: "text-info hover:bg-[color-mix(in_srgb,var(--info
|
|
51
|
+
primary: "text-primary hover:bg-[color-mix(in_srgb,var(--primary)_4%,transparent)]",
|
|
52
|
+
secondary: "text-secondary hover:bg-[color-mix(in_srgb,var(--primary-secondary)_4%,transparent)]",
|
|
53
|
+
error: "text-error hover:bg-[color-mix(in_srgb,var(--error)_4%,transparent)]",
|
|
54
|
+
success: "text-success hover:bg-[color-mix(in_srgb,var(--success)_4%,transparent)]",
|
|
55
|
+
warning: "text-warning hover:bg-[color-mix(in_srgb,var(--warning)_4%,transparent)]",
|
|
56
|
+
info: "text-info hover:bg-[color-mix(in_srgb,var(--info)_4%,transparent)]"
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
return styles[variant][color];
|
|
@@ -62,7 +62,7 @@ var getRippleColor = (variant, color) => {
|
|
|
62
62
|
if (variant === "contained") {
|
|
63
63
|
return "rgba(255, 255, 255, 0.3)";
|
|
64
64
|
}
|
|
65
|
-
return `color-mix(in srgb, var(--${color}
|
|
65
|
+
return `color-mix(in srgb, var(--${color == "secondary" ? "primary-secondary" : color}) 30%, transparent)`;
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
// src/components/Buttons/Button/index.tsx
|