ariadne_view_components 0.0.96.1 → 0.0.96.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +6 -0
  3. data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
  4. data/app/assets/stylesheets/ariadne_view_components.css +1 -1
  5. data/app/assets/stylesheets/ariadne_view_components.css.br +0 -0
  6. data/app/assets/stylesheets/ariadne_view_components.css.gz +0 -0
  7. data/app/components/ariadne/form/base_input_component.rb +1 -1
  8. data/app/components/ariadne/form/label_helper.rb +2 -1
  9. data/app/components/ariadne/layout/sidebar/component.rb +12 -3
  10. data/app/components/ariadne/ui/avatar/component.html.erb +1 -1
  11. data/app/components/ariadne/ui/avatar/component.rb +14 -6
  12. data/app/components/ariadne/ui/badge/component.rb +21 -22
  13. data/app/components/ariadne/ui/button/component.rb +7 -4
  14. data/app/components/ariadne/ui/dialog/component.rb +1 -1
  15. data/app/components/ariadne/ui/popover/component.rb +1 -1
  16. data/app/components/ariadne/ui/sidebar/component.rb +4 -14
  17. data/app/components/ariadne/ui/sidebar/content/component.html.erb +4 -5
  18. data/app/components/ariadne/ui/sidebar/content/component.rb +7 -17
  19. data/app/components/ariadne/ui/sidebar/footer/component.rb +3 -2
  20. data/app/components/ariadne/ui/sidebar/group/component.html.erb +3 -2
  21. data/app/components/ariadne/ui/sidebar/group/component.rb +4 -10
  22. data/app/components/ariadne/ui/sidebar/header/component.rb +3 -3
  23. data/app/components/ariadne/ui/sidebar/item/component.html.erb +19 -23
  24. data/app/components/ariadne/ui/sidebar/item/component.rb +15 -18
  25. data/app/components/ariadne/ui/table/component.rb +12 -0
  26. data/app/components/ariadne/ui/table/row/component.rb +3 -3
  27. data/app/components/ariadne/ui/typography/component.rb +7 -1
  28. data/app/frontend/stylesheets/theme.css +110 -96
  29. data/app/lib/ariadne/view_component/html_attrs.rb +1 -1
  30. data/lib/ariadne/view_components/version.rb +1 -1
  31. data/lib/ariadne/yard/lookbook_docs_helper.rb +0 -2
  32. metadata +2 -2
data/app/frontend/stylesheets/theme.css CHANGED
@@ -1,117 +1,131 @@
1
1
  [data-ariadne-color-mode] {
2
- background-color: hsl(var(--background));
3
- color: hsl(var(--foreground));
2
+ background-color: var(--background);
3
+ color: var(--foreground);
4
4
  }
5
5
 
6
6
  * {
7
- border-color: hsl(var(--border));
7
+ border-color: var(--border);
8
8
  }
9
9
 
