Imported design export as-is (1/5)
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
{
|
||||
"plugins": [
|
||||
"react",
|
||||
"import"
|
||||
],
|
||||
"rules": {
|
||||
"react/forbid-elements": [
|
||||
"warn",
|
||||
{
|
||||
"forbid": []
|
||||
}
|
||||
],
|
||||
"no-restricted-imports": [
|
||||
"warn",
|
||||
{
|
||||
"patterns": [
|
||||
{
|
||||
"group": [
|
||||
"components/EzButton/**",
|
||||
"eazy-landing/**",
|
||||
"exports/eazy-math-diagnostic/**",
|
||||
"flashcards/**",
|
||||
"quiz-game-export/**",
|
||||
"quiz-game-server/**",
|
||||
"quiz-game/**",
|
||||
"quiz-game/dist/**",
|
||||
"quiz/**",
|
||||
"role-game/**",
|
||||
"tetri-psychometry-export/**",
|
||||
"tetri-psychometry/**",
|
||||
"tetri-vocab/**",
|
||||
"ui_kits/flyer/**",
|
||||
"ui_kits/web/**",
|
||||
"word-game/**",
|
||||
"workshop-followup/**",
|
||||
"workshop-followup/מקור-לעריכה/**"
|
||||
],
|
||||
"message": "Import design-system components from 'index.js', not component internals."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-restricted-syntax": [
|
||||
"warn",
|
||||
{
|
||||
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
|
||||
"message": "Raw hex color — use a design-system color token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/\\b\\d+px\\b/]",
|
||||
"message": "Raw px value — use a design-system spacing token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Avigul|Avigul Shadow|Almoni Neue Tzar|FbTamlilCondensed|Geomanist))/i]",
|
||||
"message": "Font not provided by the design system. Available: Avigul, Avigul Shadow, Almoni Neue Tzar, FbTamlilCondensed, Geomanist."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='EzButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|type|disabled|onClick|key|ref|className|style|children)$/]",
|
||||
"message": "<EzButton> doesn't accept that prop. Declared props: children, variant, type, disabled, onClick."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='EzButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|secondary|ghost|link)$/]",
|
||||
"message": "<EzButton> variant must be one of 'primary' | 'secondary' | 'ghost' | 'link'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='EzButton'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
|
||||
"message": "<EzButton> type must be one of 'button' | 'submit' | 'reset'."
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/index.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-restricted-imports": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"x-omelette": {
|
||||
"components": {
|
||||
"EzButton": {
|
||||
"replaces": []
|
||||
}
|
||||
},
|
||||
"tokens": [
|
||||
"--ez-bg-1",
|
||||
"--ez-bg-2",
|
||||
"--ez-bg-3",
|
||||
"--ez-bg-accent",
|
||||
"--ez-bg-cta",
|
||||
"--ez-danger",
|
||||
"--ez-fg-1",
|
||||
"--ez-fg-2",
|
||||
"--ez-fg-3",
|
||||
"--ez-fg-on-lavender",
|
||||
"--ez-fg-on-orange",
|
||||
"--ez-indigo",
|
||||
"--ez-indigo-deep",
|
||||
"--ez-ink",
|
||||
"--ez-ink-mute",
|
||||
"--ez-ink-soft",
|
||||
"--ez-lavender",
|
||||
"--ez-lavender-deep",
|
||||
"--ez-lavender-soft",
|
||||
"--ez-lavender-tint",
|
||||
"--ez-line",
|
||||
"--ez-link",
|
||||
"--ez-link-hover",
|
||||
"--ez-orange",
|
||||
"--ez-orange-deep",
|
||||
"--ez-orange-soft",
|
||||
"--ez-orange-tint",
|
||||
"--ez-paper",
|
||||
"--ez-paper-cool",
|
||||
"--ez-paper-warm",
|
||||
"--ez-success",
|
||||
"--ez-warning",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-en-disp",
|
||||
"--font-mono",
|
||||
"--font-shadow",
|
||||
"--leading-base",
|
||||
"--leading-loose",
|
||||
"--leading-snug",
|
||||
"--leading-tight",
|
||||
"--r-1",
|
||||
"--r-2",
|
||||
"--r-3",
|
||||
"--r-4",
|
||||
"--r-pill",
|
||||
"--shadow-1",
|
||||
"--shadow-2",
|
||||
"--shadow-3",
|
||||
"--sp-1",
|
||||
"--sp-10",
|
||||
"--sp-11",
|
||||
"--sp-2",
|
||||
"--sp-3",
|
||||
"--sp-4",
|
||||
"--sp-5",
|
||||
"--sp-6",
|
||||
"--sp-7",
|
||||
"--sp-8",
|
||||
"--sp-9"
|
||||
],
|
||||
"tokenKinds": {
|
||||
"--ez-orange": "color",
|
||||
"--ez-orange-deep": "color",
|
||||
"--ez-orange-soft": "color",
|
||||
"--ez-orange-tint": "color",
|
||||
"--ez-lavender": "color",
|
||||
"--ez-lavender-deep": "color",
|
||||
"--ez-lavender-soft": "color",
|
||||
"--ez-lavender-tint": "color",
|
||||
"--ez-indigo": "color",
|
||||
"--ez-indigo-deep": "color",
|
||||
"--ez-paper": "color",
|
||||
"--ez-paper-warm": "color",
|
||||
"--ez-paper-cool": "color",
|
||||
"--ez-line": "color",
|
||||
"--ez-ink": "color",
|
||||
"--ez-ink-soft": "color",
|
||||
"--ez-ink-mute": "color",
|
||||
"--ez-fg-1": "color",
|
||||
"--ez-fg-2": "color",
|
||||
"--ez-fg-3": "color",
|
||||
"--ez-fg-on-orange": "color",
|
||||
"--ez-fg-on-lavender": "color",
|
||||
"--ez-bg-1": "color",
|
||||
"--ez-bg-2": "color",
|
||||
"--ez-bg-3": "color",
|
||||
"--ez-bg-accent": "color",
|
||||
"--ez-bg-cta": "color",
|
||||
"--ez-link": "color",
|
||||
"--ez-link-hover": "color",
|
||||
"--ez-success": "color",
|
||||
"--ez-warning": "color",
|
||||
"--ez-danger": "color",
|
||||
"--sp-1": "spacing",
|
||||
"--sp-2": "spacing",
|
||||
"--sp-3": "spacing",
|
||||
"--sp-4": "spacing",
|
||||
"--sp-5": "spacing",
|
||||
"--sp-6": "spacing",
|
||||
"--sp-7": "spacing",
|
||||
"--sp-8": "spacing",
|
||||
"--sp-9": "spacing",
|
||||
"--sp-10": "spacing",
|
||||
"--sp-11": "spacing",
|
||||
"--r-1": "spacing",
|
||||
"--r-2": "spacing",
|
||||
"--r-3": "spacing",
|
||||
"--r-4": "spacing",
|
||||
"--r-pill": "spacing",
|
||||
"--shadow-1": "shadow",
|
||||
"--shadow-2": "shadow",
|
||||
"--shadow-3": "shadow",
|
||||
"--font-display": "font",
|
||||
"--font-body": "font",
|
||||
"--font-mono": "font",
|
||||
"--font-shadow": "shadow",
|
||||
"--font-en-disp": "font",
|
||||
"--leading-tight": "font",
|
||||
"--leading-snug": "font",
|
||||
"--leading-base": "font",
|
||||
"--leading-loose": "font"
|
||||
},
|
||||
"fontFamilies": [
|
||||
"Almoni Neue Tzar",
|
||||
"Avigul",
|
||||
"Avigul Shadow",
|
||||
"FbTamlilCondensed",
|
||||
"Geomanist"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,202 @@
|
||||
/* ==========================================================================
|
||||
eazy — colors & type foundations
|
||||
Hebrew-first, RTL. Brand built around the lowercase "eazy." wordmark
|
||||
and the orange "E" mark. Imagery is black & white; chrome is lavender + orange.
|
||||
========================================================================== */
|
||||
|
||||
/* ---------- Web fonts -------------------------------------------------- */
|
||||
@font-face {
|
||||
font-family: "Avigul";
|
||||
src: url("fonts/avigul-light-fm.otf") format("opentype");
|
||||
font-weight: 300; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avigul";
|
||||
src: url("fonts/avigul-regular-fm.otf") format("opentype");
|
||||
font-weight: 400; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avigul";
|
||||
src: url("fonts/avigul-bold.woff") format("woff"), url("fonts/avigul-bold-fm.otf") format("opentype");
|
||||
font-weight: 700; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avigul Shadow";
|
||||
src: url("fonts/avigul-shadow-fm.otf") format("opentype");
|
||||
font-weight: 700; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Almoni Neue Tzar";
|
||||
src: url("fonts/almoni-light.woff") format("woff"), url("fonts/almoni-neue-tzar-aaa-light.otf") format("opentype");
|
||||
font-weight: 300; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Almoni Neue Tzar";
|
||||
src: url("fonts/almoni-regular.woff") format("woff"), url("fonts/almoni-neue-tzar-aaa-regular.otf") format("opentype");
|
||||
font-weight: 400; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "FbTamlilCondensed";
|
||||
src: url("fonts/FbTamlilCondensedEng-Black.otf") format("opentype");
|
||||
font-weight: 900; font-style: normal; font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Geomanist";
|
||||
src: url("fonts/geomanist-regular.woff") format("woff"), url("fonts/Geomanist-Regular.otf") format("opentype");
|
||||
font-weight: 400; font-style: normal; font-display: swap;
|
||||
}
|
||||
|
||||
/* ---------- Color tokens ---------------------------------------------- */
|
||||
:root {
|
||||
/* Brand primaries */
|
||||
--ez-orange: #F37327; /* CTA, the "E" mark, brand highlight */
|
||||
--ez-orange-deep: #D55A12; /* hover / pressed orange */
|
||||
--ez-orange-soft: #FBD9C2; /* soft orange tint, decorative dots */
|
||||
--ez-orange-tint: #FFF1E7; /* page tint behind orange content */
|
||||
|
||||
/* Lavender — the "Z" pattern colour, large blocks behind imagery */
|
||||
--ez-lavender: #A9A4EC; /* hero shape, secondary CTAs */
|
||||
--ez-lavender-deep: #6E68C9; /* hover, link colour, headline accent */
|
||||
--ez-lavender-soft: #D9D6F4; /* softest hero block */
|
||||
--ez-lavender-tint: #EFEDFB; /* surface tint */
|
||||
|
||||
/* Indigo — heavy headlines (used on a few flyers) */
|
||||
--ez-indigo: #3F4197;
|
||||
--ez-indigo-deep: #292B6E;
|
||||
|
||||
/* Neutrals — paper, ink, dividers */
|
||||
--ez-paper: #FFFFFF;
|
||||
--ez-paper-warm: #F4F2EE; /* off-white background of most flyers */
|
||||
--ez-paper-cool: #EFEFF2; /* slate-tinted off-white */
|
||||
--ez-line: #E2E2E6; /* hairline */
|
||||
--ez-ink: #1A1A1A; /* body text */
|
||||
--ez-ink-soft: #4A4A4A; /* secondary text */
|
||||
--ez-ink-mute: #8A8A8A; /* tertiary, captions */
|
||||
|
||||
/* Semantic */
|
||||
--ez-fg-1: var(--ez-ink);
|
||||
--ez-fg-2: var(--ez-ink-soft);
|
||||
--ez-fg-3: var(--ez-ink-mute);
|
||||
--ez-fg-on-orange: #FFFFFF;
|
||||
--ez-fg-on-lavender:#1A1A1A;
|
||||
|
||||
--ez-bg-1: var(--ez-paper);
|
||||
--ez-bg-2: var(--ez-paper-warm);
|
||||
--ez-bg-3: var(--ez-paper-cool);
|
||||
--ez-bg-accent: var(--ez-lavender);
|
||||
--ez-bg-cta: var(--ez-orange);
|
||||
|
||||
--ez-link: var(--ez-lavender-deep);
|
||||
--ez-link-hover: var(--ez-orange-deep);
|
||||
|
||||
--ez-success: #2F8F5C;
|
||||
--ez-warning: #E0A21A;
|
||||
--ez-danger: #C8362A;
|
||||
|
||||
/* Spacing scale (4-based) */
|
||||
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
|
||||
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
|
||||
--sp-9: 56px; --sp-10: 72px; --sp-11: 96px;
|
||||
|
||||
/* Radii — tight; eazy uses sharp corners with mild rounding on cards */
|
||||
--r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 20px; --r-pill: 999px;
|
||||
|
||||
/* Elevation */
|
||||
--shadow-1: 0 1px 2px rgba(20, 20, 35, 0.06);
|
||||
--shadow-2: 0 6px 20px rgba(40, 30, 80, 0.08);
|
||||
--shadow-3: 0 18px 48px rgba(40, 30, 80, 0.14);
|
||||
|
||||
/* Type ramps */
|
||||
--font-display: "Avigul", "Almoni Neue Tzar", "Heebo", "Assistant", system-ui, sans-serif;
|
||||
--font-body: "Almoni Neue Tzar", "Avigul", "Heebo", "Assistant", system-ui, sans-serif;
|
||||
--font-mono: "Geomanist", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--font-shadow: "Avigul Shadow", "Avigul", sans-serif; /* outlined display variant */
|
||||
--font-en-disp: "FbTamlilCondensed", "Avigul", sans-serif; /* condensed English headline */
|
||||
|
||||
--leading-tight: 1.05;
|
||||
--leading-snug: 1.2;
|
||||
--leading-base: 1.45;
|
||||
--leading-loose: 1.7;
|
||||
}
|
||||
|
||||
/* ---------- Element-level type ---------------------------------------- */
|
||||
html { font-family: var(--font-body); color: var(--ez-fg-1); background: var(--ez-bg-2); }
|
||||
body { direction: rtl; } /* Hebrew default */
|
||||
|
||||
h1, .ez-h1 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: clamp(40px, 6vw, 88px);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ez-lavender); /* signature lavender headline */
|
||||
margin: 0;
|
||||
}
|
||||
h2, .ez-h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: clamp(28px, 3.6vw, 48px);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--ez-fg-1);
|
||||
margin: 0;
|
||||
}
|
||||
h3, .ez-h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
color: var(--ez-fg-1);
|
||||
margin: 0;
|
||||
}
|
||||
h4, .ez-h4 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
p, .ez-body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: var(--leading-base);
|
||||
color: var(--ez-fg-2);
|
||||
margin: 0;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
.ez-eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ez-orange);
|
||||
text-transform: none; /* Hebrew has no case */
|
||||
}
|
||||
.ez-tagline {
|
||||
/* "פשוט תצליחו." – the brand line. orange, bold, with the period. */
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
color: var(--ez-orange);
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.ez-caption {
|
||||
font-family: var(--font-body);
|
||||
font-size: 13px;
|
||||
color: var(--ez-fg-3);
|
||||
}
|
||||
code, .ez-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.94em;
|
||||
}
|
||||
|
||||
a, .ez-link {
|
||||
color: var(--ez-link);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color .15s ease, border-color .15s ease;
|
||||
}
|
||||
a:hover, .ez-link:hover {
|
||||
color: var(--ez-link-hover);
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
Binary file not shown.
@@ -0,0 +1,7 @@
|
||||
/* ==========================================================================
|
||||
eazy Design System — global entry stylesheet
|
||||
Consumers link THIS file. It pulls in the brand foundation (color tokens,
|
||||
type scale, @font-face). Per-game stylesheets (quiz.css, game.css, …) stay
|
||||
scoped to their own tools and are NOT global — link them only where used.
|
||||
========================================================================== */
|
||||
@import "colors_and_type.css";
|
||||
Reference in New Issue
Block a user