@24vlh/vds 0.1.1 → 0.1.2

package/dist/identity.css

@@ -1 +1,266 @@
-.vds-identity,[data-vds-identity]{--logo-stroke-primary:2.75;--logo-clearspace:0.5;--logo-min-horizontal:24px;--logo-min-mark:16px;--logo-primary-letter-spacing:0.18em;--logo-secondary-letter-spacing:0.30em;--logo-size-xs:2.5rem;--logo-size-sm:3rem;--logo-size-md:3.75rem;--logo-size-lg:4.5rem;--logo-size-xl:5.5rem;--logo-size-xxl:6.5rem;--logo-doc-height:2.25rem}.logo{color:currentColor;color:var(--color-logo-ink,currentColor);display:inline-block;font-size:1rem;height:var(--logo-size-sm);line-height:1;overflow:visible;padding:calc(var(--logo-clearspace)*1em);vertical-align:middle;width:auto}.logo-wordmark{fill:currentColor;fill:var(--color-logo-ink,currentColor)}.logo-chevron,.logo-frame,.logo-rail{fill:none!important;stroke-width:var(--logo-stroke-primary);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.logo-frame,.logo-rail{stroke:currentColor;stroke:var(--color-logo-ink,currentColor)}.logo-chevron{stroke:currentColor;stroke:var(--color-logo-accent,currentColor)}.logo-text-primary{font-size:var(--text-sm);letter-spacing:var(--logo-primary-letter-spacing)}.logo-text-secondary{font-size:var(--text-xxxs);letter-spacing:var(--logo-secondary-letter-spacing)}.logo-text-primary,.logo-text-secondary{fill:currentColor;fill:var(--color-logo-ink,currentColor);font-family:var(--font-family-sans),sans-serif}.logo--mono .logo-chevron,.logo--mono .logo-frame,.logo--mono .logo-rail{stroke:var(--color-logo-mono)!important}.logo--mono .logo-text-primary,.logo--mono .logo-text-secondary,.logo--mono .logo-wordmark{fill:var(--color-logo-ink)!important;stroke:none!important}.logo--footer{color:var(--color-logo-footer-ink)}.logo--footer .logo-frame,.logo--footer .logo-rail{stroke:var(--color-logo-footer-ink)}.logo--footer .logo-chevron{stroke:var(--color-logo-footer-accent)}.logo--footer .logo-text-primary,.logo--footer .logo-text-secondary,.logo--footer .logo-wordmark{fill:var(--color-logo-footer-ink)}.logo--inverse .logo-frame,.logo--inverse .logo-rail{stroke:var(--color-logo-ink-inverse)!important}.logo--inverse .logo-chevron{stroke:var(--color-logo-accent-inverse)!important}.logo--inverse .logo-text-primary,.logo--inverse .logo-text-secondary,.logo--inverse .logo-wordmark{fill:var(--color-logo-ink-inverse)!important;stroke:none!important}.logo--horizontal{min-height:var(--logo-min-horizontal)}.logo--mark-only{min-height:var(--logo-min-mark)}.logo--xs{height:var(--logo-size-xs)}.logo--sm{height:var(--logo-size-sm)}.logo--md{height:var(--logo-size-md)}.logo--lg{height:var(--logo-size-lg)}.logo--xl{height:var(--logo-size-xl)}.logo--xxl{height:var(--logo-size-xxl)}.logo--inline{align-items:center;display:inline-flex}.logo--block{align-items:center;display:flex}.logo--center{margin-left:auto;margin-right:auto}.logo--left{justify-content:flex-start}.logo--right{justify-content:flex-end}.logo--ink svg .logo-frame,.logo--ink svg .logo-rail{stroke:var(--color-logo-ink)}.logo--ink svg .logo-chevron{stroke:var(--color-logo-accent)}.logo--inverse svg .logo-frame,.logo--inverse svg .logo-rail{stroke:var(--color-logo-ink-inverse)}.logo--inverse svg .logo-chevron{stroke:var(--color-logo-accent-inverse)}.logo--pad-xs{padding:var(--space-2)}.logo--pad-sm{padding:var(--space-3)}.logo--pad-md{padding:var(--space-4)}.logo--pad-lg{padding:var(--space-6)}.logo--pad-xl{padding:var(--space-8)}
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Identity / Logo System
+ *
+ *  Responsibilities:
+ *    - Define the full SVG logo architecture (frame, rail, chevron, wordmark)
+ *    - Provide identity-level tokens: stroke weights, clearspace, minimum sizes,
+ *      letter-spacing, and size presets (XS–XXL)
+ *    - Implement color modes: ink, accent, mono, footer, inverse
+ *    - Support layout modes: horizontal, mark-only, inline/block alignment,
+ *      centering, left/right justification
+ *    - Ensure consistent visual behaviour for inline SVG logo components
+ *
+ *  System Notes:
+ *    - Themes must declare the full identity token set:
+ *        --color-logo-ink, --color-logo-accent, --color-logo-mono,
+ *        --color-logo-footer-ink, --color-logo-footer-accent,
+ *        --color-logo-ink-inverse, --color-logo-accent-inverse
+ *    - 100% token-driven: stroke, fill, sizes, spacing
+ *    - Pure CSS; no JS behaviour or measurement logic
+ *    - Works with inline SVG only; external <img> identity assets
+ *      must use static variants and cannot inherit these rules
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. ROOT IDENTITY TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-identity],
+.vds-identity {
+    --logo-stroke-primary: 2.75;
+    --logo-clearspace: 0.5;
+    --logo-min-horizontal: 24px;
+    --logo-min-mark: 16px;
+    --logo-primary-letter-spacing: 0.18em;
+    --logo-secondary-letter-spacing: 0.30em;
+    --logo-size-xs: 2.5rem;
+    --logo-size-sm: 3rem;
+    --logo-size-md: 3.75rem;
+    --logo-size-lg: 4.5rem;
+    --logo-size-xl: 5.5rem;
+    --logo-size-xxl: 6.5rem;
+    --logo-doc-height: 2.25rem;
+}
+
+/* ---------------------------------------------------------
+   2. BASE LOGO ARCHITECTURE
+   Targeting inline SVG: <svg class="logo ...>
+--------------------------------------------------------- */
+
+.logo {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+    font-size: 1rem;
+    padding: calc(var(--logo-clearspace) * 1em);
+    color: currentColor;
+    color: var(--color-logo-ink, currentColor);
+    height: var(--logo-size-sm);
+    width: auto;
+    overflow: visible;
+}
+
+.logo-wordmark {
+    fill: currentColor;
+    fill: var(--color-logo-ink, currentColor);
+}
+
+.logo-frame,
+.logo-rail,
+.logo-chevron {
+    fill: none !important;
+}
+
+.logo-frame,
+.logo-rail,
+.logo-chevron {
+    stroke-width: var(--logo-stroke-primary);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+}
+
+.logo-frame,
+.logo-rail {
+    stroke: currentColor;
+    stroke: var(--color-logo-ink, currentColor);
+}
+
+.logo-chevron {
+    stroke: currentColor;
+    stroke: var(--color-logo-accent, currentColor);
+}
+
+.logo-text-primary {
+    font-size: var(--text-sm);
+    letter-spacing: var(--logo-primary-letter-spacing);
+}
+
+.logo-text-secondary {
+    font-size: var(--text-xxxs);
+    letter-spacing: var(--logo-secondary-letter-spacing);
+}
+
+.logo-text-primary,
+.logo-text-secondary {
+    fill: currentColor;
+    fill: var(--color-logo-ink, currentColor);
+    font-family: var(--font-family-sans), sans-serif;
+}
+
+/* ---------------------------------------------------------
+   3. VARIANTS
+--------------------------------------------------------- */
+
+.logo--mono .logo-frame,
+.logo--mono .logo-rail,
+.logo--mono .logo-chevron {
+    stroke: var(--color-logo-mono) !important;
+}
+
+.logo--mono .logo-wordmark,
+.logo--mono .logo-text-primary,
+.logo--mono .logo-text-secondary {
+    fill: var(--color-logo-ink) !important;
+    stroke: none !important;
+}
+
+.logo--footer {
+    color: var(--color-logo-footer-ink);
+}
+
+.logo--footer .logo-frame,
+.logo--footer .logo-rail {
+    stroke: var(--color-logo-footer-ink);
+}
+
+.logo--footer .logo-chevron {
+    stroke: var(--color-logo-footer-accent);
+}
+
+.logo--footer .logo-wordmark,
+.logo--footer .logo-text-primary,
+.logo--footer .logo-text-secondary {
+    fill: var(--color-logo-footer-ink);
+}
+
+.logo--inverse .logo-frame,
+.logo--inverse .logo-rail {
+    stroke: var(--color-logo-ink-inverse) !important;
+}
+
+.logo--inverse .logo-chevron {
+    stroke: var(--color-logo-accent-inverse) !important;
+}
+
+.logo--inverse .logo-wordmark,
+.logo--inverse .logo-text-primary,
+.logo--inverse .logo-text-secondary {
+    fill: var(--color-logo-ink-inverse) !important;
+    stroke: none !important;
+}
+
+/* ---------------------------------------------------------
+   4. SIZING & LAYOUT
+--------------------------------------------------------- */
+
+.logo--horizontal {
+    min-height: var(--logo-min-horizontal);
+}
+
+.logo--mark-only {
+    min-height: var(--logo-min-mark);
+}
+
+.logo--xs {
+    height: var(--logo-size-xs);
+}
+
+.logo--sm {
+    height: var(--logo-size-sm);
+}
+
+.logo--md {
+    height: var(--logo-size-md);
+}
+
+.logo--lg {
+    height: var(--logo-size-lg);
+}
+
+.logo--xl {
+    height: var(--logo-size-xl);
+}
+
+.logo--xxl {
+    height: var(--logo-size-xxl);
+}
+
+.logo--inline {
+    display: inline-flex;
+    align-items: center;
+}
+
+.logo--block {
+    display: flex;
+    align-items: center;
+}
+
+.logo--center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.logo--left {
+    justify-content: flex-start;
+}
+
+.logo--right {
+    justify-content: flex-end;
+}
+
+/* ---------------------------------------------------------
+   5. LOGO COLOR MODE UTILITIES
+--------------------------------------------------------- */
+
+.logo--ink svg .logo-frame,
+.logo--ink svg .logo-rail {
+    stroke: var(--color-logo-ink);
+}
+
+.logo--ink svg .logo-chevron {
+    stroke: var(--color-logo-accent);
+}
+
+.logo--inverse svg .logo-frame,
+.logo--inverse svg .logo-rail {
+    stroke: var(--color-logo-ink-inverse);
+}
+
+.logo--inverse svg .logo-chevron {
+    stroke: var(--color-logo-accent-inverse);
+}
+
+/* ---------------------------------------------------------
+   6. LOGO CLEAR SPACE UTILITIES
+--------------------------------------------------------- */
+
+.logo--pad-xs {
+    padding: var(--space-2);
+}
+
+.logo--pad-sm {
+    padding: var(--space-3);
+}
+
+.logo--pad-md {
+    padding: var(--space-4);
+}
+
+.logo--pad-lg {
+    padding: var(--space-6);
+}
+
+.logo--pad-xl {
+    padding: var(--space-8);
+}