rcvd / roam-css-system Goto Github PK

works fine in both macOS app and Safari browser. Just not in Brave. Not sure if this issue replicates in Chrome or any other browsers.

This is how Brave shows the site:

This is how Safari shows the site:

This is how macOS app shows the site:

Sorry to ask you such basic questions.
Can you add some more examples to your graph? For instance,

How can I change the color of different tags?
How can I change the general font in iA Quattro theme, where I can find a list of names of fonts?

Many thanks and congratulations for the great job done!!!!

Customization of headers is not working

Dear Alexander,

Thank you for your efforts on the Apple Theme :) Great work and very appreciated!

But I'm finding some issues with the top sidebar as it appears all in grey, not sure if I did something wrong, or it's a bug. And I'm not sure how to fix it.

I'm using the Roam desktop version, on a macOS Catalina 10.15.7 device.

Many thanks in advance :)

Loving your CSS system

Thank you for all the detailed work you have put into this.
I am using the iA Writer Quattro theme (Auto-switch) and noticed the customization wasn't being applied in the dark theme.

When I change
root: to :root it seems to work

I think all of the dark mode has this issue.

I also noticed in the forced dark mode customization that there are some extra brackets that are causing issues. When I removed the extra brackets they worked.

Hello again, sorry to trouble you!
How can I set up a special design for specific tags, like "tag:important"?
I know how to do it as a CSS format, but I would like to do it into your system, for hover, normal and dark options.
By the way, your system is amazing. Thanks a lot!!!!!

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .rm-db-title .expand-icon

I'd love to see the base font size increased to 16px, mostly for selfish reasons as my eyes start to show signs of ageing 😬Also, it's the default font size in browsers, anyway.

(I know I can change font size in browsers and in the app, but doing so will also change things like the width of the left sidebar etc.)

But rather be a box the the right (or left for LTR) like a bullet point.

I know this is for stylistic purposes, but I'd personally prefer them to be not lowercased and respect their initial capitalisation. Also, there might be edge cases that could visually conflict each other.

.rm-embed-container .rm-embed-container

I typically use a JS that hides the actual query string for showing when reviewing results, but when I show it, it's blue on a white background. Recommend updating to dark theme.

missing:

@import url("https://rcvd.github.io/roam-css-system/fonts/quattro.css");
@import url("https://rcvd.github.io/roam-css-system/internal/colors-tailwind.css");
@import url("https://rcvd.github.io/roam-css-system/internal/roam-css-system.css");
@import url("https://rcvd.github.io/roam-css-system/internal/additional-fixes.css");

Remove shadows and background image of the checkboxes on "all pages"

I know this is what Roam does itself, but given the theme's fonts, the bold attributes really visually stand out in a non-pleasing way, so I'd love to see them styled differently, maybe like so:

.rm-attr-ref {
  font-weight: normal;
  text-decoration: underline;
  text-decoration-style: dotted;
  margin-right: 0.125em;
  }
.rm-attr-ref:hover {
  text-decoration-style: dashed;
}

…so it becomes a red circle:

light green on pink hard to read

I can't change the font size of h1, h2 and h3. Can you help me? I am changing values, and nothing happens.
Great new Things Theme. How I can delete underline of h2, h3?

When I use page embeds, such as:
{{[[embed]]: [[June 14th, 2021]]}}

the result looks funky:
https://share.getcloudapp.com/BluKK4pb

It would be great if at least the background weren't such a stark contrast, and then maybe if the font weren't so big. But the background is the main thing. Not sure how to change it in CSS settings.

Thanks so much for your help, this theme is great!

I'm unsure if this can be smoothed out, but the below screenshot shows the slightly bumpy indentation. Thanks.

Is there hover variant for --co-tags?

In the right sidebar, log items and shortcut items don't have the same line height (different padding):

The ZoteroRoam API is an extension in Roam used by myself and other researchers. I attached screenshots to the issue of the display in Roam and the code for the block when inspecting the element.

When scrolling horizontally, the line numbers don't have an opaque background:

First, congratulations for this theme. I've trying several themes but this one is definitely the best, not only in the aesthetic perspective but also in the technical perspective (by using css variables everywhere, etc).

I noticed you're using the color palette from tailwind v2 (except for gray?). It looks great, but this can be improved by using the full palette which is available here:

https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js

It has has several more colors, including different variations of gray. More details here: https://www.youtube.com/watch?v=D2O9__GxWrU

