@ecopages/radiant-themes 0.2.0 → 0.2.2

package/dist/tokens/components/windows95.css

@@ -4,7 +4,8 @@
  * @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'] {
+: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;
@@ -127,7 +128,7 @@
 
 	:root .rui-button:disabled {
 		opacity: 1;
-		color: var(--windows95-shadow);
+		color: var(--windows95-disabled);
 		text-shadow: 1px 1px 0 var(--windows95-light);
 	}
 
@@ -139,6 +140,7 @@
 	:root .rui-date-range-picker__group,
 	:root .rui-input-group,
 	: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 rounded-none;
 		border-color: transparent;
@@ -241,6 +243,7 @@
 	: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[aria-current='page'],
 	:root .rui-sidebar__menu-button--active,
 	:root .rui-navigation-menu__link-list a[aria-current='page'] {
 		background-color: var(--windows95-selection);
@@ -253,13 +256,29 @@
 	:root .rui-combobox__listbox,
 	:root .rui-calendar,
 	:root .rui-dialog__surface,
-	:root .rui-popover-host,
+	:root .rui-popover:where(:not(.rui-popover--listbox)),
 	: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 .rui-listbox,
+	:root .rui-combobox__listbox .rui-listbox {
+		background-color: transparent;
+	}
+
+	/**
+	 * @remarks Tooltips use the pale yellow info color with a 1px black frame.
+	 */
+	:root .rui-tooltip__content {
+		--rui-tooltip-surface: #ffffe1;
+		--rui-tooltip-color: #000000;
+		--rui-tooltip-radius: 0;
+		--rui-tooltip-shadow: none;
+		border: 1px solid #000000;
+	}
+
 	:root .rui-select__listbox,
 	:root .rui-combobox__listbox {
 		background-color: var(--windows95-field);
@@ -277,8 +296,13 @@
 		color: var(--windows95-selection-text);
 	}
 
+	:root .rui-popover[role='dialog'] {
+		padding: var(--space-2);
+	}
+
 	:root .rui-dialog__title {
-		min-height: 1.5rem;
+		font-size: var(--text-sm);
+		min-height: 1.125rem;
 		margin: calc(3px - var(--rui-dialog-padding)) calc(3px - var(--rui-dialog-padding)) var(--space-3);
 		padding: 0.1875rem 2rem 0.1875rem 0.25rem;
 	}
@@ -288,7 +312,7 @@
 		z-index: 1;
 		background-color: var(--windows95-face);
 		color: var(--windows95-text);
-		top: 0.375rem;
+		top: 0.5625rem;
 		right: 0.375rem;
 		width: 1rem;
 		height: 0.875rem;
@@ -299,15 +323,23 @@
 		@apply overflow-visible rounded-none border-0 bg-transparent shadow-none;
 	}
 
+	/**
+	 * @remarks The tab row overlaps the page's top bevel by 2px. Unselected tabs stop above that bevel; the selected
+	 * tab reaches down over it so it joins the page, and stands 2px taller than its neighbours.
+	 */
 	: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;
+		@apply min-w-0 max-w-full items-end overflow-x-auto overflow-y-clip border-0 bg-transparent px-0.5 pt-0.5;
+		position: relative;
+		z-index: 1;
+		margin-bottom: -2px;
 		gap: 0;
 	}
 
 	:root rui-tabs[variant='boxed'] .rui-tabs__tab {
-		@apply relative rounded-none border-0 text-on-surface font-normal;
+		@apply relative rounded-none border-0 text-on-surface font-normal opacity-100;
 		z-index: 0;
-		margin-bottom: -2px;
+		margin-bottom: 2px;
+		color: var(--windows95-text);
 		background-color: var(--windows95-face);
 		box-shadow:
 			inset -1px 0 var(--windows95-dark),
@@ -319,8 +351,10 @@
 	: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);
+		margin-inline: -2px;
+		margin-bottom: 0;
+		padding-block: calc(var(--rui-tabs-tab-padding-y, 0.375rem) + 2px);
+		padding-inline: calc(var(--rui-tabs-tab-padding-x, 0.75rem) + 2px);
 	}
 
 	:root rui-tabs[variant='boxed'] .rui-tabs__panel {
@@ -333,36 +367,104 @@
 	}
 
 	:root .rui-alert,
