@nice2dev/omniwerk-branding 1.0.28

package/README.md

@@ -0,0 +1,232 @@
+# @nice2dev/omniwerk-branding
+
+Official OmniWerk brand assets, logos, and theme for React applications.
+
+## Installation
+
+```bash
+npm install @nice2dev/omniwerk-branding
+# or
+pnpm add @nice2dev/omniwerk-branding
+```
+
+## Features
+
+- **Logo Components** — Icon, text, and combined logo variants
+- **Brand Colors** — Complete color palette with light/dark schemes
+- **Typography** — Anton SC font for headlines (SIL OFL 1.1 licensed)
+- **Theme Presets** — Ready-to-use themes for Tailwind, MUI, and CSS variables
+- **Animations** — Animated logo and loading spinner
+
+## Quick Start
+
+```tsx
+import { 
+  OmniWerkLogo, 
+  OmniWerkFontLoader, 
+  OMNIWERK_COLORS 
+} from '@nice2dev/omniwerk-branding';
+
+function App() {
+  return (
+    <>
+      {/* Load Anton SC font from Google Fonts */}
+      <OmniWerkFontLoader />
+      
+      {/* Logo with gradient */}
+      <OmniWerkLogo 
+        variant="horizontal" 
+        size="lg" 
+        gradient="brand" 
+      />
+    </>
+  );
+}
+```
+
+## Components
+
+### OmniWerkLogo
+
+Complete logo with icon and text.
+
+```tsx
+// Icon only
+<OmniWerkLogo variant="icon" />
+
+// Text only
+<OmniWerkLogo variant="text" />
+
+// Horizontal (default)
+<OmniWerkLogo variant="horizontal" size="lg" />
+
+// Vertical (stacked)
+<OmniWerkLogo variant="vertical" showTagline />
+
+// With gradient
+<OmniWerkLogo gradient="brand" />
+
+// Custom color
+<OmniWerkLogo color="#FF0000" />
+```
+
+### OmniWerkAnimatedLogo
+
+Logo with entrance and hover animations.
+
+```tsx
+<OmniWerkAnimatedLogo 
+  size="xl"
+  variant="vertical"
+  animate
+  pulseOnHover
+/>
+```
+
+### OmniWerkIcon
+
+Standalone icon component.
+
+```tsx
+<OmniWerkIcon size={48} gradient="primary" />
+```
+
+### OmniWerkText
+
+Text-only component with Anton SC font.
+
+```tsx
+<OmniWerkText fontSize={32} showTagline />
+```
+
+### OmniWerkLoadingSpinner
+
+Rotating logo as loading indicator.
+
+```tsx
+<OmniWerkLoadingSpinner size={48} gradient="brand" />
+```
+
+### OmniWerkSplash
+
+Full-screen splash screen.
+
+```tsx
+<OmniWerkSplash 
+  background="brand"
+  showTagline
+  onComplete={() => navigate('/home')}
+  duration={2000}
+/>
+```
+
+### OmniWerkFontLoader
+
+Loads Anton SC font from Google Fonts.
+
+```tsx
+// Add once at app root
+<OmniWerkFontLoader />
+```
+
+## Sizes
+
+| Size | Icon | Font | Spacing |
+|------|------|------|---------|
+| xs   | 16px | 10px | 4px     |
+| sm   | 24px | 14px | 6px     |
+| md   | 32px | 20px | 8px     |
+| lg   | 48px | 32px | 12px    |
+| xl   | 64px | 48px | 16px    |
+| xxl  | 96px | 72px | 24px    |
+
+## Colors
+
+```tsx
+import { OMNIWERK_COLORS } from '@nice2dev/omniwerk-branding';
+
+// Primary palette
+OMNIWERK_COLORS.primary      // #1A237E (Deep Blue)
+OMNIWERK_COLORS.primaryLight // #534BAE
+OMNIWERK_COLORS.primaryDark  // #000051
+
+// Secondary palette
+OMNIWERK_COLORS.secondary      // #00BCD4 (Cyan)
+OMNIWERK_COLORS.secondaryLight // #62EFFF
+OMNIWERK_COLORS.secondaryDark  // #008BA3
+
+// Semantic
+OMNIWERK_COLORS.success // #4CAF50
+OMNIWERK_COLORS.warning // #FF9800
+OMNIWERK_COLORS.error   // #F44336
+OMNIWERK_COLORS.info    // #2196F3
+```
+
+## Gradients
+
+```tsx
+import { OMNIWERK_GRADIENTS } from '@nice2dev/omniwerk-branding';
+
+// Available presets
+'primary'      // Deep blue gradient
+'secondary'    // Cyan gradient
+'brand'        // Primary to secondary
+'brandReverse' // Secondary to primary
+```
+
+## Theme Integration
+
+### CSS Variables
+
+```tsx
+import { OMNIWERK_CSS_VARS } from '@nice2dev/omniwerk-branding';
+
+// Add to your global styles
+<style>{OMNIWERK_CSS_VARS}</style>
+
+// Then use in CSS
+.my-element {
+  color: var(--omniwerk-primary);
+  background: var(--omniwerk-surface);
+  font-family: var(--omniwerk-font-logo);
+}
+```
+
+### Tailwind CSS
+
+```js
+// tailwind.config.js
+import { omniWerkTailwindPreset } from '@nice2dev/omniwerk-branding';
+
+export default {
+  presets: [omniWerkTailwindPreset],
+  // ...
+}
+```
+
+Then use the classes:
+
+```html
+<div class="bg-omniwerk-primary text-white">
+  <h1 class="font-omniwerk-logo">OMNIWERK</h1>
+</div>
+```
+
+### Material UI
+
+```tsx
+import { createTheme } from '@mui/material/styles';
+import { omniWerkMuiTheme, omniWerkMuiDarkTheme } from '@nice2dev/omniwerk-branding';
+
+const lightTheme = createTheme(omniWerkMuiTheme);
+const darkTheme = createTheme(omniWerkMuiDarkTheme);
+```
+
+## Font License
+
+The Anton SC font is licensed under the **SIL Open Font License, Version 1.1**.
+See [assets/fonts/OFL.txt](assets/fonts/OFL.txt) for the complete license.
+
+## License
+
+MIT © NiceToDev

