@precisa-saude/themes 1.0.1

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,117 @@
+# @precisa-saude/themes
+
+Shared CSS design tokens for Precisa Saúde repositories. Ships OKLCh color palettes, a responsive 14/16-column grid, typography scaffolding, status semantics, and shared animations — all as CSS custom properties.
+
+No JavaScript. No bundler needed. Works with Tailwind v3, Tailwind v4, vanilla CSS, or anything that honors `@import`.
+
+## Install
+
+```bash
+pnpm add @precisa-saude/themes
+```
+
+## Use
+
+**Everything at once** (recommended for most sites):
+
+```css
+/* your-app/src/index.css */
+@import 'tailwindcss';
+@import '@precisa-saude/themes';
+```
+
+**Cherry-pick modules**:
+
+```css
+@import '@precisa-saude/themes/base.css'; /* typography scaffolding + spacing + shadows */
+@import '@precisa-saude/themes/colors.css'; /* palette + shadcn semantic tokens */
+@import '@precisa-saude/themes/grid.css'; /* 14/16-col responsive grid */
+@import '@precisa-saude/themes/status.css'; /* success/warning/elevated/critical/info */
+@import '@precisa-saude/themes/animations.css'; /* marquee + reduced-motion */
+```
+
+## What's inside
+
+### `base.css`
+
+- `--font-sans`, `--font-serif`, `--font-mono` — default fallback chains (system UI fonts). Override on `:root` to inject custom fonts.
+- `--spacing`, `--radius`, `--tracking-*` — spacing unit, border radius, letter-spacing scale
+- `--shadow-*` — shadow ramp (2xs → 2xl), light + dark variants
+
+### `colors.css`
+
+- **Brand palette**: `--ps-violet`, `--ps-mint`, `--ps-amber`, `--ps-green` (plus dark variants)
+- **Surface**: `--background`, `--foreground`, `--card`, `--popover`
+- **Semantic**: `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive` (each with `-foreground`)
+- **Borders / focus**: `--border`, `--input`, `--ring`
+- **Charts**: `--chart-1` through `--chart-5`
+- **Sidebar**: `--sidebar`, `--sidebar-*` (for app shells with a sidebar)
+- **Gradient**: `--gradient-from`, `--gradient-to` (defaults: primary → ps-mint)
+
+All values in OKLCh. Dark mode triggers under `.dark` — add `class="dark"` on `<html>` or use a theme toggle.
+
+### `grid.css`
+
+- 14 columns below 1440px, 16 columns above
+- `--grid-cols`, `--grid-gaps`, `--grid-max-w`, `--col-w`
+- Use with Tailwind's arbitrary-grid syntax: `grid grid-cols-[repeat(var(--grid-cols),1fr)] gap-4`
+
+### `status.css`
+
+Generic status palette (success / warning / elevated / critical / info). Each exposes a base color, foreground, and tint. Light + dark variants.
+
+```css
+.pill-success {
+  background: var(--status-success-tint);
+  color: var(--status-success);
+}
+```
+
+### `animations.css`
+
+- `.animate-marquee-left` / `.animate-marquee-right` — horizontal scroll keyframes
+- `--marquee-duration` — override per element (default `300s`)
+- Honors `prefers-reduced-motion`
+
+## Custom fonts
+
+The default `--font-sans` / `--font-serif` / `--font-mono` chains use system fonts so sites render without any extra setup. To swap in custom fonts:
+
+```css
+@import '@precisa-saude/themes';
+
+@font-face {
+  font-family: 'YourFont';
+  src: url('/fonts/YourFont.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:root {
+  --font-sans: 'YourFont', system-ui, sans-serif;
+}
+```
+
+## Dark mode
+
+Toggle by adding `class="dark"` on `<html>` (or any parent element). All token values cascade automatically.
+
+```ts
+document.documentElement.classList.toggle('dark');
+```
+
+## Tailwind v4
+
+The tokens are designed for Tailwind v4's `@theme` extraction. In your Tailwind config:
+
+```css
+@theme {
+  --color-primary: var(--primary);
+  --color-background: var(--background);
+  /* ...or use @theme inline to map directly */
+}
+```
+
+## License
+
+Apache-2.0

package/animations.css

