@ecopages/radiant-themes 0.0.0-stage → 0.2.0

package/dist/tokens/components/windows95.css

@@ -0,0 +1,433 @@
+@reference 'tailwindcss';
+
+/**
+ * @remarks Bevels follow the Windows 95 two-tone edges: an outer light and dark pair plus an inner highlight and shadow
+ * pair, drawn with inset shadows so they never change a control's box size.
+ */
+:root, :root[data-rui-theme='windows95'] {
+	--font-sans: Tahoma, 'MS Sans Serif', Arial, sans-serif;
+	--font-heading: Tahoma, 'MS Sans Serif', Arial, sans-serif;
+	--font-mono: 'Lucida Console', Consolas, Menlo, Monaco, 'Courier New', 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: 2px;
+	--focus-ring-offset: 2px;
+	--windows95-raised:
+		inset -1px -1px var(--windows95-dark), inset 1px 1px var(--windows95-light),
+		inset -2px -2px var(--windows95-shadow), inset 2px 2px var(--windows95-highlight);
+	--windows95-pressed:
+		inset -1px -1px var(--windows95-light), inset 1px 1px var(--windows95-dark),
+		inset -2px -2px var(--windows95-highlight), inset 2px 2px var(--windows95-shadow);
+	--windows95-sunken:
+		inset -1px -1px var(--windows95-light), inset 1px 1px var(--windows95-shadow),
+		inset -2px -2px var(--windows95-highlight), inset 2px 2px var(--windows95-dark);
+	--windows95-raised-thin: inset -1px -1px var(--windows95-shadow), inset 1px 1px var(--windows95-light);
+	--windows95-sunken-thin: inset -1px -1px var(--windows95-light), inset 1px 1px var(--windows95-shadow);
+}
+
+@layer components {
+	:root .rui-switch {
+		--rui-switch-track: var(--windows95-field);
+		--rui-switch-track-hover: var(--windows95-field);
+		--rui-switch-track-on: var(--windows95-selection);
+		--rui-switch-track-on-hover: var(--windows95-selection);
+		--rui-switch-thumb: var(--windows95-face);
+		--rui-switch-thumb-on: var(--windows95-face);
+	}
+
+	:root .rui-button,
+	:root .rui-button--filled,
+	:root .rui-button--outline,
+	:root .rui-button--destructive {
+		@apply rounded-none font-normal;
+		border-color: transparent;
+		background-clip: padding-box;
+		background-color: var(--windows95-face);
+		background-image: none;
+		color: var(--windows95-text);
+		box-shadow: var(--windows95-raised);
+		transition: none;
+	}
+
+	:root .rui-button--filled {
+		border-color: var(--windows95-dark);
+	}
+
+	:root .rui-button--destructive {
+		color: var(--windows95-red);
+	}
+
+	/**
+	 * @remarks Ghost, link, and bare buttons are text and icons, not push buttons: no bevel or minimum width.
+	 */
+	:root .rui-button--ghost,
+	:root .rui-button--link,
+	:root .rui-button--none {
+		@apply rounded-none;
+		min-width: 0;
+		border-color: transparent;
+		background-color: transparent;
+		background-image: none;
+		color: var(--windows95-text);
+		box-shadow: none;
+		transition: none;
+	}
+
+	:root .rui-button--link,
+	:root .rui-button--link:hover:not(:disabled),
+	:root .rui-button--link:active:not(:disabled) {
+		background-color: transparent;
+		color: var(--windows95-blue-light);
+		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(--windows95-face);
+	}
+
+	:root .rui-button--ghost:hover:not(:disabled) {
+		background-color: transparent;
+		box-shadow: var(--windows95-raised-thin);
+	}
+
+	: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[aria-pressed='true'] {
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-pressed);
+	}
+
+	:root .rui-button--ghost:active:not(:disabled),
+	:root .rui-button--ghost[aria-pressed='true'] {
+		background-color: transparent;
+		box-shadow: var(--windows95-sunken-thin);
+	}
+
+	:root .rui-button:focus-visible {
+		outline: 1px dotted var(--windows95-text);
+		outline-offset: -5px;
+	}
+
+	:root .rui-button:disabled {
+		opacity: 1;
+		color: var(--windows95-shadow);
+		text-shadow: 1px 1px 0 var(--windows95-light);
+	}
+
+	: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 {
+		@apply rounded-none;
+		border-color: transparent;
+		background-clip: padding-box;
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+		box-shadow: var(--windows95-sunken);
+	}
+
+	:root .rui-input-group .rui-input,
+	:root .rui-combobox__input,
+	:root .rui-number-field__input {
+		background-color: transparent;
+		color: var(--windows95-field-text);
+		box-shadow: none;
+	}
+
+	:root .rui-input:focus-visible,
+	:root .rui-textarea:focus-visible,
+	:root .rui-select__control:focus-visible {
+		outline: 1px dotted var(--windows95-text);
+		outline-offset: 2px;
+	}
+
+	:root .rui-checkbox__control,
+	:root .rui-radio__control {
+		border-color: transparent;
+		background-color: var(--windows95-field);
+		box-shadow: var(--windows95-sunken);
+	}
+
+	:root .rui-checkbox__control {
+		@apply rounded-none;
+		width: 0.8125rem;
+		height: 0.8125rem;
+	}
+
+	: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,
+	:root .rui-radio__input:checked + .rui-radio__control {
+		border-color: transparent;
+		background-color: var(--windows95-field);
+	}
+
+	:root .rui-checkbox__input:checked:not(:indeterminate):not([aria-checked='mixed']) + .rui-checkbox__control::after {
+		color: var(--windows95-field-text);
+	}
+
+	:root .rui-checkbox__input:indeterminate + .rui-checkbox__control::after,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control::after,
+	:root .rui-radio__input:checked + .rui-radio__control::after {
+		background-color: var(--windows95-field-text);
+	}
+
+	:root .rui-checkbox__input:indeterminate + .rui-checkbox__control::after,
+	:root .rui-checkbox__input[aria-checked='mixed'] + .rui-checkbox__control::after {
+		@apply rounded-none;
+	}
+
+	:root .rui-radio__control {
+		@apply rounded-full;
+	}
+
+	:root .rui-radio__input:checked + .rui-radio__control::after {
+		width: 0.25rem;
+		height: 0.25rem;
+	}
+
+	:root .rui-checkbox__input:focus-visible + .rui-checkbox__control,
+	:root .rui-radio__input:focus-visible + .rui-radio__control {
+		outline: 1px dotted var(--windows95-text);
+		outline-offset: 2px;
+		--tw-ring-shadow: 0 0 #0000;
+	}
+
+	:root .rui-switch__track {
+		@apply rounded-none;
+		border-color: transparent;
+		box-shadow: var(--windows95-sunken);
+	}
+
+	:root .rui-switch__thumb {
+		@apply rounded-none;
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-feed__article {
+		@apply rounded-none border-0 text-on-surface;
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-feed__article:hover {
+		background-color: var(--windows95-face);
+	}
+
+	: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(--windows95-selection);
+		color: var(--windows95-selection-text);
+	}
+
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu,
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox,
+	:root .rui-calendar,
+	:root .rui-dialog__surface,
+	:root .rui-popover-host,
+	:root .rui-hover-card__content {
+		@apply rounded-none border-0 bg-surface;
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-select__listbox,
+	:root .rui-combobox__listbox {
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+		box-shadow:
+			inset -1px -1px var(--windows95-dark),
+			inset 1px 1px var(--windows95-dark);
+	}
+
+	:root .rui-dialog__title,
+	:root .rui-calendar__header,
+	:root .rui-sidebar__header {
+		@apply font-bold;
+		background-color: var(--windows95-selection);
+		color: var(--windows95-selection-text);
+	}
+
+	:root .rui-dialog__title {
+		min-height: 1.5rem;
+		margin: calc(3px - var(--rui-dialog-padding)) calc(3px - var(--rui-dialog-padding)) var(--space-3);
+		padding: 0.1875rem 2rem 0.1875rem 0.25rem;
+	}
+
+	:root .rui-dialog__close {
+		@apply rounded-none border-0;
+		z-index: 1;
+		background-color: var(--windows95-face);
+		color: var(--windows95-text);
+		top: 0.375rem;
+		right: 0.375rem;
+		width: 1rem;
+		height: 0.875rem;
+		box-shadow: var(--windows95-raised);
+	}
+
+	: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 overflow-x-auto overflow-y-clip border-0 bg-transparent px-0 pt-0.5;
+		gap: 0;
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
+		@apply relative rounded-none border-0 text-on-surface font-normal;
+		z-index: 0;
+		margin-bottom: -2px;
+		background-color: var(--windows95-face);
+		box-shadow:
+			inset -1px 0 var(--windows95-dark),
+			inset 1px 1px var(--windows95-light),
+			inset -2px 0 var(--windows95-shadow),
+			inset 2px 2px var(--windows95-highlight);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
+		@apply font-normal;
+		z-index: 1;
+		margin-top: -2px;
+		padding-bottom: calc(var(--rui-tabs-tab-padding-y, 0.375rem) + 2px);
+	}
+
+	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
+		@apply rounded-none border-0 text-on-surface;
+		position: relative;
+		z-index: 0;
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-raised);
+		padding: var(--rui-tabs-panel-padding);
+	}
+
+	:root .rui-alert,
+	:root .rui-toast__content {
+		@apply rounded-none border-0 text-on-surface;
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-alert--error .rui-alert__icon {
+		color: var(--windows95-red);
+	}
+
+	:root .rui-alert--warning .rui-alert__icon {
+		color: var(--windows95-amber);
+	}
+
+	:root .rui-table__header,
+	:root .rui-treegrid__row--header,
+	:root .rui-calendar__weekdays {
+		@apply font-normal;
+		background-color: var(--windows95-face);
+	}
+
+	:root .rui-table__header th,
+	:root .rui-table__header .rui-table__cell {
+		box-shadow: var(--windows95-raised-thin);
+	}
+
+	:root .rui-table,
+	:root .rui-grid {
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+	}
+
+	:root .rui-badge,
+	:root .rui-chip,
+	:root .rui-pagination__link {
+		@apply rounded-none border-0 text-on-surface;
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-raised-thin);
+	}
+
+	:root .rui-separator,
+	:root .rui-sidebar__separator {
+		background-color: var(--windows95-shadow);
+		box-shadow: 0 1px 0 var(--windows95-light);
+	}
+
+	:root .rui-slider__thumb,
+	:root .rui-number-field__stepper {
+		@apply rounded-none border-0;
+		background-color: var(--windows95-face);
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-meter__track,
+	:root .rui-slider__range-track {
+		@apply rounded-none border-0;
+		background-color: var(--windows95-field);
+		box-shadow: var(--windows95-sunken-thin);
+	}
+
+	:root .rui-meter__fill {
+		@apply rounded-none;
+		background-color: var(--windows95-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,
+		:root .rui-switch__track {
+			border: 1px solid var(--windows95-field-text);
+			box-shadow: none;
+		}
+
+		:root .rui-button,
+		:root .rui-button--filled,
+		:root .rui-button--outline,
+		:root .rui-button--destructive {
+			border-color: var(--windows95-dark);
+			box-shadow: none;
+		}
+	}
+}

package/dist/tokens/roles/cloudflare.css

@@ -0,0 +1,150 @@
+:where(:root),
+:root[data-rui-theme='cloudflare'] {
+	--gray-50: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 4%);
+	--gray-100: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 9%);
+	--gray-200: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 18%);
+	--gray-300: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 32%);
+	--gray-400: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 48%);
+	--gray-500: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 62%);
+	--gray-600: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 72%);
+	--gray-700: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 80%);
+	--gray-800: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 88%);
+	--gray-900: color-mix(in oklab, var(--color-cloudflare-canvas), var(--color-cloudflare-fg) 94%);
+	--gray-950: var(--color-cloudflare-fg);
+
+	--primary: var(--color-cloudflare-orange);
+	--on-primary: white;
+	--primary-light: var(--color-cloudflare-orange-bright);
+	--primary-dark: var(--color-cloudflare-orange-deep);
+	--primary-container: color-mix(in oklab, var(--color-cloudflare-orange-bright), white 88%);
+	--on-primary-container: color-mix(in oklab, var(--color-cloudflare-orange), black 45%);
+	--secondary: var(--color-cloudflare-recessed);
+	--on-secondary: var(--color-cloudflare-fg);
+	--secondary-light: var(--color-cloudflare-elevated);
+	--secondary-dark: color-mix(in oklab, var(--color-cloudflare-recessed), black 8%);
+	--secondary-container: var(--color-cloudflare-recessed);
+	--on-secondary-container: var(--color-cloudflare-fg);
+	--tertiary: var(--color-cloudflare-purple);
+	--on-tertiary: white;
+	--tertiary-container: color-mix(in oklab, var(--color-cloudflare-purple), white 90%);
+	--on-tertiary-container: color-mix(in oklab, var(--color-cloudflare-purple), black 60%);
+	--error: var(--color-cloudflare-red);
+	--on-error: white;
+	--error-light: color-mix(in oklab, var(--color-cloudflare-red), white 30%);
+	--error-dark: color-mix(in oklab, var(--color-cloudflare-red), black 30%);
+	--error-container: color-mix(in oklab, var(--color-cloudflare-red), white 91%);
+	--on-error-container: color-mix(in oklab, var(--color-cloudflare-red), black 60%);
+	--success: var(--color-cloudflare-green);
+	--on-success: white;
+	--success-light: color-mix(in oklab, var(--color-cloudflare-green), white 30%);
+	--success-dark: color-mix(in oklab, var(--color-cloudflare-green), black 30%);
+	--success-container: color-mix(in oklab, var(--color-cloudflare-green), white 90%);
+	--on-success-container: color-mix(in oklab, var(--color-cloudflare-green), black 60%);
+	--info: var(--color-cloudflare-blue);
+	--on-info: white;
+	--info-light: color-mix(in oklab, var(--color-cloudflare-blue), white 30%);
+	--info-dark: color-mix(in oklab, var(--color-cloudflare-blue), black 45%);
+	--info-container: color-mix(in oklab, var(--color-cloudflare-blue), white 90%);
+	--on-info-container: color-mix(in oklab, var(--color-cloudflare-blue), black 60%);
+	--warning: var(--color-cloudflare-amber-text);
+	--on-warning: white;
+	--warning-light: color-mix(in oklab, var(--color-cloudflare-amber-text), white 30%);
+	--warning-dark: color-mix(in oklab, var(--color-cloudflare-amber-text), black 30%);
+	--warning-container: color-mix(in oklab, var(--color-cloudflare-amber), white 88%);
+	--on-warning-container: color-mix(in oklab, var(--color-cloudflare-amber), black 60%);
+	--neutral: var(--color-cloudflare-muted-fg);
+	--surface: var(--color-cloudflare-base);
+	--on-surface: var(--color-cloudflare-fg);
+	--surface-container-lowest: var(--color-cloudflare-base);
+	--on-surface-container-lowest: var(--color-cloudflare-fg);
+	--surface-container-low: var(--color-cloudflare-elevated);
+	--on-surface-container-low: var(--color-cloudflare-fg);
+	--surface-container: var(--color-cloudflare-recessed);
+	--on-surface-container: var(--color-cloudflare-fg);
+	--surface-container-high: color-mix(in oklab, var(--color-cloudflare-recessed), var(--color-cloudflare-tint) 50%);
+	--on-surface-container-high: var(--color-cloudflare-fg);
+	--surface-container-highest: var(--color-cloudflare-tint);
+	--on-surface-container-highest: var(--color-cloudflare-fg);
+	--background: var(--color-cloudflare-canvas);
+	--on-background: var(--color-cloudflare-fg);
+	--rui-border-color: var(--color-cloudflare-border);
+	--rui-control-border-color: var(--color-cloudflare-border-strong);
+	--border: var(--rui-border-color);
+	--focus-ring: var(--color-cloudflare-blue-bright);
+	--on-focus-ring: white;
+	--link: var(--color-cloudflare-blue);
+	--overlay: oklch(0% 0 0 / 0.45);
+	--background-code: var(--color-cloudflare-recessed);
+	--on-background-code: var(--color-cloudflare-fg);
+}
+
+:where(.dark),
+:root.dark[data-rui-theme='cloudflare'] {
+	--gray-50: color-mix(in oklab, var(--color-cloudflare-canvas), white 96%);
+	--gray-100: color-mix(in oklab, var(--color-cloudflare-canvas), white 91%);
+	--gray-200: color-mix(in oklab, var(--color-cloudflare-canvas), white 82%);
+	--gray-300: color-mix(in oklab, var(--color-cloudflare-canvas), white 68%);
+	--gray-400: color-mix(in oklab, var(--color-cloudflare-canvas), white 52%);
+	--gray-500: color-mix(in oklab, var(--color-cloudflare-canvas), white 38%);
+	--gray-600: color-mix(in oklab, var(--color-cloudflare-canvas), white 28%);
+	--gray-700: color-mix(in oklab, var(--color-cloudflare-canvas), white 20%);
+	--gray-800: color-mix(in oklab, var(--color-cloudflare-canvas), white 12%);
+	--gray-900: color-mix(in oklab, var(--color-cloudflare-canvas), white 6%);
+	--gray-950: var(--color-cloudflare-canvas);
+	--primary: var(--color-cloudflare-orange);
+	--on-primary: #1a1a1a;
+	--primary-light: var(--color-cloudflare-orange-bright);
+	--primary-dark: var(--color-cloudflare-orange-deep);
+	--primary-container: oklch(30% 0.07 55);
+	--on-primary-container: oklch(92% 0.05 65);
+	--secondary: var(--color-cloudflare-recessed);
+	--on-secondary: var(--color-cloudflare-fg);
+	--secondary-light: var(--color-cloudflare-base);
+	--secondary-dark: var(--color-cloudflare-tint);
+	--secondary-container: var(--color-cloudflare-recessed);
+	--on-secondary-container: var(--color-cloudflare-fg);
+	--tertiary: var(--color-cloudflare-purple);
+	--on-tertiary: oklch(20% 0.03 290);
+	--tertiary-container: oklch(32% 0.06 290);
+	--on-tertiary-container: oklch(92% 0.04 290);
+	--error: var(--color-cloudflare-red);
+	--on-error: oklch(20% 0.04 25);
+	--error-container: oklch(32% 0.08 25);
+	--on-error-container: oklch(92% 0.04 25);
+	--success: var(--color-cloudflare-green);
+	--on-success: oklch(16% 0.04 150);
+	--success-container: oklch(30% 0.06 150);
+	--on-success-container: oklch(91% 0.05 150);
+	--info: var(--color-cloudflare-blue);
+	--on-info: oklch(14% 0.04 255);
+	--info-container: oklch(28% 0.07 255);
+	--on-info-container: oklch(91% 0.04 255);
+	--warning: var(--color-cloudflare-amber-text);
+	--on-warning: oklch(22% 0.05 85);
+	--warning-container: oklch(33% 0.06 85);
+	--on-warning-container: oklch(94% 0.05 90);
+	--neutral: var(--color-cloudflare-muted-fg);
+	--surface: var(--color-cloudflare-base);
+	--on-surface: var(--color-cloudflare-fg);
+	--surface-container-lowest: var(--color-cloudflare-canvas);
+	--on-surface-container-lowest: var(--color-cloudflare-fg);
+	--surface-container-low: var(--color-cloudflare-elevated);
+	--on-surface-container-low: var(--color-cloudflare-fg);
+	--surface-container: var(--color-cloudflare-recessed);
+	--on-surface-container: var(--color-cloudflare-fg);
+	--surface-container-high: var(--color-cloudflare-base);
+	--on-surface-container-high: var(--color-cloudflare-fg);
+	--surface-container-highest: var(--color-cloudflare-tint);
+	--on-surface-container-highest: var(--color-cloudflare-fg);
+	--background: var(--color-cloudflare-canvas);
+	--on-background: var(--color-cloudflare-fg);
+	--rui-border-color: var(--color-cloudflare-border);
+	--rui-control-border-color: var(--color-cloudflare-border-strong);
+	--border: var(--rui-border-color);
+	--focus-ring: var(--color-cloudflare-blue-bright);
+	--on-focus-ring: oklch(14% 0.04 255);
+	--link: var(--color-cloudflare-blue-bright);
+	--overlay: oklch(0% 0 0 / 0.72);
+	--background-code: var(--color-cloudflare-recessed);
+	--on-background-code: var(--color-cloudflare-fg);
+}