Accordion style changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

src/components/Accordion/Accordion.module.scss

@@ -1,15 +1,16 @@
 .root {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--gap-m);
+
+  &[data-gap='l'] {
+    gap: var(--gap-l);
+  }
 }
 
 .item {
-  border-radius: 6px;
-  box-shadow: 0 0 0 0px var(--violet-5);
   transition: var(--transitions);
-
-  &:focus-within {
-    box-shadow: 0 0 0 4px var(--violet-5);
-  }
 }
 
 .header {
@@ -26,13 +27,20 @@
   font: var(--text-s);
   font-weight: 600;
   color: var(--sand-12);
-  padding: var(--gap-m);
+  padding: 0;
   cursor: pointer;
   transition: var(--transitions);
+  border-radius: 2px;
+  outline: 0px solid var(--violet-5);
+  outline-offset: var(--gap-s);
 
   &:hover {
     color: var(--violet-11);
   }
+
+  &:focus-visible {
+    outline: 4px solid var(--violet-5);
+  }
 }
 
 .indicator {
@@ -56,6 +64,7 @@
 .content {
   overflow: hidden;
   font: var(--text-s);
+  padding-block: var(--gap-m);
 
   &[data-state='open'] {
     animation: slideDown var(--transition-speed);
@@ -67,7 +76,7 @@
   @keyframes slideDown {
     from {
       height: 0;
-      padding-bottom: 0;
+      padding-block: 0;
     }
     to {
       height: var(--radix-accordion-content-height);
@@ -80,7 +89,7 @@
     }
     to {
       height: 0;
-      padding-bottom: 0;
+      padding-block: 0;
     }
   }
 }
@@ -89,5 +98,4 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap-m);
-  padding: 0 var(--gap-m) var(--gap-m) var(--gap-m);
 }

src/components/Accordion/Accordion.tsx

@@ -8,13 +8,15 @@ import { forwardRef } from 'react';
 import { Flex } from '../Flex';
 import s from './Accordion.module.scss';
 
-type RootProps = ComponentProps<typeof Primitive.Root>;
+type RootProps = ComponentProps<typeof Primitive.Root> & {
+  gap?: 'm' | 'l';
+};
 type ContentProps = ComponentProps<typeof Primitive.Content>;
 type TriggerProps = ComponentProps<typeof Primitive.Trigger>;
 type ItemProps = ComponentProps<typeof Primitive.Item>;
 
-export const Root = forwardRef<HTMLDivElement, RootProps>((props, ref) => {
-  return <Primitive.Root className={s.root} ref={ref} {...props} />;
+export const Root = forwardRef<HTMLDivElement, RootProps>(({ gap = 'm', ...props }, ref) => {
+  return <Primitive.Root className={s.root} data-gap={gap} ref={ref} {...props} />;
 });
 Root.displayName = 'Root';
 

src/components/Card.module.scss

@@ -61,11 +61,10 @@
     cursor: pointer;
 
     &:hover {
+      --card-background-color: var(--sand-0) !important;
       box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.075);
-
-      &[data-background='black'],
-      &[data-background='sand-12'] {
-        --card-background-color: var(--white-A4) !important;
+      &[data-background='sand-0'] {
+        --card-background-color: var(--sand-1) !important;
       }
     }
     &:focus-visible {

src/components/Text.module.scss

@@ -8,11 +8,12 @@ a.text {
 
 .text {
   text-wrap: pretty;
-  text-underline-offset: 0.2em;
+  text-underline-offset: 0.25em;
   outline: none;
   background: none;
   padding: 0;
   border: none;
+  transition: var(--transitions);
 
   &[role='button'] {
     cursor: pointer;

src/styles/_theme.scss

@@ -19,7 +19,7 @@
   --transitions: color var(--transition-speed), border-color var(--transition-speed),
     background-color var(--transition-speed), box-shadow var(--transition-speed), opacity var(--transition-speed),
     transform var(--transition-speed), fill var(--transition-speed), outline-color var(--transition-speed),
-    width var(--transition-speed), height var(--transition-speed);
+    outline-width var(--transition-speed), width var(--transition-speed), height var(--transition-speed);
 
   --gap-none: 0;
   --gap-xs: 0.25rem;