@dataimago/css-neutral 0.1.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -0
- package/dist/tailwind-preset.js +151 -0
- package/dist/tokens.css +196 -0
- package/dist/tokens.scss +196 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# @dataimago/css-neutral
|
|
2
|
+
|
|
3
|
+
Neutral-identity compiled CSS + Tailwind preset — paired with `@dataimago/tokens-neutral`. Sensible defaults for externally-owned consumers.
|
|
4
|
+
|
|
5
|
+
**Ships:**
|
|
6
|
+
- `dist/tokens.css` — CSS custom properties (copied from `@dataimago/tokens-neutral`)
|
|
7
|
+
- `dist/tokens.scss` — same, as SCSS
|
|
8
|
+
- `dist/tailwind-preset.js` — Tailwind preset (Noto Sans throughout; neutral palette: ink/stone/paper/functional only)
|
|
9
|
+
|
|
10
|
+
**Does NOT ship** a compiled `dataimago.css` (component stylesheet). The house package's compiled CSS embeds dataimago-specific component styling (forest interactive primary, copper editorial framing, accent moral-weight beats); shipping that under a "neutral" name would be dishonest. Neutral consumers use tokens + Tailwind preset and author their own component stylesheets.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
pnpm add @dataimago/tokens-neutral @dataimago/css-neutral
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```css
|
|
21
|
+
/* globals.css */
|
|
22
|
+
@import '@dataimago/css-neutral/tokens.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
// tailwind.config.js
|
|
27
|
+
module.exports = {
|
|
28
|
+
presets: [require('@dataimago/css-neutral/tailwind-preset')],
|
|
29
|
+
content: [/* your app */],
|
|
30
|
+
};
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## What's in the Tailwind preset
|
|
34
|
+
|
|
35
|
+
| Block | Source | Neutral identity |
|
|
36
|
+
|---|---|---|
|
|
37
|
+
| `colors` | `@dataimago/tokens-neutral` | `ink`, `stone`, `paper`, `functional` only — no `forest`, `copper`, `accent`, `presentation-blue` |
|
|
38
|
+
| `fontFamily` | `@dataimago/tokens-neutral` | All families resolve to Noto Sans stacks (`display`, `display-editorial`, `display-documentation`, `brand`) |
|
|
39
|
+
| `fontSize` | `@dataimago/tokens-neutral` | Same scale as `@dataimago/css` (micro → heading-xl) |
|
|
40
|
+
| `spacing`, `borderRadius`, `boxShadow`, `transitionDuration` | `@dataimago/tokens` (shared) | Same as `@dataimago/css` — non-identity tokens are shared between the two packages |
|
|
41
|
+
|
|
42
|
+
## When to use this vs `@dataimago/css`
|
|
43
|
+
|
|
44
|
+
| Consumer | Use |
|
|
45
|
+
|---|---|
|
|
46
|
+
| dataimago.ai (Level-1 hub) | `@dataimago/css` |
|
|
47
|
+
| dissertation.ai, sgpc.ai, rpkg.ai (Level-2 hubs — dataimago-owned) | `@dataimago/css` |
|
|
48
|
+
| `apps/template/` per-user Level-3 apps | `@dataimago/css-neutral` |
|
|
49
|
+
| Third-party Level-2 hubs (future) | `@dataimago/css-neutral` as starting point; customize via Tailwind preset extension |
|
|
50
|
+
|
|
51
|
+
## Architectural notes
|
|
52
|
+
|
|
53
|
+
Variant A of the two-tier identity pattern — see [`wiki/decisions/tokens-neutral-sibling.md`](../../wiki/decisions/tokens-neutral-sibling.md) for the full rationale, including the iteration-4 deprecation target (Variant B: neutral-as-base + `@dataimago/dataimago-theme` overlay).
|
|
54
|
+
|
|
55
|
+
## Build
|
|
56
|
+
|
|
57
|
+
```sh
|
|
58
|
+
pnpm --filter @dataimago/css-neutral build
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Requires `@dataimago/tokens-neutral` to be built first (Turbo handles the ordering when running `pnpm -r build`).
|
|
62
|
+
|
|
63
|
+
## Related
|
|
64
|
+
|
|
65
|
+
- [`@dataimago/tokens-neutral`](../tokens-neutral) — the neutral tokens this preset reads
|
|
66
|
+
- [`@dataimago/css`](../css) — house identity counterpart
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// @dataimago/css-neutral Tailwind preset — Generated from @dataimago/tokens-neutral
|
|
2
|
+
// Source files:
|
|
3
|
+
// packages/tokens-neutral/src/colors.json (palette + functional colors — neutral identity)
|
|
4
|
+
// packages/tokens-neutral/src/typography.json (font family + size + weight — Noto Sans throughout)
|
|
5
|
+
// packages/tokens/src/spacing.json (spacing, radius, shadow — shared with house)
|
|
6
|
+
// packages/tokens/src/effects.json (theme-aware shadow + transition — shared)
|
|
7
|
+
// Regenerated by packages/css-neutral/build.mjs on every release.
|
|
8
|
+
//
|
|
9
|
+
// Neutral identity (iteration-3 D.0, 2026-05-15): the dataimago house palette
|
|
10
|
+
// (forest, copper, accent, presentation-blue, cream) and display font
|
|
11
|
+
// (Josefin Sans) are intentionally absent. Consumers that want them install
|
|
12
|
+
// the house siblings @dataimago/tokens + @dataimago/css instead. Owners
|
|
13
|
+
// customizing on top of this preset extend theme.extend.colors and
|
|
14
|
+
// fontFamily as they need.
|
|
15
|
+
|
|
16
|
+
/** @type {import('tailwindcss').Config} */
|
|
17
|
+
module.exports = {
|
|
18
|
+
darkMode: 'class',
|
|
19
|
+
theme: {
|
|
20
|
+
extend: {
|
|
21
|
+
colors: {
|
|
22
|
+
"ink": {
|
|
23
|
+
"50": "#f5f5f4",
|
|
24
|
+
"100": "#e7e5e4",
|
|
25
|
+
"200": "#d6d3d1",
|
|
26
|
+
"300": "#a8a29e",
|
|
27
|
+
"400": "#78716c",
|
|
28
|
+
"500": "#57534e",
|
|
29
|
+
"600": "#44403c",
|
|
30
|
+
"700": "#292524",
|
|
31
|
+
"800": "#1c1917",
|
|
32
|
+
"900": "#0c0a09"
|
|
33
|
+
},
|
|
34
|
+
"stone": {
|
|
35
|
+
"50": "#f7f7f6",
|
|
36
|
+
"100": "#ededeb",
|
|
37
|
+
"200": "#dcdcda",
|
|
38
|
+
"300": "#c1c1bf",
|
|
39
|
+
"400": "#a0a0a0",
|
|
40
|
+
"500": "#7c7c7c",
|
|
41
|
+
"600": "#5e5e5c",
|
|
42
|
+
"700": "#424240",
|
|
43
|
+
"800": "#292927",
|
|
44
|
+
"900": "#14140f"
|
|
45
|
+
},
|
|
46
|
+
"paper": {
|
|
47
|
+
"50": "#fefdfb",
|
|
48
|
+
"100": "#fdf9f2",
|
|
49
|
+
"200": "#faf2e3",
|
|
50
|
+
"300": "#f5e8cf",
|
|
51
|
+
"400": "#edd9b3",
|
|
52
|
+
"500": "#e0c088"
|
|
53
|
+
},
|
|
54
|
+
"functional": {
|
|
55
|
+
"success": "#27AE60",
|
|
56
|
+
"warning": "#F39C12",
|
|
57
|
+
"error": "#E74C3C",
|
|
58
|
+
"info": "#3498DB"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
fontFamily: {
|
|
62
|
+
"sans": [
|
|
63
|
+
"Noto Sans",
|
|
64
|
+
"Fira Sans",
|
|
65
|
+
"system-ui",
|
|
66
|
+
"sans-serif"
|
|
67
|
+
],
|
|
68
|
+
"mono": [
|
|
69
|
+
"JetBrains Mono",
|
|
70
|
+
"SF Mono",
|
|
71
|
+
"Monaco",
|
|
72
|
+
"Inconsolata",
|
|
73
|
+
"monospace"
|
|
74
|
+
],
|
|
75
|
+
"display": [
|
|
76
|
+
"Noto Sans",
|
|
77
|
+
"system-ui",
|
|
78
|
+
"sans-serif"
|
|
79
|
+
],
|
|
80
|
+
"display-editorial": [
|
|
81
|
+
"Noto Sans",
|
|
82
|
+
"system-ui",
|
|
83
|
+
"sans-serif"
|
|
84
|
+
],
|
|
85
|
+
"display-documentation": [
|
|
86
|
+
"Noto Sans",
|
|
87
|
+
"system-ui",
|
|
88
|
+
"sans-serif"
|
|
89
|
+
],
|
|
90
|
+
"brand": [
|
|
91
|
+
"Noto Sans",
|
|
92
|
+
"system-ui",
|
|
93
|
+
"sans-serif"
|
|
94
|
+
],
|
|
95
|
+
"math": [
|
|
96
|
+
"Noto Sans Math",
|
|
97
|
+
"Noto Sans",
|
|
98
|
+
"system-ui",
|
|
99
|
+
"sans-serif"
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
fontSize: {
|
|
103
|
+
"micro": "0.75rem",
|
|
104
|
+
"small": "0.875rem",
|
|
105
|
+
"base": "1rem",
|
|
106
|
+
"readable": "1.125rem",
|
|
107
|
+
"emphasis": "1.25rem",
|
|
108
|
+
"heading-small": "1.5rem",
|
|
109
|
+
"heading-medium": "1.875rem",
|
|
110
|
+
"heading-large": "2.25rem",
|
|
111
|
+
"heading-xl": "3rem"
|
|
112
|
+
},
|
|
113
|
+
spacing: {
|
|
114
|
+
"xs": "0.25rem",
|
|
115
|
+
"sm": "0.5rem",
|
|
116
|
+
"md": "1rem",
|
|
117
|
+
"lg": "1.5rem",
|
|
118
|
+
"xl": "2rem",
|
|
119
|
+
"2xl": "3rem",
|
|
120
|
+
"3xl": "4rem"
|
|
121
|
+
},
|
|
122
|
+
borderRadius: {
|
|
123
|
+
"sm": "0.25rem",
|
|
124
|
+
"md": "0.5rem",
|
|
125
|
+
"lg": "0.75rem",
|
|
126
|
+
"xl": "1rem",
|
|
127
|
+
"full": "9999px"
|
|
128
|
+
},
|
|
129
|
+
boxShadow: {
|
|
130
|
+
"sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
131
|
+
"md": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
|
|
132
|
+
"lg": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
|
|
133
|
+
"xl": "0 20px 25px -5px rgb(0 0 0 / 0.1)",
|
|
134
|
+
"subtle": "var(--shadow-subtle, 0 1px 2px 0 rgb(20 20 16 / 0.05))",
|
|
135
|
+
"moderate": "var(--shadow-moderate, 0 4px 6px -1px rgb(20 20 16 / 0.1))",
|
|
136
|
+
"prominent": "var(--shadow-prominent, 0 10px 15px -3px rgb(20 20 16 / 0.1))"
|
|
137
|
+
},
|
|
138
|
+
transitionDuration: {
|
|
139
|
+
"quick": "0.15s",
|
|
140
|
+
"standard": "0.25s",
|
|
141
|
+
"smooth": "0.35s",
|
|
142
|
+
"logo": "0.3s"
|
|
143
|
+
},
|
|
144
|
+
transitionTimingFunction: {
|
|
145
|
+
"quick": "ease",
|
|
146
|
+
"standard": "ease-in-out",
|
|
147
|
+
"smooth": "ease"
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
};
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-palette-ink-50: #f5f5f4;
|
|
3
|
+
--color-palette-ink-100: #e7e5e4;
|
|
4
|
+
--color-palette-ink-200: #d6d3d1;
|
|
5
|
+
--color-palette-ink-300: #a8a29e;
|
|
6
|
+
--color-palette-ink-400: #78716c;
|
|
7
|
+
--color-palette-ink-500: #57534e;
|
|
8
|
+
--color-palette-ink-600: #44403c;
|
|
9
|
+
--color-palette-ink-700: #292524;
|
|
10
|
+
--color-palette-ink-800: #1c1917;
|
|
11
|
+
--color-palette-ink-900: #0c0a09;
|
|
12
|
+
--color-palette-stone-50: #f7f7f6;
|
|
13
|
+
--color-palette-stone-100: #ededeb;
|
|
14
|
+
--color-palette-stone-200: #dcdcda;
|
|
15
|
+
--color-palette-stone-300: #c1c1bf;
|
|
16
|
+
--color-palette-stone-400: #a0a0a0;
|
|
17
|
+
--color-palette-stone-500: #7c7c7c;
|
|
18
|
+
--color-palette-stone-600: #5e5e5c;
|
|
19
|
+
--color-palette-stone-700: #424240;
|
|
20
|
+
--color-palette-stone-800: #292927;
|
|
21
|
+
--color-palette-stone-900: #14140f;
|
|
22
|
+
--color-palette-paper-50: #fefdfb;
|
|
23
|
+
--color-palette-paper-100: #fdf9f2;
|
|
24
|
+
--color-palette-paper-200: #faf2e3;
|
|
25
|
+
--color-palette-paper-300: #f5e8cf;
|
|
26
|
+
--color-palette-paper-400: #edd9b3;
|
|
27
|
+
--color-palette-paper-500: #e0c088;
|
|
28
|
+
--color-functional-success: #27AE60;
|
|
29
|
+
--color-functional-warning: #F39C12;
|
|
30
|
+
--color-functional-error: #E74C3C;
|
|
31
|
+
--color-functional-info: #3498DB;
|
|
32
|
+
--transition-quick: 0.15s ease;
|
|
33
|
+
--transition-standard: 0.25s ease-in-out;
|
|
34
|
+
--transition-smooth: 0.35s ease;
|
|
35
|
+
--transition-logo: 0.3s;
|
|
36
|
+
--font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
|
|
37
|
+
--font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
|
|
38
|
+
--font-family-display: var(--font-family-display-editorial);
|
|
39
|
+
--font-family-display-editorial: Noto Sans, system-ui, sans-serif;
|
|
40
|
+
--font-family-display-documentation: Noto Sans, system-ui, sans-serif;
|
|
41
|
+
--font-family-brand: Noto Sans, system-ui, sans-serif;
|
|
42
|
+
--font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
|
|
43
|
+
--font-size-micro: 0.75rem;
|
|
44
|
+
--font-size-small: 0.875rem;
|
|
45
|
+
--font-size-base: 1rem;
|
|
46
|
+
--font-size-readable: 1.125rem;
|
|
47
|
+
--font-size-emphasis: 1.25rem;
|
|
48
|
+
--font-size-heading-small: 1.5rem;
|
|
49
|
+
--font-size-heading-medium: 1.875rem;
|
|
50
|
+
--font-size-heading-large: 2.25rem;
|
|
51
|
+
--font-size-heading-xl: 3rem;
|
|
52
|
+
--font-weight-extralight: 200;
|
|
53
|
+
--font-weight-light: 300;
|
|
54
|
+
--font-weight-normal: 400;
|
|
55
|
+
--font-weight-medium: 500;
|
|
56
|
+
--font-weight-semibold: 600;
|
|
57
|
+
--font-weight-bold: 700;
|
|
58
|
+
--font-weight-heading-h1: var(--font-weight-semibold);
|
|
59
|
+
--font-weight-heading-h2: var(--font-weight-semibold);
|
|
60
|
+
--font-weight-heading-h3: var(--font-weight-medium);
|
|
61
|
+
--font-weight-heading-h4: var(--font-weight-normal);
|
|
62
|
+
--font-weight-heading-h5: var(--font-weight-normal);
|
|
63
|
+
--font-weight-heading-h6: var(--font-weight-normal);
|
|
64
|
+
--font-weight-heading-subtitle: var(--font-weight-semibold);
|
|
65
|
+
--font-style-normal: normal;
|
|
66
|
+
--font-style-italic: italic;
|
|
67
|
+
--font-style-oblique: oblique;
|
|
68
|
+
--font-lineHeight-tight: 1.25;
|
|
69
|
+
--font-lineHeight-normal: 1.5;
|
|
70
|
+
--font-lineHeight-relaxed: 1.625;
|
|
71
|
+
--font-feature-settings-display: "normal";
|
|
72
|
+
--font-feature-settings-body: "normal";
|
|
73
|
+
--spacing-xs: 0.25rem;
|
|
74
|
+
--spacing-sm: 0.5rem;
|
|
75
|
+
--spacing-md: 1rem;
|
|
76
|
+
--spacing-lg: 1.5rem;
|
|
77
|
+
--spacing-xl: 2rem;
|
|
78
|
+
--spacing-2xl: 3rem;
|
|
79
|
+
--spacing-3xl: 4rem;
|
|
80
|
+
--radius-sm: 0.25rem;
|
|
81
|
+
--radius-md: 0.5rem;
|
|
82
|
+
--radius-lg: 0.75rem;
|
|
83
|
+
--radius-xl: 1rem;
|
|
84
|
+
--radius-full: 9999px;
|
|
85
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
86
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
87
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
88
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:root, [data-bs-theme="light"] {
|
|
92
|
+
--color-surface-page: #ededeb;
|
|
93
|
+
--color-surface-page-scrolled: #ededeb;
|
|
94
|
+
--color-surface-elevated: #f7f7f6;
|
|
95
|
+
--color-surface-sunken: #faf2e3;
|
|
96
|
+
--color-surface-navbar: #ededeb;
|
|
97
|
+
--color-surface-navbar-scrolled: #ededeb;
|
|
98
|
+
--color-surface-code: #faf2e3;
|
|
99
|
+
--color-border-subtle: rgba(12, 10, 9, 0.08);
|
|
100
|
+
--color-border-moderate: rgba(12, 10, 9, 0.15);
|
|
101
|
+
--color-border-strong: rgba(12, 10, 9, 0.25);
|
|
102
|
+
--color-border-card: rgba(12, 10, 9, 0.15);
|
|
103
|
+
--color-border-code: #d6d3d1;
|
|
104
|
+
--color-content-primary: #14140f;
|
|
105
|
+
--color-content-secondary: #7c7c7c;
|
|
106
|
+
--color-content-muted: #78716c;
|
|
107
|
+
--color-content-inverse: #fdf9f2;
|
|
108
|
+
--color-interactive-primary: #292524;
|
|
109
|
+
--color-interactive-hover: #1c1917;
|
|
110
|
+
--color-interactive-accent: #292524;
|
|
111
|
+
--color-interactive-focus: #292524;
|
|
112
|
+
--contrast-high: rgb(20, 20, 16);
|
|
113
|
+
--contrast-readable: rgb(20, 20, 16);
|
|
114
|
+
--contrast-medium: #7c7c7c;
|
|
115
|
+
--contrast-subtle: #7c7c7c;
|
|
116
|
+
--shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
|
|
117
|
+
--shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
|
|
118
|
+
--shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
|
|
119
|
+
--border-subtle: rgba(20, 20, 16, 0.1);
|
|
120
|
+
--border-moderate: rgba(20, 20, 16, 0.15);
|
|
121
|
+
--border-focus: #3498DB;
|
|
122
|
+
--navigation-hover-background: rgba(20, 20, 16, 0.05);
|
|
123
|
+
--navigation-active-background: rgba(20, 20, 16, 0.1);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
[data-bs-theme="dark"] {
|
|
127
|
+
--color-surface-page: #141410;
|
|
128
|
+
--color-surface-page-scrolled: #141410;
|
|
129
|
+
--color-surface-elevated: #1c1917;
|
|
130
|
+
--color-surface-sunken: #0c0a09;
|
|
131
|
+
--color-surface-navbar: #141410;
|
|
132
|
+
--color-surface-navbar-scrolled: #141410;
|
|
133
|
+
--color-surface-code: #1c1917;
|
|
134
|
+
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
135
|
+
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
136
|
+
--color-border-strong: rgba(253, 249, 242, 0.25);
|
|
137
|
+
--color-border-card: rgba(253, 249, 242, 0.15);
|
|
138
|
+
--color-border-code: #292524;
|
|
139
|
+
--color-content-primary: #fdf9f2;
|
|
140
|
+
--color-content-secondary: #a8a29e;
|
|
141
|
+
--color-content-muted: #78716c;
|
|
142
|
+
--color-content-inverse: #0c0a09;
|
|
143
|
+
--color-interactive-primary: #d6d3d1;
|
|
144
|
+
--color-interactive-hover: #a8a29e;
|
|
145
|
+
--color-interactive-accent: #d6d3d1;
|
|
146
|
+
--color-interactive-focus: #d6d3d1;
|
|
147
|
+
--contrast-high: rgb(237, 237, 235);
|
|
148
|
+
--contrast-readable: rgb(237, 237, 235);
|
|
149
|
+
--contrast-medium: #83838f;
|
|
150
|
+
--contrast-subtle: #83838f;
|
|
151
|
+
--shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
|
|
152
|
+
--shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
|
|
153
|
+
--shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
|
|
154
|
+
--border-subtle: rgba(237, 237, 235, 0.1);
|
|
155
|
+
--border-moderate: rgba(237, 237, 235, 0.15);
|
|
156
|
+
--border-focus: #4FC3F7;
|
|
157
|
+
--navigation-hover-background: rgba(237, 237, 235, 0.05);
|
|
158
|
+
--navigation-active-background: rgba(237, 237, 235, 0.1);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@media (prefers-color-scheme: dark) {
|
|
162
|
+
:root {
|
|
163
|
+
--color-surface-page: #141410;
|
|
164
|
+
--color-surface-page-scrolled: #141410;
|
|
165
|
+
--color-surface-elevated: #1c1917;
|
|
166
|
+
--color-surface-sunken: #0c0a09;
|
|
167
|
+
--color-surface-navbar: #141410;
|
|
168
|
+
--color-surface-navbar-scrolled: #141410;
|
|
169
|
+
--color-surface-code: #1c1917;
|
|
170
|
+
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
171
|
+
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
172
|
+
--color-border-strong: rgba(253, 249, 242, 0.25);
|
|
173
|
+
--color-border-card: rgba(253, 249, 242, 0.15);
|
|
174
|
+
--color-border-code: #292524;
|
|
175
|
+
--color-content-primary: #fdf9f2;
|
|
176
|
+
--color-content-secondary: #a8a29e;
|
|
177
|
+
--color-content-muted: #78716c;
|
|
178
|
+
--color-content-inverse: #0c0a09;
|
|
179
|
+
--color-interactive-primary: #d6d3d1;
|
|
180
|
+
--color-interactive-hover: #a8a29e;
|
|
181
|
+
--color-interactive-accent: #d6d3d1;
|
|
182
|
+
--color-interactive-focus: #d6d3d1;
|
|
183
|
+
--contrast-high: rgb(237, 237, 235);
|
|
184
|
+
--contrast-readable: rgb(237, 237, 235);
|
|
185
|
+
--contrast-medium: #83838f;
|
|
186
|
+
--contrast-subtle: #83838f;
|
|
187
|
+
--shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
|
|
188
|
+
--shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
|
|
189
|
+
--shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
|
|
190
|
+
--border-subtle: rgba(237, 237, 235, 0.1);
|
|
191
|
+
--border-moderate: rgba(237, 237, 235, 0.15);
|
|
192
|
+
--border-focus: #4FC3F7;
|
|
193
|
+
--navigation-hover-background: rgba(237, 237, 235, 0.05);
|
|
194
|
+
--navigation-active-background: rgba(237, 237, 235, 0.1);
|
|
195
|
+
}
|
|
196
|
+
}
|
package/dist/tokens.scss
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-palette-ink-50: #f5f5f4;
|
|
3
|
+
--color-palette-ink-100: #e7e5e4;
|
|
4
|
+
--color-palette-ink-200: #d6d3d1;
|
|
5
|
+
--color-palette-ink-300: #a8a29e;
|
|
6
|
+
--color-palette-ink-400: #78716c;
|
|
7
|
+
--color-palette-ink-500: #57534e;
|
|
8
|
+
--color-palette-ink-600: #44403c;
|
|
9
|
+
--color-palette-ink-700: #292524;
|
|
10
|
+
--color-palette-ink-800: #1c1917;
|
|
11
|
+
--color-palette-ink-900: #0c0a09;
|
|
12
|
+
--color-palette-stone-50: #f7f7f6;
|
|
13
|
+
--color-palette-stone-100: #ededeb;
|
|
14
|
+
--color-palette-stone-200: #dcdcda;
|
|
15
|
+
--color-palette-stone-300: #c1c1bf;
|
|
16
|
+
--color-palette-stone-400: #a0a0a0;
|
|
17
|
+
--color-palette-stone-500: #7c7c7c;
|
|
18
|
+
--color-palette-stone-600: #5e5e5c;
|
|
19
|
+
--color-palette-stone-700: #424240;
|
|
20
|
+
--color-palette-stone-800: #292927;
|
|
21
|
+
--color-palette-stone-900: #14140f;
|
|
22
|
+
--color-palette-paper-50: #fefdfb;
|
|
23
|
+
--color-palette-paper-100: #fdf9f2;
|
|
24
|
+
--color-palette-paper-200: #faf2e3;
|
|
25
|
+
--color-palette-paper-300: #f5e8cf;
|
|
26
|
+
--color-palette-paper-400: #edd9b3;
|
|
27
|
+
--color-palette-paper-500: #e0c088;
|
|
28
|
+
--color-functional-success: #27AE60;
|
|
29
|
+
--color-functional-warning: #F39C12;
|
|
30
|
+
--color-functional-error: #E74C3C;
|
|
31
|
+
--color-functional-info: #3498DB;
|
|
32
|
+
--transition-quick: 0.15s ease;
|
|
33
|
+
--transition-standard: 0.25s ease-in-out;
|
|
34
|
+
--transition-smooth: 0.35s ease;
|
|
35
|
+
--transition-logo: 0.3s;
|
|
36
|
+
--font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
|
|
37
|
+
--font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
|
|
38
|
+
--font-family-display: var(--font-family-display-editorial);
|
|
39
|
+
--font-family-display-editorial: Noto Sans, system-ui, sans-serif;
|
|
40
|
+
--font-family-display-documentation: Noto Sans, system-ui, sans-serif;
|
|
41
|
+
--font-family-brand: Noto Sans, system-ui, sans-serif;
|
|
42
|
+
--font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
|
|
43
|
+
--font-size-micro: 0.75rem;
|
|
44
|
+
--font-size-small: 0.875rem;
|
|
45
|
+
--font-size-base: 1rem;
|
|
46
|
+
--font-size-readable: 1.125rem;
|
|
47
|
+
--font-size-emphasis: 1.25rem;
|
|
48
|
+
--font-size-heading-small: 1.5rem;
|
|
49
|
+
--font-size-heading-medium: 1.875rem;
|
|
50
|
+
--font-size-heading-large: 2.25rem;
|
|
51
|
+
--font-size-heading-xl: 3rem;
|
|
52
|
+
--font-weight-extralight: 200;
|
|
53
|
+
--font-weight-light: 300;
|
|
54
|
+
--font-weight-normal: 400;
|
|
55
|
+
--font-weight-medium: 500;
|
|
56
|
+
--font-weight-semibold: 600;
|
|
57
|
+
--font-weight-bold: 700;
|
|
58
|
+
--font-weight-heading-h1: var(--font-weight-semibold);
|
|
59
|
+
--font-weight-heading-h2: var(--font-weight-semibold);
|
|
60
|
+
--font-weight-heading-h3: var(--font-weight-medium);
|
|
61
|
+
--font-weight-heading-h4: var(--font-weight-normal);
|
|
62
|
+
--font-weight-heading-h5: var(--font-weight-normal);
|
|
63
|
+
--font-weight-heading-h6: var(--font-weight-normal);
|
|
64
|
+
--font-weight-heading-subtitle: var(--font-weight-semibold);
|
|
65
|
+
--font-style-normal: normal;
|
|
66
|
+
--font-style-italic: italic;
|
|
67
|
+
--font-style-oblique: oblique;
|
|
68
|
+
--font-lineHeight-tight: 1.25;
|
|
69
|
+
--font-lineHeight-normal: 1.5;
|
|
70
|
+
--font-lineHeight-relaxed: 1.625;
|
|
71
|
+
--font-feature-settings-display: "normal";
|
|
72
|
+
--font-feature-settings-body: "normal";
|
|
73
|
+
--spacing-xs: 0.25rem;
|
|
74
|
+
--spacing-sm: 0.5rem;
|
|
75
|
+
--spacing-md: 1rem;
|
|
76
|
+
--spacing-lg: 1.5rem;
|
|
77
|
+
--spacing-xl: 2rem;
|
|
78
|
+
--spacing-2xl: 3rem;
|
|
79
|
+
--spacing-3xl: 4rem;
|
|
80
|
+
--radius-sm: 0.25rem;
|
|
81
|
+
--radius-md: 0.5rem;
|
|
82
|
+
--radius-lg: 0.75rem;
|
|
83
|
+
--radius-xl: 1rem;
|
|
84
|
+
--radius-full: 9999px;
|
|
85
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
86
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
87
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
88
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
:root, [data-bs-theme="light"] {
|
|
92
|
+
--color-surface-page: #ededeb;
|
|
93
|
+
--color-surface-page-scrolled: #ededeb;
|
|
94
|
+
--color-surface-elevated: #f7f7f6;
|
|
95
|
+
--color-surface-sunken: #faf2e3;
|
|
96
|
+
--color-surface-navbar: #ededeb;
|
|
97
|
+
--color-surface-navbar-scrolled: #ededeb;
|
|
98
|
+
--color-surface-code: #faf2e3;
|
|
99
|
+
--color-border-subtle: rgba(12, 10, 9, 0.08);
|
|
100
|
+
--color-border-moderate: rgba(12, 10, 9, 0.15);
|
|
101
|
+
--color-border-strong: rgba(12, 10, 9, 0.25);
|
|
102
|
+
--color-border-card: rgba(12, 10, 9, 0.15);
|
|
103
|
+
--color-border-code: #d6d3d1;
|
|
104
|
+
--color-content-primary: #14140f;
|
|
105
|
+
--color-content-secondary: #7c7c7c;
|
|
106
|
+
--color-content-muted: #78716c;
|
|
107
|
+
--color-content-inverse: #fdf9f2;
|
|
108
|
+
--color-interactive-primary: #292524;
|
|
109
|
+
--color-interactive-hover: #1c1917;
|
|
110
|
+
--color-interactive-accent: #292524;
|
|
111
|
+
--color-interactive-focus: #292524;
|
|
112
|
+
--contrast-high: rgb(20, 20, 16);
|
|
113
|
+
--contrast-readable: rgb(20, 20, 16);
|
|
114
|
+
--contrast-medium: #7c7c7c;
|
|
115
|
+
--contrast-subtle: #7c7c7c;
|
|
116
|
+
--shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
|
|
117
|
+
--shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
|
|
118
|
+
--shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
|
|
119
|
+
--border-subtle: rgba(20, 20, 16, 0.1);
|
|
120
|
+
--border-moderate: rgba(20, 20, 16, 0.15);
|
|
121
|
+
--border-focus: #3498DB;
|
|
122
|
+
--navigation-hover-background: rgba(20, 20, 16, 0.05);
|
|
123
|
+
--navigation-active-background: rgba(20, 20, 16, 0.1);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
[data-bs-theme="dark"] {
|
|
127
|
+
--color-surface-page: #141410;
|
|
128
|
+
--color-surface-page-scrolled: #141410;
|
|
129
|
+
--color-surface-elevated: #1c1917;
|
|
130
|
+
--color-surface-sunken: #0c0a09;
|
|
131
|
+
--color-surface-navbar: #141410;
|
|
132
|
+
--color-surface-navbar-scrolled: #141410;
|
|
133
|
+
--color-surface-code: #1c1917;
|
|
134
|
+
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
135
|
+
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
136
|
+
--color-border-strong: rgba(253, 249, 242, 0.25);
|
|
137
|
+
--color-border-card: rgba(253, 249, 242, 0.15);
|
|
138
|
+
--color-border-code: #292524;
|
|
139
|
+
--color-content-primary: #fdf9f2;
|
|
140
|
+
--color-content-secondary: #a8a29e;
|
|
141
|
+
--color-content-muted: #78716c;
|
|
142
|
+
--color-content-inverse: #0c0a09;
|
|
143
|
+
--color-interactive-primary: #d6d3d1;
|
|
144
|
+
--color-interactive-hover: #a8a29e;
|
|
145
|
+
--color-interactive-accent: #d6d3d1;
|
|
146
|
+
--color-interactive-focus: #d6d3d1;
|
|
147
|
+
--contrast-high: rgb(237, 237, 235);
|
|
148
|
+
--contrast-readable: rgb(237, 237, 235);
|
|
149
|
+
--contrast-medium: #83838f;
|
|
150
|
+
--contrast-subtle: #83838f;
|
|
151
|
+
--shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
|
|
152
|
+
--shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
|
|
153
|
+
--shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
|
|
154
|
+
--border-subtle: rgba(237, 237, 235, 0.1);
|
|
155
|
+
--border-moderate: rgba(237, 237, 235, 0.15);
|
|
156
|
+
--border-focus: #4FC3F7;
|
|
157
|
+
--navigation-hover-background: rgba(237, 237, 235, 0.05);
|
|
158
|
+
--navigation-active-background: rgba(237, 237, 235, 0.1);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
@media (prefers-color-scheme: dark) {
|
|
162
|
+
:root {
|
|
163
|
+
--color-surface-page: #141410;
|
|
164
|
+
--color-surface-page-scrolled: #141410;
|
|
165
|
+
--color-surface-elevated: #1c1917;
|
|
166
|
+
--color-surface-sunken: #0c0a09;
|
|
167
|
+
--color-surface-navbar: #141410;
|
|
168
|
+
--color-surface-navbar-scrolled: #141410;
|
|
169
|
+
--color-surface-code: #1c1917;
|
|
170
|
+
--color-border-subtle: rgba(253, 249, 242, 0.08);
|
|
171
|
+
--color-border-moderate: rgba(253, 249, 242, 0.15);
|
|
172
|
+
--color-border-strong: rgba(253, 249, 242, 0.25);
|
|
173
|
+
--color-border-card: rgba(253, 249, 242, 0.15);
|
|
174
|
+
--color-border-code: #292524;
|
|
175
|
+
--color-content-primary: #fdf9f2;
|
|
176
|
+
--color-content-secondary: #a8a29e;
|
|
177
|
+
--color-content-muted: #78716c;
|
|
178
|
+
--color-content-inverse: #0c0a09;
|
|
179
|
+
--color-interactive-primary: #d6d3d1;
|
|
180
|
+
--color-interactive-hover: #a8a29e;
|
|
181
|
+
--color-interactive-accent: #d6d3d1;
|
|
182
|
+
--color-interactive-focus: #d6d3d1;
|
|
183
|
+
--contrast-high: rgb(237, 237, 235);
|
|
184
|
+
--contrast-readable: rgb(237, 237, 235);
|
|
185
|
+
--contrast-medium: #83838f;
|
|
186
|
+
--contrast-subtle: #83838f;
|
|
187
|
+
--shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
|
|
188
|
+
--shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
|
|
189
|
+
--shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
|
|
190
|
+
--border-subtle: rgba(237, 237, 235, 0.1);
|
|
191
|
+
--border-moderate: rgba(237, 237, 235, 0.15);
|
|
192
|
+
--border-focus: #4FC3F7;
|
|
193
|
+
--navigation-hover-background: rgba(237, 237, 235, 0.05);
|
|
194
|
+
--navigation-active-background: rgba(237, 237, 235, 0.1);
|
|
195
|
+
}
|
|
196
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@dataimago/css-neutral",
|
|
3
|
+
"version": "0.1.0-alpha.6",
|
|
4
|
+
"description": "Neutral-identity compiled CSS + Tailwind preset — paired with @dataimago/tokens-neutral. Sensible defaults for externally-owned consumers (Level-3 user apps, third-party Level-2 hubs); Noto Sans throughout, neutral palette.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/dataimago/dataimago-design.git",
|
|
9
|
+
"directory": "packages/css-neutral"
|
|
10
|
+
},
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public",
|
|
13
|
+
"registry": "https://registry.npmjs.org/"
|
|
14
|
+
},
|
|
15
|
+
"type": "module",
|
|
16
|
+
"exports": {
|
|
17
|
+
"./tokens.css": "./dist/tokens.css",
|
|
18
|
+
"./tokens.scss": "./dist/tokens.scss",
|
|
19
|
+
"./tailwind-preset": "./dist/tailwind-preset.js",
|
|
20
|
+
"./package.json": "./package.json"
|
|
21
|
+
},
|
|
22
|
+
"files": [
|
|
23
|
+
"dist",
|
|
24
|
+
"README.md"
|
|
25
|
+
],
|
|
26
|
+
"dependencies": {
|
|
27
|
+
"@dataimago/tokens-neutral": "^0.1.0-alpha.6"
|
|
28
|
+
},
|
|
29
|
+
"keywords": [
|
|
30
|
+
"css",
|
|
31
|
+
"design-system",
|
|
32
|
+
"tailwind-preset",
|
|
33
|
+
"dataimago",
|
|
34
|
+
"neutral-identity"
|
|
35
|
+
],
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "node build.mjs"
|
|
38
|
+
}
|
|
39
|
+
}
|