@isavia-sut/dd-cdn-npm 1.0.0

package/Resources/KEF_logos/README.md

@@ -0,0 +1,55 @@
+# KEF Logos
+
+Lightweight, themeable logo SVGs for the website and buttons.
+
+## Files
+
+| File | Use |
+| --- | --- |
+| `kef-logo-mark.svg` | KEF symbol only (no text) — favicons, buttons, tight spaces |
+| `kef-logo-en.svg` | Full logo with the English wordmark |
+| `kef-logo-is.svg` | Full logo with the Icelandic wordmark |
+| `kef-logos.svg` | Combined sprite of all three for `<use>` references |
+| `generate-logos.mjs` | Source/generator — the single source of truth |
+
+The original master logos (`KEFsvart.svg`, `KEFISsvart.svg`, `KEFENsvart.svg`) are
+the print/download masters and are left unchanged.
+
+## Use
+
+**Inline (recommended — fully themeable):**
+
+```html
+<!-- inherits the current text colour -->
+<span style="color: var(--fg-brand)">
+  <!-- paste the contents of kef-logo-mark.svg here, or: -->
+  <svg width="80"><use href="kef-logos.svg#kef-logo-mark"></use></svg>
+</span>
+```
+
+**As an image (fixed colour):**
+
+```html
+<img src="Resources/KEF_logos/kef-logo-en.svg" alt="KEF" height="24">
+```
+
+> Note: CSS custom properties only apply to **inlined** SVGs, not `<img>`.
+
+## Theming
+
+Each logo inherits `currentColor` by default. To override, set:
+
+```css
+.my-logo {
+  --logo-color-primary: var(--color-leifur-black);   /* the KEF mark */
+  --logo-color-secondary: var(--fg-secondary);       /* the wordmark text */
+}
+```
+
+## Modify / regenerate
+
+Edit the path data in `generate-logos.mjs`, then run:
+
+```bash
+node Resources/KEF_logos/generate-logos.mjs
+```

package/Tokens/tokens.json

