Skip to content

Commit 60d01c2

Browse files
adrianthedevadrianthedev
committed
refactor: UI tweaks, better browser detection and new neutrals
1 parent 252b3f4 commit 60d01c2

File tree

15 files changed

+460
-412
lines changed

15 files changed

+460
-412
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@
5858
@custom-variant dark (&:where(.dark, .dark *));
5959
@custom-variant theme-slate (&:where(.theme-slate, .theme-slate *));
6060
@custom-variant theme-stone (&:where(.theme-stone, .theme-stone *));
61+
@custom-variant theme-gray (&:where(.theme-gray, .theme-gray *));
62+
@custom-variant theme-zinc (&:where(.theme-zinc, .theme-zinc *));
63+
@custom-variant theme-neutral (&:where(.theme-neutral, .theme-neutral *));
64+
@custom-variant theme-taupe (&:where(.theme-taupe, .theme-taupe *));
65+
@custom-variant theme-mauve (&:where(.theme-mauve, .theme-mauve *));
66+
@custom-variant theme-mist (&:where(.theme-mist, .theme-mist *));
67+
@custom-variant theme-olive (&:where(.theme-olive, .theme-olive *));
6168

6269
@custom-variant has-cover (&:where(.has-cover *));
6370
@custom-variant has-sidebar (&:where(.has-sidebar *));

‎app/assets/stylesheets/css/components/color_scheme_switcher.css‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,72 @@
1212
.color-scheme-switcher__button[data-theme="brand"] {
1313
/* Active by default (when no theme class is present) */
1414
@apply bg-white dark:bg-neutral-700 text-primary-600 dark:text-primary-400 shadow-sm;
15-
/* Inactive when theme variants are active */
15+
/* Inactive when any theme variant is active */
1616
@apply theme-slate:bg-transparent theme-slate:text-neutral-600 theme-slate:dark:text-neutral-400 theme-slate:shadow-none;
1717
@apply theme-stone:bg-transparent theme-stone:text-neutral-600 theme-stone:dark:text-neutral-400 theme-stone:shadow-none;
18+
@apply theme-gray:bg-transparent theme-gray:text-neutral-600 theme-gray:dark:text-neutral-400 theme-gray:shadow-none;
19+
@apply theme-zinc:bg-transparent theme-zinc:text-neutral-600 theme-zinc:dark:text-neutral-400 theme-zinc:shadow-none;
20+
@apply theme-neutral:bg-transparent theme-neutral:text-neutral-600 theme-neutral:dark:text-neutral-400 theme-neutral:shadow-none;
21+
@apply theme-taupe:bg-transparent theme-taupe:text-neutral-600 theme-taupe:dark:text-neutral-400 theme-taupe:shadow-none;
22+
@apply theme-mauve:bg-transparent theme-mauve:text-neutral-600 theme-mauve:dark:text-neutral-400 theme-mauve:shadow-none;
23+
@apply theme-mist:bg-transparent theme-mist:text-neutral-600 theme-mist:dark:text-neutral-400 theme-mist:shadow-none;
24+
@apply theme-olive:bg-transparent theme-olive:text-neutral-600 theme-olive:dark:text-neutral-400 theme-olive:shadow-none;
1825
}
1926

2027
.color-scheme-switcher__button[data-theme="slate"] {
21-
/* Inactive by default, active when theme-slate variant is present */
2228
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
2329
@apply theme-slate:bg-white theme-slate:dark:bg-neutral-700 theme-slate:text-primary-600 theme-slate:dark:text-primary-400 theme-slate:shadow-sm;
2430
@apply gap-1.5;
2531
}
2632

2733
.color-scheme-switcher__button[data-theme="stone"] {
28-
/* Inactive by default, active when theme-stone variant is present */
2934
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
3035
@apply theme-stone:bg-white theme-stone:dark:bg-neutral-700 theme-stone:text-primary-600 theme-stone:dark:text-primary-400 theme-stone:shadow-sm;
3136
@apply gap-1.5;
3237
}
3338

