Initial commit

2026-09-02 08:21:27 +02:00
commit 84eec0039e
609 changed files with 94880 additions and 0 deletions
@@ -0,0 +1,137 @@
+/**
+ * Tokeny designu wedlug systemu HydroNexis.
+ *
+ * Zrodlo: C:/Users/pzatorski/Documents/Z_SD/z_companies/hydronexis/HydroNexis_DesignSystem
+ * Kolory pochodza z oficjalnego logo: azure #2C8ABD (Hydro), navy #23415B (Nexis),
+ * highlight #8AC4DC. Neutralne sa chlodne, nigdy cieple szarosci.
+ *
+ * @type {import('tailwindcss').Config}
+ */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        // Hydro Azure, glowny kolor marki. 500 to dokladny kolor z logo.
+        blue: {
+          50: '#EAF4FA',
+          100: '#D0E7F3',
+          200: '#A9D3E9',
+          300: '#7CBEDD',
+          400: '#4FA4CE',
+          500: '#2C8ABD',
+          600: '#2272A0',
+          700: '#1C5B81',
+          800: '#1B4A6A',
+          900: '#173B55',
+          950: '#102A3D',
+        },
+        // Navy, druga farba marki, czyli "Nexis"
+        navy: {
+          400: '#355D7E',
+          500: '#2C5273',
+          600: '#284862',
+          700: '#23415B',
+          800: '#1B3349',
+          900: '#142839',
+        },
+        // Aqua, akcent uzywany oszczednie
+        aqua: {
+          50: '#E7F2F8',
+          100: '#D2EAF4',
+          200: '#B5D9EA',
+          300: '#8AC4DC',
+          400: '#5FB0D6',
+          500: '#2C97C8',
+          600: '#2179A6',
+          700: '#1C6088',
+        },
+        // Chlodne neutralne, podmieniaja domyslny slate Tailwinda
+        slate: {
+          0: '#FFFFFF',
+          25: '#F8FAFC',
+          50: '#F1F5F9',
+          100: '#E5EBF2',
+          200: '#D2DBE6',
+          300: '#B2BFCE',
+          400: '#889AAE',
+          500: '#61748B',
+          600: '#475569',
+          700: '#313F52',
+          800: '#1E2A3A',
+          900: '#0F1A28',
+        },
+        // Semantyka operacyjna: stany, nie ozdoby
+        ok: { 50: '#E7F6EE', 500: '#16935C', 600: '#0F7549' },
+        warn: { 50: '#FCF3E2', 500: '#D9870E', 600: '#B26B06' },
+        alarm: { 50: '#FCEBEB', 500: '#D8392F', 600: '#B22720' },
+        info: { 50: '#EAF4FA', 500: '#2C8ABD', 600: '#2272A0' },
+      },
+      fontFamily: {
+        sans: ['IBM Plex Sans', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
+        // dane liczbowe, identyfikatory, terminy
+        mono: ['IBM Plex Mono', 'ui-monospace', 'SF Mono', 'Menlo', 'monospace'],
+      },
+      fontSize: {
+        '2xs': ['11px', { lineHeight: '1.4' }],
+        xs: ['12px', { lineHeight: '1.4' }],
+        sm: ['14px', { lineHeight: '1.5' }],
+        base: ['16px', { lineHeight: '1.55' }],
+        lg: ['18px', { lineHeight: '1.5' }],
+        xl: ['22px', { lineHeight: '1.3' }],
+        '2xl': ['28px', { lineHeight: '1.25' }],
+        '3xl': ['36px', { lineHeight: '1.15' }],
+        '4xl': ['46px', { lineHeight: '1.1' }],
+      },
+      letterSpacing: {
+        tight: '-0.02em',
+        caps: '0.08em',
+      },
+      borderRadius: {
+        // umiarkowane zaokraglenia, enterprise a nie zabawka
+        sm: '6px',
+        DEFAULT: '8px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        '2xl': '24px',
+      },
+      boxShadow: {
+        // cienie z chlodnym odcieniem
+        xs: '0 1px 2px rgba(15,26,40,.06)',
+        sm: '0 1px 2px rgba(15,26,40,.06), 0 1px 3px rgba(15,26,40,.08)',
+        md: '0 2px 6px rgba(15,26,40,.06), 0 6px 16px rgba(15,26,40,.08)',
+        lg: '0 8px 24px rgba(15,26,40,.10), 0 2px 8px rgba(15,26,40,.06)',
+        xl: '0 18px 48px rgba(11,57,100,.16)',
+      },
+      transitionTimingFunction: {
+        // spokojny ruch, bez odbic i sprezyn
+        standard: 'cubic-bezier(.2,.6,.2,1)',
+        out: 'cubic-bezier(.16,.84,.44,1)',
+      },
+      transitionDuration: {
+        fast: '120ms',
+        base: '180ms',
+        slow: '260ms',
+      },
+      maxWidth: {
+        container: '1200px',
+      },
+      spacing: {
+        sidebar: '256px',
+        topbar: '60px',
+      },
+      backgroundImage: {
+        // gradienty wylacznie na momenty marki, nigdy pod tekstem
+        'gradient-hydro': 'linear-gradient(135deg, #23415B 0%, #2C8ABD 55%, #5FB0D6 100%)',
+        'gradient-depth': 'linear-gradient(180deg, #23415B 0%, #142839 100%)',
+      },
+    },
+  },
+  plugins: [
+    // Style dla tresci z edytora wizualnego (klasa `prose`). Dzieki temu
+    // naglowki, listy i cytaty maja sensowny wyglad bez pisania wlasnego CSS
+    // i bez dopuszczania atrybutu style w oczyszczanym HTML.
+    require('@tailwindcss/typography'),
+  ],
+}