round 1 of implementation of scaffold and design tokens
This commit is contained in:
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>MK Design System</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "mk-design-system",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.0.0",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.0",
|
||||||
|
"tailwindcss": "^4.0.0",
|
||||||
|
"vite": "^6.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Generated
+1190
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,2 @@
|
|||||||
|
allowBuilds:
|
||||||
|
esbuild: true
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-light font-sans text-dark antialiased">
|
||||||
|
<div class="max-w-7xl mx-auto px-8 py-16">
|
||||||
|
<h1 class="text-3xl font-bold mb-2">MK Design System</h1>
|
||||||
|
<p class="text-secondary">Phase 1 & 2 complete — components coming in Phase 3+</p>
|
||||||
|
|
||||||
|
<div class="mt-12 grid gap-4 grid-cols-2 lg:grid-cols-4">
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-primary text-white shadow-primary">
|
||||||
|
<p class="text-sm font-medium opacity-80">Primary gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#e91e63</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-secondary text-white shadow-secondary">
|
||||||
|
<p class="text-sm font-medium opacity-80">Secondary gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#7b809a</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-success text-white shadow-success">
|
||||||
|
<p class="text-sm font-medium opacity-80">Success gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#4caf50</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-info text-white shadow-info">
|
||||||
|
<p class="text-sm font-medium opacity-80">Info gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#1a73e8</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-warning text-white shadow-warning">
|
||||||
|
<p class="text-sm font-medium opacity-80">Warning gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#fb8c00</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-danger text-white shadow-danger">
|
||||||
|
<p class="text-sm font-medium opacity-80">Danger gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#f44335</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-dark text-white shadow-dark">
|
||||||
|
<p class="text-sm font-medium opacity-80">Dark gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#344767</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl p-6 bg-gradient-light text-dark shadow-soft-md">
|
||||||
|
<p class="text-sm font-medium opacity-60">Light gradient</p>
|
||||||
|
<p class="text-lg font-bold mt-1">#f0f2f5</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 flex flex-wrap gap-3">
|
||||||
|
<span class="text-sm font-medium text-dark">Shadows:</span>
|
||||||
|
<span class="px-4 py-2 bg-white rounded-lg shadow-soft-xs text-sm">soft-xs</span>
|
||||||
|
<span class="px-4 py-2 bg-white rounded-lg shadow-soft-sm text-sm">soft-sm</span>
|
||||||
|
<span class="px-4 py-2 bg-white rounded-lg shadow-soft-md text-sm">soft-md</span>
|
||||||
|
<span class="px-4 py-2 bg-white rounded-lg shadow-soft-lg text-sm">soft-lg</span>
|
||||||
|
<span class="px-4 py-2 bg-white rounded-lg shadow-blur text-sm">blur</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
+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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
tailwindcss(),
|
||||||
|
vue(),
|
||||||
|
],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user