Add color theme demo #5
Conversation
✅ Deploy Preview for oddbaseline ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
stacyk
left a comment
stacyk
left a comment
There was a problem hiding this comment.
Left a few ideas below, but this is really cool!
| @property --base-color-light { | ||
| syntax: '<color>'; | ||
| inherits: false; | ||
| initial-value: oklch(43.7% 0.075 224); | ||
| } | ||
|
|
||
| @property --base-color-dark { | ||
| syntax: '<color>'; | ||
| inherits: false; | ||
| initial-value: oklch(89.2% 0.069 224); | ||
| } |
There was a problem hiding this comment.
I see these @Property custom properties don't appear in the Chrome dev tools as being a defined value even though it renders this initial value... but every once in a while I can get it to show me the value and I am unsure what is making it work only rarely. I see the values in Firefox. Safari won't show me any of the variables on the html tag unless I take it out of the @layer rule for some reason.
I assume this is all an issue with the dev tooling, not the CSS
There was a problem hiding this comment.
@stacyk Yeah, I've noticed this too, and thought the same that it must be a dev tools issue. Searched for issues/bugs but haven't come across anything related so far. Looking at the CSS file, I'm so far not seeing what could be set up incorrectly when it comes to how variables are defined.
mirisuzanne
left a comment
mirisuzanne
left a comment
There was a problem hiding this comment.
It's a very minor nit, but bugs me that the header is full-width right-aligned and the footer is left-aligned not full-width. 😅
Demo looks great, nice work!
| --text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem); | ||
| --gap: clamp(2cqi, 0.5lh, 5cqi); | ||
|
|
||
| /* colors */ |
There was a problem hiding this comment.
Since this is the heart of the demo, and layers will keep the order intact, consider moving color definitions to the top of the file?
| --border-color-bright: oklch(from var(--border-color) l calc(c + 0.1) h); | ||
| --border-highlight: var(--complement-color); | ||
|
|
||
| /* Fonts, via https: //modernfontstacks.com/ */ |
There was a problem hiding this comment.
| /* Fonts, via https: //modernfontstacks.com/ */ | |
| /* Fonts, via https://modernfontstacks.com/ */ |
Change into the src/dialog directory
Run npx http-server .
Open http://localhost:8080/