@tale-ui/react-styles 0.1.1 → 0.2.0

package/README.md

@@ -1,6 +1,8 @@
 # @tale-ui/react-styles
 
-Opinionated CSS for `@tale-ui/react` components. Built entirely on `@tale-ui/core` design tokens (`--neutral-*`, `--color-*`, `--space-*`, `--text-*`).
+CSS rules for `@tale-ui/react` components. Built entirely on `@tale-ui/core` design tokens (`--neutral-*`, `--color-*`, `--space-*`, `--text-*`).
+
+`@tale-ui/react` components apply BEM class names automatically (e.g. `tale-button`, `tale-select__popup`). This package provides the CSS rules for those classes.
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tale-ui/react-styles",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "CSS styles for @tale-ui/react components, built on @tale-ui/core design tokens.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "./toolbar": "./src/toolbar.css"
   },
   "dependencies": {
-    "@tale-ui/core": "1.1.7"
+    "@tale-ui/core": "1.1.8"
   },
   "sideEffects": [
     "**/*.css"

package/src/accordion.css

@@ -3,13 +3,14 @@
  *
  * Styled with @tale-ui/core design tokens.
  * Base-ui Accordion exposes:
- *   Root: [data-disabled] [data-orientation]
- *   Item: [data-index] [data-disabled] [data-open]
+ *   Root:  [data-disabled] [data-orientation]
+ *   Item:  [data-index] [data-disabled] [data-open]
+ *   Panel: [data-open] [data-closed] [data-starting-style] [data-ending-style]
  *
  * Usage:
  *   <Accordion.Root className="tale-accordion">
  *     <Accordion.Item className="tale-accordion__item">
- *       <Accordion.Header>
+ *       <Accordion.Header className="tale-accordion__header">
  *         <Accordion.Trigger className="tale-accordion__trigger">Title</Accordion.Trigger>
  *       </Accordion.Header>
  *       <Accordion.Panel className="tale-accordion__panel">Content</Accordion.Panel>
@@ -36,6 +37,12 @@
   border-bottom: none;
 }
 
+/* ─── Header ──────────────────────────────────────────────────────────────── */
+
+.tale-accordion__header {
+  margin: 0;
+}
+
 /* ─── Trigger ──────────────────────────────────────────────────────────────── */
 
 .tale-accordion__trigger {
@@ -43,7 +50,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--space-s) var(--space-m);
+  padding: var(--space-xs) var(--space-m);
   background-color: transparent;
   border: none;
   color: var(--neutral-90);
@@ -89,13 +96,22 @@
 
 .tale-accordion__panel {
   overflow: hidden;
-  padding: 0 var(--space-m) var(--space-s);
+  height: var(--accordion-panel-height);
+  padding: 0 var(--space-m);
   color: var(--neutral-80);
-  font-family: var(--body-font-family);
+  font-family: var(--text-font-family);
   font-size: var(--text-m-font-size);
   line-height: 1.6;
+  transition: height 0.6s ease;
+}
+
+.tale-accordion__panel::after {
+  content: '';
+  display: block;
+  height: var(--space-xs);
 }
 
-.tale-accordion__panel:not([data-open]) {
-  display: none;
+.tale-accordion__panel[data-starting-style],
+.tale-accordion__panel[data-ending-style] {
+  height: 0;
 }

package/src/collapsible.css

@@ -52,13 +52,17 @@
 
 .tale-collapsible__panel {
   overflow: hidden;
+  height: var(--collapsible-panel-height);
   color: var(--neutral-80);
-  font-family: var(--body-font-family);
+  font-family: var(--text-font-family);
   font-size: var(--text-m-font-size);
   line-height: 1.6;
   margin-top: var(--space-3xs);
+  transition: height 0.6s ease, opacity 0.2s ease;
 }
 
-.tale-collapsible__panel[data-closed]:not([data-starting-style]) {
-  display: none;
+.tale-collapsible__panel[data-starting-style],
+.tale-collapsible__panel[data-ending-style] {
+  height: 0;
+  opacity: 0;
 }

package/src/dialog.css

@@ -9,13 +9,17 @@
  *
  * Usage:
  *   <Dialog.Root>
- *     <Dialog.Trigger className="tale-button tale-button--primary">Open</Dialog.Trigger>
+ *     <Dialog.Trigger render={<Button variant="primary">Open</Button>} />
  *     <Dialog.Portal>
- *       <Dialog.Backdrop className="tale-dialog__backdrop" />
- *       <Dialog.Popup className="tale-dialog__popup">
- *         <Dialog.Title className="tale-dialog__title">Title</Dialog.Title>
- *         <Dialog.Description className="tale-dialog__description">…</Dialog.Description>
- *         <Dialog.Close className="tale-button tale-button--neutral">Close</Dialog.Close>
+ *       <Dialog.Backdrop />
+ *       <Dialog.Popup>
+ *         <Dialog.Close className="tale-dialog__close" aria-label="Close"><XIcon /></Dialog.Close>
+ *         <Dialog.Title>Title</Dialog.Title>
+ *         <Dialog.Description>…</Dialog.Description>
+ *         <div className="tale-dialog__actions">
+ *           <Dialog.Close render={<Button variant="neutral">Cancel</Button>} />
+ *           <Dialog.Close render={<Button variant="primary">Confirm</Button>} />
+ *         </div>
  *       </Dialog.Popup>
  *     </Dialog.Portal>
  *   </Dialog.Root>

package/src/toggle.css

@@ -57,13 +57,14 @@
 /* ─── Pressed (active/on) state ───────────────────────────────────────────── */
 
 .tale-toggle[data-pressed] {
-  background-color: var(--neutral-18);
-  border-color: var(--neutral-30);
-  color: var(--neutral-90);
+  background-color: var(--neutral-80);
+  border-color: var(--neutral-80);
+  color: var(--neutral-80-fg);
 }
 
 .tale-toggle[data-pressed]:hover:not([data-disabled]) {
-  background-color: var(--neutral-22);
+  background-color: var(--neutral-90);
+  border-color: var(--neutral-90);
 }
 
 /* ─── Disabled state ──────────────────────────────────────────────────────── */