10
- @theme inline {
11
- /* Base colors */
12
- --color-background: var(--theme-color-background);
13
- --color-foreground: var(--theme-color-foreground);
14
- --color-border: var(--theme-color-border);
15
- --color-input: var(--theme-color-input);
16
- --color-ring: var(--theme-color-ring);
10
+ @layer base {
11
+ :root {
12
+ /* Base colors */
13
+ --background: var(--ariadne-color-white);
14
+ --foreground: var(--ariadne-color-violet-950);
15
+ --border: var(--ariadne-color-violet-100);
16
+ --input: var(--ariadne-color-violet-100);
17
+ --ring: var(--ariadne-color-violet-500);
18
+ --radius: 0.5rem;
17
19
 
18
- /* Component colors */
19
- --color-muted: var(--theme-color-muted);
20
- --color-muted-foreground: var(--theme-color-muted-foreground);
21
- --color-popover: var(--theme-color-popover);
22
- --color-popover-foreground: var(--theme-color-popover-foreground);
23
- --color-card: var(--theme-color-card);
24
- --color-card-foreground: var(--theme-color-card-foreground);
20
+ /* Component colors */
21
+ --card: var(--ariadne-color-white);
22
+ --card-foreground: var(--ariadne-color-violet-950);
23
+ --popover: var(--ariadne-color-white);
24
+ --popover-foreground: var(--ariadne-color-violet-950);
25
+ --muted: var(--ariadne-color-violet-50);
26
+ --muted-foreground: var(--ariadne-color-violet-600);
25
27
 
26
- /* Semantic colors */
27
- --color-primary: var(--theme-color-primary);
28
- --color-primary-foreground: var(--theme-color-primary-foreground);
29
- --color-secondary: var(--theme-color-secondary);
30
- --color-secondary-foreground: var(--theme-color-secondary-foreground);
31
- --color-accent: var(--theme-color-accent);
32
- --color-accent-foreground: var(--theme-color-accent-foreground);
33
- --color-danger: var(--theme-color-danger);
34
- --color-danger-foreground: var(--theme-color-danger-foreground);
35
- --color-warning: var(--theme-color-warning);
36
- --color-warning-foreground: var(--theme-color-warning-foreground);
37
- --color-success: var(--theme-color-success);
38
- --color-success-foreground: var(--theme-color-success-foreground);
39
- --color-info: var(--theme-color-info);
40
- --color-info-foreground: var(--theme-color-info-foreground);
41
- }
42
-
43
- [data-ariadne-light-theme='light'] {
44
- /* Base colors */
45
- --theme-color-background: hsl(0 0% 100%);
46
- --theme-color-foreground: hsl(240 10% 3.9%);
47
- --theme-color-border: hsl(240 5.9% 90%);
48
- --theme-color-input: hsl(240 5.9% 90%);
49
- --theme-color-ring: hsl(240 5.9% 10%);
28
+ /* Semantic colors */
29
+ --primary: var(--ariadne-color-violet-500);
30
+ --primary-foreground: var(--ariadne-color-violet-50);
31
+ --secondary: var(--ariadne-color-violet-100);
32
+ --secondary-foreground: var(--ariadne-color-violet-950);
33
+ --accent: var(--ariadne-color-violet-100);
34
+ --accent-foreground: var(--ariadne-color-violet-950);
35
+ --destructive: var(--ariadne-color-red-500);
36
+ --destructive-foreground: var(--ariadne-color-red-50);
37
+ --success: var(--ariadne-color-green-600);
38
+ --success-foreground: var(--ariadne-color-green-50);
39
+ --warning: var(--ariadne-color-amber-500);
40
+ --warning-foreground: var(--ariadne-color-amber-50);
41
+ --info: var(--ariadne-color-blue-500);
42
+ --info-foreground: var(--ariadne-color-blue-50);
43
+
44
+ /* Dropdown menu specific variables */
45
+ --dropdown-menu-bg: var(--popover);
46
+ --dropdown-menu-border: var(--border);
47
+ --dropdown-menu-text: var(--popover-foreground);
48
+ --dropdown-menu-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
49
+ --dropdown-menu-hover-bg: var(--accent);
50
+ --dropdown-menu-hover-text: var(--accent-foreground);
51
+ --dropdown-menu-muted-text: var(--muted-foreground);
50
52
 
51
- /* Component colors */
52
- --theme-color-muted: hsl(240 4.8% 95.9%);
53
- --theme-color-muted-foreground: hsl(240 3.8% 46.1%);
54
- --theme-color-popover: hsl(0 0% 100%);
55
- --theme-color-popover-foreground: hsl(240 10% 3.9%);
56
- --theme-color-card: hsl(0 0% 100%);
57
- --theme-color-card-foreground: hsl(240 10% 3.9%);
53
+ /* Sidebar specific variables */
54
+ --sidebar-background: var(--ariadne-color-violet-100);
55
+ --sidebar-foreground: var(--ariadne-color-violet-900);
56
+ --sidebar-muted: var(--ariadne-color-violet-200);
57
+ --sidebar-muted-foreground: var(--ariadne-color-violet-700);
58
+ --sidebar-primary: var(--ariadne-color-violet-500);
59
+ --sidebar-primary-foreground: var(--ariadne-color-violet-50);
60
+ --sidebar-accent: var(--ariadne-color-violet-200);
61
+ --sidebar-accent-foreground: var(--ariadne-color-violet-900);
62
+ --sidebar-border: var(--ariadne-color-violet-200);
63
+ --sidebar-ring: var(--ariadne-color-violet-500);
64
+ --sidebar-primary-hover: var(--ariadne-color-violet-200);
65
+ }
58
66
 
59
- /* Semantic colors */
60
- --theme-color-primary: hsl(262.76 30% 36%);
61
- --theme-color-primary-foreground: hsl(227.98 6% 99%);
62
- --theme-color-secondary: hsl(240 4.8% 95.9%);
63
- --theme-color-secondary-foreground: hsl(240 5.9% 10%);
64
- --theme-color-accent: hsl(240 4.8% 95.9%);
65
- --theme-color-accent-foreground: hsl(240 5.9% 10%);
66
- --theme-color-danger: hsl(0 84.2% 60.2%);
67
- --theme-color-danger-foreground: hsl(0 0% 98%);
68
- --theme-color-warning: hsl(43 100% 42%);
69
- --theme-color-warning-foreground: hsl(210 40% 98%);
70
- --theme-color-success: hsl(93 85% 32%);
71
- --theme-color-success-foreground: hsl(0 0% 100%);
72
- --theme-color-info: hsl(211 100% 50%);
73
- --theme-color-info-foreground: hsl(199 89% 48%);
74
- }
67
+ [data-ariadne-color-mode='dark'] {
68
+ /* Base colors - Main content area */
69
+ --background: var(--ariadne-color-violet-900);
70
+ --foreground: var(--ariadne-color-violet-200);
71
+ --border: var(--ariadne-color-violet-800);
72
+ --input: var(--ariadne-color-violet-800);
73
+ --ring: var(--ariadne-color-violet-500);
75
74
 
76
- [data-ariadne-dark-theme='dark'] {
77
- /* Base colors */
78
- --theme-color-background: hsl(240 10% 3.9%);
79
- --theme-color-foreground: hsl(0 0% 98%);
80
- --theme-color-border: hsl(240 3.7% 15.9%);
81
- --theme-color-input: hsl(240 3.7% 15.9%);
82
- --theme-color-ring: hsl(240 4.9% 83.9%);
75
+ /* Component colors */
76
+ --card: var(--ariadne-color-violet-900);
77
+ --card-foreground: var(--ariadne-color-violet-200);
78
+ --popover: var(--ariadne-color-violet-900);
79
+ --popover-foreground: var(--ariadne-color-violet-200);
80
+ --muted: var(--ariadne-color-violet-800);
81
+ --muted-foreground: var(--ariadne-color-violet-400);
83
82
 
84
- /* Component colors */
85
- --theme-color-muted: hsl(240 3.7% 15.9%);
86
- --theme-color-muted-foreground: hsl(240 5% 64.9%);
87
- --theme-color-popover: hsl(240 10% 3.9%);
88
- --theme-color-popover-foreground: hsl(0 0% 98%);
89
- --theme-color-card: hsl(240 10% 3.9%);
90
- --theme-color-card-foreground: hsl(0 0% 98%);
83
+ /* Semantic colors */
84
+ --primary: var(--ariadne-color-violet-400);
85
+ --primary-foreground: var(--ariadne-color-violet-50);
86
+ --secondary: var(--ariadne-color-violet-800);
87
+ --secondary-foreground: var(--ariadne-color-violet-200);
88
+ --accent: var(--ariadne-color-violet-800);
89
+ --accent-foreground: var(--ariadne-color-violet-200);
90
+ --destructive: var(--ariadne-color-red-600);
91
+ --destructive-foreground: var(--ariadne-color-red-50);
92
+ --success: var(--ariadne-color-green-500);
93
+ --success-foreground: var(--ariadne-color-green-50);
94
+ --warning: var(--ariadne-color-amber-600);
95
+ --warning-foreground: var(--ariadne-color-amber-50);
96
+ --info: var(--ariadne-color-blue-600);
97
+ --info-foreground: var(--ariadne-color-blue-50);
98
+
99
+ /* Dropdown menu specific variables */
100
+ --dropdown-menu-bg: var(--popover);
101
+ --dropdown-menu-border: var(--border);
102
+ --dropdown-menu-text: var(--popover-foreground);
103
+ --dropdown-menu-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
104
+ --dropdown-menu-hover-bg: var(--accent);
105
+ --dropdown-menu-hover-text: var(--accent-foreground);
106
+ --dropdown-menu-muted-text: var(--muted-foreground);
91
107
 
92
- /* Semantic colors */
93
- --theme-color-primary: hsl(259.98 94% 88%);
94
- --theme-color-primary-foreground: hsl(227.98 6% 99%);
95
- --theme-color-secondary: hsl(240 3.7% 15.9%);
96
- --theme-color-secondary-foreground: hsl(0 0% 98%);
97
- --theme-color-accent: hsl(240 3.7% 15.9%);
98
- --theme-color-accent-foreground: hsl(0 0% 98%);
99
- --theme-color-danger: hsl(0 62.8% 30.6%);
100
- --theme-color-danger-foreground: hsl(0 0% 98%);
101
- --theme-color-warning: hsl(43 100% 42%);
102
- --theme-color-warning-foreground: hsl(210 40% 98%);
103
- --theme-color-success: hsl(93 85% 32%);
104
- --theme-color-success-foreground: hsl(0 0% 100%);
105
- --theme-color-info: hsl(217 91% 60%);
106
- --theme-color-info-foreground: hsl(0 0% 100%);
108
+ --sidebar-background: var(--ariadne-color-violet-950);
109
+ --sidebar-foreground: var(--ariadne-color-violet-200);
110
+ --sidebar-muted: var(--ariadne-color-violet-900);
111
+ --sidebar-muted-foreground: var(--ariadne-color-violet-400);
112
+ --sidebar-primary: var(--ariadne-color-violet-300);
113
+ --sidebar-primary-foreground: var(--ariadne-color-violet-950);
114
+ --sidebar-accent: var(--ariadne-color-violet-800);
115
+ --sidebar-accent-foreground: var(--ariadne-color-violet-200);
116
+ --sidebar-border: var(--ariadne-color-violet-800);
117
+ --sidebar-ring: var(--ariadne-color-violet-400);
118
+ --sidebar-primary-hover: var(--ariadne-color-violet-700);
119
+ }
107
120
  }
108
121
 
109
122
  /* Font families */
110
123
  :root {
111
124
  --font-fallback: system-ui;
112
- --font-mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
113
- monospace;
114
- --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
125
+ --font-mono:
126
+ 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
127
+ --font-sans:
128
+ 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
115
129
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
116
130
  'Noto Color Emoji';
117
131
  }
data/app/lib/ariadne/view_component/html_attrs.rb CHANGED
@@ -12,7 +12,7 @@ module Ariadne
12
12
 
13
13
  def to_html(nested: false)
14
14
  # TODO: implement + change usage by @tag nested-attributes
15
- tag_options(self)&.html_safe # rubocop:disable Rails/OutputSafety
15
+ tag_options(self)&.html_safe
16
16
  end
17
17
  private def tag_options(...) = TAG_OPTIONS.bind_call(TAG_BUILDER, ...)
18
18
  end
data/lib/ariadne/view_components/version.rb CHANGED
@@ -3,6 +3,6 @@
3
3
  # :nocov:
4
4
  module Ariadne
5
5
  module ViewComponents
6
- VERSION = "0.0.96.1"
6
+ VERSION = "0.0.96.2"
7
7
  end
8
8
  end
data/lib/ariadne/yard/lookbook_docs_helper.rb CHANGED
@@ -22,9 +22,7 @@ module Ariadne
22
22
  if respond_to?(:page_path)
23
23
  link_to(page.docs.short_name, page_path(page.page_id.to_sym.inspect))
24
24
  else
25
- # rubocop:disable Rails/OutputSafety
26
25
  "[#{page.docs.short_name}](<%= page_path(#{page.page_id.to_sym.inspect}) %>)".html_safe
27
- # rubocop:enable Rails/OutputSafety
28
26
  end
29
27
  end
30
28
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ariadne_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.96.1
4
+ version: 0.0.96.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Garen J. Torikian
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2025-03-24 00:00:00.000000000 Z
11
+ date: 2025-03-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: tailwind_merge