Comments (5)
Ah, interesting. I think this is because we use theme('colors.white')
to get #fff
in the Starlight Tailwind plugin, e.g.
starlight/packages/tailwind/index.ts
Line 68 in 093a32c
The default Tailwind colors shape is something like this:
const colors = {
transparent: "transparent",
black: "#000",
white: "#fff",
gray: {
50: "#f8fafc",
100: "#f1f5f9",
200: "#e2e8f0",
// etc.
},
// other colors
}
So colors.white
is expected to be a single string literal, not an object.
Usually when setting an alternate gray shade, this is done via gray: colors.stone
. (This also makes sense logically because “white” and “black” are not categories that span a range of light to dark colours, but specific luminosities.)
Do you think we should support bending Tailwind’s palette naming or would a clear error for this case and not supporting it be acceptable?
from starlight.
But it works for black changing the pure black to a shade of the given color without any warnings, I think white should do the same, probably by taking the lightest shade of the color
from starlight.
But it works for black changing the pure black to a shade of the given color without any warnings, I think white should do the same, probably by taking the lightest shade of the color
Not really! Starlight’s colour scheme doesn’t use Tailwind’s black
anywhere, it uses Gray 900 for its darkest shade. So if you set a different gray
palette, it will use the 900 value from that palette. If you set a custom value for black
in your Tailwind config, Starlight completely ignores it. But the white in Starlight is always 100% luminosity, i.e. #fff, so there is no variation between palettes.
If someone really, really wanted to have a different shade for their whites, they could set e.g. white: colors.stone.50
. On the other hand, white: colors.stone
is kind of a semantic “mistake” because it breaks Tailwind classes you might write: usually you can write text-white
for example, but if you set the full palette, you’d have to use text-white-50
for the brightest shade, text-white
would no longer be valid.
This kind of a conceptual distinction: there are palettes that range from dark to light (gray
, indigo
, cyan
, etc.) and then there are individual named colours that don’t make sense with varying luminosity (white
, black
, transparent
). If we take text-white-900
as an example (assuming white: colors.stone
), then the resulting value is #1c1917
. If you ask people what shade or colour #1c1917
is, “white” would be an unlikely answer, so that’s why usually you’d use gray: colors.stone
and work with light and dark grays, not light and dark whites.
from starlight.
Interesting! In that case I think this should be an error at Tailwind level. Is this something I should report on Astro's Tailwind integration or on Tailwind directly? I have no idea how CSS tooling works and where each one's responsibility ends.
from starlight.
I think this should be an error at Tailwind level
I still think this is a Starlight-specific limitation that should have a nice error on our end rather than anything else. While Tailwind has that shape I described as a sensible default, it’s also in the end agnostic about what users decide to do with it. For example, Tailwind uses that <color>-<number>
format for their shades, but it’s totally valid to provide a config shape that is completely different:
colors: {
rainbow: {
red: '#ff0000',
orange: '#ffa500',
yellow: '#ffff00',
// ...
},
},
And then use those as class="text-rainbow-red"
. Most people use Tailwind and only slightly tweak any of its defaults, but it also works as an entirely custom utility class generator (there’s an example a bit like this in this “A CSS project boilerplate” article).
So I don’t think Tailwind would see this as an error on their end, and the Astro integration does very close to nothing, so it’s not there either.
Instead I see it as:
- As a generic tool, Tailwind has sensible defaults but is 100% customisable.
- As an opinionated tool, Starlight makes some assumptions about Tailwind config shape and expects
white
to be a literal value. (Same way it expects to usegray
for its gray shades and invents an “accent” palette to use for accent colours.)
If we were imposing a limitation that was unacceptable, we would aim to fix that and make our plugin more flexible. But in this case, I think expecting white
to be a single colour, not a range of colours shouldn’t realistically cause problems for users. So instead we should make sure error messages and docs are more helpful on this point.
from starlight.
Related Issues (20)
- Local Typescript files are not working HOT 3
- Issue with translating of "Copy to clipboard" text HOT 1
- Tables in Asides HOT 15
- right nav `toc` gives no visual indication its scrollable HOT 7
- Banner is off-center on larger screen sizes HOT 3
- Order of Generated Headings are Invalid HOT 1
- Badge styles break when refreshing with sidebar entry active HOT 14
- Error On Favicon: unsupported file type: undefined HOT 3
- [Algolia Search] Bad INP on mobile HOT 1
- Starlight is incompatible with the Astro build.format preserve option HOT 1
- type errors using extended i18n schema HOT 1
- [regression] Custom translation not working when using a single non-root locale on MacOS HOT 5
- left TOC scrollbar position lost on transition HOT 2
- Summary's marker have not be hidden HOT 8
- `.pnpm-store` in workspace directory
- [regression] Starlight mdx files no longer properly combine script tags present in nested astro Components (build mode only) HOT 3
- Inconsistent Behavior of Links in Starlight | Frontmatter Prev and Next HOT 5
- Issues adding starlight to a SvelteKit project
- Missing hover effects
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from starlight.