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