@sableui/react 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/CHANGELOG.md +29 -0
- package/DESIGN.md +2 -2
- package/dist/file-hashes.json +4 -4
- package/dist/index.d.ts +6 -3
- package/dist/index.js +1 -1
- package/dist/lib/palette.js +46 -6
- package/dist/palette.css +243 -165
- package/llms/reference/token-intent.md +1 -1
- package/llms-full.txt +1 -1
- package/package.json +1 -1
- package/registry.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# What's new
|
|
2
2
|
|
|
3
|
+
## 0.13.0
|
|
4
|
+
|
|
5
|
+
Tone scales that keep their steps apart, whatever the tone.
|
|
6
|
+
|
|
7
|
+
- **Breaking: tone scales are one ladder, and the tone sits on its nearest
|
|
8
|
+
step.** Every tone scale (`tone-1-*` … `tone-3-*`, `tone-info-*`,
|
|
9
|
+
`tone-warning-*`, `success-*`, `destructive-*`) now uses one shared
|
|
10
|
+
ladder of depths per mode, so `bg-tone-1-100` and `bg-success-100` are
|
|
11
|
+
the same depth. The tone lands exactly on the step nearest its own
|
|
12
|
+
lightness, not always on 500. Before, a tone near one end of the range
|
|
13
|
+
squeezed five steps into the little room left past it: in dark mode,
|
|
14
|
+
light status colours (Poppy, Prism) had 600–950 almost
|
|
15
|
+
indistinguishable, and deep tones in light mode crowded 800–950. Now the
|
|
16
|
+
steps either side stretch to keep the ladder's ends. Migration: where you
|
|
17
|
+
used `*-500` to mean the tone, use the tone token (`bg-success`,
|
|
18
|
+
`text-tone-1`). The other steps keep their roles (100 a wash, 700/800
|
|
19
|
+
text), but may be a little lighter or deeper than before.
|
|
20
|
+
- **Tone steps stay in sRGB for any hue.** A tone scale's chroma falls from
|
|
21
|
+
the tone toward each end of the ladder, under a bound fitted per step
|
|
22
|
+
over the whole hue circle, so a customised or app-defined tone can't push
|
|
23
|
+
a step out of gamut. This replaces the fixed caps on the light steps.
|
|
24
|
+
- **Yellow sits a little deeper in dark mode** (500 at L 0.78, was 0.82), so
|
|
25
|
+
its 800–950 no longer crowd against the ink.
|
|
26
|
+
- **The palette tests hold spacing.** Neighbouring steps of every scale, in
|
|
27
|
+
every theme and mode, are at least 3 apart in OKLab (the 50→100 washes
|
|
28
|
+
1.4), and every tone sits exactly on its nearest step. Before, the only
|
|
29
|
+
check was that each step moved 0.005 in lightness, and 73 of 224 scales
|
|
30
|
+
had a pair of neighbouring steps under 3 apart.
|
|
31
|
+
|
|
3
32
|
## 0.12.0
|
|
4
33
|
|
|
5
34
|
Getting to a working first component, finding the right example, moving over from shadcn, and the components that move called for: Menubar, NavigationMenu, InputGroup, ButtonGroup, CaretMenu and bottom-sheet snap points.
|
package/DESIGN.md
CHANGED
|
@@ -85,9 +85,9 @@ Roles are the contract, and roles are not enough for a product: tags, avatars, l
|
|
|
85
85
|
- **Nine families:** `neutral`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple` and `pink`, each 50–950, as Tailwind utilities (`bg-blue-100`, `text-pink-700`) and variables (`--teal-500`). Tailwind's other families are switched off.
|
|
86
86
|
- **The lean.** A family keeps its own hue and leans toward the brand by half the gap, at most 15°, and only as far as the brand has colour (an ink-black primary pulls nothing). It's Material 3's harmonize, and the same lean the customizer gives status colours. `--theme-palette-harmony` scales it: 0 keeps the families' own hues, 2 doubles the pull.
|
|
87
87
|
- **Neutral** is the theme's own `--background` mixed toward its `--foreground`, so it carries the surfaces' tint.
|
|
88
|
-
- **Tone scales.** Every tone (tone-1…3, info, warning, success, destructive) gets a scale
|
|
88
|
+
- **Tone scales.** Every tone (tone-1…3, info, warning, success, destructive) gets a scale on one shared ladder of depths, so `bg-tone-1-100` and `bg-success-100` are the same depth. The tone sits exactly on the step nearest its own lightness: a mid tone is 500, a light status colour in dark mode is 800. The steps either side stretch to keep the ladder's ends, so a tone near one end does not crush five steps into the little room left past it. Use `--success` itself for the tone, and the steps for its washes and deeper inks. Chroma falls from the tone toward each end, under an sRGB bound fitted per step over the whole hue circle, since a tone can be any hue.
|
|
89
89
|
- **Steps follow the mode.** A low step is always near the page and a high step always far from it, so a pair like `bg-blue-100 text-blue-800` reads in both modes with no `dark:`.
|
|
90
|
-
- **Held, not hoped.** It's all relative-colour CSS computed where it is declared, so a preset, a customizer look or an app's `--primary` carries into it with no regeneration. Chroma is fitted under sRGB across the whole lean (piecewise, a knot every 5°), and `palette.test.ts` evaluates the shipped CSS for every built-in theme and mode: in gamut, steadily away from the page, `700` readable on the page, `800` readable on its own `100`, and neighbouring families apart.
|
|
90
|
+
- **Held, not hoped.** It's all relative-colour CSS computed where it is declared, so a preset, a customizer look or an app's `--primary` carries into it with no regeneration. Chroma is fitted under sRGB across the whole lean (piecewise, a knot every 5°), and `palette.test.ts` evaluates the shipped CSS for every built-in theme and mode: in gamut, steadily away from the page, `700` readable on the page, `800` readable on its own `100`, neighbouring steps at least 3 apart in OKLab (the 50→100 washes 1.4), every tone exactly on its nearest step, and neighbouring families apart.
|
|
91
91
|
|
|
92
92
|
Components never name a step. They paint roles, which is what lets a theme restyle them. Where a component takes a family (Badge, Pill and StatusDot accept `tone="blue"`, a category with no meaning attached), it sets `data-palette` to the family and paints from the slots that fills: `palette-wash` (100), `palette-wash-strong` (200), `palette-edge` (300), `palette-dot` (500), `palette-solid` (700), `palette-text` (800) and `palette-solid-ink` (50). The classes are the same for every family, and each ink-on-fill pair is held to 4.5:1. An app can use `data-palette` the same way.
|
|
93
93
|
|
package/dist/file-hashes.json
CHANGED
|
@@ -486,8 +486,8 @@
|
|
|
486
486
|
"dist/icon-sets/brands.js": "9a37d8739f14f2a9",
|
|
487
487
|
"dist/icon-sets/reicon.d.ts": "52f6e41dc8137b4e",
|
|
488
488
|
"dist/icon-sets/reicon.js": "9ec7d3b714c57172",
|
|
489
|
-
"dist/index.d.ts": "
|
|
490
|
-
"dist/index.js": "
|
|
489
|
+
"dist/index.d.ts": "933e9604a361c5af",
|
|
490
|
+
"dist/index.js": "ff3e1234cfdff10a",
|
|
491
491
|
"dist/ios/chrome.css": "a7ca9e3735d8658e",
|
|
492
492
|
"dist/ios/chrome.js": "37091fef7b68bd28",
|
|
493
493
|
"dist/ios/frame.css": "dd2703c944ce575a",
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
"dist/lib/hit-target.js": "b2ad19bc6d3271e0",
|
|
543
543
|
"dist/lib/is-promise.js": "cc36f1bd7d4d4461",
|
|
544
544
|
"dist/lib/meta.js": "e3b0c44298fc1c14",
|
|
545
|
-
"dist/lib/palette.js": "
|
|
545
|
+
"dist/lib/palette.js": "3665b25d31bae763",
|
|
546
546
|
"dist/lib/portal-theme-scope.js": "2c0d22d961e51174",
|
|
547
547
|
"dist/lib/presentation.js": "8e4f69cd7205bd55",
|
|
548
548
|
"dist/lib/refs.js": "e6f9ac5875431c2f",
|
|
@@ -568,7 +568,7 @@
|
|
|
568
568
|
"dist/motion/useInView.js": "6136ad61107db838",
|
|
569
569
|
"dist/motion/useReducedMotion.js": "ae7c093aac26e254",
|
|
570
570
|
"dist/motion/viewTransition.js": "8c0b37b9c412cdd2",
|
|
571
|
-
"dist/palette.css": "
|
|
571
|
+
"dist/palette.css": "9d7dc655c3d06ac0",
|
|
572
572
|
"dist/patterns/auth-page.js": "c12f29a82f829a16",
|
|
573
573
|
"dist/patterns/auth-page.meta.js": "3053eb95f025fd27",
|
|
574
574
|
"dist/patterns/brand-landing-page.js": "97554ec5c5c36e73",
|
package/dist/index.d.ts
CHANGED
|
@@ -8933,8 +8933,11 @@ declare function useSmoothWheel({ axis, mapVertical, smooth, }?: SmoothWheelOpti
|
|
|
8933
8933
|
* - **neutral** is the theme's own page and ink mixed in steps, so it carries
|
|
8934
8934
|
* whatever tint the theme's surfaces do.
|
|
8935
8935
|
* - Every **tone** (tone-1…3, info, warning, success, destructive) gets a scale
|
|
8936
|
-
*
|
|
8937
|
-
*
|
|
8936
|
+
* on one shared ladder of depths, and the tone lands exactly on the step
|
|
8937
|
+
* nearest its own lightness: a light status colour in dark mode is 800, a
|
|
8938
|
+
* mid one is 500. The steps either side stretch to keep the ladder's ends,
|
|
8939
|
+
* so a tone near one end does not crush five steps into the little room
|
|
8940
|
+
* left past it, and tone-1-100 and success-100 are the same depth.
|
|
8938
8941
|
*
|
|
8939
8942
|
* Steps follow the mode rather than literal lightness: a low step is always
|
|
8940
8943
|
* near the page and a high step always far from it, so 800 text on a 100
|
|
@@ -8966,6 +8969,6 @@ declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info"
|
|
|
8966
8969
|
/** Everything the palette names: neutral, the families, then the tone scales. */
|
|
8967
8970
|
declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
|
|
8968
8971
|
|
|
8969
|
-
declare const SABLE_UI_VERSION: "0.
|
|
8972
|
+
declare const SABLE_UI_VERSION: "0.13.0";
|
|
8970
8973
|
|
|
8971
8974
|
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
|
package/dist/index.js
CHANGED
|
@@ -172,7 +172,7 @@ import {
|
|
|
172
172
|
} from "./lib/use-caret-trigger.js";
|
|
173
173
|
import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
|
|
174
174
|
import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
|
|
175
|
-
var SABLE_UI_VERSION = "0.
|
|
175
|
+
var SABLE_UI_VERSION = "0.13.0";
|
|
176
176
|
export {
|
|
177
177
|
ART_TOKENS,
|
|
178
178
|
CHART_SERIES_COUNT,
|
package/dist/lib/palette.js
CHANGED
|
@@ -4,7 +4,9 @@ var PALETTE_FAMILIES = [
|
|
|
4
4
|
{ name: "red", hue: 25, light: { l: 0.6, c: 0.21 }, dark: { l: 0.64, c: 0.2 } },
|
|
5
5
|
{ name: "orange", hue: 50, light: { l: 0.69, c: 0.18 }, dark: { l: 0.71, c: 0.17 } },
|
|
6
6
|
// Yellow is only yellow when it is light; at 0.6 it is olive.
|
|
7
|
-
|
|
7
|
+
// In dark mode it sits a little deeper, or 800–950 crowd into the room
|
|
8
|
+
// left between it and the ink.
|
|
9
|
+
{ name: "yellow", hue: 92, light: { l: 0.83, c: 0.16 }, dark: { l: 0.78, c: 0.15 } },
|
|
8
10
|
{ name: "green", hue: 145, light: { l: 0.64, c: 0.17 }, dark: { l: 0.68, c: 0.16 } },
|
|
9
11
|
{ name: "teal", hue: 190, light: { l: 0.7, c: 0.12 }, dark: { l: 0.74, c: 0.12 } },
|
|
10
12
|
{ name: "blue", hue: 262, light: { l: 0.6, c: 0.19 }, dark: { l: 0.64, c: 0.17 } },
|
|
@@ -69,10 +71,15 @@ var NEUTRAL_MIX = {
|
|
|
69
71
|
900: 90,
|
|
70
72
|
950: 95
|
|
71
73
|
};
|
|
72
|
-
var
|
|
73
|
-
light: { 50: 0.
|
|
74
|
-
dark: { 50: 0.
|
|
74
|
+
var TONE_LADDER = {
|
|
75
|
+
light: { 50: 0.975, 100: 0.945, 200: 0.895, 300: 0.82, 400: 0.725, 500: 0.63, 600: 0.55, 700: 0.47, 800: 0.4, 900: 0.33, 950: 0.27 },
|
|
76
|
+
dark: { 50: 0.215, 100: 0.25, 200: 0.31, 300: 0.39, 400: 0.5, 500: 0.6, 600: 0.69, 700: 0.77, 800: 0.84, 900: 0.895, 950: 0.94 }
|
|
75
77
|
};
|
|
78
|
+
var TONE_CHROMA_ENDS = {
|
|
79
|
+
light: { page: 0.12, ink: 0.52 },
|
|
80
|
+
dark: { page: 0.25, ink: 0.3 }
|
|
81
|
+
};
|
|
82
|
+
var TONE_SNAP = 1e4;
|
|
76
83
|
var LEAN = { amount: 0.5, cap: 15, fullAt: 0.06, maxHarmony: 2 };
|
|
77
84
|
var LEAN_REACH = LEAN.cap * LEAN.maxHarmony;
|
|
78
85
|
var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
|
|
@@ -85,6 +92,34 @@ function stepFrom(anchor, step, mode) {
|
|
|
85
92
|
const curve = STEP_CURVES[mode][step];
|
|
86
93
|
return { l: anchor.l + (curve.target - anchor.l) * curve.pull, c: anchor.c * curve.chroma };
|
|
87
94
|
}
|
|
95
|
+
function ladderDepth(l, mode) {
|
|
96
|
+
const top = TONE_LADDER[mode][50];
|
|
97
|
+
return mode === "light" ? top - l : l - top;
|
|
98
|
+
}
|
|
99
|
+
function toneAnchor(l, mode) {
|
|
100
|
+
const ladder = TONE_LADDER[mode];
|
|
101
|
+
let depth = 0;
|
|
102
|
+
for (let i = 1; i < PALETTE_STEPS.length; i++) {
|
|
103
|
+
const [before, at] = [ladder[PALETTE_STEPS[i - 1]], ladder[PALETTE_STEPS[i]]];
|
|
104
|
+
const mid = (before + at) / 2;
|
|
105
|
+
depth += Math.abs(at - before) * clamp((mode === "light" ? mid - l : l - mid) * TONE_SNAP, 0, 1);
|
|
106
|
+
}
|
|
107
|
+
return depth;
|
|
108
|
+
}
|
|
109
|
+
function toneStep(tone, step, mode) {
|
|
110
|
+
const end = ladderDepth(TONE_LADDER[mode][950], mode);
|
|
111
|
+
const at = ladderDepth(TONE_LADDER[mode][step], mode);
|
|
112
|
+
const anchor = toneAnchor(tone.l, mode);
|
|
113
|
+
const own = ladderDepth(tone.l, mode);
|
|
114
|
+
const pageSide = clamp((anchor - at) * TONE_SNAP, 0, 1);
|
|
115
|
+
const towardPage = at * own / Math.max(anchor, 1e-3);
|
|
116
|
+
const towardInk = own + (at - anchor) * (end - own) / Math.max(end - anchor, 1e-3);
|
|
117
|
+
const depth = pageSide * towardPage + (1 - pageSide) * towardInk;
|
|
118
|
+
const ends = TONE_CHROMA_ENDS[mode];
|
|
119
|
+
const share = pageSide * (1 - (1 - ends.page) * ((anchor - at) / Math.max(anchor, 1e-3))) + (1 - pageSide) * (1 - (1 - ends.ink) * ((at - anchor) / Math.max(end - anchor, 1e-3)));
|
|
120
|
+
const top = TONE_LADDER[mode][50];
|
|
121
|
+
return { l: mode === "light" ? top - depth : top + depth, c: tone.c * share, anchor: Math.abs(at - anchor) * TONE_SNAP < 1 };
|
|
122
|
+
}
|
|
88
123
|
export {
|
|
89
124
|
LEAN,
|
|
90
125
|
LEAN_REACH,
|
|
@@ -96,8 +131,13 @@ export {
|
|
|
96
131
|
PALETTE_STEPS,
|
|
97
132
|
PALETTE_TONES,
|
|
98
133
|
STEP_CURVES,
|
|
99
|
-
|
|
134
|
+
TONE_CHROMA_ENDS,
|
|
135
|
+
TONE_LADDER,
|
|
136
|
+
TONE_SNAP,
|
|
100
137
|
familyHue,
|
|
101
138
|
isPaletteColor,
|
|
102
|
-
|
|
139
|
+
ladderDepth,
|
|
140
|
+
stepFrom,
|
|
141
|
+
toneAnchor,
|
|
142
|
+
toneStep
|
|
103
143
|
};
|
package/dist/palette.css
CHANGED
|
@@ -127,83 +127,122 @@
|
|
|
127
127
|
--pink-800: oklch(from var(--_palette-pink) 0.38 min(0.16, calc(0.1516 + -0.00038 * clamp(0, (mod(h - 350 + 540, 360) - 180), 5) + -0.00027 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 5, 5) + -0.00014 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 10, 5))) h);
|
|
128
128
|
--pink-900: oklch(from var(--_palette-pink) 0.3125 min(0.132, calc(0.1248 + -0.00032 * clamp(0, (mod(h - 350 + 540, 360) - 180), 5) + -0.00022 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 5, 5) + -0.00012 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 10, 5))) h);
|
|
129
129
|
--pink-950: oklch(from var(--_palette-pink) 0.254 min(0.104, calc(0.1017 + -0.00026 * clamp(0, (mod(h - 350 + 540, 360) - 180), 5) + -0.00018 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 5, 5) + -0.00002 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 15, 5))) h);
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
--
|
|
133
|
-
--
|
|
134
|
-
--
|
|
135
|
-
--
|
|
136
|
-
--
|
|
137
|
-
--
|
|
138
|
-
--
|
|
139
|
-
--
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
146
|
-
--
|
|
147
|
-
--
|
|
148
|
-
--
|
|
149
|
-
--
|
|
150
|
-
--
|
|
151
|
-
--
|
|
152
|
-
--
|
|
153
|
-
--
|
|
154
|
-
--
|
|
155
|
-
--
|
|
156
|
-
--
|
|
157
|
-
--
|
|
158
|
-
--
|
|
159
|
-
--
|
|
160
|
-
--
|
|
161
|
-
--
|
|
162
|
-
--
|
|
163
|
-
--
|
|
164
|
-
--
|
|
165
|
-
--
|
|
166
|
-
--
|
|
167
|
-
--
|
|
168
|
-
--
|
|
169
|
-
--tone-
|
|
170
|
-
--tone-
|
|
171
|
-
--tone-
|
|
172
|
-
--tone-
|
|
173
|
-
--tone-
|
|
174
|
-
--tone-
|
|
175
|
-
--tone-
|
|
176
|
-
--tone-
|
|
177
|
-
--tone-
|
|
178
|
-
--tone-
|
|
179
|
-
--tone-
|
|
180
|
-
--tone-
|
|
181
|
-
--tone-
|
|
182
|
-
--tone-
|
|
183
|
-
--tone-
|
|
184
|
-
--tone-
|
|
185
|
-
--
|
|
186
|
-
--
|
|
187
|
-
--
|
|
188
|
-
--
|
|
189
|
-
--
|
|
190
|
-
--
|
|
191
|
-
--
|
|
192
|
-
--
|
|
193
|
-
--
|
|
194
|
-
--
|
|
195
|
-
--
|
|
196
|
-
--
|
|
197
|
-
--
|
|
198
|
-
--
|
|
199
|
-
--
|
|
200
|
-
--
|
|
201
|
-
--
|
|
202
|
-
--
|
|
203
|
-
--
|
|
204
|
-
--
|
|
205
|
-
--
|
|
206
|
-
--
|
|
130
|
+
/* Depths along the ladder, 0 at step 50: the step the tone snaps to, the
|
|
131
|
+
tone's own, and the room either side of it. */
|
|
132
|
+
--_tone-anchor: calc(0.03 * clamp(0, (0.96 - l) * 10000, 1) + 0.05 * clamp(0, (0.92 - l) * 10000, 1) + 0.075 * clamp(0, (0.8575 - l) * 10000, 1) + 0.095 * clamp(0, (0.7725 - l) * 10000, 1) + 0.095 * clamp(0, (0.6775 - l) * 10000, 1) + 0.08 * clamp(0, (0.59 - l) * 10000, 1) + 0.08 * clamp(0, (0.51 - l) * 10000, 1) + 0.07 * clamp(0, (0.435 - l) * 10000, 1) + 0.07 * clamp(0, (0.365 - l) * 10000, 1) + 0.06 * clamp(0, (0.3 - l) * 10000, 1));
|
|
133
|
+
--_tone-own: calc(0.975 - l);
|
|
134
|
+
--_tone-page: max(var(--_tone-anchor), 0.001);
|
|
135
|
+
--_tone-ink: max(0.705 - var(--_tone-anchor), 0.001);
|
|
136
|
+
--_tone-side-50: clamp(0, (var(--_tone-anchor) - 0) * 10000, 1);
|
|
137
|
+
--_tone-l-50: calc(0.975 - (var(--_tone-side-50) * 0 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-50)) * (var(--_tone-own) + (0 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
138
|
+
--_tone-c-50: min(calc(c * (1 - var(--_tone-side-50) * 0.88 * (var(--_tone-anchor) - 0) / var(--_tone-page) - (1 - var(--_tone-side-50)) * 0.48 * (0 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0113 + -0.000009 * clamp(0, mod(h, 360) - 0, 30) + 0.000542 * clamp(0, mod(h, 360) - 60, 30) + 0.000817 * clamp(0, mod(h, 360) - 90, 15) + -0.000074 * clamp(0, mod(h, 360) - 120, 30) + -0.000176 * clamp(0, mod(h, 360) - 150, 30) + 0.000122 * clamp(0, mod(h, 360) - 180, 15) + -0.000983 * clamp(0, mod(h, 360) - 195, 15) + -0.000249 * clamp(0, mod(h, 360) - 210, 30) + -0.000029 * clamp(0, mod(h, 360) - 240, 30) + 0.00007 * clamp(0, mod(h, 360) - 270, 30) + 0.000177 * clamp(0, mod(h, 360) - 300, 30) + -0.000231 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0 - var(--_tone-anchor), var(--_tone-anchor) - 0) * 10000, 1))));
|
|
139
|
+
--_tone-side-100: clamp(0, (var(--_tone-anchor) - 0.03) * 10000, 1);
|
|
140
|
+
--_tone-l-100: calc(0.975 - (var(--_tone-side-100) * 0.03 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-100)) * (var(--_tone-own) + (0.03 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
141
|
+
--_tone-c-100: min(calc(c * (1 - var(--_tone-side-100) * 0.88 * (var(--_tone-anchor) - 0.03) / var(--_tone-page) - (1 - var(--_tone-side-100)) * 0.48 * (0.03 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0219 + -0.000018 * clamp(0, mod(h, 360) - 0, 30) + 0.000201 * clamp(0, mod(h, 360) - 30, 30) + 0.000459 * clamp(0, mod(h, 360) - 60, 15) + 0.001352 * clamp(0, mod(h, 360) - 75, 15) + 0.002662 * clamp(0, mod(h, 360) - 90, 7.5) + 0.008793 * clamp(0, mod(h, 360) - 97.5, 7.5) + 0.024147 * clamp(0, mod(h, 360) - 105, 1.875) + 0.005307 * clamp(0, mod(h, 360) - 106.875, 1.875) + 0.001212 * clamp(0, mod(h, 360) - 108.75, 3.75) + 0.00169 * clamp(0, mod(h, 360) - 112.5, 1.875) + -0.008345 * clamp(0, mod(h, 360) - 114.375, 1.875) + -0.010247 * clamp(0, mod(h, 360) - 116.25, 3.75) + -0.004702 * clamp(0, mod(h, 360) - 120, 7.5) + -0.002666 * clamp(0, mod(h, 360) - 127.5, 7.5) + -0.001315 * clamp(0, mod(h, 360) - 135, 15) + -0.000474 * clamp(0, mod(h, 360) - 150, 15) + -0.000158 * clamp(0, mod(h, 360) - 165, 15) + 0.000062 * clamp(0, mod(h, 360) - 180, 15) + -0.001967 * clamp(0, mod(h, 360) - 195, 15) + -0.000455 * clamp(0, mod(h, 360) - 210, 30) + -0.000066 * clamp(0, mod(h, 360) - 240, 30) + 0.000138 * clamp(0, mod(h, 360) - 270, 30) + 0.000351 * clamp(0, mod(h, 360) - 300, 30) + -0.000447 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.03 - var(--_tone-anchor), var(--_tone-anchor) - 0.03) * 10000, 1))));
|
|
142
|
+
--_tone-side-200: clamp(0, (var(--_tone-anchor) - 0.08) * 10000, 1);
|
|
143
|
+
--_tone-l-200: calc(0.975 - (var(--_tone-side-200) * 0.08 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-200)) * (var(--_tone-own) + (0.08 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
144
|
+
--_tone-c-200: min(calc(c * (1 - var(--_tone-side-200) * 0.88 * (var(--_tone-anchor) - 0.08) / var(--_tone-page) - (1 - var(--_tone-side-200)) * 0.48 * (0.08 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0419 + 0.000013 * clamp(0, mod(h, 360) - 0, 30) + 0.000266 * clamp(0, mod(h, 360) - 30, 15) + 0.000419 * clamp(0, mod(h, 360) - 45, 15) + 0.000819 * clamp(0, mod(h, 360) - 60, 15) + 0.002483 * clamp(0, mod(h, 360) - 75, 15) + 0.006513 * clamp(0, mod(h, 360) - 90, 7.5) + 0.00678 * clamp(0, mod(h, 360) - 97.5, 3.75) + 0.000126 * clamp(0, mod(h, 360) - 101.25, 3.75) + 0.001413 * clamp(0, mod(h, 360) - 105, 15) + 0.002753 * clamp(0, mod(h, 360) - 120, 7.5) + 0.003436 * clamp(0, mod(h, 360) - 127.5, 1.875) + -0.004894 * clamp(0, mod(h, 360) - 129.375, 1.875) + -0.006766 * clamp(0, mod(h, 360) - 131.25, 3.75) + -0.003293 * clamp(0, mod(h, 360) - 135, 15) + -0.000558 * clamp(0, mod(h, 360) - 150, 30) + 0.000568 * clamp(0, mod(h, 360) - 180, 15) + -0.005322 * clamp(0, mod(h, 360) - 195, 7.5) + -0.002574 * clamp(0, mod(h, 360) - 202.5, 7.5) + -0.001381 * clamp(0, mod(h, 360) - 210, 15) + -0.000589 * clamp(0, mod(h, 360) - 225, 15) + -0.00021 * clamp(0, mod(h, 360) - 240, 30) + 0.000279 * clamp(0, mod(h, 360) - 270, 30) + 0.000848 * clamp(0, mod(h, 360) - 300, 15) + 0.001498 * clamp(0, mod(h, 360) - 315, 7.5) + -0.000366 * clamp(0, mod(h, 360) - 322.5, 7.5) + -0.000852 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.08 - var(--_tone-anchor), var(--_tone-anchor) - 0.08) * 10000, 1))));
|
|
145
|
+
--_tone-side-300: clamp(0, (var(--_tone-anchor) - 0.155) * 10000, 1);
|
|
146
|
+
--_tone-l-300: calc(0.975 - (var(--_tone-side-300) * 0.155 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-300)) * (var(--_tone-own) + (0.155 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
147
|
+
--_tone-c-300: min(calc(c * (1 - var(--_tone-side-300) * 0.88 * (var(--_tone-anchor) - 0.155) / var(--_tone-page) - (1 - var(--_tone-side-300)) * 0.48 * (0.155 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0784 + -0.000094 * clamp(0, mod(h, 360) - 0, 30) + 0.000669 * clamp(0, mod(h, 360) - 30, 30) + 0.001981 * clamp(0, mod(h, 360) - 60, 15) + 0.003511 * clamp(0, mod(h, 360) - 75, 7.5) + -0.000293 * clamp(0, mod(h, 360) - 82.5, 7.5) + 0.000794 * clamp(0, mod(h, 360) - 90, 30) + 0.003146 * clamp(0, mod(h, 360) - 120, 15) + 0.004732 * clamp(0, mod(h, 360) - 135, 7.5) + -0.006952 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.003178 * clamp(0, mod(h, 360) - 150, 15) + -0.001281 * clamp(0, mod(h, 360) - 165, 15) + -0.000558 * clamp(0, mod(h, 360) - 180, 15) + 0.000056 * clamp(0, mod(h, 360) - 195, 15) + -0.00223 * clamp(0, mod(h, 360) - 210, 15) + -0.001151 * clamp(0, mod(h, 360) - 225, 15) + -0.000358 * clamp(0, mod(h, 360) - 240, 30) + 0.000495 * clamp(0, mod(h, 360) - 270, 30) + 0.001534 * clamp(0, mod(h, 360) - 300, 15) + 0.002565 * clamp(0, mod(h, 360) - 315, 7.5) + 0.003848 * clamp(0, mod(h, 360) - 322.5, 3.75) + -0.003834 * clamp(0, mod(h, 360) - 326.25, 3.75) + -0.001558 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.155 - var(--_tone-anchor), var(--_tone-anchor) - 0.155) * 10000, 1))));
|
|
148
|
+
--_tone-side-400: clamp(0, (var(--_tone-anchor) - 0.25) * 10000, 1);
|
|
149
|
+
--_tone-l-400: calc(0.975 - (var(--_tone-side-400) * 0.25 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-400)) * (var(--_tone-own) + (0.25 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
150
|
+
--_tone-c-400: min(calc(c * (1 - var(--_tone-side-400) * 0.88 * (var(--_tone-anchor) - 0.25) / var(--_tone-page) - (1 - var(--_tone-side-400)) * 0.48 * (0.25 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1522 + -0.000786 * clamp(0, mod(h, 360) - 0, 15) + -0.000054 * clamp(0, mod(h, 360) - 15, 15) + 0.000603 * clamp(0, mod(h, 360) - 30, 15) + 0.001305 * clamp(0, mod(h, 360) - 45, 7.5) + -0.001086 * clamp(0, mod(h, 360) - 52.5, 7.5) + -0.000785 * clamp(0, mod(h, 360) - 60, 30) + 0.000855 * clamp(0, mod(h, 360) - 90, 30) + 0.0026 * clamp(0, mod(h, 360) - 120, 15) + 0.004193 * clamp(0, mod(h, 360) - 135, 7.5) + -0.006075 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.002757 * clamp(0, mod(h, 360) - 150, 15) + -0.001117 * clamp(0, mod(h, 360) - 165, 15) + -0.000484 * clamp(0, mod(h, 360) - 180, 15) + 0.000091 * clamp(0, mod(h, 360) - 195, 15) + 0.000766 * clamp(0, mod(h, 360) - 210, 15) + 0.001546 * clamp(0, mod(h, 360) - 225, 7.5) + -0.00084 * clamp(0, mod(h, 360) - 232.5, 7.5) + -0.000497 * clamp(0, mod(h, 360) - 240, 30) + 0.000595 * clamp(0, mod(h, 360) - 270, 15) + 0.000931 * clamp(0, mod(h, 360) - 285, 15) + 0.00244 * clamp(0, mod(h, 360) - 300, 15) + 0.004381 * clamp(0, mod(h, 360) - 315, 7.5) + 0.006615 * clamp(0, mod(h, 360) - 322.5, 3.75) + 0.004613 * clamp(0, mod(h, 360) - 326.25, 1.875) + -0.007903 * clamp(0, mod(h, 360) - 328.125, 1.875) + -0.003442 * clamp(0, mod(h, 360) - 330, 15) + -0.001484 * clamp(0, mod(h, 360) - 345, 15) + c * (1 - clamp(0, max(0.25 - var(--_tone-anchor), var(--_tone-anchor) - 0.25) * 10000, 1))));
|
|
151
|
+
--_tone-side-500: clamp(0, (var(--_tone-anchor) - 0.345) * 10000, 1);
|
|
152
|
+
--_tone-l-500: calc(0.975 - (var(--_tone-side-500) * 0.345 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-500)) * (var(--_tone-own) + (0.345 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
153
|
+
--_tone-c-500: min(calc(c * (1 - var(--_tone-side-500) * 0.88 * (var(--_tone-anchor) - 0.345) / var(--_tone-page) - (1 - var(--_tone-side-500)) * 0.48 * (0.345 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.2297 + -0.00087 * clamp(0, mod(h, 360) - 0, 15) + -0.000156 * clamp(0, mod(h, 360) - 15, 15) + -0.003371 * clamp(0, mod(h, 360) - 30, 7.5) + -0.003733 * clamp(0, mod(h, 360) - 37.5, 7.5) + -0.002139 * clamp(0, mod(h, 360) - 45, 15) + -0.000623 * clamp(0, mod(h, 360) - 60, 30) + 0.00071 * clamp(0, mod(h, 360) - 90, 30) + 0.002272 * clamp(0, mod(h, 360) - 120, 15) + 0.003612 * clamp(0, mod(h, 360) - 135, 7.5) + -0.005252 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.002386 * clamp(0, mod(h, 360) - 150, 15) + -0.000966 * clamp(0, mod(h, 360) - 165, 15) + -0.000419 * clamp(0, mod(h, 360) - 180, 15) + -0.00029 * clamp(0, mod(h, 360) - 195, 15) + 0.001094 * clamp(0, mod(h, 360) - 210, 30) + 0.003244 * clamp(0, mod(h, 360) - 240, 15) + -0.00072 * clamp(0, mod(h, 360) - 255, 15) + 0.001064 * clamp(0, mod(h, 360) - 270, 30) + 0.003883 * clamp(0, mod(h, 360) - 300, 15) + 0.006184 * clamp(0, mod(h, 360) - 315, 3.75) + -0.001182 * clamp(0, mod(h, 360) - 318.75, 3.75) + -0.0017 * clamp(0, mod(h, 360) - 322.5, 7.5) + -0.000986 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.345 - var(--_tone-anchor), var(--_tone-anchor) - 0.345) * 10000, 1))));
|
|
154
|
+
--_tone-side-600: clamp(0, (var(--_tone-anchor) - 0.425) * 10000, 1);
|
|
155
|
+
--_tone-l-600: calc(0.975 - (var(--_tone-side-600) * 0.425 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-600)) * (var(--_tone-own) + (0.425 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
156
|
+
--_tone-c-600: min(calc(c * (1 - var(--_tone-side-600) * 0.88 * (var(--_tone-anchor) - 0.425) / var(--_tone-page) - (1 - var(--_tone-side-600)) * 0.48 * (0.425 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.2015 + -0.000051 * clamp(0, mod(h, 360) - 0, 15) + 0.000362 * clamp(0, mod(h, 360) - 15, 7.5) + -0.000981 * clamp(0, mod(h, 360) - 22.5, 7.5) + -0.003888 * clamp(0, mod(h, 360) - 30, 15) + -0.001385 * clamp(0, mod(h, 360) - 45, 15) + -0.00081 * clamp(0, mod(h, 360) - 60, 15) + -0.000424 * clamp(0, mod(h, 360) - 75, 15) + 0.000537 * clamp(0, mod(h, 360) - 90, 30) + 0.002068 * clamp(0, mod(h, 360) - 120, 15) + 0.003372 * clamp(0, mod(h, 360) - 135, 7.5) + -0.005277 * clamp(0, mod(h, 360) - 142.5, 3.75) + -0.004283 * clamp(0, mod(h, 360) - 146.25, 3.75) + -0.00215 * clamp(0, mod(h, 360) - 150, 15) + -0.000981 * clamp(0, mod(h, 360) - 165, 15) + -0.000136 * clamp(0, mod(h, 360) - 180, 30) + 0.000635 * clamp(0, mod(h, 360) - 210, 15) + 0.001314 * clamp(0, mod(h, 360) - 225, 15) + 0.00245 * clamp(0, mod(h, 360) - 240, 7.5) + 0.003984 * clamp(0, mod(h, 360) - 247.5, 7.5) + 0.008466 * clamp(0, mod(h, 360) - 255, 3.75) + 0.00989 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.003961 * clamp(0, mod(h, 360) - 260.625, 1.875) + -0.000288 * clamp(0, mod(h, 360) - 262.5, 7.5) + 0.00062 * clamp(0, mod(h, 360) - 270, 15) + 0.002196 * clamp(0, mod(h, 360) - 285, 15) + -0.000732 * clamp(0, mod(h, 360) - 300, 15) + -0.001375 * clamp(0, mod(h, 360) - 315, 15) + -0.000872 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.425 - var(--_tone-anchor), var(--_tone-anchor) - 0.425) * 10000, 1))));
|
|
157
|
+
--_tone-side-700: clamp(0, (var(--_tone-anchor) - 0.505) * 10000, 1);
|
|
158
|
+
--_tone-l-700: calc(0.975 - (var(--_tone-side-700) * 0.505 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-700)) * (var(--_tone-own) + (0.505 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
159
|
+
--_tone-c-700: min(calc(c * (1 - var(--_tone-side-700) * 0.88 * (var(--_tone-anchor) - 0.505) / var(--_tone-page) - (1 - var(--_tone-side-700)) * 0.48 * (0.505 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1708 + -0.000057 * clamp(0, mod(h, 360) - 0, 15) + -0.000259 * clamp(0, mod(h, 360) - 15, 15) + -0.003292 * clamp(0, mod(h, 360) - 30, 15) + -0.001173 * clamp(0, mod(h, 360) - 45, 15) + -0.000686 * clamp(0, mod(h, 360) - 60, 15) + -0.000359 * clamp(0, mod(h, 360) - 75, 15) + 0.000454 * clamp(0, mod(h, 360) - 90, 30) + 0.001751 * clamp(0, mod(h, 360) - 120, 15) + 0.002645 * clamp(0, mod(h, 360) - 135, 7.5) + -0.004547 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.001299 * clamp(0, mod(h, 360) - 150, 30) + 0.000091 * clamp(0, mod(h, 360) - 180, 30) + 0.000402 * clamp(0, mod(h, 360) - 210, 15) + 0.001151 * clamp(0, mod(h, 360) - 225, 15) + 0.002172 * clamp(0, mod(h, 360) - 240, 7.5) + 0.003401 * clamp(0, mod(h, 360) - 247.5, 3.75) + 0.003496 * clamp(0, mod(h, 360) - 251.25, 3.75) + 0.006659 * clamp(0, mod(h, 360) - 255, 3.75) + 0.007137 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.007468 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.037834 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.006533 * clamp(0, mod(h, 360) - 264.375, 1.875) + 0.000122 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001517 * clamp(0, mod(h, 360) - 270, 7.5) + -0.0019 * clamp(0, mod(h, 360) - 277.5, 7.5) + -0.001459 * clamp(0, mod(h, 360) - 285, 15) + -0.001141 * clamp(0, mod(h, 360) - 300, 30) + -0.000724 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.505 - var(--_tone-anchor), var(--_tone-anchor) - 0.505) * 10000, 1))));
|
|
160
|
+
--_tone-side-800: clamp(0, (var(--_tone-anchor) - 0.575) * 10000, 1);
|
|
161
|
+
--_tone-l-800: calc(0.975 - (var(--_tone-side-800) * 0.575 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-800)) * (var(--_tone-own) + (0.575 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
162
|
+
--_tone-c-800: min(calc(c * (1 - var(--_tone-side-800) * 0.88 * (var(--_tone-anchor) - 0.575) / var(--_tone-page) - (1 - var(--_tone-side-800)) * 0.48 * (0.575 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1448 + -0.000053 * clamp(0, mod(h, 360) - 0, 15) + -0.000215 * clamp(0, mod(h, 360) - 15, 15) + -0.002791 * clamp(0, mod(h, 360) - 30, 15) + -0.000994 * clamp(0, mod(h, 360) - 45, 15) + -0.000581 * clamp(0, mod(h, 360) - 60, 15) + -0.000305 * clamp(0, mod(h, 360) - 75, 15) + 0.000385 * clamp(0, mod(h, 360) - 90, 30) + 0.001485 * clamp(0, mod(h, 360) - 120, 15) + 0.002238 * clamp(0, mod(h, 360) - 135, 7.5) + -0.003855 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.0011 * clamp(0, mod(h, 360) - 150, 30) + 0.000077 * clamp(0, mod(h, 360) - 180, 30) + 0.00034 * clamp(0, mod(h, 360) - 210, 15) + 0.000975 * clamp(0, mod(h, 360) - 225, 15) + 0.00173 * clamp(0, mod(h, 360) - 240, 7.5) + 0.002868 * clamp(0, mod(h, 360) - 247.5, 7.5) + 0.006077 * clamp(0, mod(h, 360) - 255, 3.75) + 0.005865 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.000171 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.04116 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.009057 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.00232 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001689 * clamp(0, mod(h, 360) - 270, 15) + -0.001194 * clamp(0, mod(h, 360) - 285, 15) + -0.000973 * clamp(0, mod(h, 360) - 300, 30) + -0.000609 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.575 - var(--_tone-anchor), var(--_tone-anchor) - 0.575) * 10000, 1))));
|
|
163
|
+
--_tone-side-900: clamp(0, (var(--_tone-anchor) - 0.645) * 10000, 1);
|
|
164
|
+
--_tone-l-900: calc(0.975 - (var(--_tone-side-900) * 0.645 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-900)) * (var(--_tone-own) + (0.645 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
165
|
+
--_tone-c-900: min(calc(c * (1 - var(--_tone-side-900) * 0.88 * (var(--_tone-anchor) - 0.645) / var(--_tone-page) - (1 - var(--_tone-side-900)) * 0.48 * (0.645 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1226 + -0.000045 * clamp(0, mod(h, 360) - 0, 15) + -0.000176 * clamp(0, mod(h, 360) - 15, 15) + -0.002365 * clamp(0, mod(h, 360) - 30, 15) + -0.000964 * clamp(0, mod(h, 360) - 45, 15) + -0.00036 * clamp(0, mod(h, 360) - 60, 30) + 0.000393 * clamp(0, mod(h, 360) - 90, 30) + 0.001204 * clamp(0, mod(h, 360) - 120, 15) + 0.001921 * clamp(0, mod(h, 360) - 135, 7.5) + -0.003277 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.00093 * clamp(0, mod(h, 360) - 150, 30) + 0.000064 * clamp(0, mod(h, 360) - 180, 30) + 0.000289 * clamp(0, mod(h, 360) - 210, 15) + 0.000826 * clamp(0, mod(h, 360) - 225, 15) + 0.001466 * clamp(0, mod(h, 360) - 240, 7.5) + 0.00243 * clamp(0, mod(h, 360) - 247.5, 7.5) + 0.005156 * clamp(0, mod(h, 360) - 255, 3.75) + 0.004975 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.000853 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.034656 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.007026 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.001961 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001428 * clamp(0, mod(h, 360) - 270, 15) + -0.001008 * clamp(0, mod(h, 360) - 285, 15) + -0.000822 * clamp(0, mod(h, 360) - 300, 30) + -0.000515 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.645 - var(--_tone-anchor), var(--_tone-anchor) - 0.645) * 10000, 1))));
|
|
166
|
+
--_tone-side-950: clamp(0, (var(--_tone-anchor) - 0.705) * 10000, 1);
|
|
167
|
+
--_tone-l-950: calc(0.975 - (var(--_tone-side-950) * 0.705 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-950)) * (var(--_tone-own) + (0.705 - var(--_tone-anchor)) * (0.705 - var(--_tone-own)) / var(--_tone-ink))));
|
|
168
|
+
--_tone-c-950: min(calc(c * (1 - var(--_tone-side-950) * 0.88 * (var(--_tone-anchor) - 0.705) / var(--_tone-page) - (1 - var(--_tone-side-950)) * 0.48 * (0.705 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1052 + -0.000039 * clamp(0, mod(h, 360) - 0, 15) + 0.000187 * clamp(0, mod(h, 360) - 15, 7.5) + -0.00118 * clamp(0, mod(h, 360) - 22.5, 7.5) + -0.001466 * clamp(0, mod(h, 360) - 30, 30) + -0.000054 * clamp(0, mod(h, 360) - 60, 30) + 0.000274 * clamp(0, mod(h, 360) - 90, 30) + 0.00109 * clamp(0, mod(h, 360) - 120, 15) + 0.001613 * clamp(0, mod(h, 360) - 135, 7.5) + -0.002807 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.0008 * clamp(0, mod(h, 360) - 150, 30) + 0.000056 * clamp(0, mod(h, 360) - 180, 30) + 0.000248 * clamp(0, mod(h, 360) - 210, 15) + 0.000513 * clamp(0, mod(h, 360) - 225, 15) + 0.001747 * clamp(0, mod(h, 360) - 240, 15) + 0.004981 * clamp(0, mod(h, 360) - 255, 3.75) + 0.004205 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.004499 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.024467 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.00439 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.000188 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001219 * clamp(0, mod(h, 360) - 270, 15) + -0.000864 * clamp(0, mod(h, 360) - 285, 15) + -0.000704 * clamp(0, mod(h, 360) - 300, 30) + -0.000443 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.705 - var(--_tone-anchor), var(--_tone-anchor) - 0.705) * 10000, 1))));
|
|
169
|
+
--tone-1-50: oklch(from var(--tone-1) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
170
|
+
--tone-1-100: oklch(from var(--tone-1) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
171
|
+
--tone-1-200: oklch(from var(--tone-1) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
172
|
+
--tone-1-300: oklch(from var(--tone-1) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
173
|
+
--tone-1-400: oklch(from var(--tone-1) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
174
|
+
--tone-1-500: oklch(from var(--tone-1) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
175
|
+
--tone-1-600: oklch(from var(--tone-1) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
176
|
+
--tone-1-700: oklch(from var(--tone-1) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
177
|
+
--tone-1-800: oklch(from var(--tone-1) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
178
|
+
--tone-1-900: oklch(from var(--tone-1) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
179
|
+
--tone-1-950: oklch(from var(--tone-1) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
180
|
+
--tone-2-50: oklch(from var(--tone-2) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
181
|
+
--tone-2-100: oklch(from var(--tone-2) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
182
|
+
--tone-2-200: oklch(from var(--tone-2) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
183
|
+
--tone-2-300: oklch(from var(--tone-2) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
184
|
+
--tone-2-400: oklch(from var(--tone-2) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
185
|
+
--tone-2-500: oklch(from var(--tone-2) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
186
|
+
--tone-2-600: oklch(from var(--tone-2) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
187
|
+
--tone-2-700: oklch(from var(--tone-2) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
188
|
+
--tone-2-800: oklch(from var(--tone-2) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
189
|
+
--tone-2-900: oklch(from var(--tone-2) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
190
|
+
--tone-2-950: oklch(from var(--tone-2) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
191
|
+
--tone-3-50: oklch(from var(--tone-3) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
192
|
+
--tone-3-100: oklch(from var(--tone-3) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
193
|
+
--tone-3-200: oklch(from var(--tone-3) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
194
|
+
--tone-3-300: oklch(from var(--tone-3) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
195
|
+
--tone-3-400: oklch(from var(--tone-3) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
196
|
+
--tone-3-500: oklch(from var(--tone-3) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
197
|
+
--tone-3-600: oklch(from var(--tone-3) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
198
|
+
--tone-3-700: oklch(from var(--tone-3) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
199
|
+
--tone-3-800: oklch(from var(--tone-3) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
200
|
+
--tone-3-900: oklch(from var(--tone-3) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
201
|
+
--tone-3-950: oklch(from var(--tone-3) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
202
|
+
--tone-info-50: oklch(from var(--tone-info) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
203
|
+
--tone-info-100: oklch(from var(--tone-info) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
204
|
+
--tone-info-200: oklch(from var(--tone-info) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
205
|
+
--tone-info-300: oklch(from var(--tone-info) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
206
|
+
--tone-info-400: oklch(from var(--tone-info) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
207
|
+
--tone-info-500: oklch(from var(--tone-info) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
208
|
+
--tone-info-600: oklch(from var(--tone-info) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
209
|
+
--tone-info-700: oklch(from var(--tone-info) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
210
|
+
--tone-info-800: oklch(from var(--tone-info) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
211
|
+
--tone-info-900: oklch(from var(--tone-info) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
212
|
+
--tone-info-950: oklch(from var(--tone-info) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
213
|
+
--tone-warning-50: oklch(from var(--tone-warning) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
214
|
+
--tone-warning-100: oklch(from var(--tone-warning) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
215
|
+
--tone-warning-200: oklch(from var(--tone-warning) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
216
|
+
--tone-warning-300: oklch(from var(--tone-warning) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
217
|
+
--tone-warning-400: oklch(from var(--tone-warning) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
218
|
+
--tone-warning-500: oklch(from var(--tone-warning) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
219
|
+
--tone-warning-600: oklch(from var(--tone-warning) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
220
|
+
--tone-warning-700: oklch(from var(--tone-warning) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
221
|
+
--tone-warning-800: oklch(from var(--tone-warning) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
222
|
+
--tone-warning-900: oklch(from var(--tone-warning) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
223
|
+
--tone-warning-950: oklch(from var(--tone-warning) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
224
|
+
--success-50: oklch(from var(--success) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
225
|
+
--success-100: oklch(from var(--success) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
226
|
+
--success-200: oklch(from var(--success) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
227
|
+
--success-300: oklch(from var(--success) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
228
|
+
--success-400: oklch(from var(--success) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
229
|
+
--success-500: oklch(from var(--success) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
230
|
+
--success-600: oklch(from var(--success) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
231
|
+
--success-700: oklch(from var(--success) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
232
|
+
--success-800: oklch(from var(--success) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
233
|
+
--success-900: oklch(from var(--success) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
234
|
+
--success-950: oklch(from var(--success) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
235
|
+
--destructive-50: oklch(from var(--destructive) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
236
|
+
--destructive-100: oklch(from var(--destructive) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
237
|
+
--destructive-200: oklch(from var(--destructive) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
238
|
+
--destructive-300: oklch(from var(--destructive) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
239
|
+
--destructive-400: oklch(from var(--destructive) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
240
|
+
--destructive-500: oklch(from var(--destructive) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
241
|
+
--destructive-600: oklch(from var(--destructive) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
242
|
+
--destructive-700: oklch(from var(--destructive) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
243
|
+
--destructive-800: oklch(from var(--destructive) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
244
|
+
--destructive-900: oklch(from var(--destructive) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
245
|
+
--destructive-950: oklch(from var(--destructive) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
207
246
|
}
|
|
208
247
|
|
|
209
248
|
:where(.dark, .dark [data-sable-theme]:not(.light)) {
|
|
@@ -229,17 +268,17 @@
|
|
|
229
268
|
--orange-800: oklch(from var(--_palette-orange) 0.866 min(0.102, calc(0.0749 + -0.00044 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180), 5) + -0.00031 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180) - 5, 5) + -0.0002 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180) - 10, 5))) h);
|
|
230
269
|
--orange-900: oklch(from var(--_palette-orange) 0.905 min(0.0714, calc(0.0514 + -0.00031 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180), 5) + -0.00022 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180) - 5, 5) + -0.00014 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180) - 10, 5))) h);
|
|
231
270
|
--orange-950: oklch(from var(--_palette-orange) 0.9388 min(0.0476, calc(0.0322 + -0.0002 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180), 5) + -0.00014 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180) - 5, 5) + -0.00009 * clamp(0, -1 * (mod(h - 50 + 540, 360) - 180) - 10, 5))) h);
|
|
232
|
-
--yellow-50: oklch(from var(--_palette-yellow) 0.
|
|
233
|
-
--yellow-100: oklch(from var(--_palette-yellow) 0.
|
|
234
|
-
--yellow-200: oklch(from var(--_palette-yellow) 0.
|
|
235
|
-
--yellow-300: oklch(from var(--_palette-yellow) 0.
|
|
236
|
-
--yellow-400: oklch(from var(--_palette-yellow) 0.
|
|
237
|
-
--yellow-500: oklch(from var(--_palette-yellow) 0.
|
|
238
|
-
--yellow-600: oklch(from var(--_palette-yellow) 0.
|
|
239
|
-
--yellow-700: oklch(from var(--_palette-yellow) 0.
|
|
240
|
-
--yellow-800: oklch(from var(--_palette-yellow) 0.
|
|
241
|
-
--yellow-900: oklch(from var(--_palette-yellow) 0.
|
|
242
|
-
--yellow-950: oklch(from var(--_palette-yellow) 0.
|
|
271
|
+
--yellow-50: oklch(from var(--_palette-yellow) 0.2127 0.0375 h);
|
|
272
|
+
--yellow-100: oklch(from var(--_palette-yellow) 0.2615 0.048 h);
|
|
273
|
+
--yellow-200: oklch(from var(--_palette-yellow) 0.353 0.0675 h);
|
|
274
|
+
--yellow-300: oklch(from var(--_palette-yellow) 0.475 0.093 h);
|
|
275
|
+
--yellow-400: oklch(from var(--_palette-yellow) 0.6153 min(0.123, calc(0.122)) h);
|
|
276
|
+
--yellow-500: oklch(from var(--_palette-yellow) 0.78 0.15 h);
|
|
277
|
+
--yellow-600: oklch(from var(--_palette-yellow) 0.818 min(0.1425, calc(0.1622 + -0.00309 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 10, 5) + -0.00239 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 15, 5) + -0.00187 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 20, 5))) h);
|
|
278
|
+
--yellow-700: oklch(from var(--_palette-yellow) 0.8598 min(0.12, calc(0.1591 + -0.00434 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180), 5) + -0.00317 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 5, 5) + -0.00238 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 10, 5) + -0.00183 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 15, 5) + -0.00143 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 20, 5))) h);
|
|
279
|
+
--yellow-800: oklch(from var(--_palette-yellow) 0.894 min(0.09, calc(0.1188 + -0.00333 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180), 5) + -0.00241 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 5, 5) + -0.00181 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 10, 5) + -0.00138 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 15, 5) + -0.00107 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 20, 5))) h);
|
|
280
|
+
--yellow-900: oklch(from var(--_palette-yellow) 0.9225 min(0.063, calc(0.086 + -0.00247 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180), 5) + -0.00178 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 5, 5) + -0.00132 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 10, 5) + -0.00101 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 15, 5) + -0.00078 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 20, 5))) h);
|
|
281
|
+
--yellow-950: oklch(from var(--_palette-yellow) 0.9472 min(0.042, calc(0.0582 + -0.00701 * clamp(0, (mod(h - 92 + 540, 360) - 180) - 20, 5) + -0.00171 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180), 5) + -0.00122 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 5, 5) + -0.0009 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 10, 5) + -0.00069 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 15, 5) + -0.00053 * clamp(0, -1 * (mod(h - 92 + 540, 360) - 180) - 20, 5))) h);
|
|
243
282
|
--green-50: oklch(from var(--_palette-green) 0.2057 min(0.04, calc(0.0556 + -0.00114 * clamp(0, (mod(h - 145 + 540, 360) - 180), 5) + -0.00085 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 5, 5) + -0.00065 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 10, 5) + -0.0005 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 15, 5) + -0.00038 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 20, 5) + -0.00093 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 5, 5) + -0.00072 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 10, 5) + -0.00056 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 15, 5) + -0.00044 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 20, 5))) h);
|
|
244
283
|
--green-100: oklch(from var(--_palette-green) 0.2465 min(0.0512, calc(0.0663 + -0.00136 * clamp(0, (mod(h - 145 + 540, 360) - 180), 5) + -0.00101 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 5, 5) + -0.00077 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 10, 5) + -0.00059 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 15, 5) + -0.00045 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 20, 5) + -0.00111 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 5, 5) + -0.00086 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 10, 5) + -0.00067 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 15, 5) + -0.00052 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 20, 5))) h);
|
|
245
284
|
--green-200: oklch(from var(--_palette-green) 0.323 min(0.072, calc(0.0866 + -0.00177 * clamp(0, (mod(h - 145 + 540, 360) - 180), 5) + -0.00132 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 5, 5) + -0.001 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 10, 5) + -0.00077 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 15, 5) + -0.00059 * clamp(0, (mod(h - 145 + 540, 360) - 180) - 20, 5) + -0.00144 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 5, 5) + -0.00112 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 10, 5) + -0.00087 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 15, 5) + -0.00068 * clamp(0, -1 * (mod(h - 145 + 540, 360) - 180) - 20, 5))) h);
|
|
@@ -295,83 +334,122 @@
|
|
|
295
334
|
--pink-800: oklch(from var(--_palette-pink) 0.858 min(0.108, calc(0.0841 + -0.00067 * clamp(0, (mod(h - 350 + 540, 360) - 180), 5) + -0.00051 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 5, 5) + -0.00037 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 10, 5) + -0.00025 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 15, 5) + -0.00013 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 20, 5))) h);
|
|
296
335
|
--pink-900: oklch(from var(--_palette-pink) 0.9 min(0.0756, calc(0.0569 + -0.00045 * clamp(0, (mod(h - 350 + 540, 360) - 180), 5) + -0.00034 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 5, 5) + -0.00025 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 10, 5) + -0.00016 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 15, 5))) h);
|
|
297
336
|
--pink-950: oklch(from var(--_palette-pink) 0.9364 min(0.0504, calc(0.0349 + -0.00028 * clamp(0, (mod(h - 350 + 540, 360) - 180), 5) + -0.00021 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 5, 5) + -0.00015 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 10, 5) + -0.0001 * clamp(0, (mod(h - 350 + 540, 360) - 180) - 15, 5))) h);
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
--
|
|
301
|
-
--
|
|
302
|
-
--
|
|
303
|
-
--
|
|
304
|
-
--
|
|
305
|
-
--
|
|
306
|
-
--
|
|
307
|
-
--
|
|
308
|
-
--
|
|
309
|
-
--
|
|
310
|
-
--
|
|
311
|
-
--
|
|
312
|
-
--
|
|
313
|
-
--
|
|
314
|
-
--
|
|
315
|
-
--
|
|
316
|
-
--
|
|
317
|
-
--
|
|
318
|
-
--
|
|
319
|
-
--
|
|
320
|
-
--
|
|
321
|
-
--
|
|
322
|
-
--
|
|
323
|
-
--
|
|
324
|
-
--
|
|
325
|
-
--
|
|
326
|
-
--
|
|
327
|
-
--
|
|
328
|
-
--
|
|
329
|
-
--
|
|
330
|
-
--
|
|
331
|
-
--
|
|
332
|
-
--
|
|
333
|
-
--
|
|
334
|
-
--
|
|
335
|
-
--
|
|
336
|
-
--
|
|
337
|
-
--tone-
|
|
338
|
-
--tone-
|
|
339
|
-
--tone-
|
|
340
|
-
--tone-
|
|
341
|
-
--tone-
|
|
342
|
-
--tone-
|
|
343
|
-
--tone-
|
|
344
|
-
--tone-
|
|
345
|
-
--tone-
|
|
346
|
-
--tone-
|
|
347
|
-
--tone-
|
|
348
|
-
--tone-
|
|
349
|
-
--tone-
|
|
350
|
-
--tone-
|
|
351
|
-
--tone-
|
|
352
|
-
--tone-
|
|
353
|
-
--
|
|
354
|
-
--
|
|
355
|
-
--
|
|
356
|
-
--
|
|
357
|
-
--
|
|
358
|
-
--
|
|
359
|
-
--
|
|
360
|
-
--
|
|
361
|
-
--
|
|
362
|
-
--
|
|
363
|
-
--
|
|
364
|
-
--
|
|
365
|
-
--
|
|
366
|
-
--
|
|
367
|
-
--
|
|
368
|
-
--
|
|
369
|
-
--
|
|
370
|
-
--
|
|
371
|
-
--
|
|
372
|
-
--
|
|
373
|
-
--
|
|
374
|
-
--
|
|
337
|
+
/* Depths along the ladder, 0 at step 50: the step the tone snaps to, the
|
|
338
|
+
tone's own, and the room either side of it. */
|
|
339
|
+
--_tone-anchor: calc(0.035 * clamp(0, (l - 0.2325) * 10000, 1) + 0.06 * clamp(0, (l - 0.28) * 10000, 1) + 0.08 * clamp(0, (l - 0.35) * 10000, 1) + 0.11 * clamp(0, (l - 0.445) * 10000, 1) + 0.1 * clamp(0, (l - 0.55) * 10000, 1) + 0.09 * clamp(0, (l - 0.645) * 10000, 1) + 0.08 * clamp(0, (l - 0.73) * 10000, 1) + 0.07 * clamp(0, (l - 0.805) * 10000, 1) + 0.055 * clamp(0, (l - 0.8675) * 10000, 1) + 0.045 * clamp(0, (l - 0.9175) * 10000, 1));
|
|
340
|
+
--_tone-own: calc(l - 0.215);
|
|
341
|
+
--_tone-page: max(var(--_tone-anchor), 0.001);
|
|
342
|
+
--_tone-ink: max(0.725 - var(--_tone-anchor), 0.001);
|
|
343
|
+
--_tone-side-50: clamp(0, (var(--_tone-anchor) - 0) * 10000, 1);
|
|
344
|
+
--_tone-l-50: calc(0.215 + (var(--_tone-side-50) * 0 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-50)) * (var(--_tone-own) + (0 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
345
|
+
--_tone-c-50: min(calc(c * (1 - var(--_tone-side-50) * 0.75 * (var(--_tone-anchor) - 0) / var(--_tone-page) - (1 - var(--_tone-side-50)) * 0.7 * (0 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0825 + -0.000186 * clamp(0, mod(h, 360) - 0, 30) + -0.001097 * clamp(0, mod(h, 360) - 30, 30) + -0.000088 * clamp(0, mod(h, 360) - 60, 30) + 0.000221 * clamp(0, mod(h, 360) - 90, 30) + 0.000876 * clamp(0, mod(h, 360) - 120, 15) + 0.001277 * clamp(0, mod(h, 360) - 135, 7.5) + -0.002254 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.000639 * clamp(0, mod(h, 360) - 150, 30) + -0.000024 * clamp(0, mod(h, 360) - 180, 30) + 0.000337 * clamp(0, mod(h, 360) - 210, 30) + 0.001579 * clamp(0, mod(h, 360) - 240, 15) + 0.001977 * clamp(0, mod(h, 360) - 255, 7.5) + c * (1 - clamp(0, max(0 - var(--_tone-anchor), var(--_tone-anchor) - 0) * 10000, 1))));
|
|
346
|
+
--_tone-side-100: clamp(0, (var(--_tone-anchor) - 0.035) * 10000, 1);
|
|
347
|
+
--_tone-l-100: calc(0.215 + (var(--_tone-side-100) * 0.035 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-100)) * (var(--_tone-own) + (0.035 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
348
|
+
--_tone-c-100: min(calc(c * (1 - var(--_tone-side-100) * 0.75 * (var(--_tone-anchor) - 0.035) / var(--_tone-page) - (1 - var(--_tone-side-100)) * 0.7 * (0.035 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0934 + -0.00024 * clamp(0, mod(h, 360) - 0, 30) + -0.00127 * clamp(0, mod(h, 360) - 30, 30) + -0.00007 * clamp(0, mod(h, 360) - 60, 30) + 0.000244 * clamp(0, mod(h, 360) - 90, 30) + 0.000973 * clamp(0, mod(h, 360) - 120, 15) + 0.00143 * clamp(0, mod(h, 360) - 135, 7.5) + -0.002504 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.000712 * clamp(0, mod(h, 360) - 150, 30) + 0.000049 * clamp(0, mod(h, 360) - 180, 30) + 0.000221 * clamp(0, mod(h, 360) - 210, 15) + 0.000457 * clamp(0, mod(h, 360) - 225, 15) + 0.001559 * clamp(0, mod(h, 360) - 240, 15) + 0.004453 * clamp(0, mod(h, 360) - 255, 3.75) + 0.003756 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.002023 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.026032 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.004165 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.001493 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001086 * clamp(0, mod(h, 360) - 270, 15) + -0.000765 * clamp(0, mod(h, 360) - 285, 15) + -0.000614 * clamp(0, mod(h, 360) - 300, 30) + -0.000416 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.035 - var(--_tone-anchor), var(--_tone-anchor) - 0.035) * 10000, 1))));
|
|
349
|
+
--_tone-side-200: clamp(0, (var(--_tone-anchor) - 0.095) * 10000, 1);
|
|
350
|
+
--_tone-l-200: calc(0.215 + (var(--_tone-side-200) * 0.095 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-200)) * (var(--_tone-own) + (0.095 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
351
|
+
--_tone-c-200: min(calc(c * (1 - var(--_tone-side-200) * 0.75 * (var(--_tone-anchor) - 0.095) / var(--_tone-page) - (1 - var(--_tone-side-200)) * 0.7 * (0.095 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1129 + -0.000042 * clamp(0, mod(h, 360) - 0, 15) + 0.000189 * clamp(0, mod(h, 360) - 15, 7.5) + 0.000259 * clamp(0, mod(h, 360) - 22.5, 3.75) + -0.002796 * clamp(0, mod(h, 360) - 26.25, 3.75) + -0.001569 * clamp(0, mod(h, 360) - 30, 30) + -0.00006 * clamp(0, mod(h, 360) - 60, 30) + 0.000294 * clamp(0, mod(h, 360) - 90, 30) + 0.001168 * clamp(0, mod(h, 360) - 120, 15) + 0.001734 * clamp(0, mod(h, 360) - 135, 7.5) + -0.00301 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.000858 * clamp(0, mod(h, 360) - 150, 30) + 0.00006 * clamp(0, mod(h, 360) - 180, 30) + 0.000266 * clamp(0, mod(h, 360) - 210, 15) + 0.000551 * clamp(0, mod(h, 360) - 225, 15) + 0.001873 * clamp(0, mod(h, 360) - 240, 15) + 0.005335 * clamp(0, mod(h, 360) - 255, 3.75) + 0.004506 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.001722 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.031806 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.005581 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.001805 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001314 * clamp(0, mod(h, 360) - 270, 15) + -0.000927 * clamp(0, mod(h, 360) - 285, 15) + -0.000757 * clamp(0, mod(h, 360) - 300, 30) + -0.000475 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.095 - var(--_tone-anchor), var(--_tone-anchor) - 0.095) * 10000, 1))));
|
|
352
|
+
--_tone-side-300: clamp(0, (var(--_tone-anchor) - 0.175) * 10000, 1);
|
|
353
|
+
--_tone-l-300: calc(0.215 + (var(--_tone-side-300) * 0.175 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-300)) * (var(--_tone-own) + (0.175 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
354
|
+
--_tone-c-300: min(calc(c * (1 - var(--_tone-side-300) * 0.75 * (var(--_tone-anchor) - 0.175) / var(--_tone-page) - (1 - var(--_tone-side-300)) * 0.7 * (0.175 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.139 + -0.000051 * clamp(0, mod(h, 360) - 0, 15) + -0.000205 * clamp(0, mod(h, 360) - 15, 15) + -0.002679 * clamp(0, mod(h, 360) - 30, 15) + -0.000954 * clamp(0, mod(h, 360) - 45, 15) + -0.000558 * clamp(0, mod(h, 360) - 60, 15) + -0.000292 * clamp(0, mod(h, 360) - 75, 15) + 0.00037 * clamp(0, mod(h, 360) - 90, 30) + 0.001426 * clamp(0, mod(h, 360) - 120, 15) + 0.002147 * clamp(0, mod(h, 360) - 135, 7.5) + -0.003701 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.001056 * clamp(0, mod(h, 360) - 150, 30) + 0.000074 * clamp(0, mod(h, 360) - 180, 30) + 0.000327 * clamp(0, mod(h, 360) - 210, 15) + 0.000936 * clamp(0, mod(h, 360) - 225, 15) + 0.001661 * clamp(0, mod(h, 360) - 240, 7.5) + 0.002753 * clamp(0, mod(h, 360) - 247.5, 7.5) + 0.005836 * clamp(0, mod(h, 360) - 255, 3.75) + 0.005632 * clamp(0, mod(h, 360) - 258.75, 1.875) + 0.00032 * clamp(0, mod(h, 360) - 260.625, 1.875) + 0.039469 * clamp(0, mod(h, 360) - 262.5, 1.875) + 0.008554 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.002226 * clamp(0, mod(h, 360) - 266.25, 3.75) + -0.001621 * clamp(0, mod(h, 360) - 270, 15) + -0.001145 * clamp(0, mod(h, 360) - 285, 15) + -0.000934 * clamp(0, mod(h, 360) - 300, 30) + -0.000584 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.175 - var(--_tone-anchor), var(--_tone-anchor) - 0.175) * 10000, 1))));
|
|
355
|
+
--_tone-side-400: clamp(0, (var(--_tone-anchor) - 0.285) * 10000, 1);
|
|
356
|
+
--_tone-l-400: calc(0.215 + (var(--_tone-side-400) * 0.285 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-400)) * (var(--_tone-own) + (0.285 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
357
|
+
--_tone-c-400: min(calc(c * (1 - var(--_tone-side-400) * 0.75 * (var(--_tone-anchor) - 0.285) / var(--_tone-page) - (1 - var(--_tone-side-400)) * 0.7 * (0.285 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1806 + -0.000069 * clamp(0, mod(h, 360) - 0, 15) + -0.000275 * clamp(0, mod(h, 360) - 15, 15) + -0.003478 * clamp(0, mod(h, 360) - 30, 15) + -0.001239 * clamp(0, mod(h, 360) - 45, 15) + -0.000724 * clamp(0, mod(h, 360) - 60, 15) + -0.00038 * clamp(0, mod(h, 360) - 75, 15) + 0.00048 * clamp(0, mod(h, 360) - 90, 30) + 0.00185 * clamp(0, mod(h, 360) - 120, 15) + 0.002796 * clamp(0, mod(h, 360) - 135, 7.5) + -0.004804 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.001373 * clamp(0, mod(h, 360) - 150, 30) + 0.000096 * clamp(0, mod(h, 360) - 180, 30) + 0.000424 * clamp(0, mod(h, 360) - 210, 15) + 0.001216 * clamp(0, mod(h, 360) - 225, 15) + 0.002157 * clamp(0, mod(h, 360) - 240, 7.5) + 0.003574 * clamp(0, mod(h, 360) - 247.5, 7.5) + 0.007182 * clamp(0, mod(h, 360) - 255, 3.75) + 0.011907 * clamp(0, mod(h, 360) - 258.75, 3.75) + 0.014848 * clamp(0, mod(h, 360) - 262.5, 1.875) + -0.000147 * clamp(0, mod(h, 360) - 264.375, 1.875) + -0.000493 * clamp(0, mod(h, 360) - 266.25, 3.75) + 0.000837 * clamp(0, mod(h, 360) - 270, 15) + -0.000963 * clamp(0, mod(h, 360) - 285, 15) + -0.001222 * clamp(0, mod(h, 360) - 300, 30) + -0.000755 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.285 - var(--_tone-anchor), var(--_tone-anchor) - 0.285) * 10000, 1))));
|
|
358
|
+
--_tone-side-500: clamp(0, (var(--_tone-anchor) - 0.385) * 10000, 1);
|
|
359
|
+
--_tone-l-500: calc(0.215 + (var(--_tone-side-500) * 0.385 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-500)) * (var(--_tone-own) + (0.385 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
360
|
+
--_tone-c-500: min(calc(c * (1 - var(--_tone-side-500) * 0.75 * (var(--_tone-anchor) - 0.385) / var(--_tone-page) - (1 - var(--_tone-side-500)) * 0.7 * (0.385 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.217 + -0.000054 * clamp(0, mod(h, 360) - 0, 15) + 0.000367 * clamp(0, mod(h, 360) - 15, 7.5) + 0.000491 * clamp(0, mod(h, 360) - 22.5, 3.75) + -0.002588 * clamp(0, mod(h, 360) - 26.25, 3.75) + -0.004174 * clamp(0, mod(h, 360) - 30, 15) + -0.001498 * clamp(0, mod(h, 360) - 45, 15) + -0.000871 * clamp(0, mod(h, 360) - 60, 15) + -0.000457 * clamp(0, mod(h, 360) - 75, 15) + 0.000578 * clamp(0, mod(h, 360) - 90, 30) + 0.002226 * clamp(0, mod(h, 360) - 120, 15) + 0.003369 * clamp(0, mod(h, 360) - 135, 7.5) + -0.004949 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.00226 * clamp(0, mod(h, 360) - 150, 15) + -0.000911 * clamp(0, mod(h, 360) - 165, 15) + -0.000397 * clamp(0, mod(h, 360) - 180, 15) + 0.000075 * clamp(0, mod(h, 360) - 195, 15) + 0.000515 * clamp(0, mod(h, 360) - 210, 15) + 0.001462 * clamp(0, mod(h, 360) - 225, 15) + 0.002597 * clamp(0, mod(h, 360) - 240, 7.5) + 0.004654 * clamp(0, mod(h, 360) - 247.5, 7.5) + 0.003382 * clamp(0, mod(h, 360) - 255, 3.75) + -0.000428 * clamp(0, mod(h, 360) - 258.75, 3.75) + -0.001147 * clamp(0, mod(h, 360) - 262.5, 7.5) + 0.001206 * clamp(0, mod(h, 360) - 270, 30) + 0.003477 * clamp(0, mod(h, 360) - 300, 15) + -0.001481 * clamp(0, mod(h, 360) - 315, 15) + -0.000939 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.385 - var(--_tone-anchor), var(--_tone-anchor) - 0.385) * 10000, 1))));
|
|
361
|
+
--_tone-side-600: clamp(0, (var(--_tone-anchor) - 0.475) * 10000, 1);
|
|
362
|
+
--_tone-l-600: calc(0.215 + (var(--_tone-side-600) * 0.475 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-600)) * (var(--_tone-own) + (0.475 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
363
|
+
--_tone-c-600: min(calc(c * (1 - var(--_tone-side-600) * 0.75 * (var(--_tone-anchor) - 0.475) / var(--_tone-page) - (1 - var(--_tone-side-600)) * 0.7 * (0.475 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1814 + -0.000953 * clamp(0, mod(h, 360) - 0, 15) + -0.000085 * clamp(0, mod(h, 360) - 15, 15) + 0.000643 * clamp(0, mod(h, 360) - 30, 15) + -0.002141 * clamp(0, mod(h, 360) - 45, 15) + -0.00073 * clamp(0, mod(h, 360) - 60, 30) + 0.000807 * clamp(0, mod(h, 360) - 90, 30) + 0.002494 * clamp(0, mod(h, 360) - 120, 15) + 0.004004 * clamp(0, mod(h, 360) - 135, 7.5) + -0.005808 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.002637 * clamp(0, mod(h, 360) - 150, 15) + -0.001068 * clamp(0, mod(h, 360) - 165, 15) + -0.000463 * clamp(0, mod(h, 360) - 180, 15) + -0.000321 * clamp(0, mod(h, 360) - 195, 15) + 0.00121 * clamp(0, mod(h, 360) - 210, 30) + 0.003332 * clamp(0, mod(h, 360) - 240, 3.75) + -0.001024 * clamp(0, mod(h, 360) - 243.75, 3.75) + -0.000839 * clamp(0, mod(h, 360) - 247.5, 7.5) + -0.000242 * clamp(0, mod(h, 360) - 255, 15) + 0.000423 * clamp(0, mod(h, 360) - 270, 15) + 0.00113 * clamp(0, mod(h, 360) - 285, 15) + 0.002822 * clamp(0, mod(h, 360) - 300, 15) + 0.005129 * clamp(0, mod(h, 360) - 315, 7.5) + 0.007712 * clamp(0, mod(h, 360) - 322.5, 3.75) + 0.007836 * clamp(0, mod(h, 360) - 326.25, 1.875) + -0.008331 * clamp(0, mod(h, 360) - 328.125, 1.875) + -0.004069 * clamp(0, mod(h, 360) - 330, 15) + -0.00179 * clamp(0, mod(h, 360) - 345, 15) + c * (1 - clamp(0, max(0.475 - var(--_tone-anchor), var(--_tone-anchor) - 0.475) * 10000, 1))));
|
|
364
|
+
--_tone-side-700: clamp(0, (var(--_tone-anchor) - 0.555) * 10000, 1);
|
|
365
|
+
--_tone-l-700: calc(0.215 + (var(--_tone-side-700) * 0.555 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-700)) * (var(--_tone-own) + (0.555 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
366
|
+
--_tone-c-700: min(calc(c * (1 - var(--_tone-side-700) * 0.75 * (var(--_tone-anchor) - 0.555) / var(--_tone-page) - (1 - var(--_tone-side-700)) * 0.7 * (0.555 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.1216 + -0.000617 * clamp(0, mod(h, 360) - 0, 15) + -0.000313 * clamp(0, mod(h, 360) - 15, 15) + 0.000847 * clamp(0, mod(h, 360) - 30, 30) + 0.002699 * clamp(0, mod(h, 360) - 60, 7.5) + -0.00041 * clamp(0, mod(h, 360) - 67.5, 7.5) + -0.000695 * clamp(0, mod(h, 360) - 75, 15) + 0.000784 * clamp(0, mod(h, 360) - 90, 30) + 0.002921 * clamp(0, mod(h, 360) - 120, 15) + 0.004464 * clamp(0, mod(h, 360) - 135, 7.5) + -0.00654 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.002984 * clamp(0, mod(h, 360) - 150, 15) + -0.001204 * clamp(0, mod(h, 360) - 165, 15) + -0.000524 * clamp(0, mod(h, 360) - 180, 15) + 0.000177 * clamp(0, mod(h, 360) - 195, 15) + 0.000518 * clamp(0, mod(h, 360) - 210, 15) + -0.001691 * clamp(0, mod(h, 360) - 225, 15) + -0.000449 * clamp(0, mod(h, 360) - 240, 30) + 0.000658 * clamp(0, mod(h, 360) - 270, 30) + 0.002103 * clamp(0, mod(h, 360) - 300, 15) + 0.003491 * clamp(0, mod(h, 360) - 315, 7.5) + 0.005354 * clamp(0, mod(h, 360) - 322.5, 3.75) + -0.002511 * clamp(0, mod(h, 360) - 326.25, 3.75) + -0.002746 * clamp(0, mod(h, 360) - 330, 15) + -0.001185 * clamp(0, mod(h, 360) - 345, 15) + c * (1 - clamp(0, max(0.555 - var(--_tone-anchor), var(--_tone-anchor) - 0.555) * 10000, 1))));
|
|
367
|
+
--_tone-side-800: clamp(0, (var(--_tone-anchor) - 0.625) * 10000, 1);
|
|
368
|
+
--_tone-l-800: calc(0.215 + (var(--_tone-side-800) * 0.625 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-800)) * (var(--_tone-own) + (0.625 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
369
|
+
--_tone-c-800: min(calc(c * (1 - var(--_tone-side-800) * 0.75 * (var(--_tone-anchor) - 0.625) / var(--_tone-page) - (1 - var(--_tone-side-800)) * 0.7 * (0.625 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.071 + 0.000433 * clamp(0, mod(h, 360) - 30, 15) + 0.000682 * clamp(0, mod(h, 360) - 45, 15) + 0.00177 * clamp(0, mod(h, 360) - 60, 15) + 0.003089 * clamp(0, mod(h, 360) - 75, 15) + 0.000317 * clamp(0, mod(h, 360) - 90, 15) + 0.001207 * clamp(0, mod(h, 360) - 105, 15) + 0.002942 * clamp(0, mod(h, 360) - 120, 15) + 0.005122 * clamp(0, mod(h, 360) - 135, 7.5) + -0.007282 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.003281 * clamp(0, mod(h, 360) - 150, 15) + -0.001338 * clamp(0, mod(h, 360) - 165, 15) + -0.000525 * clamp(0, mod(h, 360) - 180, 15) + 0.000083 * clamp(0, mod(h, 360) - 195, 7.5) + -0.005575 * clamp(0, mod(h, 360) - 206.25, 3.75) + -0.001605 * clamp(0, mod(h, 360) - 210, 30) + -0.000081 * clamp(0, mod(h, 360) - 240, 30) + 0.000384 * clamp(0, mod(h, 360) - 270, 30) + 0.001457 * clamp(0, mod(h, 360) - 300, 15) + 0.0023 * clamp(0, mod(h, 360) - 315, 7.5) + 0.003522 * clamp(0, mod(h, 360) - 322.5, 3.75) + -0.003698 * clamp(0, mod(h, 360) - 326.25, 3.75) + -0.001412 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.625 - var(--_tone-anchor), var(--_tone-anchor) - 0.625) * 10000, 1))));
|
|
370
|
+
--_tone-side-900: clamp(0, (var(--_tone-anchor) - 0.68) * 10000, 1);
|
|
371
|
+
--_tone-l-900: calc(0.215 + (var(--_tone-side-900) * 0.68 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-900)) * (var(--_tone-own) + (0.68 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
372
|
+
--_tone-c-900: min(calc(c * (1 - var(--_tone-side-900) * 0.75 * (var(--_tone-anchor) - 0.68) / var(--_tone-page) - (1 - var(--_tone-side-900)) * 0.7 * (0.68 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.0445 + 0.000014 * clamp(0, mod(h, 360) - 0, 30) + 0.000281 * clamp(0, mod(h, 360) - 30, 15) + 0.000443 * clamp(0, mod(h, 360) - 45, 15) + 0.000868 * clamp(0, mod(h, 360) - 60, 15) + 0.002622 * clamp(0, mod(h, 360) - 75, 15) + 0.006833 * clamp(0, mod(h, 360) - 90, 7.5) + 0.004798 * clamp(0, mod(h, 360) - 97.5, 3.75) + 0.000127 * clamp(0, mod(h, 360) - 101.25, 3.75) + 0.001421 * clamp(0, mod(h, 360) - 105, 15) + 0.002693 * clamp(0, mod(h, 360) - 120, 7.5) + 0.003204 * clamp(0, mod(h, 360) - 127.5, 3.75) + -0.006126 * clamp(0, mod(h, 360) - 131.25, 3.75) + -0.004083 * clamp(0, mod(h, 360) - 135, 7.5) + -0.002626 * clamp(0, mod(h, 360) - 142.5, 7.5) + -0.001286 * clamp(0, mod(h, 360) - 150, 15) + -0.000139 * clamp(0, mod(h, 360) - 165, 15) + 0.000437 * clamp(0, mod(h, 360) - 180, 7.5) + 0.0001 * clamp(0, mod(h, 360) - 187.5, 7.5) + -0.005631 * clamp(0, mod(h, 360) - 195, 7.5) + -0.002725 * clamp(0, mod(h, 360) - 202.5, 7.5) + -0.001462 * clamp(0, mod(h, 360) - 210, 15) + -0.000624 * clamp(0, mod(h, 360) - 225, 15) + -0.000222 * clamp(0, mod(h, 360) - 240, 30) + 0.000295 * clamp(0, mod(h, 360) - 270, 30) + 0.000899 * clamp(0, mod(h, 360) - 300, 15) + 0.001588 * clamp(0, mod(h, 360) - 315, 7.5) + -0.000365 * clamp(0, mod(h, 360) - 322.5, 7.5) + -0.000905 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.68 - var(--_tone-anchor), var(--_tone-anchor) - 0.68) * 10000, 1))));
|
|
373
|
+
--_tone-side-950: clamp(0, (var(--_tone-anchor) - 0.725) * 10000, 1);
|
|
374
|
+
--_tone-l-950: calc(0.215 + (var(--_tone-side-950) * 0.725 * var(--_tone-own) / var(--_tone-page) + (1 - var(--_tone-side-950)) * (var(--_tone-own) + (0.725 - var(--_tone-anchor)) * (0.725 - var(--_tone-own)) / var(--_tone-ink))));
|
|
375
|
+
--_tone-c-950: min(calc(c * (1 - var(--_tone-side-950) * 0.75 * (var(--_tone-anchor) - 0.725) / var(--_tone-page) - (1 - var(--_tone-side-950)) * 0.7 * (0.725 - var(--_tone-anchor)) / var(--_tone-ink))), calc(0.028 + -0.000024 * clamp(0, mod(h, 360) - 0, 30) + 0.000017 * clamp(0, mod(h, 360) - 30, 30) + 0.001284 * clamp(0, mod(h, 360) - 60, 30) + 0.00436 * clamp(0, mod(h, 360) - 90, 7.5) + -0.000156 * clamp(0, mod(h, 360) - 120, 30) + -0.000459 * clamp(0, mod(h, 360) - 150, 30) + 0.000268 * clamp(0, mod(h, 360) - 180, 15) + -0.002609 * clamp(0, mod(h, 360) - 195, 15) + -0.000546 * clamp(0, mod(h, 360) - 210, 30) + -0.000098 * clamp(0, mod(h, 360) - 240, 30) + 0.00018 * clamp(0, mod(h, 360) - 270, 30) + 0.000453 * clamp(0, mod(h, 360) - 300, 30) + -0.000571 * clamp(0, mod(h, 360) - 330, 30) + c * (1 - clamp(0, max(0.725 - var(--_tone-anchor), var(--_tone-anchor) - 0.725) * 10000, 1))));
|
|
376
|
+
--tone-1-50: oklch(from var(--tone-1) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
377
|
+
--tone-1-100: oklch(from var(--tone-1) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
378
|
+
--tone-1-200: oklch(from var(--tone-1) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
379
|
+
--tone-1-300: oklch(from var(--tone-1) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
380
|
+
--tone-1-400: oklch(from var(--tone-1) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
381
|
+
--tone-1-500: oklch(from var(--tone-1) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
382
|
+
--tone-1-600: oklch(from var(--tone-1) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
383
|
+
--tone-1-700: oklch(from var(--tone-1) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
384
|
+
--tone-1-800: oklch(from var(--tone-1) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
385
|
+
--tone-1-900: oklch(from var(--tone-1) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
386
|
+
--tone-1-950: oklch(from var(--tone-1) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
387
|
+
--tone-2-50: oklch(from var(--tone-2) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
388
|
+
--tone-2-100: oklch(from var(--tone-2) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
389
|
+
--tone-2-200: oklch(from var(--tone-2) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
390
|
+
--tone-2-300: oklch(from var(--tone-2) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
391
|
+
--tone-2-400: oklch(from var(--tone-2) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
392
|
+
--tone-2-500: oklch(from var(--tone-2) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
393
|
+
--tone-2-600: oklch(from var(--tone-2) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
394
|
+
--tone-2-700: oklch(from var(--tone-2) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
395
|
+
--tone-2-800: oklch(from var(--tone-2) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
396
|
+
--tone-2-900: oklch(from var(--tone-2) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
397
|
+
--tone-2-950: oklch(from var(--tone-2) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
398
|
+
--tone-3-50: oklch(from var(--tone-3) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
399
|
+
--tone-3-100: oklch(from var(--tone-3) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
400
|
+
--tone-3-200: oklch(from var(--tone-3) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
401
|
+
--tone-3-300: oklch(from var(--tone-3) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
402
|
+
--tone-3-400: oklch(from var(--tone-3) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
403
|
+
--tone-3-500: oklch(from var(--tone-3) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
404
|
+
--tone-3-600: oklch(from var(--tone-3) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
405
|
+
--tone-3-700: oklch(from var(--tone-3) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
406
|
+
--tone-3-800: oklch(from var(--tone-3) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
407
|
+
--tone-3-900: oklch(from var(--tone-3) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
408
|
+
--tone-3-950: oklch(from var(--tone-3) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
409
|
+
--tone-info-50: oklch(from var(--tone-info) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
410
|
+
--tone-info-100: oklch(from var(--tone-info) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
411
|
+
--tone-info-200: oklch(from var(--tone-info) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
412
|
+
--tone-info-300: oklch(from var(--tone-info) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
413
|
+
--tone-info-400: oklch(from var(--tone-info) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
414
|
+
--tone-info-500: oklch(from var(--tone-info) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
415
|
+
--tone-info-600: oklch(from var(--tone-info) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
416
|
+
--tone-info-700: oklch(from var(--tone-info) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
417
|
+
--tone-info-800: oklch(from var(--tone-info) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
418
|
+
--tone-info-900: oklch(from var(--tone-info) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
419
|
+
--tone-info-950: oklch(from var(--tone-info) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
420
|
+
--tone-warning-50: oklch(from var(--tone-warning) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
421
|
+
--tone-warning-100: oklch(from var(--tone-warning) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
422
|
+
--tone-warning-200: oklch(from var(--tone-warning) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
423
|
+
--tone-warning-300: oklch(from var(--tone-warning) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
424
|
+
--tone-warning-400: oklch(from var(--tone-warning) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
425
|
+
--tone-warning-500: oklch(from var(--tone-warning) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
426
|
+
--tone-warning-600: oklch(from var(--tone-warning) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
427
|
+
--tone-warning-700: oklch(from var(--tone-warning) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
428
|
+
--tone-warning-800: oklch(from var(--tone-warning) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
429
|
+
--tone-warning-900: oklch(from var(--tone-warning) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
430
|
+
--tone-warning-950: oklch(from var(--tone-warning) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
431
|
+
--success-50: oklch(from var(--success) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
432
|
+
--success-100: oklch(from var(--success) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
433
|
+
--success-200: oklch(from var(--success) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
434
|
+
--success-300: oklch(from var(--success) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
435
|
+
--success-400: oklch(from var(--success) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
436
|
+
--success-500: oklch(from var(--success) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
437
|
+
--success-600: oklch(from var(--success) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
438
|
+
--success-700: oklch(from var(--success) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
439
|
+
--success-800: oklch(from var(--success) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
440
|
+
--success-900: oklch(from var(--success) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
441
|
+
--success-950: oklch(from var(--success) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
442
|
+
--destructive-50: oklch(from var(--destructive) var(--_tone-l-50) var(--_tone-c-50) h);
|
|
443
|
+
--destructive-100: oklch(from var(--destructive) var(--_tone-l-100) var(--_tone-c-100) h);
|
|
444
|
+
--destructive-200: oklch(from var(--destructive) var(--_tone-l-200) var(--_tone-c-200) h);
|
|
445
|
+
--destructive-300: oklch(from var(--destructive) var(--_tone-l-300) var(--_tone-c-300) h);
|
|
446
|
+
--destructive-400: oklch(from var(--destructive) var(--_tone-l-400) var(--_tone-c-400) h);
|
|
447
|
+
--destructive-500: oklch(from var(--destructive) var(--_tone-l-500) var(--_tone-c-500) h);
|
|
448
|
+
--destructive-600: oklch(from var(--destructive) var(--_tone-l-600) var(--_tone-c-600) h);
|
|
449
|
+
--destructive-700: oklch(from var(--destructive) var(--_tone-l-700) var(--_tone-c-700) h);
|
|
450
|
+
--destructive-800: oklch(from var(--destructive) var(--_tone-l-800) var(--_tone-c-800) h);
|
|
451
|
+
--destructive-900: oklch(from var(--destructive) var(--_tone-l-900) var(--_tone-c-900) h);
|
|
452
|
+
--destructive-950: oklch(from var(--destructive) var(--_tone-l-950) var(--_tone-c-950) h);
|
|
375
453
|
}
|
|
376
454
|
|
|
377
455
|
/* Slots: data-palette="blue" fills the palette-* roles from one family, so a
|
|
@@ -342,7 +342,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
|
|
|
342
342
|
More colour for apps, generated from the active theme: neutral and eight hue families, plus a 50–950 scale under every tone. Each family keeps its hue and leans toward the brand (half the gap, at most 15°; --theme-palette-harmony scales it, 0 = own hues). Neutral is the theme's --background mixed toward its --foreground. Steps follow the mode: low steps sit near the page and high ones far from it in light and dark alike, so a pair needs no dark: variant. For decorative and categorical colour (tags, avatars, labels, legends, illustration); surfaces, text and actions take roles. Components never name a step.
|
|
343
343
|
|
|
344
344
|
- **Families:** `neutral`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple`, `pink`, each 50–950.
|
|
345
|
-
- **Tone scales:** `tone-1-*`, `tone-2-*`, `tone-3-*`, `tone-info-*`, `tone-warning-*`, `success-*`, `destructive-*`; step 500
|
|
345
|
+
- **Tone scales:** `tone-1-*`, `tone-2-*`, `tone-3-*`, `tone-info-*`, `tone-warning-*`, `success-*`, `destructive-*`; one ladder of depths shared by every tone, with the tone exactly on the step nearest its own lightness (500 for a mid tone, 800 for a light status colour in dark mode). Use the tone token itself for the tone.
|
|
346
346
|
- **Use as:** bg-blue-100, text-blue-800, border-neutral-200, bg-tone-1-100 — or var(--teal-500). Tailwind's other families (slate, gray, zinc, stone, amber, lime, emerald, cyan, sky, indigo, violet, fuchsia, rose) are switched off.
|
|
347
347
|
- **tag / label:** bg-<family>-100 text-<family>-800 (held to 4.5:1 in every theme and mode)
|
|
348
348
|
- **text on the page:** text-<family>-700
|
package/llms-full.txt
CHANGED
|
@@ -23100,7 +23100,7 @@ Which token to reach for, and what it is most often confused with. Generated fro
|
|
|
23100
23100
|
More colour for apps, generated from the active theme: neutral and eight hue families, plus a 50–950 scale under every tone. Each family keeps its hue and leans toward the brand (half the gap, at most 15°; --theme-palette-harmony scales it, 0 = own hues). Neutral is the theme's --background mixed toward its --foreground. Steps follow the mode: low steps sit near the page and high ones far from it in light and dark alike, so a pair needs no dark: variant. For decorative and categorical colour (tags, avatars, labels, legends, illustration); surfaces, text and actions take roles. Components never name a step.
|
|
23101
23101
|
|
|
23102
23102
|
- **Families:** `neutral`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `purple`, `pink`, each 50–950.
|
|
23103
|
-
- **Tone scales:** `tone-1-*`, `tone-2-*`, `tone-3-*`, `tone-info-*`, `tone-warning-*`, `success-*`, `destructive-*`; step 500
|
|
23103
|
+
- **Tone scales:** `tone-1-*`, `tone-2-*`, `tone-3-*`, `tone-info-*`, `tone-warning-*`, `success-*`, `destructive-*`; one ladder of depths shared by every tone, with the tone exactly on the step nearest its own lightness (500 for a mid tone, 800 for a light status colour in dark mode). Use the tone token itself for the tone.
|
|
23104
23104
|
- **Use as:** bg-blue-100, text-blue-800, border-neutral-200, bg-tone-1-100 — or var(--teal-500). Tailwind's other families (slate, gray, zinc, stone, amber, lime, emerald, cyan, sky, indigo, violet, fuchsia, rose) are switched off.
|
|
23105
23105
|
- **tag / label:** bg-<family>-100 text-<family>-800 (held to 4.5:1 in every theme and mode)
|
|
23106
23106
|
- **text on the page:** text-<family>-700
|
package/package.json
CHANGED
package/registry.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://sable.design/registry.schema.json",
|
|
3
3
|
"name": "@sableui/react",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.13.0",
|
|
5
5
|
"description": "Themeable React components, semantic tokens, layout patterns, presets, and package-owned agent skills. Default theme: Sable.",
|
|
6
6
|
"engine": {
|
|
7
7
|
"behavior": "@base-ui/react",
|