-	:root .rui-toast__content {
+	:root .rui-toast {
 		@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 {
+	:root .rui-alert--error .rui-alert__icon,
+	:root .rui-toast--error .rui-toast__icon {
 		color: var(--windows95-red);
 	}
 
-	:root .rui-alert--warning .rui-alert__icon {
+	:root .rui-alert--warning .rui-alert__icon,
+	:root .rui-toast--warning .rui-toast__icon {
 		color: var(--windows95-amber);
 	}
 
-	:root .rui-table__header,
+	:root .rui-alert--success .rui-alert__icon,
+	:root .rui-toast--success .rui-toast__icon {
+		color: var(--windows95-green);
+	}
+
+	:root .rui-alert--info .rui-alert__icon,
+	:root .rui-toast--info .rui-toast__icon {
+		color: var(--windows95-blue-light);
+	}
+
 	: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 {
+	:root .rui-table,
+	:root .rui-grid {
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+	}
+
+	/**
+	 * @remarks Windows 95 tree views are recessed white work areas with raised column headers, compact rows, and
+	 * square plus/minus disclosure boxes instead of modern chevrons.
+	 */
+	:root .rui-treegrid {
+		@apply rounded-none border-0;
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+		box-shadow: var(--windows95-sunken);
+		--rui-treegrid-indent: 0.875rem;
+	}
+
+	:root .rui-treegrid__cell {
+		@apply border-0 bg-transparent px-1.5 py-1;
+		color: var(--windows95-field-text);
+	}
+
+	:root .rui-treegrid__row--header .rui-treegrid__cell {
+		@apply font-normal;
+		background-color: var(--windows95-face);
+		color: var(--windows95-text);
 		box-shadow: var(--windows95-raised-thin);
 	}
 
-	:root .rui-table,
-	:root .rui-grid {
+	:root .rui-treegrid__row:not(.rui-treegrid__row--header):hover .rui-treegrid__cell:not([aria-selected='true']) {
+		background-color: var(--windows95-highlight);
+	}
+
+	:root .rui-treegrid__cell[aria-selected='true'] {
+		background-color: var(--windows95-selection);
+		color: var(--windows95-selection-text);
+	}
+
+	:root .rui-treegrid__cell:focus-visible {
+		outline: 1px dotted var(--windows95-field-text);
+		outline-offset: -2px;
+		--tw-ring-shadow: 0 0 #0000;
+		box-shadow: none;
+	}
+
+	:root .rui-treegrid__row[aria-expanded='false'] .rui-treegrid__cell:first-child::before,
+	:root .rui-treegrid__row[aria-expanded='true'] .rui-treegrid__cell:first-child::before {
+		content: '+';
+		width: 0.75rem;
+		height: 0.75rem;
+		margin-inline-end: 0.25rem;
+		border: 1px solid var(--windows95-line);
 		background-color: var(--windows95-field);
 		color: var(--windows95-field-text);
+		font:
+			0.625rem/0.625rem 'MS Sans Serif',
+			Tahoma,
+			sans-serif;
+		text-align: center;
+		transform: none;
+		vertical-align: -0.05rem;
+	}
+
+	:root .rui-treegrid__row[aria-expanded='true'] .rui-treegrid__cell:first-child::before {
+		content: '-';
 	}
 
 	:root .rui-badge,
@@ -402,6 +504,253 @@
 		@apply rounded-none;
 		background-color: transparent;
 	}
+
+	/**
+	 * @remarks Trackbars are a 4px sunken channel under an 11 by 21 pixel raised pointer.
+	 */
+	:root .rui-slider {
+		--rui-slider-track-size: 0.25rem;
+	}
+
+	:root .rui-slider__range {
+		@apply py-3;
+	}
+
+	:root .rui-slider__thumb {
+		inline-size: 0.6875rem;
+		block-size: 1.3125rem;
+	}
+
+	:root .rui-slider--vertical .rui-slider__thumb {
+		inline-size: 1.3125rem;
+		block-size: 0.6875rem;
+	}
+
+	:root .rui-slider__range-track {
+		box-shadow: var(--windows95-sunken);
+	}
+
+	/**
+	 * @remarks Drop-down lists and combo boxes end in a raised arrow button inside the sunken field, with a solid
+	 * triangle in place of the chevron icon.
+	 */
+	:root .rui-control-toggle {
+		@apply rounded-none;
+		align-self: stretch;
+		width: 1.125rem;
+		height: auto;
+		margin: 2px;
+		margin-inline-start: 0;
+		background-color: var(--windows95-face);
+		color: var(--windows95-text);
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-control-toggle:hover:not(:disabled) {
+		background-color: var(--windows95-face);
+	}
+
+	:root .rui-control-toggle:active:not(:disabled) {
+		box-shadow: var(--windows95-pressed);
+	}
+
+	:root .rui-control-toggle > svg {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	:root .rui-control-toggle:where([data-select-toggle], [data-combobox-trigger]) > svg {
+		display: none;
+	}
+
+	:root .rui-control-toggle:where([data-select-toggle], [data-combobox-trigger])::after {
+		content: '';
+		width: 7px;
+		height: 4px;
+		background-color: currentColor;
+		clip-path: polygon(0 0, 100% 0, 50% 100%);
+	}
+
+	/**
+	 * @remarks The menu bar is flat: a title only sinks while its menu is open. Menu commands highlight in navy.
+	 */
+	:root .rui-menubar {
+		@apply rounded-none border-0 bg-transparent p-0;
+		gap: 0;
+	}
+
+	:root .rui-menubar__item {
+		@apply rounded-none;
+		color: var(--windows95-text);
+	}
+
+	:root .rui-menubar__item:hover:not(:disabled):not([aria-disabled='true']),
+	:root .rui-menubar__item:focus-visible {
+		background-color: transparent;
+		box-shadow: none;
+		--tw-ring-shadow: 0 0 #0000;
+		outline: 1px dotted var(--windows95-text);
+		outline-offset: -2px;
+	}
+
+	:root .rui-menubar__item[aria-expanded='true'],
+	:root .rui-menubar__item[aria-expanded='true']:hover:not(:disabled) {
+		@apply font-normal;
+		outline: 0;
+		background-color: transparent;
+		color: var(--windows95-text);
+		box-shadow: var(--windows95-sunken-thin);
+	}
+
+	:root .rui-menu-button__menu,
+	:root .rui-menubar__menu {
+		--rui-menu-item-hover: var(--windows95-selection);
+		padding: 3px;
+	}
+
+	:root .rui-menu-button__item,
+	:root .rui-menubar__menu-item {
+		@apply rounded-none;
+		color: var(--windows95-text);
+	}
+
+	:root .rui-menu-button__item:hover:not([aria-disabled='true']),
+	:root .rui-menu-button__item:focus-visible:not([aria-disabled='true']),
+	:root .rui-menu-button__item[aria-expanded='true'],
+	:root .rui-menu-button__item:hover:not([aria-disabled='true'])::after,
+	:root .rui-menu-button__item:focus-visible:not([aria-disabled='true'])::after,
+	:root .rui-menubar__menu-item:hover:not(:disabled):not([aria-disabled='true']),
+	:root .rui-menubar__menu-item:focus-visible,
+	:root .rui-menubar__menu-item[aria-expanded='true'] {
+		color: var(--windows95-selection-text);
+		--tw-ring-shadow: 0 0 #0000;
+	}
+
+	/**
+	 * @remarks List boxes and tree views are sunken white fields with square navy selection.
+	 */
+	:root .rui-listbox--bordered,
+	:root .rui-tree {
+		@apply rounded-none border-0;
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+		box-shadow: var(--windows95-sunken);
+		padding: 4px;
+	}
+
+	:root .rui-listbox {
+		gap: 0;
+	}
+
+	:root .rui-listbox__option,
+	:root .rui-tree__node {
+		@apply rounded-none py-0.5;
+		color: var(--windows95-field-text);
+	}
+
+	:root .rui-listbox__option[data-active]:not([aria-selected='true']):not([aria-disabled='true']) {
+		background-color: var(--windows95-selection);
+		color: var(--windows95-selection-text);
+	}
+
+	:root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']),
+	:root .rui-listbox__option:focus-visible,
+	:root .rui-tree__node:focus-visible {
+		--tw-ring-shadow: 0 0 #0000;
+		outline: 1px dotted var(--windows95-field-text);
+		outline-offset: -1px;
+	}
+
+	:root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']),
+	:root .rui-listbox__option[aria-selected='true']:focus-visible {
+		outline-color: var(--windows95-selection-text);
+		background-image: none;
+	}
+
+	:root .rui-tree__node {
+		@apply w-auto px-1 font-normal;
+	}
+
+	:root .rui-tree__node:hover:not([aria-selected='true']) {
+		background-color: transparent;
+	}
+
+	:root .rui-tree__node[aria-selected='true'] {
+		@apply font-normal;
+	}
+
+	:root .rui-tree ul {
+		border-inline-start: 1px dotted var(--windows95-line);
+	}
+
+	:root .rui-tree__node[aria-expanded]::before {
+		content: '+';
+		display: inline-block;
+		width: 9px;
+		height: 9px;
+		margin-inline-end: 0.375rem;
+		border: 1px solid var(--windows95-line);
+		background-color: var(--windows95-field);
+		color: var(--windows95-field-text);
+		font: 9px/7px 'MS Sans Serif', Tahoma, sans-serif;
+		text-align: center;
+		transform: none;
+		transition: none;
+		vertical-align: 0;
+	}
+
+	:root .rui-tree__node[aria-expanded='true']::before {
+		content: '-';
+	}
+
+	:root .rui-tag {
+		@apply rounded-none;
+	}
+
+	:root .rui-tag__remove {
+		@apply rounded-none;
+	}
+
+	/**
+	 * @remarks The calendar's title bar keeps the navy caption with white text, and its month arrows are raised caption
+	 * buttons.
+	 */
+	:root .rui-calendar__month {
+		color: var(--windows95-selection-text);
+	}
+
+	:root .rui-calendar__header {
+		padding: 2px;
+	}
+
+	:root .rui-calendar__nav {
+		@apply rounded-none;
+		width: 1rem;
+		height: 0.875rem;
+		justify-self: center;
+		background-color: var(--windows95-face);
+		color: var(--windows95-text);
+		box-shadow: var(--windows95-raised);
+	}
+
+	:root .rui-calendar__nav:hover:not(:disabled) {
+		background-color: var(--windows95-face);
+	}
+
+	:root .rui-calendar__nav:active:not(:disabled) {
+		box-shadow: var(--windows95-pressed);
+	}
+
+	:root .rui-table__column,
+	:root .rui-table__sort {
+		@apply font-normal;
+	}
+
+	:root .rui-table__column {
+		background-color: var(--windows95-face);
+		color: var(--windows95-text);
+		box-shadow: var(--windows95-raised-thin);
+	}
 }
 
 @media (prefers-contrast: more) {
@@ -414,6 +763,7 @@
 		:root .rui-date-range-picker__group,
 		:root .rui-input-group,
 		: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,
 		:root .rui-checkbox__control,
 		:root .rui-radio__control,
@@ -431,3 +781,105 @@
 		}
 	}
 }
+
+/**
+ * WebKit classic Windows scrollbars use a full-size gutter, a dithered track, and four-tone raised controls instead of
+ * a thin rounded thumb. Firefox receives the native fallback declared above.
+ */
+@supports (-moz-appearance: none) {
+	:root,
+	:root * {
+		scrollbar-width: auto;
+		scrollbar-color: var(--windows95-field-text) var(--windows95-face);
+	}
+}
+
+:root::-webkit-scrollbar,
+:root *::-webkit-scrollbar {
+	width: 16px;
+	height: 16px;
+}
+
+:root::-webkit-scrollbar-track,
+:root *::-webkit-scrollbar-track {
+	background-color: var(--windows95-face);
+	background-image:
+		radial-gradient(circle at 0.5px 0.5px, var(--windows95-shadow) 0.5px, transparent 0.6px),
+		radial-gradient(circle at 1.5px 1.5px, var(--windows95-shadow) 0.5px, transparent 0.6px);
+	background-size: 2px 2px;
+}
+
+:root::-webkit-scrollbar-thumb,
+:root *::-webkit-scrollbar-thumb,
+:root::-webkit-scrollbar-button,
+:root *::-webkit-scrollbar-button {
+	box-sizing: border-box;
+	border-radius: 0;
+	background-color: var(--windows95-face);
+	border: 1px solid;
+	border-color: var(--windows95-face) var(--windows95-dark) var(--windows95-dark) var(--windows95-face);
+	box-shadow:
+		inset 1px 1px var(--windows95-light),
+		inset -1px -1px var(--windows95-shadow);
+}
+
+:root::-webkit-scrollbar-button,
+:root *::-webkit-scrollbar-button {
+	display: none;
+}
+
+:root::-webkit-scrollbar-button:single-button,
+:root *::-webkit-scrollbar-button:single-button {
+	display: block;
+	width: 16px;
+	height: 16px;
+}
+
+:root::-webkit-scrollbar-button:single-button:vertical:decrement,
+:root *::-webkit-scrollbar-button:single-button:vertical:decrement {
+	background-image:
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 3px / 2px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 5px / 4px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 7px / 6px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 9px / 8px 2px no-repeat;
+}
+
+:root::-webkit-scrollbar-button:single-button:vertical:increment,
+:root *::-webkit-scrollbar-button:single-button:vertical:increment {
+	background-image:
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 9px / 2px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 7px / 4px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 5px / 6px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) center 3px / 8px 2px no-repeat;
+}
+
+:root::-webkit-scrollbar-button:single-button:horizontal:decrement,
+:root *::-webkit-scrollbar-button:single-button:horizontal:decrement {
+	background-image:
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 3px center / 2px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 5px center / 2px 4px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 7px center / 2px 6px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 9px center / 2px 8px no-repeat;
+}
+
+:root::-webkit-scrollbar-button:single-button:horizontal:increment,
+:root *::-webkit-scrollbar-button:single-button:horizontal:increment {
+	background-image:
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 9px center / 2px 2px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 7px center / 2px 4px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 5px center / 2px 6px no-repeat,
+		linear-gradient(var(--windows95-text), var(--windows95-text)) 3px center / 2px 8px no-repeat;
+}
+
+:root::-webkit-scrollbar-button:active,
+:root *::-webkit-scrollbar-button:active {
+	box-shadow: var(--windows95-pressed);
+}
+
+:root::-webkit-scrollbar-corner,
+:root *::-webkit-scrollbar-corner,
+:root::-webkit-resizer,
+:root *::-webkit-resizer {
+	background-color: var(--windows95-face);
+	background-image: linear-gradient(135deg, transparent 50%, var(--windows95-shadow) 50% 60%, transparent 60%);
+}

package/dist/tokens/roles/cloudflare.css

@@ -92,7 +92,7 @@
 	--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;
+	--on-primary: white;
 	--primary-light: var(--color-cloudflare-orange-bright);
 	--primary-dark: var(--color-cloudflare-orange-deep);
 	--primary-container: oklch(30% 0.07 55);

package/dist/tokens/roles/github.css

@@ -12,12 +12,12 @@
 	--gray-900: color-mix(in oklab, var(--color-github-canvas), var(--color-github-fg) 94%);
 	--gray-950: var(--color-github-fg);
 
-	--primary: var(--color-github-green);
+	--primary: var(--color-github-blue);
 	--on-primary: white;
-	--primary-light: color-mix(in oklab, var(--color-github-green), white 12%);
-	--primary-dark: color-mix(in oklab, var(--color-github-green), black 24%);
-	--primary-container: color-mix(in oklab, var(--color-github-green), white 90%);
-	--on-primary-container: color-mix(in oklab, var(--color-github-green), black 60%);
+	--primary-light: var(--color-github-blue-light);
+	--primary-dark: #0550ae;
+	--primary-container: var(--color-github-accent-subtle);
+	--on-primary-container: var(--color-github-accent-on-subtle);
 	--secondary: var(--color-github-subtle);
 	--on-secondary: var(--color-github-fg);
 	--secondary-light: var(--color-github-white);
@@ -53,7 +53,7 @@
 	--warning-container: color-mix(in oklab, var(--color-github-orange), white 88%);
 	--on-warning-container: color-mix(in oklab, var(--color-github-orange), black 60%);
 	--neutral: var(--color-github-muted-fg);
-	--surface: var(--color-github-subtle);
+	--surface: var(--color-github-canvas);
 	--on-surface: var(--color-github-fg);
 	--surface-container-lowest: var(--color-github-canvas);
 	--on-surface-container-lowest: var(--color-github-fg);
@@ -91,12 +91,12 @@
 	--gray-800: color-mix(in oklab, var(--color-github-canvas), white 12%);
 	--gray-900: color-mix(in oklab, var(--color-github-canvas), white 6%);
 	--gray-950: var(--color-github-canvas);
-	--primary: var(--color-github-green);
+	--primary: var(--color-github-blue);
 	--on-primary: white;
-	--primary-light: #238636;
-	--primary-dark: #116329;
-	--primary-container: #0f3d1e;
-	--on-primary-container: #aff5b4;
+	--primary-light: var(--color-github-blue-light);
+	--primary-dark: #1158c7;
+	--primary-container: var(--color-github-accent-subtle);
+	--on-primary-container: var(--color-github-accent-on-subtle);
 	--secondary: var(--color-github-muted);
 	--on-secondary: var(--color-github-fg);
 	--secondary-light: var(--color-github-border);
@@ -124,7 +124,7 @@
 	--warning-container: #4d2d00;
 	--on-warning-container: #ffdf8b;
 	--neutral: var(--color-github-muted-fg);
-	--surface: var(--color-github-subtle);
+	--surface: var(--color-github-canvas);
 	--on-surface: var(--color-github-fg);
 	--surface-container-lowest: var(--color-github-canvas);
 	--on-surface-container-lowest: var(--color-github-fg);