@ecopages/radiant-themes 0.2.1 → 0.2.2

package/dist/tokens/components/vscode.css

@@ -1,10 +1,14 @@
 @reference 'tailwindcss';
 
+/**
+ * @remarks Font stacks follow the workbench defaults: the system UI font on macOS, Segoe WPC and Segoe UI on Windows,
+ * and Menlo or Consolas in the editor. Controls are 26px tall with 2px corners.
+ */
 :root,
 :root[data-rui-theme='vscode'] {
-	--font-sans: 'Segoe UI', system-ui, sans-serif;
-	--font-heading: 'Segoe UI', system-ui, sans-serif;
-	--font-mono: 'Cascadia Code', Consolas, Menlo, Monaco, 'Courier New', monospace;
+	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
+	--font-heading: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
+	--font-mono: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace;
 	--rui-border-alpha: 100%;
 	--border-radius-xs: 0.125rem;
 	--border-radius-sm: 0.1875rem;
@@ -13,34 +17,101 @@
 	--border-radius-xl: 0.5rem;
 	--border-radius-2xl: 0.75rem;
 	--border-radius-3xl: 1rem;
-	--radius-control: var(--border-radius-sm);
+	--radius-control: var(--border-radius-xs);
 	--radius-container: var(--border-radius-md);
+	--size-control-sm: 1.5rem;
+	--size-control-md: 1.625rem;
+	--size-control-lg: 2rem;
+	--text-control: 0.8125rem;
+	--sheen-image: none;
+}
+
+/**
+ * @remarks Tooltips are workbench hovers: the widget fill, foreground text, and a hairline border. Unlayered to match
+ * the catalog's own tooltip defaults.
+ */
+:root rui-tooltip {
+	--rui-tooltip-surface: var(--color-vscode-widget);
+	--rui-tooltip-color: var(--color-vscode-fg);
+	--rui-tooltip-radius: var(--border-radius-sm);
+	--rui-tooltip-shadow: 0 0 0 1px var(--color-vscode-menu-border), 0 2px 8px var(--color-vscode-widget-shadow);
 }
 
 @layer components {
+	:root .rui-button {
+		@apply rounded-control border border-transparent font-normal shadow-none;
+	}
+
+	:root .rui-button--filled {
+		border-color: var(--color-vscode-button-border);
+		background-color: var(--color-vscode-blue);
+		color: #ffffff;
+	}
+
+	:root .rui-button--filled:hover:not(:disabled) {
+		background-color: var(--color-vscode-blue-hover);
+	}
+
+	:root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--filled[aria-pressed='true'] {
+		background-color: var(--color-vscode-blue-active);
+	}
+
 	/**
-	 * @remarks VS Code's dark buttons pair `#0078d4` with white text. `--primary` stays the lighter link blue so primary
-	 * text keeps its contrast on the editor background.
+	 * @remarks VS Code has no outline button; its secondary button is a grey fill with the same hairline border as the
+	 * primary one.
 	 */
-	:root.dark .rui-button--filled {
-		background-color: #0078d4;
-		color: #ffffff;
+	:root .rui-button--outline {
+		border-color: var(--color-vscode-button-border);
+		background-color: var(--color-vscode-button-secondary);
+		color: var(--color-vscode-fg);
+	}
+
+	:root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--outline:active:not(:disabled) {
+		background-color: var(--color-vscode-button-secondary-hover);
 	}
 
-	:root.dark .rui-button--filled:hover:not(:disabled) {
-		background-color: #026ec1;
+	/**
+	 * @remarks Ghost buttons follow action bar items: 5px corners and a translucent hover fill.
+	 */
+	:root .rui-button--ghost {
+		border-radius: 0.3125rem;
 	}
 
-	:root.dark .rui-button--filled:active:not(:disabled),
-	:root.dark .rui-button--filled[aria-pressed='true'] {
-		background-color: #005ba4;
+	:root .rui-button--ghost:hover:not(:disabled),
+	:root .rui-button--ghost:active:not(:disabled) {
+		background-color: var(--color-vscode-toolbar-hover);
 	}
 
-	:root .rui-button {
-		@apply rounded-control border border-transparent font-medium shadow-none;
+	/**
+	 * @remarks Focus is the workbench's 1px `focusBorder` outline: outside push buttons, and over the frame of fields so
+	 * the border itself turns blue.
+	 */
+	:root .rui-button:focus-visible,
+	:root .rui-tabs__tab:focus-visible {
+		outline: 1px solid var(--focus-ring);
+		outline-offset: 2px;
+		--tw-ring-shadow: 0 0 #0000;
+		--tw-ring-offset-shadow: 0 0 #0000;
+	}
+
+	:root .rui-input:focus-visible,
+	:root .rui-textarea:focus-visible,
+	:root .rui-combobox__control:focus-within,
+	:root .rui-number-field__group:focus-within,
+	:root .rui-input-group:focus-within,
+	:root .rui-select__control:focus-within {
+		outline: 1px solid var(--focus-ring);
+		outline-offset: -1px;
+		--tw-ring-shadow: 0 0 #0000;
+		--tw-ring-offset-shadow: 0 0 #0000;
+	}
+
+	:root .rui-input-group .rui-input:focus-visible {
+		outline: none;
 	}
 
-	:root .rui-button--outline,
 	:root .rui-input,
 	:root .rui-textarea,
 	:root .rui-combobox__control,
@@ -50,31 +121,141 @@
 	:root .rui-number-field__group,
 	:root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
 	:root .rui-select__control {
-		@apply border-border bg-surface text-on-surface shadow-none;
+		@apply text-on-surface shadow-none;
 		border-color: var(--rui-control-border-color);
+		background-color: var(--color-vscode-input);
 	}
 
-	:root .rui-button--outline:hover:not(:disabled),
-	:root .rui-button--ghost:hover:not(:disabled) {
-		@apply bg-surface-container-low;
+	:root .rui-checkbox__control {
+		@apply rounded-sm;
+		border-color: var(--rui-control-border-color);
+		background-color: var(--color-vscode-checkbox);
 	}
 
-	:root .rui-checkbox__control {
-		@apply rounded-xs border-border bg-surface;
+	/**
+	 * @remarks VS Code check boxes keep their fill when checked and draw the check mark in the foreground color.
+	 */
+	:root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control {
 		border-color: var(--rui-control-border-color);
+		background-color: var(--color-vscode-checkbox);
+	}
+
+	:root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control::after {
+		color: var(--color-vscode-fg);
+	}
+
+	:root .rui-badge {
+		@apply rounded-full;
+	}
+
+	:root .rui-badge--muted {
+		background-color: var(--color-vscode-badge);
+		color: var(--color-vscode-badge-fg);
+	}
+
+	:root .rui-listbox__option:hover:not([aria-disabled='true']):not([data-active]):not([aria-selected='true']) {
+		background-color: var(--color-vscode-list-hover);
 	}
 
 	:root .rui-listbox__option[aria-selected='true'],
 	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-sidebar__menu-button[aria-current='page'],
 	:root .rui-sidebar__menu-button--active {
 		@apply bg-primary-container text-on-primary-container;
 	}
 
+	/**
+	 * @remarks Widgets (dialogs, hovers, pickers, suggest lists) share the editor widget fill, a hairline border, and
+	 * the soft 8px `widget.shadow`.
+	 */
 	:root .rui-dialog__surface,
-	:root .rui-popover-host,
-	:root .rui-select__listbox,
+	:root .rui-popover:where(:not(.rui-popover--listbox)),
+	:root .rui-hover-card__content,
 	:root .rui-calendar {
-		@apply rounded-container border border-border bg-surface shadow-lg;
+		@apply rounded-container border text-on-surface;
+		border-color: var(--color-vscode-widget-border);
+		background-color: var(--color-vscode-widget);
+		box-shadow: 0 0 8px 2px var(--color-vscode-widget-shadow);
+	}
+
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox {
+		@apply rounded-control border text-on-surface;
+		border-color: var(--rui-control-border-color);
+		background-color: var(--color-vscode-menu);
+		box-shadow: 0 0 8px 2px var(--color-vscode-widget-shadow);
+	}
+
+	/**
+	 * @remarks Menus use `menu.background`, `menu.border`, and the blue `menu.selectionBackground` with white text for
+	 * the hovered or focused item.
+	 */
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu {
+		@apply border text-on-surface;
+		--rui-menu-item-hover: var(--color-vscode-blue);
+		border-color: var(--color-vscode-menu-border);
+		border-radius: 0.3125rem;
+		background-color: var(--color-vscode-menu);
+		box-shadow: 0 2px 8px var(--color-vscode-widget-shadow);
+	}
+
+	:root .rui-menu-button__item:focus-visible:not([aria-disabled='true']),
+	:root .rui-menu-button__item[aria-expanded='true'],
+	:root .rui-menubar__menu-item:focus-visible,
+	:root .rui-menubar__menu-item[aria-expanded='true'] {
+		background-color: var(--color-vscode-blue);
+		color: #ffffff;
+		outline: none;
+		--tw-ring-shadow: 0 0 #0000;
+	}
+
+	:root .rui-menu-button__item[aria-haspopup='menu']::after,
+	:root .rui-menubar__menu-item[aria-haspopup='menu']::after {
+		color: inherit;
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		:root .rui-menu-button__item:hover:not([aria-disabled='true']),
+		:root .rui-menubar__menu-item:hover:not(:disabled):not([aria-disabled='true']) {
+			background-color: var(--color-vscode-blue);
+			color: #ffffff;
+		}
+	}
+
+	/**
+	 * @remarks Boxed tabs follow editor tabs: inactive tabs sit on the tab strip fill with a dimmed label and a
+	 * separating border, and the active tab takes the editor fill with `tab.activeBorderTop` in the accent blue.
+	 */
+	:root rui-tabs[variant='boxed'] {
+		@apply border border-border shadow-none;
+		background-color: var(--color-vscode-canvas);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__list {
+		@apply gap-0 border-b border-border p-0;
+		background-color: var(--color-vscode-subtle);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
+		@apply relative border-0 border-r border-border text-sm font-normal opacity-100;
+		height: 2.1875rem;
+		margin-bottom: -1px;
+		padding-inline: 0.625rem;
+		background-color: var(--color-vscode-subtle);
+		color: var(--color-vscode-inactive-fg);
+		transition: none;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		@apply font-normal;
+		background-color: var(--color-vscode-canvas);
+		color: var(--color-vscode-fg);
+		box-shadow: inset 0 1px 0 var(--color-vscode-blue);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
+		background-color: var(--color-vscode-canvas);
 	}
 
 	/**
@@ -95,10 +276,50 @@
 	}
 
 	:root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
-		@apply bg-surface-container-low;
+		background-color: var(--color-vscode-list-hover);
 	}
 
 	:root .rui-treegrid__cell[aria-selected='true'] {
 		@apply bg-primary-container text-on-primary-container;
 	}
 }
+
+/**
+ * @remarks Scrollbars are square, track-less sliders in the translucent `scrollbarSlider` colors. Firefox receives the
+ * standard `scrollbar-color` fallback.
+ */
+@supports (-moz-appearance: none) {
+	:root,
+	:root * {
+		scrollbar-width: thin;
+		scrollbar-color: var(--color-vscode-scrollbar) transparent;
+	}
+}
+
+:root::-webkit-scrollbar,
+:root *::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+	background-color: transparent;
+}
+
+:root::-webkit-scrollbar-thumb,
+:root *::-webkit-scrollbar-thumb {
+	border-radius: 0;
+	background-color: var(--color-vscode-scrollbar);
+}
+
+:root::-webkit-scrollbar-thumb:hover,
+:root *::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-vscode-scrollbar-hover);
+}
+
+:root::-webkit-scrollbar-thumb:active,
+:root *::-webkit-scrollbar-thumb:active {
+	background-color: var(--color-vscode-scrollbar-active);
+}
+
+:root::-webkit-scrollbar-corner,
+:root *::-webkit-scrollbar-corner {
+	background-color: transparent;
+}