I created a custom css block for myself with this. I'll leave it below if you want to update in the theme.

:root {
  --cl-black: #000;
  --cl-white: #fff;

  --cl-rose-50: #fff1f2;
  --cl-rose-100: #ffe4e6;
  --cl-rose-200: #fecdd3;
  --cl-rose-300: #fda4af;
  --cl-rose-400: #fb7185;
  --cl-rose-500: #f43f5e;
  --cl-rose-600: #e11d48;
  --cl-rose-700: #be123c;
  --cl-rose-800: #9f1239;
  --cl-rose-900: #881337;

  --cl-pink-50: #fdf2f8;
  --cl-pink-100: #fce7f3;
  --cl-pink-200: #fbcfe8;
  --cl-pink-300: #f9a8d4;
  --cl-pink-400: #f472b6;
  --cl-pink-500: #ec4899;
  --cl-pink-600: #db2777;
  --cl-pink-700: #be185d;
  --cl-pink-800: #9d174d;
  --cl-pink-900: #831843;

  --cl-fuchsia-50: #fdf4ff;
  --cl-fuchsia-100: #fae8ff;
  --cl-fuchsia-200: #f5d0fe;
  --cl-fuchsia-300: #f0abfc;
  --cl-fuchsia-400: #e879f9;
  --cl-fuchsia-500: #d946ef;
  --cl-fuchsia-600: #c026d3;
  --cl-fuchsia-700: #a21caf;
  --cl-fuchsia-800: #86198f;
  --cl-fuchsia-900: #701a75;

  --cl-purple-50: #faf5ff;
  --cl-purple-100: #f3e8ff;
  --cl-purple-200: #e9d5ff;
  --cl-purple-300: #d8b4fe;
  --cl-purple-400: #c084fc;
  --cl-purple-500: #a855f7;
  --cl-purple-600: #9333ea;
  --cl-purple-700: #7e22ce;
  --cl-purple-800: #6b21a8;
  --cl-purple-900: #581c87;

  --cl-violet-50: #f5f3ff;
  --cl-violet-100: #ede9fe;
  --cl-violet-200: #ddd6fe;
  --cl-violet-300: #c4b5fd;
  --cl-violet-400: #a78bfa;
  --cl-violet-500: #8b5cf6;
  --cl-violet-600: #7c3aed;
  --cl-violet-700: #6d28d9;
  --cl-violet-800: #5b21b6;
  --cl-violet-900: #4c1d95;

  --cl-indigo-50: #eef2ff;
  --cl-indigo-100: #e0e7ff;
  --cl-indigo-200: #c7d2fe;
  --cl-indigo-300: #a5b4fc;
  --cl-indigo-400: #818cf8;
  --cl-indigo-500: #6366f1;
  --cl-indigo-600: #4f46e5;
  --cl-indigo-700: #4338ca;
  --cl-indigo-800: #3730a3;
  --cl-indigo-900: #312e81;

  --cl-blue-50: #eff6ff;
  --cl-blue-100: #dbeafe;
  --cl-blue-200: #bfdbfe;
  --cl-blue-300: #93c5fd;
  --cl-blue-400: #60a5fa;
  --cl-blue-500: #3b82f6;
  --cl-blue-600: #2563eb;
  --cl-blue-700: #1d4ed8;
  --cl-blue-800: #1e40af;
  --cl-blue-900: #1e3a8a;

  --cl-sky-50: #f0f9ff;
  --cl-sky-100: #e0f2fe;
  --cl-sky-200: #bae6fd;
  --cl-sky-300: #7dd3fc;
  --cl-sky-400: #38bdf8;
  --cl-sky-500: #0ea5e9;
  --cl-sky-600: #0284c7;
  --cl-sky-700: #0369a1;
  --cl-sky-800: #075985;
  --cl-sky-900: #0c4a6e;

  --cl-cyan-50: #ecfeff;
  --cl-cyan-100: #cffafe;
  --cl-cyan-200: #a5f3fc;
  --cl-cyan-300: #67e8f9;
  --cl-cyan-400: #22d3ee;
  --cl-cyan-500: #06b6d4;
  --cl-cyan-600: #0891b2;
  --cl-cyan-700: #0e7490;
  --cl-cyan-800: #155e75;
  --cl-cyan-900: #164e63;

  --cl-teal-50: #f0fdfa;
  --cl-teal-100: #ccfbf1;
  --cl-teal-200: #99f6e4;
  --cl-teal-300: #5eead4;
  --cl-teal-400: #2dd4bf;
  --cl-teal-500: #14b8a6;
  --cl-teal-600: #0d9488;
  --cl-teal-700: #0f766e;
  --cl-teal-800: #115e59;
  --cl-teal-900: #134e4a;

  --cl-emerald-50: #ecfdf5;
  --cl-emerald-100: #d1fae5;
  --cl-emerald-200: #a7f3d0;
  --cl-emerald-300: #6ee7b7;
  --cl-emerald-400: #34d399;
  --cl-emerald-500: #10b981;
  --cl-emerald-600: #059669;
  --cl-emerald-700: #047857;
  --cl-emerald-800: #065f46;
  --cl-emerald-900: #064e3b;

  --cl-green-50: #f0fdf4;
  --cl-green-100: #dcfce7;
  --cl-green-200: #bbf7d0;
  --cl-green-300: #86efac;
  --cl-green-400: #4ade80;
  --cl-green-500: #22c55e;
  --cl-green-600: #16a34a;
  --cl-green-700: #15803d;
  --cl-green-800: #166534;
  --cl-green-900: #14532d;

  --cl-lime-50: #f7fee7;
  --cl-lime-100: #ecfccb;
  --cl-lime-200: #d9f99d;
  --cl-lime-300: #bef264;
  --cl-lime-400: #a3e635;
  --cl-lime-500: #84cc16;
  --cl-lime-600: #65a30d;
  --cl-lime-700: #4d7c0f;
  --cl-lime-800: #3f6212;
  --cl-lime-900: #365314;

  --cl-yellow-50: #fefce8;
  --cl-yellow-100: #fef9c3;
  --cl-yellow-200: #fef08a;
  --cl-yellow-300: #fde047;
  --cl-yellow-400: #facc15;
  --cl-yellow-500: #eab308;
  --cl-yellow-600: #ca8a04;
  --cl-yellow-700: #a16207;
  --cl-yellow-800: #854d0e;
  --cl-yellow-900: #713f12;

  --cl-amber-50: #fffbeb;
  --cl-amber-100: #fef3c7;
  --cl-amber-200: #fde68a;
  --cl-amber-300: #fcd34d;
  --cl-amber-400: #fbbf24;
  --cl-amber-500: #f59e0b;
  --cl-amber-600: #d97706;
  --cl-amber-700: #b45309;
  --cl-amber-800: #92400e;
  --cl-amber-900: #78350f;

  --cl-orange-50: #fff7ed;
  --cl-orange-100: #ffedd5;
  --cl-orange-200: #fed7aa;
  --cl-orange-300: #fdba74;
  --cl-orange-400: #fb923c;
  --cl-orange-500: #f97316;
  --cl-orange-600: #ea580c;
  --cl-orange-700: #c2410c;
  --cl-orange-800: #9a3412;
  --cl-orange-900: #7c2d12;

  --cl-red-50: #fef2f2;
  --cl-red-100: #fee2e2;
  --cl-red-200: #fecaca;
  --cl-red-300: #fca5a5;
  --cl-red-400: #f87171;
  --cl-red-500: #ef4444;
  --cl-red-600: #dc2626;
  --cl-red-700: #b91c1c;
  --cl-red-800: #991b1b;
  --cl-red-900: #7f1d1d;

  --cl-warmGray-50: #fafaf9;
  --cl-warmGray-100: #f5f5f4;
  --cl-warmGray-200: #e7e5e4;
  --cl-warmGray-300: #d6d3d1;
  --cl-warmGray-400: #a8a29e;
  --cl-warmGray-500: #78716c;
  --cl-warmGray-600: #57534e;
  --cl-warmGray-700: #44403c;
  --cl-warmGray-800: #292524;
  --cl-warmGray-900: #1c1917;

  --cl-trueGray-50: #fafafa;
  --cl-trueGray-100: #f5f5f5;
  --cl-trueGray-200: #e5e5e5;
  --cl-trueGray-300: #d4d4d4;
  --cl-trueGray-400: #a3a3a3;
  --cl-trueGray-500: #737373;
  --cl-trueGray-600: #525252;
  --cl-trueGray-700: #404040;
  --cl-trueGray-800: #262626;
  --cl-trueGray-900: #171717;

  --cl-gray-50: #fafafa;
  --cl-gray-100: #f4f4f5;
  --cl-gray-200: #e4e4e7;
  --cl-gray-300: #d4d4d8;
  --cl-gray-400: #a1a1aa;
  --cl-gray-500: #71717a;
  --cl-gray-600: #52525b;
  --cl-gray-700: #3f3f46;
  --cl-gray-800: #27272a;
  --cl-gray-900: #18181b;

  --cl-coolGray-50: #f9fafb;
  --cl-coolGray-100: #f3f4f6;
  --cl-coolGray-200: #e5e7eb;
  --cl-coolGray-300: #d1d5db;
  --cl-coolGray-400: #9ca3af;
  --cl-coolGray-500: #6b7280;
  --cl-coolGray-600: #4b5563;
  --cl-coolGray-700: #374151;
  --cl-coolGray-800: #1f2937;
  --cl-coolGray-900: #111827;

  --cl-blueGray-50: #f8fafc;
  --cl-blueGray-100: #f1f5f9;
  --cl-blueGray-200: #e2e8f0;
  --cl-blueGray-300: #cbd5e1;
  --cl-blueGray-400: #94a3b8;
  --cl-blueGray-500: #64748b;
  --cl-blueGray-600: #475569;
  --cl-blueGray-700: #334155;
  --cl-blueGray-800: #1e293b;
  --cl-blueGray-900: #0f172a;
}

