okonomi_ui_kit 0.1.1 → 0.1.3
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.
- checksums.yaml +4 -4
- data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +329 -28
- data/app/assets/stylesheets/okonomi_ui_kit/application.tailwind.css +75 -3
- data/app/helpers/okonomi_ui_kit/attribute_section_helper.rb +1 -1
- data/app/helpers/okonomi_ui_kit/form_builder.rb +13 -11
- data/app/helpers/okonomi_ui_kit/navigation_helper.rb +2 -2
- data/app/helpers/okonomi_ui_kit/page_builder_helper.rb +1 -1
- data/app/helpers/okonomi_ui_kit/table_helper.rb +1 -1
- data/app/helpers/okonomi_ui_kit/theme.rb +72 -0
- data/app/helpers/okonomi_ui_kit/theme_helper.rb +17 -0
- data/app/helpers/okonomi_ui_kit/ui_helper.rb +110 -0
- data/app/views/okonomi/components/_typography.html.erb +7 -0
- data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_field.html.erb +1 -1
- data/lib/okonomi_ui_kit/engine.rb +1 -1
- data/lib/okonomi_ui_kit/version.rb +1 -1
- metadata +45 -14
- data/app/helpers/okonomi_ui_kit/button_helper.rb +0 -39
- /data/app/views/{okonomi_ui_kit → okonomi}/attribute_sections/_section.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_checkbox_label.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_field_set.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_multi_select.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_radio_button.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_upload_field.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit/naviagtion → okonomi/navigation}/_link.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit/naviagtion → okonomi/navigation}/_menu.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit/naviagtion → okonomi/navigation}/_navbar.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/page_builder/_page.html.erb +0 -0
- /data/app/views/{okonomi_ui_kit → okonomi}/tables/_table.html.erb +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 046343b54f5e77b5bfed849724f58fe4ef7248379def23b4bde6b3f177929cba
|
|
4
|
+
data.tar.gz: 38452296f2f644bf5fef70a262d88c6ec4e9927fdad13233401cb2d4ede544be
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ca836822748ed4a8ae72cbac7c4192545927198b98763f0c90f9157a451077ebbdd11c45f125f387a94afd4a08f49ff56b511b20bab9636a6c22d43621fed21d
|
|
7
|
+
data.tar.gz: 22a80940b55c4bbdb9a083cb0017999780a15a1ad57498c39a782fb0af93d561419dc2c124fd3ad270f1fdc88fddfe5839d009df40a6de8929c1840472dde858
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
'Noto Color Emoji';
|
|
8
8
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
|
9
9
|
monospace;
|
|
10
|
+
--color-red-50: oklch(97.1% 0.013 17.38);
|
|
10
11
|
--color-red-100: oklch(93.6% 0.032 17.717);
|
|
11
12
|
--color-red-200: oklch(88.5% 0.062 18.334);
|
|
12
13
|
--color-red-300: oklch(80.8% 0.114 19.571);
|
|
@@ -16,16 +17,40 @@
|
|
|
16
17
|
--color-red-700: oklch(50.5% 0.213 27.518);
|
|
17
18
|
--color-red-800: oklch(44.4% 0.177 26.899);
|
|
18
19
|
--color-red-900: oklch(39.6% 0.141 25.723);
|
|
20
|
+
--color-amber-50: oklch(98.7% 0.022 95.277);
|
|
21
|
+
--color-amber-100: oklch(96.2% 0.059 95.617);
|
|
22
|
+
--color-amber-200: oklch(92.4% 0.12 95.746);
|
|
23
|
+
--color-amber-300: oklch(87.9% 0.169 91.605);
|
|
24
|
+
--color-amber-400: oklch(82.8% 0.189 84.429);
|
|
25
|
+
--color-amber-500: oklch(76.9% 0.188 70.08);
|
|
26
|
+
--color-amber-600: oklch(66.6% 0.179 58.318);
|
|
27
|
+
--color-amber-700: oklch(55.5% 0.163 48.998);
|
|
28
|
+
--color-amber-800: oklch(47.3% 0.137 46.201);
|
|
29
|
+
--color-amber-900: oklch(41.4% 0.112 45.904);
|
|
19
30
|
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
|
20
31
|
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
21
32
|
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
|
22
33
|
--color-yellow-800: oklch(47.6% 0.114 61.907);
|
|
34
|
+
--color-green-50: oklch(98.2% 0.018 155.826);
|
|
23
35
|
--color-green-100: oklch(96.2% 0.044 156.743);
|
|
36
|
+
--color-green-200: oklch(92.5% 0.084 155.995);
|
|
24
37
|
--color-green-300: oklch(87.1% 0.15 154.449);
|
|
38
|
+
--color-green-400: oklch(79.2% 0.209 151.711);
|
|
25
39
|
--color-green-500: oklch(72.3% 0.219 149.579);
|
|
26
40
|
--color-green-600: oklch(62.7% 0.194 149.214);
|
|
27
41
|
--color-green-700: oklch(52.7% 0.154 150.069);
|
|
28
42
|
--color-green-800: oklch(44.8% 0.119 151.328);
|
|
43
|
+
--color-green-900: oklch(39.3% 0.095 152.535);
|
|
44
|
+
--color-sky-50: oklch(97.7% 0.013 236.62);
|
|
45
|
+
--color-sky-100: oklch(95.1% 0.026 236.824);
|
|
46
|
+
--color-sky-200: oklch(90.1% 0.058 230.902);
|
|
47
|
+
--color-sky-300: oklch(82.8% 0.111 230.318);
|
|
48
|
+
--color-sky-400: oklch(74.6% 0.16 232.661);
|
|
49
|
+
--color-sky-500: oklch(68.5% 0.169 237.323);
|
|
50
|
+
--color-sky-600: oklch(58.8% 0.158 241.966);
|
|
51
|
+
--color-sky-700: oklch(50% 0.134 242.749);
|
|
52
|
+
--color-sky-800: oklch(44.3% 0.11 240.79);
|
|
53
|
+
--color-sky-900: oklch(39.1% 0.09 240.876);
|
|
29
54
|
--color-blue-50: oklch(97% 0.014 254.604);
|
|
30
55
|
--color-blue-100: oklch(93.2% 0.032 255.585);
|
|
31
56
|
--color-blue-200: oklch(88.2% 0.059 254.128);
|
|
@@ -34,9 +59,26 @@
|
|
|
34
59
|
--color-blue-700: oklch(48.8% 0.243 264.376);
|
|
35
60
|
--color-blue-800: oklch(42.4% 0.199 265.638);
|
|
36
61
|
--color-blue-900: oklch(37.9% 0.146 265.522);
|
|
62
|
+
--color-indigo-50: oklch(96.2% 0.018 272.314);
|
|
63
|
+
--color-indigo-100: oklch(93% 0.034 272.788);
|
|
64
|
+
--color-indigo-200: oklch(87% 0.065 274.039);
|
|
65
|
+
--color-indigo-300: oklch(78.5% 0.115 274.713);
|
|
66
|
+
--color-indigo-400: oklch(67.3% 0.182 276.935);
|
|
37
67
|
--color-indigo-500: oklch(58.5% 0.233 277.117);
|
|
38
68
|
--color-indigo-600: oklch(51.1% 0.262 276.966);
|
|
69
|
+
--color-indigo-700: oklch(45.7% 0.24 277.023);
|
|
70
|
+
--color-indigo-800: oklch(39.8% 0.195 277.366);
|
|
39
71
|
--color-indigo-900: oklch(35.9% 0.144 278.697);
|
|
72
|
+
--color-purple-50: oklch(97.7% 0.014 308.299);
|
|
73
|
+
--color-purple-100: oklch(94.6% 0.033 307.174);
|
|
74
|
+
--color-purple-200: oklch(90.2% 0.063 306.703);
|
|
75
|
+
--color-purple-300: oklch(82.7% 0.119 306.383);
|
|
76
|
+
--color-purple-400: oklch(71.4% 0.203 305.504);
|
|
77
|
+
--color-purple-500: oklch(62.7% 0.265 303.9);
|
|
78
|
+
--color-purple-600: oklch(55.8% 0.288 302.321);
|
|
79
|
+
--color-purple-700: oklch(49.6% 0.265 301.924);
|
|
80
|
+
--color-purple-800: oklch(43.8% 0.218 303.724);
|
|
81
|
+
--color-purple-900: oklch(38.1% 0.176 304.987);
|
|
40
82
|
--color-pink-500: oklch(65.6% 0.241 354.308);
|
|
41
83
|
--color-gray-50: oklch(98.5% 0.002 247.839);
|
|
42
84
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
|
@@ -71,6 +113,7 @@
|
|
|
71
113
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
72
114
|
--text-4xl: 2.25rem;
|
|
73
115
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
116
|
+
--font-weight-normal: 400;
|
|
74
117
|
--font-weight-medium: 500;
|
|
75
118
|
--font-weight-semibold: 600;
|
|
76
119
|
--font-weight-bold: 700;
|
|
@@ -84,6 +127,33 @@
|
|
|
84
127
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
85
128
|
--default-font-family: var(--font-sans);
|
|
86
129
|
--default-mono-font-family: var(--font-mono);
|
|
130
|
+
--color-default-50: var(--color-gray-50);
|
|
131
|
+
--color-default-500: var(--color-gray-500);
|
|
132
|
+
--color-default-600: var(--color-gray-600);
|
|
133
|
+
--color-default-700: var(--color-gray-700);
|
|
134
|
+
--color-default-900: var(--color-gray-900);
|
|
135
|
+
--color-primary-50: var(--color-indigo-50);
|
|
136
|
+
--color-primary-500: var(--color-indigo-500);
|
|
137
|
+
--color-primary-600: var(--color-indigo-600);
|
|
138
|
+
--color-primary-700: var(--color-indigo-700);
|
|
139
|
+
--color-secondary-50: var(--color-purple-50);
|
|
140
|
+
--color-secondary-600: var(--color-purple-600);
|
|
141
|
+
--color-secondary-700: var(--color-purple-700);
|
|
142
|
+
--color-success-50: var(--color-green-50);
|
|
143
|
+
--color-success-600: var(--color-green-600);
|
|
144
|
+
--color-success-700: var(--color-green-700);
|
|
145
|
+
--color-danger-50: var(--color-red-50);
|
|
146
|
+
--color-danger-100: var(--color-red-100);
|
|
147
|
+
--color-danger-300: var(--color-red-300);
|
|
148
|
+
--color-danger-400: var(--color-red-400);
|
|
149
|
+
--color-danger-600: var(--color-red-600);
|
|
150
|
+
--color-danger-700: var(--color-red-700);
|
|
151
|
+
--color-warning-50: var(--color-amber-50);
|
|
152
|
+
--color-warning-600: var(--color-amber-600);
|
|
153
|
+
--color-warning-700: var(--color-amber-700);
|
|
154
|
+
--color-info-50: var(--color-sky-50);
|
|
155
|
+
--color-info-600: var(--color-sky-600);
|
|
156
|
+
--color-info-700: var(--color-sky-700);
|
|
87
157
|
}
|
|
88
158
|
}
|
|
89
159
|
@layer base {
|
|
@@ -744,6 +814,15 @@
|
|
|
744
814
|
.border-blue-200 {
|
|
745
815
|
border-color: var(--color-blue-200);
|
|
746
816
|
}
|
|
817
|
+
.border-danger-600 {
|
|
818
|
+
border-color: var(--color-danger-600);
|
|
819
|
+
}
|
|
820
|
+
.border-danger-700 {
|
|
821
|
+
border-color: var(--color-danger-700);
|
|
822
|
+
}
|
|
823
|
+
.border-default-700 {
|
|
824
|
+
border-color: var(--color-default-700);
|
|
825
|
+
}
|
|
747
826
|
.border-gray-100 {
|
|
748
827
|
border-color: var(--color-gray-100);
|
|
749
828
|
}
|
|
@@ -759,12 +838,45 @@
|
|
|
759
838
|
.border-green-300 {
|
|
760
839
|
border-color: var(--color-green-300);
|
|
761
840
|
}
|
|
841
|
+
.border-info-600 {
|
|
842
|
+
border-color: var(--color-info-600);
|
|
843
|
+
}
|
|
844
|
+
.border-info-700 {
|
|
845
|
+
border-color: var(--color-info-700);
|
|
846
|
+
}
|
|
847
|
+
.border-primary-500 {
|
|
848
|
+
border-color: var(--color-primary-500);
|
|
849
|
+
}
|
|
850
|
+
.border-primary-600 {
|
|
851
|
+
border-color: var(--color-primary-600);
|
|
852
|
+
}
|
|
853
|
+
.border-primary-700 {
|
|
854
|
+
border-color: var(--color-primary-700);
|
|
855
|
+
}
|
|
762
856
|
.border-red-300 {
|
|
763
857
|
border-color: var(--color-red-300);
|
|
764
858
|
}
|
|
859
|
+
.border-secondary-600 {
|
|
860
|
+
border-color: var(--color-secondary-600);
|
|
861
|
+
}
|
|
862
|
+
.border-secondary-700 {
|
|
863
|
+
border-color: var(--color-secondary-700);
|
|
864
|
+
}
|
|
865
|
+
.border-success-600 {
|
|
866
|
+
border-color: var(--color-success-600);
|
|
867
|
+
}
|
|
868
|
+
.border-success-700 {
|
|
869
|
+
border-color: var(--color-success-700);
|
|
870
|
+
}
|
|
765
871
|
.border-transparent {
|
|
766
872
|
border-color: transparent;
|
|
767
873
|
}
|
|
874
|
+
.border-warning-600 {
|
|
875
|
+
border-color: var(--color-warning-600);
|
|
876
|
+
}
|
|
877
|
+
.border-warning-700 {
|
|
878
|
+
border-color: var(--color-warning-700);
|
|
879
|
+
}
|
|
768
880
|
.bg-blue-50 {
|
|
769
881
|
background-color: var(--color-blue-50);
|
|
770
882
|
}
|
|
@@ -774,6 +886,15 @@
|
|
|
774
886
|
.bg-blue-600 {
|
|
775
887
|
background-color: var(--color-blue-600);
|
|
776
888
|
}
|
|
889
|
+
.bg-danger-100 {
|
|
890
|
+
background-color: var(--color-danger-100);
|
|
891
|
+
}
|
|
892
|
+
.bg-danger-600 {
|
|
893
|
+
background-color: var(--color-danger-600);
|
|
894
|
+
}
|
|
895
|
+
.bg-default-600 {
|
|
896
|
+
background-color: var(--color-default-600);
|
|
897
|
+
}
|
|
777
898
|
.bg-gray-50 {
|
|
778
899
|
background-color: var(--color-gray-50);
|
|
779
900
|
}
|
|
@@ -792,14 +913,29 @@
|
|
|
792
913
|
.bg-green-100 {
|
|
793
914
|
background-color: var(--color-green-100);
|
|
794
915
|
}
|
|
916
|
+
.bg-info-600 {
|
|
917
|
+
background-color: var(--color-info-600);
|
|
918
|
+
}
|
|
919
|
+
.bg-primary-50 {
|
|
920
|
+
background-color: var(--color-primary-50);
|
|
921
|
+
}
|
|
922
|
+
.bg-primary-600 {
|
|
923
|
+
background-color: var(--color-primary-600);
|
|
924
|
+
}
|
|
795
925
|
.bg-red-100 {
|
|
796
926
|
background-color: var(--color-red-100);
|
|
797
927
|
}
|
|
798
928
|
.bg-red-600 {
|
|
799
929
|
background-color: var(--color-red-600);
|
|
800
930
|
}
|
|
801
|
-
.bg-
|
|
802
|
-
background-color:
|
|
931
|
+
.bg-secondary-600 {
|
|
932
|
+
background-color: var(--color-secondary-600);
|
|
933
|
+
}
|
|
934
|
+
.bg-success-600 {
|
|
935
|
+
background-color: var(--color-success-600);
|
|
936
|
+
}
|
|
937
|
+
.bg-warning-600 {
|
|
938
|
+
background-color: var(--color-warning-600);
|
|
803
939
|
}
|
|
804
940
|
.bg-white {
|
|
805
941
|
background-color: var(--color-white);
|
|
@@ -852,15 +988,9 @@
|
|
|
852
988
|
.py-1 {
|
|
853
989
|
padding-block: calc(var(--spacing) * 1);
|
|
854
990
|
}
|
|
855
|
-
.py-1\.5 {
|
|
856
|
-
padding-block: calc(var(--spacing) * 1.5);
|
|
857
|
-
}
|
|
858
991
|
.py-2 {
|
|
859
992
|
padding-block: calc(var(--spacing) * 2);
|
|
860
993
|
}
|
|
861
|
-
.py-3 {
|
|
862
|
-
padding-block: calc(var(--spacing) * 3);
|
|
863
|
-
}
|
|
864
994
|
.py-3\.5 {
|
|
865
995
|
padding-block: calc(var(--spacing) * 3.5);
|
|
866
996
|
}
|
|
@@ -985,6 +1115,10 @@
|
|
|
985
1115
|
--tw-font-weight: var(--font-weight-medium);
|
|
986
1116
|
font-weight: var(--font-weight-medium);
|
|
987
1117
|
}
|
|
1118
|
+
.font-normal {
|
|
1119
|
+
--tw-font-weight: var(--font-weight-normal);
|
|
1120
|
+
font-weight: var(--font-weight-normal);
|
|
1121
|
+
}
|
|
988
1122
|
.font-semibold {
|
|
989
1123
|
--tw-font-weight: var(--font-weight-semibold);
|
|
990
1124
|
font-weight: var(--font-weight-semibold);
|
|
@@ -1004,6 +1138,18 @@
|
|
|
1004
1138
|
.text-blue-900 {
|
|
1005
1139
|
color: var(--color-blue-900);
|
|
1006
1140
|
}
|
|
1141
|
+
.text-danger-600 {
|
|
1142
|
+
color: var(--color-danger-600);
|
|
1143
|
+
}
|
|
1144
|
+
.text-default-500 {
|
|
1145
|
+
color: var(--color-default-500);
|
|
1146
|
+
}
|
|
1147
|
+
.text-default-700 {
|
|
1148
|
+
color: var(--color-default-700);
|
|
1149
|
+
}
|
|
1150
|
+
.text-default-900 {
|
|
1151
|
+
color: var(--color-default-900);
|
|
1152
|
+
}
|
|
1007
1153
|
.text-gray-100 {
|
|
1008
1154
|
color: var(--color-gray-100);
|
|
1009
1155
|
}
|
|
@@ -1043,9 +1189,18 @@
|
|
|
1043
1189
|
.text-indigo-600 {
|
|
1044
1190
|
color: var(--color-indigo-600);
|
|
1045
1191
|
}
|
|
1192
|
+
.text-info-600 {
|
|
1193
|
+
color: var(--color-info-600);
|
|
1194
|
+
}
|
|
1046
1195
|
.text-pink-500 {
|
|
1047
1196
|
color: var(--color-pink-500);
|
|
1048
1197
|
}
|
|
1198
|
+
.text-primary-600 {
|
|
1199
|
+
color: var(--color-primary-600);
|
|
1200
|
+
}
|
|
1201
|
+
.text-primary-700 {
|
|
1202
|
+
color: var(--color-primary-700);
|
|
1203
|
+
}
|
|
1049
1204
|
.text-red-500 {
|
|
1050
1205
|
color: var(--color-red-500);
|
|
1051
1206
|
}
|
|
@@ -1058,6 +1213,15 @@
|
|
|
1058
1213
|
.text-red-800 {
|
|
1059
1214
|
color: var(--color-red-800);
|
|
1060
1215
|
}
|
|
1216
|
+
.text-secondary-600 {
|
|
1217
|
+
color: var(--color-secondary-600);
|
|
1218
|
+
}
|
|
1219
|
+
.text-success-600 {
|
|
1220
|
+
color: var(--color-success-600);
|
|
1221
|
+
}
|
|
1222
|
+
.text-warning-600 {
|
|
1223
|
+
color: var(--color-warning-600);
|
|
1224
|
+
}
|
|
1061
1225
|
.text-white {
|
|
1062
1226
|
color: var(--color-white);
|
|
1063
1227
|
}
|
|
@@ -1092,24 +1256,20 @@
|
|
|
1092
1256
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1093
1257
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1094
1258
|
}
|
|
1095
|
-
.ring-2 {
|
|
1096
|
-
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1097
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1098
|
-
}
|
|
1099
1259
|
.ring-black\/5 {
|
|
1100
1260
|
--tw-ring-color: color-mix(in srgb, #000 5%, transparent);
|
|
1101
1261
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1102
1262
|
--tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
|
|
1103
1263
|
}
|
|
1104
1264
|
}
|
|
1105
|
-
.ring-
|
|
1106
|
-
--tw-ring-color: var(--color-
|
|
1265
|
+
.ring-danger-300 {
|
|
1266
|
+
--tw-ring-color: var(--color-danger-300);
|
|
1107
1267
|
}
|
|
1108
|
-
.ring-
|
|
1109
|
-
--tw-ring-color: var(--color-
|
|
1268
|
+
.ring-danger-400 {
|
|
1269
|
+
--tw-ring-color: var(--color-danger-400);
|
|
1110
1270
|
}
|
|
1111
|
-
.ring-
|
|
1112
|
-
--tw-ring-color: var(--color-
|
|
1271
|
+
.ring-gray-300 {
|
|
1272
|
+
--tw-ring-color: var(--color-gray-300);
|
|
1113
1273
|
}
|
|
1114
1274
|
.outline-hidden {
|
|
1115
1275
|
--tw-outline-style: none;
|
|
@@ -1174,6 +1334,13 @@
|
|
|
1174
1334
|
.ring-inset {
|
|
1175
1335
|
--tw-ring-inset: inset;
|
|
1176
1336
|
}
|
|
1337
|
+
.group-hover\:border-primary-600 {
|
|
1338
|
+
&:is(:where(.group):hover *) {
|
|
1339
|
+
@media (hover: hover) {
|
|
1340
|
+
border-color: var(--color-primary-600);
|
|
1341
|
+
}
|
|
1342
|
+
}
|
|
1343
|
+
}
|
|
1177
1344
|
.group-hover\:text-blue-500 {
|
|
1178
1345
|
&:is(:where(.group):hover *) {
|
|
1179
1346
|
@media (hover: hover) {
|
|
@@ -1181,6 +1348,13 @@
|
|
|
1181
1348
|
}
|
|
1182
1349
|
}
|
|
1183
1350
|
}
|
|
1351
|
+
.group-hover\:text-primary-600 {
|
|
1352
|
+
&:is(:where(.group):hover *) {
|
|
1353
|
+
@media (hover: hover) {
|
|
1354
|
+
color: var(--color-primary-600);
|
|
1355
|
+
}
|
|
1356
|
+
}
|
|
1357
|
+
}
|
|
1184
1358
|
.group-hover\:text-red-500 {
|
|
1185
1359
|
&:is(:where(.group):hover *) {
|
|
1186
1360
|
@media (hover: hover) {
|
|
@@ -1200,14 +1374,14 @@
|
|
|
1200
1374
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1201
1375
|
}
|
|
1202
1376
|
}
|
|
1203
|
-
.focus-within\:ring-
|
|
1377
|
+
.focus-within\:ring-danger-400 {
|
|
1204
1378
|
&:focus-within {
|
|
1205
|
-
--tw-ring-color: var(--color-
|
|
1379
|
+
--tw-ring-color: var(--color-danger-400);
|
|
1206
1380
|
}
|
|
1207
1381
|
}
|
|
1208
|
-
.focus-within\:ring-
|
|
1382
|
+
.focus-within\:ring-gray-400 {
|
|
1209
1383
|
&:focus-within {
|
|
1210
|
-
--tw-ring-color: var(--color-
|
|
1384
|
+
--tw-ring-color: var(--color-gray-400);
|
|
1211
1385
|
}
|
|
1212
1386
|
}
|
|
1213
1387
|
.hover\:cursor-help {
|
|
@@ -1217,6 +1391,13 @@
|
|
|
1217
1391
|
}
|
|
1218
1392
|
}
|
|
1219
1393
|
}
|
|
1394
|
+
.hover\:cursor-pointer {
|
|
1395
|
+
&:hover {
|
|
1396
|
+
@media (hover: hover) {
|
|
1397
|
+
cursor: pointer;
|
|
1398
|
+
}
|
|
1399
|
+
}
|
|
1400
|
+
}
|
|
1220
1401
|
.hover\:border-gray-300 {
|
|
1221
1402
|
&:hover {
|
|
1222
1403
|
@media (hover: hover) {
|
|
@@ -1231,6 +1412,34 @@
|
|
|
1231
1412
|
}
|
|
1232
1413
|
}
|
|
1233
1414
|
}
|
|
1415
|
+
.hover\:bg-danger-50 {
|
|
1416
|
+
&:hover {
|
|
1417
|
+
@media (hover: hover) {
|
|
1418
|
+
background-color: var(--color-danger-50);
|
|
1419
|
+
}
|
|
1420
|
+
}
|
|
1421
|
+
}
|
|
1422
|
+
.hover\:bg-danger-700 {
|
|
1423
|
+
&:hover {
|
|
1424
|
+
@media (hover: hover) {
|
|
1425
|
+
background-color: var(--color-danger-700);
|
|
1426
|
+
}
|
|
1427
|
+
}
|
|
1428
|
+
}
|
|
1429
|
+
.hover\:bg-default-50 {
|
|
1430
|
+
&:hover {
|
|
1431
|
+
@media (hover: hover) {
|
|
1432
|
+
background-color: var(--color-default-50);
|
|
1433
|
+
}
|
|
1434
|
+
}
|
|
1435
|
+
}
|
|
1436
|
+
.hover\:bg-default-700 {
|
|
1437
|
+
&:hover {
|
|
1438
|
+
@media (hover: hover) {
|
|
1439
|
+
background-color: var(--color-default-700);
|
|
1440
|
+
}
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1234
1443
|
.hover\:bg-gray-50 {
|
|
1235
1444
|
&:hover {
|
|
1236
1445
|
@media (hover: hover) {
|
|
@@ -1245,10 +1454,31 @@
|
|
|
1245
1454
|
}
|
|
1246
1455
|
}
|
|
1247
1456
|
}
|
|
1248
|
-
.hover\:bg-
|
|
1457
|
+
.hover\:bg-info-50 {
|
|
1458
|
+
&:hover {
|
|
1459
|
+
@media (hover: hover) {
|
|
1460
|
+
background-color: var(--color-info-50);
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1464
|
+
.hover\:bg-info-700 {
|
|
1465
|
+
&:hover {
|
|
1466
|
+
@media (hover: hover) {
|
|
1467
|
+
background-color: var(--color-info-700);
|
|
1468
|
+
}
|
|
1469
|
+
}
|
|
1470
|
+
}
|
|
1471
|
+
.hover\:bg-primary-50 {
|
|
1249
1472
|
&:hover {
|
|
1250
1473
|
@media (hover: hover) {
|
|
1251
|
-
background-color: var(--color-
|
|
1474
|
+
background-color: var(--color-primary-50);
|
|
1475
|
+
}
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
.hover\:bg-primary-700 {
|
|
1479
|
+
&:hover {
|
|
1480
|
+
@media (hover: hover) {
|
|
1481
|
+
background-color: var(--color-primary-700);
|
|
1252
1482
|
}
|
|
1253
1483
|
}
|
|
1254
1484
|
}
|
|
@@ -1266,6 +1496,48 @@
|
|
|
1266
1496
|
}
|
|
1267
1497
|
}
|
|
1268
1498
|
}
|
|
1499
|
+
.hover\:bg-secondary-50 {
|
|
1500
|
+
&:hover {
|
|
1501
|
+
@media (hover: hover) {
|
|
1502
|
+
background-color: var(--color-secondary-50);
|
|
1503
|
+
}
|
|
1504
|
+
}
|
|
1505
|
+
}
|
|
1506
|
+
.hover\:bg-secondary-700 {
|
|
1507
|
+
&:hover {
|
|
1508
|
+
@media (hover: hover) {
|
|
1509
|
+
background-color: var(--color-secondary-700);
|
|
1510
|
+
}
|
|
1511
|
+
}
|
|
1512
|
+
}
|
|
1513
|
+
.hover\:bg-success-50 {
|
|
1514
|
+
&:hover {
|
|
1515
|
+
@media (hover: hover) {
|
|
1516
|
+
background-color: var(--color-success-50);
|
|
1517
|
+
}
|
|
1518
|
+
}
|
|
1519
|
+
}
|
|
1520
|
+
.hover\:bg-success-700 {
|
|
1521
|
+
&:hover {
|
|
1522
|
+
@media (hover: hover) {
|
|
1523
|
+
background-color: var(--color-success-700);
|
|
1524
|
+
}
|
|
1525
|
+
}
|
|
1526
|
+
}
|
|
1527
|
+
.hover\:bg-warning-50 {
|
|
1528
|
+
&:hover {
|
|
1529
|
+
@media (hover: hover) {
|
|
1530
|
+
background-color: var(--color-warning-50);
|
|
1531
|
+
}
|
|
1532
|
+
}
|
|
1533
|
+
}
|
|
1534
|
+
.hover\:bg-warning-700 {
|
|
1535
|
+
&:hover {
|
|
1536
|
+
@media (hover: hover) {
|
|
1537
|
+
background-color: var(--color-warning-700);
|
|
1538
|
+
}
|
|
1539
|
+
}
|
|
1540
|
+
}
|
|
1269
1541
|
.hover\:text-blue-800 {
|
|
1270
1542
|
&:hover {
|
|
1271
1543
|
@media (hover: hover) {
|
|
@@ -1308,6 +1580,13 @@
|
|
|
1308
1580
|
}
|
|
1309
1581
|
}
|
|
1310
1582
|
}
|
|
1583
|
+
.hover\:text-primary-600 {
|
|
1584
|
+
&:hover {
|
|
1585
|
+
@media (hover: hover) {
|
|
1586
|
+
color: var(--color-primary-600);
|
|
1587
|
+
}
|
|
1588
|
+
}
|
|
1589
|
+
}
|
|
1311
1590
|
.hover\:text-red-900 {
|
|
1312
1591
|
&:hover {
|
|
1313
1592
|
@media (hover: hover) {
|
|
@@ -1315,6 +1594,13 @@
|
|
|
1315
1594
|
}
|
|
1316
1595
|
}
|
|
1317
1596
|
}
|
|
1597
|
+
.hover\:underline {
|
|
1598
|
+
&:hover {
|
|
1599
|
+
@media (hover: hover) {
|
|
1600
|
+
text-decoration-line: underline;
|
|
1601
|
+
}
|
|
1602
|
+
}
|
|
1603
|
+
}
|
|
1318
1604
|
.hover\:shadow-lg {
|
|
1319
1605
|
&:hover {
|
|
1320
1606
|
@media (hover: hover) {
|
|
@@ -1345,14 +1631,19 @@
|
|
|
1345
1631
|
--tw-ring-color: var(--color-blue-500);
|
|
1346
1632
|
}
|
|
1347
1633
|
}
|
|
1348
|
-
.focus\:ring-
|
|
1634
|
+
.focus\:ring-danger-600 {
|
|
1349
1635
|
&:focus {
|
|
1350
|
-
--tw-ring-color: var(--color-
|
|
1636
|
+
--tw-ring-color: var(--color-danger-600);
|
|
1351
1637
|
}
|
|
1352
1638
|
}
|
|
1353
|
-
.focus\:ring-
|
|
1639
|
+
.focus\:ring-primary-500 {
|
|
1354
1640
|
&:focus {
|
|
1355
|
-
--tw-ring-color: var(--color-
|
|
1641
|
+
--tw-ring-color: var(--color-primary-500);
|
|
1642
|
+
}
|
|
1643
|
+
}
|
|
1644
|
+
.focus\:ring-primary-600 {
|
|
1645
|
+
&:focus {
|
|
1646
|
+
--tw-ring-color: var(--color-primary-600);
|
|
1356
1647
|
}
|
|
1357
1648
|
}
|
|
1358
1649
|
.focus\:ring-offset-2 {
|
|
@@ -1382,6 +1673,11 @@
|
|
|
1382
1673
|
outline-offset: calc(2px * -1);
|
|
1383
1674
|
}
|
|
1384
1675
|
}
|
|
1676
|
+
.focus\:outline-primary-600 {
|
|
1677
|
+
&:focus {
|
|
1678
|
+
outline-color: var(--color-primary-600);
|
|
1679
|
+
}
|
|
1680
|
+
}
|
|
1385
1681
|
.focus\:outline-none {
|
|
1386
1682
|
&:focus {
|
|
1387
1683
|
--tw-outline-style: none;
|
|
@@ -1394,6 +1690,11 @@
|
|
|
1394
1690
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1395
1691
|
}
|
|
1396
1692
|
}
|
|
1693
|
+
.focus-visible\:ring-primary-500 {
|
|
1694
|
+
&:focus-visible {
|
|
1695
|
+
--tw-ring-color: var(--color-primary-500);
|
|
1696
|
+
}
|
|
1697
|
+
}
|
|
1397
1698
|
.focus-visible\:ring-offset-2 {
|
|
1398
1699
|
&:focus-visible {
|
|
1399
1700
|
--tw-ring-offset-width: 2px;
|
|
@@ -1,3 +1,75 @@
|
|
|
1
|
-
@
|
|
2
|
-
@tailwind
|
|
3
|
-
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@config "../../../../config/tailwind.config.js";
|
|
3
|
+
|
|
4
|
+
@theme {
|
|
5
|
+
--color-default-50: var(--color-gray-50);
|
|
6
|
+
--color-default-100: var(--color-gray-100);
|
|
7
|
+
--color-default-200: var(--color-gray-200);
|
|
8
|
+
--color-default-300: var(--color-gray-300);
|
|
9
|
+
--color-default-400: var(--color-gray-400);
|
|
10
|
+
--color-default-500: var(--color-gray-500);
|
|
11
|
+
--color-default-600: var(--color-gray-600);
|
|
12
|
+
--color-default-700: var(--color-gray-700);
|
|
13
|
+
--color-default-800: var(--color-gray-800);
|
|
14
|
+
--color-default-900: var(--color-gray-900);
|
|
15
|
+
--color-primary-50: var(--color-indigo-50);
|
|
16
|
+
--color-primary-100: var(--color-indigo-100);
|
|
17
|
+
--color-primary-200: var(--color-indigo-200);
|
|
18
|
+
--color-primary-300: var(--color-indigo-300);
|
|
19
|
+
--color-primary-400: var(--color-indigo-400);
|
|
20
|
+
--color-primary-500: var(--color-indigo-500);
|
|
21
|
+
--color-primary-600: var(--color-indigo-600);
|
|
22
|
+
--color-primary-700: var(--color-indigo-700);
|
|
23
|
+
--color-primary-800: var(--color-indigo-800);
|
|
24
|
+
--color-primary-900: var(--color-indigo-900);
|
|
25
|
+
--color-secondary-50: var(--color-purple-50);
|
|
26
|
+
--color-secondary-100: var(--color-purple-100);
|
|
27
|
+
--color-secondary-200: var(--color-purple-200);
|
|
28
|
+
--color-secondary-300: var(--color-purple-300);
|
|
29
|
+
--color-secondary-400: var(--color-purple-400);
|
|
30
|
+
--color-secondary-500: var(--color-purple-500);
|
|
31
|
+
--color-secondary-600: var(--color-purple-600);
|
|
32
|
+
--color-secondary-700: var(--color-purple-700);
|
|
33
|
+
--color-secondary-800: var(--color-purple-800);
|
|
34
|
+
--color-secondary-900: var(--color-purple-900);
|
|
35
|
+
--color-success-50: var(--color-green-50);
|
|
36
|
+
--color-success-100: var(--color-green-100);
|
|
37
|
+
--color-success-200: var(--color-green-200);
|
|
38
|
+
--color-success-300: var(--color-green-300);
|
|
39
|
+
--color-success-400: var(--color-green-400);
|
|
40
|
+
--color-success-500: var(--color-green-500);
|
|
41
|
+
--color-success-600: var(--color-green-600);
|
|
42
|
+
--color-success-700: var(--color-green-700);
|
|
43
|
+
--color-success-800: var(--color-green-800);
|
|
44
|
+
--color-success-900: var(--color-green-900);
|
|
45
|
+
--color-danger-50: var(--color-red-50);
|
|
46
|
+
--color-danger-100: var(--color-red-100);
|
|
47
|
+
--color-danger-200: var(--color-red-200);
|
|
48
|
+
--color-danger-300: var(--color-red-300);
|
|
49
|
+
--color-danger-400: var(--color-red-400);
|
|
50
|
+
--color-danger-500: var(--color-red-500);
|
|
51
|
+
--color-danger-600: var(--color-red-600);
|
|
52
|
+
--color-danger-700: var(--color-red-700);
|
|
53
|
+
--color-danger-800: var(--color-red-800);
|
|
54
|
+
--color-danger-900: var(--color-red-900);
|
|
55
|
+
--color-warning-50: var(--color-amber-50);
|
|
56
|
+
--color-warning-100: var(--color-amber-100);
|
|
57
|
+
--color-warning-200: var(--color-amber-200);
|
|
58
|
+
--color-warning-300: var(--color-amber-300);
|
|
59
|
+
--color-warning-400: var(--color-amber-400);
|
|
60
|
+
--color-warning-500: var(--color-amber-500);
|
|
61
|
+
--color-warning-600: var(--color-amber-600);
|
|
62
|
+
--color-warning-700: var(--color-amber-700);
|
|
63
|
+
--color-warning-800: var(--color-amber-800);
|
|
64
|
+
--color-warning-900: var(--color-amber-900);
|
|
65
|
+
--color-info-50: var(--color-sky-50);
|
|
66
|
+
--color-info-100: var(--color-sky-100);
|
|
67
|
+
--color-info-200: var(--color-sky-200);
|
|
68
|
+
--color-info-300: var(--color-sky-300);
|
|
69
|
+
--color-info-400: var(--color-sky-400);
|
|
70
|
+
--color-info-500: var(--color-sky-500);
|
|
71
|
+
--color-info-600: var(--color-sky-600);
|
|
72
|
+
--color-info-700: var(--color-sky-700);
|
|
73
|
+
--color-info-800: var(--color-sky-800);
|
|
74
|
+
--color-info-900: var(--color-sky-900);
|
|
75
|
+
}
|
|
@@ -3,7 +3,7 @@ module OkonomiUiKit
|
|
|
3
3
|
def attribute_section(title:, description: nil, **options, &block)
|
|
4
4
|
builder = AttributeSectionBuilder.new(self)
|
|
5
5
|
|
|
6
|
-
render '
|
|
6
|
+
render 'okonomi/attribute_sections/section',
|
|
7
7
|
builder: builder,
|
|
8
8
|
title: title,
|
|
9
9
|
description: description,
|
|
@@ -3,15 +3,15 @@ module OkonomiUiKit
|
|
|
3
3
|
delegate :tag, :content_tag, :safe_join, to: :@template
|
|
4
4
|
|
|
5
5
|
def field_set(options = {}, &block)
|
|
6
|
-
@template.render('
|
|
6
|
+
@template.render('okonomi/forms/tailwind/field_set', options:, form: self, &block)
|
|
7
7
|
end
|
|
8
8
|
|
|
9
9
|
def field(field_id = nil, options = {}, &block)
|
|
10
|
-
@template.render('
|
|
10
|
+
@template.render('okonomi/forms/tailwind/field', field_id:, options:, form: self, &block)
|
|
11
11
|
end
|
|
12
12
|
|
|
13
13
|
def upload_field(method, options = {})
|
|
14
|
-
@template.render('
|
|
14
|
+
@template.render('okonomi/forms/tailwind/upload_field', method:, options:, form: self)
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
def text_field(method, options = {})
|
|
@@ -73,7 +73,7 @@ module OkonomiUiKit
|
|
|
73
73
|
css = [
|
|
74
74
|
select_class_base,
|
|
75
75
|
when_errors(method,
|
|
76
|
-
'bg-
|
|
76
|
+
'bg-danger-100 text-danger-600 ring-1 ring-inset ring-danger-300 focus-within:ring-2 focus-within:ring-danger-400',
|
|
77
77
|
select_class_default_state),
|
|
78
78
|
html_options[:class]
|
|
79
79
|
].compact.join(' ').split(' ').uniq
|
|
@@ -84,7 +84,7 @@ module OkonomiUiKit
|
|
|
84
84
|
css = [
|
|
85
85
|
select_class_base,
|
|
86
86
|
when_errors(method,
|
|
87
|
-
'bg-
|
|
87
|
+
'bg-danger-100 text-danger-600 ring-1 ring-inset ring-danger-300 focus-within:ring-2 focus-within:ring-danger-400',
|
|
88
88
|
select_class_default_state),
|
|
89
89
|
html_options[:class]
|
|
90
90
|
].compact.join(' ').split(' ').uniq
|
|
@@ -109,7 +109,10 @@ module OkonomiUiKit
|
|
|
109
109
|
end
|
|
110
110
|
|
|
111
111
|
def submit(value = nil, options = {})
|
|
112
|
-
|
|
112
|
+
variant = options.delete(:variant) || 'contained'
|
|
113
|
+
color = options.delete(:color) || 'primary'
|
|
114
|
+
|
|
115
|
+
base_classes = @template.ui.button_class(variant:, color:)
|
|
113
116
|
super(value, merge_class(options, base_classes))
|
|
114
117
|
end
|
|
115
118
|
|
|
@@ -127,13 +130,13 @@ module OkonomiUiKit
|
|
|
127
130
|
checked_value,
|
|
128
131
|
unchecked_value
|
|
129
132
|
)
|
|
130
|
-
@template.concat @template.render('
|
|
133
|
+
@template.concat @template.render('okonomi/forms/tailwind/checkbox_label', method:, options:, form: self)
|
|
131
134
|
end
|
|
132
135
|
end
|
|
133
136
|
|
|
134
137
|
def multi_select(method, **options)
|
|
135
138
|
@template.render(
|
|
136
|
-
partial: '
|
|
139
|
+
partial: 'okonomi/forms/tailwind/multi_select',
|
|
137
140
|
locals: {
|
|
138
141
|
form: self,
|
|
139
142
|
method: method,
|
|
@@ -159,9 +162,8 @@ module OkonomiUiKit
|
|
|
159
162
|
|
|
160
163
|
def input_field_classes(method, options, focus_ring: 'focus-within:ring-1', include_disabled: true)
|
|
161
164
|
css_classes = [
|
|
162
|
-
'w-full border-0
|
|
163
|
-
|
|
164
|
-
when_errors(method, 'bg-red-100 ring-2 ring-red-400'),
|
|
165
|
+
'w-full border-0 px-3 py-2 rounded-md ring-1 focus:outline-none',
|
|
166
|
+
when_errors(method, 'bg-danger-100 ring-danger-400 focus:ring-danger-600', "text-gray-700 ring-gray-300 #{focus_ring} focus-within:ring-gray-400"),
|
|
165
167
|
options[:class]
|
|
166
168
|
]
|
|
167
169
|
|
|
@@ -2,7 +2,7 @@ module OkonomiUiKit
|
|
|
2
2
|
module NavigationHelper
|
|
3
3
|
def navigation_menu(**options, &block)
|
|
4
4
|
builder = NavigationBuilder.new(self)
|
|
5
|
-
render '
|
|
5
|
+
render 'okonomi/navigation/menu', builder: builder, options: options, &block
|
|
6
6
|
end
|
|
7
7
|
|
|
8
8
|
class NavigationBuilder
|
|
@@ -49,7 +49,7 @@ module OkonomiUiKit
|
|
|
49
49
|
|
|
50
50
|
def nav_link(title, path, icon: nil, initials: nil, exact: false)
|
|
51
51
|
tag.li do
|
|
52
|
-
@template.render "
|
|
52
|
+
@template.render "okonomi/navigation/link",
|
|
53
53
|
path: path,
|
|
54
54
|
title: title,
|
|
55
55
|
icon: icon,
|
|
@@ -3,7 +3,7 @@ module OkonomiUiKit
|
|
|
3
3
|
def page(**options, &block)
|
|
4
4
|
builder = PageBuilder.new(self)
|
|
5
5
|
|
|
6
|
-
render '
|
|
6
|
+
render 'okonomi/page_builder/page', builder: builder, options: options, &block
|
|
7
7
|
end
|
|
8
8
|
|
|
9
9
|
class PageBuilder
|
|
@@ -3,7 +3,7 @@ module OkonomiUiKit
|
|
|
3
3
|
def table(**options, &block)
|
|
4
4
|
builder = TableBuilder.new(self)
|
|
5
5
|
|
|
6
|
-
render '
|
|
6
|
+
render 'okonomi/tables/table', builder: builder, options: options, &block
|
|
7
7
|
end
|
|
8
8
|
|
|
9
9
|
class TableBuilder
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
module Theme
|
|
3
|
+
LIGHT_THEME = {
|
|
4
|
+
components: {
|
|
5
|
+
typography: {
|
|
6
|
+
variants: {
|
|
7
|
+
body1: "text-base font-normal",
|
|
8
|
+
body2: "text-sm font-normal",
|
|
9
|
+
h1: "text-3xl font-bold",
|
|
10
|
+
h2: "text-2xl font-bold",
|
|
11
|
+
h3: "text-xl font-semibold",
|
|
12
|
+
h4: "text-lg font-semibold",
|
|
13
|
+
h5: "text-base font-semibold",
|
|
14
|
+
h6: "text-sm font-semibold"
|
|
15
|
+
},
|
|
16
|
+
colors: {
|
|
17
|
+
default: "text-default-700",
|
|
18
|
+
dark: "text-default-900",
|
|
19
|
+
muted: "text-default-500",
|
|
20
|
+
primary: "text-primary-600",
|
|
21
|
+
secondary: "text-secondary-600",
|
|
22
|
+
success: "text-success-600",
|
|
23
|
+
danger: "text-danger-600",
|
|
24
|
+
warning: "text-warning-600",
|
|
25
|
+
info: "text-info-600"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
link: {
|
|
29
|
+
root: "hover:cursor-pointer",
|
|
30
|
+
outlined: {
|
|
31
|
+
root: "inline-flex border items-center justify-center px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
|
|
32
|
+
colors: {
|
|
33
|
+
default: "bg-white text-default-700 border-default-700 hover:bg-default-50",
|
|
34
|
+
primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50",
|
|
35
|
+
secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50",
|
|
36
|
+
success: "bg-white text-success-600 border-success-600 hover:bg-success-50",
|
|
37
|
+
danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50",
|
|
38
|
+
warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50",
|
|
39
|
+
info: "bg-white text-info-600 border-info-600 hover:bg-info-50"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
contained: {
|
|
43
|
+
root: "inline-flex border items-center justify-center px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
|
|
44
|
+
colors: {
|
|
45
|
+
default: "border-default-700 bg-default-600 text-white hover:bg-default-700",
|
|
46
|
+
primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700",
|
|
47
|
+
secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700",
|
|
48
|
+
success: "border-success-700 bg-success-600 text-white hover:bg-success-700",
|
|
49
|
+
danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700",
|
|
50
|
+
warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700",
|
|
51
|
+
info: "border-info-700 bg-info-600 text-white hover:bg-info-700"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
text: {
|
|
55
|
+
root: "text-base",
|
|
56
|
+
colors: {
|
|
57
|
+
default: "text-default-700 hover:underline",
|
|
58
|
+
primary: "text-primary-600 hover:underline",
|
|
59
|
+
secondary: "text-secondary-600 hover:underline",
|
|
60
|
+
success: "text-success-600 hover:underline",
|
|
61
|
+
danger: "text-danger-600 hover:underline",
|
|
62
|
+
warning: "text-warning-600 hover:underline",
|
|
63
|
+
info: "text-info-600 hover:underline"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
DEFAULT_THEME = LIGHT_THEME
|
|
71
|
+
end
|
|
72
|
+
end
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
module ThemeHelper
|
|
3
|
+
def theme(t = {}, &block)
|
|
4
|
+
old_theme = theme
|
|
5
|
+
|
|
6
|
+
@_okonomi_ui_kit_theme = {}.merge(old_theme).merge(t || {})
|
|
7
|
+
|
|
8
|
+
yield(@_okonomi_ui_kit_theme)
|
|
9
|
+
|
|
10
|
+
@_okonomi_ui_kit_theme = old_theme
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def get_theme
|
|
14
|
+
@_okonomi_ui_kit_theme ||= OkonomiUiKit::Theme::DEFAULT_THEME
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
module UiHelper
|
|
3
|
+
def ui
|
|
4
|
+
@ui ||= UiBuilder.new(self)
|
|
5
|
+
end
|
|
6
|
+
|
|
7
|
+
class UiBuilder
|
|
8
|
+
include ActionView::Helpers::TagHelper
|
|
9
|
+
include ActionView::Helpers::CaptureHelper
|
|
10
|
+
|
|
11
|
+
def initialize(template)
|
|
12
|
+
@template = template
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
def theme(t = {}, &block)
|
|
16
|
+
old_theme = get_theme
|
|
17
|
+
|
|
18
|
+
@_okonomi_ui_kit_theme = {}.merge(old_theme).merge(t || {})
|
|
19
|
+
|
|
20
|
+
yield(@_okonomi_ui_kit_theme)
|
|
21
|
+
|
|
22
|
+
@_okonomi_ui_kit_theme = old_theme
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
def get_theme
|
|
26
|
+
@_okonomi_ui_kit_theme ||= OkonomiUiKit::Theme::DEFAULT_THEME
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
def link_to(name = nil, options = nil, html_options = nil, &block)
|
|
30
|
+
html_options, options, name = options, name, block if block_given?
|
|
31
|
+
|
|
32
|
+
html_options ||= {}
|
|
33
|
+
html_options[:class] ||= ''
|
|
34
|
+
|
|
35
|
+
variant = (html_options.delete(:variant) || 'text').to_sym
|
|
36
|
+
color = (html_options.delete(:color) || 'default').to_sym
|
|
37
|
+
|
|
38
|
+
html_options[:class] = button_class(variant:, color:, classes: html_options[:class])
|
|
39
|
+
|
|
40
|
+
if block_given?
|
|
41
|
+
@template.link_to(options, html_options, &block)
|
|
42
|
+
else
|
|
43
|
+
@template.link_to(name, options, html_options)
|
|
44
|
+
end
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
def button_to(name = nil, options = nil, html_options = nil, &block)
|
|
48
|
+
html_options, options, name = options, name, block if block_given?
|
|
49
|
+
|
|
50
|
+
html_options ||= {}
|
|
51
|
+
html_options[:class] ||= ''
|
|
52
|
+
|
|
53
|
+
variant = (html_options.delete(:variant) || 'contained').to_sym
|
|
54
|
+
color = (html_options.delete(:color) || 'default').to_sym
|
|
55
|
+
|
|
56
|
+
html_options[:class] = button_class(variant:, color:, classes: html_options[:class])
|
|
57
|
+
|
|
58
|
+
if block_given?
|
|
59
|
+
@template.button_to(options, html_options, &block)
|
|
60
|
+
else
|
|
61
|
+
@template.button_to(name, options, html_options)
|
|
62
|
+
end
|
|
63
|
+
end
|
|
64
|
+
|
|
65
|
+
def button_class(variant: 'contained', color: 'default', classes: '')
|
|
66
|
+
[
|
|
67
|
+
get_theme.dig(:components, :link, :root) || '',
|
|
68
|
+
get_theme.dig(:components, :link, variant.to_sym, :root) || '',
|
|
69
|
+
get_theme.dig(:components, :link, variant.to_sym, :colors, color.to_sym) || '',
|
|
70
|
+
classes,
|
|
71
|
+
].join(' ')
|
|
72
|
+
end
|
|
73
|
+
|
|
74
|
+
def page(&block)
|
|
75
|
+
@template.page(&block)
|
|
76
|
+
end
|
|
77
|
+
|
|
78
|
+
TYPOGRAPHY_COMPONENTS = {
|
|
79
|
+
body1: 'p',
|
|
80
|
+
body2: 'p',
|
|
81
|
+
h1: 'h1',
|
|
82
|
+
h2: 'h2',
|
|
83
|
+
h3: 'h3',
|
|
84
|
+
h4: 'h4',
|
|
85
|
+
h5: 'h5',
|
|
86
|
+
h6: 'h6',
|
|
87
|
+
}.freeze
|
|
88
|
+
|
|
89
|
+
def typography(text = nil, options = nil, &block)
|
|
90
|
+
options, text = text, nil if block_given?
|
|
91
|
+
options ||= {}
|
|
92
|
+
|
|
93
|
+
variant = (options.delete(:variant) || 'body1').to_sym
|
|
94
|
+
component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
|
|
95
|
+
color = (options.delete(:color) || 'default').to_sym
|
|
96
|
+
classes = [
|
|
97
|
+
get_theme.dig(:components, :typography, :variants, variant) || '',
|
|
98
|
+
get_theme.dig(:components, :typography, :colors, color) || '',
|
|
99
|
+
options.delete(:class) || ''
|
|
100
|
+
]
|
|
101
|
+
|
|
102
|
+
if block_given?
|
|
103
|
+
@template.render("okonomi/components/typography", options:, variant:, component:, classes:, &block)
|
|
104
|
+
else
|
|
105
|
+
@template.render("okonomi/components/typography", text:, options:, variant:, component:, classes:)
|
|
106
|
+
end
|
|
107
|
+
end
|
|
108
|
+
end
|
|
109
|
+
end
|
|
110
|
+
end
|
|
@@ -24,11 +24,11 @@ module OkonomiUiKit
|
|
|
24
24
|
include OkonomiUiKit::AttributeSectionHelper
|
|
25
25
|
include OkonomiUiKit::BadgeHelper
|
|
26
26
|
include OkonomiUiKit::BreadcrumbsHelper
|
|
27
|
-
include OkonomiUiKit::ButtonHelper
|
|
28
27
|
include OkonomiUiKit::IconHelper
|
|
29
28
|
include OkonomiUiKit::NavigationHelper
|
|
30
29
|
include OkonomiUiKit::PageBuilderHelper
|
|
31
30
|
include OkonomiUiKit::TableHelper
|
|
31
|
+
include OkonomiUiKit::UiHelper
|
|
32
32
|
# include OkonomiUiKit::FormBuilder
|
|
33
33
|
end
|
|
34
34
|
end
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: okonomi_ui_kit
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Okonomi GmbH
|
|
@@ -23,6 +23,34 @@ dependencies:
|
|
|
23
23
|
- - ">="
|
|
24
24
|
- !ruby/object:Gem::Version
|
|
25
25
|
version: 8.0.0
|
|
26
|
+
- !ruby/object:Gem::Dependency
|
|
27
|
+
name: tailwindcss-ruby
|
|
28
|
+
requirement: !ruby/object:Gem::Requirement
|
|
29
|
+
requirements:
|
|
30
|
+
- - ">="
|
|
31
|
+
- !ruby/object:Gem::Version
|
|
32
|
+
version: '0'
|
|
33
|
+
type: :runtime
|
|
34
|
+
prerelease: false
|
|
35
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
36
|
+
requirements:
|
|
37
|
+
- - ">="
|
|
38
|
+
- !ruby/object:Gem::Version
|
|
39
|
+
version: '0'
|
|
40
|
+
- !ruby/object:Gem::Dependency
|
|
41
|
+
name: tailwindcss-rails
|
|
42
|
+
requirement: !ruby/object:Gem::Requirement
|
|
43
|
+
requirements:
|
|
44
|
+
- - ">="
|
|
45
|
+
- !ruby/object:Gem::Version
|
|
46
|
+
version: '0'
|
|
47
|
+
type: :runtime
|
|
48
|
+
prerelease: false
|
|
49
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
50
|
+
requirements:
|
|
51
|
+
- - ">="
|
|
52
|
+
- !ruby/object:Gem::Version
|
|
53
|
+
version: '0'
|
|
26
54
|
description: UI Kit for Okonomi applications
|
|
27
55
|
email:
|
|
28
56
|
- andre.lahs@okonomi.gmbh
|
|
@@ -1330,13 +1358,15 @@ files:
|
|
|
1330
1358
|
- app/helpers/okonomi_ui_kit/attribute_section_helper.rb
|
|
1331
1359
|
- app/helpers/okonomi_ui_kit/badge_helper.rb
|
|
1332
1360
|
- app/helpers/okonomi_ui_kit/breadcrumbs_helper.rb
|
|
1333
|
-
- app/helpers/okonomi_ui_kit/button_helper.rb
|
|
1334
1361
|
- app/helpers/okonomi_ui_kit/form_builder.rb
|
|
1335
1362
|
- app/helpers/okonomi_ui_kit/icon_helper.rb
|
|
1336
1363
|
- app/helpers/okonomi_ui_kit/navigation_helper.rb
|
|
1337
1364
|
- app/helpers/okonomi_ui_kit/page_builder_helper.rb
|
|
1338
1365
|
- app/helpers/okonomi_ui_kit/svg_icons.rb
|
|
1339
1366
|
- app/helpers/okonomi_ui_kit/table_helper.rb
|
|
1367
|
+
- app/helpers/okonomi_ui_kit/theme.rb
|
|
1368
|
+
- app/helpers/okonomi_ui_kit/theme_helper.rb
|
|
1369
|
+
- app/helpers/okonomi_ui_kit/ui_helper.rb
|
|
1340
1370
|
- app/javascript/okonomi_ui_kit/application.js
|
|
1341
1371
|
- app/javascript/okonomi_ui_kit/controllers/dropdown_controller.js
|
|
1342
1372
|
- app/javascript/okonomi_ui_kit_manifest.js
|
|
@@ -1344,18 +1374,19 @@ files:
|
|
|
1344
1374
|
- app/mailers/okonomi_ui_kit/application_mailer.rb
|
|
1345
1375
|
- app/models/okonomi_ui_kit/application_record.rb
|
|
1346
1376
|
- app/views/layouts/okonomi_ui_kit/application.html.erb
|
|
1347
|
-
- app/views/
|
|
1348
|
-
- app/views/
|
|
1349
|
-
- app/views/
|
|
1350
|
-
- app/views/
|
|
1351
|
-
- app/views/
|
|
1352
|
-
- app/views/
|
|
1353
|
-
- app/views/
|
|
1354
|
-
- app/views/
|
|
1355
|
-
- app/views/
|
|
1356
|
-
- app/views/
|
|
1357
|
-
- app/views/
|
|
1358
|
-
- app/views/
|
|
1377
|
+
- app/views/okonomi/attribute_sections/_section.html.erb
|
|
1378
|
+
- app/views/okonomi/components/_typography.html.erb
|
|
1379
|
+
- app/views/okonomi/forms/tailwind/_checkbox_label.html.erb
|
|
1380
|
+
- app/views/okonomi/forms/tailwind/_field.html.erb
|
|
1381
|
+
- app/views/okonomi/forms/tailwind/_field_set.html.erb
|
|
1382
|
+
- app/views/okonomi/forms/tailwind/_multi_select.html.erb
|
|
1383
|
+
- app/views/okonomi/forms/tailwind/_radio_button.html.erb
|
|
1384
|
+
- app/views/okonomi/forms/tailwind/_upload_field.html.erb
|
|
1385
|
+
- app/views/okonomi/navigation/_link.html.erb
|
|
1386
|
+
- app/views/okonomi/navigation/_menu.html.erb
|
|
1387
|
+
- app/views/okonomi/navigation/_navbar.html.erb
|
|
1388
|
+
- app/views/okonomi/page_builder/_page.html.erb
|
|
1389
|
+
- app/views/okonomi/tables/_table.html.erb
|
|
1359
1390
|
- config/importmap.rb
|
|
1360
1391
|
- config/routes.rb
|
|
1361
1392
|
- config/tailwind.config.js
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
module OkonomiUiKit
|
|
2
|
-
module ButtonHelper
|
|
3
|
-
def okonomi_button(text, url = nil, variant: :primary, size: :medium, **options)
|
|
4
|
-
base_classes = "inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
|
|
5
|
-
|
|
6
|
-
variant_classes = case variant
|
|
7
|
-
when :primary
|
|
8
|
-
"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500"
|
|
9
|
-
when :secondary
|
|
10
|
-
"bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500"
|
|
11
|
-
when :danger
|
|
12
|
-
"bg-red-600 text-white hover:bg-red-700 focus:ring-red-500"
|
|
13
|
-
when :ghost
|
|
14
|
-
"bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500"
|
|
15
|
-
else
|
|
16
|
-
"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500"
|
|
17
|
-
end
|
|
18
|
-
|
|
19
|
-
size_classes = case size
|
|
20
|
-
when :small
|
|
21
|
-
"px-3 py-1.5 text-sm"
|
|
22
|
-
when :medium
|
|
23
|
-
"px-4 py-2 text-sm"
|
|
24
|
-
when :large
|
|
25
|
-
"px-6 py-3 text-base"
|
|
26
|
-
else
|
|
27
|
-
"px-4 py-2 text-sm"
|
|
28
|
-
end
|
|
29
|
-
|
|
30
|
-
options[:class] = [base_classes, variant_classes, size_classes, options[:class]].compact.join(" ")
|
|
31
|
-
|
|
32
|
-
if url
|
|
33
|
-
link_to text, url, options
|
|
34
|
-
else
|
|
35
|
-
content_tag :button, text, options
|
|
36
|
-
end
|
|
37
|
-
end
|
|
38
|
-
end
|
|
39
|
-
end
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|