@frame-ui-ng/components 0.1.0-beta.0 → 0.3.0-beta.0

package/breadcrumb/src/styles/breadcrumb.css

@@ -1,98 +1,110 @@
-@import './_vars.css';
-
-[frBreadcrumb],
-nav[frBreadcrumb] {
-  display: block;
-  color: var(--frame-breadcrumb-root-color);
-  font-size: var(--frame-breadcrumb-root-font-size);
-  line-height: var(--frame-breadcrumb-root-line-height);
-}
-
-[frBreadcrumbList] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--frame-breadcrumb-list-gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-[frBreadcrumbItem] {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: var(--frame-breadcrumb-list-gap);
-}
-
-[frBreadcrumbLink] {
-  min-width: 0;
-  border-radius: var(--frame-radius-sm);
-  color: var(--frame-breadcrumb-link-color);
-  text-decoration: none;
-  text-underline-offset: 0.25rem;
-  transition:
-    color var(--frame-breadcrumb-transition-duration) ease,
-    box-shadow var(--frame-breadcrumb-transition-duration) ease;
-}
-
-[frBreadcrumbLink]:hover {
-  color: var(--frame-breadcrumb-link-hover-color);
-  text-decoration: underline;
-}
-
-[frBreadcrumbLink]:focus-visible {
-  outline: none;
-  box-shadow: var(--frame-breadcrumb-link-focus-shadow);
-}
-
-[frBreadcrumbPage] {
-  min-width: 0;
-  color: var(--frame-breadcrumb-page-color);
-  font-weight: 500;
-}
-
-[frBreadcrumbSeparator] {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  color: var(--frame-breadcrumb-separator-color);
-  font-size: var(--frame-breadcrumb-separator-size);
-  line-height: 1;
-  user-select: none;
-}
-
-[frBreadcrumbSeparator]:empty::before {
-  content: "/";
-}
-
-[frBreadcrumbEllipsis],
-frame-breadcrumb-ellipsis {
-  display: inline-flex;
-  inline-size: var(--frame-breadcrumb-ellipsis-size);
-  block-size: var(--frame-breadcrumb-ellipsis-size);
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--frame-breadcrumb-ellipsis-radius);
-  color: var(--frame-breadcrumb-root-color);
-  letter-spacing: 0.08em;
-  transition: background-color var(--frame-breadcrumb-transition-duration) ease;
-}
-
-[frBreadcrumbEllipsis]:hover,
-frame-breadcrumb-ellipsis:hover {
-  background: var(--frame-breadcrumb-ellipsis-hover-bg);
-}
-
-.frame-breadcrumb__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+@import './_vars.css';
+
+[frBreadcrumb],
+nav[frBreadcrumb] {
+  display: block;
+  color: var(--frame-breadcrumb-root-color);
+  font-size: var(--frame-breadcrumb-root-font-size);
+  line-height: var(--frame-breadcrumb-root-line-height);
+}
+
+[frBreadcrumbList] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--frame-breadcrumb-list-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[frBreadcrumbItem] {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--frame-breadcrumb-list-gap);
+}
+
+[frBreadcrumbLink] {
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--frame-breadcrumb-link-radius);
+  color: var(--frame-breadcrumb-link-color);
+  padding: 0.1875rem 0.375rem;
+  text-decoration: none;
+  text-underline-offset: 0.25rem;
+  transition:
+    border-color var(--frame-breadcrumb-transition-duration) ease,
+    color var(--frame-breadcrumb-transition-duration) ease,
+    box-shadow var(--frame-breadcrumb-transition-duration) ease,
+    transform var(--frame-breadcrumb-transition-duration) ease;
+}
+
+[frBreadcrumbLink]:hover {
+  border-color: var(--frame-frame-line-muted, var(--frame-border));
+  color: var(--frame-breadcrumb-link-hover-color);
+  text-decoration: none;
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+[frBreadcrumbLink]:focus-visible {
+  outline: none;
+  border-color: var(--frame-frame-accent, var(--frame-ring));
+  box-shadow: var(--frame-breadcrumb-link-focus-shadow);
+  transform: translate(-1px, -1px);
+}
+
+[frBreadcrumbPage] {
+  min-width: 0;
+  border-block-end: 1px solid var(--frame-frame-accent, var(--frame-primary));
+  color: var(--frame-breadcrumb-page-color);
+  font-weight: 500;
+  padding: 0.1875rem 0.375rem;
+}
+
+[frBreadcrumbSeparator] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--frame-breadcrumb-separator-color);
+  font-size: var(--frame-breadcrumb-separator-size);
+  line-height: 1;
+  user-select: none;
+}
+
+[frBreadcrumbSeparator]:empty::before {
+  color: var(--frame-frame-accent, var(--frame-primary));
+  content: "/";
+}
+
+[frBreadcrumbEllipsis],
+frame-breadcrumb-ellipsis {
+  display: inline-flex;
+  inline-size: var(--frame-breadcrumb-ellipsis-size);
+  block-size: var(--frame-breadcrumb-ellipsis-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--frame-breadcrumb-ellipsis-radius);
+  color: var(--frame-breadcrumb-root-color);
+  letter-spacing: 0.08em;
+  transition: background-color var(--frame-breadcrumb-transition-duration) ease;
+}
+
+[frBreadcrumbEllipsis]:hover,
+frame-breadcrumb-ellipsis:hover {
+  background: var(--frame-breadcrumb-ellipsis-hover-bg);
+}
+
+.frame-breadcrumb__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/button/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
-    --frame-button-root-gap: 0.5rem;
-    --frame-button-root-height: 2.25rem;
-    --frame-button-root-padding-x: 1rem;
-    --frame-button-root-radius: var(--frame-radius-md);
-    --frame-button-root-shadow: var(--frame-shadow-sm);
-    --frame-button-root-font-size: 0.875rem;
-    --frame-button-root-font-weight: 600;
-    --frame-button-root-ring-color: var(--frame-ring);
-    --frame-button-root-focus-shadow: var(--frame-button-root-shadow), 0 0 0 3px color-mix(in srgb, var(--frame-button-root-ring-color) 35%, transparent);
-    --frame-button-root-hover-filter: brightness(0.98);
-    --frame-button-root-active-filter: brightness(0.96);
-    --frame-button-root-disabled-opacity: 0.55;
-    --frame-button-root-disabled-shadow: none;
-    --frame-button-loading-size: 1rem;
-    --frame-button-loading-stroke: 2px;
-    --frame-button-loading-track: color-mix(in srgb, white 24%, transparent);
-    --frame-button-icon-size: 1rem;
-    --frame-button-label-weight: inherit;
-}
+:root {
+    --frame-button-root-gap: 0.5rem;
+    --frame-button-root-height: 2.25rem;
+    --frame-button-root-padding-x: 1rem;
+    --frame-button-root-radius: var(--frame-radius-md);
+    --frame-button-root-shadow: var(--frame-shadow-sm);
+    --frame-button-root-font-size: 0.875rem;
+    --frame-button-root-font-weight: 600;
+    --frame-button-root-ring-color: var(--frame-ring);
+    --frame-button-root-focus-shadow: none;
+    --frame-button-root-hover-filter: brightness(0.98);
+    --frame-button-root-active-filter: brightness(0.96);
+    --frame-button-root-disabled-opacity: 0.55;
+    --frame-button-root-disabled-shadow: none;
+    --frame-button-loading-size: 1rem;
+    --frame-button-loading-stroke: 2px;
+    --frame-button-loading-track: color-mix(in srgb, white 24%, transparent);
+    --frame-button-icon-size: 1rem;
+    --frame-button-label-weight: inherit;
+}

