@cobdfamily/clf-core 7.0.1

package/dist/tokens.json

@@ -0,0 +1,97 @@
+{
+  "color.primary": "#72cadb",
+  "color.primary.dark": "#8fd8e6",
+  "color.primary-contrast": "#000000",
+  "color.primary-contrast.dark": "#000000",
+  "color.primary-strong": "#115a6a",
+  "color.primary-strong.dark": "#8fd8e6",
+  "color.secondary": "#de1818",
+  "color.secondary.dark": "#f25555",
+  "color.secondary-contrast": "#ffffff",
+  "color.secondary-contrast.dark": "#000000",
+  "color.secondary-strong": "#b30e0e",
+  "color.secondary-strong.dark": "#f25555",
+  "color.tertiary": "#2d5e3a",
+  "color.tertiary.dark": "#5d9870",
+  "color.tertiary-contrast": "#ffffff",
+  "color.tertiary-contrast.dark": "#000000",
+  "color.tertiary-strong": "#1e4426",
+  "color.tertiary-strong.dark": "#5d9870",
+  "color.success": "#2dd36f",
+  "color.success.dark": "#5fdc8b",
+  "color.success-contrast": "#000000",
+  "color.success-contrast.dark": "#000000",
+  "color.success-strong": "#0e7c41",
+  "color.success-strong.dark": "#5fdc8b",
+  "color.warning": "#ffc409",
+  "color.warning.dark": "#ffd23d",
+  "color.warning-contrast": "#000000",
+  "color.warning-contrast.dark": "#000000",
+  "color.warning-strong": "#8a5a00",
+  "color.warning-strong.dark": "#ffd23d",
+  "color.danger": "#c5283b",
+  "color.danger.dark": "#b53e51",
+  "color.danger-contrast": "#ffffff",
+  "color.danger-contrast.dark": "#ffffff",
+  "color.danger-strong": "#a31f30",
+  "color.danger-strong.dark": "#b53e51",
+  "color.medium": "#92949c",
+  "color.medium.dark": "#a3a5ad",
+  "color.medium-contrast": "#000000",
+  "color.medium-contrast.dark": "#000000",
+  "color.light": "#f4f5f8",
+  "color.light.dark": "#2a2b30",
+  "color.light-contrast": "#000000",
+  "color.light-contrast.dark": "#ffffff",
+  "color.background": "#ffffff",
+  "color.background.dark": "#121212",
+  "color.foreground": "#1a1a1a",
+  "color.foreground.dark": "#f0f0f0",
+  "color.toolbar-background": "#72cadb",
+  "color.toolbar-background.dark": "#1a3540",
+  "color.toolbar-foreground": "#000000",
+  "color.toolbar-foreground.dark": "#f0f0f0",
+  "color.link": "#0044a3",
+  "color.link.dark": "#7eaeec",
+  "color.link-visited": "#5c2a91",
+  "color.link-visited.dark": "#b794dd",
+  "spacing.xs": "4px",
+  "spacing.sm": "8px",
+  "spacing.md": "16px",
+  "spacing.lg": "24px",
+  "spacing.xl": "32px",
+  "spacing.2xl": "48px",
+  "spacing.3xl": "64px",
+  "radius.sm": "4px",
+  "radius.md": "8px",
+  "radius.lg": "16px",
+  "radius.xl": "24px",
+  "radius.pill": "9999px",
+  "typography.family-sans": "'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+  "typography.family-mono": "ui-monospace, SFMono-Regular, Menlo, monospace",
+  "typography.size-xs": "0.75rem",
+  "typography.size-sm": "0.875rem",
+  "typography.size-md": "1rem",
+  "typography.size-lg": "1.25rem",
+  "typography.size-xl": "1.5rem",
+  "typography.size-2xl": "2rem",
+  "typography.size-3xl": "2.5rem",
+  "typography.weight-regular": "400",
+  "typography.weight-medium": "500",
+  "typography.weight-bold": "700",
+  "typography.line-tight": "1.2",
+  "typography.line-default": "1.5",
+  "typography.line-loose": "1.75",
+  "shadows.sm": "0 1px 2px rgba(0, 0, 0, 0.06)",
+  "shadows.sm.dark": "0 1px 2px rgba(0, 0, 0, 0.4)",
+  "shadows.md": "0 4px 8px rgba(0, 0, 0, 0.08)",
+  "shadows.md.dark": "0 4px 8px rgba(0, 0, 0, 0.5)",
+  "shadows.lg": "0 12px 24px rgba(0, 0, 0, 0.12)",
+  "shadows.lg.dark": "0 12px 24px rgba(0, 0, 0, 0.6)",
+  "motion.duration-fast": "120ms",
+  "motion.duration-default": "200ms",
+  "motion.duration-slow": "320ms",
+  "motion.easing-standard": "cubic-bezier(0.2, 0, 0, 1)",
+  "motion.easing-decelerate": "cubic-bezier(0, 0, 0, 1)",
+  "motion.easing-accelerate": "cubic-bezier(0.3, 0, 1, 1)"
+}