39+
.color-scheme-switcher__button[data-theme="gray"] {
40+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
41+
@apply theme-gray:bg-white theme-gray:dark:bg-neutral-700 theme-gray:text-primary-600 theme-gray:dark:text-primary-400 theme-gray:shadow-sm;
42+
@apply gap-1.5;
43+
}
44+
45+
.color-scheme-switcher__button[data-theme="zinc"] {
46+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
47+
@apply theme-zinc:bg-white theme-zinc:dark:bg-neutral-700 theme-zinc:text-primary-600 theme-zinc:dark:text-primary-400 theme-zinc:shadow-sm;
48+
@apply gap-1.5;
49+
}
50+
51+
.color-scheme-switcher__button[data-theme="neutral"] {
52+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
53+
@apply theme-neutral:bg-white theme-neutral:dark:bg-neutral-700 theme-neutral:text-primary-600 theme-neutral:dark:text-primary-400 theme-neutral:shadow-sm;
54+
@apply gap-1.5;
55+
}
56+
57+
.color-scheme-switcher__button[data-theme="taupe"] {
58+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
59+
@apply theme-taupe:bg-white theme-taupe:dark:bg-neutral-700 theme-taupe:text-primary-600 theme-taupe:dark:text-primary-400 theme-taupe:shadow-sm;
60+
@apply gap-1.5;
61+
}
62+
63+
.color-scheme-switcher__button[data-theme="mauve"] {
64+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
65+
@apply theme-mauve:bg-white theme-mauve:dark:bg-neutral-700 theme-mauve:text-primary-600 theme-mauve:dark:text-primary-400 theme-mauve:shadow-sm;
66+
@apply gap-1.5;
67+
}
68+
69+
.color-scheme-switcher__button[data-theme="mist"] {
70+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
71+
@apply theme-mist:bg-white theme-mist:dark:bg-neutral-700 theme-mist:text-primary-600 theme-mist:dark:text-primary-400 theme-mist:shadow-sm;
72+
@apply gap-1.5;
73+
}
74+
75+
.color-scheme-switcher__button[data-theme="olive"] {
76+
@apply bg-transparent text-neutral-600 dark:text-neutral-400 shadow-none;
77+
@apply theme-olive:bg-white theme-olive:dark:bg-neutral-700 theme-olive:text-primary-600 theme-olive:dark:text-primary-400 theme-olive:shadow-sm;
78+
@apply gap-1.5;
79+
}
80+
3481
/* Scheme buttons - active states using scheme selection classes */
3582
.color-scheme-switcher__button[data-scheme="light"] {
3683
/* Inactive by default */
@@ -96,6 +143,10 @@
96143
@apply border-0 bg-transparent cursor-pointer;
97144
}
98145

146+
.color-scheme-switcher__accent-option--active {
147+
@apply bg-neutral-100 dark:bg-neutral-700 ring-2 ring-primary-400 ring-offset-1;
148+
}
149+
99150
.color-scheme-switcher__accent-preview {
100151
@apply size-6 rounded-full border-2 border-white dark:border-neutral-600 shadow-sm;
101152
}

‎app/assets/stylesheets/css/components/input.css‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -235,23 +235,6 @@
235235
);
236236
}
237237

238-
/* Mac: ⌘ + K — narrower */
239-
.search-input:has(.mac_class) .search-input__input--with-shortcut {
240-
padding-inline-end: calc(
241-
var(--input-icon-offset) +
242-
var(--input-icon-size) * 2 +
243-
var(--input-icon-gap) * 3
244-
);
245-
}
246-
247-
/* PC: CTRL + K — wider (only one abbr in DOM, so :has() matches exclusively) */
248-
.search-input:has(.pc_class) .search-input__input--with-shortcut {
249-
padding-inline-end: calc(
250-
var(--input-icon-offset) +
251-
var(--input-icon-size) * 3 +
252-
var(--input-icon-gap) * 4
253-
);
254-
}
255238
/* Suffix (shortcut) */
256239
.search-input__suffix {
257240
@apply absolute inset-y-0 end-0 flex items-center text-content-secondary pointer-events-none z-10 gap-1;

‎app/assets/stylesheets/css/components/ui/panel.css‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
.panel__content {
14-
@apply flex flex-col md:flex-row gap-4;
14+
@apply relative flex flex-col md:flex-row gap-4 w-full;
1515
}
1616

1717
.panel__card,
@@ -20,13 +20,7 @@
2020
}
2121

2222
.panel__sidebar {
23-
@apply w-full md:w-1/3;
24-
}
25-
26-
.panel--has-sidebar {
27-
.panel__body {
28-
@apply w-full;
29-
}
23+
@apply w-60 top-0 end-0 flex shrink-0;
3024
}
3125

