@ecopages/radiant-themes 0.0.0-stage → 0.2.0

package/dist/tokens/components/macos.css

@@ -0,0 +1,225 @@
+@reference 'tailwindcss';
+
+:root, :root[data-rui-theme='macos'] {
+	--font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
+	--font-heading: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
+	--font-mono: 'SFMono-Regular', Menlo, Monaco, monospace;
+	--border-radius-xs: 0.375rem;
+	--border-radius-sm: 0.5rem;
+	--border-radius-md: 0.5rem;
+	--border-radius-lg: 0.625rem;
+	--border-radius-xl: 0.75rem;
+	--border-radius-2xl: 1rem;
+	--border-radius-3xl: 1.25rem;
+	--radius-control: var(--border-radius-md);
+	--radius-container: var(--border-radius-lg);
+	--rui-border-alpha: 100%;
+	--focus-ring-width: 3px;
+	--focus-ring-offset: 3px;
+}
+
+@layer components {
+	/**
+	 * @remarks macOS fills dark destructive buttons with a saturated red and white text; `--error` stays the lighter
+	 * red used for error text on dark surfaces.
+	 */
+	:root.dark .rui-button--destructive {
+		background-color: #d93036;
+		color: #ffffff;
+	}
+
+	:root.dark .rui-button--destructive:hover:not(:disabled) {
+		background-color: #c9302c;
+	}
+
+	:root.dark .rui-button--destructive:active:not(:disabled) {
+		background-color: #b62324;
+	}
+
+	/**
+	 * @remarks macOS dark push buttons use the accent blue with white text. `#0a6cd6` keeps the system blue's hue at
+	 * 5:1 contrast, and `--primary` stays the lighter accent for primary text.
+	 */
+	:root.dark .rui-button--filled {
+		background-color: #0a6cd6;
+		color: #ffffff;
+	}
+
+	:root.dark .rui-button--filled:hover:not(:disabled) {
+		background-color: #0a64c8;
+	}
+
+	:root.dark .rui-button--filled:active:not(:disabled),
+	:root.dark .rui-button--filled[aria-pressed='true'] {
+		background-color: #0a5bb5;
+	}
+
+	:root .rui-button {
+		@apply rounded-control border border-transparent font-medium shadow-none;
+		transition-duration: var(--duration-fast);
+	}
+
+	:root .rui-button--filled,
+	:root .rui-button--destructive {
+		@apply shadow-sm;
+	}
+
+	:root .rui-button--outline {
+		@apply border-border bg-surface text-on-surface;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--ghost:hover:not(:disabled) {
+		@apply bg-surface-container-low;
+	}
+
+	:root .rui-input,
+	:root .rui-textarea,
+	:root .rui-autocomplete__input,
+	:root .rui-combobox__input,
+	:root .rui-date-field__input,
+	:root .rui-date-input__segment,
+	:root .rui-number-field__input,
+	:root .rui-select__control {
+		@apply rounded-control border-border bg-surface text-on-surface shadow-none;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-checkbox__control,
+	:root .rui-radio__control {
+		@apply border-border bg-surface;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-switch {
+		--rui-switch-track: color-mix(in oklab, var(--on-background) 14%, transparent);
+		--rui-switch-track-hover: color-mix(in oklab, var(--on-background) 20%, transparent);
+		--rui-switch-thumb: #ffffff;
+		--rui-switch-thumb-on: #ffffff;
+	}
+
+	:root .rui-switch__track {
+		@apply rounded-pill;
+	}
+
+	:root .rui-switch__thumb {
+		box-shadow:
+			0 0 0 0.5px rgb(0 0 0 / 0.12),
+			0 1px 2px rgb(0 0 0 / 0.24);
+	}
+
+	:root .rui-checkbox__control {
+		@apply rounded-xs;
+	}
+
+	: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'] {
+		@apply rounded-control bg-primary-container text-on-primary-container;
+	}
+
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content,
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox,
+	:root .rui-calendar,
+	:root rui-tabs[variant='boxed'] {
+		@apply rounded-container border border-border bg-surface shadow-lg;
+	}
+
+	:root .rui-dialog__title,
+	:root .rui-calendar__header,
+	:root .rui-sidebar__header,
+	:root .rui-table__header {
+		@apply bg-surface-container-low text-on-surface font-semibold;
+	}
+
+	:root rui-tabs[variant='boxed'] {
+		@apply rounded-container border border-border bg-surface shadow-sm;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__list {
+		@apply gap-1 border-0 bg-surface-container-low px-1 py-1;
+		border-radius: var(--radius-control);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
+		@apply rounded-control border-0 bg-transparent text-on-surface-container-low;
+		padding-inline: var(--rui-tabs-tab-padding-x);
+		padding-block: var(--rui-tabs-tab-padding-y);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		@apply rounded-control bg-surface text-on-surface font-semibold shadow-sm;
+		border-bottom-color: transparent;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
+		@apply rounded-none bg-surface;
+		padding: var(--rui-tabs-panel-padding);
+	}
+
+	:root .rui-tabs__tab[aria-selected='true'] {
+		@apply rounded-pill bg-surface-container text-on-surface font-semibold;
+		border-bottom-color: transparent;
+	}
+
+	:root .rui-alert,
+	:root .rui-toast__content {
+		@apply rounded-container border border-border bg-surface text-on-surface shadow-md;
+	}
+
+	:root .rui-alert--info .rui-alert__icon {
+		color: var(--info);
+	}
+
+	:root .rui-alert--success .rui-alert__icon {
+		color: var(--success);
+	}
+
+	:root .rui-alert--warning .rui-alert__icon {
+		color: var(--warning);
+	}
+
+	:root .rui-alert--error .rui-alert__icon {
+		color: var(--error);
+	}
+
+	:root .rui-badge,
+	:root .rui-chip,
+	:root .rui-pagination__link {
+		@apply rounded-pill;
+	}
+
+	:root .rui-table__row:nth-child(even),
+	:root .rui-grid__row:nth-child(even) {
+		@apply bg-surface-container-low;
+	}
+
+	:root .rui-separator,
+	:root .rui-sidebar__separator {
+		@apply bg-border;
+	}
+
+	:root .rui-slider__thumb {
+		@apply rounded-pill border border-surface bg-primary shadow-sm;
+	}
+
+	:root .rui-meter__track,
+	:root .rui-slider__range-track {
+		@apply rounded-pill bg-surface-container;
+	}
+
+	:root .rui-meter__fill,
+	:root .rui-slider__range-fill {
+		@apply rounded-pill bg-primary;
+	}
+}

package/dist/tokens/components/material.css

@@ -0,0 +1,82 @@
+@reference 'tailwindcss';
+
+:root, :root[data-rui-theme='material'] {
+	--font-sans: Roboto, 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-heading: Roboto, 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	--rui-border-alpha: 100%;
+	--border-radius-xs: 0.25rem;
+	--border-radius-sm: 0.5rem;
+	--border-radius-md: 0.75rem;
+	--border-radius-lg: 1rem;
+	--border-radius-xl: 1.75rem;
+	--border-radius-2xl: 2rem;
+	--border-radius-3xl: 2.5rem;
+	--radius-control: var(--border-radius-xl);
+	--radius-container: var(--border-radius-lg);
+}
+
+@layer components {
+	:root .rui-button {
+		@apply rounded-control border border-transparent font-medium shadow-sm;
+	}
+
+	:root .rui-button--filled,
+	:root .rui-button--destructive {
+		@apply shadow-md;
+	}
+
+	:root .rui-button--outline {
+		@apply border-border bg-surface text-on-surface shadow-none;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-button--ghost:hover:not(:disabled),
+	:root .rui-button--outline:hover:not(:disabled) {
+		@apply bg-surface-container-low;
+	}
+
+	:root .rui-input,
+	:root .rui-textarea,
+	:root .rui-autocomplete__input,
+	:root .rui-combobox__input,
+	:root .rui-date-field__input,
+	:root .rui-date-input__segment,
+	:root .rui-number-field__input,
+	:root .rui-select__control {
+		@apply rounded-control border-border bg-surface text-on-surface shadow-none;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-checkbox__control,
+	:root .rui-radio__control {
+		@apply border-border bg-surface;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-checkbox__control {
+		@apply rounded-xs;
+	}
+
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox,
+	:root .rui-calendar {
+		@apply rounded-container border border-border bg-surface shadow-lg;
+	}
+
+	:root .rui-listbox__option[aria-selected='true'],
+	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-calendar__day[aria-selected='true'],
+	:root .rui-sidebar__menu-button--active {
+		@apply rounded-control bg-primary-container text-on-primary-container;
+	}
+
+	:root .rui-badge,
+	:root .rui-chip,
+	:root .rui-pagination__link {
+		@apply rounded-pill;
+	}
+}

package/dist/tokens/components/vercel.css

@@ -0,0 +1,150 @@
+:where(:root), :root[data-rui-theme='vercel'] {
+	--font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-heading: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	--rui-border-alpha: 100%;
+	--border-radius-xs: 0.125rem;
+	--border-radius-sm: 0.25rem;
+	--border-radius-md: 0.375rem;
+	--border-radius-lg: 0.5rem;
+	--border-radius-xl: 0.75rem;
+	--border-radius-2xl: 1rem;
+	--border-radius-3xl: 1.25rem;
+	--radius-control: var(--border-radius-md);
+	--radius-container: var(--border-radius-xl);
+}
+
+@layer components {
+	/**
+	 * @remarks Geist fills dark destructive buttons with a saturated red and white text; `--error` stays the lighter
+	 * red used for error text on dark surfaces.
+	 */
+	:root.dark .rui-button--destructive {
+		background-color: #d93036;
+		color: #ffffff;
+	}
+
+	:root.dark .rui-button--destructive:hover:not(:disabled) {
+		background-color: #c9302c;
+	}
+
+	:root.dark .rui-button--destructive:active:not(:disabled) {
+		background-color: #b62324;
+	}
+
+	:root .rui-button {
+		@apply rounded-control border border-transparent font-medium shadow-none;
+	}
+
+	:root .rui-button--filled {
+		@apply bg-primary text-on-primary;
+	}
+
+	:root .rui-button--filled:hover:not(:disabled) {
+		@apply bg-primary-light text-on-primary;
+	}
+
+	:root .rui-button--outline {
+		@apply border-border bg-surface text-on-surface shadow-none;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--ghost:hover:not(:disabled) {
+		@apply bg-surface-container-low;
+	}
+
+	:root .rui-input,
+	:root .rui-textarea,
+	:root .rui-autocomplete__input,
+	:root .rui-combobox__input,
+	:root .rui-date-field__input,
+	:root .rui-date-input__segment,
+	:root .rui-number-field__input,
+	:root .rui-select__control {
+		@apply rounded-control border bg-surface text-on-surface shadow-none;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-input:hover:not(:disabled),
+	:root .rui-textarea:hover:not(:disabled),
+	:root .rui-select__control:hover:not(:disabled) {
+		border-color: var(--rui-border-hover-color);
+	}
+
+	:root .rui-input:active:not(:disabled),
+	:root .rui-textarea:active:not(:disabled),
+	:root .rui-select__control:active:not(:disabled) {
+		border-color: var(--rui-border-active-color);
+	}
+
+	:root .rui-input:focus-visible,
+	:root .rui-textarea:focus-visible,
+	:root .rui-select__control:focus-visible {
+		border-color: var(--rui-border-active-color);
+		outline: 2px solid var(--focus-ring);
+		outline-offset: 2px;
+	}
+
+	:root .rui-checkbox__control,
+	:root .rui-radio__control {
+		@apply border-border bg-surface;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content,
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox,
+	:root .rui-calendar,
+	:root rui-tabs[variant='boxed'] {
+		@apply rounded-container border border-border bg-surface shadow-sm;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__list {
+		@apply border-b border-border bg-transparent px-2 pt-2;
+		gap: 0;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
+		@apply rounded-none text-on-surface-container-low;
+		margin-bottom: -1px;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		@apply bg-transparent text-on-surface font-semibold;
+		border-bottom-color: var(--primary);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
+		@apply bg-surface;
+		padding: var(--rui-tabs-panel-padding);
+	}
+
+	:root .rui-listbox__option:hover:not([aria-selected='true']):not([aria-disabled='true']):not([data-active]),
+	:root .rui-menu-button__item:hover:not([aria-checked='true']):not([aria-disabled='true']),
+	:root .rui-menubar__menu-item:hover:not([aria-expanded='true']):not([aria-disabled='true']) {
+		background-color: var(--color-vercel-component-2);
+	}
+
+	:root .rui-table__header,
+	:root .rui-treegrid__row--header {
+		@apply bg-surface-container-low text-on-surface font-medium;
+	}
+
+	:root .rui-alert {
+		@apply rounded-control shadow-none;
+	}
+
+	:root .rui-toast__content {
+		@apply rounded-control border border-border bg-surface text-on-surface shadow-none;
+	}
+
+	:root .rui-separator,
+	:root .rui-sidebar__separator {
+		@apply bg-border;
+	}
+}

package/dist/tokens/components/vscode.css

@@ -0,0 +1,72 @@
+@reference 'tailwindcss';
+
+: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;
+	--rui-border-alpha: 100%;
+	--border-radius-xs: 0.125rem;
+	--border-radius-sm: 0.1875rem;
+	--border-radius-md: 0.25rem;
+	--border-radius-lg: 0.375rem;
+	--border-radius-xl: 0.5rem;
+	--border-radius-2xl: 0.75rem;
+	--border-radius-3xl: 1rem;
+	--radius-control: var(--border-radius-sm);
+	--radius-container: var(--border-radius-md);
+}
+
+@layer components {
+	/**
+	 * @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.
+	 */
+	:root.dark .rui-button--filled {
+		background-color: #0078d4;
+		color: #ffffff;
+	}
+
+	:root.dark .rui-button--filled:hover:not(:disabled) {
+		background-color: #026ec1;
+	}
+
+	:root.dark .rui-button--filled:active:not(:disabled),
+	:root.dark .rui-button--filled[aria-pressed='true'] {
+		background-color: #005ba4;
+	}
+
+	:root .rui-button {
+		@apply rounded-control border border-transparent font-medium shadow-none;
+	}
+
+	:root .rui-button--outline,
+	:root .rui-input,
+	:root .rui-textarea,
+	:root .rui-select__control {
+		@apply border-border bg-surface text-on-surface shadow-none;
+		border-color: var(--rui-control-border-color);
+	}
+
+	: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-xs border-border bg-surface;
+		border-color: var(--rui-control-border-color);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'],
+	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-sidebar__menu-button--active {
+		@apply bg-primary-container text-on-primary-container;
+	}
+
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-select__listbox,
+	:root .rui-calendar {
+		@apply rounded-container border border-border bg-surface shadow-lg;
+	}
+}