@ecopages/radiant-themes 0.0.0-stage → 0.2.0

package/dist/tokens/components/cloudflare.css

@@ -0,0 +1,147 @@
+@reference 'tailwindcss';
+
+:root,
+:root[data-rui-theme='cloudflare'] {
+	--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	--font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	--font-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-lg);
+	--radius-container: var(--border-radius-xl);
+}
+
+@layer components {
+	/**
+	 * @remarks Kumo draws the primary action with white text in both modes, a ring one tenth darker than the fill, and
+	 * `shadow-xs`. `#cc3a00` keeps cloudflare.com's orange hue at 5:1 against white, where the marketing orange
+	 * `#ff5e1e` reaches only 3:1. `--primary` stays the lighter orange in dark mode for text and icons.
+	 */
+	:root .rui-button--filled {
+		background-color: var(--color-cloudflare-orange-fill);
+		color: #ffffff;
+		box-shadow:
+			0 0 0 1px color-mix(in oklch, var(--color-cloudflare-orange-fill), black 10%),
+			0 1px 2px oklch(0% 0 0 / 5%);
+	}
+
+	:root .rui-button--filled:hover:not(:disabled) {
+		background-color: #b83400;
+		color: #ffffff;
+	}
+
+	:root .rui-button--filled:active:not(:disabled),
+	:root .rui-button--filled[aria-pressed='true'] {
+		background-color: #a32e00;
+		color: #ffffff;
+	}
+
+	/**
+	 * @remarks Cloudflare 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: #d1242f;
+		color: #ffffff;
+	}
+
+	:root.dark .rui-button--destructive:hover:not(:disabled) {
+		background-color: #c3272d;
+	}
+
+	:root.dark .rui-button--destructive:active:not(:disabled) {
+		background-color: #ae1f25;
+	}
+
+	/**
+	 * @remarks Kumo changes hover colors immediately instead of transitioning them.
+	 */
+	:root .rui-button {
+		@apply rounded-control border border-transparent font-medium shadow-none;
+		transition: none;
+	}
+
+	:root .rui-button--secondary {
+		@apply border border-border bg-secondary text-on-secondary shadow-none;
+	}
+
+	:root .rui-button--secondary:hover:not(:disabled),
+	:root .rui-button--outline:hover:not(:disabled),
+	:root .rui-button--ghost:hover:not(:disabled) {
+		@apply bg-surface-container-high;
+	}
+
+	: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-checkbox__control,
+	:root .rui-radio__control {
+		@apply border-border bg-surface;
+		border-color: var(--rui-control-border-color);
+	}
+
+	/**
+	 * @remarks Kumo does not combine a border with a drop shadow. Floating surfaces use a 1px edge ring plus a soft drop.
+	 */
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content,
+	:root .rui-select__listbox,
+	:root .rui-calendar {
+		@apply rounded-container border-0 bg-surface;
+		box-shadow:
+			0 0 0 1px var(--color-cloudflare-shadow-edge),
+			0 4px 12px var(--color-cloudflare-shadow-drop);
+	}
+
+	:root rui-tabs[variant='boxed'] {
+		@apply rounded-container border border-border bg-surface shadow-none;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__list {
+		@apply border-b bg-transparent px-2 pt-2;
+		border-color: var(--color-cloudflare-hairline);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab:hover:not([aria-selected='true']) {
+		background-color: var(--color-cloudflare-tint);
+		color: var(--color-cloudflare-fg);
+		opacity: 1;
+		transition: none;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		@apply text-on-surface;
+		border-bottom-color: var(--primary);
+	}
+
+	: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-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/github.css

@@ -0,0 +1,111 @@
+@reference 'tailwindcss';
+
+:root,
+:root[data-rui-theme='github'] {
+	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	--font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	--rui-border-alpha: 100%;
+	--border-radius-xs: 0.25rem;
+	--border-radius-sm: 0.375rem;
+	--border-radius-md: 0.5rem;
+	--border-radius-lg: 0.75rem;
+	--border-radius-xl: 1rem;
+	--border-radius-2xl: 1.25rem;
+	--border-radius-3xl: 1.5rem;
+	--radius-control: var(--border-radius-sm);
+	--radius-container: var(--border-radius-md);
+}
+
+@layer components {
+	/**
+	 * @remarks Primer 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: #da3633;
+		color: #ffffff;
+	}
+
+	:root.dark .rui-button--destructive:hover:not(:disabled) {
+		background-color: #b62324;
+	}
+
+	:root.dark .rui-button--destructive:active:not(:disabled) {
+		background-color: #a40e26;
+	}
+
+	:root rui-tabs {
+		--rui-tabs-indicator-color: #fd8c73;
+	}
+
+	:root.dark rui-tabs {
+		--rui-tabs-indicator-color: #f78166;
+	}
+
+	: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-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-select__listbox,
+	:root .rui-calendar {
+		@apply rounded-container border border-border bg-surface shadow-lg;
+	}
+
+	: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 gap-2 border-b border-border bg-transparent px-0 pt-0;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
+		@apply rounded-none text-on-surface-container-low;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		@apply text-on-surface font-semibold;
+		border-bottom-color: var(--rui-tabs-indicator-color);
+	}
+
+	/**
+	 * @remarks Primer's underline nav has no panel, but Radiant tabs own one. A subtle surface with a divider border keeps
+	 * the panel distinct from the white page. It clips its content so square code blocks respect the rounded corners.
+	 */
+	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
+		@apply mt-3 overflow-hidden rounded-container border border-border bg-surface;
+	}
+
+	:root .rui-listbox__option[aria-selected='true'],
+	:root .rui-menu-button__item[aria-checked='true'],
+	:root .rui-sidebar__menu-button--active {
+		@apply rounded-control bg-info-container text-on-info-container;
+	}
+
+	:root .rui-badge,
+	:root .rui-chip,
+	:root .rui-pagination__link {
+		@apply rounded-pill;
+	}
+}

package/dist/tokens/components/high-contrast.css

@@ -0,0 +1,108 @@
+@reference 'tailwindcss';
+
+:root, :root[data-rui-theme='high-contrast'] {
+	--font-sans: ui-sans-serif, system-ui, sans-serif;
+	--font-heading: var(--font-sans);
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	--border-radius-xs: 0;
+	--border-radius-sm: 0;
+	--border-radius-md: 0;
+	--border-radius-lg: 0;
+	--border-radius-xl: 0;
+	--border-radius-2xl: 0;
+	--border-radius-3xl: 0;
+	--radius-control: 0;
+	--radius-container: 0;
+	--rui-border-alpha: 100%;
+	--focus-ring-width: 3px;
+	--focus-ring-offset: 3px;
+	--opacity-disabled: 1;
+}
+
+@layer components {
+	:root .rui-button {
+		@apply rounded-none border-2 font-semibold shadow-none;
+		transition: none;
+	}
+
+	:root .rui-button--outline,
+	:root .rui-button--ghost {
+		@apply border-2 border-on-background bg-background text-on-background;
+	}
+
+	:root .rui-button:disabled,
+	:root .rui-input:disabled,
+	:root .rui-textarea:disabled,
+	:root .rui-select[aria-disabled='true'] {
+		@apply border-2 border-on-background text-on-background;
+		opacity: 1;
+	}
+
+	: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-none border-2 border-on-background bg-background text-on-background;
+	}
+
+	:root .rui-checkbox__control,
+	:root .rui-radio__control,
+	:root .rui-switch__track {
+		@apply rounded-none border-2 border-on-background bg-background;
+	}
+
+	:root .rui-checkbox__input:checked + .rui-checkbox__control,
+	:root .rui-radio__input:checked + .rui-radio__control,
+	:root .rui-switch__input:checked + .rui-switch__track {
+		@apply border-2 border-primary bg-primary;
+	}
+
+	: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'] {
+		@apply border-2 border-primary bg-primary text-on-primary font-semibold;
+	}
+
+	:root .rui-tabs__tab[aria-selected='true'],
+	:root .rui-button[aria-pressed='true'],
+	:root .rui-pagination__link[aria-current='page'] {
+		@apply font-bold underline decoration-2 underline-offset-4;
+	}
+
+	:root .rui-alert,
+	:root .rui-toast__content,
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content,
+	:root .rui-calendar,
+		:root rui-tabs[variant='boxed'] {
+		@apply rounded-none border-2 border-on-background bg-background text-on-background shadow-none;
+	}
+
+	:root .rui-badge,
+	:root .rui-chip,
+	:root .rui-separator,
+	:root .rui-meter__track,
+	:root .rui-slider__range-track,
+	:root .rui-window-splitter__separator {
+		@apply border border-on-background;
+	}
+
+	:root .rui-table__header,
+	:root .rui-treegrid__row--header,
+	:root .rui-calendar__weekdays {
+		@apply border-b-2 border-on-background font-bold;
+	}
+
+	:root .rui-checkbox:has(input:disabled),
+	:root .rui-radio:has(input:disabled),
+	:root .rui-switch:has(input:disabled) {
+		opacity: 1;
+	}
+}