package/button/src/styles/button.css

@@ -5,14 +5,21 @@
 
 .frame-button {
   --frame-button-root-bg: var(--frame-primary);
-  --frame-button-root-border: transparent;
+  --frame-button-root-border: color-mix(in srgb, var(--frame-primary) 84%, white);
   --frame-button-root-color: var(--frame-primary-foreground);
-  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-primary) 92%, white);
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-primary) 88%, black);
   --frame-button-root-hover-border: var(--frame-button-root-border);
   --frame-button-root-hover-color: var(--frame-button-root-color);
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-primary) 84%, black);
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
+  --frame-button-root-corner-color: color-mix(in srgb, var(--frame-primary-foreground) 88%, transparent);
+  --frame-button-root-corner-inset: var(--frame-frame-tick-inset, 0px);
+  --frame-button-root-corner-size: clamp(
+    0px,
+    calc((1px - var(--frame-button-root-radius, 0px)) * 9999),
+    var(--frame-frame-tick-size, 0.5rem)
+  );
   --frame-spinner-size: var(--frame-button-loading-size, 1rem);
   --frame-spinner-stroke: var(--frame-button-loading-stroke, 2px);
   --frame-spinner-track-color: var(
@@ -52,8 +59,33 @@
   white-space: nowrap;
 }
 
