@cocoar/ui 0.1.0-beta.99 → 0.1.1

package/llms.txt

@@ -0,0 +1,82 @@
+# Cocoar UI
+> Angular 21 component library with design tokens. Package: @cocoar/ui
+
+Docs: https://cocoar-dev.github.io/cocoar-ui/
+Source: https://github.com/cocoar-dev/cocoar-ui
+
+## Display Components
+
+- [coar-button](#coar-button): variants ButtonVariant — sizes ButtonSize
+- [coar-badge](#coar-badge): variants BadgeVariant — sizes BadgeSize
+- [coar-tag](#coar-tag): CoarTagComponent — variants TagVariant — sizes TagSize
+- [coar-card](#coar-card): variants CardVariant
+- [coar-note](#coar-note): A callout/note component for highlighting information. — variants NoteVariant
+- [coar-divider](#coar-divider): A flexible divider component for visually separating content sections. — variants DividerVariant
+- [coar-table](#coar-table): A simple table component that provides consistent styling. — variants CoarTableVariant
+- [coar-label](#coar-label): Standalone label component for consistent form labeling across the design system. — sizes CoarLabelSize
+- [coar-icon](#coar-icon): COAR Icon Component — sizes CoarIconSize | string
+- [CoarIconService](#CoarIconService): Service — methods: getIcon, getRegisteredSources, getAvailableIconKeys, clearCache, clearIconCache
+- [coar-avatar](#coar-avatar): Avatar component for displaying user profile images with fallback to initials. — sizes AvatarSize
+- [coar-code-block](#coar-code-block): variants CodeBlockVariant
+- [[coarScrollbar]](#[coarScrollbar]): Directive that applies custom overlay scrollbars to an element.
+- [coar-progress-bar](#coar-progress-bar): variants CoarProgressBarVariant — sizes CoarProgressBarSize
+- [coar-spinner](#coar-spinner): sizes CoarSpinnerSize
+- [link](#coar-link): CSS-only link styling — classes: coar-link, coar-link--subtle, coar-link--s, coar-link--m, coar-link--l
+
+## Forms Components
+
+- [coar-text-input](#coar-text-input): sizes CoarTextInputSize — CVA (forms compatible)
+- [coar-number-input](#coar-number-input): sizes CoarNumberInputSize — CVA (forms compatible)
+- [coar-password-input](#coar-password-input): sizes CoarPasswordInputSize — CVA (forms compatible)
+- [coar-checkbox](#coar-checkbox): sizes CoarCheckboxSize — CVA (forms compatible)
+- [coar-radio-group](#coar-radio-group): Radio group component for single-choice selection. — sizes RadioGroupSize — CVA (forms compatible)
+- [coar-radio](#coar-radio): Individual radio button, must be used inside a coar-radio-group.
+- [coar-multi-select](#coar-multi-select): Multi-select dropdown component.
+- [coar-single-select](#coar-single-select): Single-select dropdown component.
+- [coar-tag-select](#coar-tag-select): Tag-based multi-select component.
+- [coar-switch](#coar-switch): sizes CoarSwitchSize — CVA (forms compatible)
+
+## Navigation Components
+
+- [coar-tab-group](#coar-tab-group): Tabs
+- [coar-tab](#coar-tab): Individual tab definition for use within CoarTabGroup.
+- [coar-sidebar](#coar-sidebar): CoarSidebar: A three-part layout component for navigation sidebars.
+- [coar-breadcrumb-item](#coar-breadcrumb-item): Breadcrumb
+- [coar-breadcrumb](#coar-breadcrumb): Breadcrumb
+- [coar-pagination](#coar-pagination): Pagination
+- [coar-navbar](#coar-navbar): Navbar
+
+## Overlay Components
+
+- [coar-popover](#coar-popover): A lightweight, hover/focus popover for rich tooltip-like content.
+- [coar-tooltip-overlay](#coar-tooltip-overlay): Tooltip
+- [[coarTooltip]](#[coarTooltip]): Tooltip
+- [CoarTooltipService](#CoarTooltipService): Service — methods: notifyClosed
+- [[coarPopconfirm]](#[coarPopconfirm]): Popconfirm directive for confirming actions with a small anchored popover.
+- [coar-dialog-shell](#coar-dialog-shell): Dialog
+- [CoarDialogService](#CoarDialogService): Service — methods: openComponent, openTemplate, confirm
+- [coar-toast-container](#coar-toast-container): Toast
+- [coar-toast](#coar-toast): variants CoarToastVariant
+- [CoarToastService](#CoarToastService): Service — methods: success, error, warning, info, show, dismissAll
+
+## Date & Time Components
+
+- [coar-plain-date-picker](#coar-plain-date-picker): Date picker component with scrollable calendar.
+- [coar-plain-date-time-picker](#coar-plain-date-time-picker): Date-time picker component with scrollable calendar and time selection.
+- [coar-zoned-date-time-picker](#coar-zoned-date-time-picker): Zoned date-time picker component with full timezone support.
+- [coar-time-picker](#coar-time-picker): Time picker component with hours, minutes, and optional AM/PM selection. — sizes CoarTimePickerSize — CVA (forms compatible)
+- [coar-scrollable-calendar](#coar-scrollable-calendar): Scrollable calendar component displaying multiple months vertically.
+- [coar-mini-calendar](#coar-mini-calendar): Mini Calendar
+- [coar-month-list](#coar-month-list): Month list component for date/time picker navigation.
+- [date-utilities](#date-utilities): Utility exports — types: CoarTimePeriod; functions: coarDetectDateFormatPatternFromIntl, coarGetDateSeparatorForPattern, coarGetLocalizedWeekdays, coarFormatPlainDate, coarParsePlainDateFromInput
+
+## Menu Components
+
+- [coar-menu](#coar-menu): CoarMenu: Shell component providing menu styling container.
+- [coar-menu-item](#coar-menu-item): CoarMenuItem: Individual menu item with optional icon and submenu support.
+- [coar-menu-divider](#coar-menu-divider): CoarMenuDivider: Visual separator between menu items.
+- [coar-menu-heading](#coar-menu-heading): CoarMenuHeading: Non-interactive section label for menu groups.
+- [coar-submenu-item, coar-sub-flyout](#coar-submenu-item, coar-sub-flyout): CoarSubmenuItem: Menu item that opens a submenu on hover.
+- [coar-sub-expand](#coar-sub-expand): CoarSubExpand: Menu item that expands/collapses a submenu inline.
+- [ng-template[coarSubmenu]](#ng-template[coarSubmenu]): Marks an inline submenu template for a `coar-submenu-item`.
+- [[coarMenuAimConfig]](#[coarMenuAimConfig]): Menu

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/ui",
-  "version": "0.1.0-beta.99",
+  "version": "0.1.1",
   "description": "Complete Cocoar Design System - all UI components, overlays, and menus in one package",
   "author": "Cocoar",
   "license": "Apache-2.0",
@@ -13,17 +13,6 @@
     "url": "https://github.com/cocoar-dev/cocoar-ui/issues"
   },
   "homepage": "https://github.com/cocoar-dev/cocoar-ui",
-  "main": "./src/index.js",
-  "module": "./src/index.js",
-  "types": "./src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "esm2022": "./src/index.js",
-      "es2022": "./src/index.js",
-      "default": "./src/index.js"
-    }
-  },
   "keywords": [
     "angular",
     "design-system",
@@ -33,15 +22,45 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
-    "@cocoar/ui-components": "workspace:*",
-    "@cocoar/ui-menu": "workspace:*",
-    "@cocoar/ui-overlay": "workspace:*",
-    "@cocoar/ui-tokens": "workspace:*"
+  "exports": {
+    "./styles/*": "./styles/*",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/cocoar-ui.d.ts",
+      "default": "./fesm2022/cocoar-ui.mjs"
+    },
+    "./components": {
+      "types": "./types/cocoar-ui-components.d.ts",
+      "default": "./fesm2022/cocoar-ui-components.mjs"
+    },
+    "./menu": {
+      "types": "./types/cocoar-ui-menu.d.ts",
+      "default": "./fesm2022/cocoar-ui-menu.mjs"
+    },
+    "./overlay": {
+      "types": "./types/cocoar-ui-overlay.d.ts",
+      "default": "./fesm2022/cocoar-ui-overlay.mjs"
+    }
   },
   "peerDependencies": {
-    "@angular/core": "^20.3.0"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@js-temporal/polyfill": "^0.5.0",
+    "@maskito/core": "^4.0.0",
+    "@maskito/kit": "^4.0.0",
+    "overlayscrollbars": "^2.0.0",
+    "prismjs": "^1.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "@cocoar/localization": "0.1.1",
+    "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "type": "module"
+  "module": "fesm2022/cocoar-ui.mjs",
+  "typings": "types/cocoar-ui.d.ts"
 }

package/styles/all.css

@@ -0,0 +1,9 @@
+/**
+ * Cocoar Design System - All Styles
+ *
+ * Import this file to get all design tokens and component global styles:
+ * @import '@cocoar/ui/styles/all.css';
+ */
+
+@import './tokens/all.css';
+@import './components.css';

package/styles/components.css

@@ -0,0 +1,127 @@
+/**
+ * Cocoar UI Components - Global Styles
+ *
+ * This file contains global styles for components that render content
+ * outside of Angular's view encapsulation (e.g., overlay panels),
+ * and CSS-only components that use plain class selectors.
+ */
+
+/* ========================================
+   LINK (CSS-only component)
+   ========================================
+   Applied to native <a> elements via .coar-link class.
+   Usage: <a class="coar-link" href="...">Link</a>
+   ======================================== */
+@import '../components/src/lib/display/link/coar-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/tokens/all.css

@@ -0,0 +1,38 @@
+/**
+ * Cocoar Design System - All Design Tokens
+ * Auto-generated from Figma - Do not edit manually
+ *
+ * Import this file to get all design tokens at once:
+ * @import '@cocoar/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. */
+
+/* 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 './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
+   ======================================== */
+
+.dark-mode,
+[data-theme='dark'] {
+  /* 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;
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Color Primitives - Light Mode
+ * Auto-generated from Figma - Do not edit manually
+ */
+
+:root,
+.light-mode {
+  --coar-color-black: #000000;
+  --coar-color-gray-100: #f0f0f0;
+  --coar-color-gray-200: #e5e5e5;
+  --coar-color-gray-300: #d6d6d6;
+  --coar-color-gray-400: #c0c0c0;
+  --coar-color-gray-50: #f7f7f7;
+  --coar-color-gray-500: #9a9a9a;
+  --coar-color-gray-600: #7a7a7a;
+  --coar-color-gray-700: #6b6b6b;
+  --coar-color-gray-800: #5a5a5a;
+  --coar-color-gray-900: #444444;
+  --coar-color-green-50: #e8f9ed;
+  --coar-color-green-100: #d2f1da;
+  --coar-color-green-200: #a4e3b5;
+  --coar-color-green-300: #76d591;
+  --coar-color-green-400: #4ac771;
+  --coar-color-green-500: #25b95a;
+  --coar-color-green-600: #1e8f48;
+  --coar-color-green-700: #186f39;
+  --coar-color-green-800: #134f2b;
+  --coar-color-green-900: #0e3a1f;
+  --coar-color-red-50: #fdecec;
+  --coar-color-red-100: #f9d3d3;
+  --coar-color-red-200: #f3a8a8;
+  --coar-color-red-300: #ec7c7c;
+  --coar-color-red-400: #e45555;
+  --coar-color-red-500: #d63b3b;
+  --coar-color-red-600: #b52f2f;
+  --coar-color-red-700: #922626;
+  --coar-color-red-800: #6f1d1d;
+  --coar-color-red-900: #4d1414;
+  --coar-color-slate-100: #e3e6ec;
+  --coar-color-slate-200: #c6cad4;
+  --coar-color-slate-300: #a6adbc;
+  --coar-color-slate-400: #8b94a7;
+  --coar-color-slate-50: #f0f4fc;
+  --coar-color-slate-500: #79849b;
+  --coar-color-slate-600: #707d97;
+  --coar-color-slate-700: #5e6b84;
+  --coar-color-slate-800: #525e76;
+  --coar-color-slate-900: #44526b;
+  --coar-color-white: #ffffff;
+
+  /* Accent Colors - Primary brand accent (Cocoar blue)
+     THEMING: Override these to customize the primary accent color */
+  --coar-color-accent-50: #e8f4fc;
+  --coar-color-accent-100: #cde6fa;
+  --coar-color-accent-200: #9fcdf5;
+  --coar-color-accent-300: #6eb4ef;
+  --coar-color-accent-400: #459fea;
+  --coar-color-accent-500: #278fe4;
+  --coar-color-accent-600: #1e80d1;
+  --coar-color-accent-700: #156db7;
+  --coar-color-accent-800: #0f5a99;
+  --coar-color-accent-900: #0a487a;
+
+  --coar-color-amber-50: #fff8e6;
+  --coar-color-amber-100: #ffeec2;
+  --coar-color-amber-200: #ffdfa0;
+  --coar-color-amber-300: #ffce78;
+  --coar-color-amber-400: #ffba4d;
+  --coar-color-amber-500: #ffa326;
+  --coar-color-amber-600: #cc821f;
+  --coar-color-amber-700: #996217;
+  --coar-color-amber-800: #66430f;
+  --coar-color-amber-900: #402908;
+}