@colisweb/rescript-toolkit 5.17.3 → 5.18.0

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/tailwind/tailwind.config.cjs +3 -0
  3. package/src/ui/Toolkit__Ui_Button.res +4 -0
  4. package/src/ui/Toolkit__Ui_Button.resi +1 -0
  5. package/src/ui/Toolkit__Ui_IconButton.res +3 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@colisweb/rescript-toolkit",
3
- "version": "5.17.3",
3
+ "version": "5.18.0",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "clean": "rescript clean",
package/src/tailwind/tailwind.config.cjs CHANGED
@@ -80,6 +80,9 @@ module.exports = {
80
80
  black: "#131626",
81
81
  transparent: "transparent",
82
82
  routeWithdraw: "#176693",
83
+ primaryCta: "var(--primaryCta)",
84
+ primaryText: "var(--primaryText)",
85
+ primaryCtaText: "var(--primaryCtaText)",
83
86
  gray: {
84
87
  100: "#f7fafc",
85
88
  200: "#edf2f7",
package/src/ui/Toolkit__Ui_Button.res CHANGED
@@ -15,6 +15,7 @@ type color = [
15
15
  | #danger
16
16
  | #neutral
17
17
  | #neutralLight
18
+ | #primaryCta
18
19
  ]
19
20
 
20
21
  let baseStyle = () =>
@@ -25,6 +26,7 @@ let colorStyle = (~color: color, ~variant, ~disabled) =>
25
26
  | #pill
26
27
  | #default =>
27
28
  switch color {
29
+ | #primaryCta => "bg-primaryCta text-primaryCtaText hover:opacity-80 disabled:bg-gray-800 border border-transparent"
28
30
  | #black => "bg-gray-900 hover:bg-gray-800 disabled:bg-gray-800 text-white border border-transparent"
29
31
  | #white => "bg-white hover:bg-gray-100 text-gray-800 border border-gray-300"
30
32
  | #gray => "bg-gray-200 hover:bg-gray-300 disabled:bg-gray-300 text-gray-800 border border-gray-300"
@@ -59,6 +61,7 @@ let colorStyle = (~color: color, ~variant, ~disabled) =>
59
61
  | #danger => "uppercase hover:bg-danger-50 text-danger-600"
60
62
  | #neutral => "hover:bg-neutral-100 text-neutral-700 hover:border-neutral-400 disabled:text-neutral-500 uppercase"
61
63
  | #neutralLight => "uppercase text-primary-700 hover:bg-neutral-100 disabled:text-neutral-400"
64
+ | #primaryCta => "uppercase text-primaryText hover:bg-primaryCta hover:text-primaryCtaText disabled:text-neutral-400"
62
65
  }
63
66
 
64
67
  | #link => "text-info-500 hover:underline"
@@ -74,6 +77,7 @@ let colorStyle = (~color: color, ~variant, ~disabled) =>
74
77
  | #neutralLight => "border border-neutral-300 text-primary-700 hover:bg-neutral-200 disabled:bg-neutral-100"
75
78
  | #danger => "border border-danger-400 text-danger-600 hover:bg-danger-50 disabled:bg-danger-300"
76
79
  | #primary => "border border-primary-700 text-primary-700 hover:bg-neutral-300"
80
+ | #primaryCta => "border border-primaryText text-primaryText hover:bg-primaryCta hover:text-primaryCtaText"
77
81
  }
78
82
  }
79
83
 
package/src/ui/Toolkit__Ui_Button.resi CHANGED
@@ -13,6 +13,7 @@ type color = [
13
13
  | #danger
14
14
  | #neutral
15
15
  | #neutralLight
16
+ | #primaryCta
16
17
  ]
17
18
 
18
19
  @react.component
package/src/ui/Toolkit__Ui_IconButton.res CHANGED
@@ -16,6 +16,7 @@ let colorStyle = (~color: color, ~variant, ~disabled) =>
16
16
  | #default =>
17
17
  switch color {
18
18
  | #black => "bg-gray-900 hover:bg-gray-800 disabled:bg-gray-800 text-white border border-transparent"
19
+ | #primaryCta => "bg-primaryCta text-primaryCtaText hover:opacity-80 disabled:bg-gray-800 border border-transparent"
19
20
  | #white => "bg-white hover:bg-gray-100 text-gray-800 border border-gray-300"
20
21
  | #gray => "bg-gray-200 hover:bg-gray-300 disabled:bg-gray-300 text-gray-800 border border-gray-300"
21
22
  | #success => "bg-success-600 hover:bg-success-700 disabled:bg-success-700 text-white border border-transparent"
@@ -49,6 +50,7 @@ let colorStyle = (~color: color, ~variant, ~disabled) =>
49
50
  | #danger => "uppercase hover:bg-danger-50 text-danger-600"
50
51
  | #neutral => "hover:bg-neutral-100 text-neutral-700 hover:border-neutral-400 disabled:text-neutral-500 uppercase"
51
52
  | #neutralLight => "uppercase text-primary-700 hover:bg-neutral-100 disabled:text-neutral-400"
53
+ | #primaryCta => "uppercase text-primaryText hover:bg-primaryCta hover:text-primaryCtaText disabled:text-neutral-400"
52
54
  }
53
55
 
54
56
  | #link => "text-info-500 hover:underline"
@@ -64,6 +66,7 @@ let colorStyle = (~color: color, ~variant, ~disabled) =>
64
66
  | #neutralLight => "border border-neutral-300 text-primary-700 hover:bg-neutral-200 disabled:bg-neutral-100"
65
67
  | #danger => "border border-danger-400 text-danger-600 hover:bg-danger-50 disabled:bg-danger-300"
66
68
  | #primary => "border border-primary-500 text-primary-500 hover:bg-primary-50"
69
+ | #primaryCta => "border border-primaryText text-primaryText hover:bg-primaryCta hover:text-primaryCtaText"
67
70
  }
68
71
  }
69
72