@ecopages/radiant-themes 0.0.0-stage → 0.2.0

package/dist/tokens/components/macos-classic.css

@@ -0,0 +1,587 @@
+@reference 'tailwindcss';
+
+/**
+ * Mac OS 9 Platinum, built from the Mac OS 8 Human Interface Guidelines metrics: 20px push buttons with a 1px black
+ * outline and a two-pixel bevel (white and #aaaaaa highlight, #808080 and #aaaaaa shade), a three-layer ring around the
+ * default button, 12px check boxes and radio buttons, trapezoid tabs, and 1px alternating title-bar stripes.
+ */
+:root, :root[data-rui-theme='macos-classic'] {
+	--font-sans: Charcoal, Geneva, 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
+	--font-heading: Charcoal, Geneva, 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
+	--font-mono: Monaco, Menlo, 'Courier New', monospace;
+	--border-radius-xs: 0.125rem;
+	--border-radius-sm: 0.1875rem;
+	--border-radius-md: 0.375rem;
+	--border-radius-lg: 0.375rem;
+	--border-radius-xl: 0.375rem;
+	--border-radius-2xl: 0.5rem;
+	--border-radius-3xl: 0.625rem;
+	--radius-control: var(--border-radius-md);
+	--radius-container: 0;
+	--size-control-sm: 1.25rem;
+	--size-control-md: 1.5rem;
+	--size-control-lg: 1.75rem;
+	--rui-border-alpha: 100%;
+	--focus-ring-width: 2px;
+	--focus-ring-offset: 1px;
+	--macos-classic-raised:
+		inset -1px -1px 0 var(--macos-classic-shadow), inset -2px -2px 0 var(--macos-classic-mid),
+		inset 1px 1px 0 var(--macos-classic-mid), inset 2px 2px 0 var(--macos-classic-light);
+	--macos-classic-pressed:
+		inset -1px -1px 0 var(--macos-classic-shadow), inset -2px -2px 0 var(--macos-classic-muted),
+		inset 1px 1px 0 var(--macos-classic-dark), inset 2px 2px 0 var(--macos-classic-muted);
+	--macos-classic-bevel: inset 1px 1px 0 var(--macos-classic-light), inset -1px -1px 0 var(--macos-classic-shadow);
+	--macos-classic-well: inset 1px 1px 0 var(--macos-classic-shadow), inset -1px -1px 0 var(--macos-classic-light);
+	--macos-classic-tab-shape: polygon(13.7% 0, 86.3% 0, 100% 100%, 0 100%);
+	--macos-classic-tab-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75.31 23.44' preserveAspectRatio='none'%3E%3Cpath d='M0,23.44 L10.32,0 H64.98 L75.31,23.44' fill='none' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
+}
+
+@layer components {
+	:root .rui-switch {
+		--rui-switch-width: 2rem;
+		--rui-switch-height: 1rem;
+		--rui-switch-thumb-size: 0.75rem;
+		--rui-switch-track: var(--macos-classic-field);
+		--rui-switch-track-hover: var(--macos-classic-field);
+		--rui-switch-track-on: var(--macos-classic-selection);
+		--rui-switch-track-on-hover: var(--macos-classic-selection);
+		--rui-switch-thumb: var(--macos-classic-face);
+		--rui-switch-thumb-on: var(--macos-classic-face);
+	}
+
+	/**
+	 * Push buttons. Hover keeps the face, as Platinum buttons only change while pressed.
+	 */
+	:root .rui-button,
+	:root .rui-button--filled,
+	:root .rui-button--outline,
+	:root .rui-button--destructive {
+		@apply font-normal;
+		min-width: 3.625rem;
+		border-radius: 6px;
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-face);
+		background-image: none;
+		color: var(--macos-classic-text);
+		box-shadow: var(--macos-classic-raised);
+		transition: none;
+	}
+
+	/**
+	 * @remarks The ring marks the default action, as the Return-key button does in Mac OS dialogs: 1px #aaaaaa, 1px face,
+	 * then black.
+	 */
+	:root .rui-button--filled {
+		box-shadow:
+			0 0 0 1px var(--macos-classic-mid),
+			0 0 0 2px var(--macos-classic-face),
+			0 0 0 3px var(--macos-classic-dark),
+			var(--macos-classic-raised);
+	}
+
+	:root .rui-button--destructive {
+		color: var(--macos-classic-red);
+	}
+
+	/**
+	 * @remarks Ghost, link, and bare buttons are text and icons, not push buttons: no frame, bevel, or minimum width.
+	 */
+	:root .rui-button--ghost,
+	:root .rui-button--link,
+	:root .rui-button--none {
+		min-width: 0;
+		border-radius: 6px;
+		border-color: transparent;
+		background-color: transparent;
+		background-image: none;
+		color: var(--macos-classic-text);
+		box-shadow: none;
+		transition: none;
+	}
+
+	:root .rui-button--link,
+	:root .rui-button--link:hover:not(:disabled),
+	:root .rui-button--link:active:not(:disabled) {
+		border-radius: 0;
+		background-color: transparent;
+		color: var(--macos-classic-blue);
+		box-shadow: none;
+	}
+
+	:root .rui-button--link:hover:not(:disabled) {
+		text-decoration: underline;
+	}
+
+	:root .rui-button:hover:not(:disabled),
+	:root .rui-button--filled:hover:not(:disabled),
+	:root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--destructive:hover:not(:disabled) {
+		background-color: var(--macos-classic-face);
+	}
+
+	:root .rui-button--ghost:hover:not(:disabled) {
+		background-color: var(--macos-classic-container);
+	}
+
+	:root .rui-button:active:not(:disabled),
+	:root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--outline:active:not(:disabled),
+	:root .rui-button--destructive:active:not(:disabled),
+	:root .rui-button--ghost:active:not(:disabled),
+	:root .rui-button[aria-pressed='true'] {
+		background-color: var(--macos-classic-face-pressed);
+		background-image: none;
+		color: #ffffff;
+		box-shadow: var(--macos-classic-pressed);
+	}
+
+	:root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--filled[aria-pressed='true'] {
+		box-shadow:
+			0 0 0 1px var(--macos-classic-mid),
+			0 0 0 2px var(--macos-classic-dark),
+			var(--macos-classic-pressed);
+	}
+
+	:root .rui-button:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 1px;
+	}
+
+	:root .rui-button--filled:focus-visible {
+		outline-offset: 4px;
+	}
+
+	:root .rui-button:disabled {
+		opacity: 1;
+		background-color: var(--macos-classic-container);
+		color: var(--macos-classic-shadow);
+		border-color: var(--macos-classic-shadow);
+		box-shadow: none;
+	}
+
+	/**
+	 * Fields: a black frame around a sunken white well.
+	 */
+	:root .rui-input,
+	:root .rui-textarea,
+	:root .rui-autocomplete__input,
+	:root .rui-combobox__control,
+	:root .rui-date-field__group,
+	:root .rui-date-range-picker__group,
+	:root .rui-input-group,
+	:root .rui-number-field__group {
+		@apply rounded-none;
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-field);
+		color: var(--macos-classic-field-text);
+		box-shadow: var(--macos-classic-well);
+	}
+
+	:root .rui-input:focus-visible,
+	:root .rui-textarea:focus-visible {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 0;
+	}
+
+	:root .rui-input-group .rui-input,
+	:root .rui-combobox__input,
+	:root .rui-number-field__input {
+		background-color: transparent;
+		color: var(--macos-classic-field-text);
+		box-shadow: none;
+	}
+
+	/**
+	 * Pop-up menus are push buttons with a divided arrow well.
+	 */
+	:root .rui-select__control {
+		border-radius: 6px;
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-face);
+		color: var(--macos-classic-text);
+		box-shadow: var(--macos-classic-raised);
+	}
+
+	:root .rui-select__control:active:not(:disabled) {
+		background-color: var(--macos-classic-face-pressed);
+		color: #ffffff;
+		box-shadow: var(--macos-classic-pressed);
+	}
+
+	/**
+	 * Check boxes are 12px bevelled squares with a black frame and a drop edge.
+	 */
+	:root .rui-checkbox__control {
+		@apply rounded-none;
+		width: 0.75rem;
+		height: 0.75rem;
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-container);
+		background-image: none;
+		box-shadow:
+			var(--macos-classic-bevel),
+			1px 1px 0 var(--macos-classic-dark);
+	}
+
+	:root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control,
+	:root .rui-checkbox__input:indeterminate + .rui-checkbox__control,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control {
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-container);
+	}
+
+	:root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control::after {
+		color: var(--macos-classic-text);
+		width: 0.625rem;
+		height: 0.625rem;
+	}
+
+	:root .rui-checkbox__input:indeterminate + .rui-checkbox__control::after,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control::after {
+		@apply rounded-none;
+		background-color: var(--macos-classic-text);
+	}
+
+	:root .rui-checkbox__input:active + .rui-checkbox__control {
+		background-color: var(--macos-classic-muted);
+		box-shadow: none;
+	}
+
+	/**
+	 * Radio buttons are 12px shaded spheres; the selected one shows a black center dot.
+	 */
+	:root .rui-radio__control {
+		width: 0.75rem;
+		height: 0.75rem;
+		border-color: var(--macos-classic-muted);
+		background-color: var(--macos-classic-face);
+		background-image: radial-gradient(
+			at 30% 30%,
+			var(--macos-classic-light),
+			var(--macos-classic-face) 45%,
+			var(--macos-classic-shadow) 100%
+		);
+		box-shadow: 0 0 2px var(--macos-classic-dark);
+	}
+
+	:root .rui-radio__input:checked + .rui-radio__control {
+		border-color: var(--macos-classic-muted);
+		background-color: var(--macos-classic-face);
+	}
+
+	:root .rui-radio__input:checked + .rui-radio__control::after {
+		background-color: var(--macos-classic-text);
+		width: 0.375rem;
+		height: 0.375rem;
+	}
+
+	:root .rui-checkbox__input:focus-visible + .rui-checkbox__control,
+	:root .rui-radio__input:focus-visible + .rui-radio__control {
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 1px;
+		--tw-ring-shadow: 0 0 #0000;
+	}
+
+	:root .rui-switch__track {
+		@apply rounded-sm;
+		border: 1px solid var(--macos-classic-dark);
+		box-shadow: var(--macos-classic-well);
+	}
+
+	:root .rui-switch__thumb {
+		@apply rounded-xs;
+		outline: 1px solid var(--macos-classic-dark);
+		box-shadow: var(--macos-classic-bevel);
+	}
+
+	:root .rui-feed__article {
+		@apply rounded-none text-on-surface;
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-surface);
+		box-shadow: var(--macos-classic-bevel);
+	}
+
+	:root .rui-feed__article:hover {
+		background-color: var(--macos-classic-surface);
+	}
+
+	/**
+	 * Window chrome: title bars draw 1px alternating stripes on either side of the title, which sits on the window face.
+	 */
+	:root .rui-dialog__title,
+	:root .rui-calendar__header,
+	:root .rui-sidebar__header {
+		@apply font-bold text-on-surface;
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		background-color: var(--macos-classic-surface);
+	}
+
+	:root .rui-dialog__title::before,
+	:root .rui-dialog__title::after,
+	:root .rui-calendar__header::before,
+	:root .rui-calendar__header::after,
+	:root .rui-sidebar__header::before,
+	:root .rui-sidebar__header::after {
+		content: '';
+		flex: 1;
+		height: 0.75rem;
+		background-image: repeating-linear-gradient(
+			to bottom,
+			var(--macos-classic-titlebar-stripe) 0 1px,
+			var(--macos-classic-titlebar-line) 1px 2px
+		);
+	}
+
+	:root .rui-dialog__title {
+		min-height: 1.25rem;
+		margin: calc(0px - var(--rui-dialog-padding)) calc(0px - var(--rui-dialog-padding)) var(--space-3);
+		padding: 0.125rem 0.375rem;
+		border-bottom: 1px solid var(--macos-classic-dark);
+	}
+
+	:root .rui-dialog__close {
+		@apply rounded-none;
+		z-index: 1;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-face);
+		color: var(--macos-classic-text);
+		top: 0.1875rem;
+		left: 0.375rem;
+		right: auto;
+		width: 0.75rem;
+		height: 0.75rem;
+		font-size: 0;
+		box-shadow: var(--macos-classic-bevel);
+	}
+
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content,
+	:root .rui-calendar {
+		@apply rounded-none text-on-surface;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-surface);
+		box-shadow:
+			var(--macos-classic-bevel),
+			1px 1px 0 var(--macos-classic-dark),
+			3px 3px 0 rgb(0 0 0 / 0.25);
+	}
+
+	/**
+	 * Menus use the Platinum menu frame: black outline, a white highlight on the top and left, and an #aaaaaa edge on
+	 * the bottom and right, with a dark drop edge.
+	 */
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox {
+		@apply rounded-none text-on-surface;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-surface);
+		box-shadow:
+			inset 1px 1px 0 var(--macos-classic-light),
+			inset -1px -1px 0 var(--macos-classic-mid),
+			2px 2px 0 var(--macos-classic-muted);
+	}
+
+	/**
+	 * Tab pages are black-framed panels. Tabs are trapezoids drawn with a clipped black outline; the selected tab merges
+	 * with the page.
+	 */
+	:root rui-tabs[variant='boxed'] {
+		@apply overflow-visible rounded-none border-0 bg-transparent shadow-none;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__list {
+		@apply min-w-0 max-w-full items-end overflow-x-auto overflow-y-clip border-0 bg-transparent pt-0;
+		gap: 0.375rem;
+		padding-inline: 0.75rem;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
+		@apply relative border-0 font-normal;
+		z-index: 0;
+		min-width: 5.25rem;
+		height: 1.5rem;
+		margin-bottom: -1px;
+		padding-block: 0.125rem 0.1875rem;
+		padding-inline: 1.125rem;
+		clip-path: var(--macos-classic-tab-shape);
+		border-radius: 0;
+		background-color: var(--macos-classic-mid);
+		background-image: var(--macos-classic-tab-outline);
+		background-position: 0 0;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		box-shadow: none;
+		color: var(--macos-classic-text);
+		opacity: 1;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab:hover:not([aria-selected='true']) {
+		background-color: var(--macos-classic-container);
+		transition: none;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		z-index: 2;
+		background-color: var(--macos-classic-surface);
+		font-weight: 600;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
+		@apply rounded-none text-on-surface;
+		position: relative;
+		z-index: 1;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-surface);
+		box-shadow: none;
+		padding: var(--rui-tabs-panel-padding);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'],
+	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-menubar__menu-item[aria-checked='true'],
+	:root .rui-tree__node[aria-selected='true'],
+	:root .rui-calendar__day[aria-selected='true'],
+	:root .rui-sidebar__menu-button--active,
+	:root .rui-navigation-menu__link-list a[aria-current='page'] {
+		background-color: var(--macos-classic-selection);
+		color: var(--macos-classic-selection-text);
+	}
+
+	:root .rui-table,
+	:root .rui-grid {
+		background-color: var(--macos-classic-field);
+		color: var(--macos-classic-field-text);
+	}
+
+	:root .rui-table__header,
+	:root .rui-treegrid__row--header,
+	:root .rui-calendar__weekdays {
+		@apply font-normal;
+		background-color: var(--macos-classic-face);
+		box-shadow: var(--macos-classic-raised);
+	}
+
+	:root .rui-table__row:nth-child(even),
+	:root .rui-grid__row:nth-child(even) {
+		background-color: var(--macos-classic-light);
+		background-image: linear-gradient(var(--macos-classic-container) 0 0);
+		background-blend-mode: soft-light;
+	}
+
+	:root .rui-alert,
+	:root .rui-toast__content {
+		@apply rounded-none text-on-surface;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-surface);
+		box-shadow:
+			var(--macos-classic-bevel),
+			1px 1px 0 var(--macos-classic-dark);
+	}
+
+	:root .rui-alert--inline.rui-alert--dismissible {
+		padding-inline-start: 2.5rem;
+	}
+
+	:root .rui-alert--inline.rui-alert--dismissible .rui-alert__close {
+		@apply absolute -left-2 -top-2 size-7 rounded-full border text-on-surface;
+		z-index: 1;
+		border-color: var(--macos-classic-dark);
+		background-color: var(--macos-classic-face);
+		box-shadow: var(--macos-classic-bevel);
+	}
+
+	:root .rui-alert__icon {
+		color: var(--macos-classic-blue);
+	}
+
+	:root .rui-alert--warning .rui-alert__icon {
+		color: var(--macos-classic-amber);
+	}
+
+	:root .rui-alert--success .rui-alert__icon {
+		color: var(--macos-classic-green);
+	}
+
+	:root .rui-alert--error .rui-alert__icon {
+		color: var(--macos-classic-red);
+	}
+
+	:root .rui-badge,
+	:root .rui-chip,
+	:root .rui-pagination__link {
+		@apply rounded-sm text-on-surface;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-face);
+		box-shadow: var(--macos-classic-raised);
+	}
+
+	:root .rui-separator,
+	:root .rui-sidebar__separator {
+		background-color: var(--macos-classic-shadow);
+		box-shadow: 0 1px 0 var(--macos-classic-light);
+	}
+
+	:root .rui-slider__thumb,
+	:root .rui-number-field__stepper {
+		@apply rounded-sm;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-face);
+		background-image: none;
+		box-shadow: var(--macos-classic-raised);
+	}
+
+	:root .rui-meter__track,
+	:root .rui-slider__range-track {
+		@apply rounded-none;
+		border: 1px solid var(--macos-classic-dark);
+		background-color: var(--macos-classic-field);
+		box-shadow: var(--macos-classic-well);
+	}
+
+	:root .rui-meter__fill {
+		@apply rounded-none;
+		background-color: var(--macos-classic-selection);
+	}
+
+	:root .rui-slider__range-fill {
+		@apply rounded-none;
+		background-color: transparent;
+	}
+}
+
+@media (prefers-contrast: more) {
+	@layer components {
+		:root .rui-input,
+		:root .rui-textarea,
+		:root .rui-autocomplete__input,
+		:root .rui-combobox__control,
+		:root .rui-date-field__group,
+		:root .rui-date-range-picker__group,
+		:root .rui-input-group,
+		:root .rui-number-field__group,
+		:root .rui-select__control,
+		:root .rui-checkbox__control,
+		:root .rui-radio__control {
+			border-color: var(--macos-classic-field-text);
+			box-shadow: none;
+		}
+
+		:root .rui-switch__track {
+			border: 1px solid var(--macos-classic-field-text);
+			box-shadow: none;
+		}
+
+		:root .rui-button,
+		:root .rui-button--outline,
+		:root .rui-button--destructive {
+			border-color: var(--on-background);
+			box-shadow: none;
+		}
+	}
+}