rimecms 0.32.1 → 1.0.0

package/dist/panel/components/ui/button/button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Kbd from '../kbd/Kbd.svelte';
   import type { Props } from './index.js';
 
   let {
@@ -9,11 +10,18 @@
     href = undefined,
     type = 'button',
     icon,
+    kbd,
     children,
     ...restProps
   }: Props = $props();
 </script>
 
+{#snippet kbdProp()}
+  {#if kbd}
+    <span class="rz-button__kbd"><Kbd keys={kbd} plain /></span>
+  {/if}
+{/snippet}
+
 {#snippet iconProp()}
   {#if icon}
     {@const IconProp = icon}
@@ -23,7 +31,7 @@
       </div>
     {:else}
       <div class="rz-button__icon">
-        <IconProp size="14" strokeWidth="2px" />
+        <IconProp size={size === 'xs' ? 10 : 14} strokeWidth="2px" />
       </div>
     {/if}
   {/if}
@@ -44,36 +52,45 @@
     bind:this={ref}
     class="rz-button rz-button--size-{size} rz-button--{variant} {className}"
     {type}
+    data-kbd={kbd}
     {...restProps}
   >
     {@render iconProp()}
     {@render children?.()}
+    {@render kbdProp()}
   </button>
 {/if}
 
-<style>:root {
-    --rz-button-tl-radius: var(--rz-radius-md);
-    --rz-button-tr-radius: var(--rz-radius-md);
-    --rz-button-br-radius: var(--rz-radius-md);
-    --rz-button-bl-radius: var(--rz-radius-md);
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
 
-    /* Default variant */
-    --rz-button-default-bg: light-dark(hsl(var(--rz-gray-0)), hsl(var(--rz-gray-15)));
-    --rz-button-default-bg-hover: light-dark(hsl(var(--rz-gray-2)), hsl(var(--rz-gray-19)));
-    --rz-button-default-bg-disabled: light-dark(hsl(var(--rz-gray-3)), hsl(var(--rz-gray-12)));
-    --rz-button-default-fg: light-dark(hsl(var(--rz-gray-13)), hsl(var(--rz-gray-2)));
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:root {
+    --rz-button-tl-radius: var(--rz-radius-lg);
+    --rz-button-tr-radius: var(--rz-radius-lg);
+    --rz-button-br-radius: var(--rz-radius-lg);
+    --rz-button-bl-radius: var(--rz-radius-lg);
 
     /* Success variant */
-    --rz-button-success-bg: hsl(var(--rz-color-spot) / 1);
-    --rz-button-success-bg-hover: hsl(var(--rz-color-spot) / 0.6);
-    --rz-button-success-bg-disabled: hsl(var(--rz-color-spot) / 0.3);
-    --rz-button-success-fg: hsl(var(--rz-color-spot-fg) / 1);
+    --rz-button-success-bg: var(--rz-accent);
+    --rz-button-success-fg: var(--rz-accent-fg);
 
     /* Outline variant */
     --rz-button-outline-bg: transparent;
-    --rz-button-outline-fg: light-dark(hsl(var(--rz-gray-4)), hsl(var(--rz-gray-12)));
-    --rz-button-outline-border: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-8)));
-    --rz-button-outline-bg-hover: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
+    --rz-button-outline-fg: var(--rz-fg);
+    --rz-button-outline-border: var(--rz-border-strong);
+    --rz-button-outline-bg-hover: var(--rz-bg-hover);
     /* border-width */
     --rz-button-outline-border-left-width: 1px;
     --rz-button-outline-border-top-width: 1px;
@@ -82,27 +99,23 @@
 
     /* Ghost variant */
     --rz-button-ghost-bg: transparent;
-    --rz-button-ghost-bg-hover: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
-    --rz-button-ghost-fg: hsl(var(--rz-color-fg));
+    --rz-button-ghost-bg-hover: var(--rz-bg-hover);
+    --rz-button-ghost-fg: var(--rz-fg);
 
     /* Secondary variant */
-    --rz-button-secondary-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
-    --rz-button-secondary-bg-hover: light-dark(
-      hsl(var(--rz-gray-16)),
-      color-mix(in hsl, white 3%, hsl(var(--rz-gray-3)))
-    );
-    --rz-button-secondary-fg: hsl(var(--rz-color-fg));
+    --rz-button-secondary-bg: var(--rz-bg-raised);
+    --rz-button-secondary-fg: var(--rz-fg);
 
     /* Link variant */
     --rz-button-link-bg: transparent;
     --rz-button-link-bg-hover: transparent;
-    --rz-button-link-fg: hsl(var(--rz-color-fg));
+    --rz-button-link-fg: var(--rz-fg);
 
     /* Text variant */
     --rz-button-text-bg: transparent;
-    --rz-button-text-fg: hsl(var(--rz-color-fg) / 0.6);
-    --rz-button-text-fg-hover: hsl(var(--rz-color-fg) / 1);
-    --rz-button-text-fg-disabled: hsl(var(--rz-color-fg) / 0.4);
+    --rz-button-text-fg: var(--rz-fg-muted);
+    --rz-button-text-fg-hover: var(--rz-fg);
+    --rz-button-text-fg-disabled: var(--rz-fg-subtle);
   }
 
   .rz-button {
@@ -116,18 +129,16 @@
     font-variation-settings: 'wght' 500;
     font-weight: 500;
     transition-property:
-      box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
+      box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke,
+      filter;
     transition-duration: 0.25s;
     gap: var(--rz-size-2);
     fill: currentColor;
   }
 
   .rz-button:focus-visible {
-    /* --rz-ring-offset: 1px; */
-    outline: none;
-    box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+    outline: 2px solid var(--rz-accent-border);
+    outline-offset: 2px;
   }
 
   .rz-button:disabled,
@@ -150,28 +161,28 @@
     height: var(--rz-size-6);
     padding: var(--rz-size-1) var(--rz-size-2);
     font-size: var(--rz-text-2xs);
-    border-radius: var(--rz-radius-md);
+    border-radius: var(--rz-radius-lg);
   }
 
   .rz-button--size-sm {
     font-size: var(--rz-text-md);
     height: var(--rz-size-8);
     padding: var(--rz-size-2) var(--rz-size-3);
-    border-radius: var(--rz-radius-md);
+    border-radius: var(--rz-radius-lg);
   }
 
   .rz-button--size-lg {
     font-size: var(--rz-text-md);
     height: var(--rz-size-12);
     padding: var(--rz-size-2) var(--rz-size-8);
-    border-radius: var(--rz-radius-md);
+    border-radius: var(--rz-radius-lg);
   }
 
   .rz-button--size-xl {
     height: var(--rz-size-14);
     font-size: var(--rz-text-md);
     padding: var(--rz-size-2) var(--rz-size-8);
-    border-radius: var(--rz-radius-md);
+    border-radius: var(--rz-radius-lg);
   }
 
   .rz-button--size-icon {
@@ -192,13 +203,11 @@
 
   /** Default */
   .rz-button--default {
-    background-color: var(--rz-button-default-bg);
-    color: var(--rz-button-default-fg);
+    background: var(--rz-gradient-primary);
+    color: var(--rz-fg-inverse);
+    box-shadow: var(--rz-shadow-primary);
     &:hover:not(:disabled) {
-      background-color: var(--rz-button-default-bg-hover);
-    }
-    &:disabled {
-      background-color: var(--rz-button-default-bg-disabled);
+      filter: brightness(1.12);
     }
   }
 
@@ -206,11 +215,8 @@
   .rz-button--success {
     background-color: var(--rz-button-success-bg);
     color: var(--rz-button-success-fg);
-    &:hover {
-      background-color: var(--rz-button-success-bg-hover);
-    }
-    &:disabled:not(:disabled) {
-      background-color: var(--rz-button-success-bg-disabled);
+    &:hover:not(:disabled) {
+      filter: brightness(1.12);
     }
   }
 
@@ -228,7 +234,6 @@
     color: var(--rz-button-outline-fg);
 
     &:hover:not(:disabled) {
-      /* border-color: var(--rz-button-outline-border-hover); */
       background-color: var(--rz-button-outline-bg-hover);
     }
   }
@@ -238,18 +243,25 @@
     background-color: var(--rz-button-ghost-bg);
     color: var(--rz-button-ghost-fg);
 
-    &:hover:not(:disabled) {
+    &:hover:not(:disabled),
+    &:active:not(:disabled),
+    &[aria-expanded='true'],
+    &[data-state='open'] {
       background-color: var(--rz-button-ghost-bg-hover);
     }
   }
 
   /** Secondary */
   .rz-button--secondary {
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
     background-color: var(--rz-button-secondary-bg);
     color: var(--rz-button-secondary-fg);
 
     &:hover:not(:disabled) {
-      background-color: var(--rz-button-secondary-bg-hover);
+      background-image: linear-gradient(var(--rz-bg-hover) 0 0);
     }
   }
 
@@ -296,4 +308,19 @@
     height: var(--rz-size-5);
     width: var(--rz-size-5);
   }
+
+  .rz-button--size-xs .rz-button__icon {
+    display: grid;
+    place-content: center;
+    border-radius: var(--rz-radius-sm);
+    height: var(--rz-size-2);
+    width: var(--rz-size-2);
+  }
+
+  /* The key after the label, fainter: Confirm ↵ */
+  .rz-button__kbd {
+    display: inline-flex;
+    margin-left: var(--rz-size-1);
+    opacity: 0.5;
+  }
 </style>

package/dist/panel/components/ui/button/index.d.ts

@@ -1,7 +1,6 @@
 import type { WithElementRef } from 'bits-ui';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import Root from './button.svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { HTMLAnchorAttributes } from 'svelte/elements';
 type PrimitiveAnchorAttributes = WithElementRef<HTMLAnchorAttributes>;
 type PrimitiveButtonAttributes = WithElementRef<HTMLButtonAttributes>;
 export type ButtonVariant = 'success' | 'default' | 'ghost' | 'link' | 'text' | 'secondary' | 'outline';
@@ -11,5 +10,10 @@ type Props = PrimitiveButtonAttributes & PrimitiveAnchorAttributes & {
     size?: ButtonSize;
     icon?: any;
     disabled?: boolean;
+    /**
+     * The key that does what the button does, drawn after its label: `enter`, `escape`. In a
+     * dialog, Enter clicks the button that shows `enter`.
+     */
+    kbd?: string;
 };
-export { Root, type Props, Root as Button, type Props as ButtonProps };
+export { Root as Button, Root, type Props as ButtonProps, type Props };

package/dist/panel/components/ui/button/index.js

@@ -1,4 +1,4 @@
 import Root from './button.svelte';
-export { Root, 
+export { 
 //
-Root as Button };
+Root as Button, Root };

package/dist/panel/components/ui/calendar/calendar.css

@@ -1,5 +1,5 @@
 .rz-calendar {
-  background-color: var(--rz-popover-bg);
+  background-color: var(--rz-bg-float);
   border-radius: var(--rz-radius-lg);
   padding: var(--rz-size-3);
 }
@@ -18,14 +18,14 @@
   text-align: center;
   font-size: var(--rz-text-sm);
   &:has([data-selected][data-outside-month]) {
-    background-color: hsl(var(--rz-color-spot) / 0.5);
+    background-color: var(--rz-accent-tint);
   }
   &:focus-within {
     position: relative;
     z-index: 20;
   }
   &:has([data-selected]) {
-    background-color: hsl(var(--rz-color-spot));
+    background-color: var(--rz-accent);
     border-radius: var(--rz-radius-md);
   }
 }