Hi,
How can I change the color of a specific block container?

For example, I want change the background color of the #WeeklyQ and all its child blocks to var(--cl-gray-300)

I tried the following, but it doesn't seem to work:

.roam-block-container[data-page-links*='WeeklyQ'] {
background-color: var(--cl-gray-300);
}

Thanks for your great work! Regards, Alex

The content area on the right side ends where the + is. The page suggestion box should float to the left, instead of staying in the same position and visually pushing the content under it to the left.

The default page color (red) and highlighted results (dark orange) of a query have poor contrast.

When you hide both sidebars, queries will change their 100% width to something smaller:

Hello, since yesterday the css-system and Things Theme it doesn't works. I am wondering if is it happening only to be? In my case suddenly stopped to work.
Thnaks again for your help.

Hello! What variable would I change to customise global fonts?

Thanks!

I wasn't able to apple text transformation on:

left sidebar > db-title > normal > --tt-left-sidebar__db-title

I had a custom CSS before for this for making all left bar text lowercase. There's tt for started items and log buttons, but not db title.

Dear Alexander,

Hi there, thanks for making such a great minimal theme! But I'm seeing some issues from using native [[roam/css]] and css block to import the link. And I tried two of my Roam account, all of them won't generate the theme.

But it works perfectly well with chrome extension "stylus".

