@m7kni/tokens 0.1.1
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/dist/swift/DSColorDark.swift +33 -0
- package/dist/swift/DSColorLight.swift +33 -0
- package/dist/swift/DSScale.swift +41 -0
- package/dist/tokens.css +87 -0
- package/dist/tokens.dark.css +27 -0
- package/dist/tokens.light.css +58 -0
- package/package.json +31 -0
- package/src/primitive/color.tokens.json +132 -0
- package/src/scale.tokens.json +129 -0
- package/src/semantic/dark.tokens.json +79 -0
- package/src/semantic/light.tokens.json +79 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
|
|
2
|
+
//
|
|
3
|
+
// DSColorDark.swift
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
// Do not edit directly, this file was auto-generated.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
import SwiftUI
|
|
10
|
+
|
|
11
|
+
public enum DSColorDark {
|
|
12
|
+
public static let colorAccentHover = Color(red: 0.4863, green: 0.7373, blue: 0.8392)
|
|
13
|
+
public static let colorBgAccent = Color(red: 0.4, green: 0.6824, blue: 0.7961)
|
|
14
|
+
public static let colorBgAccentSoft = Color(red: 0.1216, green: 0.1843, blue: 0.2196)
|
|
15
|
+
public static let colorBgCanvas = Color(red: 0.0638, green: 0.0858, blue: 0.0958)
|
|
16
|
+
public static let colorBgHover = Color(red: 0.1042, green: 0.1321, blue: 0.1448)
|
|
17
|
+
public static let colorBgInverse = Color(red: 0.1042, green: 0.1321, blue: 0.1448)
|
|
18
|
+
public static let colorBgRaised = Color(red: 0.118, green: 0.1462, blue: 0.1591)
|
|
19
|
+
public static let colorBgSelected = Color(red: 0.1325, green: 0.1662, blue: 0.1815)
|
|
20
|
+
public static let colorBgSurface = Color(red: 0.0882, green: 0.1132, blue: 0.1246)
|
|
21
|
+
public static let colorBgTrack = Color(red: 0.2148, green: 0.2451, blue: 0.259)
|
|
22
|
+
public static let colorBorderDefault = Color(red: 0.1654, green: 0.1947, blue: 0.2081)
|
|
23
|
+
public static let colorBorderStrong = Color(red: 0.2513, green: 0.2877, blue: 0.3043)
|
|
24
|
+
public static let colorFgDefault = Color(red: 0.8807, green: 0.8995, blue: 0.9082)
|
|
25
|
+
public static let colorFgFaint = Color(red: 0.4111, green: 0.453, blue: 0.4723) /** Decorative/disabled/placeholder only — exempt from AA text checks. */
|
|
26
|
+
public static let colorFgMuted = Color(red: 0.5851, green: 0.6294, blue: 0.6499)
|
|
27
|
+
public static let colorFgOnAccent = Color(red: 0.0549, green: 0.0863, blue: 0.1059)
|
|
28
|
+
public static let colorFgOnInverse = Color(red: 0.8807, green: 0.8995, blue: 0.9082)
|
|
29
|
+
public static let colorFgSoft = Color(red: 0.7191, green: 0.7494, blue: 0.7635)
|
|
30
|
+
public static let colorStatusFail = Color(red: 0.851, green: 0.4824, blue: 0.3922)
|
|
31
|
+
public static let colorStatusOk = Color(red: 0.3725, green: 0.6824, blue: 0.498)
|
|
32
|
+
public static let colorStatusWarn = Color(red: 0.7882, green: 0.6275, blue: 0.2902)
|
|
33
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
|
|
2
|
+
//
|
|
3
|
+
// DSColorLight.swift
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
// Do not edit directly, this file was auto-generated.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
import SwiftUI
|
|
10
|
+
|
|
11
|
+
public enum DSColorLight {
|
|
12
|
+
public static let colorAccentHover = Color(red: 0.0902, green: 0.3451, blue: 0.4549)
|
|
13
|
+
public static let colorBgAccent = Color(red: 0.1137, green: 0.4157, blue: 0.5412)
|
|
14
|
+
public static let colorBgAccentSoft = Color(red: 0.8941, green: 0.9333, blue: 0.9569)
|
|
15
|
+
public static let colorBgCanvas = Color(red: 0.9326, green: 0.9547, blue: 0.965)
|
|
16
|
+
public static let colorBgHover = Color(red: 0.9054, green: 0.9339, blue: 0.947)
|
|
17
|
+
public static let colorBgInverse = Color(red: 0.1273, green: 0.1558, blue: 0.1687)
|
|
18
|
+
public static let colorBgRaised = Color(red: 1.0, green: 1.0, blue: 1.0)
|
|
19
|
+
public static let colorBgSelected = Color(red: 0.872, green: 0.9098, blue: 0.9273)
|
|
20
|
+
public static let colorBgSurface = Color(red: 0.9663, green: 0.979, blue: 0.9849)
|
|
21
|
+
public static let colorBgTrack = Color(red: 0.7816, green: 0.8124, blue: 0.8267)
|
|
22
|
+
public static let colorBorderDefault = Color(red: 0.85, green: 0.875, blue: 0.8866)
|
|
23
|
+
public static let colorBorderStrong = Color(red: 0.744, green: 0.7745, blue: 0.7887)
|
|
24
|
+
public static let colorFgDefault = Color(red: 0.0997, green: 0.1275, blue: 0.14)
|
|
25
|
+
public static let colorFgFaint = Color(red: 0.5259, green: 0.5695, blue: 0.5895) /** Decorative/disabled/placeholder only — exempt from AA text checks, never for readable copy. */
|
|
26
|
+
public static let colorFgMuted = Color(red: 0.3487, green: 0.3982, blue: 0.4208)
|
|
27
|
+
public static let colorFgOnAccent = Color(red: 1.0, green: 1.0, blue: 1.0)
|
|
28
|
+
public static let colorFgOnInverse = Color(red: 0.8961, green: 0.9118, blue: 0.9191)
|
|
29
|
+
public static let colorFgSoft = Color(red: 0.2184, green: 0.2568, blue: 0.2743)
|
|
30
|
+
public static let colorStatusFail = Color(red: 0.6588, green: 0.2275, blue: 0.1804)
|
|
31
|
+
public static let colorStatusOk = Color(red: 0.1843, green: 0.4902, blue: 0.3098)
|
|
32
|
+
public static let colorStatusWarn = Color(red: 0.5608, green: 0.3922, blue: 0.0627)
|
|
33
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
|
|
2
|
+
//
|
|
3
|
+
// DSScale.swift
|
|
4
|
+
//
|
|
5
|
+
|
|
6
|
+
// Do not edit directly, this file was auto-generated.
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
import SwiftUI
|
|
10
|
+
|
|
11
|
+
public enum DSScale {
|
|
12
|
+
public static let durationBase = 0.160
|
|
13
|
+
public static let durationFast = 0.120
|
|
14
|
+
public static let durationSlow = 0.200
|
|
15
|
+
public static let fontSize2xl = 24
|
|
16
|
+
public static let fontSize2xs = 10
|
|
17
|
+
public static let fontSizeLg = 15
|
|
18
|
+
public static let fontSizeMd = 13.5
|
|
19
|
+
public static let fontSizeSm = 12.5
|
|
20
|
+
public static let fontSizeXl = 18
|
|
21
|
+
public static let fontSizeXs = 11
|
|
22
|
+
public static let fontWeightBold = 700
|
|
23
|
+
public static let fontWeightMedium = 500
|
|
24
|
+
public static let fontWeightRegular = 400
|
|
25
|
+
public static let fontWeightSemibold = 600
|
|
26
|
+
public static let radiusContainer = 0
|
|
27
|
+
public static let radiusControl = 3
|
|
28
|
+
public static let radiusFull = 9999
|
|
29
|
+
public static let radiusOverlay = 6
|
|
30
|
+
public static let rowTable = 36
|
|
31
|
+
public static let space1 = 4
|
|
32
|
+
public static let space12 = 48
|
|
33
|
+
public static let space16 = 64
|
|
34
|
+
public static let space2 = 8
|
|
35
|
+
public static let space3 = 12
|
|
36
|
+
public static let space4 = 16
|
|
37
|
+
public static let space5 = 20
|
|
38
|
+
public static let space6 = 24
|
|
39
|
+
public static let space8 = 32
|
|
40
|
+
public static let trackingLabel = 0.13
|
|
41
|
+
}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/* Generated by packages/tokens/build.mjs — do not edit. */
|
|
2
|
+
/**
|
|
3
|
+
* Do not edit directly, this file was auto-generated.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--space-1: 4px;
|
|
8
|
+
--space-2: 8px;
|
|
9
|
+
--space-3: 12px;
|
|
10
|
+
--space-4: 16px;
|
|
11
|
+
--space-5: 20px;
|
|
12
|
+
--space-6: 24px;
|
|
13
|
+
--space-8: 32px;
|
|
14
|
+
--space-12: 48px;
|
|
15
|
+
--space-16: 64px;
|
|
16
|
+
--radius-control: 3px;
|
|
17
|
+
--radius-container: 0px;
|
|
18
|
+
--radius-overlay: 6px;
|
|
19
|
+
--radius-full: 9999px;
|
|
20
|
+
--row-table: 36px;
|
|
21
|
+
--font-family-sans: Hanken Grotesk,system-ui,sans-serif;
|
|
22
|
+
--font-family-mono: JetBrains Mono,ui-monospace,monospace;
|
|
23
|
+
--font-size-2xs: 10px;
|
|
24
|
+
--font-size-xs: 11px;
|
|
25
|
+
--font-size-sm: 12.5px;
|
|
26
|
+
--font-size-md: 13.5px;
|
|
27
|
+
--font-size-lg: 15px;
|
|
28
|
+
--font-size-xl: 18px;
|
|
29
|
+
--font-size-2xl: 24px;
|
|
30
|
+
--font-weight-regular: 400;
|
|
31
|
+
--font-weight-medium: 500;
|
|
32
|
+
--font-weight-semibold: 600;
|
|
33
|
+
--font-weight-bold: 700;
|
|
34
|
+
--duration-fast: 120ms;
|
|
35
|
+
--duration-base: 160ms;
|
|
36
|
+
--duration-slow: 200ms;
|
|
37
|
+
--tracking-label: 0.13em;
|
|
38
|
+
--color-bg-canvas: oklch(0.962 0.007 227);
|
|
39
|
+
--color-bg-surface: oklch(0.982 0.004 227);
|
|
40
|
+
--color-bg-raised: oklch(1 0 0);
|
|
41
|
+
--color-bg-hover: oklch(0.945 0.009 227);
|
|
42
|
+
--color-bg-selected: oklch(0.925 0.012 227);
|
|
43
|
+
--color-bg-track: oklch(0.85 0.01 227);
|
|
44
|
+
--color-bg-inverse: oklch(0.27 0.012 227);
|
|
45
|
+
--color-bg-accent: #1d6a8a;
|
|
46
|
+
--color-bg-accent-soft: #e4eef4;
|
|
47
|
+
--color-fg-default: oklch(0.24 0.012 227);
|
|
48
|
+
--color-fg-soft: oklch(0.37 0.015 227);
|
|
49
|
+
--color-fg-muted: oklch(0.5 0.018 227);
|
|
50
|
+
--color-fg-faint: oklch(0.65 0.015 227); /** Decorative/disabled/placeholder only — exempt from AA text checks, never for readable copy. */
|
|
51
|
+
--color-fg-on-accent: oklch(1 0 0);
|
|
52
|
+
--color-fg-on-inverse: oklch(0.93 0.005 227);
|
|
53
|
+
--color-border-default: oklch(0.9 0.008 227);
|
|
54
|
+
--color-border-strong: oklch(0.82 0.01 227);
|
|
55
|
+
--color-status-ok: #2f7d4f;
|
|
56
|
+
--color-status-warn: #8f6410;
|
|
57
|
+
--color-status-fail: #a83a2e;
|
|
58
|
+
--color-accent-hover: #175874;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Do not edit directly, this file was auto-generated.
|
|
63
|
+
*/
|
|
64
|
+
|
|
65
|
+
[data-theme="dark"] {
|
|
66
|
+
--color-bg-canvas: oklch(0.195 0.01 227);
|
|
67
|
+
--color-bg-surface: oklch(0.225 0.011 227);
|
|
68
|
+
--color-bg-raised: oklch(0.26 0.012 227);
|
|
69
|
+
--color-bg-hover: oklch(0.245 0.012 227);
|
|
70
|
+
--color-bg-selected: oklch(0.28 0.014 227);
|
|
71
|
+
--color-bg-track: oklch(0.36 0.012 227);
|
|
72
|
+
--color-bg-inverse: oklch(0.245 0.012 227);
|
|
73
|
+
--color-bg-accent: #66aecb;
|
|
74
|
+
--color-bg-accent-soft: #1f2f38;
|
|
75
|
+
--color-fg-default: oklch(0.92 0.006 227);
|
|
76
|
+
--color-fg-soft: oklch(0.8 0.01 227);
|
|
77
|
+
--color-fg-muted: oklch(0.7 0.015 227);
|
|
78
|
+
--color-fg-faint: oklch(0.55 0.015 227); /** Decorative/disabled/placeholder only — exempt from AA text checks. */
|
|
79
|
+
--color-fg-on-accent: #0e161b;
|
|
80
|
+
--color-fg-on-inverse: oklch(0.92 0.006 227);
|
|
81
|
+
--color-border-default: oklch(0.31 0.012 227);
|
|
82
|
+
--color-border-strong: oklch(0.4 0.014 227);
|
|
83
|
+
--color-status-ok: #5fae7f;
|
|
84
|
+
--color-status-warn: #c9a04a;
|
|
85
|
+
--color-status-fail: #d97b64;
|
|
86
|
+
--color-accent-hover: #7cbcd6;
|
|
87
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
[data-theme="dark"] {
|
|
6
|
+
--color-bg-canvas: oklch(0.195 0.01 227);
|
|
7
|
+
--color-bg-surface: oklch(0.225 0.011 227);
|
|
8
|
+
--color-bg-raised: oklch(0.26 0.012 227);
|
|
9
|
+
--color-bg-hover: oklch(0.245 0.012 227);
|
|
10
|
+
--color-bg-selected: oklch(0.28 0.014 227);
|
|
11
|
+
--color-bg-track: oklch(0.36 0.012 227);
|
|
12
|
+
--color-bg-inverse: oklch(0.245 0.012 227);
|
|
13
|
+
--color-bg-accent: #66aecb;
|
|
14
|
+
--color-bg-accent-soft: #1f2f38;
|
|
15
|
+
--color-fg-default: oklch(0.92 0.006 227);
|
|
16
|
+
--color-fg-soft: oklch(0.8 0.01 227);
|
|
17
|
+
--color-fg-muted: oklch(0.7 0.015 227);
|
|
18
|
+
--color-fg-faint: oklch(0.55 0.015 227); /** Decorative/disabled/placeholder only — exempt from AA text checks. */
|
|
19
|
+
--color-fg-on-accent: #0e161b;
|
|
20
|
+
--color-fg-on-inverse: oklch(0.92 0.006 227);
|
|
21
|
+
--color-border-default: oklch(0.31 0.012 227);
|
|
22
|
+
--color-border-strong: oklch(0.4 0.014 227);
|
|
23
|
+
--color-status-ok: #5fae7f;
|
|
24
|
+
--color-status-warn: #c9a04a;
|
|
25
|
+
--color-status-fail: #d97b64;
|
|
26
|
+
--color-accent-hover: #7cbcd6;
|
|
27
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--space-1: 4px;
|
|
7
|
+
--space-2: 8px;
|
|
8
|
+
--space-3: 12px;
|
|
9
|
+
--space-4: 16px;
|
|
10
|
+
--space-5: 20px;
|
|
11
|
+
--space-6: 24px;
|
|
12
|
+
--space-8: 32px;
|
|
13
|
+
--space-12: 48px;
|
|
14
|
+
--space-16: 64px;
|
|
15
|
+
--radius-control: 3px;
|
|
16
|
+
--radius-container: 0px;
|
|
17
|
+
--radius-overlay: 6px;
|
|
18
|
+
--radius-full: 9999px;
|
|
19
|
+
--row-table: 36px;
|
|
20
|
+
--font-family-sans: Hanken Grotesk,system-ui,sans-serif;
|
|
21
|
+
--font-family-mono: JetBrains Mono,ui-monospace,monospace;
|
|
22
|
+
--font-size-2xs: 10px;
|
|
23
|
+
--font-size-xs: 11px;
|
|
24
|
+
--font-size-sm: 12.5px;
|
|
25
|
+
--font-size-md: 13.5px;
|
|
26
|
+
--font-size-lg: 15px;
|
|
27
|
+
--font-size-xl: 18px;
|
|
28
|
+
--font-size-2xl: 24px;
|
|
29
|
+
--font-weight-regular: 400;
|
|
30
|
+
--font-weight-medium: 500;
|
|
31
|
+
--font-weight-semibold: 600;
|
|
32
|
+
--font-weight-bold: 700;
|
|
33
|
+
--duration-fast: 120ms;
|
|
34
|
+
--duration-base: 160ms;
|
|
35
|
+
--duration-slow: 200ms;
|
|
36
|
+
--tracking-label: 0.13em;
|
|
37
|
+
--color-bg-canvas: oklch(0.962 0.007 227);
|
|
38
|
+
--color-bg-surface: oklch(0.982 0.004 227);
|
|
39
|
+
--color-bg-raised: oklch(1 0 0);
|
|
40
|
+
--color-bg-hover: oklch(0.945 0.009 227);
|
|
41
|
+
--color-bg-selected: oklch(0.925 0.012 227);
|
|
42
|
+
--color-bg-track: oklch(0.85 0.01 227);
|
|
43
|
+
--color-bg-inverse: oklch(0.27 0.012 227);
|
|
44
|
+
--color-bg-accent: #1d6a8a;
|
|
45
|
+
--color-bg-accent-soft: #e4eef4;
|
|
46
|
+
--color-fg-default: oklch(0.24 0.012 227);
|
|
47
|
+
--color-fg-soft: oklch(0.37 0.015 227);
|
|
48
|
+
--color-fg-muted: oklch(0.5 0.018 227);
|
|
49
|
+
--color-fg-faint: oklch(0.65 0.015 227); /** Decorative/disabled/placeholder only — exempt from AA text checks, never for readable copy. */
|
|
50
|
+
--color-fg-on-accent: oklch(1 0 0);
|
|
51
|
+
--color-fg-on-inverse: oklch(0.93 0.005 227);
|
|
52
|
+
--color-border-default: oklch(0.9 0.008 227);
|
|
53
|
+
--color-border-strong: oklch(0.82 0.01 227);
|
|
54
|
+
--color-status-ok: #2f7d4f;
|
|
55
|
+
--color-status-warn: #8f6410;
|
|
56
|
+
--color-status-fail: #a83a2e;
|
|
57
|
+
--color-accent-hover: #175874;
|
|
58
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@m7kni/tokens",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"build": "node build.mjs"
|
|
7
|
+
},
|
|
8
|
+
"devDependencies": {
|
|
9
|
+
"style-dictionary": "^5.1.1"
|
|
10
|
+
},
|
|
11
|
+
"description": "m7kni design system tokens - DTCG sources, tokens.css (light + dark), SwiftUI colour/scale outputs",
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/m7kni/design-system.git",
|
|
16
|
+
"directory": "packages/tokens"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"src"
|
|
21
|
+
],
|
|
22
|
+
"exports": {
|
|
23
|
+
".": "./dist/tokens.css",
|
|
24
|
+
"./tokens.css": "./dist/tokens.css",
|
|
25
|
+
"./swift/*": "./dist/swift/*",
|
|
26
|
+
"./dtcg/*": "./src/*"
|
|
27
|
+
},
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"access": "public"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Tier 1 primitives. Never referenced by application code. Neutrals carry the petrol hue (227) at low chroma — the Tinted chrome decision, baked in.",
|
|
3
|
+
"neutral": {
|
|
4
|
+
"0": {
|
|
5
|
+
"$value": "oklch(1 0 0)"
|
|
6
|
+
},
|
|
7
|
+
"50": {
|
|
8
|
+
"$value": "oklch(0.982 0.004 227)"
|
|
9
|
+
},
|
|
10
|
+
"100": {
|
|
11
|
+
"$value": "oklch(0.962 0.007 227)"
|
|
12
|
+
},
|
|
13
|
+
"150": {
|
|
14
|
+
"$value": "oklch(0.945 0.009 227)"
|
|
15
|
+
},
|
|
16
|
+
"200": {
|
|
17
|
+
"$value": "oklch(0.925 0.012 227)"
|
|
18
|
+
},
|
|
19
|
+
"300": {
|
|
20
|
+
"$value": "oklch(0.9 0.008 227)"
|
|
21
|
+
},
|
|
22
|
+
"350": {
|
|
23
|
+
"$value": "oklch(0.85 0.01 227)"
|
|
24
|
+
},
|
|
25
|
+
"400": {
|
|
26
|
+
"$value": "oklch(0.82 0.01 227)"
|
|
27
|
+
},
|
|
28
|
+
"500": {
|
|
29
|
+
"$value": "oklch(0.65 0.015 227)"
|
|
30
|
+
},
|
|
31
|
+
"600": {
|
|
32
|
+
"$value": "oklch(0.5 0.018 227)"
|
|
33
|
+
},
|
|
34
|
+
"700": {
|
|
35
|
+
"$value": "oklch(0.37 0.015 227)"
|
|
36
|
+
},
|
|
37
|
+
"800": {
|
|
38
|
+
"$value": "oklch(0.27 0.012 227)"
|
|
39
|
+
},
|
|
40
|
+
"900": {
|
|
41
|
+
"$value": "oklch(0.24 0.012 227)"
|
|
42
|
+
},
|
|
43
|
+
"$type": "color"
|
|
44
|
+
},
|
|
45
|
+
"neutralDark": {
|
|
46
|
+
"50": {
|
|
47
|
+
"$value": "oklch(0.195 0.01 227)"
|
|
48
|
+
},
|
|
49
|
+
"100": {
|
|
50
|
+
"$value": "oklch(0.225 0.011 227)"
|
|
51
|
+
},
|
|
52
|
+
"150": {
|
|
53
|
+
"$value": "oklch(0.245 0.012 227)"
|
|
54
|
+
},
|
|
55
|
+
"200": {
|
|
56
|
+
"$value": "oklch(0.26 0.012 227)"
|
|
57
|
+
},
|
|
58
|
+
"250": {
|
|
59
|
+
"$value": "oklch(0.28 0.014 227)"
|
|
60
|
+
},
|
|
61
|
+
"300": {
|
|
62
|
+
"$value": "oklch(0.31 0.012 227)"
|
|
63
|
+
},
|
|
64
|
+
"350": {
|
|
65
|
+
"$value": "oklch(0.36 0.012 227)"
|
|
66
|
+
},
|
|
67
|
+
"400": {
|
|
68
|
+
"$value": "oklch(0.4 0.014 227)"
|
|
69
|
+
},
|
|
70
|
+
"500": {
|
|
71
|
+
"$value": "oklch(0.55 0.015 227)"
|
|
72
|
+
},
|
|
73
|
+
"600": {
|
|
74
|
+
"$value": "oklch(0.7 0.015 227)"
|
|
75
|
+
},
|
|
76
|
+
"700": {
|
|
77
|
+
"$value": "oklch(0.8 0.01 227)"
|
|
78
|
+
},
|
|
79
|
+
"800": {
|
|
80
|
+
"$value": "oklch(0.92 0.006 227)"
|
|
81
|
+
},
|
|
82
|
+
"$type": "color"
|
|
83
|
+
},
|
|
84
|
+
"petrol": {
|
|
85
|
+
"300": {
|
|
86
|
+
"$value": "#66aecb"
|
|
87
|
+
},
|
|
88
|
+
"600": {
|
|
89
|
+
"$value": "#1d6a8a"
|
|
90
|
+
},
|
|
91
|
+
"700": {
|
|
92
|
+
"$value": "#175874"
|
|
93
|
+
},
|
|
94
|
+
"$type": "color",
|
|
95
|
+
"softLight": {
|
|
96
|
+
"$value": "#e4eef4"
|
|
97
|
+
},
|
|
98
|
+
"softDark": {
|
|
99
|
+
"$value": "#1f2f38"
|
|
100
|
+
},
|
|
101
|
+
"inkDark": {
|
|
102
|
+
"$value": "#0e161b"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
"green": {
|
|
106
|
+
"300": {
|
|
107
|
+
"$value": "#5fae7f"
|
|
108
|
+
},
|
|
109
|
+
"600": {
|
|
110
|
+
"$value": "#2f7d4f"
|
|
111
|
+
},
|
|
112
|
+
"$type": "color"
|
|
113
|
+
},
|
|
114
|
+
"amber": {
|
|
115
|
+
"300": {
|
|
116
|
+
"$value": "#c9a04a"
|
|
117
|
+
},
|
|
118
|
+
"600": {
|
|
119
|
+
"$value": "#8f6410"
|
|
120
|
+
},
|
|
121
|
+
"$type": "color"
|
|
122
|
+
},
|
|
123
|
+
"red": {
|
|
124
|
+
"300": {
|
|
125
|
+
"$value": "#d97b64"
|
|
126
|
+
},
|
|
127
|
+
"600": {
|
|
128
|
+
"$value": "#a83a2e"
|
|
129
|
+
},
|
|
130
|
+
"$type": "color"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space": {
|
|
3
|
+
"1": {
|
|
4
|
+
"$value": "4px"
|
|
5
|
+
},
|
|
6
|
+
"2": {
|
|
7
|
+
"$value": "8px"
|
|
8
|
+
},
|
|
9
|
+
"3": {
|
|
10
|
+
"$value": "12px"
|
|
11
|
+
},
|
|
12
|
+
"4": {
|
|
13
|
+
"$value": "16px"
|
|
14
|
+
},
|
|
15
|
+
"5": {
|
|
16
|
+
"$value": "20px"
|
|
17
|
+
},
|
|
18
|
+
"6": {
|
|
19
|
+
"$value": "24px"
|
|
20
|
+
},
|
|
21
|
+
"8": {
|
|
22
|
+
"$value": "32px"
|
|
23
|
+
},
|
|
24
|
+
"12": {
|
|
25
|
+
"$value": "48px"
|
|
26
|
+
},
|
|
27
|
+
"16": {
|
|
28
|
+
"$value": "64px"
|
|
29
|
+
},
|
|
30
|
+
"$type": "dimension"
|
|
31
|
+
},
|
|
32
|
+
"radius": {
|
|
33
|
+
"$type": "dimension",
|
|
34
|
+
"control": {
|
|
35
|
+
"$value": "3px"
|
|
36
|
+
},
|
|
37
|
+
"container": {
|
|
38
|
+
"$value": "0px"
|
|
39
|
+
},
|
|
40
|
+
"overlay": {
|
|
41
|
+
"$value": "6px"
|
|
42
|
+
},
|
|
43
|
+
"full": {
|
|
44
|
+
"$value": "9999px"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"row": {
|
|
48
|
+
"$type": "dimension",
|
|
49
|
+
"table": {
|
|
50
|
+
"$value": "36px"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"font": {
|
|
54
|
+
"family": {
|
|
55
|
+
"$type": "fontFamily",
|
|
56
|
+
"sans": {
|
|
57
|
+
"$value": [
|
|
58
|
+
"Hanken Grotesk",
|
|
59
|
+
"system-ui",
|
|
60
|
+
"sans-serif"
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
"mono": {
|
|
64
|
+
"$value": [
|
|
65
|
+
"JetBrains Mono",
|
|
66
|
+
"ui-monospace",
|
|
67
|
+
"monospace"
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
"size": {
|
|
72
|
+
"$type": "dimension",
|
|
73
|
+
"2xs": {
|
|
74
|
+
"$value": "10px"
|
|
75
|
+
},
|
|
76
|
+
"xs": {
|
|
77
|
+
"$value": "11px"
|
|
78
|
+
},
|
|
79
|
+
"sm": {
|
|
80
|
+
"$value": "12.5px"
|
|
81
|
+
},
|
|
82
|
+
"md": {
|
|
83
|
+
"$value": "13.5px"
|
|
84
|
+
},
|
|
85
|
+
"lg": {
|
|
86
|
+
"$value": "15px"
|
|
87
|
+
},
|
|
88
|
+
"xl": {
|
|
89
|
+
"$value": "18px"
|
|
90
|
+
},
|
|
91
|
+
"2xl": {
|
|
92
|
+
"$value": "24px"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"weight": {
|
|
96
|
+
"$type": "fontWeight",
|
|
97
|
+
"regular": {
|
|
98
|
+
"$value": 400
|
|
99
|
+
},
|
|
100
|
+
"medium": {
|
|
101
|
+
"$value": 500
|
|
102
|
+
},
|
|
103
|
+
"semibold": {
|
|
104
|
+
"$value": 600
|
|
105
|
+
},
|
|
106
|
+
"bold": {
|
|
107
|
+
"$value": 700
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
"duration": {
|
|
112
|
+
"$type": "duration",
|
|
113
|
+
"fast": {
|
|
114
|
+
"$value": "120ms"
|
|
115
|
+
},
|
|
116
|
+
"base": {
|
|
117
|
+
"$value": "160ms"
|
|
118
|
+
},
|
|
119
|
+
"slow": {
|
|
120
|
+
"$value": "200ms"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
"tracking": {
|
|
124
|
+
"$type": "dimension",
|
|
125
|
+
"label": {
|
|
126
|
+
"$value": "0.13em"
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"$type": "color",
|
|
4
|
+
"bg": {
|
|
5
|
+
"canvas": {
|
|
6
|
+
"$value": "{neutralDark.50}"
|
|
7
|
+
},
|
|
8
|
+
"surface": {
|
|
9
|
+
"$value": "{neutralDark.100}"
|
|
10
|
+
},
|
|
11
|
+
"raised": {
|
|
12
|
+
"$value": "{neutralDark.200}"
|
|
13
|
+
},
|
|
14
|
+
"hover": {
|
|
15
|
+
"$value": "{neutralDark.150}"
|
|
16
|
+
},
|
|
17
|
+
"selected": {
|
|
18
|
+
"$value": "{neutralDark.250}"
|
|
19
|
+
},
|
|
20
|
+
"track": {
|
|
21
|
+
"$value": "{neutralDark.350}"
|
|
22
|
+
},
|
|
23
|
+
"inverse": {
|
|
24
|
+
"$value": "{neutralDark.150}"
|
|
25
|
+
},
|
|
26
|
+
"accent": {
|
|
27
|
+
"$value": "{petrol.300}"
|
|
28
|
+
},
|
|
29
|
+
"accentSoft": {
|
|
30
|
+
"$value": "{petrol.softDark}"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"fg": {
|
|
34
|
+
"default": {
|
|
35
|
+
"$value": "{neutralDark.800}"
|
|
36
|
+
},
|
|
37
|
+
"soft": {
|
|
38
|
+
"$value": "{neutralDark.700}"
|
|
39
|
+
},
|
|
40
|
+
"muted": {
|
|
41
|
+
"$value": "{neutralDark.600}"
|
|
42
|
+
},
|
|
43
|
+
"faint": {
|
|
44
|
+
"$value": "{neutralDark.500}",
|
|
45
|
+
"$description": "Decorative/disabled/placeholder only — exempt from AA text checks."
|
|
46
|
+
},
|
|
47
|
+
"onAccent": {
|
|
48
|
+
"$value": "{petrol.inkDark}"
|
|
49
|
+
},
|
|
50
|
+
"onInverse": {
|
|
51
|
+
"$value": "{neutralDark.800}"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"border": {
|
|
55
|
+
"default": {
|
|
56
|
+
"$value": "{neutralDark.300}"
|
|
57
|
+
},
|
|
58
|
+
"strong": {
|
|
59
|
+
"$value": "{neutralDark.400}"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"status": {
|
|
63
|
+
"ok": {
|
|
64
|
+
"$value": "{green.300}"
|
|
65
|
+
},
|
|
66
|
+
"warn": {
|
|
67
|
+
"$value": "{amber.300}"
|
|
68
|
+
},
|
|
69
|
+
"fail": {
|
|
70
|
+
"$value": "{red.300}"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
"accent": {
|
|
74
|
+
"hover": {
|
|
75
|
+
"$value": "#7cbcd6"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"$type": "color",
|
|
4
|
+
"bg": {
|
|
5
|
+
"canvas": {
|
|
6
|
+
"$value": "{neutral.100}"
|
|
7
|
+
},
|
|
8
|
+
"surface": {
|
|
9
|
+
"$value": "{neutral.50}"
|
|
10
|
+
},
|
|
11
|
+
"raised": {
|
|
12
|
+
"$value": "{neutral.0}"
|
|
13
|
+
},
|
|
14
|
+
"hover": {
|
|
15
|
+
"$value": "{neutral.150}"
|
|
16
|
+
},
|
|
17
|
+
"selected": {
|
|
18
|
+
"$value": "{neutral.200}"
|
|
19
|
+
},
|
|
20
|
+
"track": {
|
|
21
|
+
"$value": "{neutral.350}"
|
|
22
|
+
},
|
|
23
|
+
"inverse": {
|
|
24
|
+
"$value": "{neutral.800}"
|
|
25
|
+
},
|
|
26
|
+
"accent": {
|
|
27
|
+
"$value": "{petrol.600}"
|
|
28
|
+
},
|
|
29
|
+
"accentSoft": {
|
|
30
|
+
"$value": "{petrol.softLight}"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"fg": {
|
|
34
|
+
"default": {
|
|
35
|
+
"$value": "{neutral.900}"
|
|
36
|
+
},
|
|
37
|
+
"soft": {
|
|
38
|
+
"$value": "{neutral.700}"
|
|
39
|
+
},
|
|
40
|
+
"muted": {
|
|
41
|
+
"$value": "{neutral.600}"
|
|
42
|
+
},
|
|
43
|
+
"faint": {
|
|
44
|
+
"$value": "{neutral.500}",
|
|
45
|
+
"$description": "Decorative/disabled/placeholder only — exempt from AA text checks, never for readable copy."
|
|
46
|
+
},
|
|
47
|
+
"onAccent": {
|
|
48
|
+
"$value": "oklch(1 0 0)"
|
|
49
|
+
},
|
|
50
|
+
"onInverse": {
|
|
51
|
+
"$value": "oklch(0.93 0.005 227)"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"border": {
|
|
55
|
+
"default": {
|
|
56
|
+
"$value": "{neutral.300}"
|
|
57
|
+
},
|
|
58
|
+
"strong": {
|
|
59
|
+
"$value": "{neutral.400}"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"status": {
|
|
63
|
+
"ok": {
|
|
64
|
+
"$value": "{green.600}"
|
|
65
|
+
},
|
|
66
|
+
"warn": {
|
|
67
|
+
"$value": "{amber.600}"
|
|
68
|
+
},
|
|
69
|
+
"fail": {
|
|
70
|
+
"$value": "{red.600}"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
"accent": {
|
|
74
|
+
"hover": {
|
|
75
|
+
"$value": "{petrol.700}"
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|