package/dist/tokens.scss

@@ -0,0 +1,95 @@
+$cobd-color-primary: #72cadb;
+$cobd-color-primary-dark: #8fd8e6;
+$cobd-color-primary-contrast: #000000;
+$cobd-color-primary-contrast-dark: #000000;
+$cobd-color-primary-strong: #115a6a;
+$cobd-color-primary-strong-dark: #8fd8e6;
+$cobd-color-secondary: #de1818;
+$cobd-color-secondary-dark: #f25555;
+$cobd-color-secondary-contrast: #ffffff;
+$cobd-color-secondary-contrast-dark: #000000;
+$cobd-color-secondary-strong: #b30e0e;
+$cobd-color-secondary-strong-dark: #f25555;
+$cobd-color-tertiary: #2d5e3a;
+$cobd-color-tertiary-dark: #5d9870;
+$cobd-color-tertiary-contrast: #ffffff;
+$cobd-color-tertiary-contrast-dark: #000000;
+$cobd-color-tertiary-strong: #1e4426;
+$cobd-color-tertiary-strong-dark: #5d9870;
+$cobd-color-success: #2dd36f;
+$cobd-color-success-dark: #5fdc8b;
+$cobd-color-success-contrast: #000000;
+$cobd-color-success-contrast-dark: #000000;
+$cobd-color-success-strong: #0e7c41;
+$cobd-color-success-strong-dark: #5fdc8b;
+$cobd-color-warning: #ffc409;
+$cobd-color-warning-dark: #ffd23d;
+$cobd-color-warning-contrast: #000000;
+$cobd-color-warning-contrast-dark: #000000;
+$cobd-color-warning-strong: #8a5a00;
+$cobd-color-warning-strong-dark: #ffd23d;
+$cobd-color-danger: #c5283b;
+$cobd-color-danger-dark: #b53e51;
+$cobd-color-danger-contrast: #ffffff;
+$cobd-color-danger-contrast-dark: #ffffff;
+$cobd-color-danger-strong: #a31f30;
+$cobd-color-danger-strong-dark: #b53e51;
+$cobd-color-medium: #92949c;
+$cobd-color-medium-dark: #a3a5ad;
+$cobd-color-medium-contrast: #000000;
+$cobd-color-medium-contrast-dark: #000000;
+$cobd-color-light: #f4f5f8;
+$cobd-color-light-dark: #2a2b30;
+$cobd-color-light-contrast: #000000;
+$cobd-color-light-contrast-dark: #ffffff;
+$cobd-color-background: #ffffff;
+$cobd-color-background-dark: #121212;
+$cobd-color-foreground: #1a1a1a;
+$cobd-color-foreground-dark: #f0f0f0;
+$cobd-color-toolbar-background: #72cadb;
+$cobd-color-toolbar-background-dark: #1a3540;
+$cobd-color-toolbar-foreground: #000000;
+$cobd-color-toolbar-foreground-dark: #f0f0f0;
+$cobd-color-link: #0044a3;
+$cobd-color-link-dark: #7eaeec;
+$cobd-color-link-visited: #5c2a91;
+$cobd-color-link-visited-dark: #b794dd;
+$cobd-spacing-xs: 4px;
+$cobd-spacing-sm: 8px;
+$cobd-spacing-md: 16px;
+$cobd-spacing-lg: 24px;
+$cobd-spacing-xl: 32px;
+$cobd-spacing-2xl: 48px;
+$cobd-spacing-3xl: 64px;
+$cobd-radius-sm: 4px;
+$cobd-radius-md: 8px;
+$cobd-radius-lg: 16px;
+$cobd-radius-xl: 24px;
+$cobd-radius-pill: 9999px;
+$cobd-typography-family-sans: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+$cobd-typography-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+$cobd-typography-size-xs: 0.75rem;
+$cobd-typography-size-sm: 0.875rem;
+$cobd-typography-size-md: 1rem;
+$cobd-typography-size-lg: 1.25rem;
+$cobd-typography-size-xl: 1.5rem;
+$cobd-typography-size-2xl: 2rem;
+$cobd-typography-size-3xl: 2.5rem;
+$cobd-typography-weight-regular: 400;
+$cobd-typography-weight-medium: 500;
+$cobd-typography-weight-bold: 700;
+$cobd-typography-line-tight: 1.2;
+$cobd-typography-line-default: 1.5;
+$cobd-typography-line-loose: 1.75;
+$cobd-shadows-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+$cobd-shadows-sm-dark: 0 1px 2px rgba(0, 0, 0, 0.4);
+$cobd-shadows-md: 0 4px 8px rgba(0, 0, 0, 0.08);
+$cobd-shadows-md-dark: 0 4px 8px rgba(0, 0, 0, 0.5);
+$cobd-shadows-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
+$cobd-shadows-lg-dark: 0 12px 24px rgba(0, 0, 0, 0.6);
+$cobd-motion-duration-fast: 120ms;
+$cobd-motion-duration-default: 200ms;
+$cobd-motion-duration-slow: 320ms;
+$cobd-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+$cobd-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
+$cobd-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@cobdfamily/clf-core",
+  "version": "7.0.1",
+  "description": "Common Look and Feel core: design tokens, theming runtime, COBD custom elements (theme toggle, font-scale toggle, font-scale-paint, <cobd-nav>, <cobd-support>, <cobd-embed>, plus the form elements), bundled nav metadata, and shared chrome i18n strings. Ships an `./components` side-effect bundle that registers every element + boots the theming runtime in one import -- what the clf-factory chrome auto-loads. The dependency root for every COBD app; pre-built per-engine theme tarballs live in @cobdfamily/clf-factory.",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cobdfamily/clf.git",
+    "directory": "packages/clf-core"
+  },
+  "files": [
+    "dist",
+    "src/navs/schema.json"
+  ],
+  "exports": {
+    "./tokens.css":       "./dist/tokens.css",
+    "./tokens.scss":      "./dist/tokens.scss",
+    "./tokens.json":      "./dist/tokens.json",
+    "./theming": {
+      "types":   "./dist/theming/runtime.d.ts",
+      "import":  "./dist/theming/runtime.js",
+      "default": "./dist/theming/runtime.js"
+    },
+    "./theming/font-scale-paint": "./dist/theming/font-scale-paint.js",
+    "./theming/init":             "./dist/theming/init.js",
+    "./navs": {
+      "types":   "./dist/navs.d.ts",
+      "import":  "./dist/navs.js",
+      "default": "./dist/navs.js"
+    },
+    "./navs/*.json":      "./dist/navs/*.json",
+    "./schema/nav.json":  "./src/navs/schema.json",
+    "./components": {
+      "types":   "./dist/components/index.d.ts",
+      "import":  "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./components/cobd-nav": {
+      "types":   "./dist/components/cobd-nav.d.ts",
+      "import":  "./dist/components/cobd-nav.js",
+      "default": "./dist/components/cobd-nav.js"
+    },
+    "./components/cobd-support": {
+      "types":   "./dist/components/cobd-support.d.ts",
+      "import":  "./dist/components/cobd-support.js",
+      "default": "./dist/components/cobd-support.js"
+    },
+    "./components/cobd-embed": {
+      "types":   "./dist/components/cobd-embed.d.ts",
+      "import":  "./dist/components/cobd-embed.js",
+      "default": "./dist/components/cobd-embed.js"
+    },
+    "./components/theme-toggle": {
+      "types":   "./dist/components/theme-toggle.d.ts",
+      "import":  "./dist/components/theme-toggle.js",
+      "default": "./dist/components/theme-toggle.js"
+    },
+    "./components/font-scale-toggle": {
+      "types":   "./dist/components/font-scale-toggle.d.ts",
+      "import":  "./dist/components/font-scale-toggle.js",
+      "default": "./dist/components/font-scale-toggle.js"
+    },
+    "./components/forms": {
+      "types":   "./dist/components/forms/index.d.ts",
+      "import":  "./dist/components/forms/index.js",
+      "default": "./dist/components/forms/index.js"
+    },
+    "./components/forms/textfield": {
+      "types":   "./dist/components/forms/textfield.d.ts",
+      "import":  "./dist/components/forms/textfield.js",
+      "default": "./dist/components/forms/textfield.js"
+    },
+    "./components/forms/textarea": {
+      "types":   "./dist/components/forms/textarea.d.ts",
+      "import":  "./dist/components/forms/textarea.js",
+      "default": "./dist/components/forms/textarea.js"
+    },
+    "./components/forms/select": {
+      "types":   "./dist/components/forms/select.d.ts",
+      "import":  "./dist/components/forms/select.js",
+      "default": "./dist/components/forms/select.js"
+    },
+    "./components/forms/checkbox": {
+      "types":   "./dist/components/forms/checkbox.d.ts",
+      "import":  "./dist/components/forms/checkbox.js",
+      "default": "./dist/components/forms/checkbox.js"
+    },
+    "./components/forms/submit": {
+      "types":   "./dist/components/forms/submit.d.ts",
+      "import":  "./dist/components/forms/submit.js",
+      "default": "./dist/components/forms/submit.js"
+    }
+  },
+  "scripts": {
+    "build:tokens":   "node build/build-tokens.mjs",
+    "build:navs":     "node build/build-navs.mjs",
+    "build:i18n":     "node build/build-i18n.mjs",
+    "build:ts":       "tsc -p tsconfig.json",
+    "build":          "npm run build:tokens && npm run build:navs && npm run build:i18n && npm run build:ts",
+    "audit:contrast": "node build/audit-contrast.mjs",
+    "clean":          "rm -rf dist",
+    "test":           "node --test test/*.test.mjs",
+    "test:watch":     "node --test --watch test/*.test.mjs",
+    "prepublishOnly": "npm run clean && npm run build && npm test"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "cobd",
+    "design-tokens",
+    "theming",
+    "dark-mode",
+    "ionic",
+    "wordpress",
+    "keycloak-theme",
+    "common-look-and-feel"
+  ]
+}