3226
.panel__cover-photo {

‎app/assets/stylesheets/css/variables.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,104 @@
9595
--color-avo-neutral-900: var(--color-stone-900);
9696
--color-avo-neutral-950: var(--color-stone-950);
9797
}
98+
.theme-taupe {
99+
--color-avo-neutral-25: oklch(98.5% 0.004 70);
100+
--color-avo-neutral-50: oklch(97.5% 0.005 70);
101+
--color-avo-neutral-100: oklch(93% 0.008 70);
102+
--color-avo-neutral-200: oklch(86% 0.010 70);
103+
--color-avo-neutral-300: oklch(76% 0.012 70);
104+
--color-avo-neutral-400: oklch(63% 0.012 70);
105+
--color-avo-neutral-500: oklch(53% 0.010 70);
106+
--color-avo-neutral-600: oklch(48% 0.010 70);
107+
--color-avo-neutral-700: oklch(43% 0.008 70);
108+
--color-avo-neutral-800: oklch(39% 0.008 70);
109+
--color-avo-neutral-900: oklch(28% 0.005 70);
110+
--color-avo-neutral-950: oklch(21% 0.005 70);
111+
}
112+
.theme-mauve {
113+
--color-avo-neutral-25: oklch(98.5% 0.005 310);
114+
--color-avo-neutral-50: oklch(97.5% 0.006 310);
115+
--color-avo-neutral-100: oklch(93% 0.009 310);
116+
--color-avo-neutral-200: oklch(86% 0.012 310);
117+
--color-avo-neutral-300: oklch(76% 0.014 310);
118+
--color-avo-neutral-400: oklch(63% 0.014 310);
119+
--color-avo-neutral-500: oklch(53% 0.012 310);
120+
--color-avo-neutral-600: oklch(48% 0.012 310);
121+
--color-avo-neutral-700: oklch(43% 0.010 310);
122+
--color-avo-neutral-800: oklch(39% 0.010 310);
123+
--color-avo-neutral-900: oklch(28% 0.006 310);
124+
--color-avo-neutral-950: oklch(21% 0.006 310);
125+
}
126+
.theme-mist {
127+
--color-avo-neutral-25: oklch(98.5% 0.004 240);
128+
--color-avo-neutral-50: oklch(97.5% 0.005 240);
129+
--color-avo-neutral-100: oklch(93% 0.008 240);
130+
--color-avo-neutral-200: oklch(86% 0.010 240);
131+
--color-avo-neutral-300: oklch(76% 0.012 240);
132+
--color-avo-neutral-400: oklch(63% 0.012 240);
133+
--color-avo-neutral-500: oklch(53% 0.010 240);
134+
--color-avo-neutral-600: oklch(48% 0.010 240);
135+
--color-avo-neutral-700: oklch(43% 0.008 240);
136+
--color-avo-neutral-800: oklch(39% 0.008 240);
137+
--color-avo-neutral-900: oklch(28% 0.005 240);
138+
--color-avo-neutral-950: oklch(21% 0.005 240);
139+
}
140+
.theme-gray {
141+
--color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
142+
--color-avo-neutral-50: var(--color-gray-50);
143+
--color-avo-neutral-100: var(--color-gray-100);
144+
--color-avo-neutral-200: var(--color-gray-200);
145+
--color-avo-neutral-300: var(--color-gray-300);
146+
--color-avo-neutral-400: var(--color-gray-400);
147+
--color-avo-neutral-500: var(--color-gray-500);
148+
--color-avo-neutral-600: var(--color-gray-600);
149+
--color-avo-neutral-700: var(--color-gray-700);
150+
--color-avo-neutral-800: var(--color-gray-800);
151+
--color-avo-neutral-900: var(--color-gray-900);
152+
--color-avo-neutral-950: var(--color-gray-950);
153+
}
154+
.theme-zinc {
155+
--color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
156+
--color-avo-neutral-50: var(--color-zinc-50);
157+
--color-avo-neutral-100: var(--color-zinc-100);
158+
--color-avo-neutral-200: var(--color-zinc-200);
159+
--color-avo-neutral-300: var(--color-zinc-300);
160+
--color-avo-neutral-400: var(--color-zinc-400);
161+
--color-avo-neutral-500: var(--color-zinc-500);
162+
--color-avo-neutral-600: var(--color-zinc-600);
163+
--color-avo-neutral-700: var(--color-zinc-700);
164+
--color-avo-neutral-800: var(--color-zinc-800);
165+
--color-avo-neutral-900: var(--color-zinc-900);
166+
--color-avo-neutral-950: var(--color-zinc-950);
167+
}
168+
.theme-neutral {
169+
--color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
170+
--color-avo-neutral-50: var(--color-neutral-50);
171+
--color-avo-neutral-100: var(--color-neutral-100);
172+
--color-avo-neutral-200: var(--color-neutral-200);
173+
--color-avo-neutral-300: var(--color-neutral-300);
174+
--color-avo-neutral-400: var(--color-neutral-400);
175+
--color-avo-neutral-500: var(--color-neutral-500);
176+
--color-avo-neutral-600: var(--color-neutral-600);
177+
--color-avo-neutral-700: var(--color-neutral-700);
178+
--color-avo-neutral-800: var(--color-neutral-800);
179+
--color-avo-neutral-900: var(--color-neutral-900);
180+
--color-avo-neutral-950: var(--color-neutral-950);
181+
}
182+
.theme-olive {
183+
--color-avo-neutral-25: oklch(98.5% 0.005 140);
184+
--color-avo-neutral-50: oklch(97.5% 0.006 140);
185+
--color-avo-neutral-100: oklch(93% 0.009 140);
186+
--color-avo-neutral-200: oklch(86% 0.012 140);
187+
--color-avo-neutral-300: oklch(76% 0.014 140);
188+
--color-avo-neutral-400: oklch(63% 0.014 140);
189+
--color-avo-neutral-500: oklch(53% 0.012 140);
190+
--color-avo-neutral-600: oklch(48% 0.012 140);
191+
--color-avo-neutral-700: oklch(43% 0.010 140);
192+
--color-avo-neutral-800: oklch(39% 0.010 140);
193+
--color-avo-neutral-900: oklch(28% 0.006 140);
194+
--color-avo-neutral-950: oklch(21% 0.006 140);
195+
}
98196

