138 lines
4.3 KiB
JavaScript
138 lines
4.3 KiB
JavaScript
/**
|
|
* 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'),
|
|
],
|
|
}
|