recurrence_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0bee415e6501824704878be6a6acfe7cdc9104e396f66fa5d0b614471c0d9dfb
+  data.tar.gz: 4706be40250b8c0989e1ac2154e605afbe79519a0e61987011a40bb49b06b1c6
+SHA512:
+  metadata.gz: 83c2b16faa7ef0132180e172aa0cd9cd0b3e6e2ab2823bdf8efbf73b0ef1941f8c759355830783e386bd28d86c5805daabcf6583274f327fd66d526b967f7de2
+  data.tar.gz: 2e08ac188d8d9fcdedbdeae3b99471c0b44b2368946aab1d71b9e7ffdd43744356338a954d1f1e2001b56da2b2bafd027523ebf3e71ea8cd8472aba6e54d6fb2

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Katya German
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,208 @@
+# Recurrence UI
+
+**Recurrence UI** is a plug-and-play UI component library for Ruby on Rails that makes it easy to create, edit, and display human-readable recurrence rules for recurring events.
+
+Built on top of [ice_cube](https://github.com/ice-cube-ruby/ice_cube), it provides reusable UI components powered by [ViewComponent](https://viewcomponent.org/) and styled with Tailwind CSS.
+
+[![Gem Version](https://badge.fury.io/rb/recurrence_ui.svg)](https://badge.fury.io/rb/recurrence_ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- **Form integration:** Ready-to-use components for adding recurrence rule editors to model creation and editing forms.
+- **Human-readable descriptions:** Converts `ice_cube` recurrence rules into readable descriptions.
+- **Built-in internationalization:** Supports English (`en`), Russian (`ru`), Japanese (`ja`), Belarusian (`be`), and Ukrainian (`uk`).
+- **Extensible translations:** Add new locales using standard YAML translation files and configuration.
+- **Flexible time zones and week starts:** Configure time zones and the first day of the week. Values can be supplied through URL parameters, session data, user preferences, or application settings, depending on your integration.
+- **Customizable styles:** Adjust the color palette using CSS custom properties (design tokens).
+- **Light and dark themes:** Customize the appearance to match your application.
+- **Flexible model attribute mapping:** Use custom database column names for recurrence rules, time zones, durations, and event start and end times.
+
+## 📦 Requirements
+
+Recurrence UI depends on the following components:
+
+- **Ruby on Rails** >= 7.0
+- **[ice_cube](https://github.com/ice-cube-ruby/ice_cube)** ~> 0.16 — recurrence rule management.
+- **[ViewComponent](https://viewcomponent.org/)** >= 2.0 — reusable, encapsulated UI components.
+- **Tailwind CSS** — styling, integrated through `tailwindcss-rails` or your host application's Tailwind CSS setup.
+
+## 🚀 Installation
+
+Add the gem to your application's `Gemfile`:
+
+```ruby
+gem "recurrence_ui"
+```
+
+Then install the dependencies:
+
+```bash
+bundle install
+```
+
+### Importing styles
+
+For Tailwind CSS v4, add the following imports to your application's stylesheet, such as `app/assets/stylesheets/application.tailwind.css`:
+
+```css
+@import "tailwindcss";
+@import "recurrence_ui/application.css";
+```
+
+Make sure the stylesheet is included in your application's asset pipeline and that your Tailwind CSS setup is compatible with the gem's styles.
+
+## ⚙️ Configuration
+
+Create an initializer at `config/initializers/recurrence_ui.rb` to configure the default settings:
+
+```ruby
+RecurrenceUi.configure do |config|
+  config.locale = :en
+  config.time_zone = "UTC"
+  config.week_start = 1
+end
+```
+
+Available settings:
+
+- `locale` — the default interface locale, such as `:en`, `:ru`, `:uk`, `:be`, or `:ja`.
+- `time_zone` — the default time zone.
+- `week_start` — the first day of the week: `0` for Sunday or `1` for Monday.
+
+The values above are examples. Adjust them to match your application's requirements.
+
+## 🛠 Model Integration
+
+Include `RecurrenceUi::HasRecurrence` in your model and configure the mapping between the gem's attributes and your database columns.
+
+For example:
+
+```ruby
+class Event < ApplicationRecord
+  include RecurrenceUi::HasRecurrence
+
+  has_recurrence rules:      :recurring_rules,
+                 start_time: :start_at,
+                 end_time:   :end_at,
+                 time_zone:  :time_zone
+                 duration:   :duration
+end
+```
+
+### Using custom attribute names
+
+You can configure different attribute names for different models:
+
+```ruby
+class Task < ApplicationRecord
+  include RecurrenceUi::HasRecurrence
+
+  has_recurrence rules:      :recurrence_data,
+                 start_time: :due_date
+end
+```
+
+Use the attribute names that match your application's database schema and the attributes supported by your model integration.
+
+## 🎨 View Integration
+
+Render the recurrence editor inside a Rails form using `RecurrenceUi::FormContainerComponent`:
+
+```erb
+<%= form_with model: @event do |form| %>
+  <%= render RecurrenceUi::FormContainerComponent.new(
+        form: form,
+        record: @event,
+        locale: params[:locale],
+        time_zone: params[:time_zone],
+        week_start: params[:week_start]
+      ) %>
+
+  <%= form.submit "Save" %>
+<% end %>
+```
+
+The `locale`, `time_zone`, and `week_start` options can be supplied dynamically when needed. If omitted, the component can use the applicable defaults provided by your integration.
+
+## 🌍 Internationalization
+
+Recurrence UI currently supports the following locales:
+
+- English (`en`)
+- Russian (`ru`)
+- Ukrainian (`uk`)
+- Belarusian (`be`)
+- Japanese (`ja`)
+
+### Adding a new locale
+
+You can extend the interface with additional translations.
+
+For example, to add German (`de`):
+
+1. Create a translation file named `config/locales/recurrence_ui.de.yml` in your application.
+2. Add the required translation keys, including the relevant labels, actions, duration descriptions, and other interface strings.
+3. Configure the new locale or pass it dynamically through your application's request parameters.
+
+Make sure the translation file follows the structure expected by the gem's existing locale files.
+
+## 🌓 Themes and Customization
+
+Recurrence UI uses CSS custom properties (design tokens) to control its color palette.
+
+You can override these properties in your application's stylesheet to match your brand or customize the appearance of the interface.
+
+For example:
+
+```css
+:root {
+  --rui-primary-bg: #2563eb;
+}
+
+/* Dark theme */
+.dark,
+[data-rui-theme="dark"] {
+  --rui-bg-main: #1f2937;
+  --rui-text-main: #f9fafb;
+}
+```
+
+Use the CSS variables supported by the gem to customize the interface. The example above illustrates the approach; available tokens and theme selectors depend on the styles provided by your version of Recurrence UI.
+
+## 🤝 Contributing
+
+Contributions, bug reports, and feature requests are welcome!
+
+To get started:
+
+1. Clone the repository.
+2. Install the dependencies:
+
+   ```bash
+   bundle install
+   ```
+
+3. Run the test suite:
+
+   ```bash
+   bundle exec rake test
+   ```
+
+4. Create a branch, make your changes, and open a pull request.
+
+Please make sure your changes are covered by tests where appropriate.
+## 🧪 Testing
+
+*Note: The test suite is currently under active development. Contributions are very welcome!*
+
+### Planned Test Suite
+
+- [ ] **Models & Concerns (`HasRecurrence`):** Test attribute mapping, JSON parsing, virtual form attributes, and `IceCube::Schedule` generation.
+- [ ] **Formatter Service (`RecurrenceFormatterService`):** Validate human-readable summaries, smart date/time deduplication, and month declensions.
+- [ ] **Internationalization (I18n):** Automated checks to ensure all locales (`en`, `ru`, `uk`, `be`, `ja`) share a consistent translation key structure.
+- [ ] **ViewComponents:** Test proper rendering and Stimulus data-attribute bindings for form components.
+
+## 📄 License
+
+Recurrence UI is available under the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/recurrence_ui_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/recurrence_ui .css

data/app/assets/stylesheets/recurrence_ui/application.css

@@ -0,0 +1,15 @@
+/*
+ * RecurrenceUI CSS Manifest
+ * This file brings together design tokens and component styles.
+ */
+
+/* 1. Tell Tailwind CSS v4 to index classes used inside the RecurrenceUI gem files */
+@source "../../views/recurrence_ui/**/*.html.erb";
+@source "../../components/recurrence_ui/**/*.html.erb";
+@source "../../views/**/*.html.erb";
+
+/* 2. Import CSS variables (theme tokens) */
+@import "./tokens.css";
+
+/* 3. Import component styles (UI classes) */
+@import "./components.css";

data/app/assets/stylesheets/recurrence_ui/components.css

@@ -0,0 +1,295 @@
+.recurrence-ui-hidden{
+  display: none !important;
+}
+
+@layer components {
+  /* Main Container */
+  .rui-container {
+    background-color: var(--rui-bg-main);
+    color: var(--rui-text-main);
+    @apply space-y-3 w-full rounded-lg p-4 transition-colors;
+  }
+
+  /* Universal Input & Select Field Styles */
+  .rui-input,
+  .rui-select,
+  .rui-textarea {
+    background-color: var(--rui-input-bg);
+    color: var(--rui-text-main);
+    border-color: var(--rui-border-color);
+    @apply text-sm rounded-md border
+           shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 
+           disabled:opacity-50 px-2.5 py-1.5 transition-colors;
+  }
+
+  .rui-input:disabled,
+  .rui-select:disabled,
+  .rui-textarea:disabled {
+    background-color: var(--rui-input-disabled-bg);
+    color: var(--rui-text-muted) !important;
+    opacity: 0.6;
+  }
+/* Подписи возле полей ввода (день, час, мин) */
+.rui-duration-unit {
+  color: var(--rui-text-muted);
+  @apply text-sm;
+}
+
+  .rui-input-sm {
+    @apply text-xs px-2 py-1 rounded;
+  }
+
+  /* Labels and Captions */
+  .rui-label {
+    color: var(--rui-text-main);
+    @apply block font-semibold tracking-wider mb-1;
+  }
+  .rui-inline-label {
+    color: var(--rui-text-main);
+    @apply text-sm font-medium;
+  }
+
+  /* Primary Buttons */
+  .rui-btn-primary {
+    background-color: var(--rui-primary-bg);
+    color: var(--rui-primary-text);
+    @apply px-3 py-1.5 text-xs font-medium rounded-md shadow-sm transition-colors;
+  }
+
+.rui-btn-primary:hover:not(:disabled) {
+  background-color: var(--rui-primary-hover);
+}
+
+/* Condition, when date is not yet entered */
+.rui-btn-primary:disabled {
+  background-color: var(--rui-secondary-bg);
+  color: var(--rui-text-muted);
+  border: 1px solid var(--rui-border-color);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+
+  .rui-btn-primary:active:not(:disabled) {
+    background-color: var(--rui-primary-active);
+  }
+
+  /* Secondary Buttons */
+  .rui-btn-secondary {
+    background-color: var(--rui-secondary-bg);
+    color: var(--rui-secondary-text);
+    border-color: var(--rui-secondary-border);
+    @apply px-3 py-1.5 text-xs font-medium border rounded-lg transition-colors;
+  }
+
+  .rui-btn-secondary:hover {
+    background-color: var(--rui-secondary-hover);
+  }
+
+  /* Icon Buttons */
+  .rui-btn-icon {
+    color: var(--rui-text-muted);
+    @apply p-1 rounded transition-colors;
+  }
+
+  .rui-btn-icon:hover {
+    color: var(--rui-text-main);
+  }
+
+  /* Toggle Day Button Grid Item */
+  .rui-day-btn {
+    background-color: var(--rui-bg-main);
+    color: var(--rui-secondary-text);
+    border-color: var(--rui-border-color);
+    @apply w-full py-1.5 rounded-md text-xs font-medium border transition-all;
+  }
+
+  .rui-day-btn:hover {
+    background-color: var(--rui-hover-bg-soft);
+  }
+
+  .rui-day-btn[data-selected='true'] {
+    background-color: var(--rui-primary-bg);
+    color: var(--rui-primary-text);
+    border-color: var(--rui-primary-bg);
+  }
+
+  /* Section Dividers */
+  .rui-divider {
+    border-color: var(--rui-border-color);
+    @apply border-t my-2;
+  }
+/* Large header for the editor */
+  .rui-header-title {
+    color: var(--rui-text-main);
+    @apply text-base font-semibold tracking-tight;
+  }
+
+  /* Panel header for editing */
+  .rui-panel-header {
+    border-bottom: 1px solid var(--rui-border-color);
+    @apply flex items-center justify-between pb-2 mb-3;
+  }
+  /* Header for the editing panel (title on the left, button on the right) */
+  .rui-panel-header {
+    border-bottom: 1px solid var(--rui-border-color);
+    @apply flex items-center justify-between pb-2 mb-3;
+  }
+
+  /* Интерактивная ссылка-действие (например, "+ Добавить правило") */
+  .rui-link-action {
+    color: var(--rui-primary-bg);
+    cursor: pointer;
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-underline-offset: 4px;
+    @apply inline-flex items-center text-xs font-medium gap-1 transition-colors select-none;
+  }
+
+  .rui-link-action:hover {
+    color: var(--rui-primary-hover);
+    text-decoration-style: solid;
+  }
+  .rui-accordion-link {
+    color: var(--rui-primary-bg);
+    cursor: pointer;
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+    text-underline-offset: 4px;
+    @apply text-sm font-medium transition-colors select-none;
+  }
+
+  .rui-accordion-link:hover {
+    color: var(--rui-primary-hover);
+  }
+
+  /* Rule Card Body Container */
+  .rui-card-body {
+    border-left: 2px solid var(--rui-primary-bg);
+    background-color: var(--rui-secondary-bg);
+    @apply mt-1 pt-2 pb-2 pl-3 space-y-2 rounded-r-md transition-colors;
+  }
+
+  /* Danger / Remove Action Button */
+  .rui-btn-remove {
+    color: var(--rui-text-muted);
+    @apply font-normal text-xs px-1 rounded transition-colors;
+  }
+
+  .rui-btn-remove:hover {
+    color: #dc2626; /* red-600 */
+    background-color: var(--rui-hover-bg-soft);
+  }
+.rui-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+  border: 1px solid var(--rui-chip-rdate-border, #a7f3d0);
+  background-color: var(--rui-chip-rdate-bg, #ecfdf5);
+  color: var(--rui-chip-rdate-text, #047857);
+}
+
+.rui-chip__remove-btn {
+  padding-right: 0.125rem;
+  transition: opacity 150ms ease-in-out;
+}
+
+.rui-chip__remove-btn:hover {
+  opacity: 0.75;
+}
+.rui-chip--exdate {
+  border: 1px solid var(--rui-chip-exdate-border, #fecaca);
+  background-color: var(--rui-chip-exdate-bg, #fef2f2);
+  color: var(--rui-chip-exdate-text, #b91c1c);
+}
+
+/* Interactive Summary Link & Rule Card Header Link */
+  .rui-summary-link {
+    @apply text-sm font-medium text-blue-600 dark:text-blue-400 
+           hover:text-blue-800 dark:hover:text-blue-300 
+           underline underline-offset-4 decoration-dashed 
+           decoration-blue-400 hover:decoration-blue-600 
+           dark:decoration-blue-500 dark:hover:decoration-blue-300 
+           transition-colors cursor-pointer;
+  }
+
+  /* Edit Icon wrapper */
+  .rui-summary-icon {
+    @apply opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-gray-400 dark:text-gray-500;
+  }
+  /* Rule Accordion Card Container */
+  .rui-card-container {
+    border: 1px solid var(--rui-border-color);
+    background-color: var(--rui-secondary-bg);
+    @apply rounded-md w-full my-1 transition-colors overflow-hidden;
+  }
+
+  /* Rule Header (Main Clickable Area & Border Header) */
+  .rui-card-header {
+    background-color: var(--rui-secondary-bg);
+    color: var(--rui-text-main);
+    @apply flex items-start justify-between w-full p-2.5 text-xs font-medium 
+           cursor-pointer select-none transition-colors;
+  }
+
+  .rui-card-header:hover {
+    background-color: var(--rui-hover-bg-soft);
+  }
+
+  /* Full Rule Summary Text (Text wraps naturally without truncating) */
+  .rui-accordion-link {
+    color: var(--rui-primary-bg);
+    @apply text-xs font-medium cursor-pointer leading-relaxed transition-colors select-none whitespace-normal;
+  }
+
+  .rui-accordion-link:hover {
+    color: var(--rui-primary-hover);
+  }
+
+  /* Expanded Rule Card Body (Inside the same outer container) */
+  .rui-card-body {
+    background-color: var(--rui-bg-main);
+    border-top: 1px solid var(--rui-border-color);
+    @apply p-3 space-y-3 transition-colors;
+  }
+
+  /* Delete Rule Action Button (Positioned on the Right Top) */
+  .rui-btn-remove-card {
+    color: var(--rui-text-muted);
+    @apply text-xs px-1.5 py-0.5 rounded font-normal transition-colors ml-2 cursor-pointer;
+  }
+
+  .rui-btn-remove-card:hover {
+    color: #dc2626; /* red-600 */
+    background-color: var(--rui-hover-bg-soft);
+  }
+  /* Базовый класс мета-информации */
+  .rui-meta-info {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    font-style: italic;
+    transition: color 0.2s ease;
+  }
+
+  /* 1. Главная строка правил */
+  .rui-meta-info--main {
+     color: var(--rui-rule-main-text);  
+  }
+
+  /* 2. Блок исключений (Exdates) */
+  .rui-meta-info--exceptions {
+    color: var(--rui-rule-exception-text); /* Исключения (например, красноватый) */
+  }
+
+  /* 3. Блок дополнительных дат (Rdates) */
+  .rui-meta-info--rdates {
+    color: var(--rui-rule-rdate-text); /* Доп. даты (например, изумрудный) */
+  }
+
+}

data/app/assets/stylesheets/recurrence_ui/tokens.css

@@ -0,0 +1,102 @@
+/* 1. Значения по умолчанию (Светлая тема) */
+:root {
+  --rui-bg-main: #ffffff;
+  --rui-text-main: #111827;       /* gray-900 */
+  --rui-text-muted: #6b7280;      /* gray-500 */
+  --rui-border-color: #d1d5db;    /* gray-300 */
+  
+  --rui-input-bg: #ffffff;
+  --rui-input-disabled-bg: #f3f4f6;
+
+  /* Primary (Акцентный цвет: кнопки, выбранные дни) */
+  --rui-primary-bg: #2563eb;      /* blue-600 */
+  --rui-primary-hover: #1d4ed8;   /* blue-700 */
+  --rui-primary-active: #1e40af;  /* blue-800 */
+  --rui-primary-text: #ffffff;
+
+  /* Secondary (Второстепенные кнопки) */
+  --rui-secondary-bg: #f3f4f6;    /* gray-100 */
+  --rui-secondary-hover: #e5e7eb; /* gray-200 */
+  --rui-secondary-text: #374151;  /* gray-700 */
+  --rui-secondary-border: #d1d5db;
+
+  /* Hover эффекты */
+  --rui-hover-bg-soft: #eff6ff;   /* blue-50 */
+
+  --rui-rule-main-text: #1e293b;
+  --rui-rule-exception-text: #b91c1c;  /* red-700 */
+  --rui-rule-rdate-text: #047857;      /* emerald-700 */
+}
+
+/* 2. Автоматический тёмный режим (системный / Firefox DevTools) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-rui-theme="light"]) {
+    --rui-bg-main: #1f2937;       /* ИСПРАВЛЕНО: gray-800 (было #eff6ff) */
+    --rui-text-main: #f9fafb;      /* gray-100 */
+    --rui-text-muted: #9ca3af;     /* gray-400 */
+    --rui-border-color: #374151;   /* gray-700 */
+    
+    --rui-input-bg: #1f2937;
+    --rui-input-disabled-bg: #111827;
+
+    --rui-primary-bg: #3b82f6;     /* blue-500 */
+    --rui-primary-hover: #2563eb;
+    
+    --rui-secondary-bg: #1f2937;
+    --rui-secondary-hover: #374151;
+    --rui-secondary-text: #e5e7eb;
+    --rui-secondary-border: #4b5563;
+
+    --rui-hover-bg-soft: #374151;  /* gray-700 */
+    --rui-rule-main-text: #f8fafc;       /* slate-50 */
+    --rui-rule-exception-text: #fca5a5;  /* red-300 (мягче для глаза на темном) */
+    --rui-rule-rdate-text: #6ee7b7;      /* emerald-300 */
+  }
+}
+
+/* 3. Ручной тёмный режим (по классу .dark на <html> или атрибуту data-rui-theme="dark") */
+.dark:not([data-rui-theme="light"]), 
+[data-rui-theme="dark"] {
+  --rui-bg-main: #1f2937;
+  --rui-text-main: #f9fafb;
+  --rui-text-muted: #9ca3af;
+  --rui-border-color: #374151;
+  
+  --rui-input-bg: #1f2937;
+  --rui-input-disabled-bg: #111827;
+
+  --rui-primary-bg: #3b82f6;
+  --rui-primary-hover: #2563eb;
+  
+  --rui-secondary-bg: #1f2937;
+  --rui-secondary-hover: #374151;
+  --rui-secondary-text: #e5e7eb;
+  --rui-secondary-border: #4b5563;
+
+  --rui-hover-bg-soft: #374151;
+  --rui-rule-main-text: #f8fafc;       /* slate-50 */
+  --rui-rule-exception-text: #fca5a5;  /* red-300 (мягче для глаза на темном) */
+  --rui-rule-rdate-text: #6ee7b7;      /* emerald-300 */
+}
+
+/* 4. Принудительный режим "Только светлая тема" (высший приоритет) */
+[data-rui-theme="light"] {
+  --rui-bg-main: #ffffff;
+  --rui-text-main: #111827;
+  --rui-text-muted: #6b7280;
+  --rui-border-color: #d1d5db;
+  --rui-input-bg: #ffffff;
+  --rui-input-disabled-bg: #f3f4f6;
+  --rui-primary-bg: #2563eb;
+  --rui-primary-hover: #1d4ed8;
+  --rui-primary-active: #1e40af;
+  --rui-primary-text: #ffffff;
+  --rui-secondary-bg: #f3f4f6;
+  --rui-secondary-hover: #e5e7eb;
+  --rui-secondary-text: #374151;
+  --rui-secondary-border: #d1d5db;
+  --rui-hover-bg-soft: #eff6ff;
+  --rui-rule-main-text: #1e293b;
+  --rui-rule-exception-text: #b91c1c;
+  --rui-rule-rdate-text: #047857;
+}