@@ -41,7 +41,9 @@
   font-size: var(--rz-text-sm);
   border-radius: var(--rz-radius-md);
   white-space: nowrap;
-  transition: colors 0.2s ease-in-out;
+  transition:
+    color 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
   width: var(--rz-size-8);
   height: var(--rz-size-8);
   padding: 0;
@@ -50,53 +52,51 @@
 }
 
 .rz-calendar-day:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 .rz-calendar-day:hover {
-  background-color: hsl(var(--rz-gray-13));
-  color: hsl(var(--rz-color-fg));
+  background-color: var(--rz-bg-hover);
+  color: var(--rz-fg);
 }
 
 .rz-calendar-day[data-today]:not([data-selected]) {
-  border: 1px solid hsl(var(--rz-color-border));
-  color: hsl(var(--rz-color-fg));
+  border: 1px solid var(--rz-border);
+  color: var(--rz-accent-text);
 }
 
 .rz-calendar-day[data-selected] {
-  background-color: hsl(var(--rz-color-spot));
-  color: hsl(var(--rz-color-spot-fg));
+  background-color: var(--rz-accent);
+  color: var(--rz-accent-fg);
   opacity: 1;
 }
 
 .rz-calendar-day[data-selected]:hover,
 .rz-calendar-day[data-selected]:focus {
-  background-color: hsl(var(--rz-color-spot));
-  color: hsl(var(--rz-color-spot-fg));
+  background-color: var(--rz-accent);
+  color: var(--rz-accent-fg);
 }
 
 .rz-calendar-day[data-disabled] {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-muted);
   opacity: 0.5;
 }
 
 .rz-calendar-day[data-unavailable] {
-  color: hsl(var(--rz-color-fg) / 0.5);
+  color: var(--rz-fg-subtle);
   text-decoration: line-through;
 }
 
 .rz-calendar-day[data-outside-month] {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-muted);
   pointer-events: none;
   opacity: 0.5;
 }
 
 .rz-calendar-day[data-outside-month][data-selected] {
-  background-color: hsl(var(--rz-color-spot) / 0.5);
-  color: hsl(var(--rz-color-fg));
+  background-color: var(--rz-accent-tint);
+  color: var(--rz-fg);
   opacity: 0.3;
 }
 