@@ -0,0 +1,43 @@
+/**
+ * Shared keyframe animations + utility classes.
+ *
+ * Respect `prefers-reduced-motion` by overriding the animation to none:
+ *   @media (prefers-reduced-motion: reduce) {
+ *     .animate-marquee-left, .animate-marquee-right { animation: none; }
+ *   }
+ */
+
+@layer base {
+  .animate-marquee-left {
+    animation: marquee-left var(--marquee-duration, 300s) linear infinite;
+  }
+
+  .animate-marquee-right {
+    animation: marquee-right var(--marquee-duration, 300s) linear infinite;
+  }
+
+  @keyframes marquee-left {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  @keyframes marquee-right {
+    from {
+      transform: translateX(-50%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-marquee-left,
+    .animate-marquee-right {
+      animation: none;
+    }
+  }
+}

package/base.css

@@ -0,0 +1,60 @@
+/**
+ * Base typography, spacing, radius, shadows, tracking.
+ *
+ * No @font-face declarations — consumers import their own fonts and
+ * override --font-sans / --font-serif / --font-mono on :root. The default
+ * chains fall back to system UI fonts so sites work without any extra setup.
+ */
+
+@layer base {
+  :root {
+    /* Typography — override on :root to inject custom fonts */
+    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+    --font-mono:
+      'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', ui-monospace, monospace;
+
+    /* Spacing unit — used by Tailwind's spacing scale when multiplied */
+    --spacing: 0.25rem;
+
+    /* Letter-spacing / tracking scale */
+    --letter-spacing: 0em;
+    --tracking-normal: 0em;
+    --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+    --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+    --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+    --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+    --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+
+    /* Border radius */
+    --radius: 0.625rem;
+
+    /* Shadows — neutral, work in light mode */
+    --shadow-color: hsl(0 0% 20%);
+    --shadow-opacity: 0.12;
+    --shadow-blur: 10px;
+    --shadow-spread: 0px;
+    --shadow-offset-x: 0px;
+    --shadow-offset-y: 4px;
+    --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 20% / 0.06);
+    --shadow-xs: 0px 4px 10px 0px hsl(0 0% 20% / 0.06);
+    --shadow-sm: 0px 4px 10px 0px hsl(0 0% 20% / 0.12), 0px 1px 2px -1px hsl(0 0% 20% / 0.12);
+    --shadow: 0px 4px 10px 0px hsl(0 0% 20% / 0.12), 0px 1px 2px -1px hsl(0 0% 20% / 0.12);
+    --shadow-md: 0px 4px 10px 0px hsl(0 0% 20% / 0.12), 0px 2px 4px -1px hsl(0 0% 20% / 0.12);
+    --shadow-lg: 0px 4px 10px 0px hsl(0 0% 20% / 0.12), 0px 4px 6px -1px hsl(0 0% 20% / 0.12);
+    --shadow-xl: 0px 4px 10px 0px hsl(0 0% 20% / 0.12), 0px 8px 10px -1px hsl(0 0% 20% / 0.12);
+    --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 20% / 0.3);
+  }
+
+  .dark {
+    --shadow-color: hsl(0 0% 0%);
+    --shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.15);
+    --shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.15);
+    --shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+    --shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
+    --shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
+    --shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
+    --shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
+    --shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.4);
+  }
+}

package/colors.css

