@almanaclabs/blaze-ui 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/platform-icon/channel-color.d.ts +15 -0
- package/dist/components/platform-icon/channel-color.d.ts.map +1 -0
- package/dist/components/platform-icon/channel-color.js +20 -0
- package/dist/components/platform-icon/index.d.ts +1 -0
- package/dist/components/platform-icon/index.d.ts.map +1 -1
- package/dist/index.js +19 -18
- package/package.json +1 -1
- package/src/styles/globals.css +181 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Platform } from './platform-icon';
|
|
2
|
+
/** The social channels that have a chart color (ADR 0026). */
|
|
3
|
+
type Channel = Extract<Platform, 'x' | 'threads' | 'instagram' | 'facebook' | 'bluesky' | 'linkedin' | 'tiktok' | 'youtube' | 'google' | 'beehiiv' | 'reddit'>;
|
|
4
|
+
declare const CHANNELS: readonly Channel[];
|
|
5
|
+
type ChannelColor = {
|
|
6
|
+
/** The series color, for bars, lines and legend swatches. */
|
|
7
|
+
color: string;
|
|
8
|
+
/** Readable text on `tint`, such as a pressed series toggle. */
|
|
9
|
+
foreground: string;
|
|
10
|
+
/** The 10% tint (16% in dark mode). */
|
|
11
|
+
tint: string;
|
|
12
|
+
};
|
|
13
|
+
declare const CHANNEL_COLOR: Record<Channel, ChannelColor>;
|
|
14
|
+
export { CHANNELS, CHANNEL_COLOR, type Channel, type ChannelColor };
|
|
15
|
+
//# sourceMappingURL=channel-color.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"channel-color.d.ts","sourceRoot":"","sources":["../../../src/components/platform-icon/channel-color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAE/C,8DAA8D;AAC9D,KAAK,OAAO,GAAG,OAAO,CACpB,QAAQ,EACN,GAAG,GACH,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,SAAS,GACT,QAAQ,CACX,CAAA;AAED,QAAA,MAAM,QAAQ,EAAE,SAAS,OAAO,EAY/B,CAAA;AAED,KAAK,YAAY,GAAG;IAClB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,UAAU,EAAE,MAAM,CAAA;IAClB,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,QAAA,MAAM,aAAa,EASd,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;AAElC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,CAAA"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
//#region src/components/platform-icon/channel-color.ts
|
|
2
|
+
var e = [
|
|
3
|
+
"x",
|
|
4
|
+
"threads",
|
|
5
|
+
"instagram",
|
|
6
|
+
"facebook",
|
|
7
|
+
"bluesky",
|
|
8
|
+
"linkedin",
|
|
9
|
+
"tiktok",
|
|
10
|
+
"youtube",
|
|
11
|
+
"google",
|
|
12
|
+
"beehiiv",
|
|
13
|
+
"reddit"
|
|
14
|
+
], t = Object.fromEntries(e.map((e) => [e, {
|
|
15
|
+
color: `var(--channel-${e})`,
|
|
16
|
+
foreground: `var(--channel-${e}-foreground)`,
|
|
17
|
+
tint: `var(--channel-${e}-soft)`
|
|
18
|
+
}]));
|
|
19
|
+
//#endregion
|
|
20
|
+
export { e as CHANNELS, t as CHANNEL_COLOR };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/platform-icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/platform-icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -58,21 +58,22 @@ import { NativeSelect as vi, NativeSelectOptGroup as yi, NativeSelectOption as b
|
|
|
58
58
|
import { NavigationAction as xi, navigationActionVariants as Si } from "./components/navigation-action/navigation-action.js";
|
|
59
59
|
import { PageHeader as Ci } from "./components/page-header/page-header.js";
|
|
60
60
|
import { Pagination as wi, PaginationContent as Ti, PaginationEllipsis as Ei, PaginationItem as Di, PaginationLink as Oi, PaginationNext as ki, PaginationPrevious as Ai } from "./components/pagination/pagination.js";
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import {
|
|
78
|
-
|
|
61
|
+
import { CHANNELS as ji, CHANNEL_COLOR as Mi } from "./components/platform-icon/channel-color.js";
|
|
62
|
+
import { Questionnaire as Ni, QuestionnaireActions as Pi, QuestionnaireChoice as Fi, QuestionnaireChoiceDescription as Ii, QuestionnaireChoices as Li, QuestionnaireDescription as Ri, QuestionnaireError as zi, QuestionnaireInput as Bi, QuestionnaireItem as Vi, QuestionnaireNext as Hi, QuestionnairePrevious as Ui, QuestionnaireProgress as Wi, QuestionnaireSkip as Gi, QuestionnaireSubmit as Ki, QuestionnaireTitle as qi } from "./components/questionnaire/questionnaire.js";
|
|
63
|
+
import { RadioGroup as Ji, RadioGroupItem as Yi } from "./components/radio-group/radio-group.js";
|
|
64
|
+
import { ScrollArea as Xi, ScrollBar as Zi } from "./components/scroll-area/scroll-area.js";
|
|
65
|
+
import { Select as Qi, SelectContent as $i, SelectGroup as ea, SelectItem as ta, SelectLabel as na, SelectScrollDownButton as ra, SelectScrollUpButton as ia, SelectSeparator as aa, SelectTrigger as oa, SelectValue as sa } from "./components/select/select.js";
|
|
66
|
+
import { SignalDots as ca, SignalStrip as la } from "./components/signal-strip/signal-strip.js";
|
|
67
|
+
import { Slider as ua } from "./components/slider/slider.js";
|
|
68
|
+
import { SourceAvatar as da } from "./components/source-avatar/source-avatar.js";
|
|
69
|
+
import { Spinner as fa } from "./components/spinner/spinner.js";
|
|
70
|
+
import { StaleBanner as pa, StateBanner as ma, stateBannerVariants as ha } from "./components/state-banner/state-banner.js";
|
|
71
|
+
import { StatusIndicator as ga, statusDotVariants as _a } from "./components/status-indicator/status-indicator.js";
|
|
72
|
+
import { SuggestChips as va } from "./components/suggest-chips/suggest-chips.js";
|
|
73
|
+
import { Tabs as ya, TabsContent as ba, TabsList as xa, TabsTrigger as Sa, tabsListVariants as Ca } from "./components/tabs/tabs.js";
|
|
74
|
+
import { Toggle as wa, toggleVariants as Ta } from "./components/toggle/toggle.js";
|
|
75
|
+
import { StackedBarChart as Ea } from "./components/stacked-bar-chart/stacked-bar-chart.js";
|
|
76
|
+
import { Switch as Da } from "./components/switch/switch.js";
|
|
77
|
+
import { Toast as Oa, ToastAction as ka, ToastClose as Aa, ToastContent as ja, ToastDescription as Ma, ToastPortal as Na, ToastProvider as Pa, ToastTitle as Fa, ToastViewport as Ia, Toaster as La, createToastManager as Ra, toast as za, useToastManager as Ba } from "./components/toast/toast.js";
|
|
78
|
+
import { ToggleGroup as Va, ToggleGroupItem as Ha } from "./components/toggle-group/toggle-group.js";
|
|
79
|
+
export { w as Accordion, T as AccordionContent, E as AccordionItem, D as AccordionTrigger, O as Alert, k as AlertAction, A as AlertDescription, M as AlertDialog, N as AlertDialogAction, P as AlertDialogCancel, F as AlertDialogContent, I as AlertDialogDescription, L as AlertDialogFooter, R as AlertDialogHeader, z as AlertDialogMedia, B as AlertDialogOverlay, V as AlertDialogPortal, H as AlertDialogTitle, U as AlertDialogTrigger, j as AlertTitle, He as AppShell, Ue as AppSidebar, We as AppSidebarWorkspace, Ge as AppTopBar, Ke as ApprovalCard, qe as AspectRatio, Je as Attachment, Ye as AttachmentAction, Xe as AttachmentActions, Ze as AttachmentContent, Qe as AttachmentDescription, $e as AttachmentGroup, et as AttachmentMedia, tt as AttachmentTitle, nt as AttachmentTrigger, rt as Avatar, it as AvatarBadge, at as AvatarFallback, ot as AvatarGroup, st as AvatarGroupCount, ct as AvatarImage, lt as Badge, lr as BrandBeehiiv, ur as BrandBluesky, dr as BrandEmail, fr as BrandFacebook, pr as BrandGmail, mr as BrandGoogle, hr as BrandInstagram, gr as BrandLinkedin, _r as BrandMicrosoft, vr as BrandOutlook, yr as BrandPhone, br as BrandReddit, xr as BrandThreads, Sr as BrandTiktok, Cr as BrandX, wr as BrandYoutube, dt as Breadcrumb, ft as BreadcrumbEllipsis, pt as BreadcrumbItem, mt as BreadcrumbLink, ht as BreadcrumbList, gt as BreadcrumbPage, _t as BreadcrumbSeparator, vt as Bubble, yt as BubbleContent, bt as BubbleGroup, xt as BubbleReactions, t as Button, St as ButtonGroup, Ct as ButtonGroupSeparator, wt as ButtonGroupText, n as ButtonLabel, ji as CHANNELS, Mi as CHANNEL_COLOR, Et as Calendar, Dt as CalendarDayButton, i as Card, a as CardAction, o as CardContent, s as CardDescription, c as CardFooter, l as CardHeader, u as CardTitle, Ot as Carousel, kt as CarouselContent, At as CarouselItem, jt as CarouselNext, Mt as CarouselPrevious, Pt as ChartContainer, Ft as ChartLegend, It as ChartLegendContent, Lt as ChartStyle, Rt as ChartTooltip, zt as ChartTooltipContent, Bt as ChatBar, Ht as Checkbox, Ut as Collapsible, Wt as CollapsibleContent, Gt as CollapsibleTrigger, $t as Combobox, en as ComboboxChip, tn as ComboboxChips, nn as ComboboxChipsInput, rn as ComboboxCollection, an as ComboboxContent, on as ComboboxEmpty, sn as ComboboxGroup, cn as ComboboxInput, ln as ComboboxItem, un as ComboboxLabel, dn as ComboboxList, fn as ComboboxSeparator, pn as ComboboxTrigger, mn as ComboboxValue, wn as DataTable, jn as DatePicker, Mn as DenseTable, Nn as DenseTableCell, Pn as DenseTableRow, Fn as Dialog, In as DialogClose, Ln as DialogContent, Rn as DialogDescription, zn as DialogFooter, Bn as DialogHeader, Vn as DialogOverlay, Hn as DialogPortal, Un as DialogTitle, Wn as DialogTrigger, Gn as Drawer, Kn as DrawerClose, qn as DrawerContent, Jn as DrawerDescription, Yn as DrawerFooter, Xn as DrawerHeader, Zn as DrawerOverlay, Qn as DrawerPortal, $n as DrawerSwipeHandle, er as DrawerTitle, tr as DrawerTrigger, W as DropdownMenu, G as DropdownMenuCheckboxItem, K as DropdownMenuContent, q as DropdownMenuGroup, J as DropdownMenuItem, Y as DropdownMenuLabel, X as DropdownMenuPortal, Z as DropdownMenuRadioGroup, Q as DropdownMenuRadioItem, $ as DropdownMenuSeparator, ee as DropdownMenuShortcut, te as DropdownMenuSub, ne as DropdownMenuSubContent, re as DropdownMenuSubTrigger, ie as DropdownMenuTrigger, nr as EditableText, rr as Empty, ir as EmptyContent, ar as EmptyDescription, or as EmptyHeader, sr as EmptyMedia, cr as EmptyTitle, jr as FaceStackButton, p as Field, m as FieldContent, h as FieldDescription, g as FieldError, _ as FieldGroup, v as FieldLabel, y as FieldLegend, b as FieldSeparator, x as FieldSet, S as FieldTitle, Mr as FilterChips, Rr as GoalCard, Hr as HoverCard, Ur as HoverCardContent, Wr as HoverCardTrigger, Gr as IdentityMark, Kr as IdentityMarkImage, C as Input, qt as InputGroup, Jt as InputGroupAddon, Yt as InputGroupButton, Xt as InputGroupInput, Zt as InputGroupText, Qt as InputGroupTextarea, qr as Item, Jr as ItemActions, Yr as ItemContent, Xr as ItemDescription, Zr as ItemFooter, Qr as ItemGroup, $r as ItemHeader, ei as ItemMedia, ti as ItemSeparator, ni as ItemTitle, d as Label, ri as Marker, ii as MarkerContent, ai as MarkerIcon, si as MediaThumbnail, li as Message, ui as MessageAvatar, di as MessageContent, fi as MessageFooter, pi as MessageGroup, mi as MessageHeader, hi as MetricOverview, gi as MetricTile, vi as NativeSelect, yi as NativeSelectOptGroup, bi as NativeSelectOption, xi as NavigationAction, Tr as PLATFORMS, Er as PLATFORM_COLOR, Dr as PLATFORM_ICON, Or as PLATFORM_LABEL, zr as PaceBadge, Br as PaceMeter, Ci as PageHeader, wi as Pagination, Ti as PaginationContent, Ei as PaginationEllipsis, Di as PaginationItem, Oi as PaginationLink, ki as PaginationNext, Ai as PaginationPrevious, Ar as PlatformAvatar, kr as PlatformIcon, Tn as Popover, En as PopoverContent, Dn as PopoverDescription, On as PopoverHeader, kn as PopoverTitle, An as PopoverTrigger, Nr as Progress, Pr as ProgressIndicator, Fr as ProgressLabel, Ir as ProgressTrack, Lr as ProgressValue, Ni as Questionnaire, Pi as QuestionnaireActions, Fi as QuestionnaireChoice, Ii as QuestionnaireChoiceDescription, Li as QuestionnaireChoices, Ri as QuestionnaireDescription, zi as QuestionnaireError, Bi as QuestionnaireInput, Vi as QuestionnaireItem, Hi as QuestionnaireNext, Ui as QuestionnairePrevious, Wi as QuestionnaireProgress, Gi as QuestionnaireSkip, Ki as QuestionnaireSubmit, qi as QuestionnaireTitle, Ji as RadioGroup, Yi as RadioGroupItem, Xi as ScrollArea, Zi as ScrollBar, Qi as Select, $i as SelectContent, ea as SelectGroup, ta as SelectItem, na as SelectLabel, ra as SelectScrollDownButton, ia as SelectScrollUpButton, aa as SelectSeparator, oa as SelectTrigger, sa as SelectValue, f as Separator, ae as Sheet, oe as SheetClose, se as SheetContent, ce as SheetDescription, le as SheetFooter, ue as SheetHeader, de as SheetTitle, fe as SheetTrigger, ve as Sidebar, ye as SidebarContent, be as SidebarFooter, xe as SidebarGroup, Se as SidebarGroupAction, Ce as SidebarGroupContent, we as SidebarGroupLabel, Te as SidebarHeader, Ee as SidebarInput, De as SidebarInset, Oe as SidebarMenu, ke as SidebarMenuAction, Ae as SidebarMenuBadge, je as SidebarMenuButton, Me as SidebarMenuItem, Ne as SidebarMenuSkeleton, Pe as SidebarMenuSub, Fe as SidebarMenuSubButton, Ie as SidebarMenuSubItem, Le as SidebarProvider, Re as SidebarRail, ze as SidebarSeparator, Be as SidebarTrigger, ca as SignalDots, la as SignalStrip, pe as Skeleton, ua as Slider, da as SourceAvatar, fa as Spinner, Ea as StackedBarChart, pa as StaleBanner, ma as StateBanner, ga as StatusIndicator, va as SuggestChips, Da as Switch, gn as Table, _n as TableBody, vn as TableCaption, yn as TableCell, bn as TableFooter, xn as TableHead, Sn as TableHeader, Cn as TableRow, ya as Tabs, ba as TabsContent, xa as TabsList, Sa as TabsTrigger, Kt as Textarea, Oa as Toast, ka as ToastAction, Aa as ToastClose, ja as ToastContent, Ma as ToastDescription, Na as ToastPortal, Pa as ToastProvider, Fa as ToastTitle, Ia as ToastViewport, La as Toaster, wa as Toggle, Va as ToggleGroup, Ha as ToggleGroupItem, me as Tooltip, he as TooltipContent, ge as TooltipProvider, _e as TooltipTrigger, ut as badgeVariants, Tt as buttonGroupVariants, r as buttonVariants, Vt as chatBarFormVariants, e as cn, Ra as createToastManager, oi as markerVariants, ci as mediaThumbnailVariants, _i as metricTileVariants, Si as navigationActionVariants, Vr as paceStatusOf, ha as stateBannerVariants, _a as statusDotVariants, Ca as tabsListVariants, za as toast, Ta as toggleVariants, Nt as useCarousel, hn as useComboboxAnchor, Ve as useSidebar, Ba as useToastManager };
|
package/package.json
CHANGED
package/src/styles/globals.css
CHANGED
|
@@ -44,6 +44,39 @@
|
|
|
44
44
|
--color-area-reviews: var(--area-reviews);
|
|
45
45
|
--color-area-reviews-soft: var(--area-reviews-soft);
|
|
46
46
|
--color-area-reviews-foreground: var(--area-reviews-foreground);
|
|
47
|
+
--color-channel-x: var(--channel-x);
|
|
48
|
+
--color-channel-x-soft: var(--channel-x-soft);
|
|
49
|
+
--color-channel-x-foreground: var(--channel-x-foreground);
|
|
50
|
+
--color-channel-threads: var(--channel-threads);
|
|
51
|
+
--color-channel-threads-soft: var(--channel-threads-soft);
|
|
52
|
+
--color-channel-threads-foreground: var(--channel-threads-foreground);
|
|
53
|
+
--color-channel-instagram: var(--channel-instagram);
|
|
54
|
+
--color-channel-instagram-soft: var(--channel-instagram-soft);
|
|
55
|
+
--color-channel-instagram-foreground: var(--channel-instagram-foreground);
|
|
56
|
+
--color-channel-facebook: var(--channel-facebook);
|
|
57
|
+
--color-channel-facebook-soft: var(--channel-facebook-soft);
|
|
58
|
+
--color-channel-facebook-foreground: var(--channel-facebook-foreground);
|
|
59
|
+
--color-channel-bluesky: var(--channel-bluesky);
|
|
60
|
+
--color-channel-bluesky-soft: var(--channel-bluesky-soft);
|
|
61
|
+
--color-channel-bluesky-foreground: var(--channel-bluesky-foreground);
|
|
62
|
+
--color-channel-linkedin: var(--channel-linkedin);
|
|
63
|
+
--color-channel-linkedin-soft: var(--channel-linkedin-soft);
|
|
64
|
+
--color-channel-linkedin-foreground: var(--channel-linkedin-foreground);
|
|
65
|
+
--color-channel-tiktok: var(--channel-tiktok);
|
|
66
|
+
--color-channel-tiktok-soft: var(--channel-tiktok-soft);
|
|
67
|
+
--color-channel-tiktok-foreground: var(--channel-tiktok-foreground);
|
|
68
|
+
--color-channel-youtube: var(--channel-youtube);
|
|
69
|
+
--color-channel-youtube-soft: var(--channel-youtube-soft);
|
|
70
|
+
--color-channel-youtube-foreground: var(--channel-youtube-foreground);
|
|
71
|
+
--color-channel-google: var(--channel-google);
|
|
72
|
+
--color-channel-google-soft: var(--channel-google-soft);
|
|
73
|
+
--color-channel-google-foreground: var(--channel-google-foreground);
|
|
74
|
+
--color-channel-beehiiv: var(--channel-beehiiv);
|
|
75
|
+
--color-channel-beehiiv-soft: var(--channel-beehiiv-soft);
|
|
76
|
+
--color-channel-beehiiv-foreground: var(--channel-beehiiv-foreground);
|
|
77
|
+
--color-channel-reddit: var(--channel-reddit);
|
|
78
|
+
--color-channel-reddit-soft: var(--channel-reddit-soft);
|
|
79
|
+
--color-channel-reddit-foreground: var(--channel-reddit-foreground);
|
|
47
80
|
--color-tone-blue: var(--tone-blue);
|
|
48
81
|
--color-tone-blue-soft: var(--tone-blue-soft);
|
|
49
82
|
--color-tone-violet: var(--tone-violet);
|
|
@@ -217,6 +250,81 @@
|
|
|
217
250
|
--area-ads-soft: color-mix(in srgb, var(--area-ads) 10%, transparent);
|
|
218
251
|
--area-calls-soft: color-mix(in srgb, var(--area-calls) 10%, transparent);
|
|
219
252
|
--area-reviews-soft: color-mix(in srgb, var(--area-reviews) 10%, transparent);
|
|
253
|
+
/* One color per social channel, for chart series and legends (ADR 0026).
|
|
254
|
+
-foreground is the readable text shade on the -soft tint. */
|
|
255
|
+
--channel-x: #0284c7;
|
|
256
|
+
--channel-threads: #ca8a04;
|
|
257
|
+
--channel-instagram: #db2777;
|
|
258
|
+
--channel-facebook: #9333ea;
|
|
259
|
+
--channel-bluesky: #0d9488;
|
|
260
|
+
--channel-linkedin: #16a34a;
|
|
261
|
+
--channel-tiktok: #4f46e5;
|
|
262
|
+
--channel-youtube: #dc2626;
|
|
263
|
+
--channel-google: #ea580c;
|
|
264
|
+
--channel-beehiiv: #65a30d;
|
|
265
|
+
--channel-reddit: #475569;
|
|
266
|
+
--channel-x-foreground: #0369a1;
|
|
267
|
+
--channel-threads-foreground: #854d0e;
|
|
268
|
+
--channel-instagram-foreground: #be185d;
|
|
269
|
+
--channel-facebook-foreground: #7e22ce;
|
|
270
|
+
--channel-bluesky-foreground: #0f766e;
|
|
271
|
+
--channel-linkedin-foreground: #166534;
|
|
272
|
+
--channel-tiktok-foreground: #4338ca;
|
|
273
|
+
--channel-youtube-foreground: #b91c1c;
|
|
274
|
+
--channel-google-foreground: #9a3412;
|
|
275
|
+
--channel-beehiiv-foreground: #3f6212;
|
|
276
|
+
--channel-reddit-foreground: #334155;
|
|
277
|
+
--channel-x-soft: color-mix(in srgb, var(--channel-x) 10%, transparent);
|
|
278
|
+
--channel-threads-soft: color-mix(
|
|
279
|
+
in srgb,
|
|
280
|
+
var(--channel-threads) 10%,
|
|
281
|
+
transparent
|
|
282
|
+
);
|
|
283
|
+
--channel-instagram-soft: color-mix(
|
|
284
|
+
in srgb,
|
|
285
|
+
var(--channel-instagram) 10%,
|
|
286
|
+
transparent
|
|
287
|
+
);
|
|
288
|
+
--channel-facebook-soft: color-mix(
|
|
289
|
+
in srgb,
|
|
290
|
+
var(--channel-facebook) 10%,
|
|
291
|
+
transparent
|
|
292
|
+
);
|
|
293
|
+
--channel-bluesky-soft: color-mix(
|
|
294
|
+
in srgb,
|
|
295
|
+
var(--channel-bluesky) 10%,
|
|
296
|
+
transparent
|
|
297
|
+
);
|
|
298
|
+
--channel-linkedin-soft: color-mix(
|
|
299
|
+
in srgb,
|
|
300
|
+
var(--channel-linkedin) 10%,
|
|
301
|
+
transparent
|
|
302
|
+
);
|
|
303
|
+
--channel-tiktok-soft: color-mix(
|
|
304
|
+
in srgb,
|
|
305
|
+
var(--channel-tiktok) 10%,
|
|
306
|
+
transparent
|
|
307
|
+
);
|
|
308
|
+
--channel-youtube-soft: color-mix(
|
|
309
|
+
in srgb,
|
|
310
|
+
var(--channel-youtube) 10%,
|
|
311
|
+
transparent
|
|
312
|
+
);
|
|
313
|
+
--channel-google-soft: color-mix(
|
|
314
|
+
in srgb,
|
|
315
|
+
var(--channel-google) 10%,
|
|
316
|
+
transparent
|
|
317
|
+
);
|
|
318
|
+
--channel-beehiiv-soft: color-mix(
|
|
319
|
+
in srgb,
|
|
320
|
+
var(--channel-beehiiv) 10%,
|
|
321
|
+
transparent
|
|
322
|
+
);
|
|
323
|
+
--channel-reddit-soft: color-mix(
|
|
324
|
+
in srgb,
|
|
325
|
+
var(--channel-reddit) 10%,
|
|
326
|
+
transparent
|
|
327
|
+
);
|
|
220
328
|
/*
|
|
221
329
|
* Category tones: a color and its soft tint for consumer-defined categories
|
|
222
330
|
* (kinds of idea, content types) that are not product areas. The color is the
|
|
@@ -302,6 +410,79 @@
|
|
|
302
410
|
--area-ads-soft: color-mix(in srgb, var(--area-ads) 16%, transparent);
|
|
303
411
|
--area-calls-soft: color-mix(in srgb, var(--area-calls) 16%, transparent);
|
|
304
412
|
--area-reviews-soft: color-mix(in srgb, var(--area-reviews) 16%, transparent);
|
|
413
|
+
--channel-x: #38bdf8;
|
|
414
|
+
--channel-threads: #facc15;
|
|
415
|
+
--channel-instagram: #f472b6;
|
|
416
|
+
--channel-facebook: #a855f7;
|
|
417
|
+
--channel-bluesky: #2dd4bf;
|
|
418
|
+
--channel-linkedin: #4ade80;
|
|
419
|
+
--channel-tiktok: #818cf8;
|
|
420
|
+
--channel-youtube: #f87171;
|
|
421
|
+
--channel-google: #fb923c;
|
|
422
|
+
--channel-beehiiv: #a3e635;
|
|
423
|
+
--channel-reddit: #94a3b8;
|
|
424
|
+
--channel-x-foreground: #7dd3fc;
|
|
425
|
+
--channel-threads-foreground: #fde047;
|
|
426
|
+
--channel-instagram-foreground: #f9a8d4;
|
|
427
|
+
--channel-facebook-foreground: #d8b4fe;
|
|
428
|
+
--channel-bluesky-foreground: #5eead4;
|
|
429
|
+
--channel-linkedin-foreground: #86efac;
|
|
430
|
+
--channel-tiktok-foreground: #a5b4fc;
|
|
431
|
+
--channel-youtube-foreground: #fca5a5;
|
|
432
|
+
--channel-google-foreground: #fdba74;
|
|
433
|
+
--channel-beehiiv-foreground: #bef264;
|
|
434
|
+
--channel-reddit-foreground: #cbd5e1;
|
|
435
|
+
--channel-x-soft: color-mix(in srgb, var(--channel-x) 16%, transparent);
|
|
436
|
+
--channel-threads-soft: color-mix(
|
|
437
|
+
in srgb,
|
|
438
|
+
var(--channel-threads) 16%,
|
|
439
|
+
transparent
|
|
440
|
+
);
|
|
441
|
+
--channel-instagram-soft: color-mix(
|
|
442
|
+
in srgb,
|
|
443
|
+
var(--channel-instagram) 16%,
|
|
444
|
+
transparent
|
|
445
|
+
);
|
|
446
|
+
--channel-facebook-soft: color-mix(
|
|
447
|
+
in srgb,
|
|
448
|
+
var(--channel-facebook) 16%,
|
|
449
|
+
transparent
|
|
450
|
+
);
|
|
451
|
+
--channel-bluesky-soft: color-mix(
|
|
452
|
+
in srgb,
|
|
453
|
+
var(--channel-bluesky) 16%,
|
|
454
|
+
transparent
|
|
455
|
+
);
|
|
456
|
+
--channel-linkedin-soft: color-mix(
|
|
457
|
+
in srgb,
|
|
458
|
+
var(--channel-linkedin) 16%,
|
|
459
|
+
transparent
|
|
460
|
+
);
|
|
461
|
+
--channel-tiktok-soft: color-mix(
|
|
462
|
+
in srgb,
|
|
463
|
+
var(--channel-tiktok) 16%,
|
|
464
|
+
transparent
|
|
465
|
+
);
|
|
466
|
+
--channel-youtube-soft: color-mix(
|
|
467
|
+
in srgb,
|
|
468
|
+
var(--channel-youtube) 16%,
|
|
469
|
+
transparent
|
|
470
|
+
);
|
|
471
|
+
--channel-google-soft: color-mix(
|
|
472
|
+
in srgb,
|
|
473
|
+
var(--channel-google) 16%,
|
|
474
|
+
transparent
|
|
475
|
+
);
|
|
476
|
+
--channel-beehiiv-soft: color-mix(
|
|
477
|
+
in srgb,
|
|
478
|
+
var(--channel-beehiiv) 16%,
|
|
479
|
+
transparent
|
|
480
|
+
);
|
|
481
|
+
--channel-reddit-soft: color-mix(
|
|
482
|
+
in srgb,
|
|
483
|
+
var(--channel-reddit) 16%,
|
|
484
|
+
transparent
|
|
485
|
+
);
|
|
305
486
|
--tone-blue: #8ab0f4;
|
|
306
487
|
--tone-blue-soft: color-mix(in srgb, var(--tone-blue) 16%, transparent);
|
|
307
488
|
--tone-violet: #c4b5fd;
|