Something went wrong. Try again.
Monorepo for the nibling.run platform
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980/* * Semantic contracts: the only tokens components read. Each names a job, not a value, so a theme * restyles every component by overriding these. Light and dark resolve here with light-dark(). */:root { color-scheme: light dark;
/* Color. */ --nib-color-canvas: light-dark(var(--nib-raw-gray-0), var(--nib-raw-gray-10)); --nib-color-surface: light-dark(var(--nib-raw-gray-1), var(--nib-raw-gray-9)); --nib-color-text: light-dark(var(--nib-raw-gray-11), var(--nib-raw-gray-3)); --nib-color-text-muted: light-dark(var(--nib-raw-gray-6), var(--nib-raw-gray-4)); --nib-color-border: light-dark(var(--nib-raw-gray-3), var(--nib-raw-gray-7)); --nib-color-accent: light-dark(var(--nib-raw-blue-6), var(--nib-raw-blue-4)); --nib-color-danger: light-dark(var(--nib-raw-red-6), var(--nib-raw-red-4)); --nib-color-hover: color-mix(in srgb, var(--nib-color-text) var(--nib-raw-mix-faint), transparent); --nib-color-selected: color-mix(in srgb, var(--nib-color-accent) var(--nib-raw-mix-soft), transparent); --nib-color-focus-ring: var(--nib-color-accent); --nib-color-drop-target: color-mix(in srgb, var(--nib-color-accent) var(--nib-raw-mix-medium), transparent); /* Embedded documents (previews) default to a white page whatever the scheme. */ --nib-color-document: var(--nib-raw-gray-0); /* Dims what sits behind a modal surface, such as a drawer. */ --nib-color-scrim: color-mix(in srgb, var(--nib-raw-black) var(--nib-raw-mix-strong), transparent);
/* Space. */ --nib-space-none: var(--nib-raw-space-0); --nib-space-2xs: var(--nib-raw-space-1); --nib-space-xs: var(--nib-raw-space-2); --nib-space-sm: var(--nib-raw-space-4); --nib-space-md: var(--nib-raw-space-5); --nib-space-lg: var(--nib-raw-space-6); --nib-space-xl: var(--nib-raw-space-7);
/* Sizes of recurring parts. */ --nib-size-border: var(--nib-raw-size-1); --nib-size-focus-ring: var(--nib-raw-size-1); /* A gutter draws a hairline at rest and a thicker bar when active, inside a larger pointer target. */ --nib-size-gutter: var(--nib-raw-size-1); --nib-size-gutter-active: var(--nib-raw-size-4); --nib-size-gutter-hitbox: var(--nib-raw-size-24); --nib-size-row: var(--nib-raw-size-22); --nib-size-tab-bar: var(--nib-raw-size-30); /* The narrowest a tab gets before its label ellipsizes. */ --nib-size-tab-min: var(--nib-raw-size-60); --nib-size-indent: var(--nib-raw-size-12); --nib-size-icon: var(--nib-raw-size-12); /* The smallest comfortable target for a finger. Compact layouts raise row and bar sizes to it. */ --nib-size-touch-target: var(--nib-raw-size-44); /* The activity bar along the shell edge, and the bar that marks its pressed button. */ --nib-size-activity-bar: var(--nib-raw-size-44); --nib-size-indicator: var(--nib-raw-size-2); /* A bottom sheet's open height, and a side drawer's width, relative to the shell. */ --nib-size-sheet: var(--nib-raw-cqh-45); --nib-size-drawer: min(var(--nib-raw-cqw-85), var(--nib-raw-size-320));
/* Public pages: the widest a page's content runs, and an account's avatar. */ --nib-size-page: var(--nib-raw-size-960); --nib-size-avatar: var(--nib-raw-size-64); /* The app header on every page, and the avatar on its account button. */ --nib-size-header: var(--nib-raw-size-40); --nib-size-avatar-small: var(--nib-raw-size-24);
--nib-radius-sm: var(--nib-raw-radius-1); --nib-radius-md: var(--nib-raw-radius-2);
/* Type. */ --nib-font-family-ui: var(--nib-raw-font-sans); --nib-font-family-code: var(--nib-raw-font-mono); --nib-font-size-ui: var(--nib-raw-font-size-13); --nib-font-size-small: var(--nib-raw-font-size-12); --nib-font-size-compact: var(--nib-raw-font-size-11); --nib-font-size-icon: var(--nib-raw-font-size-10); --nib-font-size-title: var(--nib-raw-font-size-20); --nib-font-weight-normal: var(--nib-raw-font-weight-400); --nib-font-weight-strong: var(--nib-raw-font-weight-600); --nib-font-ui: var(--nib-font-size-ui) / var(--nib-raw-line-height-tight) var(--nib-font-family-ui); --nib-font-code: var(--nib-font-size-ui) / var(--nib-raw-line-height-code) var(--nib-font-family-code); --nib-font-terminal: var(--nib-font-size-small) / var(--nib-raw-line-height-tight) var(--nib-font-family-code);}