css-base/dist/variables.css at main · medyll/css-base · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* theme/variables.css
 * Layer: tokens
 * Base spacing scale and size scale
 *
 * This file defines the foundational spacing scale used throughout the design system.
 * All spacing tokens (--pad-*, --marg-*, --gap-*) derive from these base values.
 *
 * Scale: 0.25rem (4px) increments following a 4px grid system
 */

/* ─── Typed Token Registration ──
 * @property gives these tokens a type, so an invalid override from a skin
 * falls back to initial-value instead of poisoning every rule that uses it.
 *
 * Declared outside @layer: registration is global and not layer-scoped.
 * inherits: true is required — these are set on :root and read everywhere.
 * initial-value must be computationally independent, hence px literals
 * (no var(), no rem/em). It is only a fallback; :root below sets real values.
 */
@property --gutter-xs { syntax: "<length>"; inherits: true; initial-value: 4px; }
@property --gutter-sm { syntax: "<length>"; inherits: true; initial-value: 8px; }
@property --gutter-md { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --gutter-lg { syntax: "<length>"; inherits: true; initial-value: 24px; }
@property --gutter-xl { syntax: "<length>"; inherits: true; initial-value: 32px; }
@property --gutter-2xl { syntax: "<length>"; inherits: true; initial-value: 48px; }
@property --gutter-3xl { syntax: "<length>"; inherits: true; initial-value: 64px; }

@property --size-xs { syntax: "<length>"; inherits: true; initial-value: 4px; }
@property --size-sm { syntax: "<length>"; inherits: true; initial-value: 8px; }
@property --size-md { syntax: "<length>"; inherits: true; initial-value: 16px; }
@property --size-lg { syntax: "<length>"; inherits: true; initial-value: 24px; }
@property --size-xl { syntax: "<length>"; inherits: true; initial-value: 32px; }
@property --size-2xl { syntax: "<length>"; inherits: true; initial-value: 48px; }
@property --size-3xl { syntax: "<length>"; inherits: true; initial-value: 64px; }

@layer tokens {
	:root {
		/* ─── Spacing Scale (Gutter) ──
		 * Base spacing values in rem units with pixel equivalents
		 * Usage: gap: var(--gutter-md); or padding: var(--gutter-lg);
		 */
		--gutter-xs: 0.25rem;  /* 4px  - tight spacing, inline elements */
		--gutter-sm: 0.5rem;   /* 8px  - compact spacing, icon gaps */
		--gutter-md: 1rem;     /* 16px - default spacing, standard gaps */
		--gutter-lg: 1.5rem;   /* 24px - comfortable spacing, section gaps */
		--gutter-xl: 2rem;     /* 32px - generous spacing, layout sections */
		--gutter-2xl: 3rem;    /* 48px - large spacing, page sections */
		--gutter-3xl: 4rem;    /* 64px - maximum spacing, hero sections */


		/* ───── Default size scale ───── */
		--size-xs: 0.25rem;   /* 4px - extra small elements */
		--size-sm: 0.5rem;    /* 8px - small elements */
		--size-md: 1rem;      /* 16px - default size, standard elements */
		--size-lg: 1.5rem;    /* 24px - large size, large elements */
		--size-xl: 2rem;      /* 32px - extra large size, hero elements */
		--size-2xl: 3rem;     /* 48px - huge size, special elements */
		--size-3xl: 4rem;     /* 64px - maximum size, hero elements */
	}
}