+.frame-button::before {
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  background:
+    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
+      left var(--frame-button-root-corner-inset) top var(--frame-button-root-corner-inset) /
+      var(--frame-button-root-corner-size) 1px no-repeat,
+    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
+      left var(--frame-button-root-corner-inset) top var(--frame-button-root-corner-inset) / 1px
+      var(--frame-button-root-corner-size) no-repeat,
+    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
+      right var(--frame-button-root-corner-inset) bottom var(--frame-button-root-corner-inset) /
+      var(--frame-button-root-corner-size) 1px no-repeat,
+    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
+      right var(--frame-button-root-corner-inset) bottom var(--frame-button-root-corner-inset) / 1px
+      var(--frame-button-root-corner-size) no-repeat;
+  pointer-events: none;
+  content: '';
+  transition: opacity 150ms ease;
+}
+
 .frame-icon-button {
   inline-size: var(--frame-button-root-height, 2.5rem);
+  min-inline-size: var(--frame-button-root-height, 2.5rem);
+  block-size: var(--frame-button-root-height, 2.5rem);
+  min-block-size: var(--frame-button-root-height, 2.5rem);
   padding-inline: 0;
   flex: 0 0 auto;
 }
@@ -94,9 +126,9 @@
 }
 
 .frame-button:focus-visible {
-  outline: 2px solid transparent;
+  outline: 1px solid var(--frame-button-root-ring-color, var(--frame-ring));
   outline-offset: 2px;
-  /* box-shadow: var(--frame-button-root-focus-shadow, var(--frame-button-root-shadow, var(--frame-shadow-sm)), 0 0 0 3px color-mix(in srgb, var(--frame-button-root-ring-color, var(--frame-ring)) 35%, transparent)); */
+  box-shadow: none;
 }
 
 .frame-button[data-loading]::after {
@@ -128,63 +160,88 @@
 .frame-button:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
   opacity: var(--frame-button-root-disabled-opacity, 0.55);
+  filter: none;
+  transform: none;
+  transition: none;
   /* box-shadow: var(--frame-button-root-disabled-shadow, none); */
 }
 
+.frame-button:where(:disabled, [data-disabled])::before {
+  transition: none;
+}
+
 .frame-button[data-appearance='outline'] {
   --frame-button-root-bg: var(--frame-surface);
   --frame-button-root-border: var(--frame-border);
   --frame-button-root-color: var(--frame-surface-foreground);
-  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
-  --frame-button-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-surface) 76%, var(--frame-muted));
+  --frame-button-root-hover-border: var(--frame-border-strong);
   --frame-button-root-hover-color: var(--frame-button-root-color);
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
+  --frame-button-root-corner-color: var(--frame-frame-accent);
 }
 
 .frame-button[data-appearance='ghost'] {
   --frame-button-root-bg: transparent;
   --frame-button-root-border: transparent;
   --frame-button-root-color: var(--frame-foreground);
-  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-muted) 60%, transparent);
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-muted) 78%, transparent);
   --frame-button-root-hover-border: var(--frame-button-root-border);
   --frame-button-root-hover-color: var(--frame-button-root-color);
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-muted) 80%, transparent);
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
+  --frame-button-root-corner-color: var(--frame-frame-accent);
   /* box-shadow: var(--frame-button-root-shadow, none); */
 }
 
+.frame-button[data-appearance='ghost']::before {
+  opacity: 0;
+}
+
+.frame-button[data-appearance='ghost']:where(:not(:disabled, [data-disabled])):hover::before,
+.frame-button[data-appearance='ghost']:focus-visible::before {
+  opacity: 1;
+}
+
 .frame-button[data-size='sm'] {
-  min-height: 2rem;
+  --frame-button-root-height: 2rem;
+  min-height: var(--frame-button-root-height);
   padding-inline: 0.75rem;
   font-size: 0.8125rem;
 }
 
 .frame-button[data-size='lg'] {
-  min-height: 2.75rem;
+  --frame-button-root-height: 2.75rem;
+  min-height: var(--frame-button-root-height);
   padding-inline: 1.25rem;
   font-size: 0.9375rem;
 }
 
 .frame-button[data-radius='none'] {
+  --frame-button-root-radius: 0px;
   border-radius: 0;
 }
 
 .frame-button[data-radius='sm'] {
+  --frame-button-root-radius: var(--frame-radius-sm);
   border-radius: var(--frame-radius-sm);
 }
 
 .frame-button[data-radius='md'] {
+  --frame-button-root-radius: var(--frame-radius-md);
   border-radius: var(--frame-radius-md);
 }
 
 .frame-button[data-radius='lg'] {
+  --frame-button-root-radius: var(--frame-radius-lg);
   border-radius: var(--frame-radius-lg);
 }
 
 .frame-button[data-radius='full'] {
+  --frame-button-root-radius: var(--frame-radius-full);
   border-radius: var(--frame-radius-full);
 }
 