@@ -0,0 +1,123 @@
+/**
+ * Palette and shadcn-compatible semantic colors.
+ *
+ * Two layers:
+ * 1. Brand palette (--ps-violet, --ps-mint, --ps-amber, --ps-green) — the
+ *    organization's visual identity. Use for accents, charts, highlights.
+ * 2. Shadcn-compatible semantics (--background, --foreground, --primary,
+ *    --secondary, --muted, --accent, --destructive, --border, --ring, etc.)
+ *    derived from the brand palette. These are the tokens Tailwind/shadcn
+ *    components read.
+ *
+ * All values in OKLCh for perceptually uniform color mixing.
+ * Dark mode under the `.dark` class; add `class="dark"` on <html> to toggle.
+ */
+
+@layer base {
+  :root {
+    /* Brand palette */
+    --ps-violet: oklch(0.67 0.113 285);
+    --ps-mint: oklch(0.9 0.085 181);
+    --ps-green: oklch(0.6 0.17 155);
+    --ps-amber: oklch(0.8 0.123 80);
+
+    /* Surface */
+    --background: oklch(0.94 0.008 61);
+    --foreground: oklch(0.25 0.06 292);
+    --card: oklch(0.96 0.005 61);
+    --card-foreground: oklch(0.25 0.06 292);
+    --popover: oklch(0.96 0.005 61);
+    --popover-foreground: oklch(0.25 0.06 292);
+
+    /* Primary / secondary */
+    --primary: oklch(0.39 0.082 292);
+    --primary-foreground: oklch(0.97 0.005 292);
+    --secondary: oklch(0.89 0.023 65);
+    --secondary-foreground: oklch(0.3 0.07 292);
+
+    /* Neutral */
+    --muted: oklch(0.92 0.012 61);
+    --muted-foreground: oklch(0.55 0.05 285);
+    --accent: oklch(0.92 0.04 285);
+    --accent-foreground: oklch(0.25 0.06 292);
+
+    /* Destructive */
+    --destructive: oklch(0.71 0.157 35);
+    --destructive-foreground: oklch(0.97 0.01 35);
+
+    /* Borders / focus */
+    --border: oklch(0.87 0.018 65);
+    --input: oklch(0.85 0.02 65);
+    --ring: oklch(0.39 0.082 292);
+
+    /* Charts */
+    --chart-1: oklch(0.39 0.082 292);
+    --chart-2: oklch(0.82 0.085 181);
+    --chart-3: oklch(0.67 0.113 285);
+    --chart-4: oklch(0.8 0.123 80);
+    --chart-5: oklch(0.71 0.157 35);
+
+    /* Sidebar (opt-in for app shells that have one) */
+    --sidebar: oklch(0.92 0.01 61);
+    --sidebar-foreground: oklch(0.25 0.06 292);
+    --sidebar-primary: oklch(0.39 0.082 292);
+    --sidebar-primary-foreground: oklch(0.97 0.005 292);
+    --sidebar-accent: oklch(0.89 0.023 65);
+    --sidebar-accent-foreground: oklch(0.25 0.06 292);
+    --sidebar-border: oklch(0.87 0.018 65);
+    --sidebar-ring: oklch(0.39 0.082 292);
+
+    /* Gradient endpoints (convenience) */
+    --gradient-from: var(--primary);
+    --gradient-to: var(--ps-mint);
+  }
+
+  .dark {
+    --ps-violet: oklch(0.72 0.1 285);
+    --ps-mint: oklch(0.82 0.08 181);
+    --ps-green: oklch(0.72 0.14 155);
+    --ps-amber: oklch(0.78 0.11 80);
+
+    --background: oklch(0.22 0.05 292);
+    --foreground: oklch(0.94 0.008 61);
+    --card: oklch(0.26 0.05 292);
+    --card-foreground: oklch(0.94 0.008 61);
+    --popover: oklch(0.26 0.05 292);
+    --popover-foreground: oklch(0.94 0.008 61);
+
+    --primary: oklch(0.9 0.085 181);
+    --primary-foreground: oklch(0.22 0.05 292);
+    --secondary: oklch(0.32 0.04 292);
+    --secondary-foreground: oklch(0.92 0.008 61);
+
+    --muted: oklch(0.3 0.04 292);
+    --muted-foreground: oklch(0.72 0.02 65);
+    --accent: oklch(0.3 0.025 65);
+    --accent-foreground: oklch(0.95 0.005 61);
+
+    --destructive: oklch(0.71 0.157 35);
+    --destructive-foreground: oklch(0.97 0.01 35);
+
+    --border: oklch(0.36 0.04 292);
+    --input: oklch(0.34 0.04 292);
+    --ring: oklch(0.9 0.085 181);
+
+    --chart-1: oklch(0.9 0.085 181);
+    --chart-2: oklch(0.67 0.113 285);
+    --chart-3: oklch(0.8 0.123 80);
+    --chart-4: oklch(0.5 0.1 292);
+    --chart-5: oklch(0.71 0.157 35);
+
+    --sidebar: oklch(0.24 0.05 292);
+    --sidebar-foreground: oklch(0.94 0.008 61);
+    --sidebar-primary: oklch(0.9 0.085 181);
+    --sidebar-primary-foreground: oklch(0.22 0.05 292);
+    --sidebar-accent: oklch(0.3 0.025 65);
+    --sidebar-accent-foreground: oklch(0.95 0.005 61);
+    --sidebar-border: oklch(0.36 0.04 292);
+    --sidebar-ring: oklch(0.9 0.085 181);
+
+    --gradient-from: var(--primary);
+    --gradient-to: var(--ps-violet);
+  }
+}

package/grid.css

