@privateers/ui 0.3.18 → 0.3.19

package/dist/styles/brands/dis-creadis.css

@@ -21,13 +21,14 @@
  */
 
 :root .brand-dis-creadis,
-.brand-dis-creadis {
+.brand-dis-creadis,
+html.brand-dis-creadis {
   /* Typography - TT Commons for DIS/CREADIS brand */
   --font-sans: "TT Commons", ui-sans-serif, system-ui, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
 
   /* Base colors - Slate */
-  --background: oklch(0.3644 0.029 220.58 / 10%);
+  --background: oklch(0.8443 0.003 220.58);
   --foreground: oklch(0.15 0.015 250);
 
   /* Card */
@@ -58,8 +59,8 @@
   --destructive: oklch(0.6632 0.1875 333.2);
 
   /* Border & Input */
-  --border: oklch(0.90 0.008 250);
-  --input: oklch(0.90 0.008 250);
+  --border: oklch(0.75 0.008 250);
+  --input: oklch(0.75 0.008 250);
   --ring: oklch(0.50 0.12 250);
 
   /* Chart colors - Blue to Teal gradient */
@@ -69,8 +70,8 @@
   --chart-4: oklch(0.50 0.15 200);
   --chart-5: oklch(0.55 0.15 185);
 
-  /* Border radius - Slightly smaller for professional look */
-  --radius: 0.0rem;
+  /* Border radius - Subtle rounding for professional look */
+  --radius: 0.5rem;
 
   /* Sidebar */
   --sidebar: oklch(0.98 0.002 250);
@@ -83,11 +84,20 @@
   --sidebar-ring: oklch(0.50 0.12 250);
 }
 
+/* Light mode: semi-transparent white background on input elements and outline buttons */
+:root .brand-dis-creadis :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-chips"], [data-slot="button"][data-variant="outline"], [data-slot="pagination-link"][data-variant="outline"]),
+.brand-dis-creadis :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-chips"], [data-slot="button"][data-variant="outline"], [data-slot="pagination-link"][data-variant="outline"]),
+html.brand-dis-creadis :is([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="combobox-chips"], [data-slot="button"][data-variant="outline"], [data-slot="pagination-link"][data-variant="outline"]) {
+  background-color: oklch(1 0 0 / 70%);
+}
+
 /* Dark mode for DIS/CREADIS */
 .dark .brand-dis-creadis,
 .brand-dis-creadis.dark,
 .dark.brand-dis-creadis,
-.brand-dis-creadis .dark {
+.brand-dis-creadis .dark,
+html.brand-dis-creadis.dark,
+html.dark.brand-dis-creadis {
   /* Base colors */
   /* --background: oklch(0.15 0.015 250); */
  /* --background: oklch(0.3103 0.0503 157.05); */

package/dist/styles/brands/m-plus.css

@@ -12,7 +12,8 @@
  */
 
 :root .brand-m-plus,
-.brand-m-plus {
+.brand-m-plus,
+html.brand-m-plus {
   /* Typography - Mulish for M+ brand */
   --font-sans: "Mulish", sans-serif;
   --font-mono: "Geist Mono", ui-monospace, monospace;
@@ -78,7 +79,9 @@
 .dark .brand-m-plus,
 .brand-m-plus.dark,
 .dark.brand-m-plus,
-.brand-m-plus .dark {
+.brand-m-plus .dark,
+html.brand-m-plus.dark,
+html.dark.brand-m-plus {
   /* Base colors */
   --background: oklch(0.3541 0.0428 179.14);
   --foreground: oklch(0.985 0 0);

package/dist/styles/brands/retur.css

@@ -0,0 +1,152 @@
+/*
+ * Retur Brand Theme
+ *
+ * Typography:
+ *   - Headlines: Oswald, bold (700), sans-serif
+ *   - Body: Open Sans, regular (400), sans-serif
+ *
+ * Colors:
+ *   - Primary green: #68745D
+ *   - Accent gold: #D9AD44
+ *   - Text primary: #444444
+ *   - Text dark: #141414
+ *   - Background light: #F4F4F4
+ *   - Border/divider: #D6D6D6
+ *   - Link blue: #2A4EEF
+ *
+ * Buttons:
+ *   - Border-radius: 0px (sharp corners)
+ *   - CTA buttons use gold color (#D9AD44)
+ *
+ * Usage:
+ *   @import '@privateers/ui/styles/brands/retur.css';
+ *
+ * Or apply the class to a container:
+ *   <div class="brand-retur">...</div>
+ */
+
+:root .brand-retur,
+.brand-retur,
+html.brand-retur {
+  /* Typography - Open Sans for body, Oswald for headings */
+  --font-sans: "Open Sans", sans-serif;
+  --font-heading: "Oswald", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+
+  /* Base colors */
+  --background: oklch(0.9608 0 0); /* #F4F4F4 */
+  --foreground: oklch(0.3373 0 0); /* #444444 */
+
+  /* Card */
+  --card: oklch(1 0 0); /* white */
+  --card-foreground: oklch(0.3373 0 0); /* #444444 */
+
+  /* Popover */
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.3373 0 0);
+
+  /* Primary - Green #68745D */
+  --primary: oklch(0.4941 0.0353 128.86);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Secondary */
+  --secondary: oklch(0.9608 0 0);
+  --secondary-foreground: oklch(0.3373 0 0);
+
+  /* Muted */
+  --muted: oklch(0.9608 0 0);
+  --muted-foreground: oklch(0.4667 0 0);
+
+  /* Accent - Gold #D9AD44 */
+  --accent: oklch(0.7647 0.1176 85.87);
+  --accent-foreground: oklch(0.1569 0 0); /* #141414 */
+
+  /* Destructive */
+  --destructive: oklch(0.5772 0.245 27.325);
+
+  /* Border & Input - #D6D6D6 */
+  --border: oklch(0.8549 0 0);
+  --input: oklch(0.8549 0 0);
+  --ring: oklch(0.4941 0.0353 128.86); /* primary green */
+
+  /* Chart colors */
+  --chart-1: oklch(0.4941 0.0353 128.86); /* green */
+  --chart-2: oklch(0.7647 0.1176 85.87); /* gold */
+  --chart-3: oklch(0.5569 0.2039 262.88); /* blue #2A4EEF */
+  --chart-4: oklch(0.3373 0 0);
+  --chart-5: oklch(0.8549 0 0);
+
+  /* Border radius - rounded corners */
+  --radius: 1.2rem;
+
+  /* Sidebar */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.3373 0 0);
+  --sidebar-primary: oklch(0.4941 0.0353 128.86);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.7647 0.1176 85.87);
+  --sidebar-accent-foreground: oklch(0.1569 0 0);
+  --sidebar-border: oklch(0.8549 0 0);
+  --sidebar-ring: oklch(0.4941 0.0353 128.86);
+}
+
+/* Dark mode for Retur */
+.dark .brand-retur,
+.brand-retur.dark,
+.dark.brand-retur,
+.brand-retur .dark,
+html.brand-retur.dark,
+html.dark.brand-retur {
+  /* Base colors */
+  --background: oklch(0.1569 0 0); /* #141414 */
+  --foreground: oklch(0.9608 0 0); /* #F4F4F4 */
+
+  /* Card */
+  --card: oklch(0.22 0 0);
+  --card-foreground: oklch(0.9608 0 0);
+
+  /* Popover */
+  --popover: oklch(0.22 0 0);
+  --popover-foreground: oklch(0.9608 0 0);
+
+  /* Primary - Green #68745D */
+  --primary: oklch(0.5541 0.0453 128.86);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Secondary */
+  --secondary: oklch(0.25 0 0);
+  --secondary-foreground: oklch(0.9608 0 0);
+
+  /* Muted */
+  --muted: oklch(0.25 0 0);
+  --muted-foreground: oklch(0.6667 0 0);
+
+  /* Accent - Gold #D9AD44 */
+  --accent: oklch(0.7647 0.1176 85.87);
+  --accent-foreground: oklch(0.1569 0 0);
+
+  /* Destructive */
+  --destructive: oklch(0.704 0.191 22.216);
+
+  /* Border & Input */
+  --border: oklch(0.35 0 0);
+  --input: oklch(0.35 0 0);
+  --ring: oklch(0.5541 0.0453 128.86);
+
+  /* Chart colors */
+  --chart-1: oklch(0.5541 0.0453 128.86);
+  --chart-2: oklch(0.7647 0.1176 85.87);
+  --chart-3: oklch(0.6069 0.2039 262.88);
+  --chart-4: oklch(0.9608 0 0);
+  --chart-5: oklch(0.35 0 0);
+
+  /* Sidebar */
+  --sidebar: oklch(0.18 0 0);
+  --sidebar-foreground: oklch(0.9608 0 0);
+  --sidebar-primary: oklch(0.5541 0.0453 128.86);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.7647 0.1176 85.87);
+  --sidebar-accent-foreground: oklch(0.1569 0 0);
+  --sidebar-border: oklch(0.35 0 0);
+  --sidebar-ring: oklch(0.5541 0.0453 128.86);
+}

package/dist/styles/library.css

@@ -0,0 +1,69 @@
+/*
+ * Privateers Design System — Library entry point
+ * Import this in consuming apps (not index.css).
+ * index.css is for use inside the monorepo's Storybook only.
+ *
+ * Consuming app is responsible for:
+ * - @import "tailwindcss" (or equivalent Tailwind setup)
+ * - Font imports (Figtree, Geist Mono)
+ */
+
+@import "./tokens.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: var(--font-sans);
+  }
+  code, pre, kbd, samp {
+    font-family: var(--font-mono);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privateers/ui",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "Privateers Design System - A modern React component library built with Radix UI, CVA, and Tailwind CSS",
   "license": "MIT",
   "type": "module",
@@ -20,6 +20,8 @@
     },
     "./styles": "./dist/styles/index.css",
     "./styles/tokens": "./dist/styles/tokens.css",
+    "./styles/library": "./dist/styles/library.css",
+    "./styles/*": "./dist/styles/*",
     "./styles/brands/mission-control": "./dist/styles/brands/mission-control.css",
     "./styles/brands/*": "./dist/styles/brands/*",
     "./tailwind/preset": {