@cocoar/vue-ui 0.1.0-beta.23

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@cocoar/vue-ui",
+  "version": "0.1.0-beta.23",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./styles/all.css",
+    "./styles/*": "./styles/*"
+  },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint src/"
+  },
+  "dependencies": {
+    "@cocoar/vue-localization": "0.1.0-beta.23",
+    "@cocoar/vue-fragment-parser": "0.1.0-beta.23",
+    "@js-temporal/polyfill": "^0.5.1",
+    "@maskito/core": "^5.1.1",
+    "@maskito/kit": "^5.1.1",
+    "@maskito/vue": "^5.1.1",
+    "prismjs": "^1.30.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/prismjs": "^1.26.6",
+    "overlayscrollbars": "^2.14.0",
+    "vue": "^3.5.0"
+  }
+}

package/styles/all.css

@@ -0,0 +1,22 @@
+/**
+ * Cocoar Design System - All Styles
+ *
+ * Import this file to get all design tokens and component global styles:
+ * @import '@cocoar/vue-ui/styles';
+ *
+ * CSS Cascade Layers (lowest → highest priority):
+ *   1. cocoar.tokens     — design token custom properties
+ *   2. cocoar.base       — body reset + typography utilities
+ *   3. cocoar.components — global component styles (link, select dropdowns, form messages)
+ *
+ * Vue scoped component styles and consumer styles are unlayered,
+ * so they always take priority over library globals.
+ */
+
+@layer cocoar.tokens, cocoar.base, cocoar.components;
+
+@import './tokens/all.css' layer(cocoar.tokens);
+@import './shared/form-field-message.css' layer(cocoar.components);
+@import './base.css' layer(cocoar.base);
+@import './components.css' layer(cocoar.components);
+@import 'overlayscrollbars/overlayscrollbars.css';

package/styles/base.css