package/assets/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Anton Project Authors (https://github.com/googlefonts/AntonFont.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/OmniWerkLogo.d.ts

@@ -0,0 +1,104 @@
+import { default as React, CSSProperties } from 'react';
+
+export type OmniWerkLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type OmniWerkLogoVariant = 'icon' | 'text' | 'horizontal' | 'vertical';
+export type OmniWerkGradientPreset = 'primary' | 'secondary' | 'brand' | 'brandReverse';
+export interface OmniWerkLogoProps {
+    /** Logo size preset */
+    size?: OmniWerkLogoSize;
+    /** Logo variant */
+    variant?: OmniWerkLogoVariant;
+    /** Custom color (overrides gradient) */
+    color?: string;
+    /** Use gradient fill */
+    gradient?: OmniWerkGradientPreset | false;
+    /** Show tagline */
+    showTagline?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** Click handler */
+    onClick?: () => void;
+    /** Accessible label */
+    'aria-label'?: string;
+}
+export interface OmniWerkIconProps {
+    size?: number;
+    color?: string;
+    gradient?: OmniWerkGradientPreset | false;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * OmniWerk icon - the stylized "O" with circuit pattern.
+ */
+export declare const OmniWerkIcon: React.ForwardRefExoticComponent<OmniWerkIconProps & React.RefAttributes<SVGSVGElement>>;
+export interface OmniWerkTextProps {
+    fontSize?: number;
+    color?: string;
+    showTagline?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * OmniWerk text using Anton SC font.
+ */
+export declare const OmniWerkText: React.ForwardRefExoticComponent<OmniWerkTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Complete OmniWerk logo with icon and text.
+ *
+ * @example
+ * ```tsx
+ * // Icon only
+ * <OmniWerkLogo variant="icon" />
+ *
+ * // Full horizontal logo
+ * <OmniWerkLogo variant="horizontal" size="lg" />
+ *
+ * // With gradient
+ * <OmniWerkLogo variant="horizontal" gradient="brand" />
+ * ```
+ */
+export declare const OmniWerkLogo: React.ForwardRefExoticComponent<OmniWerkLogoProps & React.RefAttributes<HTMLDivElement>>;
+export interface OmniWerkAnimatedLogoProps extends OmniWerkLogoProps {
+    /** Enable entrance animation */
+    animate?: boolean;
+    /** Pulse on hover */
+    pulseOnHover?: boolean;
+}
+/**
+ * Animated OmniWerk logo with entrance and hover effects.
+ */
+export declare const OmniWerkAnimatedLogo: React.ForwardRefExoticComponent<OmniWerkAnimatedLogoProps & React.RefAttributes<HTMLDivElement>>;
+export interface OmniWerkLoadingSpinnerProps {
+    size?: number;
+    color?: string;
+    gradient?: OmniWerkGradientPreset | false;
+}
+/**
+ * Loading spinner using the OmniWerk icon.
+ */
+export declare const OmniWerkLoadingSpinner: React.FC<OmniWerkLoadingSpinnerProps>;
+export interface OmniWerkSplashProps {
+    /** Background color or gradient */
+    background?: 'primary' | 'brand' | string;
+    /** Logo color (for contrast) */
+    logoColor?: string;
+    /** Show tagline */
+    showTagline?: boolean;
+    /** Callback when animation completes */
+    onComplete?: () => void;
+    /** Duration in ms */
+    duration?: number;
+}
+/**
+ * Full-screen splash with OmniWerk branding.
+ */
+export declare const OmniWerkSplash: React.FC<OmniWerkSplashProps>;
+/**
+ * Component that loads the Anton SC font from Google Fonts.
+ * Include once at the app root.
+ */
+export declare const OmniWerkFontLoader: React.FC;
+export default OmniWerkLogo;

package/dist/colors.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @file colors.ts
+ * @description OmniWerk brand colors
+ */
+/**
+ * OmniWerk brand color palette.
+ */
+export declare const OMNIWERK_COLORS: {
+    readonly primary: "#1A237E";
+    readonly primaryLight: "#534BAE";
+    readonly primaryDark: "#000051";
+    readonly secondary: "#00BCD4";
+    readonly secondaryLight: "#62EFFF";
+    readonly secondaryDark: "#008BA3";
+    readonly tertiary: "#FFC107";
+    readonly tertiaryLight: "#FFF350";
+    readonly tertiaryDark: "#C79100";
+    readonly success: "#4CAF50";
+    readonly warning: "#FF9800";
+    readonly error: "#F44336";
+    readonly info: "#2196F3";
+    readonly background: "#FAFAFA";
+    readonly surface: "#FFFFFF";
+    readonly onBackground: "#212121";
+    readonly onSurface: "#212121";
+    readonly outline: "#BDBDBD";
+    readonly surfaceVariant: "#E0E0E0";
+    readonly backgroundDark: "#121212";
+    readonly surfaceDark: "#1E1E1E";
+    readonly onBackgroundDark: "#E0E0E0";
+    readonly onSurfaceDark: "#E0E0E0";
+    readonly outlineDark: "#424242";
+    readonly surfaceVariantDark: "#2C2C2C";
+};
+/**
+ * OmniWerk gradient presets.
+ */
+export declare const OMNIWERK_GRADIENTS: {
+    readonly primary: {
+        readonly type: "linear";
+        readonly angle: 135;
+        readonly stops: readonly [{
+            readonly offset: 0;
+            readonly color: "#1A237E";
+        }, {
+            readonly offset: 100;
+            readonly color: "#534BAE";
+        }];
+    };
+    readonly secondary: {
+        readonly type: "linear";
+        readonly angle: 135;
+        readonly stops: readonly [{
+            readonly offset: 0;
+            readonly color: "#00BCD4";
+        }, {
+            readonly offset: 100;
+            readonly color: "#62EFFF";
+        }];
+    };
+    readonly brand: {
+        readonly type: "linear";
+        readonly angle: 135;
+        readonly stops: readonly [{
+            readonly offset: 0;
+            readonly color: "#1A237E";
+        }, {
+            readonly offset: 100;
+            readonly color: "#00BCD4";
+        }];
+    };
+    readonly brandReverse: {
+        readonly type: "linear";
+        readonly angle: 315;
+        readonly stops: readonly [{
+            readonly offset: 0;
+            readonly color: "#00BCD4";
+        }, {
+            readonly offset: 100;
+            readonly color: "#1A237E";
+        }];
+    };
+};
+export type OmniWerkColorKey = keyof typeof OMNIWERK_COLORS;
+export type OmniWerkGradientKey = keyof typeof OMNIWERK_GRADIENTS;

package/dist/fonts.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={logo:"'Anton SC', sans-serif",body:"'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",mono:"'Roboto Mono', 'Fira Code', monospace"},t="@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');",n=`
+@font-face {
+  font-family: 'Anton SC';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./assets/fonts/AntonSC-Regular.ttf') format('truetype');
+}
+`,e={xl:{fontSize:"72px",letterSpacing:"2px",fontFamily:o.logo,fontWeight:400},lg:{fontSize:"48px",letterSpacing:"1.5px",fontFamily:o.logo,fontWeight:400},md:{fontSize:"32px",letterSpacing:"1px",fontFamily:o.logo,fontWeight:400},sm:{fontSize:"20px",letterSpacing:"0.5px",fontFamily:o.logo,fontWeight:400},xs:{fontSize:"14px",letterSpacing:"0.25px",fontFamily:o.logo,fontWeight:400}};exports.OMNIWERK_FONTS=o;exports.OMNIWERK_FONT_FACE=n;exports.OMNIWERK_FONT_IMPORT=t;exports.OMNIWERK_LOGO_STYLES=e;

package/dist/fonts.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @file fonts.ts
+ * @description OmniWerk brand typography
+ *
+ * Anton SC font is licensed under SIL Open Font License 1.1.
+ * See assets/fonts/OFL.txt for full license text.
+ */
+/**
+ * OmniWerk font family names.
+ */
+export declare const OMNIWERK_FONTS: {
+    /** Anton SC font for logo and headlines (SIL OFL 1.1 license) */
+    readonly logo: "'Anton SC', sans-serif";
+    /** Body font */
+    readonly body: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+    /** Monospace font */
+    readonly mono: "'Roboto Mono', 'Fira Code', monospace";
+};
+/**
+ * CSS for loading Anton SC font from Google Fonts.
+ */
+export declare const OMNIWERK_FONT_IMPORT = "@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');";
+/**
+ * CSS for self-hosted Anton SC font.
+ * Use this if you want to bundle the font instead of loading from Google.
+ */
+export declare const OMNIWERK_FONT_FACE = "\n@font-face {\n  font-family: 'Anton SC';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url('./assets/fonts/AntonSC-Regular.ttf') format('truetype');\n}\n";
+/**
+ * Logo text style presets.
+ */
+export declare const OMNIWERK_LOGO_STYLES: {
+    readonly xl: {
+        readonly fontSize: "72px";
+        readonly letterSpacing: "2px";
+        readonly fontFamily: "'Anton SC', sans-serif";
+        readonly fontWeight: 400;
+    };
+    readonly lg: {
+        readonly fontSize: "48px";
+        readonly letterSpacing: "1.5px";
+        readonly fontFamily: "'Anton SC', sans-serif";
+        readonly fontWeight: 400;
+    };
+    readonly md: {
+        readonly fontSize: "32px";
+        readonly letterSpacing: "1px";
+        readonly fontFamily: "'Anton SC', sans-serif";
+        readonly fontWeight: 400;
+    };
+    readonly sm: {
+        readonly fontSize: "20px";
+        readonly letterSpacing: "0.5px";
+        readonly fontFamily: "'Anton SC', sans-serif";
+        readonly fontWeight: 400;
+    };
+    readonly xs: {
+        readonly fontSize: "14px";
+        readonly letterSpacing: "0.25px";
+        readonly fontFamily: "'Anton SC', sans-serif";
+        readonly fontWeight: 400;
+    };
+};
+export type OmniWerkLogoStyleSize = keyof typeof OMNIWERK_LOGO_STYLES;

package/dist/fonts.mjs

@@ -0,0 +1,53 @@
+const o = {
+  /** Anton SC font for logo and headlines (SIL OFL 1.1 license) */
+  logo: "'Anton SC', sans-serif",
+  /** Body font */
+  body: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  /** Monospace font */
+  mono: "'Roboto Mono', 'Fira Code', monospace"
+}, t = "@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');", n = `
+@font-face {
+  font-family: 'Anton SC';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./assets/fonts/AntonSC-Regular.ttf') format('truetype');
+}
+`, e = {
+  xl: {
+    fontSize: "72px",
+    letterSpacing: "2px",
+    fontFamily: o.logo,
+    fontWeight: 400
+  },
+  lg: {
+    fontSize: "48px",
+    letterSpacing: "1.5px",
+    fontFamily: o.logo,
+    fontWeight: 400
+  },
+  md: {
+    fontSize: "32px",
+    letterSpacing: "1px",
+    fontFamily: o.logo,
+    fontWeight: 400
+  },
+  sm: {
+    fontSize: "20px",
+    letterSpacing: "0.5px",
+    fontFamily: o.logo,
+    fontWeight: 400
+  },
+  xs: {
+    fontSize: "14px",
+    letterSpacing: "0.25px",
+    fontFamily: o.logo,
+    fontWeight: 400
+  }
+};
+export {
+  o as OMNIWERK_FONTS,
+  n as OMNIWERK_FONT_FACE,
+  t as OMNIWERK_FONT_IMPORT,
+  e as OMNIWERK_LOGO_STYLES
+};