package/src/navs/schema.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://clf.cobd.ca/schemas/nav.json",
+  "title": "CLF Nav",
+  "type": "object",
+  "required": ["slug", "label", "items"],
+  "additionalProperties": false,
+  "properties": {
+    "$schema": { "type": "string" },
+    "slug": {
+      "type": "string",
+      "pattern": "^[a-z0-9][a-z0-9.\\-]*$",
+      "description": "Stable identifier for this nav. Matches the filename."
+    },
+    "label": {
+      "type": "string",
+      "description": "Default human-readable name (treated as the base locale, usually English)."
+    },
+    "label_i18n": {
+      "type": "object",
+      "description": "Optional per-locale label overrides keyed by BCP-47 tag (e.g., 'fr', 'pa', 'cr'). Falls back to 'label' if a locale isn't listed.",
+      "additionalProperties": { "type": "string" }
+    },
+    "items": {
+      "type": "array",
+      "items": { "$ref": "#/$defs/navItem" }
+    }
+  },
+  "$defs": {
+    "navItem": {
+      "type": "object",
+      "required": ["id", "label"],
+      "additionalProperties": false,
+      "properties": {
+        "id": {
+          "type": "string",
+          "pattern": "^[a-z0-9][a-z0-9_\\-]*$",
+          "description": "Stable id. Consumers may pattern-match in code."
+        },
+        "label": { "type": "string" },
+        "label_i18n": {
+          "type": "object",
+          "description": "Per-locale label overrides keyed by BCP-47 tag.",
+          "additionalProperties": { "type": "string" }
+        },
+        "href": { "type": "string" },
+        "rel": {
+          "type": "string",
+          "enum": ["external"]
+        },
+        "icon": {
+          "type": "string",
+          "description": "Ionicon name (or any string consumers know how to map)."
+        },
+        "items": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/navItem" }
+        },
+        "requiresAuth": { "type": "boolean" },
+        "description": { "type": "string" }
+      }
+    }
+  }
+}