package/button-group/src/styles/button-group.css

@@ -1,69 +1,100 @@
-.frame-button-group,
-[frButtonGroup],
-frame-button-group {
-  display: inline-flex;
-  align-items: stretch;
-  width: 100%;
-}
-
-.frame-button-group[data-orientation='vertical'],
-[frButtonGroup][data-orientation='vertical'],
-frame-button-group[data-orientation='vertical'] {
-  flex-direction: column;
-}
-
-.frame-button-group[data-orientation='horizontal'] > * + *,
-[frButtonGroup][data-orientation='horizontal'] > * + *,
-frame-button-group[data-orientation='horizontal'] > * + * {
-  margin-inline-start: -1px;
-}
-
-.frame-button-group[data-orientation='vertical'] > * + *,
-[frButtonGroup][data-orientation='vertical'] > * + *,
-frame-button-group[data-orientation='vertical'] > * + * {
-  margin-block-start: -1px;
-}
-
-.frame-button-group[data-orientation='horizontal'] > :first-child,
-[frButtonGroup][data-orientation='horizontal'] > :first-child,
-frame-button-group[data-orientation='horizontal'] > :first-child {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.frame-button-group[data-orientation='horizontal'] > :last-child,
-[frButtonGroup][data-orientation='horizontal'] > :last-child,
-frame-button-group[data-orientation='horizontal'] > :last-child {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.frame-button-group[data-orientation='horizontal'] > :not(:first-child):not(:last-child),
-[frButtonGroup][data-orientation='horizontal'] > :not(:first-child):not(:last-child),
-frame-button-group[data-orientation='horizontal'] > :not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-
-.frame-button-group[data-orientation='vertical'] > :first-child,
-[frButtonGroup][data-orientation='vertical'] > :first-child,
-frame-button-group[data-orientation='vertical'] > :first-child {
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.frame-button-group[data-orientation='vertical'] > :last-child,
-[frButtonGroup][data-orientation='vertical'] > :last-child,
-frame-button-group[data-orientation='vertical'] > :last-child {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-}
-
-.frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-child),
-[frButtonGroup][data-orientation='vertical'] > :not(:first-child):not(:last-child),
-frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-
-.frame-button-group > * {
-  position: relative;
-}
+.frame-button-group,
+[frButtonGroup],
+frame-button-group {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
+  background: var(--frame-surface);
+}
+
+.frame-button-group[data-orientation='vertical'],
+[frButtonGroup][data-orientation='vertical'],
+frame-button-group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.frame-button-group[data-orientation='horizontal'] > * + *,
+[frButtonGroup][data-orientation='horizontal'] > * + *,
+frame-button-group[data-orientation='horizontal'] > * + * {
+  margin-inline-start: -1px;
+}
+
+.frame-button-group[data-orientation='vertical'] > * + *,
+[frButtonGroup][data-orientation='vertical'] > * + *,
+frame-button-group[data-orientation='vertical'] > * + * {
+  margin-block-start: -1px;
+}
+
+.frame-button-group[data-orientation='horizontal'] > :first-child,
+[frButtonGroup][data-orientation='horizontal'] > :first-child,
+frame-button-group[data-orientation='horizontal'] > :first-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.frame-button-group[data-orientation='horizontal'] > :last-child,
+[frButtonGroup][data-orientation='horizontal'] > :last-child,
+frame-button-group[data-orientation='horizontal'] > :last-child {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.frame-button-group[data-orientation='horizontal'] > :not(:first-child):not(:last-child),
+[frButtonGroup][data-orientation='horizontal'] > :not(:first-child):not(:last-child),
+frame-button-group[data-orientation='horizontal'] > :not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.frame-button-group[data-orientation='vertical'] > :first-child,
+[frButtonGroup][data-orientation='vertical'] > :first-child,
+frame-button-group[data-orientation='vertical'] > :first-child {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.frame-button-group[data-orientation='vertical'] > :last-child,
+[frButtonGroup][data-orientation='vertical'] > :last-child,
+frame-button-group[data-orientation='vertical'] > :last-child {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-child),
+[frButtonGroup][data-orientation='vertical'] > :not(:first-child):not(:last-child),
+frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.frame-button-group > * {
+  position: relative;
+}
+
+.frame-button-group::before,
+[frButtonGroup]::before,
+frame-button-group::before {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background:
+    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
+      left top / var(--frame-frame-tick-size, 0.375rem) 1px no-repeat,
+    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
+      left top / 1px var(--frame-frame-tick-size, 0.375rem) no-repeat,
+    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
+      right bottom / var(--frame-frame-tick-size, 0.375rem) 1px no-repeat,
+    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
+      right bottom / 1px var(--frame-frame-tick-size, 0.375rem) no-repeat;
+  content: "";
+  pointer-events: none;
+}
+
+.frame-button-group > .frame-button::before,
+.frame-button-group > [frButton]::before,
+[frButtonGroup] > .frame-button::before,
+[frButtonGroup] > [frButton]::before,
+frame-button-group > .frame-button::before,
+frame-button-group > [frButton]::before {
+  content: none;
+}

package/calendar/src/styles/_vars.css

@@ -1,29 +1,29 @@
-:root {
-  --frame-calendar-bg: var(--frame-surface);
-  --frame-calendar-color: var(--frame-surface-foreground);
-  --frame-calendar-border: var(--frame-border);
-  --frame-calendar-radius: var(--frame-radius-lg);
-  --frame-calendar-padding: 0.875rem;
-  --frame-calendar-gap: 1rem;
-  --frame-calendar-cell-size: 2.25rem;
-  --frame-calendar-cell-radius: var(--frame-radius-md);
-  --frame-calendar-muted-color: var(--frame-muted-foreground);
-  --frame-calendar-day-hover-bg: var(--frame-muted);
-  --frame-calendar-day-hover-color: var(--frame-foreground);
-  --frame-calendar-day-selected-bg: var(--frame-primary);
-  --frame-calendar-day-selected-color: var(--frame-primary-foreground);
-  --frame-calendar-day-range-bg: color-mix(in srgb, var(--frame-primary) 14%, transparent);
-  --frame-calendar-day-range-outline: var(--frame-background);
-  --frame-calendar-day-today-border: color-mix(in srgb, var(--frame-primary) 55%, var(--frame-border));
-  --frame-calendar-day-disabled-date-decoration: var(--frame-destructive);
-  --frame-calendar-day-disabled-opacity: 0.38;
-  --frame-calendar-nav-size: 2rem;
-  --frame-calendar-nav-radius: var(--frame-radius-md);
-  --frame-calendar-nav-hover-bg: var(--frame-muted);
-  --frame-calendar-select-height: 2rem;
-  --frame-calendar-select-radius: var(--frame-radius-md);
-  --frame-calendar-select-border: var(--frame-border);
-  --frame-calendar-select-bg: var(--frame-background);
-  --frame-calendar-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 26%, transparent);
-  --frame-calendar-transition-duration: 150ms;
-}
+:root {
+  --frame-calendar-bg: var(--frame-surface);
+  --frame-calendar-color: var(--frame-surface-foreground);
+  --frame-calendar-border: var(--frame-border);
+  --frame-calendar-radius: var(--frame-radius-lg);
+  --frame-calendar-padding: 0.875rem;
+  --frame-calendar-gap: 1rem;
+  --frame-calendar-cell-size: 2.25rem;
+  --frame-calendar-cell-radius: var(--frame-radius-md);
+  --frame-calendar-muted-color: var(--frame-muted-foreground);
+  --frame-calendar-day-hover-bg: var(--frame-muted);
+  --frame-calendar-day-hover-color: var(--frame-foreground);
+  --frame-calendar-day-selected-bg: var(--frame-primary);
+  --frame-calendar-day-selected-color: var(--frame-primary-foreground);
+  --frame-calendar-day-range-bg: color-mix(in srgb, var(--frame-primary) 14%, transparent);
+  --frame-calendar-day-range-outline: var(--frame-background);
+  --frame-calendar-day-today-border: color-mix(in srgb, var(--frame-primary) 55%, var(--frame-border));
+  --frame-calendar-day-disabled-date-decoration: var(--frame-destructive);
+  --frame-calendar-day-disabled-opacity: 0.38;
+  --frame-calendar-nav-size: 2rem;
+  --frame-calendar-nav-radius: var(--frame-radius-md);
+  --frame-calendar-nav-hover-bg: var(--frame-muted);
+  --frame-calendar-select-height: 2rem;
+  --frame-calendar-select-radius: var(--frame-radius-md);
+  --frame-calendar-select-border: var(--frame-border);
+  --frame-calendar-select-bg: var(--frame-background);
+  --frame-calendar-focus-shadow: none;
+  --frame-calendar-transition-duration: 150ms;
+}