f436d87ca5
SPA zbudowane w React 19 + Vite 8 z pełnym zestawem funkcjonalności: autentykacja z 2FA, kreator rezerwacji, panel admina, analityka, GraphQL (Apollo Client + SchemaLink), React Query, Storybook, testy jednostkowe (Vitest + RTL) i e2e (Playwright).
119 lines
2.8 KiB
SCSS
119 lines
2.8 KiB
SCSS
@use 'variables' as *;
|
|
|
|
// ─── CSS Custom Properties (runtime theming) ──────────────────────────────────
|
|
|
|
:root {
|
|
--clr-bg: #{$gray-50};
|
|
--clr-surface: #ffffff;
|
|
--clr-surface-raised: #{$gray-100};
|
|
--clr-border: #{$gray-200};
|
|
--clr-text: #{$gray-900};
|
|
--clr-text-secondary: #{$gray-600};
|
|
--clr-text-muted: #{$gray-400};
|
|
--clr-primary: #{$primary-600};
|
|
--clr-primary-hover: #{$primary-700};
|
|
--clr-accent: #{$accent-500};
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--clr-bg: #{$gray-900};
|
|
--clr-surface: #{$gray-800};
|
|
--clr-surface-raised: #{$gray-700};
|
|
--clr-border: #{$gray-700};
|
|
--clr-text: #{$gray-100};
|
|
--clr-text-secondary: #{$gray-400};
|
|
--clr-text-muted: #{$gray-600};
|
|
--clr-primary: #{$primary-400};
|
|
--clr-primary-hover: #{$primary-300};
|
|
--clr-accent: #{$accent-400};
|
|
}
|
|
|
|
// ─── Reset ────────────────────────────────────────────────────────────────────
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: $font-family-base;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-normal;
|
|
line-height: $line-height-normal;
|
|
color: var(--clr-text);
|
|
background-color: var(--clr-bg);
|
|
transition: background-color $transition-base, color $transition-base;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a {
|
|
color: var(--clr-primary);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: var(--clr-primary-hover);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: $font-weight-semibold;
|
|
line-height: $line-height-tight;
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
h1 { font-size: $font-size-4xl; }
|
|
h2 { font-size: $font-size-3xl; }
|
|
h3 { font-size: $font-size-2xl; }
|
|
h4 { font-size: $font-size-xl; }
|
|
h5 { font-size: $font-size-lg; }
|
|
h6 { font-size: $font-size-base;}
|
|
|
|
// ─── Utilities ────────────────────────────────────────────────────────────────
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: $container-max-width;
|
|
margin-inline: auto;
|
|
padding-inline: $spacing-6;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|