@@ -0,0 +1,156 @@
+{
+  "_meta": {
+    "name": "KEF Airport Design Tokens",
+    "version": "1.0.0",
+    "description": "Platform-agnostic design tokens for the KEF Airport brand system. Use cssVar for web, value fields for iOS/Android/Flutter. Duration values in seconds — multiply by 1000 for ms (e.g. 0.15s = 150ms)."
+  },
+
+  "color": {
+    "brand": {
+      "leifur-black":   { "value": "#101010", "description": "Primary black — text, backgrounds, primary buttons" },
+      "hrimfaxi-white": { "value": "#ffffff",  "description": "Primary white — backgrounds, inverse text" },
+      "geysir-blue":    { "value": "#004df4",  "description": "Brand blue — links, focus rings, Go-to-gate status, hero CTA" },
+      "gullfaxi-gold":  { "value": "#bb8b3f",  "description": "Brand gold — emphasis accents" },
+      "gljafaxi-green": { "value": "#0d9935",  "description": "Success / positive — On-time status" },
+      "hekla-red":      { "value": "#db2a12",  "description": "Error / danger — Cancelled status" },
+      "amber":          { "value": "#db8112",  "description": "Warning / caution — amber yellow" }
+    },
+    "semantic": {
+      "text-primary":               { "value": "#101010", "cssVar": "--color-text-primary" },
+      "text-inverse":               { "value": "#ffffff",  "cssVar": "--color-text-inverse" },
+      "text-muted":                 { "value": "#5f5f5f",  "cssVar": "--color-text-muted" },
+      "text-disabled":              { "value": "#919191",  "cssVar": "--color-text-disabled" },
+      "border-default":             { "value": "#e7e7e7",  "cssVar": "--color-border-default" },
+      "border-focus":               { "value": "#004df4",  "cssVar": "--color-border-focus" },
+      "border-error":               { "value": "#db2a12",  "cssVar": "--color-border-error" },
+      "bg-primary":                 { "value": "#ffffff",  "cssVar": "--color-bg-primary" },
+      "bg-secondary":               { "value": "#f5f5f5",  "cssVar": "--color-bg-secondary" },
+      "bg-inverse":                 { "value": "#101010",  "cssVar": "--color-bg-inverse" },
+      "interactive-primary":        { "value": "#004df4",  "cssVar": "--color-interactive-primary" },
+      "interactive-primary-hover":  { "value": "#0037ad",  "cssVar": "--color-interactive-primary-hover" },
+      "interactive-accent":         { "value": "#bb8b3f",  "cssVar": "--color-interactive-accent" },
+      "interactive-accent-hover":   { "value": "#85632d",  "cssVar": "--color-interactive-accent-hover" },
+      "feedback-success":           { "value": "#0d9935",  "cssVar": "--color-feedback-success" },
+      "feedback-warning":           { "value": "#db8112",  "cssVar": "--color-feedback-warning" },
+      "feedback-error":             { "value": "#db2a12",  "cssVar": "--color-feedback-error" },
+      "feedback-info":              { "value": "#004df4",  "cssVar": "--color-feedback-info" }
+    },
+    "flight-status": {
+      "on-time":      { "value": "#0d9935", "label": "On time",     "description": "Flight is on schedule" },
+      "gate-closing": { "value": "#db8112", "label": "Gate closing","description": "Urgent — passengers must proceed immediately" },
+      "cancelled":    { "value": "#db2a12", "label": "Cancelled",   "description": "Flight will not operate" },
+      "go-to-gate":   { "value": "#004df4", "label": "Go to gate",  "description": "Boarding is open, proceed to gate" },
+      "delayed":      { "value": "#101010", "label": "Delayed",     "description": "Flight is delayed from schedule" },
+      "departed":     { "value": "#919191", "label": "Departed",    "description": "Flight has left" }
+    }
+  },
+
+  "spacing": {
+    "025":  { "value": "2px",  "valuePx": 2,  "cssVar": "--space-025" },
+    "050":  { "value": "4px",  "valuePx": 4,  "cssVar": "--space-050" },
+    "100":  { "value": "8px",  "valuePx": 8,  "cssVar": "--space-100" },
+    "150":  { "value": "12px", "valuePx": 12, "cssVar": "--space-150" },
+    "200":  { "value": "16px", "valuePx": 16, "cssVar": "--space-200" },
+    "250":  { "value": "20px", "valuePx": 20, "cssVar": "--space-250" },
+    "300":  { "value": "24px", "valuePx": 24, "cssVar": "--space-300" },
+    "400":  { "value": "32px", "valuePx": 32, "cssVar": "--space-400" },
+    "500":  { "value": "40px", "valuePx": 40, "cssVar": "--space-500" },
+    "600":  { "value": "48px", "valuePx": 48, "cssVar": "--space-600" },
+    "700":  { "value": "56px", "valuePx": 56, "cssVar": "--space-700" },
+    "800":  { "value": "64px", "valuePx": 64, "cssVar": "--space-800" },
+    "900":  { "value": "72px", "valuePx": 72, "cssVar": "--space-900" },
+    "1000": { "value": "80px", "valuePx": 80, "cssVar": "--space-1000" }
+  },
+
+  "size": {
+    "100": { "value": "8px",  "valuePx": 8,  "cssVar": "--size-100" },
+    "150": { "value": "12px", "valuePx": 12, "cssVar": "--size-150" },
+    "200": { "value": "16px", "valuePx": 16, "cssVar": "--size-200" },
+    "250": { "value": "20px", "valuePx": 20, "cssVar": "--size-250" },
+    "300": { "value": "24px", "valuePx": 24, "cssVar": "--size-300" },
+    "400": { "value": "32px", "valuePx": 32, "cssVar": "--size-400" },
+    "500": { "value": "40px", "valuePx": 40, "cssVar": "--size-500" },
+    "600": { "value": "48px", "valuePx": 48, "cssVar": "--size-600" },
+    "700": { "value": "56px", "valuePx": 56, "cssVar": "--size-700" },
+    "800": { "value": "64px", "valuePx": 64, "cssVar": "--size-800" }
+  },
+
+  "radius": {
+    "025":  { "value": "2px",   "valuePx": 2,   "cssVar": "--radius-025", "description": "Hairline rounding — table rows, tight UI" },
+    "050":  { "value": "4px",   "valuePx": 4,   "cssVar": "--radius-050", "description": "Subtle rounding — tags, badges" },
+    "100":  { "value": "8px",   "valuePx": 8,   "cssVar": "--radius-100", "description": "Default rounding — cards, inputs" },
+    "200":  { "value": "16px",  "valuePx": 16,  "cssVar": "--radius-200", "description": "Large rounding — panels, modals" },
+    "full": { "value": "360px", "valuePx": 360, "cssVar": "--radius-full","description": "Pill shape — buttons, chips" }
+  },
+
+  "shadow": {
+    "sm": { "value": "0 1px 4px rgba(0,0,0,0.08)",   "cssVar": "--shadow-sm", "description": "Subtle lift — cards on white" },
+    "md": { "value": "0 4px 16px rgba(0,0,0,0.10)",  "cssVar": "--shadow-md", "description": "Card hover, dropdowns" },
+    "lg": { "value": "0 8px 32px rgba(0,0,0,0.12)",  "cssVar": "--shadow-lg", "description": "Modals, popovers" },
+    "xl": { "value": "0 16px 56px rgba(0,0,0,0.14)", "cssVar": "--shadow-xl", "description": "High elevation — full-screen overlays" }
+  },
+
+  "motion": {
+    "duration": {
+      "fast":   { "value": "0.15s", "valueMs": 150, "cssVar": "--duration-fast",   "description": "Micro-interactions: hover, focus, icon transitions" },
+      "normal": { "value": "0.2s",  "valueMs": 200, "cssVar": "--duration-normal", "description": "Default: most UI transitions" },
+      "slow":   { "value": "0.3s",  "valueMs": 300, "cssVar": "--duration-slow",   "description": "Larger elements: modals, panels, drawers" }
+    },
+    "easing": {
+      "default": { "value": "ease", "cssVar": "--ease", "description": "Standard easing for all transitions" }
+    },
+    "note": "When prefers-reduced-motion: reduce is set, all animated durations collapse to 0.01s and transforms are suppressed."
+  },
+
+  "typography": {
+    "fontFamily": {
+      "primary": {
+        "value": "KEF Oasis, Arial, sans-serif",
+        "cssVar": "--font-family-main",
+        "description": "KEF Oasis is a variable font (weight 300–700). Fallback stack for non-web: SF Pro (iOS), Roboto (Android)."
+      }
+    },
+    "scale": {
+      "desktop": {
+        "h1":          { "fontSize": "96px", "lineHeight": "100px", "fontWeight": 700, "cssClass": "text-h1" },
+        "h2":          { "fontSize": "76px", "lineHeight": "78px",  "fontWeight": 700, "cssClass": "text-h2" },
+        "h3":          { "fontSize": "58px", "lineHeight": "61px",  "fontWeight": 700, "cssClass": "text-h3" },
+        "h4":          { "fontSize": "44px", "lineHeight": "50px",  "fontWeight": 700, "cssClass": "text-h4" },
+        "h5":          { "fontSize": "32px", "lineHeight": "34px",  "fontWeight": 700, "cssClass": "text-h5" },
+        "h6":          { "fontSize": "20px", "lineHeight": "24px",  "fontWeight": 700, "cssClass": "text-h6" },
+        "intro":       { "fontSize": "32px", "lineHeight": "40px",  "fontWeight": 300, "cssClass": "text-intro" },
+        "callout":     { "fontSize": "24px", "lineHeight": "32px",  "fontWeight": 300, "cssClass": "text-callout" },
+        "body-large":  { "fontSize": "18px", "lineHeight": "24px",  "fontWeight": 400, "cssClass": "text-body-large" },
+        "body-normal": { "fontSize": "16px", "lineHeight": "22px",  "fontWeight": 400, "cssClass": "text-body" },
+        "body-small":  { "fontSize": "14px", "lineHeight": "18px",  "fontWeight": 400, "cssClass": "text-body-small" },
+        "body-tiny":   { "fontSize": "11px", "lineHeight": "15px",  "fontWeight": 400, "cssClass": "text-tiny" }
+      },
+      "mobile": {
+        "h1":          { "fontSize": "52px", "lineHeight": "auto",  "fontWeight": 700 },
+        "h2":          { "fontSize": "44px", "lineHeight": "46px",  "fontWeight": 700 },
+        "h3":          { "fontSize": "38px", "lineHeight": "40px",  "fontWeight": 700 },
+        "h4":          { "fontSize": "32px", "lineHeight": "34px",  "fontWeight": 700 },
+        "h5":          { "fontSize": "26px", "lineHeight": "28px",  "fontWeight": 700 },
+        "h6":          { "fontSize": "18px", "lineHeight": "22px",  "fontWeight": 700 },
+        "intro":       { "fontSize": "28px", "lineHeight": "32px",  "fontWeight": 300 },
+        "callout":     { "fontSize": "20px", "lineHeight": "28px",  "fontWeight": 300 },
+        "body-large":  { "fontSize": "16px", "lineHeight": "22px",  "fontWeight": 400 },
+        "body-normal": { "fontSize": "14px", "lineHeight": "22px",  "fontWeight": 400 }
+      }
+    }
+  },
+
+  "grid": {
+    "desktop": {
+      "columns":  12,
+      "gutter":   "32px",
+      "margin":   "32px",
+      "maxWidth": "1512px"
+    },
+    "mobile": {
+      "columns": 4,
+      "gutter":  "20px",
+      "margin":  "20px"
+    }
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@isavia-sut/dd-cdn-npm",
+  "version": "1.0.0",
+  "description": "KEF brand style system — design tokens, typography, components, and brand assets, published to npm and served via CDN (jsDelivr).",
+  "author": "thorsteinn-asgrimsson",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/isavia-sut/dd-cdn-npm#readme",
+  "bugs": {
+    "url": "https://github.com/isavia-sut/dd-cdn-npm/issues"
+  },
+  "keywords": [
+    "isavia",
+    "kef",
+    "keflavik",
+    "brand",
+    "design-system",
+    "design-tokens",
+    "css",
+    "cdn",
+    "theme"
+  ],
+  "main": "CSS/base-style.css",
+  "style": "CSS/base-style.css",
+  "files": [
+    "CSS",
+    "Resources",
+    "!Resources/Other_logos/Airlines",
+    "!Resources/Other_logos/Shops_&_restaurants",
+    "Tokens"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/isavia-sut/dd-cdn-npm.git"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}