Would you mind having a look at the issue please? Thanks!!

c3founder's Mixed Text Direction extension stopped to work with your extension. It used to work yesterday or before, I don't remember exactly

I would like to keep the iA Quattro theme except the font text, I would prefer the "Lato", sans-serif;
I have included the div/normal code and change it the font, but it doesn't work.
I would appreciate if you can help me.
Thanks

h3 tag (###) is italicized. see gif below:

1. I used a feature from CSS system 1 that I wish was included in 2, just copied the underlying CSS from v1 to hide the "shortcusts" label from left sidebar:

#app > div > div > div.roam-sidebar-container.noselect > div > div.flex-v-box.starred-pages-wrapper > div.flex-h-box {
  display: none;
}

2. Global styling for bold and italics. This also wasn't in CSS v1, not sure if an oversight or by-design? Anyway, I tend to like my italics and bold text to be a different color. E.g.,

b, strong, .rm-bold {
  font-weight: 700!important;
  color: var(--cl-brown-attr);
}

em {
  color: var(--cl-brown-attr);
}

They look great in light mode! Not so much in dark mode.

Also, thank you for this fantastic theme.

Started using the dark theme. Had to stop using Roam Masonry for the theme to work properly. Details of Roam Masonry here: https://github.com/GitMurf/masonry-vanilla

I know this isn't native Roam, but a lot of people use Roam42 and Smartblocks.
Currently the menu looks like this:
Smartblocks: https://share.getcloudapp.com/mXurrXjr
It's hard to read, light gray on white.

I'd love for it to look like the Templates menu with black background:
Templates: https://share.getcloudapp.com/rRujjRPb

Possible to change in the theme? Or do I need to get with the Smartblocks folks?