@scattered-light/loomiere-mojave 0.0.0-stage → 0.1.0
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 +20 -2
- package/brand/mojave.json +104 -0
- package/brand/mojave.overrides.json +3 -0
- package/dist/exports/ag-grid-v32.css +87 -0
- package/dist/exports/ag-grid-v33.css +20 -0
- package/dist/exports/ag-grid-v33.d.ts +4 -0
- package/dist/exports/ag-grid-v33.js +120 -0
- package/dist/exports/ag-grid-v36.css +10 -0
- package/dist/exports/ag-grid-v36.d.ts +4 -0
- package/dist/exports/ag-grid-v36.js +123 -0
- package/dist/exports/catalog.json +83 -0
- package/dist/exports/chakra.d.ts +6 -0
- package/dist/exports/chakra.js +3650 -0
- package/dist/exports/figma.json +1 -0
- package/dist/exports/mui.d.ts +5 -0
- package/dist/exports/mui.js +2599 -0
- package/dist/exports/tailwind.css +373 -0
- package/dist/exports/tokens.dtcg.json +10847 -0
- package/dist/pairs.json +1 -0
- package/dist/tokens.css +3998 -0
- package/dist/tokens.d.ts +2457 -0
- package/dist/tokens.js +2457 -0
- package/dist/tokens.json +17937 -0
- package/dist/utilities.css +346 -0
- package/package.json +62 -4
package/README.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @scattered-light/loomiere-mojave
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Mojave, the demo theme for [Loomiere](../loomiere/README.md): desert stone neutrals with a purple accent, built from one brand file, [brand/mojave.json](brand/mojave.json).
|
|
4
|
+
|
|
5
|
+
Use it to try Loomiere without making a brand, or as the starting point for one (`loomiere init` copies this brand).
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
import '@scattered-light/loomiere-mojave/tokens.css';
|
|
9
|
+
import '@scattered-light/loomiere-mojave/utilities.css';
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
It ships everything `loomiere build` writes: `tokens.css`, `utilities.css`, `tokens` (JS), `tokens.json`, `pairs.json`, and `exports/*` for Tailwind, MUI, Chakra, Figma and DTCG. AG Grid themes have short paths:
|
|
13
|
+
|
|
14
|
+
```ts
|
|
15
|
+
import { withBrand } from '@scattered-light/loomiere-mojave/ag-grid/v36';
|
|
16
|
+
import '@scattered-light/loomiere-mojave/ag-grid/v36.css';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Changing it
|
|
20
|
+
|
|
21
|
+
In this repo: `npm run studio` or `npm run lab` from the root, then `npm run theme` to rebuild into `dist/`.
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "../../loomiere/generator/brand.schema.json",
|
|
3
|
+
"name": "mojave",
|
|
4
|
+
"description": "Mojave: warm desert neutrals with a violet primary and ember accent.",
|
|
5
|
+
|
|
6
|
+
"space": {
|
|
7
|
+
"unit": 4,
|
|
8
|
+
"steps": [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
|
|
9
|
+
},
|
|
10
|
+
|
|
11
|
+
"color": {
|
|
12
|
+
"paper": "#ffffff",
|
|
13
|
+
"ink": "#000000",
|
|
14
|
+
"contrast": {
|
|
15
|
+
"spot": {
|
|
16
|
+
"targets": { "50": 1.03, "75": 1.09, "100": 1.18, "200": 1.51, "300": 2.02, "400": 3, "500": 4.5, "600": 6.1, "700": 7.91, "800": 10.87, "900": 14.38, "1000": 17.89 },
|
|
17
|
+
"locked": [500]
|
|
18
|
+
},
|
|
19
|
+
"neutral": {
|
|
20
|
+
"targets": { "50": 1.04, "100": 1.06, "200": 1.12, "300": 1.19, "400": 1.42, "500": 1.72, "600": 2.16, "700": 2.76, "800": 3.65, "900": 5.08, "1000": 7.31, "1100": 11.08, "1200": 16.83 }
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"palettes": {
|
|
24
|
+
"neutral": {
|
|
25
|
+
"label": "stone",
|
|
26
|
+
"contrast": "neutral",
|
|
27
|
+
"keys": ["#e7ece4", "#bcccc1"],
|
|
28
|
+
"exact": true,
|
|
29
|
+
"tone": { "color": "#bbc9bf", "intensity": [0.1, 0.6] }
|
|
30
|
+
},
|
|
31
|
+
"primary": { "label": "mirage", "keys": ["#dbacff", "#973dda", "#402058"], "darkest": "#221928" },
|
|
32
|
+
"secondary": { "label": "ember", "keys": ["#ed6f52", "#57342b"] },
|
|
33
|
+
"tertiary": { "label": "dune", "keys": ["#c4b77a", "#7e7758"] },
|
|
34
|
+
"quaternary": { "label": "silhouette", "keys": ["#b58994", "#612c3d"] },
|
|
35
|
+
"success": { "keys": ["#22c55e"] },
|
|
36
|
+
"warning": { "keys": ["#f59e0b"] },
|
|
37
|
+
"error": { "keys": ["#ef4444"] },
|
|
38
|
+
"info": { "keys": ["#3b82f6"] }
|
|
39
|
+
},
|
|
40
|
+
"pairs": {
|
|
41
|
+
"ember-dune": { "bg": "secondary.600", "fg": "tertiary.50", "description": "Example pair: warm callouts and toasts." },
|
|
42
|
+
"mirage-deep": { "bg": "primary.900", "fg": "primary.75", "accent": "tertiary.200", "description": "Example pair: a dark brand band." },
|
|
43
|
+
"stone-soft": {
|
|
44
|
+
"bg": "neutral.100",
|
|
45
|
+
"fg": "neutral.1200",
|
|
46
|
+
"accent": "primary.600",
|
|
47
|
+
"dark": { "bg": "neutral.1100", "fg": "neutral.100", "accent": "primary.300" },
|
|
48
|
+
"description": "Example pair: a quiet inset panel that flips in dark mode."
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"data": [
|
|
52
|
+
["violet", "#a04fdf"], ["coral", "#ef7053"], ["gold", "#c4b679"], ["burgundy", "#612c3d"],
|
|
53
|
+
["mint", "#86e6ca"], ["navy", "#154975"], ["periwinkle", "#bbc3fe"], ["forest", "#0b5313"],
|
|
54
|
+
["lime", "#74ce4b"], ["yellow", "#dac925"], ["lavender", "#b4a1e2"], ["peach", "#ffc3b5"],
|
|
55
|
+
["cream", "#f1e5af"], ["mauve", "#a6838e"], ["seafoam", "#bfecdf"], ["sky", "#7fa8cb"],
|
|
56
|
+
["ice", "#e5e8ff"], ["sage", "#b1d0b5"], ["chartreuse", "#d0fabd"], ["ivory", "#fffce1"]
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
"type": {
|
|
61
|
+
"families": {
|
|
62
|
+
"display": ["Funnel Display", "sans-serif"],
|
|
63
|
+
"body": ["Barlow Semi Condensed", "sans-serif"],
|
|
64
|
+
"mono": ["Roboto Mono", "monospace"]
|
|
65
|
+
},
|
|
66
|
+
"metrics": {
|
|
67
|
+
"display": { "ascent": 1, "descent": 0.25, "capHeight": 0.675, "xHeight": 0.5 },
|
|
68
|
+
"body": { "ascent": 1, "descent": 0.2, "capHeight": 0.7, "xHeight": 0.506 },
|
|
69
|
+
"mono": { "ascent": 1.048, "descent": 0.271, "capHeight": 0.711, "xHeight": 0.528 }
|
|
70
|
+
},
|
|
71
|
+
"base": { "min": 14, "max": 16 },
|
|
72
|
+
"ratio": { "min": 1.2, "max": 1.2 },
|
|
73
|
+
"viewport": { "min": 320, "max": 1280 },
|
|
74
|
+
"steps": ["xxs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"],
|
|
75
|
+
"baseStep": "md",
|
|
76
|
+
"stepDown": true,
|
|
77
|
+
"displayFrom": "2xl",
|
|
78
|
+
"small": { "fixed": true, "floor": 9 },
|
|
79
|
+
"lineHeight": { "text": 0.228, "heading": -0.046, "textStep": "sm", "headingStep": "3xl", "solidFrom": "4xl" }
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
"radius": {
|
|
83
|
+
"base": 4,
|
|
84
|
+
"steps": { "none": 0, "sm": 0.5, "base": 1, "md": 1.5, "lg": 2, "xl": 3, "2xl": 4, "3xl": 6 }
|
|
85
|
+
},
|
|
86
|
+
|
|
87
|
+
"stroke": { "base": 1, "steps": { "thin": 1, "medium": 2, "thick": 3 } },
|
|
88
|
+
|
|
89
|
+
"elevation": { "shadowColor": "#000000", "strength": 1 },
|
|
90
|
+
|
|
91
|
+
"motion": { "speed": 1, "durations": { "fast": 100, "normal": 200, "slow": 300 } },
|
|
92
|
+
|
|
93
|
+
"roles": {
|
|
94
|
+
"chrome": "neutral",
|
|
95
|
+
"accent": "primary",
|
|
96
|
+
"emphasis": {
|
|
97
|
+
"bold": { "style": "solid", "color": "accent" },
|
|
98
|
+
"standard": { "style": "outline", "color": "accent" },
|
|
99
|
+
"subtle": { "style": "soft", "color": "chrome" },
|
|
100
|
+
"quiet": { "style": "outline", "color": "chrome" }
|
|
101
|
+
},
|
|
102
|
+
"concepts": { "chrome.fg": { "light": "primary.1000" } }
|
|
103
|
+
}
|
|
104
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$comment": "Exact values pinned on top of the math. Nothing is pinned: colors come from the brand keys and contrast tables, sizes from the type scale with stepDown, and line heights from the fonts' own measurements. Add a line (\"font-size.lg\": \"…\") only when the math can't express what you need."
|
|
3
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/* AG Grid 31 and 32 theme for "mojave". Generated by loomiere build from exporters/ag-grid-settings.mjs; do not edit.
|
|
2
|
+
import 'ag-grid-community/styles/ag-grid.css';
|
|
3
|
+
import 'ag-grid-community/styles/ag-theme-quartz.css';
|
|
4
|
+
import './theme/tokens.css';
|
|
5
|
+
import './theme/exports/ag-grid-v32.css';
|
|
6
|
+
<div class="ag-theme-quartz ag-theme-loomiere">…grid…</div>
|
|
7
|
+
Every value is a --sl- variable, so light and dark follow data-theme or the system;
|
|
8
|
+
no -dark theme class is needed. */
|
|
9
|
+
.ag-theme-quartz.ag-theme-loomiere {
|
|
10
|
+
--ag-background-color: var(--sl-table-background);
|
|
11
|
+
--ag-foreground-color: var(--sl-table-color);
|
|
12
|
+
--ag-data-color: var(--sl-table-color);
|
|
13
|
+
--ag-secondary-foreground-color: var(--sl-table-subtle-color);
|
|
14
|
+
--ag-active-color: var(--sl-interactive-default);
|
|
15
|
+
--ag-invalid-color: var(--sl-field-border-color-error);
|
|
16
|
+
--ag-odd-row-background-color: var(--sl-table-background);
|
|
17
|
+
--ag-row-hover-color: var(--sl-table-row-hover);
|
|
18
|
+
--ag-selected-row-background-color: var(--sl-table-row-selected);
|
|
19
|
+
--ag-column-hover-color: var(--sl-table-column-hover);
|
|
20
|
+
--ag-range-selection-background-color: var(--sl-table-range-background);
|
|
21
|
+
--ag-range-selection-border-color: var(--sl-table-range-border);
|
|
22
|
+
--ag-font-family: var(--sl-font-condense-font-family);
|
|
23
|
+
--ag-font-size: var(--sl-font-condense-font-size);
|
|
24
|
+
--ag-grid-size: var(--sl-space-2);
|
|
25
|
+
--ag-row-height: var(--sl-table-row-height);
|
|
26
|
+
--ag-header-height: var(--sl-table-header-height);
|
|
27
|
+
--ag-list-item-height: var(--sl-control-height-sm);
|
|
28
|
+
--ag-cell-horizontal-padding: var(--sl-table-cell-padding-inline);
|
|
29
|
+
--ag-icon-size: var(--sl-icon-size-condense);
|
|
30
|
+
--ag-border-color: var(--sl-table-border-color);
|
|
31
|
+
--ag-wrapper-border-radius: var(--sl-table-radius);
|
|
32
|
+
--ag-border-radius: var(--sl-radius-item);
|
|
33
|
+
--ag-row-border-color: var(--sl-table-row-border-color);
|
|
34
|
+
--ag-header-column-resize-handle-color: var(--sl-table-border-color);
|
|
35
|
+
--ag-control-panel-background-color: var(--sl-table-header-background);
|
|
36
|
+
--ag-header-background-color: var(--sl-table-header-background);
|
|
37
|
+
--ag-header-foreground-color: var(--sl-table-header-color);
|
|
38
|
+
--ag-side-button-selected-background-color: var(--sl-table-background);
|
|
39
|
+
--ag-icon-font-color: var(--sl-table-subtle-color);
|
|
40
|
+
--ag-input-border-color: var(--sl-field-border-color);
|
|
41
|
+
--ag-input-focus-border-color: var(--sl-field-border-color-focus);
|
|
42
|
+
--ag-input-focus-box-shadow: var(--sl-field-shadow-focus);
|
|
43
|
+
--ag-input-border-color-invalid: var(--sl-field-border-color-error);
|
|
44
|
+
--ag-input-disabled-background-color: var(--sl-field-background-disabled);
|
|
45
|
+
--ag-checkbox-background-color: var(--sl-check-background);
|
|
46
|
+
--ag-checkbox-unchecked-color: var(--sl-check-border-color);
|
|
47
|
+
--ag-checkbox-checked-color: var(--sl-check-background-checked);
|
|
48
|
+
--ag-checkbox-indeterminate-color: var(--sl-check-background-checked);
|
|
49
|
+
--ag-menu-background-color: var(--sl-popup-background);
|
|
50
|
+
--ag-menu-border-color: var(--sl-popup-border-color);
|
|
51
|
+
--ag-popup-shadow: var(--sl-popup-shadow);
|
|
52
|
+
--ag-panel-background-color: var(--sl-popup-background);
|
|
53
|
+
--ag-card-shadow: var(--sl-elevation-sm);
|
|
54
|
+
--ag-modal-overlay-background-color: var(--sl-modal-backdrop);
|
|
55
|
+
--ag-tooltip-background-color: var(--sl-surface-inverse);
|
|
56
|
+
--ag-secondary-border-color: var(--sl-table-row-border-color);
|
|
57
|
+
--ag-subheader-background-color: var(--sl-table-header-background);
|
|
58
|
+
--ag-disabled-foreground-color: var(--sl-text-disabled);
|
|
59
|
+
--ag-input-disabled-border-color: var(--sl-field-border-color);
|
|
60
|
+
--ag-header-cell-hover-background-color: var(--sl-table-header-background-hover);
|
|
61
|
+
--ag-header-column-separator-display: none;
|
|
62
|
+
--ag-borders: solid var(--sl-stroke-default);
|
|
63
|
+
--ag-borders-critical: solid var(--sl-stroke-default);
|
|
64
|
+
--ag-row-border-style: solid;
|
|
65
|
+
--ag-row-border-width: var(--sl-stroke-default);
|
|
66
|
+
--ag-checkbox-border-radius: var(--sl-check-radius);
|
|
67
|
+
--ag-card-radius: var(--sl-radius-item);
|
|
68
|
+
color-scheme: var(--sl-color-scheme);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* The old themes have no header type settings: the header uses the condense-subtitle text style. */
|
|
72
|
+
.ag-theme-loomiere .ag-header-cell-text {
|
|
73
|
+
font-family: var(--sl-font-condense-subtitle-font-family);
|
|
74
|
+
font-size: var(--sl-font-condense-subtitle-font-size);
|
|
75
|
+
font-weight: var(--sl-font-condense-subtitle-font-weight);
|
|
76
|
+
}
|
|
77
|
+
.ag-theme-loomiere .ag-header-cell:hover {
|
|
78
|
+
background-color: var(--sl-table-header-background-hover);
|
|
79
|
+
}
|
|
80
|
+
/* Letter spacing comes from the condense and condense-subtitle text styles. */
|
|
81
|
+
.ag-theme-loomiere {
|
|
82
|
+
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
83
|
+
}
|
|
84
|
+
.ag-theme-loomiere .ag-header-cell-text {
|
|
85
|
+
letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
|
|
86
|
+
line-height: var(--sl-font-condense-subtitle-line-height);
|
|
87
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* AG Grid 33 to 35 additions for "mojave". Generated by loomiere build; do not edit. Load after tokens.css. */
|
|
2
|
+
/* Letter spacing comes from the condense and condense-subtitle text styles. */
|
|
3
|
+
.ag-root-wrapper,
|
|
4
|
+
.ag-popup {
|
|
5
|
+
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
6
|
+
}
|
|
7
|
+
.ag-header-cell-text {
|
|
8
|
+
letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
|
|
9
|
+
line-height: var(--sl-font-condense-subtitle-line-height);
|
|
10
|
+
}
|
|
11
|
+
/* 33 to 35 hard-code a 5px radius on picker fields (36 uses borderRadius). */
|
|
12
|
+
.ag-picker-field-wrapper {
|
|
13
|
+
border-radius: var(--sl-field-radius);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* 33 to 35 give focused text inputs the keyboard focus ring; 36 uses inputFocusShadow, like Input. */
|
|
17
|
+
.ag-root-wrapper .ag-input-field-input:focus,
|
|
18
|
+
.ag-popup .ag-input-field-input:focus {
|
|
19
|
+
box-shadow: var(--sl-field-shadow-focus);
|
|
20
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/** AG Grid 33 to 35 theme settings for "mojave". */
|
|
2
|
+
export declare const brandParams: Readonly<Record<string, string>>;
|
|
3
|
+
/** Applies the brand's settings to an AG Grid theme, usually themeQuartz. */
|
|
4
|
+
export declare function withBrand<T extends { withParams(params: object): T }>(base: T): T;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AG Grid 33 to 35 theme for "mojave". Generated by loomiere build from exporters/ag-grid-settings.mjs; do not edit.
|
|
3
|
+
* import { themeQuartz } from 'ag-grid-community';
|
|
4
|
+
* import { withBrand } from './theme/exports/ag-grid-v33.js';
|
|
5
|
+
* import './theme/tokens.css';
|
|
6
|
+
* import './theme/exports/ag-grid-v33.css';
|
|
7
|
+
* <AgGridReact theme={withBrand(themeQuartz)} ... />
|
|
8
|
+
* Every value is a --sl- variable, so light and dark follow data-theme or the system.
|
|
9
|
+
*/
|
|
10
|
+
export const brandParams = {
|
|
11
|
+
browserColorScheme: "var(--sl-color-scheme)",
|
|
12
|
+
backgroundColor: "var(--sl-table-background)",
|
|
13
|
+
foregroundColor: "var(--sl-table-color)",
|
|
14
|
+
textColor: "var(--sl-table-color)",
|
|
15
|
+
cellTextColor: "var(--sl-table-color)",
|
|
16
|
+
subtleTextColor: "var(--sl-table-subtle-color)",
|
|
17
|
+
accentColor: "var(--sl-interactive-default)",
|
|
18
|
+
invalidColor: "var(--sl-field-border-color-error)",
|
|
19
|
+
oddRowBackgroundColor: "var(--sl-table-background)",
|
|
20
|
+
rowHoverColor: "var(--sl-table-row-hover)",
|
|
21
|
+
selectedRowBackgroundColor: "var(--sl-table-row-selected)",
|
|
22
|
+
columnHoverColor: "var(--sl-table-column-hover)",
|
|
23
|
+
rangeSelectionBackgroundColor: "var(--sl-table-range-background)",
|
|
24
|
+
rangeSelectionBorderColor: "var(--sl-table-range-border)",
|
|
25
|
+
cellEditingBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-focus)",
|
|
26
|
+
cellEditingShadow: "var(--sl-field-shadow-focus)",
|
|
27
|
+
fontFamily: "var(--sl-font-condense-font-family)",
|
|
28
|
+
fontSize: "var(--sl-font-condense-font-size)",
|
|
29
|
+
headerFontFamily: "var(--sl-font-condense-subtitle-font-family)",
|
|
30
|
+
headerFontSize: "var(--sl-font-condense-subtitle-font-size)",
|
|
31
|
+
headerFontWeight: "var(--sl-font-condense-subtitle-font-weight)",
|
|
32
|
+
spacing: "var(--sl-space-2)",
|
|
33
|
+
rowHeight: "var(--sl-table-row-height)",
|
|
34
|
+
headerHeight: "var(--sl-table-header-height)",
|
|
35
|
+
listItemHeight: "var(--sl-control-height-sm)",
|
|
36
|
+
cellHorizontalPadding: "var(--sl-table-cell-padding-inline)",
|
|
37
|
+
iconSize: "var(--sl-icon-size-condense)",
|
|
38
|
+
borderColor: "var(--sl-table-border-color)",
|
|
39
|
+
wrapperBorder: "var(--sl-stroke-default) solid var(--sl-table-border-color)",
|
|
40
|
+
wrapperBorderRadius: "var(--sl-table-radius)",
|
|
41
|
+
borderRadius: "var(--sl-radius-item)",
|
|
42
|
+
rowBorder: "var(--sl-stroke-default) solid var(--sl-table-row-border-color)",
|
|
43
|
+
headerRowBorder: "var(--sl-stroke-default) solid var(--sl-table-border-color)",
|
|
44
|
+
columnBorder: "none",
|
|
45
|
+
headerColumnResizeHandleColor: "var(--sl-table-border-color)",
|
|
46
|
+
chromeBackgroundColor: "var(--sl-table-header-background)",
|
|
47
|
+
headerBackgroundColor: "var(--sl-table-header-background)",
|
|
48
|
+
headerTextColor: "var(--sl-table-header-color)",
|
|
49
|
+
headerCellHoverBackgroundColor: "var(--sl-table-header-background-hover)",
|
|
50
|
+
sideBarBackgroundColor: "var(--sl-table-header-background)",
|
|
51
|
+
sideButtonSelectedBackgroundColor: "var(--sl-table-background)",
|
|
52
|
+
iconColor: "var(--sl-table-subtle-color)",
|
|
53
|
+
focusShadow: "0 0 0 var(--sl-a11y-focus-outline-width) var(--sl-focus-ring), 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)",
|
|
54
|
+
inputBackgroundColor: "var(--sl-field-background)",
|
|
55
|
+
inputTextColor: "var(--sl-field-color)",
|
|
56
|
+
inputPlaceholderTextColor: "var(--sl-field-placeholder-color)",
|
|
57
|
+
inputBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color)",
|
|
58
|
+
inputBorderRadius: "var(--sl-field-radius)",
|
|
59
|
+
inputFocusBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-focus)",
|
|
60
|
+
inputFocusShadow: "var(--sl-field-shadow-focus)",
|
|
61
|
+
inputInvalidBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-error)",
|
|
62
|
+
inputDisabledBackgroundColor: "var(--sl-field-background-disabled)",
|
|
63
|
+
inputDisabledTextColor: "var(--sl-field-color-disabled)",
|
|
64
|
+
inputIconColor: "var(--sl-table-subtle-color)",
|
|
65
|
+
inputHeight: "var(--sl-control-height-sm)",
|
|
66
|
+
inputPaddingStart: "var(--sl-control-padding-inline-sm)",
|
|
67
|
+
checkboxBorderRadius: "var(--sl-check-radius)",
|
|
68
|
+
checkboxBorderWidth: "var(--sl-check-border-width)",
|
|
69
|
+
checkboxUncheckedBackgroundColor: "var(--sl-check-background)",
|
|
70
|
+
checkboxUncheckedBorderColor: "var(--sl-check-border-color)",
|
|
71
|
+
checkboxCheckedBackgroundColor: "var(--sl-check-background-checked)",
|
|
72
|
+
checkboxCheckedBorderColor: "var(--sl-check-border-color-checked)",
|
|
73
|
+
checkboxCheckedShapeColor: "var(--sl-check-mark-color)",
|
|
74
|
+
checkboxIndeterminateBackgroundColor: "var(--sl-check-background-checked)",
|
|
75
|
+
checkboxIndeterminateBorderColor: "var(--sl-check-border-color-checked)",
|
|
76
|
+
checkboxIndeterminateShapeColor: "var(--sl-check-mark-color)",
|
|
77
|
+
toggleButtonOnBackgroundColor: "var(--sl-check-background-checked)",
|
|
78
|
+
toggleButtonOffBackgroundColor: "var(--sl-check-border-color)",
|
|
79
|
+
toggleButtonSwitchBackgroundColor: "var(--sl-check-background)",
|
|
80
|
+
menuBackgroundColor: "var(--sl-popup-background)",
|
|
81
|
+
menuTextColor: "var(--sl-item-color)",
|
|
82
|
+
menuBorder: "var(--sl-popup-border-width) solid var(--sl-popup-border-color)",
|
|
83
|
+
menuShadow: "var(--sl-popup-shadow)",
|
|
84
|
+
menuSeparatorColor: "var(--sl-popup-separator-color)",
|
|
85
|
+
popupShadow: "var(--sl-popup-shadow)",
|
|
86
|
+
dropdownShadow: "var(--sl-popup-shadow)",
|
|
87
|
+
pickerListBackgroundColor: "var(--sl-popup-background)",
|
|
88
|
+
pickerListBorder: "var(--sl-popup-border-width) solid var(--sl-popup-border-color)",
|
|
89
|
+
panelBackgroundColor: "var(--sl-popup-background)",
|
|
90
|
+
panelTitleBarBackgroundColor: "var(--sl-table-header-background)",
|
|
91
|
+
cardShadow: "var(--sl-elevation-sm)",
|
|
92
|
+
dialogBorder: "var(--sl-modal-border-width) solid var(--sl-modal-border-color)",
|
|
93
|
+
dialogShadow: "var(--sl-modal-shadow)",
|
|
94
|
+
modalOverlayBackgroundColor: "var(--sl-modal-backdrop)",
|
|
95
|
+
tooltipBackgroundColor: "var(--sl-surface-inverse)",
|
|
96
|
+
tooltipTextColor: "var(--sl-text-on-inverse-surface)",
|
|
97
|
+
tooltipBorder: "none",
|
|
98
|
+
buttonBackgroundColor: "var(--sl-emphasis-standard-bg)",
|
|
99
|
+
buttonTextColor: "var(--sl-emphasis-standard-fg)",
|
|
100
|
+
buttonBorder: "var(--sl-stroke-default) solid var(--sl-emphasis-standard-border)",
|
|
101
|
+
buttonHoverBackgroundColor: "var(--sl-emphasis-standard-bg-hover)",
|
|
102
|
+
buttonHoverBorder: "var(--sl-stroke-default) solid var(--sl-emphasis-standard-border-hover)",
|
|
103
|
+
buttonActiveBackgroundColor: "var(--sl-emphasis-standard-bg-active)",
|
|
104
|
+
buttonBorderRadius: "var(--sl-radius-control)",
|
|
105
|
+
buttonFontWeight: "var(--sl-font-condense-trigger-font-weight)",
|
|
106
|
+
iconButtonColor: "var(--sl-icon-button-color)",
|
|
107
|
+
iconButtonHoverColor: "var(--sl-icon-button-color-hover)",
|
|
108
|
+
iconButtonHoverBackgroundColor: "var(--sl-icon-button-background-hover)",
|
|
109
|
+
iconButtonBorderRadius: "var(--sl-icon-button-radius)",
|
|
110
|
+
tabTextColor: "var(--sl-table-subtle-color)",
|
|
111
|
+
tabHoverTextColor: "var(--sl-table-color)",
|
|
112
|
+
tabSelectedTextColor: "var(--sl-disclosure-selected-color)",
|
|
113
|
+
tabSelectedUnderlineColor: "var(--sl-disclosure-indicator-color)",
|
|
114
|
+
tabSelectedUnderlineWidth: "var(--sl-disclosure-indicator-width)",
|
|
115
|
+
valueChangeDeltaUpColor: "var(--sl-scope-success-fg)",
|
|
116
|
+
valueChangeDeltaDownColor: "var(--sl-scope-error-fg)",
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
/** Applies the brand's settings to an AG Grid theme, usually themeQuartz. */
|
|
120
|
+
export const withBrand = (base) => base.withParams(brandParams);
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* AG Grid 36 and later additions for "mojave". Generated by loomiere build; do not edit. Load after tokens.css. */
|
|
2
|
+
/* Letter spacing comes from the condense and condense-subtitle text styles. */
|
|
3
|
+
.ag-root-wrapper,
|
|
4
|
+
.ag-popup {
|
|
5
|
+
letter-spacing: var(--sl-font-condense-letter-spacing);
|
|
6
|
+
}
|
|
7
|
+
.ag-header-cell-text {
|
|
8
|
+
letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
|
|
9
|
+
line-height: var(--sl-font-condense-subtitle-line-height);
|
|
10
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/** AG Grid 36 and later theme settings for "mojave". */
|
|
2
|
+
export declare const brandParams: Readonly<Record<string, string>>;
|
|
3
|
+
/** Applies the brand's settings to an AG Grid theme, usually themeQuartz. */
|
|
4
|
+
export declare function withBrand<T extends { withParams(params: object): T }>(base: T): T;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AG Grid 36 and later theme for "mojave". Generated by loomiere build from exporters/ag-grid-settings.mjs; do not edit.
|
|
3
|
+
* import { themeQuartz } from 'ag-grid-community';
|
|
4
|
+
* import { withBrand } from './theme/exports/ag-grid-v36.js';
|
|
5
|
+
* import './theme/tokens.css';
|
|
6
|
+
* import './theme/exports/ag-grid-v36.css';
|
|
7
|
+
* <AgGridReact theme={withBrand(themeQuartz)} ... />
|
|
8
|
+
* Every value is a --sl- variable, so light and dark follow data-theme or the system.
|
|
9
|
+
*/
|
|
10
|
+
export const brandParams = {
|
|
11
|
+
browserColorScheme: "var(--sl-color-scheme)",
|
|
12
|
+
backgroundColor: "var(--sl-table-background)",
|
|
13
|
+
foregroundColor: "var(--sl-table-color)",
|
|
14
|
+
textColor: "var(--sl-table-color)",
|
|
15
|
+
cellTextColor: "var(--sl-table-color)",
|
|
16
|
+
subtleTextColor: "var(--sl-table-subtle-color)",
|
|
17
|
+
accentColor: "var(--sl-interactive-default)",
|
|
18
|
+
invalidColor: "var(--sl-field-border-color-error)",
|
|
19
|
+
oddRowBackgroundColor: "var(--sl-table-background)",
|
|
20
|
+
rowHoverColor: "var(--sl-table-row-hover)",
|
|
21
|
+
selectedRowBackgroundColor: "var(--sl-table-row-selected)",
|
|
22
|
+
columnHoverColor: "var(--sl-table-column-hover)",
|
|
23
|
+
rangeSelectionBackgroundColor: "var(--sl-table-range-background)",
|
|
24
|
+
rangeSelectionBorderColor: "var(--sl-table-range-border)",
|
|
25
|
+
cellEditingBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-focus)",
|
|
26
|
+
cellEditingShadow: "var(--sl-field-shadow-focus)",
|
|
27
|
+
fontFamily: "var(--sl-font-condense-font-family)",
|
|
28
|
+
fontSize: "var(--sl-font-condense-font-size)",
|
|
29
|
+
fontWeight: "var(--sl-font-condense-font-weight)",
|
|
30
|
+
headerFontFamily: "var(--sl-font-condense-subtitle-font-family)",
|
|
31
|
+
headerFontSize: "var(--sl-font-condense-subtitle-font-size)",
|
|
32
|
+
headerFontWeight: "var(--sl-font-condense-subtitle-font-weight)",
|
|
33
|
+
spacing: "var(--sl-space-2)",
|
|
34
|
+
rowHeight: "var(--sl-table-row-height)",
|
|
35
|
+
headerHeight: "var(--sl-table-header-height)",
|
|
36
|
+
listItemHeight: "var(--sl-control-height-sm)",
|
|
37
|
+
cellHorizontalPadding: "var(--sl-table-cell-padding-inline)",
|
|
38
|
+
iconSize: "var(--sl-icon-size-condense)",
|
|
39
|
+
borderColor: "var(--sl-table-border-color)",
|
|
40
|
+
wrapperBorder: "var(--sl-stroke-default) solid var(--sl-table-border-color)",
|
|
41
|
+
wrapperBorderRadius: "var(--sl-table-radius)",
|
|
42
|
+
borderRadius: "var(--sl-radius-item)",
|
|
43
|
+
borderWidth: "var(--sl-stroke-default)",
|
|
44
|
+
rowBorder: "var(--sl-stroke-default) solid var(--sl-table-row-border-color)",
|
|
45
|
+
headerRowBorder: "var(--sl-stroke-default) solid var(--sl-table-border-color)",
|
|
46
|
+
columnBorder: "none",
|
|
47
|
+
headerColumnResizeHandleColor: "var(--sl-table-border-color)",
|
|
48
|
+
chromeBackgroundColor: "var(--sl-table-header-background)",
|
|
49
|
+
headerBackgroundColor: "var(--sl-table-header-background)",
|
|
50
|
+
headerTextColor: "var(--sl-table-header-color)",
|
|
51
|
+
headerCellHoverBackgroundColor: "var(--sl-table-header-background-hover)",
|
|
52
|
+
sideBarBackgroundColor: "var(--sl-table-header-background)",
|
|
53
|
+
sideButtonSelectedBackgroundColor: "var(--sl-table-background)",
|
|
54
|
+
iconColor: "var(--sl-table-subtle-color)",
|
|
55
|
+
focusShadow: "0 0 0 var(--sl-a11y-focus-outline-width) var(--sl-focus-ring), 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color)",
|
|
56
|
+
focusErrorShadow: "var(--sl-field-shadow-focus-error)",
|
|
57
|
+
inputBackgroundColor: "var(--sl-field-background)",
|
|
58
|
+
inputTextColor: "var(--sl-field-color)",
|
|
59
|
+
inputPlaceholderTextColor: "var(--sl-field-placeholder-color)",
|
|
60
|
+
inputBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color)",
|
|
61
|
+
inputBorderRadius: "var(--sl-field-radius)",
|
|
62
|
+
inputFocusBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-focus)",
|
|
63
|
+
inputFocusShadow: "var(--sl-field-shadow-focus)",
|
|
64
|
+
inputInvalidBorder: "var(--sl-field-border-width) solid var(--sl-field-border-color-error)",
|
|
65
|
+
inputDisabledBackgroundColor: "var(--sl-field-background-disabled)",
|
|
66
|
+
inputDisabledTextColor: "var(--sl-field-color-disabled)",
|
|
67
|
+
inputIconColor: "var(--sl-table-subtle-color)",
|
|
68
|
+
inputHeight: "var(--sl-control-height-sm)",
|
|
69
|
+
inputPaddingStart: "var(--sl-control-padding-inline-sm)",
|
|
70
|
+
checkboxBorderRadius: "var(--sl-check-radius)",
|
|
71
|
+
checkboxBorderWidth: "var(--sl-check-border-width)",
|
|
72
|
+
checkboxUncheckedBackgroundColor: "var(--sl-check-background)",
|
|
73
|
+
checkboxUncheckedBorderColor: "var(--sl-check-border-color)",
|
|
74
|
+
checkboxCheckedBackgroundColor: "var(--sl-check-background-checked)",
|
|
75
|
+
checkboxCheckedBorderColor: "var(--sl-check-border-color-checked)",
|
|
76
|
+
checkboxCheckedShapeColor: "var(--sl-check-mark-color)",
|
|
77
|
+
checkboxIndeterminateBackgroundColor: "var(--sl-check-background-checked)",
|
|
78
|
+
checkboxIndeterminateBorderColor: "var(--sl-check-border-color-checked)",
|
|
79
|
+
checkboxIndeterminateShapeColor: "var(--sl-check-mark-color)",
|
|
80
|
+
toggleButtonOnBackgroundColor: "var(--sl-check-background-checked)",
|
|
81
|
+
toggleButtonOffBackgroundColor: "var(--sl-check-border-color)",
|
|
82
|
+
toggleButtonSwitchBackgroundColor: "var(--sl-check-background)",
|
|
83
|
+
menuBackgroundColor: "var(--sl-popup-background)",
|
|
84
|
+
menuTextColor: "var(--sl-item-color)",
|
|
85
|
+
menuBorder: "var(--sl-popup-border-width) solid var(--sl-popup-border-color)",
|
|
86
|
+
menuShadow: "var(--sl-popup-shadow)",
|
|
87
|
+
menuSeparatorColor: "var(--sl-popup-separator-color)",
|
|
88
|
+
popupShadow: "var(--sl-popup-shadow)",
|
|
89
|
+
dropdownShadow: "var(--sl-popup-shadow)",
|
|
90
|
+
pickerListBackgroundColor: "var(--sl-popup-background)",
|
|
91
|
+
pickerListBorder: "var(--sl-popup-border-width) solid var(--sl-popup-border-color)",
|
|
92
|
+
panelBackgroundColor: "var(--sl-popup-background)",
|
|
93
|
+
panelTitleBarBackgroundColor: "var(--sl-table-header-background)",
|
|
94
|
+
cardShadow: "var(--sl-elevation-sm)",
|
|
95
|
+
dialogBorder: "var(--sl-modal-border-width) solid var(--sl-modal-border-color)",
|
|
96
|
+
dialogShadow: "var(--sl-modal-shadow)",
|
|
97
|
+
modalOverlayBackgroundColor: "var(--sl-modal-backdrop)",
|
|
98
|
+
tooltipBackgroundColor: "var(--sl-surface-inverse)",
|
|
99
|
+
tooltipTextColor: "var(--sl-text-on-inverse-surface)",
|
|
100
|
+
tooltipBorder: "none",
|
|
101
|
+
buttonBackgroundColor: "var(--sl-emphasis-standard-bg)",
|
|
102
|
+
buttonTextColor: "var(--sl-emphasis-standard-fg)",
|
|
103
|
+
buttonBorder: "var(--sl-stroke-default) solid var(--sl-emphasis-standard-border)",
|
|
104
|
+
buttonHoverBackgroundColor: "var(--sl-emphasis-standard-bg-hover)",
|
|
105
|
+
buttonHoverBorder: "var(--sl-stroke-default) solid var(--sl-emphasis-standard-border-hover)",
|
|
106
|
+
buttonActiveBackgroundColor: "var(--sl-emphasis-standard-bg-active)",
|
|
107
|
+
buttonBorderRadius: "var(--sl-radius-control)",
|
|
108
|
+
buttonFontWeight: "var(--sl-font-condense-trigger-font-weight)",
|
|
109
|
+
iconButtonColor: "var(--sl-icon-button-color)",
|
|
110
|
+
iconButtonHoverColor: "var(--sl-icon-button-color-hover)",
|
|
111
|
+
iconButtonHoverBackgroundColor: "var(--sl-icon-button-background-hover)",
|
|
112
|
+
iconButtonBorderRadius: "var(--sl-icon-button-radius)",
|
|
113
|
+
tabTextColor: "var(--sl-table-subtle-color)",
|
|
114
|
+
tabHoverTextColor: "var(--sl-table-color)",
|
|
115
|
+
tabSelectedTextColor: "var(--sl-disclosure-selected-color)",
|
|
116
|
+
tabSelectedUnderlineColor: "var(--sl-disclosure-indicator-color)",
|
|
117
|
+
tabSelectedUnderlineWidth: "var(--sl-disclosure-indicator-width)",
|
|
118
|
+
valueChangeDeltaUpColor: "var(--sl-scope-success-fg)",
|
|
119
|
+
valueChangeDeltaDownColor: "var(--sl-scope-error-fg)",
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
/** Applies the brand's settings to an AG Grid theme, usually themeQuartz. */
|
|
123
|
+
export const withBrand = (base) => base.withParams(brandParams);
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
{
|
|
2
|
+
"brand": "mojave",
|
|
3
|
+
"exports": [
|
|
4
|
+
{
|
|
5
|
+
"id": "dtcg",
|
|
6
|
+
"name": "Design tokens (DTCG)",
|
|
7
|
+
"file": "tokens.dtcg.json",
|
|
8
|
+
"files": [
|
|
9
|
+
"tokens.dtcg.json"
|
|
10
|
+
],
|
|
11
|
+
"for": "Any tool that reads the W3C design tokens format: Figma (Tokens Studio, variable importers), Style Dictionary, Terrazzo, Penpot."
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"id": "figma",
|
|
15
|
+
"name": "Figma variables",
|
|
16
|
+
"file": "figma.json",
|
|
17
|
+
"files": [
|
|
18
|
+
"figma.json"
|
|
19
|
+
],
|
|
20
|
+
"for": "Syncing to Figma variables: Brand, Pairs and Theme collections with light and dark modes. Ask Claude to sync a step."
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"id": "tailwind",
|
|
24
|
+
"name": "Tailwind CSS v4",
|
|
25
|
+
"file": "tailwind.css",
|
|
26
|
+
"files": [
|
|
27
|
+
"tailwind.css"
|
|
28
|
+
],
|
|
29
|
+
"for": "Tailwind v4 projects: import after tailwindcss and tokens.css. Utilities like bg-accent-solid, text-fg, border-chrome-border."
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"id": "mui",
|
|
33
|
+
"name": "MUI (Material UI)",
|
|
34
|
+
"file": "mui.js",
|
|
35
|
+
"files": [
|
|
36
|
+
"mui.js",
|
|
37
|
+
"mui.d.ts"
|
|
38
|
+
],
|
|
39
|
+
"for": "React apps on @mui/material 6, 7 or 9: pass to createTheme(), and load tokens.css."
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"id": "chakra",
|
|
43
|
+
"name": "Chakra UI v3",
|
|
44
|
+
"file": "chakra.js",
|
|
45
|
+
"files": [
|
|
46
|
+
"chakra.js",
|
|
47
|
+
"chakra.d.ts"
|
|
48
|
+
],
|
|
49
|
+
"for": "React apps on @chakra-ui/react v3: pass the exported system to ChakraProvider, and load tokens.css."
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"id": "ag-grid-v36",
|
|
53
|
+
"name": "AG Grid 36+",
|
|
54
|
+
"file": "ag-grid-v36.js",
|
|
55
|
+
"files": [
|
|
56
|
+
"ag-grid-v36.js",
|
|
57
|
+
"ag-grid-v36.d.ts",
|
|
58
|
+
"ag-grid-v36.css"
|
|
59
|
+
],
|
|
60
|
+
"for": "AG Grid 36 and later (Theming API): themeQuartz.withParams(brandParams), plus ag-grid-v36.css."
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"id": "ag-grid-v33",
|
|
64
|
+
"name": "AG Grid 33 to 35",
|
|
65
|
+
"file": "ag-grid-v33.js",
|
|
66
|
+
"files": [
|
|
67
|
+
"ag-grid-v33.js",
|
|
68
|
+
"ag-grid-v33.d.ts",
|
|
69
|
+
"ag-grid-v33.css"
|
|
70
|
+
],
|
|
71
|
+
"for": "AG Grid 33, 34 and 35 (Theming API): themeQuartz.withParams(brandParams), plus ag-grid-v33.css."
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"id": "ag-grid-v32",
|
|
75
|
+
"name": "AG Grid 31 and 32",
|
|
76
|
+
"file": "ag-grid-v32.css",
|
|
77
|
+
"files": [
|
|
78
|
+
"ag-grid-v32.css"
|
|
79
|
+
],
|
|
80
|
+
"for": "AG Grid 31 and 32 (CSS themes): load after ag-theme-quartz.css and put class=\"ag-theme-quartz ag-theme-loomiere\" on the grid."
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/** Chakra UI v3 system for "mojave". Generated by loomiere build; do not edit. */
|
|
2
|
+
import type { SystemConfig, SystemContext } from '@chakra-ui/react';
|
|
3
|
+
|
|
4
|
+
export declare const config: SystemConfig;
|
|
5
|
+
export declare const system: SystemContext;
|
|
6
|
+
export default system;
|