mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Danny White
ec53175b8a
## What kind of change does this PR introduce? Refactor. Follow-up to #49871. ## What is the current behavior? Branded (green) text still uses the `text-brand` classname while the colour comes from `--primary`. ## What is the new behavior? **Rename-only:** `text-brand` → `text-primary` across callsites and docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No intentional colour changes in this PR. This better matches how we treat our green in other components and props, like `variant="primary"` for green buttons. ## To test On light mode: smoke-test that branded text still looks like #49871 (readable green, not the bright fill). - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/): “Scale to millions” uses `text-primary` - [Docs homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs): branded links like “More on self-hosting” are still readable - [Typography docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography): documents `text-primary` - [Colour usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage): `text-primary` is visibly darker than `bg-brand-default` _on light mode_ - [Studio auth providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright green <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated branded text, link hover states, icons, badges, indicators, and highlighted content across the Design System, Docs, Studio, Learn, UI Library, and marketing experiences to use the primary theme color. * Updated syntax highlighting and table-of-contents styling for consistent primary-color presentation. * Refined brand color fallback behavior for bright fills and borders. * **Documentation** * Updated color-usage and typography guidance to recommend the primary text utility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
164 lines
2.8 KiB
CSS
164 lines
2.8 KiB
CSS
@reference "./globals.css";
|
|
|
|
.Code {
|
|
width: 100%;
|
|
|
|
.prism-code {
|
|
@apply m-0 p-1;
|
|
background-color: none;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
|
|
/* overflow: auto !important; */
|
|
}
|
|
|
|
.token-line {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.token.imports,
|
|
.token.property-access {
|
|
@apply !text-foreground-lighter;
|
|
}
|
|
|
|
.token.keyword.module,
|
|
.token.function {
|
|
font-style: normal !important;
|
|
@apply !text-foreground-lighter;
|
|
}
|
|
|
|
.token.plain,
|
|
.token.parameter,
|
|
.token.punctuation,
|
|
.token.operator,
|
|
.token.console.class-name,
|
|
.token.doc-comment.parameter,
|
|
.token.doc-comment.optional-parameter,
|
|
.token.doc-comment.parameter.punctuation,
|
|
.token.doc-comment.optional-parameter.punctuation {
|
|
font-style: normal !important;
|
|
@apply !text-foreground-light;
|
|
}
|
|
|
|
.token.keyword,
|
|
.token.doc-comment.keyword {
|
|
font-style: normal !important;
|
|
@apply !text-blue-900;
|
|
}
|
|
|
|
.token.string {
|
|
font-style: normal !important;
|
|
@apply !text-primary;
|
|
}
|
|
|
|
.token.constant {
|
|
font-style: normal !important;
|
|
@apply !text-blue-900;
|
|
}
|
|
|
|
.token.comment {
|
|
font-style: normal !important;
|
|
@apply !text-foreground-lighter;
|
|
}
|
|
|
|
.token.number {
|
|
@apply !text-primary;
|
|
}
|
|
|
|
.token.boolean,
|
|
.token.doc-comment.class-name {
|
|
@apply text-primary;
|
|
}
|
|
|
|
.codeBlock {
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
&.codeBlockWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&.codeBlockWrapper:hover .buttonContainer {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.buttonContainer {
|
|
right: 5px;
|
|
top: 5px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 200ms ease-in-out,
|
|
visibility 200ms ease-in-out,
|
|
bottom 200ms ease-in-out;
|
|
|
|
button {
|
|
@apply rounded-sm text-xs;
|
|
background: rgb(1, 22, 39);
|
|
border: 1px solid rgb(214, 222, 235);
|
|
color: rgb(214, 222, 235);
|
|
cursor: pointer;
|
|
line-height: 12px;
|
|
outline: none;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.CustomCodeBlock {
|
|
width: 100%;
|
|
|
|
.code-with-header pre {
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
|
|
.code-with-response pre {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.code-header {
|
|
/* @apply bg-gray-600; */
|
|
color: #ccc;
|
|
padding: 5px 15px;
|
|
border-radius: 4px 4px 0 0;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
}
|
|
|
|
.FunctionBlock {
|
|
h4 {
|
|
margin-top: 36px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0px;
|
|
margin-bottom: 24px;
|
|
}
|
|
}
|
|
|
|
.panel-form {
|
|
button {
|
|
@apply m-4 mr-0;
|
|
}
|
|
|
|
.form {
|
|
.form-group {
|
|
@apply border-t border-b m-0 -mt-px text-left py-2;
|
|
|
|
input {
|
|
@apply px-4 text-white;
|
|
border: none !important;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|