okonomi_ui_kit 0.1.7 → 0.1.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.
- checksums.yaml +4 -4
- data/README.md +163 -7
- data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +262 -7
- data/app/helpers/okonomi_ui_kit/component.rb +35 -16
- data/app/helpers/okonomi_ui_kit/components/badge.rb +2 -2
- data/app/helpers/okonomi_ui_kit/components/breadcrumbs.rb +69 -0
- data/app/helpers/okonomi_ui_kit/components/button_base.rb +56 -0
- data/app/helpers/okonomi_ui_kit/components/button_tag.rb +23 -0
- data/app/helpers/okonomi_ui_kit/components/button_to.rb +1 -12
- data/app/helpers/okonomi_ui_kit/components/icon.rb +36 -0
- data/app/helpers/okonomi_ui_kit/components/link_to.rb +1 -12
- data/app/helpers/okonomi_ui_kit/components/page.rb +1 -1
- data/app/helpers/okonomi_ui_kit/components/table.rb +2 -2
- data/app/helpers/okonomi_ui_kit/config.rb +5 -1
- data/app/helpers/okonomi_ui_kit/form_builder.rb +2 -2
- data/app/helpers/okonomi_ui_kit/t_w_merge.rb +108 -0
- data/app/helpers/okonomi_ui_kit/theme.rb +0 -23
- data/app/views/okonomi/components/breadcrumbs/_breadcrumbs.html.erb +46 -0
- data/app/views/okonomi/components/icon/_icon.html.erb +38 -0
- data/app/views/okonomi/forms/tailwind/_upload_field.html.erb +2 -2
- data/app/views/okonomi/modals/_confirmation_modal.html.erb +2 -2
- data/app/views/okonomi/navigation/_link.html.erb +1 -1
- data/lib/okonomi_ui_kit/engine.rb +0 -2
- data/lib/okonomi_ui_kit/version.rb +1 -1
- metadata +8 -3
- data/app/helpers/okonomi_ui_kit/breadcrumbs_helper.rb +0 -60
- data/app/helpers/okonomi_ui_kit/icon_helper.rb +0 -39
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 24a820c59804a18c24872be13e80062bd25cfb96fe7d6da83eaee5e94b6e7ac0
|
|
4
|
+
data.tar.gz: e4dd1e222ac1593f098fc5f49e1a8b322aee75612b087ca62f6610822b6ed963
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7c800c4444d8f97f83898e8cb58a51f56746602fddc398a902412c6984501c86f9b653420dcbec5e5dd5c0bc5d208db86b2e291b8288de596e11e27b78e92284
|
|
7
|
+
data.tar.gz: 10047841cc202597d69470676eae295f7fa4215c3580d8183f855b92bd197b8b425d849097962ec47e49046d24bb3e18e9014d2bbfb3cee0a98144365953e758
|
data/README.md
CHANGED
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
# OkonomiUiKit
|
|
2
|
-
Short description and motivation.
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
A Rails Engine gem that provides customizable, Tailwind CSS-based UI components for Rails applications. Built with maximum flexibility in mind, OkonomiUiKit allows you to maintain consistent design patterns across projects while giving you complete control over styling and behavior.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **🎨 Fully Customizable** - Override any component's styling through a powerful configuration system
|
|
8
|
+
- **🚀 Rails Native** - Built as a Rails Engine following Rails conventions
|
|
9
|
+
- **💨 Tailwind CSS** - Modern utility-first CSS with intelligent class merging
|
|
10
|
+
- **⚡ Stimulus Powered** - Progressive enhancement with Stimulus controllers
|
|
11
|
+
- **🔧 Form Builder** - Enhanced form helpers with consistent styling
|
|
12
|
+
- **📦 Component Library** - Pre-built components including buttons, badges, tables, alerts, and more
|
|
13
|
+
- **🎯 Theme System** - Centralized theme configuration with variant support
|
|
14
|
+
- **🔄 Smart Style Merging** - Intelligent Tailwind class conflict resolution
|
|
6
15
|
|
|
7
16
|
## Installation
|
|
17
|
+
|
|
8
18
|
Add this line to your application's Gemfile:
|
|
9
19
|
|
|
10
20
|
```ruby
|
|
@@ -16,13 +26,159 @@ And then execute:
|
|
|
16
26
|
$ bundle
|
|
17
27
|
```
|
|
18
28
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
29
|
+
In your application layout, include the CSS and JavaScript:
|
|
30
|
+
|
|
31
|
+
```erb
|
|
32
|
+
<%= stylesheet_link_tag "okonomi_ui_kit/application.tailwind", "data-turbo-track": "reload" %>
|
|
33
|
+
<%= javascript_importmap_tags "okonomi_ui_kit" %>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Quick Start
|
|
37
|
+
|
|
38
|
+
### Using Components
|
|
39
|
+
|
|
40
|
+
OkonomiUiKit provides a `ui` helper that gives you access to all components:
|
|
41
|
+
|
|
42
|
+
```erb
|
|
43
|
+
<%= ui.button "Click me", variant: :contained, color: :primary %>
|
|
44
|
+
<%= ui.badge "New", color: :success %>
|
|
45
|
+
<%= ui.alert "Welcome to OkonomiUiKit!", variant: :info %>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Using the Form Builder
|
|
49
|
+
|
|
50
|
+
```erb
|
|
51
|
+
<%= form_with model: @user, builder: OkonomiUiKit::FormBuilder do |f| %>
|
|
52
|
+
<%= f.field_set do %>
|
|
53
|
+
<%= f.field :email do %>
|
|
54
|
+
<%= f.email_field :email %>
|
|
55
|
+
<% end %>
|
|
56
|
+
|
|
57
|
+
<%= f.field :password do %>
|
|
58
|
+
<%= f.password_field :password %>
|
|
59
|
+
<% end %>
|
|
60
|
+
<% end %>
|
|
61
|
+
|
|
62
|
+
<%= f.submit "Sign Up", color: :primary %>
|
|
63
|
+
<% end %>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Available Components
|
|
67
|
+
|
|
68
|
+
### Core Components
|
|
69
|
+
- **Button** - Buttons with multiple variants (contained, outlined, text)
|
|
70
|
+
- **Badge** - Status indicators and labels
|
|
71
|
+
- **Alert** - Notification messages with icons
|
|
72
|
+
- **Table** - Data tables with consistent styling
|
|
73
|
+
- **Typography** - Headings and text with predefined styles
|
|
74
|
+
- **Code** - Inline and block code display
|
|
75
|
+
|
|
76
|
+
### Form Components
|
|
77
|
+
- **Field** - Form field wrapper with label and error handling
|
|
78
|
+
- **FieldSet** - Group related form fields
|
|
79
|
+
- **Select** - Styled select dropdowns
|
|
80
|
+
- **Checkbox/Radio** - Enhanced checkboxes and radio buttons
|
|
81
|
+
- **File Upload** - Drag-and-drop file uploads
|
|
82
|
+
|
|
83
|
+
### Navigation Components
|
|
84
|
+
- **Dropdown** - Dropdown menus with Stimulus integration
|
|
85
|
+
- **Breadcrumbs** - Navigation breadcrumbs
|
|
86
|
+
- **Link** - Styled links with variants
|
|
87
|
+
|
|
88
|
+
## Customization
|
|
89
|
+
|
|
90
|
+
OkonomiUiKit is designed to be highly customizable. You can override component styles by creating configuration classes in your Rails application.
|
|
91
|
+
|
|
92
|
+
### Quick Example
|
|
93
|
+
|
|
94
|
+
```ruby
|
|
95
|
+
# app/helpers/okonomi_ui_kit/configs/button_base.rb
|
|
96
|
+
module OkonomiUiKit
|
|
97
|
+
module Configs
|
|
98
|
+
class ButtonBase < OkonomiUiKit::Config
|
|
99
|
+
register_styles :default do
|
|
100
|
+
{
|
|
101
|
+
root: "font-semibold transition-all duration-200",
|
|
102
|
+
contained: {
|
|
103
|
+
colors: {
|
|
104
|
+
primary: "bg-brand-500 hover:bg-brand-600"
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
end
|
|
109
|
+
end
|
|
110
|
+
end
|
|
111
|
+
end
|
|
22
112
|
```
|
|
23
113
|
|
|
114
|
+
## Documentation
|
|
115
|
+
|
|
116
|
+
### Guides
|
|
117
|
+
|
|
118
|
+
- [Style Overrides Guide](guides/style-overrides-guide.md) - Complete guide to customizing component styles
|
|
119
|
+
- [Component Guide](docs/COMPONENT_GUIDE.md) - Creating custom components
|
|
120
|
+
- [CLAUDE.md](CLAUDE.md) - AI assistant instructions and architecture details
|
|
121
|
+
|
|
122
|
+
### Component Guides
|
|
123
|
+
|
|
124
|
+
- [Breadcrumbs](guides/components/breadcrumbs.md) - Navigation breadcrumb trails
|
|
125
|
+
- [Typography](guides/components/typography.md) - Text styling with semantic HTML elements
|
|
126
|
+
- [Icon](guides/components/icon.md) - SVG icon rendering with theme support
|
|
127
|
+
|
|
128
|
+
### Development
|
|
129
|
+
|
|
130
|
+
For development setup and commands, see [CLAUDE.md](CLAUDE.md#development-commands).
|
|
131
|
+
|
|
132
|
+
## Architecture Overview
|
|
133
|
+
|
|
134
|
+
OkonomiUiKit is built as a Rails Engine with:
|
|
135
|
+
|
|
136
|
+
- **Helper-based components** - Ruby methods that generate semantic HTML
|
|
137
|
+
- **Centralized theme system** - Consistent styling across all components
|
|
138
|
+
- **Stimulus controllers** - Progressive enhancement for interactivity
|
|
139
|
+
- **Tailwind CSS integration** - Modern utility-first styling
|
|
140
|
+
- **Smart style merging** - Intelligent conflict resolution for Tailwind classes
|
|
141
|
+
|
|
24
142
|
## Contributing
|
|
25
|
-
|
|
143
|
+
|
|
144
|
+
We welcome contributions! Please follow these steps:
|
|
145
|
+
|
|
146
|
+
1. Fork the repository
|
|
147
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
148
|
+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
|
|
149
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
150
|
+
5. Open a Pull Request
|
|
151
|
+
|
|
152
|
+
### Development Setup
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
# Clone the repository
|
|
156
|
+
git clone https://github.com/yourusername/okonomi_ui_kit.git
|
|
157
|
+
cd okonomi_ui_kit
|
|
158
|
+
|
|
159
|
+
# Install dependencies
|
|
160
|
+
bundle install
|
|
161
|
+
|
|
162
|
+
# Start the development server
|
|
163
|
+
bin/dev
|
|
164
|
+
|
|
165
|
+
# Run tests
|
|
166
|
+
bin/rails test
|
|
167
|
+
|
|
168
|
+
# Run linter
|
|
169
|
+
bin/rubocop
|
|
170
|
+
```
|
|
26
171
|
|
|
27
172
|
## License
|
|
173
|
+
|
|
28
174
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
|
175
|
+
|
|
176
|
+
## Credits
|
|
177
|
+
|
|
178
|
+
OkonomiUiKit is maintained by the Okonomi team. We're passionate about creating tools that make Rails development more enjoyable and productive.
|
|
179
|
+
|
|
180
|
+
## Support
|
|
181
|
+
|
|
182
|
+
- 📚 [Documentation](guides/)
|
|
183
|
+
- 🐛 [Issue Tracker](https://github.com/yourusername/okonomi_ui_kit/issues)
|
|
184
|
+
- 💬 [Discussions](https://github.com/yourusername/okonomi_ui_kit/discussions)
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--color-yellow-200: oklch(94.5% 0.129 101.54);
|
|
33
33
|
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
|
34
34
|
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
|
35
|
+
--color-yellow-600: oklch(68.1% 0.162 75.834);
|
|
35
36
|
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
|
36
37
|
--color-yellow-800: oklch(47.6% 0.114 61.907);
|
|
37
38
|
--color-green-50: oklch(98.2% 0.018 155.826);
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
--color-green-700: oklch(52.7% 0.154 150.069);
|
|
45
46
|
--color-green-800: oklch(44.8% 0.119 151.328);
|
|
46
47
|
--color-green-900: oklch(39.3% 0.095 152.535);
|
|
48
|
+
--color-cyan-600: oklch(60.9% 0.126 221.723);
|
|
47
49
|
--color-sky-50: oklch(97.7% 0.013 236.62);
|
|
48
50
|
--color-sky-100: oklch(95.1% 0.026 236.824);
|
|
49
51
|
--color-sky-200: oklch(90.1% 0.058 230.902);
|
|
@@ -118,18 +120,27 @@
|
|
|
118
120
|
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
119
121
|
--text-4xl: 2.25rem;
|
|
120
122
|
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
123
|
+
--text-5xl: 3rem;
|
|
124
|
+
--text-5xl--line-height: 1;
|
|
121
125
|
--text-6xl: 3.75rem;
|
|
122
126
|
--text-6xl--line-height: 1;
|
|
127
|
+
--font-weight-light: 300;
|
|
123
128
|
--font-weight-normal: 400;
|
|
124
129
|
--font-weight-medium: 500;
|
|
125
130
|
--font-weight-semibold: 600;
|
|
126
131
|
--font-weight-bold: 700;
|
|
127
132
|
--tracking-tight: -0.025em;
|
|
133
|
+
--tracking-wide: 0.025em;
|
|
134
|
+
--tracking-wider: 0.05em;
|
|
135
|
+
--leading-tight: 1.25;
|
|
136
|
+
--leading-relaxed: 1.625;
|
|
128
137
|
--radius-sm: 0.25rem;
|
|
129
138
|
--radius-md: 0.375rem;
|
|
130
139
|
--radius-lg: 0.5rem;
|
|
131
140
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
132
141
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
142
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
143
|
+
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
133
144
|
--default-transition-duration: 150ms;
|
|
134
145
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
135
146
|
--default-font-family: var(--font-sans);
|
|
@@ -371,6 +382,9 @@
|
|
|
371
382
|
.left-0 {
|
|
372
383
|
left: calc(var(--spacing) * 0);
|
|
373
384
|
}
|
|
385
|
+
.isolate {
|
|
386
|
+
isolation: isolate;
|
|
387
|
+
}
|
|
374
388
|
.z-10 {
|
|
375
389
|
z-index: 10;
|
|
376
390
|
}
|
|
@@ -607,6 +621,9 @@
|
|
|
607
621
|
.max-w-none {
|
|
608
622
|
max-width: none;
|
|
609
623
|
}
|
|
624
|
+
.max-w-prose {
|
|
625
|
+
max-width: 65ch;
|
|
626
|
+
}
|
|
610
627
|
.max-w-xs {
|
|
611
628
|
max-width: var(--container-xs);
|
|
612
629
|
}
|
|
@@ -666,6 +683,9 @@
|
|
|
666
683
|
.transform {
|
|
667
684
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
668
685
|
}
|
|
686
|
+
.animate-pulse {
|
|
687
|
+
animation: var(--animate-pulse);
|
|
688
|
+
}
|
|
669
689
|
.cursor-not-allowed {
|
|
670
690
|
cursor: not-allowed;
|
|
671
691
|
}
|
|
@@ -781,6 +801,13 @@
|
|
|
781
801
|
.gap-x-3 {
|
|
782
802
|
column-gap: calc(var(--spacing) * 3);
|
|
783
803
|
}
|
|
804
|
+
.-space-x-px {
|
|
805
|
+
:where(& > :not(:last-child)) {
|
|
806
|
+
--tw-space-x-reverse: 0;
|
|
807
|
+
margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
|
|
808
|
+
margin-inline-end: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
|
|
809
|
+
}
|
|
810
|
+
}
|
|
784
811
|
.space-x-2 {
|
|
785
812
|
:where(& > :not(:last-child)) {
|
|
786
813
|
--tw-space-x-reverse: 0;
|
|
@@ -788,6 +815,13 @@
|
|
|
788
815
|
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
|
|
789
816
|
}
|
|
790
817
|
}
|
|
818
|
+
.space-x-3 {
|
|
819
|
+
:where(& > :not(:last-child)) {
|
|
820
|
+
--tw-space-x-reverse: 0;
|
|
821
|
+
margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
|
|
822
|
+
margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
|
|
823
|
+
}
|
|
824
|
+
}
|
|
791
825
|
.space-x-4 {
|
|
792
826
|
:where(& > :not(:last-child)) {
|
|
793
827
|
--tw-space-x-reverse: 0;
|
|
@@ -854,6 +888,9 @@
|
|
|
854
888
|
.rounded-md {
|
|
855
889
|
border-radius: var(--radius-md);
|
|
856
890
|
}
|
|
891
|
+
.rounded-none {
|
|
892
|
+
border-radius: 0;
|
|
893
|
+
}
|
|
857
894
|
.rounded-sm {
|
|
858
895
|
border-radius: var(--radius-sm);
|
|
859
896
|
}
|
|
@@ -892,6 +929,12 @@
|
|
|
892
929
|
.border-blue-200 {
|
|
893
930
|
border-color: var(--color-blue-200);
|
|
894
931
|
}
|
|
932
|
+
.border-blue-500 {
|
|
933
|
+
border-color: var(--color-blue-500);
|
|
934
|
+
}
|
|
935
|
+
.border-blue-600 {
|
|
936
|
+
border-color: var(--color-blue-600);
|
|
937
|
+
}
|
|
895
938
|
.border-danger-600 {
|
|
896
939
|
border-color: var(--color-danger-600);
|
|
897
940
|
}
|
|
@@ -910,6 +953,9 @@
|
|
|
910
953
|
.border-gray-300 {
|
|
911
954
|
border-color: var(--color-gray-300);
|
|
912
955
|
}
|
|
956
|
+
.border-gray-500 {
|
|
957
|
+
border-color: var(--color-gray-500);
|
|
958
|
+
}
|
|
913
959
|
.border-gray-600 {
|
|
914
960
|
border-color: var(--color-gray-600);
|
|
915
961
|
}
|
|
@@ -964,6 +1010,9 @@
|
|
|
964
1010
|
.bg-blue-100 {
|
|
965
1011
|
background-color: var(--color-blue-100);
|
|
966
1012
|
}
|
|
1013
|
+
.bg-blue-500 {
|
|
1014
|
+
background-color: var(--color-blue-500);
|
|
1015
|
+
}
|
|
967
1016
|
.bg-blue-600 {
|
|
968
1017
|
background-color: var(--color-blue-600);
|
|
969
1018
|
}
|
|
@@ -1233,10 +1282,22 @@
|
|
|
1233
1282
|
--tw-leading: calc(var(--spacing) * 7);
|
|
1234
1283
|
line-height: calc(var(--spacing) * 7);
|
|
1235
1284
|
}
|
|
1285
|
+
.leading-relaxed {
|
|
1286
|
+
--tw-leading: var(--leading-relaxed);
|
|
1287
|
+
line-height: var(--leading-relaxed);
|
|
1288
|
+
}
|
|
1289
|
+
.leading-tight {
|
|
1290
|
+
--tw-leading: var(--leading-tight);
|
|
1291
|
+
line-height: var(--leading-tight);
|
|
1292
|
+
}
|
|
1236
1293
|
.font-bold {
|
|
1237
1294
|
--tw-font-weight: var(--font-weight-bold);
|
|
1238
1295
|
font-weight: var(--font-weight-bold);
|
|
1239
1296
|
}
|
|
1297
|
+
.font-light {
|
|
1298
|
+
--tw-font-weight: var(--font-weight-light);
|
|
1299
|
+
font-weight: var(--font-weight-light);
|
|
1300
|
+
}
|
|
1240
1301
|
.font-medium {
|
|
1241
1302
|
--tw-font-weight: var(--font-weight-medium);
|
|
1242
1303
|
font-weight: var(--font-weight-medium);
|
|
@@ -1249,12 +1310,21 @@
|
|
|
1249
1310
|
--tw-font-weight: var(--font-weight-semibold);
|
|
1250
1311
|
font-weight: var(--font-weight-semibold);
|
|
1251
1312
|
}
|
|
1313
|
+
.tracking-tight {
|
|
1314
|
+
--tw-tracking: var(--tracking-tight);
|
|
1315
|
+
letter-spacing: var(--tracking-tight);
|
|
1316
|
+
}
|
|
1317
|
+
.tracking-wide {
|
|
1318
|
+
--tw-tracking: var(--tracking-wide);
|
|
1319
|
+
letter-spacing: var(--tracking-wide);
|
|
1320
|
+
}
|
|
1321
|
+
.tracking-wider {
|
|
1322
|
+
--tw-tracking: var(--tracking-wider);
|
|
1323
|
+
letter-spacing: var(--tracking-wider);
|
|
1324
|
+
}
|
|
1252
1325
|
.whitespace-nowrap {
|
|
1253
1326
|
white-space: nowrap;
|
|
1254
1327
|
}
|
|
1255
|
-
.text-amber-600 {
|
|
1256
|
-
color: var(--color-amber-600);
|
|
1257
|
-
}
|
|
1258
1328
|
.text-blue-500 {
|
|
1259
1329
|
color: var(--color-blue-500);
|
|
1260
1330
|
}
|
|
@@ -1267,6 +1337,9 @@
|
|
|
1267
1337
|
.text-blue-900 {
|
|
1268
1338
|
color: var(--color-blue-900);
|
|
1269
1339
|
}
|
|
1340
|
+
.text-cyan-600 {
|
|
1341
|
+
color: var(--color-cyan-600);
|
|
1342
|
+
}
|
|
1270
1343
|
.text-danger-400 {
|
|
1271
1344
|
color: var(--color-danger-400);
|
|
1272
1345
|
}
|
|
@@ -1333,6 +1406,9 @@
|
|
|
1333
1406
|
.text-primary-700 {
|
|
1334
1407
|
color: var(--color-primary-700);
|
|
1335
1408
|
}
|
|
1409
|
+
.text-purple-600 {
|
|
1410
|
+
color: var(--color-purple-600);
|
|
1411
|
+
}
|
|
1336
1412
|
.text-red-500 {
|
|
1337
1413
|
color: var(--color-red-500);
|
|
1338
1414
|
}
|
|
@@ -1363,12 +1439,18 @@
|
|
|
1363
1439
|
.text-yellow-500 {
|
|
1364
1440
|
color: var(--color-yellow-500);
|
|
1365
1441
|
}
|
|
1442
|
+
.text-yellow-600 {
|
|
1443
|
+
color: var(--color-yellow-600);
|
|
1444
|
+
}
|
|
1366
1445
|
.text-yellow-700 {
|
|
1367
1446
|
color: var(--color-yellow-700);
|
|
1368
1447
|
}
|
|
1369
1448
|
.text-yellow-800 {
|
|
1370
1449
|
color: var(--color-yellow-800);
|
|
1371
1450
|
}
|
|
1451
|
+
.uppercase {
|
|
1452
|
+
text-transform: uppercase;
|
|
1453
|
+
}
|
|
1372
1454
|
.underline {
|
|
1373
1455
|
text-decoration-line: underline;
|
|
1374
1456
|
}
|
|
@@ -1389,6 +1471,10 @@
|
|
|
1389
1471
|
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1390
1472
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1391
1473
|
}
|
|
1474
|
+
.shadow-md {
|
|
1475
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1476
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1477
|
+
}
|
|
1392
1478
|
.shadow-none {
|
|
1393
1479
|
--tw-shadow: 0 0 #0000;
|
|
1394
1480
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -1495,6 +1581,10 @@
|
|
|
1495
1581
|
--tw-ease: var(--ease-in);
|
|
1496
1582
|
transition-timing-function: var(--ease-in);
|
|
1497
1583
|
}
|
|
1584
|
+
.ease-in-out {
|
|
1585
|
+
--tw-ease: var(--ease-in-out);
|
|
1586
|
+
transition-timing-function: var(--ease-in-out);
|
|
1587
|
+
}
|
|
1498
1588
|
.ease-out {
|
|
1499
1589
|
--tw-ease: var(--ease-out);
|
|
1500
1590
|
transition-timing-function: var(--ease-out);
|
|
@@ -1552,6 +1642,14 @@
|
|
|
1552
1642
|
}
|
|
1553
1643
|
}
|
|
1554
1644
|
}
|
|
1645
|
+
.hover\:border-12 {
|
|
1646
|
+
&:hover {
|
|
1647
|
+
@media (hover: hover) {
|
|
1648
|
+
border-style: var(--tw-border-style);
|
|
1649
|
+
border-width: 12px;
|
|
1650
|
+
}
|
|
1651
|
+
}
|
|
1652
|
+
}
|
|
1555
1653
|
.hover\:border-gray-300 {
|
|
1556
1654
|
&:hover {
|
|
1557
1655
|
@media (hover: hover) {
|
|
@@ -1559,6 +1657,20 @@
|
|
|
1559
1657
|
}
|
|
1560
1658
|
}
|
|
1561
1659
|
}
|
|
1660
|
+
.hover\:bg-blue-500 {
|
|
1661
|
+
&:hover {
|
|
1662
|
+
@media (hover: hover) {
|
|
1663
|
+
background-color: var(--color-blue-500);
|
|
1664
|
+
}
|
|
1665
|
+
}
|
|
1666
|
+
}
|
|
1667
|
+
.hover\:bg-blue-600 {
|
|
1668
|
+
&:hover {
|
|
1669
|
+
@media (hover: hover) {
|
|
1670
|
+
background-color: var(--color-blue-600);
|
|
1671
|
+
}
|
|
1672
|
+
}
|
|
1673
|
+
}
|
|
1562
1674
|
.hover\:bg-blue-700 {
|
|
1563
1675
|
&:hover {
|
|
1564
1676
|
@media (hover: hover) {
|
|
@@ -1608,6 +1720,20 @@
|
|
|
1608
1720
|
}
|
|
1609
1721
|
}
|
|
1610
1722
|
}
|
|
1723
|
+
.hover\:bg-gray-500 {
|
|
1724
|
+
&:hover {
|
|
1725
|
+
@media (hover: hover) {
|
|
1726
|
+
background-color: var(--color-gray-500);
|
|
1727
|
+
}
|
|
1728
|
+
}
|
|
1729
|
+
}
|
|
1730
|
+
.hover\:bg-gray-600 {
|
|
1731
|
+
&:hover {
|
|
1732
|
+
@media (hover: hover) {
|
|
1733
|
+
background-color: var(--color-gray-600);
|
|
1734
|
+
}
|
|
1735
|
+
}
|
|
1736
|
+
}
|
|
1611
1737
|
.hover\:bg-info-50 {
|
|
1612
1738
|
&:hover {
|
|
1613
1739
|
@media (hover: hover) {
|
|
@@ -1748,6 +1874,13 @@
|
|
|
1748
1874
|
}
|
|
1749
1875
|
}
|
|
1750
1876
|
}
|
|
1877
|
+
.hover\:text-white {
|
|
1878
|
+
&:hover {
|
|
1879
|
+
@media (hover: hover) {
|
|
1880
|
+
color: var(--color-white);
|
|
1881
|
+
}
|
|
1882
|
+
}
|
|
1883
|
+
}
|
|
1751
1884
|
.hover\:underline {
|
|
1752
1885
|
&:hover {
|
|
1753
1886
|
@media (hover: hover) {
|
|
@@ -2071,6 +2204,16 @@
|
|
|
2071
2204
|
letter-spacing: var(--tracking-tight);
|
|
2072
2205
|
}
|
|
2073
2206
|
}
|
|
2207
|
+
.sm\:hover\:text-lg {
|
|
2208
|
+
@media (width >= 40rem) {
|
|
2209
|
+
&:hover {
|
|
2210
|
+
@media (hover: hover) {
|
|
2211
|
+
font-size: var(--text-lg);
|
|
2212
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
2213
|
+
}
|
|
2214
|
+
}
|
|
2215
|
+
}
|
|
2216
|
+
}
|
|
2074
2217
|
.md\:col-span-5 {
|
|
2075
2218
|
@media (width >= 48rem) {
|
|
2076
2219
|
grid-column: span 5 / span 5;
|
|
@@ -2091,6 +2234,11 @@
|
|
|
2091
2234
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
2092
2235
|
}
|
|
2093
2236
|
}
|
|
2237
|
+
.md\:grid-cols-3 {
|
|
2238
|
+
@media (width >= 48rem) {
|
|
2239
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
2240
|
+
}
|
|
2241
|
+
}
|
|
2094
2242
|
.md\:grid-cols-4 {
|
|
2095
2243
|
@media (width >= 48rem) {
|
|
2096
2244
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
@@ -2101,6 +2249,12 @@
|
|
|
2101
2249
|
grid-template-columns: repeat(10, minmax(0, 1fr));
|
|
2102
2250
|
}
|
|
2103
2251
|
}
|
|
2252
|
+
.md\:text-3xl {
|
|
2253
|
+
@media (width >= 48rem) {
|
|
2254
|
+
font-size: var(--text-3xl);
|
|
2255
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
2256
|
+
}
|
|
2257
|
+
}
|
|
2104
2258
|
.lg\:block {
|
|
2105
2259
|
@media (width >= 64rem) {
|
|
2106
2260
|
display: block;
|
|
@@ -2131,6 +2285,102 @@
|
|
|
2131
2285
|
padding-inline: calc(var(--spacing) * 8);
|
|
2132
2286
|
}
|
|
2133
2287
|
}
|
|
2288
|
+
.lg\:text-3xl {
|
|
2289
|
+
@media (width >= 64rem) {
|
|
2290
|
+
font-size: var(--text-3xl);
|
|
2291
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
2292
|
+
}
|
|
2293
|
+
}
|
|
2294
|
+
.lg\:text-4xl {
|
|
2295
|
+
@media (width >= 64rem) {
|
|
2296
|
+
font-size: var(--text-4xl);
|
|
2297
|
+
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
.lg\:text-5xl {
|
|
2301
|
+
@media (width >= 64rem) {
|
|
2302
|
+
font-size: var(--text-5xl);
|
|
2303
|
+
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
.lg\:text-base {
|
|
2307
|
+
@media (width >= 64rem) {
|
|
2308
|
+
font-size: var(--text-base);
|
|
2309
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
2310
|
+
}
|
|
2311
|
+
}
|
|
2312
|
+
.lg\:text-lg {
|
|
2313
|
+
@media (width >= 64rem) {
|
|
2314
|
+
font-size: var(--text-lg);
|
|
2315
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
2316
|
+
}
|
|
2317
|
+
}
|
|
2318
|
+
.dark\:divide-gray-700 {
|
|
2319
|
+
@media (prefers-color-scheme: dark) {
|
|
2320
|
+
:where(& > :not(:last-child)) {
|
|
2321
|
+
border-color: var(--color-gray-700);
|
|
2322
|
+
}
|
|
2323
|
+
}
|
|
2324
|
+
}
|
|
2325
|
+
.dark\:bg-blue-900 {
|
|
2326
|
+
@media (prefers-color-scheme: dark) {
|
|
2327
|
+
background-color: var(--color-blue-900);
|
|
2328
|
+
}
|
|
2329
|
+
}
|
|
2330
|
+
.dark\:bg-gray-800 {
|
|
2331
|
+
@media (prefers-color-scheme: dark) {
|
|
2332
|
+
background-color: var(--color-gray-800);
|
|
2333
|
+
}
|
|
2334
|
+
}
|
|
2335
|
+
.dark\:bg-gray-900 {
|
|
2336
|
+
@media (prefers-color-scheme: dark) {
|
|
2337
|
+
background-color: var(--color-gray-900);
|
|
2338
|
+
}
|
|
2339
|
+
}
|
|
2340
|
+
.dark\:bg-green-900 {
|
|
2341
|
+
@media (prefers-color-scheme: dark) {
|
|
2342
|
+
background-color: var(--color-green-900);
|
|
2343
|
+
}
|
|
2344
|
+
}
|
|
2345
|
+
.dark\:bg-red-900 {
|
|
2346
|
+
@media (prefers-color-scheme: dark) {
|
|
2347
|
+
background-color: var(--color-red-900);
|
|
2348
|
+
}
|
|
2349
|
+
}
|
|
2350
|
+
.dark\:text-blue-200 {
|
|
2351
|
+
@media (prefers-color-scheme: dark) {
|
|
2352
|
+
color: var(--color-blue-200);
|
|
2353
|
+
}
|
|
2354
|
+
}
|
|
2355
|
+
.dark\:text-gray-100 {
|
|
2356
|
+
@media (prefers-color-scheme: dark) {
|
|
2357
|
+
color: var(--color-gray-100);
|
|
2358
|
+
}
|
|
2359
|
+
}
|
|
2360
|
+
.dark\:text-green-200 {
|
|
2361
|
+
@media (prefers-color-scheme: dark) {
|
|
2362
|
+
color: var(--color-green-200);
|
|
2363
|
+
}
|
|
2364
|
+
}
|
|
2365
|
+
.dark\:text-red-200 {
|
|
2366
|
+
@media (prefers-color-scheme: dark) {
|
|
2367
|
+
color: var(--color-red-200);
|
|
2368
|
+
}
|
|
2369
|
+
}
|
|
2370
|
+
.dark\:ring-1 {
|
|
2371
|
+
@media (prefers-color-scheme: dark) {
|
|
2372
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
2373
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2374
|
+
}
|
|
2375
|
+
}
|
|
2376
|
+
.dark\:ring-white\/10 {
|
|
2377
|
+
@media (prefers-color-scheme: dark) {
|
|
2378
|
+
--tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
|
|
2379
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
2380
|
+
--tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
|
|
2381
|
+
}
|
|
2382
|
+
}
|
|
2383
|
+
}
|
|
2134
2384
|
}
|
|
2135
2385
|
@property --tw-translate-x {
|
|
2136
2386
|
syntax: "*";
|
|
@@ -2210,6 +2460,10 @@
|
|
|
2210
2460
|
syntax: "*";
|
|
2211
2461
|
inherits: false;
|
|
2212
2462
|
}
|
|
2463
|
+
@property --tw-tracking {
|
|
2464
|
+
syntax: "*";
|
|
2465
|
+
inherits: false;
|
|
2466
|
+
}
|
|
2213
2467
|
@property --tw-shadow {
|
|
2214
2468
|
syntax: "*";
|
|
2215
2469
|
inherits: false;
|
|
@@ -2341,9 +2595,10 @@
|
|
|
2341
2595
|
syntax: "*";
|
|
2342
2596
|
inherits: false;
|
|
2343
2597
|
}
|
|
2344
|
-
@
|
|
2345
|
-
|
|
2346
|
-
|
|
2598
|
+
@keyframes pulse {
|
|
2599
|
+
50% {
|
|
2600
|
+
opacity: 0.5;
|
|
2601
|
+
}
|
|
2347
2602
|
}
|
|
2348
2603
|
@layer properties {
|
|
2349
2604
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
@@ -2365,6 +2620,7 @@
|
|
|
2365
2620
|
--tw-border-style: solid;
|
|
2366
2621
|
--tw-leading: initial;
|
|
2367
2622
|
--tw-font-weight: initial;
|
|
2623
|
+
--tw-tracking: initial;
|
|
2368
2624
|
--tw-shadow: 0 0 #0000;
|
|
2369
2625
|
--tw-shadow-color: initial;
|
|
2370
2626
|
--tw-shadow-alpha: 100%;
|
|
@@ -2395,7 +2651,6 @@
|
|
|
2395
2651
|
--tw-drop-shadow-size: initial;
|
|
2396
2652
|
--tw-duration: initial;
|
|
2397
2653
|
--tw-ease: initial;
|
|
2398
|
-
--tw-tracking: initial;
|
|
2399
2654
|
}
|
|
2400
2655
|
}
|
|
2401
2656
|
}
|