round 1 of implementation of scaffold and design tokens
This commit is contained in:
+229
@@ -0,0 +1,229 @@
|
||||
/* ============================================================
|
||||
FONT FACES
|
||||
Font files live in /public/fonts/ — run the download step
|
||||
from the README before using this in production.
|
||||
============================================================ */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto/roboto-latin-300-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto/roboto-latin-500-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto/roboto-latin-900-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto-slab/roboto-slab-latin-400-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
src: url('/fonts/roboto-slab/roboto-slab-latin-700-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons Round';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
src: url('/fonts/material-icons-round/material-icons-round-all-400-normal.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TAILWIND v4
|
||||
============================================================ */
|
||||
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ============================================================
|
||||
DESIGN TOKENS
|
||||
All values exposed as CSS custom properties AND Tailwind
|
||||
utility classes automatically via the @theme directive.
|
||||
============================================================ */
|
||||
|
||||
@theme {
|
||||
/* ----------------------------------------------------------
|
||||
Colors
|
||||
Generates: bg-*, text-*, border-*, ring-*, etc.
|
||||
---------------------------------------------------------- */
|
||||
--color-primary: #e91e63;
|
||||
--color-secondary: #7b809a;
|
||||
--color-success: #4caf50;
|
||||
--color-warning: #fb8c00;
|
||||
--color-danger: #f44335;
|
||||
--color-info: #1a73e8;
|
||||
--color-light: #f0f2f5;
|
||||
--color-dark: #344767;
|
||||
|
||||
--color-gray-100: #f8f9fa;
|
||||
--color-gray-200: #f0f2f5;
|
||||
--color-gray-300: #dee2e6;
|
||||
--color-gray-500: #adb5bd;
|
||||
--color-gray-600: #6c757d;
|
||||
--color-gray-900: #212529;
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Typography
|
||||
--font-* → font-* utilities
|
||||
---------------------------------------------------------- */
|
||||
--font-sans: Roboto, Helvetica, Arial, sans-serif;
|
||||
--font-serif: 'Roboto Slab', serif;
|
||||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Shadows
|
||||
--shadow-* → shadow-* utilities
|
||||
|
||||
soft-* palette: neutral depth shadows
|
||||
colored palette: signature glow for gradient cards/buttons
|
||||
---------------------------------------------------------- */
|
||||
--shadow-soft-xs: 0 2px 9px -5px rgba(0, 0, 0, 0.15);
|
||||
--shadow-soft-sm: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
|
||||
--shadow-soft-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-soft-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-blur: 0 20px 27px rgba(0, 0, 0, 0.05);
|
||||
|
||||
--shadow-primary: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
|
||||
--shadow-secondary: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(210, 210, 210, 0.4);
|
||||
--shadow-success: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
|
||||
--shadow-warning: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(251, 140, 0, 0.4);
|
||||
--shadow-danger: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
|
||||
--shadow-info: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(26, 115, 232, 0.4);
|
||||
--shadow-dark: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(64, 64, 64, 0.4);
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Border Radius
|
||||
--radius-* → rounded-* utilities
|
||||
xs is the only addition; sm–2xl match Tailwind defaults.
|
||||
---------------------------------------------------------- */
|
||||
--radius-xs: 0.1rem;
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
Gradients
|
||||
195deg is the kit's signature angle — do not change.
|
||||
--background-image-* → bg-* utilities
|
||||
---------------------------------------------------------- */
|
||||
--background-image-gradient-primary: linear-gradient(195deg, #ec407a, #d81b60);
|
||||
--background-image-gradient-secondary: linear-gradient(195deg, #747b8a, #495361);
|
||||
--background-image-gradient-success: linear-gradient(195deg, #66bb6a, #43a047);
|
||||
--background-image-gradient-warning: linear-gradient(195deg, #ffa726, #fb8c00);
|
||||
--background-image-gradient-danger: linear-gradient(195deg, #ef5350, #e53935);
|
||||
--background-image-gradient-info: linear-gradient(195deg, #49a3f1, #1a73e8);
|
||||
--background-image-gradient-dark: linear-gradient(195deg, #42424a, #191919);
|
||||
--background-image-gradient-light: linear-gradient(195deg, #ebeff4, #ced4da);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
BASE LAYER
|
||||
============================================================ */
|
||||
|
||||
@layer base {
|
||||
/* Maps the .material-icons class to the self-hosted font */
|
||||
.material-icons {
|
||||
font-family: 'Material Icons Round';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
UTILITIES LAYER
|
||||
Custom utilities that can't be expressed as a single
|
||||
@theme token.
|
||||
============================================================ */
|
||||
|
||||
@layer utilities {
|
||||
/* Gradient text — combine with a bg-gradient-* class */
|
||||
.text-gradient {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Rotating card — CSS 3D flip container */
|
||||
.rotating-card-container {
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.rotating-card-container:hover .card-rotate {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card-rotate {
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-rotate .front,
|
||||
.card-rotate .back {
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.card-rotate .back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* Move on hover — interactive card lift */
|
||||
.move-on-hover {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.move-on-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user