@@ -0,0 +1,143 @@
+/**
+ * Cocoar Design System - Base Styles
+ *
+ * Applies design tokens to html/body so the design system fonts,
+ * colors, and sizing work globally without per-component overrides.
+ */
+
+body {
+  font-family: var(--coar-body-base-family, Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  font-size: var(--coar-body-base-size, 14px);
+  font-weight: var(--coar-body-base-weight, 400);
+  line-height: var(--coar-body-base-line-height, 1.5);
+  color: var(--coar-text-neutral-primary, #1a1a1a);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ========================================
+   TYPOGRAPHY UTILITY CLASSES
+   ======================================== */
+
+/* Titles - Inter */
+.coar-display {
+  font-family: var(--coar-titles-display-family), sans-serif;
+  font-size: var(--coar-titles-display-size);
+  font-weight: var(--coar-titles-display-weight);
+  line-height: var(--coar-line-height-tight);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-title {
+  font-family: var(--coar-titles-title-family), sans-serif;
+  font-size: var(--coar-titles-title-size);
+  font-weight: var(--coar-titles-title-weight);
+  line-height: var(--coar-line-height-tight);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-subtitle {
+  font-family: var(--coar-titles-subtitle-family), sans-serif;
+  font-size: var(--coar-titles-subtitle-size);
+  font-weight: var(--coar-titles-subtitle-weight);
+  line-height: var(--coar-line-height-snug);
+  color: var(--coar-text-neutral-primary);
+}
+
+/* Headings - Poppins */
+.coar-heading {
+  font-family: var(--coar-headings-heading-family), sans-serif;
+  font-size: var(--coar-headings-heading-size);
+  font-weight: var(--coar-headings-heading-weight);
+  line-height: var(--coar-line-height-snug);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-subheading {
+  font-family: var(--coar-headings-subheading-family), sans-serif;
+  font-size: var(--coar-headings-subheading-size);
+  font-weight: var(--coar-headings-subheading-weight);
+  line-height: var(--coar-line-height-normal);
+  color: var(--coar-text-neutral-primary);
+}
+
+/* Body - Poppins */
+.coar-body {
+  font-family: var(--coar-body-base-family), sans-serif;
+  font-size: var(--coar-body-base-size);
+  font-weight: var(--coar-body-base-weight);
+  line-height: var(--coar-line-height-loose);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-body-bold {
+  font-family: var(--coar-body-bold-family), sans-serif;
+  font-size: var(--coar-body-bold-size);
+  font-weight: var(--coar-body-bold-weight);
+  line-height: var(--coar-line-height-loose);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-body-small {
+  font-family: var(--coar-body-small-base-family), sans-serif;
+  font-size: var(--coar-body-small-base-size);
+  font-weight: var(--coar-body-small-base-weight);
+  line-height: var(--coar-line-height-relaxed);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-body-small-bold {
+  font-family: var(--coar-body-small-bold-family), sans-serif;
+  font-size: var(--coar-body-small-bold-size);
+  font-weight: var(--coar-body-small-bold-weight);
+  line-height: var(--coar-line-height-relaxed);
+  color: var(--coar-text-neutral-primary);
+}
+
+.coar-caption {
+  font-family: var(--coar-body-caption-family), sans-serif;
+  font-size: var(--coar-body-caption-size);
+  font-weight: var(--coar-body-caption-weight);
+  line-height: var(--coar-line-height-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--coar-text-neutral-secondary);
+}
+
+.coar-footnote {
+  font-family: var(--coar-body-footnote-family), sans-serif;
+  font-size: var(--coar-body-footnote-size);
+  font-weight: var(--coar-body-footnote-weight);
+  line-height: var(--coar-line-height-normal);
+  color: var(--coar-text-neutral-tertiary);
+}
+
+/* ========================================
+   RESPONSIVE TYPOGRAPHY
+   ========================================
+   Scale down heading and title sizes at smaller breakpoints.
+   Body text (14-16px) stays unchanged — already appropriate for mobile.
+   Tokens defined in tokens/typography-responsive.css are applied here.
+   ======================================== */
+
+/* Tablet and below (< 1024px) */
+@media (max-width: 1023px) {
+  :root {
+    --coar-titles-display-size: var(--coar-titles-display-size-tablet);
+    --coar-titles-title-size: var(--coar-titles-title-size-tablet);
+    --coar-titles-subtitle-size: var(--coar-titles-subtitle-size-tablet);
+    --coar-headings-heading-size: var(--coar-headings-heading-size-tablet);
+    --coar-headings-subheading-size: var(--coar-headings-subheading-size-tablet);
+  }
+}
+
+/* Mobile (< 768px) */
+@media (max-width: 767px) {
+  :root {
+    --coar-titles-display-size: var(--coar-titles-display-size-mobile);
+    --coar-titles-title-size: var(--coar-titles-title-size-mobile);
+    --coar-titles-subtitle-size: var(--coar-titles-subtitle-size-mobile);
+    --coar-headings-heading-size: var(--coar-headings-heading-size-mobile);
+    --coar-headings-subheading-size: var(--coar-headings-subheading-size-mobile);
+  }
+}

package/styles/components.css

@@ -0,0 +1,124 @@
+/**
+ * Cocoar UI Components - Global Styles
+ *
+ * This file contains global styles for components that render content
+ * outside of view encapsulation (e.g., overlay panels),
+ * and CSS-only components that use plain class selectors.
+ */
+
+/* ========================================
+   LINK (CSS-only component)
+   ======================================== */
+@import './link.css';
+
+/* ========================================
+   SELECT DROPDOWN SIZE VARIANTS
+   ========================================
+   These styles target dropdown options when rendered via @cocoar/ui/overlay.
+   The overlay applies panelClass (e.g., coar-select-dropdown--xs) to .coar-overlay-panel.
+
+   We use .coar-overlay-panel.coar-select-dropdown--XX to ensure higher specificity
+   than Angular's scoped component styles (which use attribute selectors).
+   ======================================== */
+
+/* Single Select option sizes */
+.coar-overlay-panel.coar-select-dropdown--xs .coar-select-option {
+  padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  font-size: var(--coar-component-xs-font-size);
+}
+
+.coar-overlay-panel.coar-select-dropdown--s .coar-select-option {
+  padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  font-size: var(--coar-component-s-font-size);
+}
+
+.coar-overlay-panel.coar-select-dropdown--l .coar-select-option {
+  padding: var(--coar-spacing-m) var(--coar-spacing-l);
+  font-size: var(--coar-component-l-font-size);
+}
+
+/* Single Select search input sizes */
+.coar-overlay-panel.coar-select-dropdown--xs .coar-select-search-input {
+  height: 24px;
+  font-size: var(--coar-component-xs-font-size);
+}
+
+.coar-overlay-panel.coar-select-dropdown--s .coar-select-search-input {
+  height: 28px;
+  font-size: var(--coar-component-s-font-size);
+}
+
+.coar-overlay-panel.coar-select-dropdown--l .coar-select-search-input {
+  height: 40px;
+  font-size: var(--coar-component-l-font-size);
+}
+
+/* Multi Select option sizes */
+.coar-overlay-panel.coar-select-dropdown--xs .coar-multi-option {
+  padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  font-size: var(--coar-component-xs-font-size);
+  gap: var(--coar-spacing-xs);
+}
+
+.coar-overlay-panel.coar-select-dropdown--s .coar-multi-option {
+  padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  font-size: var(--coar-component-s-font-size);
+  gap: var(--coar-spacing-xs);
+}
+
+.coar-overlay-panel.coar-select-dropdown--l .coar-multi-option {
+  padding: var(--coar-spacing-m) var(--coar-spacing-l);
+  font-size: var(--coar-component-l-font-size);
+  gap: var(--coar-spacing-m);
+}
+
+/* Multi Select checkbox sizes */
+.coar-overlay-panel.coar-select-dropdown--xs .coar-multi-checkbox {
+  width: 12px;
+  height: 12px;
+}
+
+.coar-overlay-panel.coar-select-dropdown--s .coar-multi-checkbox {
+  width: 14px;
+  height: 14px;
+}
+
+.coar-overlay-panel.coar-select-dropdown--l .coar-multi-checkbox {
+  width: 18px;
+  height: 18px;
+}
+
+/* Tag Select option sizes */
+.coar-overlay-panel.coar-select-dropdown--xs .coar-tag-option {
+  padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  font-size: var(--coar-component-xs-font-size);
+  gap: var(--coar-spacing-xs);
+}
+
+.coar-overlay-panel.coar-select-dropdown--s .coar-tag-option {
+  padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  font-size: var(--coar-component-s-font-size);
+  gap: var(--coar-spacing-xs);
+}
+
+.coar-overlay-panel.coar-select-dropdown--l .coar-tag-option {
+  padding: var(--coar-spacing-m) var(--coar-spacing-l);
+  font-size: var(--coar-component-l-font-size);
+  gap: var(--coar-spacing-m);
+}
+
+/* Empty state sizes */
+.coar-overlay-panel.coar-select-dropdown--xs .coar-select-empty {
+  padding: var(--coar-spacing-s);
+  font-size: var(--coar-component-xs-font-size);
+}
+
+.coar-overlay-panel.coar-select-dropdown--s .coar-select-empty {
+  padding: var(--coar-spacing-s);
+  font-size: var(--coar-component-s-font-size);
+}
+
+.coar-overlay-panel.coar-select-dropdown--l .coar-select-empty {
+  padding: var(--coar-spacing-l);
+  font-size: var(--coar-component-l-font-size);
+}

package/styles/link.css

@@ -0,0 +1,68 @@
+/* ========================================
+   LINK - CSS-only component
+   ========================================
+   Applied to native <a> elements.
+   Usage: <a class="coar-link" href="...">Link</a>
+   ======================================== */
+
+.coar-link {
+  color: var(--coar-text-accent-primary);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--coar-duration-fast) ease;
+  font-size: var(--coar-component-m-font-size);
+}
+
+.coar-link:hover {
+  color: var(--coar-text-accent-secondary);
+  text-decoration: underline;
+}
+
+.coar-link:focus-visible {
+  outline: none;
+  box-shadow: var(--coar-focus-shadow);
+  border-radius: var(--coar-radius-xs);
+}
+
+.coar-link:active {
+  color: var(--coar-text-accent-secondary);
+}
+
+/* Subtle variant */
+.coar-link--subtle {
+  color: var(--coar-text-neutral-secondary);
+}
+
+.coar-link--subtle:hover {
+  color: var(--coar-text-accent-primary);
+  text-decoration: underline;
+}
+
+/* Size variants */
+.coar-link--s {
+  font-size: var(--coar-component-s-font-size);
+}
+
+.coar-link--m {
+  font-size: var(--coar-component-m-font-size);
+}
+
+.coar-link--l {
+  font-size: var(--coar-component-l-font-size);
+}
+
+/* Disabled */
+.coar-link[aria-disabled='true'],
+.coar-link--disabled {
+  color: var(--coar-text-neutral-disabled);
+  pointer-events: none;
+  cursor: default;
+  text-decoration: none;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .coar-link {
+    transition: none;
+  }
+}

package/styles/shared/form-field-message.css

@@ -0,0 +1,28 @@
+/**
+ * Cocoar Design System - Shared Form Field Message Styles
+ *
+ * Common styles for hint/error messages below form fields.
+ * Used by: CoarTextInput, CoarPasswordInput, CoarRadioGroup, CoarSelect, CoarCheckbox
+ */
+
+.coar-form-field-message {
+  display: block;
+  margin-top: var(--coar-spacing-xs);
+  height: calc(var(--coar-body-caption-size) * 1.4);
+  font-family: var(--coar-body-caption-family);
+  font-size: var(--coar-body-caption-size);
+  font-weight: var(--coar-body-caption-weight);
+  line-height: 1.4;
+  color: var(--coar-text-neutral-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.coar-form-field-message:empty {
+  visibility: hidden;
+}
+
+.coar-form-field-message--error {
+  color: var(--coar-text-semantic-error-bold);
+}

package/styles/tokens/all.css

@@ -0,0 +1,39 @@
+/**
+ * Cocoar Design System - All Design Tokens
+ *
+ * Import this file to get all design tokens at once:
+ * @import '@cocoar/vue-ui/styles/tokens/all.css';
+ */
+
+/* 1. Farb-Primitives (RAW) */
+@import './colors-primitives-light.css';
+@import './colors-primitives-dark.css';
+
+/* 2. Farb-Semantik */
+@import './colors-usage.css';
+
+/* 3. Typografie-Primitives & -Semantik */
+@import './type-primitives.css'; /* Font families, weights, etc. */
+@import './typography.css'; /* Headings, titles, body, etc. */
+@import './typography-responsive.css'; /* Responsive size variants for tablet/mobile */
+
+/* 4. Layout / Shape-Primitives */
+@import './spacing.css';
+@import './radius.css';
+@import './stroke-width.css';
+
+/* 5. Motion & Shadows & Focus */
+@import './motion.css';
+@import './shadows.css';
+@import './elevation.css';
+@import './layers.css';
+@import './focus.css';
+
+/* 6. Shared Component Tokens */
+@import './components-shared.css';
+@import './code-block.css';
+@import './menu.css';
+@import './sidebar.css';
+@import './select-overlay.css';
+@import './tooltip.css';
+@import './new-components.css';

package/styles/tokens/code-block.css

@@ -0,0 +1,72 @@
+/**
+ * Cocoar Design System - Code Block Tokens
+ * Theming tokens for the coar-code-block component
+ *
+ * These tokens allow consumers to customize code block appearance
+ * from a central location for consistent theming.
+ */
+
+:root {
+  /* ========================================
+     CODE BLOCK - LIGHT THEME (Default)
+     ======================================== */
+
+  /* Layout */
+  --coar-code-block-bg: var(--coar-color-white);
+  --coar-code-block-header-bg: var(--coar-color-gray-50);
+  --coar-code-block-border: #e1e4e8;
+
+  /* Text */
+  --coar-code-block-text: #24292e;
+  --coar-code-block-text-muted: #6a737d;
+
+  /* Interactive */
+  --coar-code-block-button-bg-hover: rgba(0, 0, 0, 0.08);
+
+  /* Syntax Highlighting - Light (GitHub inspired) */
+  --coar-code-block-keyword: #d73a49;
+  --coar-code-block-string: #032f62;
+  --coar-code-block-number: #005cc5;
+  --coar-code-block-comment: #6a737d;
+  --coar-code-block-function: #6f42c1;
+  --coar-code-block-class: #22863a;
+  --coar-code-block-property: #005cc5;
+  --coar-code-block-operator: #24292e;
+  --coar-code-block-punctuation: #24292e;
+  --coar-code-block-tag: #22863a;
+  --coar-code-block-attr-name: #6f42c1;
+  --coar-code-block-attr-value: #032f62;
+}
+
+/* ========================================
+   CODE BLOCK - DARK THEME
+   ======================================== */
+
+:root.dark-mode,
+.dark-mode {
+  /* Layout */
+  --coar-code-block-bg: var(--coar-color-gray-100, #27272a);
+  --coar-code-block-header-bg: var(--coar-color-gray-200, #3f3f46);
+  --coar-code-block-border: var(--coar-color-gray-300, #52525b);
+
+  /* Text */
+  --coar-code-block-text: #d4d4d4;
+  --coar-code-block-text-muted: #888888;
+
+  /* Interactive */
+  --coar-code-block-button-bg-hover: rgba(255, 255, 255, 0.12);
+
+  /* Syntax Highlighting - Dark (VS Code inspired) */
+  --coar-code-block-keyword: #569cd6;
+  --coar-code-block-string: #ce9178;
+  --coar-code-block-number: #b5cea8;
+  --coar-code-block-comment: #6a9955;
+  --coar-code-block-function: #dcdcaa;
+  --coar-code-block-class: #4ec9b0;
+  --coar-code-block-property: #9cdcfe;
+  --coar-code-block-operator: #d4d4d4;
+  --coar-code-block-punctuation: #808080;
+  --coar-code-block-tag: #569cd6;
+  --coar-code-block-attr-name: #9cdcfe;
+  --coar-code-block-attr-value: #ce9178;
+}

package/styles/tokens/colors-primitives-dark.css

@@ -0,0 +1,84 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Color Primitives - Dark Mode
+ * Manually tuned for optimal dark theme appearance
+ */
+
+:root.dark-mode,
+.dark-mode {
+  --coar-color-black: #000000;
+  --coar-color-white: #ffffff;
+
+  /* Gray scale for dark mode - adjusted for better contrast */
+  --coar-color-gray-50: #18181b; /* Page background - slightly lighter */
+  --coar-color-gray-100: #27272a; /* Secondary background - more contrast */
+  --coar-color-gray-200: #3f3f46; /* Tertiary / cards */
+  --coar-color-gray-300: #52525b;
+  --coar-color-gray-400: #71717a;
+  --coar-color-gray-500: #a1a1aa;
+  --coar-color-gray-600: #d4d4d8;
+  --coar-color-gray-700: #e4e4e7;
+  --coar-color-gray-800: #f4f4f5;
+  --coar-color-gray-900: #fafafa;
+
+  /* Slate for brand/accent areas in dark mode */
+  --coar-color-slate-50: #0f172a;
+  --coar-color-slate-100: #1e293b;
+  --coar-color-slate-200: #334155;
+  --coar-color-slate-300: #475569;
+  --coar-color-slate-400: #64748b;
+  --coar-color-slate-500: #94a3b8;
+  --coar-color-slate-600: #b8c5d6;
+  --coar-color-slate-700: #cbd5e1;
+  --coar-color-slate-800: #e2e8f0;
+  --coar-color-slate-900: #f1f5f9;
+
+  /* Accent Colors - Primary brand accent for dark mode
+     THEMING: Override these to customize the primary accent color */
+  --coar-color-accent-50: #0a487a;
+  --coar-color-accent-100: #0f5a99;
+  --coar-color-accent-200: #156db7;
+  --coar-color-accent-300: #1e80d1;
+  --coar-color-accent-400: #278fe4;
+  --coar-color-accent-500: #459fea;
+  --coar-color-accent-600: #6eb4ef;
+  --coar-color-accent-700: #9fcdf5;
+  --coar-color-accent-800: #cde6fa;
+  --coar-color-accent-900: #e8f4fc;
+
+  /* Green - success colors for dark mode */
+  --coar-color-green-50: #0e3a1f;
+  --coar-color-green-100: #134f2b;
+  --coar-color-green-200: #186f39;
+  --coar-color-green-300: #1e8f48;
+  --coar-color-green-400: #25b95a;
+  --coar-color-green-500: #4ac771;
+  --coar-color-green-600: #76d591;
+  --coar-color-green-700: #a4e3b5;
+  --coar-color-green-800: #d2f1da;
+  --coar-color-green-900: #e8f9ed;
+
+  /* Red - error colors for dark mode */
+  --coar-color-red-50: #4d1414;
+  --coar-color-red-100: #6f1d1d;
+  --coar-color-red-200: #922626;
+  --coar-color-red-300: #b52f2f;
+  --coar-color-red-400: #d63b3b;
+  --coar-color-red-500: #e45555;
+  --coar-color-red-600: #ec7c7c;
+  --coar-color-red-700: #f3a8a8;
+  --coar-color-red-800: #f9d3d3;
+  --coar-color-red-900: #fdecec;
+
+  /* Yellow - warning colors for dark mode */
+  --coar-color-amber-50: #402908;
+  --coar-color-amber-100: #66430f;
+  --coar-color-amber-200: #996217;
+  --coar-color-amber-300: #cc821f;
+  --coar-color-amber-400: #ffa326;
+  --coar-color-amber-500: #ffba4d;
+  --coar-color-amber-600: #ffce78;
+  --coar-color-amber-700: #ffdfa0;
+  --coar-color-amber-800: #ffeec2;
+  --coar-color-amber-900: #fff8e6;
+}