@@ -138,7 +138,7 @@
 /**************************************/
 
 .rz-calendar-head-cell {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-muted);
   flex: 1;
   font-size: var(--rz-text-xs);
   font-variation-settings: 'wght' 400;
@@ -165,12 +165,12 @@
   width: var(--rz-size-7);
   background-color: transparent;
   padding: 0;
-  opacity: 0.5;
-  transition: opacity 0.2s ease;
+  color: var(--rz-fg-subtle);
+  transition: color 0.2s ease;
 }
 
 .rz-calendar-next-button:hover {
-  opacity: 1;
+  color: var(--rz-fg);
 }
 
 /** Prev */
@@ -179,9 +179,9 @@
   width: var(--rz-size-7);
   background-color: transparent;
   padding: 0;
-  opacity: 0.5;
+  color: var(--rz-fg-subtle);
 }
 
 .rz-calendar-prev-button:hover {
-  opacity: 1;
+  color: var(--rz-fg);
 }

package/dist/panel/components/ui/calendar/calendar.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
 import * as Calendar from './index.js';
 import './calendar.css';
-declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "placeholder" | "ref">;
+declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "ref" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/panel/components/ui/card/card-description.svelte

@@ -18,6 +18,6 @@
 <style>
   .rz-card-description {
     font-size: var(--rz-text-sm);
-    color: hsl(var(--rz-color-fr) / 0.7);
+    color: var(--rz-fg-muted);
   }
 </style>