@@ -0,0 +1,29 @@
+/**
+ * Responsive column grid.
+ *
+ * - 14 columns below the breakpoint; 16 columns at ≥1440px.
+ * - Max content width of 1440px above the breakpoint; fluid below.
+ * - Exposes --col-w for aligning non-grid elements to column widths.
+ *
+ * Use with Tailwind's arbitrary-grid utilities:
+ *   <div class="grid grid-cols-[repeat(var(--grid-cols),1fr)] gap-4">
+ *
+ * Or attach custom columns:
+ *   <div style={{ gridColumn: 'span 6 / span 6' }}>
+ */
+
+@layer base {
+  :root {
+    --grid-cols: 14;
+    --grid-gaps: calc(var(--grid-cols) - 1);
+    --grid-max-w: calc(var(--grid-cols) * 6rem - 1rem);
+    --col-w: calc((min(100vw, var(--grid-max-w)) - var(--grid-gaps) * 1rem) / var(--grid-cols));
+  }
+
+  @media (min-width: 1440px) {
+    :root {
+      --grid-cols: 16;
+      --grid-max-w: 1440px;
+    }
+  }
+}

package/index.css

@@ -0,0 +1,16 @@
+/**
+ * Convenience: imports every token file in the correct cascade order.
+ *
+ * Import in your app's top-level CSS:
+ *   @import '@precisa-saude/themes';
+ *
+ * Or cherry-pick the modules you need:
+ *   @import '@precisa-saude/themes/base.css';
+ *   @import '@precisa-saude/themes/colors.css';
+ */
+
+@import './base.css';
+@import './colors.css';
+@import './grid.css';
+@import './status.css';
+@import './animations.css';

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@precisa-saude/themes",
+  "version": "1.0.1",
+  "description": "Shared CSS design tokens (colors, grid, typography scaffolding, status semantics) for Precisa Saúde repositories.",
+  "keywords": [
+    "css",
+    "design-tokens",
+    "themes",
+    "oklch",
+    "tailwind",
+    "precisa-saude"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Precisa-Saude/tooling.git",
+    "directory": "packages/themes"
+  },
+  "license": "Apache-2.0",
+  "author": "Precisa Saúde",
+  "exports": {
+    ".": "./index.css",
+    "./index.css": "./index.css",
+    "./base.css": "./base.css",
+    "./colors.css": "./colors.css",
+    "./grid.css": "./grid.css",
+    "./status.css": "./status.css",
+    "./animations.css": "./animations.css"
+  },
+  "files": [
+    "index.css",
+    "base.css",
+    "colors.css",
+    "grid.css",
+    "status.css",
+    "animations.css",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/status.css

@@ -0,0 +1,55 @@
+/**
+ * Semantic status colors: success, warning, elevated, critical, info.
+ *
+ * Each exposes a base color, a foreground (for text on top), and a tint
+ * (for backgrounds / pill fills). Values in OKLCh; light and dark variants.
+ *
+ * Example usage with Tailwind v4's arbitrary values:
+ *   <span class="bg-[var(--status-success)] text-[var(--status-success-foreground)]">
+ */
+
+@layer base {
+  :root {
+    --status-success: oklch(0.55 0.15 145);
+    --status-success-foreground: oklch(0.98 0 0);
+    --status-success-tint: oklch(0.9 0.023 145);
+
+    --status-warning: oklch(0.65 0.15 85);
+    --status-warning-foreground: oklch(0.98 0 0);
+    --status-warning-tint: oklch(0.91 0.023 85);
+
+    --status-elevated: oklch(0.6 0.17 55);
+    --status-elevated-foreground: oklch(0.98 0 0);
+    --status-elevated-tint: oklch(0.91 0.026 55);
+
+    --status-critical: oklch(0.55 0.2 25);
+    --status-critical-foreground: oklch(0.98 0 0);
+    --status-critical-tint: oklch(0.9 0.03 25);
+
+    --status-info: oklch(0.55 0.15 250);
+    --status-info-foreground: oklch(0.98 0 0);
+    --status-info-tint: oklch(0.9 0.023 250);
+  }
+
+  .dark {
+    --status-success: oklch(0.7 0.15 145);
+    --status-success-foreground: oklch(0.15 0.02 145);
+    --status-success-tint: oklch(0.33 0.023 145);
+
+    --status-warning: oklch(0.75 0.15 85);
+    --status-warning-foreground: oklch(0.15 0.02 85);
+    --status-warning-tint: oklch(0.33 0.023 85);
+
+    --status-elevated: oklch(0.72 0.15 55);
+    --status-elevated-foreground: oklch(0.15 0.02 55);
+    --status-elevated-tint: oklch(0.33 0.023 55);
+
+    --status-critical: oklch(0.7 0.18 25);
+    --status-critical-foreground: oklch(0.15 0.02 25);
+    --status-critical-tint: oklch(0.33 0.027 25);
+
+    --status-info: oklch(0.7 0.15 250);
+    --status-info-foreground: oklch(0.15 0.02 250);
+    --status-info-tint: oklch(0.33 0.023 250);
+  }
+}