99197
.accent-red {
100198
/* themes - Red */

‎app/components/avo/items/panel_component.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<% if sidebars.any? { |sidebar| sidebar.visible_items.any? } %>
77
<% panel.with_sidebar do %>
8-
<div class="justify-between space-y-4">
8+
<div class="justify-between space-y-4 w-full">
99
<% sidebars.each_with_index do |sidebar, index| %>
1010
<%= render Avo::ResourceSidebarComponent.new resource: @resource, sidebar: sidebar, params: params, view: view, form: @form, index: index %>
1111
<% end %>

‎app/components/avo/u_i/search_input_component.html.erb‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,8 @@
1919
<% if @with_shortcut %>
2020
<span class="search-input__suffix" aria-hidden="true">
2121
<kbd class="search-input__shortcut">
22-
<% if mac? %>
23-
<abbr title="Command" class="no-underline mac_class">⌘</abbr>
24-
<% else %>
25-
<abbr title="CTRL" class="no-underline pc_class">CTRL</abbr>
26-
<% end %>
22+
<abbr title="Command" class="no-underline os-mac:visible">⌘</abbr>
23+
<abbr title="CTRL" class="no-underline os-pc:visible">CTRL</abbr>
2724
</kbd>
2825
<kbd class="search-input__shortcut">K</kbd>
2926
</span>

‎app/components/avo/u_i/search_input_component.rb‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,4 @@ class Avo::UI::SearchInputComponent < Avo::BaseComponent
99
prop :with_shortcut, default: false
1010
prop :classes
1111
prop :data, default: -> { {} }
12-
13-
def mac?
14-
helpers.request.user_agent.to_s.include?("Mac")
15-
end
1612
end

‎app/helpers/avo/application_helper.rb‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,10 @@ def container_is_full_width?
143143
end
144144
end
145145

146+
def os_class
147+
request.user_agent.to_s.include?("Mac") ? "os-mac" : "os-pc"
148+
end
149+
146150
# Check if the current locale is RTL (Right-to-Left)
147151
def rtl?
148152
Avo.configuration.rtl?

‎app/javascript/application.js‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,6 @@ Mousetrap.bind('r r r', () => {
2828
window.StreamActions.turbo_reload()
2929
})
3030

31-
function isMac() {
32-
const isMac = window.navigator.userAgent.indexOf('Mac OS X')
33-
34-
if (isMac >= 0) {
35-
document.body.classList.add('os-mac')
36-
document.body.classList.remove('os-pc')
37-
} else {
38-
document.body.classList.add('os-pc')
39-
document.body.classList.remove('os-mac')
40-
}
41-
}
42-
4331
// Add the shift-pressed class to the body when the shift key is pressed
4432
document.addEventListener('keydown', (event) => {
4533
if (event.shiftKey) {
@@ -93,7 +81,6 @@ document.addEventListener('turbo:before-stream-render', () => {
9381

9482
document.addEventListener('turbo:load', () => {
9583
initTippy()
96-
isMac()
9784

9885
// Restore scroll position after r r r turbo reload
9986
if (scrollTop) {

0 commit comments

Comments
 (0)