package/dist/panel/components/ui/card/card.svelte

@@ -16,14 +16,31 @@
   {@render children?.()}
 </div>
 
-<style>
-  :root {
-    --rz-card-color-bg: hsl(var(--rz-color-bg));
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:root {
+    --rz-card-color-bg: var(--rz-bg-raised);
   }
   .rz-card {
     width: var(--rz-card-width, auto);
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
     background-color: var(--rz-card-color-bg);
     border-radius: var(--rz-radius-lg);
-    border: var(--rz-border);
   }
 </style>

package/dist/panel/components/ui/card-document/card-document.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { mediaMeta } from '../../../util/upload-file.js';
   import type { GenericDoc } from '../../../../types';
   import StatusDot from '../../sections/collection/StatusDot.svelte';
   import UploadThumbCell from '../../sections/collection/upload-thumb-cell/UploadThumbCell.svelte';
@@ -26,9 +27,7 @@
 
     {#if doc.filesize || doc.mimeType}
       <div class="rz-document-card__metadata">
-        {#each ['filesize', 'mimeType'] as key, index (index)}
-          <p>{doc[key]}</p>
-        {/each}
+        <p>{mediaMeta(doc as { filesize?: string; mimeType?: string })}</p>
       </div>
     {/if}
 
@@ -38,22 +37,35 @@
   </div>
 </div>
 
-<style>:root {
-    --rz-card-hover-bg: light-dark(hsl(var(--rz-gray-19)), hsl(var(--rz-gray-4)));
-    --rz-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-3)));
-  }
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
 
