/* ============================================================ ERP design tokens This file is written once and 400 screens consume it. No screen defines its own colour, spacing or font size — it only reads these variables. Subject: Turkish SME accounting. The user looks at the screen 8 hours a day and reads number columns. Every decision derives from here. ============================================================ */ /* ---------------------------------------------------------- FONTS INSIDE THE ARTEFACT (K-237) There was an `@import url('https://fonts.googleapis.com/…')` here. For the on-prem customer on a closed network that request never returns and the text SILENTLY fell back to the system font: SaaS and on-prem were «the same artefact» but two different looks. `@import` also held the first paint and downloaded 76 face definitions (Cyrillic, Greek, Vietnamese included) — six were used. Now only latin + latin-ext (Turkish `ı ğ ş İ` are here), 12 woff2, 342 KB. With `unicode-range` the browser downloads only the file whose characters actually appear on screen. With variable fonts one file carries all the weights (`font-weight: 400 600`). Licence: SIL OFL 1.1 — `../fonts/OFL.txt`. ---------------------------------------------------------- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/geist-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------- THE ICON FONT IS A SUBSET (K-308) Radzen's stylesheet declares 'Material Symbols' from its own 1 MB file. This face has the SAME family, style and weight range and comes later, so the browser takes this one and never fetches Radzen's: a font face is downloaded only when it is the one in use. The file holds the names the framework, the designer's catalogue and Radzen itself draw (23 KB); a product's publish regenerates it with the product's own names (src/Rax.Sdk/tools/rax-icons.ps1). An icon outside the subset shows as text — the same as a misspelt name does today (K-018). ---------------------------------------------------------- */ @font-face { font-family: 'Material Symbols'; font-style: normal; font-weight: 100 700; font-display: block; src: url('../fonts/material-symbols-subset.woff2') format('woff2'); } :root { /* ---------------------------------------------------------- TYPOGRAPHY IBM Plex Sans: designed for corporate data interfaces, has true tabular figures, complete Turkish diacritics (`ı ğ ş ç ö ü İ`). Unlike Inter its digits are narrow and distinguishable. IBM Plex Mono: code, invoice no, customer code, tax number. Identifiers are compared by eye — without monospace '1000012' and '1000021' look the same. ---------------------------------------------------------- */ --font-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; /* The scale is small on purpose. An ERP has no hero, it has data. 16px body text is a waste of room in an ERP grid. */ --fs-caption: 11px; /* column header, help text */ --fs-dense: 12px; /* compact grid */ --fs-body: 13px; /* default grid, form label */ --fs-input: 14px; /* form input — readability matters here */ --fs-section: 15px; /* panel title */ --fs-page: 18px; /* screen title. Nothing above it. */ --lh-tight: 1.25; --lh-body: 1.45; /* Two weights. A third breaks consistency. */ --fw-normal: 400; --fw-medium: 500; /* ---------------------------------------------------------- NUMBER ALIGNMENT — the single most important decision With proportional figures in financial columns the digits do not line up vertically and the eye cannot follow the total. These three lines decide the readability of the whole ERP. ---------------------------------------------------------- */ --num-variant: tabular-nums; --num-align: right; --num-font: var(--font-ui); /* ---------------------------------------------------------- SPACING — 4px based An 8px base is too coarse for dense interfaces. ---------------------------------------------------------- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; /* ---------------------------------------------------------- CORNER RADIUS Small. An ERP with 16px rounded corners looks like a toy and steals room from the row height. ---------------------------------------------------------- */ --r-control: 4px; --r-card: 6px; /* ---------------------------------------------------------- COLOUR Not warm cream: it tires the eye looking at a dense number table for 8 hours. Cool neutral grey with a slight blue cast. The accent is ink blue. Reason: in the grid it stands next to red (negative) and green (positive). An orange or red accent would clash with them. Not the default SaaS blue (#3B82F6) either — darker, less bright. ---------------------------------------------------------- */ --c-canvas: #F6F7FA; /* page background */ --c-surface: #FFFFFF; /* card, grid, panel */ --c-surface-2:#F9FAFC; /* zebra row, header strip */ /* TOUCH FEEDBACK IS A SEPARATE TOKEN (K-221). `--c-surface-2` had TWO JOBS and they were counted: in twenty places a STANDING surface (header strip, modal title, badge, board column, designer panel), in twelve places a feedback that appears ON HOVER (button, search result, tree row, index row, grid row). Until now both had the same value and that was a coincidence, not a decision: "strip" and "the mouse is here" do not say the same thing. When a design with an all-white background (Ferah) wanted to remove the strip the difference became measurable — pulling `--c-surface-2` to white would have SILENTLY killed all twelve feedbacks. The default is `--c-surface-2`, so not one pixel changes in any of the eight designs. What is split is not a colour but a RESPONSIBILITY; the colour only diverges in the design that needs it. The token counterpart of `CssCollisionTests`'s lesson: do not use the same name for two different jobs. */ --c-touch: var(--c-surface-2); /* THE CARD'S FILL IS A SEPARATE TOKEN TOO (K-306). `--c-canvas` had two jobs and they were counted: 24 background readers, 14 painting the CARD (list and record card, the grid inside it — background, stripe, hover, frozen cells, header — and the two designer canvases that show the real card) and 10 painting the DESK (`.rz-body`, the tab strip's arrows and notch, the plain setup pages, the sign-in messages, Radzen's neutral scale). Since K-087 both are the same colour on purpose: «the screen's only background is the canvas». That stays the default, so not one pixel changes in the ten designs that had it. «Kurumsal» is the first design that wants a white card on a grey desk, and pulling the canvas to white would have painted the desk white too (Beyaz's answer, not this one's). The same split as `--c-touch` in K-221: a responsibility, not a colour. Lines and the tertiary ink still derive from the canvas. */ --c-card: var(--c-canvas); /* ---------------------------------------------------------- WORKBENCH — the surface UNDER the canvas (K-196) In the designer the canvas shows the real record card, so its background MUST BE `--c-canvas` (K-191). But the application's body uses the same token and when the two come side by side the measurement gave: canvas ↔ page contrast 1.00 (light and dark theme) So the preview surface did NOT separate from the background at all. Changing the canvas colour would break what is right; what changes is the surface put UNDER it. The paper keeps its colour, the desk gets darker. ONE DEFINITION IS ENOUGH FOR EIGHT DESIGNS AND THE DARK THEME: the value derives from `--c-canvas` and that token is rewritten in every design. The direction is the same in both themes — the workbench is always darker than the canvas, so the paper is always on top. The K-117 way. */ --c-desk: oklch(from var(--c-canvas) calc(l - 0.03) c h); /* ---------------------------------------------------------- LINES DERIVE FROM THE BACKGROUND These two values were hand picked and their reference was WHITE. When the screen's background moved to the canvas (K-087/K-088) the reference shifted and the lines became invisible — measured, contrast **1.16**. Field frame, card border, row divider: all three had that value, so every line carrying the structure had vanished. Now they derive from the background: ink is mixed into the canvas at a set ratio. Three gains — 1. When the background changes the line follows by itself; the same defect is not born again. 2. Every design uses ITS OWN ink and canvas, so the yellowish theme's line stays warm, the green's greenish. Six hand-picked values were deleted; identity was not lost, it was derived. 3. In the dark theme the direction turns by itself: there the ink is light, the canvas dark — the mix comes out LIGHTER than the background. The ratios were chosen by measurement (contrast against the canvas): 16% → 1.40 hairline divider: visible but quiet 26% → 1.75 emphasised edge: the line framing a field ---------------------------------------------------------- */ --c-line: color-mix(in srgb, var(--c-ink) 16%, var(--c-canvas)); --c-line-2: color-mix(in srgb, var(--c-ink) 26%, var(--c-canvas)); /* THE FIELD FRAME IS SEPARATE AND LIGHTER. The field frame used `--c-line-2` (26%) — the same weight as the table grid's most emphasised line. In a nine-field form, nine boxes became the thing consuming the most ink on the screen; what is to be read is the VALUES, not the frames. A separate token, because the grid line and the field frame are NO LONGER the same thing: in the grid the line carries the structure (where each cell ends), in the form the field is already separated by its label and the line only says "this is writable". Two tiers (contrast measured in the browser, against the canvas): 10% → 1.23 writable field (was 26% → 1.75) 6% → 1.13 read-only field (was 16% → 1.40) The tier difference was KEPT, both went down: a read-only field is still fainter than a writable one, so K-090's "mark it with the line" decision was not broken — only the volume was turned down. */ --c-field-line: color-mix(in srgb, var(--c-ink) 10%, var(--c-canvas)); --c-field-line-soft: color-mix(in srgb, var(--c-ink) 6%, var(--c-canvas)); --c-ink: #14161C; /* primary text */ --c-ink-2: #596173; /* ikincil */ /* TERTIARY INK DERIVES FROM THE BACKGROUND TOO — and this reverts K-075. K-075 had MEASURED that the tertiary ink was below WCAG's 4.5 threshold in all four designs but had not fixed it: "each is part of its own identity" was said and only the new design (Duru) was built to meet the threshold. Two things invalidated that decision: 1. The background moved from white to the canvas (K-087). Measured, all four dropped further — Klasik 3.16 → **2.95**. 2. The user reported that legibility was gone. Hint, placeholder, section title and read-only field label are all this colour and all 11px. Now it derives from the background: 63% ink. The ratio was found by measurement — 60% was tried and stayed at 4.31-4.35 in three designs, i.e. just BELOW the threshold. The ratio was chosen for the hardest design; "passes in most" is not enough, because the user looks at their own design. The measured result is **4.5+** in all five designs and the colour still comes from the design's own ink, so yellowish stays warm, greenish stays green. Identity kept, threshold met — the dilemma read as "either identity or threshold" in K-075 never existed. Duru's hand-picked value was deleted too: the formula already gives the place it aimed for and one rule must not be written twice. */ --c-ink-3: color-mix(in srgb, var(--c-ink) 63%, var(--c-canvas)); /* THE DESIGN'S IDENTITY HUE — the ONLY input of the dark theme. Each of the eight designs fills this with its own accent (Klasik's is here). The dark theme derives the whole palette — background, ink, accent family, strip, brand — from it; one block plus one line per design instead of eight palettes. NOTHING READS IT IN THE LIGHT THEME. The values here are hand picked and their contrast measured; the derivation does not replace them. The hue's only job is telling the dark side "which colour this design is". */ --c-hue: #33406F; --c-accent: #33406F; /* selected row, link, focus */ --c-accent-2: #465489; /* hover */ --c-accent-dk:#263157; /* pressed */ --c-accent-bg:#ECEFF7; /* The top strip is SLIGHTLY BLUISH — the same family as the selection tone. A decision of HUE, not saturation: lightness stays where the neutral grey is, only the colour axis shifts towards `--c-accent-bg`. So the strip is still a quiet frame but speaks the same language as the active menu item and the selected grid row — the user sees the same blue in three places. It was dark navy first and was DROPPED: a saturated block always sitting at the top of the screen both added weight and competed with the content below. The tone here does not replace it — the saturated spot is still in one place only, the brand (`--c-brand`). */ --c-header: #EEF1F8; --c-header-2: #E2E6F1; /* hover inside the strip */ --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); /* The divider is on the blue axis too: a neutral grey line looks dirty under the bluish strip. */ --c-header-line: #D4DAEA; /* The brand's navy tone — the one place carrying the identity while the strip turns grey. */ --c-brand: #202742; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* WHAT IS WRITTEN ON A FILLED BACKGROUND IS A TOKEN TOO. `color: #FFFFFF` was written in seven places — primary button, active page number, selected pane, destructive button, brand mark — and all shared the same silent assumption: THE BACKGROUND BELOW IS DARK. In the dark theme the accent is a light tone; white text there has a contrast of 1.9 and cannot be read. The value became a token: white in the light theme, the background's own ink in the dark one. The rule stayed the same — "contrasting ink on a filled background" — only what the contrast is got tied to the theme. */ --c-on-accent: #FFFFFF; --c-on-neg: #FFFFFF; --c-on-pos: #FFFFFF; --c-on-flag: #FFFFFF; /* The sign of the number sets the colour, not the column. The credit column is NOT made green, the debit column NOT red — the sign of the balance decides. */ --c-neg: #B3261E; /* negative balance, debit */ --c-neg-dk: #8C1D17; /* pressed/hovered destructive action */ --c-pos: #1E6B4F; /* pozitif bakiye, alacak */ --c-flag: #8A5A00; /* migration flag, warning */ --c-flag-bg: #FBF1DC; /* ---------------------------------------------------------- ELEVATION In an ERP a shadow is not decoration but a LAYER statement: it says what is on the paper and what is in the air. Three tiers are enough — surface, dropdown, modal. Material's coloured and deep shadows make a corporate interface look like a toy. ---------------------------------------------------------- */ /* THE SCRIM, EDGE SHADOW AND INNER LIGHT ARE TOKENS TOO. All three were fixed in shell.css and all three assumed "the background is light": a dark navy scrim is invisible in the dark theme (already dark), a white inner light is right on a dark strip and too bright on a light one. They sit in the same box as the shadow tiers because they do the same job: they state a LAYER. */ --c-scrim: rgba(16, 22, 44, 0.22); --c-gloss: rgba(255, 255, 255, 0.06); --c-gloss-2:rgba(255, 255, 255, 0.22); --c-edge: rgba(16, 22, 44, 0.18); --sh-1: 0 1px 2px rgba(20, 28, 52, 0.05); --sh-2: 0 2px 6px rgba(20, 28, 52, 0.08), 0 1px 2px rgba(20, 28, 52, 0.05); --sh-3: 0 12px 32px rgba(20, 28, 52, 0.14), 0 2px 8px rgba(20, 28, 52, 0.07); /* ---------------------------------------------------------- MOTION — THREE TIERS, THREE JOBS (K-240) 90ms is not seen but it is FELT: the colour settles into place instead of jumping. Anything longer reads as lag on a dense screen — the accountant clicks hundreds of rows an hour. One duration carried three jobs and in five places the duration was written by hand instead of the token (90 ×3, 120, 160 ×2). The tiers were named by JOB, not by DURATION (K-221's question: how many jobs does this token have?): --motion TOUCH colour, border, shadow, opacity --motion-panel PANEL a surface opening/sliding: dialog, settings panel, scrim --motion-screen SCREEN a screen's entrance: tab change, form opening, skeleton appearing The screen entrance is ONLY an entrance: there is no exit (when a tab closes the screen goes at once — waiting reads as lag). Layout (height, width) is NEVER animated: a grid with jumping rows cannot be read. The entrance is opacity and a 4-pixel shift — neither touches layout. Durations are not written by hand: `MotionDurationTests`. ---------------------------------------------------------- */ --motion: 90ms; --motion-panel: 160ms; --motion-screen: 180ms; --motion-ease: cubic-bezier(0.2, 0.6, 0.35, 1); /* Radzen's dialog uses the same tier too (its own value was 0.1s). */ --rz-dialog-transition: var(--motion-panel) var(--motion-ease); /* Shell sizes */ --nav-w: 15rem; /* The strip height is px, NOT rem: the frame must not move with the density tier (see the top strip section of shell.css). 46 → 42. The tallest thing inside is the 24px search box; at 42 there are 9 pixels above and below it, so the strip still breathes but gives 4px back to the screen. Any lower would stick the box to the edges. */ --header-bar-h: 42px; /* ---------------------------------------------------------- FOCUS The accountant does not use a mouse, they move with Tab. The focus ring is not an accessibility ornament but the primary navigation tool. ---------------------------------------------------------- */ --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); /* ---------------------------------------------------------- DENSITY — default: normal The accountant wants 40 rows on screen, the field user 12. Same screen, different token. No rewrite. ---------------------------------------------------------- */ --row-h: 34px; --cell-px: 10px; --fs-table: var(--fs-body); --header-h: 32px; --form-gap: var(--sp-4); /* The form's OWN inner padding — NOT `--pad`. `--pad` also feeds the list card and drops to 4px in the compact tier: right for the list (rows are gained), wrong for the form. Measured: the field frames started 4px from the card's edge and the section divider came right out of the edge — the form looked clipped. The same reason as `--form-gap`, one level out: a list is READ, a form is FILLED IN. */ --form-pad: var(--sp-5); /* Spacing between items and panel inner padding. Bound to Radzen's --rz-gap / --rz-fieldset-padding variables; no fixed Gap is written in components any more. */ --gap: var(--sp-3); --pad: var(--sp-4); --btn-px: var(--sp-4); /* A tab carries its own size, NOT the row height. A tab is a navigation item; there is no reason for it to take as much room as a data row, and across fifteen tabs the difference is one row. THE BREATHING ROOM IS VERTICAL, NOT HORIZONTAL. The cramped look was first attacked by growing the horizontal padding; the strip relaxed but fifteen tabs no longer fit on screen — horizontal padding is paid twice per tab and quickly overflows the strip. Vertical space is a FIXED cost: paid once however many tabs there are. So the height grew and the horizontal padding stepped back one notch. */ --tab-h: 40px; --tab-px: var(--sp-4); /* The COMMAND STRIP on top. It holds the search box and buttons, so it needs room for one input's height. The pager is NO LONGER FED FROM HERE: it closes the grid, it is not the card's frame — it must be the same height as the column header (--header-h). While both were one token the bottom strip came out as thick as the top and the grid sat between two frames of different weight. */ --bar-h: calc(var(--row-h) + var(--sp-4)); /* Scrollbar thickness. Thin: the bar is scaffolding, not data. Radzen's `--rz-scrollbar-size` variable is fed from this too (shell.css), so the number lives in one place. */ --sb-w: 8px; /* Between the shell and the content. This is the ONLY space between the tab strip, the sidebar and the content card — one lever instead of three paddings, otherwise compactness is tuned by hand in every tier. */ --shell-gap: var(--sp-3); } /* ---------------------------------------------------------- DESIGNS The Klasik design is the root values themselves. The other designs keep the same sizes and change the colour and type axes; the screen layout is not affected by this key. ---------------------------------------------------------- */ [data-design='dynamic'] { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; --num-font: var(--font-ui); --c-canvas: #F5F8F6; --c-surface: #FFFFFF; --c-surface-2:#F9FBFA; /* Lines derive from canvas+ink (see :root) — there is NO hand-picked value, the design's own tone is kept. */ --c-ink: #15211B; --c-ink-2: #58685F; /* Tertiary ink is derived (see :root). */ /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #2E6F62; --c-accent: #2E6F62; --c-accent-2: #3F8375; --c-accent-dk:#24574D; --c-accent-bg:#E4F1ED; --c-header: #EAF3EF; --c-header-2: #DDEBE6; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #C7DCD5; --c-brand: #23443E; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); --c-neg: #B42318; --c-neg-dk: #8A1C14; --c-pos: #16784B; --c-flag: #9A6A00; --c-flag-bg: #FFF4D6; --sh-1: 0 1px 2px rgba(20, 50, 44, 0.05); --sh-2: 0 2px 6px rgba(20, 50, 44, 0.08), 0 1px 2px rgba(20, 50, 44, 0.05); --sh-3: 0 12px 32px rgba(20, 50, 44, 0.14), 0 2px 8px rgba(20, 50, 44, 0.07); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } [data-design='yellowish'] { --c-canvas: #FBF8EF; --c-surface: #FFFFFF; --c-surface-2:#FCF5E4; /* Lines are derived (see :root). */ --c-ink: #221D14; --c-ink-2: #625946; /* Tertiary ink is derived (see :root). */ /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #765D2A; --c-accent: #765D2A; --c-accent-2: #8D7136; --c-accent-dk:#5D481E; --c-accent-bg:#F2E8D0; --c-header: #F3EAD8; --c-header-2: #E9DCC2; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #D6C7A8; --c-brand: #473A20; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); --c-neg: #A33A2C; --c-neg-dk: #7F2D23; --c-pos: #376B42; --c-flag: #765D2A; --c-flag-bg: #F2E8D0; --sh-1: 0 1px 2px rgba(70, 55, 28, 0.05); --sh-2: 0 2px 6px rgba(70, 55, 28, 0.08), 0 1px 2px rgba(70, 55, 28, 0.05); --sh-3: 0 12px 32px rgba(70, 55, 28, 0.14), 0 2px 8px rgba(70, 55, 28, 0.07); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } [data-design='grayish'] { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; --num-font: var(--font-ui); --c-canvas: #F5F5F2; --c-surface: #FFFFFF; --c-surface-2:#F8F8F6; /* Lines are derived (see :root). */ --c-ink: #1D1D1B; --c-ink-2: #5D5D58; /* Tertiary ink is derived (see :root). */ /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #5A5F66; --c-accent: #5A5F66; --c-accent-2: #474C52; --c-accent-dk:#33383E; --c-accent-bg:#EBEBE7; --c-header: #EFEFEB; --c-header-2: #E5E4DF; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #D8D6CF; --c-brand: #2F3134; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); --c-neg: #A23B35; --c-neg-dk: #7E2E29; --c-pos: #35705A; --c-flag: #7A5B19; --c-flag-bg: #F1E8D4; --sh-1: 0 1px 2px rgba(28, 29, 30, 0.05); --sh-2: 0 2px 6px rgba(28, 29, 30, 0.08), 0 1px 2px rgba(28, 29, 30, 0.05); --sh-3: 0 12px 32px rgba(28, 29, 30, 0.13), 0 2px 8px rgba(28, 29, 30, 0.06); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } /* ------------------------------------------------------------ DURU — a design built on the readability axis The other four pick a COLOUR IDENTITY and keep the sizes. This one was built the other way round: first the text contrast was targeted, the colour was chosen after. THE DEFECT WAS MEASURED. In Klasik the tertiary ink (`--c-ink-3`, #8991A2) on white is **3.2:1** — placeholder, hint, field label and grid header are all that colour and below the 4.5 WCAG asks for small text. At 11px that is not "quiet" but FADED. In Duru no text colour is below the 4.5 threshold; the measurements are below. The colour axis is BLUE. Red (negative) and green (positive) are already in the grid — the accent must not clash with them; this rule is written in Klasik and holds here too. The difference from Klasik's navy (#33406F) is not hue but SATURATION: the navy was muted to stay quiet, the accent here really announces the selected row and focus. TYPE: Inter. Designed for small-size UI, complete Turkish diacritics, a real `tnum`. The "unlike Inter" note at the top of the file was about digit DISTINGUISHABILITY and it is met here in two ways: `tnum` is on across the interface (date, quantity, amount columns align) and IDENTIFIERS are still mono — `--font-code` did not change, customer code and tax number are still IBM Plex Mono. ------------------------------------------------------------ */ [data-design='duru'] { --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; --num-font: var(--font-ui); /* The background was pulled one notch from neutral grey towards blue. Sharing the accent's axis makes the shell read as one piece; the lightness stays where the neutral is. */ --c-canvas: #F2F5F9; --c-surface: #FFFFFF; --c-surface-2:#F7F9FC; /* The line looks drawn with a pencil: visible but not ink. */ /* Lines are derived (see :root). */ /* Measured, on white: 18.3 / 7.8 / 5.3. In Klasik the same trio is 18.1 / 6.2 / **3.2**. The tertiary ink was chosen NOT AGAINST WHITE BUT AGAINST THE HARDEST BACKGROUND. The first try #6B7789 passed the threshold with 4.54 on white but dropped to 4.30 on the zebra row and 4.03 on the strip — and most things written in that colour (grid header, placeholder) are not on white anyway. The value that holds the threshold on the darkest background was taken: white 5.32 / zebra 5.05 / canvas 4.87 / strip 4.73. */ --c-ink: #0D1521; --c-ink-2: #46536B; /* Tertiary ink is derived (see :root). */ /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #1F5FA9; --c-accent: #1F5FA9; --c-accent-2: #2B74C6; --c-accent-dk:#164881; --c-accent-bg:#E6EFFA; --c-header: #ECF2FA; --c-header-2: #DCE7F6; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #C9D8EC; --c-brand: #14304F; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* The signal colours were chosen by the threshold too: if the red of an amount cannot be read, the colour carries no information. */ --c-neg: #B02A20; --c-neg-dk: #8A1F17; --c-pos: #16704F; --c-flag: #8A5B12; --c-flag-bg: #FBF0DA; /* The shadow is on the blue axis too: a neutral black shadow looks dirty on bluish paper (the same decision was made in Klasik). */ --sh-1: 0 1px 2px rgba(13, 30, 55, 0.06); --sh-2: 0 2px 8px rgba(13, 30, 55, 0.08), 0 1px 2px rgba(13, 30, 55, 0.05); --sh-3: 0 14px 36px rgba(13, 30, 55, 0.15), 0 2px 8px rgba(13, 30, 55, 0.07); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } /* DIGIT ALIGNMENT ACROSS THE WHOLE INTERFACE, NOT ONLY IN `.rax-num`. `--num-variant` gives tabular figures to the amount column. Duru turns it on for the whole shell: date, quantity, page number, row counter — every digit stacked in a column has the same width. In an ERP there are digits in almost every cell and the eye can scan a column only if it is aligned. `cv05`/`cv08` are Inter's disambiguation variants: tailed `l`, serifed `I`. An unsupported feature is silently ignored, so there is no fallback risk. */ /* FORM CONTROLS ARE WRITTEN SEPARATELY — inheritance is not enough. Measured: `body` and the grid cell got `"cv05","cv08","tnum"`, while `input` stayed `normal`. `font-feature-settings` is an inherited property but the browser's own form control rule resets it. Without this line the amount in the form and the amount in the list drew different digits — two looks of the same number in two places. */ [data-design='duru'] body, [data-design='duru'] .rax-shell, [data-design='duru'] input, [data-design='duru'] textarea, [data-design='duru'] select, [data-design='duru'] button { font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv08' 1; } /* ------------------------------------------------------------ CANLI — saturated colour, calm background The request: LIVELY colours like blue, red, black, orange; the background still near white. The founding decision is how to hold those two together: **colour IN THE OBJECTS, not in the background.** The background stays near white, saturated tones appear only in the marks — accent, brand, status, amount. Had the reverse been tried (coloured background) the eye reading numbers for eight hours would tire; the reason written at the very top of this file still holds. The difference from the other designs is SATURATION, not hue: Klasik's accent is a muted navy (#33406F), this one a clear blue (#0F62E6). They do the same job, one whispers, the other speaks. ORANGE IS NOT THE ACCENT, IT IS THE WARNING COLOUR. The accent stands next to red and green in the grid; an orange accent would make the selected row look like a warning. So orange is `--c-flag` and the "pending" status — places that already call for attention. BLACK is the ink and the brand: body text is almost pure black (#0A0A0C), the brand mark fully black. Next to saturated blue, black text is more readable than coloured text. Lines and tertiary ink are NOT WRITTEN HERE: they derive from the canvas+ink mix (see :root). This design meets the threshold by itself too. ------------------------------------------------------------ */ [data-design='vivid'] { --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; --num-font: var(--font-ui); /* The background is neutral and near white: the objects carry the colour load. */ --c-canvas: #FAFAFC; --c-surface: #FFFFFF; --c-surface-2:#F3F4F8; --c-ink: #0A0A0C; --c-ink-2: #43454D; /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #0F62E6; --c-accent: #0F62E6; --c-accent-2: #2F7BF0; --c-accent-dk:#0A46A8; --c-accent-bg:#E3EDFD; /* The strip is on the blue axis but light: the saturated block only in the brand. */ --c-header: #EDF3FE; --c-header-2: #DCE8FC; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #C7D9F7; /* The brand's black — the only fully saturated spot on the screen. */ --c-brand: #0A0A0C; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* Red and green are lively too, but readable: both appear as text in the amount column, not as ornament. */ --c-neg: #D42027; --c-neg-dk: #A5161C; --c-pos: #12794A; --c-flag: #C24A06; --c-flag-bg: #FDECE0; --sh-1: 0 1px 2px rgba(10, 10, 12, 0.06); --sh-2: 0 2px 8px rgba(10, 10, 12, 0.09), 0 1px 2px rgba(10, 10, 12, 0.05); --sh-3: 0 14px 36px rgba(10, 10, 12, 0.16), 0 2px 8px rgba(10, 10, 12, 0.07); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } /* The same reason as Duru: digits aligned (see above). */ [data-design='vivid'] body, [data-design='vivid'] .rax-shell, [data-design='vivid'] input, [data-design='vivid'] textarea, [data-design='vivid'] select, [data-design='vivid'] button { font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv08' 1; } /* ------------------------------------------------------------ ZARIF — warm paper, cool ink ALL of the previous six were built on one pattern: a colour axis is chosen and the canvas, strip and accent are all toned on that axis. The blue design's background is bluish, the green one's greenish. The result is consistent but monochrome — there is no tension on screen. This design BREAKS that pattern ON PURPOSE: the paper is WARM (porcelain), the ink and accent COOL (indigo). The elegance comes from there and it does not raise the AMOUNT of colour — on the contrary, the top strip for the first time frees itself entirely from the accent's tone and stays in the paper's own colour. The saturated spot is in two places on screen: brand and selected row. The contrast also gains something measurable: the selected row's indigo fill on warm paper is seen earlier than it would be on a grey background — the eye catches a difference on the colour axis before a difference in lightness. THREE DECISIONS — type, colour, size. All three reasoned below. ------------------------------------------------------------ */ /* 1. TYPE — Geist and Geist Mono, from the same family Why Geist: drawn for interfaces (open apertures at small sizes, a high x-height), has a real `tnum` and is served on Google Fonts with the `latin-ext` subset — so `ğ ı ş İ ç ö ü` are complete. All three were MEASURED, not assumed: the subset list was read from the service, and that the font REALLY draws was verified in the browser (the same text is 461px in Geist, 425.5px in the fallback — had they been equal the font would never have loaded). AND A SURPRISE: Geist's DEFAULT digits are PROPORTIONAL. Measured — with `tnum` off "111111" is 84.16px, "000000" 161.13px; with it on both are 144px. So the `font-feature-settings` rule below is not ornament in this design but LOAD-BEARING: without it the digits in the amount column would not line up and what this file calls "the single most important decision" would silently go to the bin. In the other designs the same rule was an improvement, here it is a must. THE REAL DECISION IS THE SECOND: `--font-code` is from the same family too. In all six of the six designs the interface was one family and the identifier (customer code, invoice no, tax number) another — IBM Plex Mono stood in every design like a stranger's handwriting. Here the code in the grid and the title next to it come from the same pen; the identifier is still fixed width, but now belongs to the screen's language. An ERP has a code column in almost every list, so this difference shows on every screen. */ [data-design='zarif'] { --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-code: 'Geist Mono', ui-monospace, monospace; --num-font: var(--font-ui); /* 2. COLOUR The paper is warm and OFF-WHITE: a pure white canvas glares after eight hours, cream drifts towards yellow. Porcelain is in between — measured, 16.07 contrast with the ink. White did not go away, it MOVED: the things on the paper (grid row, modal, dropdown) are still pure white and now truly separate from the warm background. */ --c-canvas: #F7F6F3; --c-surface: #FFFFFF; --c-surface-2:#FBFAF7; /* Lines and tertiary ink are derived (see :root): the warm paper's line comes out warm, there is no hand-picked value. */ /* The ink is cool: on warm paper even neutral black reads slightly yellow. Measured — white 17.37, canvas 16.07, zebra 16.64, strip 15.12. Secondary ink respectively 7.20 / 6.67 / 6.90 / 6.27; all four far above the 4.5 threshold and even the hardest background (strip) does not go below 6. Tertiary ink IS DERIVED; measured in the browser: #6B6B6D. Writing the number was not enough, the real matches on screen were scanned (49 elements): the hardest TEXT is 4.63, the lightest 5.32. The only thing below the threshold is the filter ICON in the grid header (4.46) — the threshold for non-text elements is 3.0 anyway. */ --c-ink: #191A1F; --c-ink-2: #55575F; /* The accent is INDIGO. The six designs' accents: navy, green-petrol, brown, grey, blue, bright blue. Had the seventh been yet another blue, the choice would mean nothing. Indigo meets three conditions at once: it does not clash with red (negative) and green (positive) in the grid — the oldest rule in this file —, it contrasts with the warm paper and it carries white text (measured: 9.80, more than twice the 4.5 needed for the primary button's text). Ink on the selected row's fill is 14.71 — selection does not reduce readability. */ /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #3D3A85; --c-accent: #3D3A85; --c-accent-2: #4E4A9E; --c-accent-dk:#2E2C68; --c-accent-bg:#ECEBF6; /* THE TOP STRIP IS NOT IN THE ACCENT'S TONE — the design's founding difference. In the other six the strip is toned on the accent's axis and is meant to be a "quiet frame". Here the strip is in the paper's own colour: the frame is really quiet, because it carries no colour. So indigo appears on screen only in MEANINGFUL places — selected row, focus, link, brand. */ --c-header: #F1EFEA; --c-header-2: #E7E4DC; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #DEDAD1; /* The brand's indigo — where the identity is carried while the strip turns to paper. */ --c-brand: #2E2C68; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* The signal colours were tuned for warm paper: a cold red reads purple on a cream background. Both appear as text, so they must hold the threshold — measured, on the canvas both are 5.98 and equal to each other: the red and green of an amount speak at the same volume, neither stands out. */ --c-neg: #B02D24; --c-neg-dk: #8B231C; --c-pos: #1A6B4C; --c-flag: #8A5A12; --c-flag-bg: #F6EBD7; /* 3. SIZE — two changes, both reasoned. NOT the whole type scale, only the bottom tier: `--fs-caption` 11 → 12. What is at this tier: grid column header, field label, section title, hint, placeholder, badge. So every NAME on screen is at this size — the values to be read were at 13 but the label saying what they are was at 11. K-075's note had already written it: "Hint, placeholder, section title and read-only field label are all this colour and all 11px" — there the COLOUR was fixed, the size was left. The remaining half of a half-fixed defect. Row height DOES NOT CHANGE: `--row-h` is density's job and the number of rows per screen is not affected by this tier. Measured — label 11 → 12px, field frame 29 → 30px; the cost is 9px in a nine-field form. The grid row stays at 26px, so not one row is lost in the list. K-105 is not broken either: View and Edit were measured, both are 30px/17px — the tier raises the two modes together. The corner radius softened one notch (4/6 → 5/8). A card is still a card, a button still a button — but sharp corners looked harsh with warm paper. */ --fs-caption: 12px; --r-control: 5px; --r-card: 8px; /* The shadow is the paper's colour, not the ink's: the paper carries the shadow and a cool shadow looks dirty on a warm background. The spread also went up a notch — a hard shadow looks cheap. */ --sh-1: 0 1px 2px rgba(46, 40, 30, 0.05); --sh-2: 0 2px 10px rgba(46, 40, 30, 0.07), 0 1px 2px rgba(46, 40, 30, 0.05); --sh-3: 0 16px 40px rgba(46, 40, 30, 0.14), 0 2px 8px rgba(46, 40, 30, 0.06); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } /* The same reason as Duru/«Canlı»: digit alignment across the interface, form controls included (inheritance is not enough, see above). `cv05`/`cv08` are NOT HERE: they are Inter's variants. Geist has no counterparts and since an unsupported feature is silently ignored it would be harmless — but someone reading would think they work. */ [data-design='zarif'] body, [data-design='zarif'] .rax-shell, [data-design='zarif'] input, [data-design='zarif'] textarea, [data-design='zarif'] select, [data-design='zarif'] button { font-feature-settings: 'tnum' 1; } /* ============================================================ EIGHTH DESIGN — "SADE" (K-110) Source: an interface screenshot the user showed. Its character comes from three things and all three are here: 1. WARM OFF-WHITE PAPER, not pure white. 2. WARM BLACK INK — not neutral black. 3. NO COLOUR IN THE FRAME. Selected row, tab, menu item: all grey. Colour appears only where it carries MEANING. THE THIRD IS A FIRST IN THIS FILE. In all seven of the seven designs the selected row's fill (`--c-accent-bg`) was a light tone of the accent. Here it is NEUTRAL: the selection is grey, the accent shows only in the edge line and the focus ring. That is the design's founding difference — not the colour palette but WHERE THE COLOUR IS NOT. --------------------------------------------------------------- A CLAY ACCENT WAS TRIED AND ELIMINATED BY MEASUREMENT. The only colour in the screenshot was a terracotta/clay tone (≈ #D97757) and it was tried first as the accent. Measured on the hue axis: negative (red) H 3° CLAY ACCENT H 17° → 14° from red flag (amber) H 36° → 19° from clay Pulling the accent towards orange moves it away from red but closer to amber (at H23, 20° and 13° respectively). So there is NO ROOM in the warm half: the oldest rule in this file is "the accent does not clash with red and green in the grid" and in an ERP red and amber are already taken. A link and a negative balance reading as the same colour is the screen's most expensive mistake. The source interface does NOT have this problem because it has neither a negative balance column nor an amber warning badge — clay works there because it is the only colour. The fix was not changing the colour but changing the ROLE: the accent is the ink itself. The source interface does exactly that — it shows the selected row in grey and the primary button in black; clay sits only in an icon. ============================================================ */ [data-design='sade'] { /* 1. TYPE — Inter. The source interface's type is a geometric grotesque. The closest of the families we have is Inter; Duru and «Canlı» use it too, so no new @import comes in. The identifier family is Plex Mono — the same choice as the other two Inter-based designs. */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; --num-font: var(--font-ui); /* 2. PAPER AND INK The paper is warm grey (H40, saturation 3%): far from cream, one notch warmer than neutral grey. Not getting mixed up with the Grimsi design is solved not here but in the accent (see below) — its accent is a COOL grey, this one's accent is the ink. Measured — ink on white 17.21, zebra 16.36, canvas 15.93, strip 15.24, selection 14.46. Secondary ink respectively 7.54 / 7.17 / 6.99 / 6.68 / 6.34; even the hardest of the five is above 6. Tertiary ink IS DERIVED (see :root) — computed outside the browser: #6D6C6A, white 5.25 / strip 4.64. On the selection fill it stays below the threshold at 4.41 and that was accepted: the selected row's cell text is written in the primary ink, the tertiary colour does not land there (the same case in Zarif, the same reason). */ --c-canvas: #F7F6F4; --c-surface: #FFFFFF; --c-surface-2:#FAF9F7; /* Lines are derived (see :root): #D4D3D1 / #BEBDBB. */ --c-ink: #1C1B19; --c-ink-2: #57544E; /* 3. THE ACCENT IS THE INK ITSELF A warm charcoal one notch lighter than the ink. It carries white text comfortably (13.14) — the primary button, the brand mark and the selected row's edge line are this colour. `--c-accent-bg` is NEUTRAL and that is deliberate: the selection is grey, not a light tone of the accent. Ink on the fill is 14.46, so selection does not reduce readability. */ /* Seed of the dark theme — the accent itself (see :root, --c-hue). */ --c-hue: #33302B; --c-accent: #33302B; --c-accent-2: #4A463F; --c-accent-dk:#1C1B19; --c-accent-bg:#EDEBE7; /* The strip is the paper's own colour — the same decision as Zarif, the same reason: the frame carries no colour. */ --c-header: #F2F1EE; --c-header-2: #E8E6E1; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #E2DFD9; /* The brand is colourless too: the identity is in the typography, not a spot. */ --c-brand: #262421; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* THE ONLY COLOUR ON SCREEN IS HERE. Since the frame is entirely grey these stand out — what the source interface does too: colour is not ornament, it is a signal. The red was pulled to the COOL side (H3): so it does not drift to brown on warm paper and does not read as the accent's family. Measured — negative 5.56 on the hardest background, positive 5.38, flag 4.97. */ --c-neg: #B3231B; --c-neg-dk: #8C1B15; --c-pos: #2E6A4B; --c-flag: #8A5A12; --c-flag-bg: #F5EDDF; /* 4. SIZE — one change: the corner. The source interface's elements are clearly rounded. Softened one notch (4/6 → 6/8); Zarif is at 5/8, so the path is already open in this file. The type scale and row height were NOT TOUCHED: they are density's job and the number of rows per screen must not change by choosing a design. */ --r-control: 6px; --r-card: 8px; /* The shadow is the paper's colour, not the ink's (the same reason as Zarif): a cool shadow looks dirty on a warm background. */ --sh-1: 0 1px 2px rgba(38, 34, 29, 0.05); --sh-2: 0 2px 10px rgba(38, 34, 29, 0.07), 0 1px 2px rgba(38, 34, 29, 0.05); --sh-3: 0 16px 40px rgba(38, 34, 29, 0.13), 0 2px 8px rgba(38, 34, 29, 0.06); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); } /* The same reason as Duru/«Canlı»: digit alignment and Inter's disambiguation variants across the interface, form controls included — inheritance is not enough (see Duru's note). */ [data-design='sade'] body, [data-design='sade'] .rax-shell, [data-design='sade'] input, [data-design='sade'] textarea, [data-design='sade'] select, [data-design='sade'] button { font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv08' 1; } /* ============================================================ NINTH DESIGN — "BEYAZ" (K-125) The request was one sentence: "make it completely white, with colours that suit it." THE PAPER IS REALLY WHITE. In none of the eight designs is the canvas white — the lightest is «Canlı»'s #FAFAFC. The reason is on the first page of tokens.css: for an eye looking at a number table for eight hours a slightly broken background is less tiring. This design reverses that decision ON PURPOSE; if the user wants white they should see white, not "near white". The cost is also clear and it is met here: with the canvas and card the same colour, the only thing separating the card from the paper is the LINE. Lines already derive from the background (see :root), so on white they settle into a visible grey by themselves — no border colour was picked by hand. COLOUR CARRIES ONLY MEANING. On white paper a chromatic accent leaves a coloured halo everywhere on the screen; so the accent is a COOL GRAPHITE — one notch lighter than the ink. Red, green and yellow are the only remaining colour sources: debit, credit, warning. Not to be confused with «Sade»: its paper is warm (#F7F6F4), its accent a warm charcoal, its corners softened. This one is cool, pure white and its corners as sharp as the base. THE FONT DOES NOT CHANGE. The base IBM Plex Sans stays: what this design says is the paper, not the letters — and bringing in a new @import buys nothing. ============================================================ */ [data-design='beyaz'] { /* 1. PAPER AND INK Card and canvas are THE SAME. Zebra and strip drift to a cool grey of 3%: both answer the question "same row or new row" and white on white would leave that question unanswered. Measured (in the browser, contrast): ink / white 18.26 ink / zebra 16.74 secondary / white 7.73 tertiary / white 5.26 (derived, threshold 4.5) tertiary / zebra 4.82 Tertiary ink is the most comfortable of the five designs: since the paper is the lightest background the derivation formula gives its highest value here. In «Sade» the same row stayed at 4.64. */ --c-canvas: #FFFFFF; --c-surface: #FFFFFF; --c-surface-2:#F4F5F7; /* Lines are derived (see :root): #D0D1D5 / #B6B8BE. */ --c-ink: #12151C; --c-ink-2: #4C5361; /* 2. THE ACCENT IS THE INK'S COOL SIBLING It carries white text comfortably (measured: 15.92) — the primary button, the brand and the selected row's edge are this colour. `--c-accent-bg` is NEUTRAL: the selection fill is not a light tone of graphite but a cool grey. A coloured fill would stand alone on white paper and raise the question "why is this row blue". The fill against white is 1.15 — clearer than the base (1.06) but still quiet; ink on it is 15.87, so the selected row's readability does not drop. */ --c-hue: #1E222B; --c-accent: #1E222B; --c-accent-2: #333A47; --c-accent-dk:#0C0F14; --c-accent-bg:#EDEFF3; /* 3. THE STRIP IS WHITE TOO — and this is the design's riskiest spot. With the top strip the same colour as the paper the frame disappears and the ONLY thing separating the strip from the page is the divider. Its load grew, so its weight grew too: 1.56, clearer than an ordinary hairline (1.40) but lighter than an emphasised edge (1.75). The first value was #E2E5EA and it was measured — 1.26, i.e. QUIETER than an ordinary line. The hardest-working line being the faintest was the exact opposite of the rule. */ --c-header: #FFFFFF; --c-header-2: #F1F3F6; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #CBCFD7; --c-brand: #12151C; --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* 4. THE ONLY COLOUR ON SCREEN On a white background the signal colours sit on their lightest background, i.e. this design is their hardest case. Measured: negative 6.62 positive 6.42 flag 5.91 */ --c-neg: #B3231B; --c-neg-dk: #8C1B15; --c-pos: #1E6B4F; --c-flag: #8A5A12; --c-flag-bg: #FBF3E2; /* 5. THE SHADOW IS NEUTRAL AND ONE NOTCH DEEPER. The shell uses shadows only on FLOATING things (record panel `--sh-1`, modal `--sh-3`). On a white background a panel's border alone does not say it is on top; the shadow here is not ornament but the only way of saying "this surface is above". */ --sh-1: 0 1px 2px rgba(18, 21, 28, 0.07); --sh-2: 0 2px 8px rgba(18, 21, 28, 0.09), 0 1px 2px rgba(18, 21, 28, 0.05); --sh-3: 0 14px 36px rgba(18, 21, 28, 0.16), 0 2px 8px rgba(18, 21, 28, 0.07); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); /* 6. THE DARK THEME DERIVES FROM ONE LINE (K-117): the `--c-hue` above. Graphite is almost neutral, so the dark side becomes a neutral charcoal too — it reads right as the counterpart of white paper. Measured (dark, against its own background): ink / canvas 15.32 accent / canvas 8.66 ink / surface 13.90 negative 7.68 ink on accent 8.66 positive 8.87 All five are within the range K-117 measured for the eight designs. */ } /* ============================================================ FERAH — white background throughout, the label above the frame (K-221) THE DIFFERENCE FROM BEYAZ WAS MEASURED, NOT CLAIMED. Beyaz's paper is already #FFFFFF but its grey fills remain: zebra and strip #F4F5F7, the top strip's second tone #F1F3F6, the grid header 5% ink. So by "white background" what was meant was the CARD, not the whole screen. In Ferah there is no STANDING grey. Three things separate: line, space and — only when it carries meaning — fill. Three things on the screen get a fill and all three answer a question: hover `--c-touch` "the mouse is here" selected row `--c-accent-bg` "this record is selected" warning/flag `--c-flag-bg` "look at this" Zebra, strip, panel title and grid header LOSE their fill; the answer to what replaces them is the line. Measured (contrast against white): the removed strip's voice **1.03**, the line replacing it **1.40** and the grid header's bottom edge **1.77**. So the divider DID NOT VANISH, it was handed over to one forty times clearer. THE COST IS WRITTEN. Zebra is not a fill, it counts INTERVALS: in a fifteen-column grid, while the eye follows a row from left to right, a line alone separates two neighbouring rows but does not tie a distant cell to the SAME row. Ferah is a design for record screens and lists with few columns; the answer for a reconciliation screen is Compact density + Klasik. THE LABEL MOVES ABOVE THE FRAME — and this is not a colour decision but a LAYOUT decision. Until now all eight designs shared the same layout (the label in the border's notch) and `data-design` meant only the palette. Not any more: a design can choose a LAYOUT too. The mechanism is below. ============================================================ */ [data-design='ferah'] { /* 1. ONE SURFACE Canvas, card and "secondary surface" are THE SAME: white. The third normally paints the zebra and the strip; here it paints nothing, because there is nothing left to paint. That is why `--c-touch` is a separate token (see :root): feedback was split from the surface, otherwise surface-2 pulled to white would silently kill twelve hover rules. Its value is THE SAME as the grid's own hover mix (5%, contrast 1.11) — so the screen has one "the mouse is here" language. */ --c-canvas: #FFFFFF; --c-surface: #FFFFFF; --c-surface-2:#FFFFFF; --c-touch: color-mix(in srgb, var(--c-ink) 5%, var(--c-canvas)); --c-ink: #14171E; --c-ink-2: #4E5563; /* 2. THE FRAME GOT ONE NOTCH HEAVIER Once the label left the notch, the border was the only thing framing the field: before, the gap cut by the label also said "this is a box". The load grew, so the weight grows — the same decision Beyaz made for its top strip line. 10% → 14% (writable), 6% → 8% (read-only). The tier difference was KEPT: a read-only field is still fainter. Measured (in the browser, against white): **1.34** and **1.18**. */ --c-field-line: color-mix(in srgb, var(--c-ink) 14%, var(--c-canvas)); --c-field-line-soft: color-mix(in srgb, var(--c-ink) 8%, var(--c-canvas)); /* 3. ACCENT: PETROL Beyaz already has a graphite accent; a second neutral design buys nothing. Petrol blue is cool, low in saturation and does not clash with red/green in the grid — the rule governing the accent choice (see :root) holds here too. Measured (in the browser, against white): accent **7.03**, white text on it **7.03**. Selection fill **1.18**, ink on it **15.22** — since the fill is one of the few colours on screen it is a notch clearer than Beyaz's neutral fill. */ --c-hue: #16607A; --c-accent: #16607A; --c-accent-2: #1C7593; --c-accent-dk:#0F4759; --c-accent-bg:#E4EEF3; /* 4. THE STRIP IS WHITE TOO, HOVER IN THE TOUCH COLOUR. `--c-header-2` is not a surface but the hover inside the strip. Pulled to white, every button in the top strip would be dead. */ --c-header: #FFFFFF; --c-header-2: var(--c-touch); --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #CBCFD6; --c-brand: var(--c-accent); --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* 5. SIGNAL COLOURS ON THEIR LIGHTEST BACKGROUND. Measured: negative 6.62, positive 6.42, flag 5.91. */ --c-neg: #B3231B; --c-neg-dk: #8C1B15; --c-pos: #1E6B4F; --c-flag: #8A5A12; --c-flag-bg: #FBF3E2; /* 6. THE SHADOW: THE ONLY MARK OF A FLOATING THING. On a white background a border does not say a panel is on top. The same values as in Beyaz — measured there for the same reason. */ --sh-1: 0 1px 2px rgba(20, 23, 30, 0.07); --sh-2: 0 2px 8px rgba(20, 23, 30, 0.09), 0 1px 2px rgba(20, 23, 30, 0.05); --sh-3: 0 14px 36px rgba(20, 23, 30, 0.16), 0 2px 8px rgba(20, 23, 30, 0.07); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); /* 7. THE DARK THEME DERIVES FROM ONE LINE (K-117): the `--c-hue` above. Petrol is cool and low in saturation, so the dark side goes down to a cool charcoal too. The label layout is INDEPENDENT of the theme: the rules below look at `[data-design]`, not `[data-theme]`. */ } /* THE GRID HEADER IS WHITE TOO. Its value is written FIXED inside `.rax-shell .rz-grid-table thead th` (5% ink), so it cannot be switched off with a token; the rule itself is overridden. The background must be WHITE, NOT TRANSPARENT: the header is sticky and rows pass under it. Leaving it transparent means reading data on top of the header while scrolling — the same reason Beyaz wrote for the frozen cell. The only thing separating the header from the data is now its bottom edge; that line was already in the rule (`--c-line-2`) and could not be heard under the strip. */ [data-design='ferah'] .rax-shell .rz-grid-table thead th { background: var(--c-card); } /* ZEBRA IS SWITCHED OFF TOO — the cost was measured, near zero. The stripe was already at 1.03 contrast (see the bridge below); removing it costs less than it seems. What really separates rows is the cell's bottom line and it was measured: **1.40**, i.e. forty times clearer than the stripe. In Ferah row tracking is left to the line, not the fill. THE FROZEN CELL IS STRIPELESS BUT NOT TRANSPARENT: the selection column stays fixed in horizontal scrolling and rows pass under it (see the bridge block's own reason). THE SELECTOR IS `:root[...]`, because the bridge block defines these variables on `[data-theme]` and that block comes LATER in the file: at equal specificity the later one wins. Adding a single `:root` (0,2,0) ends the argument. The same trap as in K-032: not stacking rules but writing from the right place. */ :root[data-design='ferah'] { --rz-grid-stripe-background-color: transparent; --rz-grid-frozen-stripe-background-color: var(--c-card); } /* ============================================================ KURUMSAL — cool grey paper, white frame, cobalt accent (K-306) The source is the owner's design canvas («Kurumsal ERP Şablonu»): its `theme.css` defines every colour as a token, so the design came over as a token mapping, not as a redraw. Each value below is the canvas value unless a measurement here overruled it. WHAT IT SAYS: the content sits on a light cool-grey desk, everything that FRAMES it (top strip, sidebar, cards) is white, and the only chromatic colour is one cobalt accent. Not to be confused with «Ferah» (no standing grey at all, petrol accent) or «Beyaz» (white desk, graphite accent): here the desk stays grey, so a white card reads as a card without leaning on its border. SIZE IS NOT THIS DESIGN'S JOB. Row height and spacing stay with the density axis — choosing a design must not change rows per screen. Only the corner moves (see 4). ============================================================ */ [data-design='kurumsal'] { /* 1. TYPE — Inter, the canvas's family. The identifier family is Plex Mono, the same choice as the other Inter-based designs. */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-code: 'IBM Plex Mono', ui-monospace, monospace; --num-font: var(--font-ui); /* 2. PAPER AND INK — a cool grey desk under white cards. The card is the first design to use `--c-card` (see :root): the desk stays grey, the list and record cards turn white. Without the split the only way to a white card was a white desk. */ --c-canvas: #F5F6F8; --c-surface: #FFFFFF; --c-surface-2:#F8F9FB; --c-card: var(--c-surface); --c-ink: #151821; --c-ink-2: #4A5262; /* The field frame is one notch heavier than the base (10% → 14%, read-only 6% → 8%): in the canvas every input carries a visible frame, the label above it does not do that job. Same tiers as «Ferah». */ --c-field-line: color-mix(in srgb, var(--c-ink) 14%, var(--c-canvas)); --c-field-line-soft: color-mix(in srgb, var(--c-ink) 8%, var(--c-canvas)); /* 3. ACCENT: COBALT — the only chromatic colour on screen. Bluer and brighter than Klasik's ink blue, still not the default SaaS blue. Hover is a lighter step, pressed a darker one (the root's convention). The selection fill is a light tone of the accent, not a neutral grey: in the canvas the selected row, the active menu item and the active filter all speak the same blue. */ --c-hue: #2B59E0; --c-accent: #2B59E0; --c-accent-2: #4A72E8; --c-accent-dk:#1D44B8; --c-accent-bg:#EDF2FE; /* 4. THE FRAME IS WHITE — top strip and sidebar. With a white strip on a grey desk the strip separates from the page by colour already; its divider only closes the edge. The divider is still kept above an ordinary hairline, the rule Beyaz measured. */ --c-header: #FFFFFF; --c-header-2: #F1F3F6; --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #CDD2DB; --c-brand: var(--c-accent); --c-sidebar: var(--c-surface); --c-sidebar-line: var(--c-line); /* 5. SIGNAL COLOURS — the canvas's own danger, success and warning. */ --c-neg: #B42318; --c-neg-dk: #8C1B15; --c-pos: #0B6B3F; --c-flag: #8A4B00; --c-flag-bg: #FDF1DC; /* 6. CORNER — the canvas's 8 / 12. The softest in the file («Sade» 6/8, «Zarif» 5/8); a card reads as a card here mostly by its corner and shadow, since the desk is only one step darker than the paper. */ --r-control: 8px; --r-card: 12px; --sh-1: 0 1px 2px rgba(16, 24, 40, 0.05); --sh-2: 0 6px 16px rgba(16, 24, 40, 0.10); --sh-3: 0 16px 36px rgba(16, 24, 40, 0.16); --focus-ring: 0 0 0 2px var(--c-accent-bg), 0 0 0 3px var(--c-accent); /* 7. THE DARK THEME DERIVES FROM ONE LINE (K-117): the `--c-hue` above. Nothing else is written for it. */ } /* ROWS ARE SEPARATED BY THE LINE, NOT A STRIPE — the canvas has no zebra, only the cell's bottom line and the hover fill. The frozen cell keeps a solid fill because rows pass under it (Ferah's reason), and that fill is the CARD's token, not a colour picked here. Measured in the first version: written as `--c-surface` while the card was still grey, the selection column turned white on every even row and the rest of the row stayed grey. Tied to `--c-card` the two cannot drift apart again. `:root[...]` for the same specificity reason as Ferah. */ :root[data-design='kurumsal'] { --rz-grid-stripe-background-color: transparent; --rz-grid-frozen-stripe-background-color: var(--c-card); } /* Inter's tabular figures and disambiguation variants across the interface, form controls included — the same reason as «Sade». */ [data-design='kurumsal'] body, [data-design='kurumsal'] .rax-shell, [data-design='kurumsal'] input, [data-design='kurumsal'] textarea, [data-design='kurumsal'] select, [data-design='kurumsal'] button { font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv08' 1; } /* Compact: accounting, closing, reconciliation screens. Spacing 2px. An accountant wants rows on screen, not breathing room — what fills the screen is not the row height but the total space between items. THE FORM IS THE EXCEPTION. `--form-gap` went from 2px to 6px: a list is READ, a form is FILLED IN. When two fields' frames sit 2px apart the eye cannot tell which label belongs to which box and while moving with Tab where the cursor lands gets lost. Row height DID NOT CHANGE — the compact tier is still compact, there is breathing room only where things are filled in. */ [data-density='compact'] { --row-h: 26px; --cell-px: 6px; --fs-table: var(--fs-dense); --header-h: 24px; --form-gap: 6px; --form-pad: var(--sp-4); --gap: 2px; --pad: var(--sp-2); --btn-px: var(--sp-3); --tab-h: 32px; --tab-px: var(--sp-3); --shell-gap: var(--sp-1); } /* Wide: field, touch, warehouse terminal */ [data-density='comfortable'] { --row-h: 42px; --cell-px: 14px; --fs-table: var(--fs-input); --header-h: 38px; --form-gap: var(--sp-5); --form-pad: var(--sp-6); --gap: var(--sp-4); --pad: var(--sp-5); --btn-px: var(--sp-5); --tab-h: 48px; --tab-px: var(--sp-5); --shell-gap: var(--sp-4); } /* ------------------------------------------------------------ RADZEN BRIDGE Radzen's size variables are fed from the tokens. `.rz-stack{gap:var(--rz-gap)}` — the variable is inherited, not defined on the element, so it can be overridden here. (The grid's --rz-grid-* variables are NOT like that: they are defined on the element itself and overridden with the grid selector in rax.css.) ------------------------------------------------------------ */ :root, [data-density] { --rz-gap: var(--gap); --rz-row-gap: var(--gap); --rz-fieldset-padding: var(--pad); --rz-panel-padding: var(--pad); --rz-card-padding: var(--pad); /* THE DROPDOWN PANEL READS THE DENSITY TOO. Measured: while a row was 26px with 12px text, the dropdown's row was 33px and 13px (`--rz-dropdown-item-padding: 0.75rem 1rem`). Two surfaces showing the same data — the customer list and the customer picker box — had different sizes; when the box opened the screen looked as if it changed tier. The padding is the same as the cell HORIZONTALLY (`--cell-px`), zero vertically: the `min-height` below gives the height, adding both would double the row (this trap was fallen into once inside `.rax-field`). */ --rz-dropdown-item-padding: 0 var(--cell-px); --rz-dropdown-panel-padding: 0; --rz-dropdown-items-padding: 0; /* THE SIBLING VARIABLE WAS FORGOTTEN — the dropdown's first letter was cut. Measured: panel x=812 / width 150, the list's `li` x=800 / width 174. So the list was 24px wider than the panel and 12px to the LEFT; since `.rz-dropdown-panel` is `overflow: hidden` here the left letter was clipped — "Aisle" showed as "isle" on screen. The cause is the two lines above themselves. Radzen's default for `--rz-dropdown-items-margin` is `0 -13px` and that NEGATIVE margin exists to take back the panel's HORIZONTAL PADDING: so the row highlight goes edge to edge. We zeroed the padding, but with nothing left to take back the negative margin was left exposed. The three are parts of one setting; writing two and leaving the third was leaving a half setting. */ --rz-dropdown-items-margin: 0; /* THE FONT SIZE ALSO GOES THROUGH A VARIABLE, NOT A RULE. First `.rz-dropdown-item { font-size: var(--fs-table) }` was written and it DID NOT HOLD: Radzen's selector is `.rz-dropdown-items li` — one class + one type (0,1,1), ours a single class (0,1,0). Even though the file loads later, specificity wins. K-062's lesson once more: instead of stacking rules, feed the variable the consumer reads. Radzen's default was `1rem` — the grid wrote 12px while the dropdown wrote 13px. */ --rz-dropdown-item-font-size: var(--fs-table); } /* ------------------------------------------------------------ RADZEN FONT BRIDGE — K-032's lesson for the FIFTH time `--font-ui` is defined at the very top of this file, its reason written (IBM Plex Sans: true tabular figures, complete Turkish diacritics), and three of the `[data-design]` blocks changed it. NONE OF IT REACHED THE SCREEN. Measured: `getComputedStyle(body) .fontFamily` → **Roboto**. The cause is the same trap as in the size and colour bridges — Radzen writes `font-family: var(--rz-text-font-family)` on `body` and that variable was never bound. The only reader of `--font-ui` was `.erp-grid` inside tokens.css; the application does not use it. The result had two layers: the Klasik design was not drawn with its documented font, and the design picker's TYPE AXIS was entirely dead — four options only changed colour. One line binds it. `var(--font-ui)` resolves on :root and the `[data-design]` blocks write to the same element: when the choice changes the font changes too. ------------------------------------------------------------ */ /* THERE WAS NO SIZE BRIDGE EITHER — the same lesson for the SIXTH time. The family was bound, the SIZE was not: Radzen puts `var(--rz-body-font-size)` (1rem = 16px) on `body` and `var(--rz-input-font-size)` on every input. Neither was fed from the tokens, so part of the text size on screen was set by this file and part by Radzen's default. The result was measured live (customer form, compact mode, Geist design): Text box 12px (.rz-textbox — in the shell's list) Numeric box 13px (.rz-numeric-input — NOT in the list) Date box 13px (.rz-inputtext — NOT in the list) View-mode text 13px (.rax-plain — read --fs-body) So four fields in the same form, three different sizes. The selector list in the shell (`.rax-shell .rz-textbox, …`) caught only one of them — K-138's lesson: a list that catches some is worse than one that catches none, because it is believed to work. The right way is again feeding the variable: the list counts a CLASS, the variable is INHERITED by every input. */ :root, [data-design] { --rz-text-font-family: var(--font-ui); --rz-body-font-size: var(--fs-body); } /* THE INPUT SIZE IS NOT BOUND FROM THE ROOT — found by measuring. `--rz-input-font-size` was written on :root and the screen did not change. The cause is not specificity but POSITION: Radzen defines this variable in the size class ON the input ITSELF (`rz-input-md`, present on every input). A custom property resolves from the definition CLOSEST to the element using it — the root definition never reaches it. So the rule is written on top of the size classes. It is a class list but a SCALE list: the four are Radzen's whole size scale, it does not count widget names. It works when a new input type is added too, because Radzen puts one of the same four classes on all of them. */ .rz-input-xs, .rz-input-sm, .rz-input-md, .rz-input-lg { --rz-input-font-size: var(--fs-table); } /* ------------------------------------------------------------ RADZEN COLOUR BRIDGE K-032's lesson for the fourth time: the token was written, the consumer was NOT READING it. The bridge above bound only Radzen's SIZE variables; the colours were never bound. Result: while this file described an ink-blue (#2C3A8C) system, the screen showed Radzen Material's purple (#4340D2) — top strip, button, link, focus, selected row, all of them. Radzen's whole colour system flows from a small root: `--rz-white`, `--rz-base-50..900` and six semantic colours. Turning the root is enough; no need to override hundreds of component rules one by one. The mapping was done by LIGHTNESS, not by name: Radzen's `base-800` means "dark grey text", and so is our `--c-ink`. ------------------------------------------------------------ */ :root, [data-theme] { /* Surfaces and the neutral scale */ --rz-white: var(--c-surface); --rz-base-50: var(--c-surface-2); --rz-base-100: var(--c-canvas); --rz-base-200: var(--c-line); --rz-base-300: var(--c-line-2); --rz-base-400: var(--c-ink-3); --rz-base-500: var(--c-ink-3); --rz-base-600: var(--c-ink-2); --rz-base-700: var(--c-ink-2); --rz-base-800: var(--c-ink); --rz-base-900: var(--c-ink); --rz-base: var(--c-surface-2); --rz-base-background-color: var(--c-surface); --rz-body-background-color: var(--c-canvas); /* THE GRID'S BACKGROUND IS THE CANVAS TOO. It was not bound, so Radzen's white applied. When the card was pulled to the canvas the grid stayed as a white rectangle in the middle of the screen — nearly all of the card's area. The row zebra (`--c-surface-2`) DID NOT CHANGE: it stays one notch lighter than the canvas, so the stripe changed direction but row tracking goes on. */ --rz-grid-background-color: var(--c-card); /* ROW AND HEADER SURFACES ARE IN THE BRIDGE TOO. These were not bound: odd rows `#FFFFFF`, header `#FFFFFF`, frozen cell `#FFFFFF`. So even after the screen's background moved to the canvas the grid's ROWS stayed white — the card canvas, the data inside white. THE STRIPE CHANGED DIRECTION. Before, the base was white and the even row one notch darker (`--c-surface-2`). Now the base is the canvas and the stripe one notch DARKER still; the alternation reads in the same direction (the striped row always darker), only the background changed. `--c-surface-2` could not be used here: being LIGHTER than the canvas it would flip the stripe. THE FROZEN CELL CANNOT BE TRANSPARENT: the selection column stays fixed in horizontal scrolling and rows pass under it. It stays opaque, but now the same as the background rather than white. */ /* THE STRIPE IS NEARLY INVISIBLE, THE HOVER CLEARLY VISIBLE. Measured contrast (against the background): 1.5% → 1.03 zebra: enough to follow a row, builds no pattern 5% → 1.11 hover: one tone apart, read without hesitation THERE WAS NO HOVER BEFORE: `--rz-grid-hover-background-color` was not bound and Radzen's value is `#F6F7FA` — when the background moved to the canvas the two fell on the SAME colour, so nothing happened while the mouse was over a row. The measurement showed both at 0.9302 lightness. The selected row is on a separate axis (the accent tone), so it does not mix with the neutral hover: one grey, the other blue. */ --rz-grid-stripe-odd-background-color: transparent; /* Every grid surface reads the CARD, not the desk (K-306): the grid sits inside the card. Same value as before in every design but «Kurumsal». */ --rz-grid-stripe-background-color: color-mix(in srgb, var(--c-ink) 1.5%, var(--c-card)); --rz-grid-hover-background-color: color-mix(in srgb, var(--c-ink) 5%, var(--c-card)); --rz-grid-frozen-cell-background-color: var(--c-card); --rz-grid-frozen-stripe-odd-background-color: var(--c-card); --rz-grid-frozen-stripe-background-color: color-mix(in srgb, var(--c-ink) 1.5%, var(--c-card)); --rz-grid-header-background-color: color-mix(in srgb, var(--c-ink) 5%, var(--c-card)); --rz-grid-toolbar-background-color: transparent; --rz-text-color: var(--c-ink); --rz-text-secondary-color: var(--c-ink-2); --rz-text-disabled-color: var(--c-ink-3); --rz-text-title-color: var(--c-ink); /* Aksan */ --rz-primary: var(--c-accent); --rz-primary-light: var(--c-accent-2); --rz-primary-dark: var(--c-accent-dk); /* THE "WHAT IS WRITTEN ON TOP" FAMILY IS IN THE BRIDGE TOO. All six were written `#FFFFFF` with the same assumption: a filled background is dark. In the dark theme the accent, red and green are LIGHT tones — white text cannot be read there (see --c-on-accent). */ --rz-on-primary: var(--c-on-accent); /* THE ROOT OF THE SELECTED STATE — the bridge's hole was here. `--rz-primary` was turned, `--rz-primary-lighter` WAS NOT. Radzen derives ALL "selected" states from these two and the dropdown's selected row, the grid's selected row, the pager's active page, the active menu item in the sidebar, tree node, filter icon, text selection — all drew Radzen Material's PURPLE (#4340D2). Exactly this was what remained of the place K-032 called "the purple is gone". Measured: 39 variables bound to the root carried a purple value; once the two were fixed all 39 turned at once. They were not overridden one by one — the rule that turning the root is enough holds again. OPAQUE, not alpha: Radzen uses 0.12 transparency, which gives one colour on a zebra row and another on white. `--c-accent-bg` already means "selection background" and the grid uses it too (`.erp-grid tr[aria-selected]`). */ --rz-primary-lighter: var(--c-accent-bg); --rz-on-primary-lighter: var(--c-accent); --rz-secondary: var(--c-ink-2); --rz-on-secondary: var(--c-on-accent); /* THE SECONDARY COLOUR'S "LIGHTER" PAIR — the twin K-076 missed. There `--rz-primary-lighter` was bound and its twin was skipped. Measured: in the dropdown table the selected row's TEXT came out #E31C65 (Radzen Material's pink) — a colour in no design's palette. Its source is `--rz-grid-cell-focus-color`, which is bound to this root. It is bound to the accent family, not the secondary ink: focus and selection must speak the same language. Were they different the selected row would be blue and the focused cell inside it another colour. */ --rz-secondary-lighter: var(--c-accent-bg); --rz-on-secondary-lighter: var(--c-accent); /* Semantic colours come from the tokens. Radzen's defaults (#f44336 red, #4caf50 green) next to the balance colours in the grid showed two different reds. */ --rz-danger: var(--c-neg); --rz-danger-light: var(--c-neg); --rz-danger-dark: var(--c-neg); --rz-on-danger: var(--c-on-neg); --rz-success: var(--c-pos); --rz-on-success: var(--c-on-pos); --rz-warning: var(--c-flag); --rz-on-warning: var(--c-on-flag); --rz-info: var(--c-accent); --rz-on-info: var(--c-on-accent); /* THE "LIGHTER" PAIRS OF THE SEMANTIC COLOURS. The same gap existed FOUR more times in the same family: `danger`, `success`, `warning`, `info` — the main tone of each was turned, the light tone stayed at Radzen Material's default (#f44336 red, #4caf50 green, #ff9800 orange, #2196f3 blue). Their consumers are not quiet: the BACKGROUND of notification bubbles comes from them. Instead of waiting for them to be measured and fixed one by one the family was closed — the pink (secondary) was found this way, and before it the purple (primary). At the third repetition the pattern itself gets fixed. Where a token WITH a light tone exists it is used (`--c-flag-bg`, `--c-accent-bg`); the two without one derive from mixing the main tone with the surface. No new fixed colour was added: the mix follows by itself when the design changes. */ --rz-danger-lighter: color-mix(in srgb, var(--c-neg) 12%, var(--c-surface)); --rz-on-danger-lighter: var(--c-neg); --rz-success-lighter: color-mix(in srgb, var(--c-pos) 12%, var(--c-surface)); --rz-on-success-lighter: var(--c-pos); --rz-warning-lighter: var(--c-flag-bg); --rz-on-warning-lighter: var(--c-flag); --rz-info-lighter: var(--c-accent-bg); --rz-on-info-lighter: var(--c-accent); /* The validation shadow also came from a red alpha. In this repository elevation is muted and there are no coloured shadows — the tier was bound to a token. */ --rz-validator-shadow: var(--sh-2); /* Shell */ --rz-header-background-color: var(--c-header); --rz-header-color: var(--c-header-ink); --rz-sidebar-background-color: var(--c-sidebar); --rz-sidebar-color: var(--c-ink); --rz-sidebar-width: var(--nav-w); /* Surfaces: a line separates, not a shadow. Material's elevation shadows look embossed in a corporate data interface. */ --rz-shadow-0: none; --rz-shadow-1: var(--sh-1); --rz-shadow-2: var(--sh-1); --rz-shadow-3: var(--sh-2); --rz-shadow-4: var(--sh-2); --rz-shadow-5: var(--sh-3); --rz-shadow-6: var(--sh-3); --rz-shadow-7: var(--sh-3); --rz-shadow-8: var(--sh-3); --rz-panel-menu-item-hover-background-color: var(--c-accent-bg); } /* ---------------------------------------------------------- DARK THEME — one block, eight designs Warehouse and production screens are often in the dark, and the office side has an evening shift too. Token names stay the same, only the values turn — no screen is rewritten for the dark theme. EIGHT PALETTES WERE NOT WRITTEN FOR EIGHT DESIGNS. Each design declares its identity hue as `--c-hue` and the whole dark palette derives from it: the background takes a very muted cast of that hue, the accent family comes from the light end of the same hue. One line per design, the whole shared palette here. Adding a new design costs nothing on the dark side — a design that forgets to write its line is drawn with Klasik's hue (:root), so the worst case is "dark without identity", not "broken dark". THE DERIVATION USES `oklch(from ...)`, NOT `color-mix`. Both can lighten a colour but color-mix mixes with white and also lowers the saturation: «Canlı»'s blue turned pastel in the dark theme. `oklch` changes only the LIGHTNESS, hue and saturation stay in place. NO SATURATION FLOOR — on purpose. Tried and DROPPED: with a floor «Sade»'s neutral graphite turned golden and «Grimsi»'s grey turned blue. Both designs are built on the ABSENCE of saturation; the dark theme must not "fix" their identity. EVERY LINE IS WRITTEN TWICE: first the plain value, then the derivation. In a browser that does not understand the derivation the second line counts as invalid and drops, the first stays — the dark theme still works with a neutral palette, it just does not take the design's hue. The fallback values are not made up: they are this block's measured state before derivation. ---------------------------------------------------------- */ [data-theme='dark'] { --c-canvas: #14161C; --c-canvas: oklch(from var(--c-hue) 0.185 min(c, 0.02) h); --c-surface: #1B1E26; --c-surface: oklch(from var(--c-hue) 0.232 min(c, 0.018) h); --c-surface-2:#21242D; --c-surface-2:oklch(from var(--c-hue) 0.268 min(c, 0.018) h); /* Lines are derived (see :root): in the dark theme the ink is light, the canvas dark — the mix comes out LIGHTER than the background by itself. */ --c-ink: #E8EAEF; --c-ink: oklch(from var(--c-hue) 0.935 min(c, 0.012) h); --c-ink-2: #A2A9B8; --c-ink-2: oklch(from var(--c-hue) 0.760 min(c, 0.022) h); /* Tertiary ink is derived (see :root). */ /* THE ACCENT FAMILY TURNS AROUND. In the light theme the accent is dark, LIGHTENS on hover and darkens when pressed. In the dark theme the accent is light and the same direction is kept: `-2` (hover) is brighter, `-dk` (pressed) more muted. The name stays "dk" because the token name tells the STATE, not the colour — renaming it would mean changing the twenty rules that read it. Measured contrast (against its own canvas, eight designs): accent 7.8 – 9.0 ink 15.4 secondary 8.7 */ --c-accent: #8B97D9; --c-accent: oklch(from var(--c-hue) 0.760 c h); --c-accent-2: #A2ACE4; --c-accent-2: oklch(from var(--c-hue) 0.830 c h); --c-accent-dk:#6E7BC4; --c-accent-dk:oklch(from var(--c-hue) 0.660 c h); --c-accent-bg:#242942; --c-accent-bg:oklch(from var(--c-hue) 0.320 min(c, 0.055) h); /* THE INK ON A FILLED BACKGROUND TURNS FROM WHITE TO DARK. The primary button's background is now a LIGHT accent; white on top of it gives 1.9 contrast. The canvas itself is used, no new black is made up — the button reads as carrying the screen's background and takes the design's hue that way too. */ --c-on-accent: var(--c-canvas); --c-on-neg: var(--c-canvas); --c-on-pos: var(--c-canvas); --c-on-flag: var(--c-canvas); /* SIGNAL COLOURS ARE SHARED, NOT DERIVED FROM THE DESIGN. The accent is the design's identity; red and green ARE NOT — they mean "debit" and "credit" and must mean the same in every design. The light theme's values stayed at 3.0 contrast on a dark background, i.e. the colour carried no information; they were measured separately for the dark side. `-dk` still means "pressed" and its direction turns here too: the destructive button that darkens on a light background glows on a dark one. */ --c-neg: #F08A84; --c-neg-dk: #F7ADA8; --c-pos: #6BC49E; --c-flag: #E0B45C; --c-flag-bg: #33291A; /* STRIP AND BRAND. The strip is one notch from the canvas TOWARDS THE INK — the same relation as in the light theme, only the direction turned: there slightly darker than the canvas (#F1EFEA / #F7F6F3), here slightly lighter (measured: #181832 / #11121B). Were it the same as the canvas, where the strip ends and the screen begins would not show. The brand is in a LIGHT tone and stays the only saturated spot: a navy square does not read on a dark background. It lands close to the accent (0.78 against 0.76) and that is fine — the two never sit side by side, one is a filled square, the other a text colour. */ --c-header: #141828; --c-header: oklch(from var(--c-hue) 0.225 min(c, 0.05) h); --c-header-2: #222840; --c-header-2: oklch(from var(--c-hue) 0.300 min(c, 0.05) h); --c-header-ink: var(--c-ink); --c-header-ink-2:var(--c-ink-2); --c-header-line: #2B3149; --c-header-line: oklch(from var(--c-hue) 0.330 min(c, 0.04) h); --c-brand: #A2ACE4; --c-brand: oklch(from var(--c-hue) 0.780 c h); --c-sidebar: var(--c-canvas); --c-sidebar-line: var(--c-line); /* ON A DARK BACKGROUND SHADOWS DO NOT WORK — the line carries the separation. The only place elevation is read is things floating in the air: dropdown and modal. There the shadow GETS DARKER, because there is no other way to stand out from the background. */ --sh-1: none; --sh-2: 0 2px 8px rgba(0, 0, 0, 0.5); --sh-3: 0 16px 40px rgba(0, 0, 0, 0.65); /* THE SCRIM DARKENS, THE INNER LIGHT DIMS. In the light theme the scrim is a bluish mist; in the dark theme it sits on an already dark background and the same mist did nothing. The inner light is the reverse: on a dark strip a 22% white line glares like a fingernail. */ --c-scrim: rgba(0, 0, 0, 0.55); --c-gloss: rgba(255, 255, 255, 0.05); --c-gloss-2:rgba(255, 255, 255, 0.12); --c-edge: rgba(0, 0, 0, 0.55); } /* ============================================================ DERIVED CLASSES Screens use these classes, they do not write raw values. ============================================================ */ .rax-num { font-family: var(--num-font); font-variant-numeric: var(--num-variant); text-align: var(--num-align); white-space: nowrap; } .rax-num[data-sign='neg'] { color: var(--c-neg); } .rax-num[data-sign='pos'] { color: var(--c-pos); } /* Identifiers: record code, document number, tax id, barcode. ITS NAME WAS `erp-code` (K-171). Together with `erp-num` it was defined in the framework's own stylesheet and the framework's own components used them (`DynamicList`, `LinePicker`) — so the framework depended on a class carrying the product's name. When a second product came, "why does Crm write erp-num" was inevitable. The product-leak guard could not see this because it scanned ONLY `*.cs`; its scope was widened in the same round. */ .rax-code { font-family: var(--font-code); font-size: calc(var(--fs-table) - 1px); letter-spacing: -0.01em; } /* FOCUS RING — EXCEPT `tabindex="-1"` (K-162). For accessibility the page title gets programmatic focus (`FocusOnNavigate Selector="h1"`); for that Blazor writes `tabindex="-1"` on the `h1`. The rule caught it too and THE TITLE ON THE LOGOUT SCREEN was boxed with a blue frame. `tabindex="-1"` means "I am not in the tab order": a keyboard user never tabs there, so the ring has nothing to say. Focus is still given — the screen reader reads the title — only the frame is not drawn. The exemption is INSIDE `:where()`: written outside it, the selector's specificity would rise from zero and four separate rules overriding this one (`.rax-pagerx-input`, `.rax-auth-fields input`, `.rax-refresh`, lookup search box) would silently weaken. */ :where(button, input, select, [tabindex]):where(:not([tabindex="-1"])):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); } /* A PROGRAMMATIC FOCUS TARGET DRAWS NO FRAME AT ALL (K-163). In K-162 `tabindex="-1"` was exempted from the rule above and THE FIX WAS HALF DONE: that rule did not only paint the ring, it also wrote `outline: none`. When the exemption dropped both, the BROWSER'S OWN ring appeared — measured, `outline: auto 1px`. The blue frame was replaced by a black one; the user reported it a second time. Lesson: exempting from a rule is exempting from EVERYTHING the rule DOES. If the rule does two jobs, the exemption drops both. `:where()` KEEPS SPECIFICITY AT ZERO: `tabindex="-1"` elements that really want a focus mark (like a roving-focus grid row) override it with their own rules. Being an author rule it beats the browser's default — even with zero specificity. */ :where([tabindex="-1"]):focus, :where([tabindex="-1"]):focus-visible { outline: none; box-shadow: none; } /* The `.erp-grid tbody tr` transition rule that was here was DELETED: no component wrote the `.erp-grid` class, so the rule had never run. Transitions are now in shell.css's "POLISH" section, with real Radzen selectors and the `--motion` token. */ /* ------------------------------------------------------------ TWELFTH DESIGN: «YENİ NESİL» (K-307) The palette the next-generation shell was drawn with (docs/maket). It is a PALETTE like the other eleven and works under both shells; the frame itself (rail, document tabs, cards) is the shell axis's job — `data-shell`, shell.css. Choosing this design under the classic shell gives the classic frame in these colours. Geist (already in the artefact, K-237) for the UI, Geist Mono for identifiers and figures. A cool grey desk under white cards (the `--c-card` split, K-306), one chromatic colour: indigo-blue; the strip and the sidebar in the surface colour. ------------------------------------------------------------ */ /* THE BLOCK IS TWO BLOCKS (K-333): what holds in both themes, and the light palette. It was one block, written after the dark theme's block with the same specificity, so it overwrote it: in the dark theme the card stayed #FFFFFF, the canvas #F3F4F8 and the ink #1A1D27 (measured, K-332). The other eleven designs write only `--c-hue` for the dark side and the dark block derives the rest; a literal colour that reaches the dark theme stays light there. `DarkThemeTests` holds that rule. Here: the type, the dark theme's seed, the card split (in the dark theme the card is the dark SURFACE on the dark canvas — still a card on a desk), the desk, the field frame and the corners. All of it is either not a colour or derived from other tokens, so it follows the theme. */ [data-design='yeninesil'] { --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-code: 'Geist Mono', ui-monospace, monospace; --num-font: var(--font-code); --c-card: var(--c-surface); /* THE DESK IS THE CANVAS (K-312): the mock-up's desk is 96.5 % — the canvas itself; the white card is what stands out, not a darker desk. The shared rule darkens the canvas by 0.03, which made this design's desk the one grey that was not in the mock. */ --c-desk: var(--c-canvas); --c-field-line: color-mix(in srgb, var(--c-ink) 14%, var(--c-canvas)); --c-field-line-soft: color-mix(in srgb, var(--c-ink) 8%, var(--c-canvas)); /* Seed of the dark theme — the accent itself (see :root, --c-hue). The dark block takes the indigo-blue from it, light end of the same hue. */ --c-hue: #3B57D9; --r-control: 7px; --r-card: 12px; } /* THE LIGHT PALETTE — not in the dark theme. `:where()` keeps the specificity of the design block (0,1,0): raised, this block would beat the next-generation shell's own strip and rail (`[data-shell='yeni']`, shell.css, same specificity, later) and the light screen would change. */ [data-design='yeninesil']:where(:not([data-theme='dark'])) { --c-canvas: #F3F4F8; --c-surface: #FFFFFF; --c-surface-2: #F7F8FA; --c-touch: #EEF0F5; --c-ink: #1A1D27; --c-ink-2: #4B5365; --c-ink-3: #7B8395; --c-line: #E4E7EE; --c-line-2: #D2D6E0; --c-accent: #3B57D9; --c-accent-2: #5A73E3; --c-accent-dk: #2C43B3; --c-accent-bg: #EDF0FD; --c-header: var(--c-surface); --c-header-2: var(--c-surface-2); --c-header-ink: var(--c-ink); --c-header-ink-2: var(--c-ink-2); --c-header-line: var(--c-line); --c-brand: var(--c-accent); --c-sidebar: #FBFBFD; --c-sidebar-line: var(--c-line); --c-neg: #C2362B; --c-neg-dk: #9A2A21; --c-pos: #1E8A55; --c-flag: #B8730A; --c-flag-bg:#FDF3E1; --sh-1: 0 1px 2px rgba(20, 24, 40, 0.06), 0 0 0 1px rgba(20, 24, 40, 0.04); --sh-2: 0 6px 18px -6px rgba(20, 24, 40, 0.18), 0 0 0 1px rgba(20, 24, 40, 0.05); --sh-3: 0 20px 50px -12px rgba(20, 24, 40, 0.35), 0 0 0 1px rgba(20, 24, 40, 0.06); } /* NO `button { font-family }` RULE HERE — measured (K-307): such a rule turned every icon button of the strip into text («fullscreen settings person»), the text was wider than the buttons and the whole strip slid left, clipping the brand mark. The UI face reaches the shell through `--font-ui` already; Kurumsal's block sets only feature settings. */ [data-design='yeninesil'] body, [data-design='yeninesil'] .rax-shell, [data-design='yeninesil'] input, [data-design='yeninesil'] textarea, [data-design='yeninesil'] select, [data-design='yeninesil'] button { font-feature-settings: 'tnum' 1; }