-  .rz-document-card {
+/* An input with an error. */
+.rz-document-card {
     --rz-dot-size: var(--rz-size-2);
-    border: var(--rz-border);
-    background-color: var(--rz-card-bg);
+    --rz-upload-preview-cell-bg: var(--rz-bg-well);
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
     border-radius: var(--rz-radius-lg);
     aspect-ratio: 4 / 5;
     width: 100%;
   }
 
   .rz-document-card:hover {
-    background-color: var(--rz-card-hover-bg);
+    background-image: linear-gradient(var(--rz-bg-hover) 0 0);
   }
 
   .rz-document-card :global(.rz-upload-preview-cell) {
@@ -94,6 +106,6 @@
 
   .rz-document-card__metadata {
     font-size: var(--rz-text-xs);
-    opacity: 0.6;
+    color: var(--rz-fg-subtle);
   }
 </style>

package/dist/panel/components/ui/card-resource/card-resource.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { panelPath } from '../../../../core/routes/util.js';
   import { mimeTypeToIcon } from '../../../util/upload.js';
+  import { mediaMeta } from '../../../util/upload-file.js';
   import { Edit, FileIcon, X } from '@lucide/svelte';
 
   type Resource = {
@@ -45,8 +46,7 @@
       <a href={panelPath(resource._type, resource.id)}><Edit size="12" /></a>
     </p>
     {#if isUpload}
-      <p class="rz-card-resource__info-text">{resource.filesize}</p>
-      <p class="rz-card-resource__info-text">{resource.mimeType}</p>
+      <p class="rz-card-resource__info-text">{mediaMeta(resource)}</p>
     {/if}
   </div>
 
@@ -55,21 +55,39 @@
   </button>
 </div>
 
-<style>:root {
-    --rz-ressource-card-bg: light-dark(hsl(var(--rz-gray-18)), hsl(var(--rz-gray-4)));
-    --rz-ressource-card-thumbnail-bg: light-dark(hsl(var(--rz-gray-15)), hsl(var(--rz-gray-2)));
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:root {
+    --rz-ressource-card-bg: var(--rz-bg-raised);
+    --rz-ressource-card-thumbnail-bg: var(--rz-bg-well);
     --rz-border-radius: var(--rz-radius-md);
   }
 
   .rz-card-resource {
     --padding: var(--rz-card-padding, var(--rz-size-2));
     --rz-size: var(--rz-thumbnail-size, var(--rz-size-20));
+    background-color: var(--rz-bg-raised);
+    box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-raised);
     background-color: var(--rz-ressource-card-bg);
     position: relative;
     display: flex;
     gap: var(--rz-size-6);
     border-radius: var(--rz-border-radius);
-    border: var(--rz-border);
     padding: var(--padding);
     max-width: 400px;
   }
@@ -128,10 +146,10 @@
 
   .rz-card-resource__remove {
     position: absolute;
-    color: hsl(var(--rz-color-fg));
+    color: var(--rz-fg);
     right: var(--rz-size-2);
     top: var(--rz-size-2);
-    background-color: hsl(var(--rz-color-bg));
+    background-color: var(--rz-bg-well);
     border-radius: var(--rz-size-0-5);
     height: var(--rz-size-4);
     width: var(--rz-size-4);

package/dist/panel/components/ui/checkbox/checkbox.css

@@ -1,9 +1,8 @@
 :root {
-  --rz-checkbox-bg: hsl(var(--rz-input-bg));
-  --rz-checkbox-fg: hsl(var(--rz-gray-19));
-  --rz-checkbox-border: transparent;
-  --rz-checkbox--checked-bg: hsl(var(--rz-color-spot));
-  --rz-checkbox--focus-ring: hsl(var(--rz-color-ring));
+  --rz-checkbox-bg: var(--rz-bg-well);
+  --rz-checkbox-border: var(--rz-border-strong);
+  --rz-checkbox--checked-fg: var(--rz-accent-fg);
+  --rz-checkbox--checked-bg: var(--rz-accent);
   --rz-checkbox-size: var(--rz-size-4);
 }
 
@@ -18,10 +17,8 @@
 }
 
 .rz-checkbox:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-checkbox--focus-ring) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 .rz-checkbox:disabled,
@@ -32,7 +29,8 @@
 
 .rz-checkbox[data-state='checked'] {
   background-color: var(--rz-checkbox--checked-bg);
-  color: hsl(var(--rz-color-fg));
+  border-color: var(--rz-checkbox--checked-bg);
+  color: var(--rz-checkbox--checked-fg);
 }
 
 .rz-checkbox__indicator {