@robosophy/tokens 1.0.7 → 1.0.8
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/ai-context.md +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +10 -1
- package/dist/tailwind-preset.js +10 -1
- package/dist/tailwind.css +4 -0
- package/dist/tokens.css +18 -0
- package/dist/tokens.html +63 -0
- package/dist/tokens.json +45 -0
- package/dist/tokens.md +9 -0
- package/package.json +1 -1
package/dist/ai-context.md
CHANGED
|
@@ -45,12 +45,15 @@ import tokensJson from "@robosophy/tokens/tokens.json";
|
|
|
45
45
|
- `--rs-color-blue-700`: `#2A719B`
|
|
46
46
|
- `--rs-color-green-100`: `#EDF7E6`
|
|
47
47
|
- `--rs-color-green-500`: `#4EAE01`
|
|
48
|
+
- `--rs-color-green-700`: `#3A8501`
|
|
48
49
|
- `--rs-color-navygreen-100`: `#E5F1EA`
|
|
49
50
|
- `--rs-color-navygreen-500`: `#007C2F`
|
|
50
51
|
- `--rs-color-yellow-100`: `#FFF4E6`
|
|
51
52
|
- `--rs-color-yellow-500`: `#FF9001`
|
|
53
|
+
- `--rs-color-yellow-700`: `#CC7300`
|
|
52
54
|
- `--rs-color-red-100`: `#FFF0F1`
|
|
53
55
|
- `--rs-color-red-500`: `#D80115`
|
|
56
|
+
- `--rs-color-red-700`: `#A50110`
|
|
54
57
|
- `--rs-color-darkblue-100`: `#E5ECF5`
|
|
55
58
|
- `--rs-color-darkblue-500`: `#004A9F`
|
|
56
59
|
- `--rs-color-navyblue-100`: `var(--rs-color-darkblue-100)` - Backfilled legacy navyblue reference from the darkblue scale.
|
|
@@ -82,6 +85,7 @@ import tokensJson from "@robosophy/tokens/tokens.json";
|
|
|
82
85
|
- `--rs-color-text-brand-red`: `var(--rs-color-red-500)`
|
|
83
86
|
- `--rs-color-text-placeholder`: `var(--rs-color-gray-500)`
|
|
84
87
|
- `--rs-color-text-caution`: `var(--rs-color-yellow-500)`
|
|
88
|
+
- `--rs-color-text-inverted`: `var(--rs-color-white-500)`
|
|
85
89
|
- `--rs-color-text-button-primary`: `var(--rs-color-white-500)`
|
|
86
90
|
- `--rs-color-text-button-secondary`: `var(--rs-color-gray-600)`
|
|
87
91
|
- `--rs-color-text-button-tertiary`: `var(--rs-color-blue-500)`
|
|
@@ -143,3 +147,8 @@ import tokensJson from "@robosophy/tokens/tokens.json";
|
|
|
143
147
|
- `--rs-color-sidebar-background-hover`: `var(--rs-color-blue-100)`
|
|
144
148
|
- `--rs-color-sidebar-stroke`: `var(--rs-color-gray-100)`
|
|
145
149
|
- `--rs-color-sidebar-stroke-active`: `var(--rs-color-blue-500)`
|
|
150
|
+
- `--rs-color-header-light-bg-primary`: `var(--rs-color-white-500)`
|
|
151
|
+
- `--rs-color-header-light-bg-secondary`: `var(--rs-color-gray-100)`
|
|
152
|
+
- `--rs-color-header-dark-bg-primary`: `var(--rs-color-black-500)`
|
|
153
|
+
- `--rs-color-header-dark-bg-secondary`: `var(--rs-color-gray-700)`
|
|
154
|
+
- `--rs-color-header-bg-tertiary`: `rgba(0, 0, 0, 0.3)`
|
package/dist/index.d.ts
CHANGED
|
@@ -6,12 +6,15 @@ export declare const tokens: {
|
|
|
6
6
|
readonly "color-blue-700": "#2A719B";
|
|
7
7
|
readonly "color-green-100": "#EDF7E6";
|
|
8
8
|
readonly "color-green-500": "#4EAE01";
|
|
9
|
+
readonly "color-green-700": "#3A8501";
|
|
9
10
|
readonly "color-navygreen-100": "#E5F1EA";
|
|
10
11
|
readonly "color-navygreen-500": "#007C2F";
|
|
11
12
|
readonly "color-yellow-100": "#FFF4E6";
|
|
12
13
|
readonly "color-yellow-500": "#FF9001";
|
|
14
|
+
readonly "color-yellow-700": "#CC7300";
|
|
13
15
|
readonly "color-red-100": "#FFF0F1";
|
|
14
16
|
readonly "color-red-500": "#D80115";
|
|
17
|
+
readonly "color-red-700": "#A50110";
|
|
15
18
|
readonly "color-darkblue-100": "#E5ECF5";
|
|
16
19
|
readonly "color-darkblue-500": "#004A9F";
|
|
17
20
|
readonly "color-navyblue-100": "var(--rs-color-darkblue-100)";
|
|
@@ -44,6 +47,7 @@ export declare const tokens: {
|
|
|
44
47
|
readonly "color-text-brand-red": "var(--rs-color-red-500)";
|
|
45
48
|
readonly "color-text-placeholder": "var(--rs-color-gray-500)";
|
|
46
49
|
readonly "color-text-caution": "var(--rs-color-yellow-500)";
|
|
50
|
+
readonly "color-text-inverted": "var(--rs-color-white-500)";
|
|
47
51
|
readonly "color-text-button-primary": "var(--rs-color-white-500)";
|
|
48
52
|
readonly "color-text-button-secondary": "var(--rs-color-gray-600)";
|
|
49
53
|
readonly "color-text-button-tertiary": "var(--rs-color-blue-500)";
|
|
@@ -98,5 +102,10 @@ export declare const tokens: {
|
|
|
98
102
|
readonly "color-sidebar-background-hover": "var(--rs-color-blue-100)";
|
|
99
103
|
readonly "color-sidebar-stroke": "var(--rs-color-gray-100)";
|
|
100
104
|
readonly "color-sidebar-stroke-active": "var(--rs-color-blue-500)";
|
|
105
|
+
readonly "color-header-light-bg-primary": "var(--rs-color-white-500)";
|
|
106
|
+
readonly "color-header-light-bg-secondary": "var(--rs-color-gray-100)";
|
|
107
|
+
readonly "color-header-dark-bg-primary": "var(--rs-color-black-500)";
|
|
108
|
+
readonly "color-header-dark-bg-secondary": "var(--rs-color-gray-700)";
|
|
109
|
+
readonly "color-header-bg-tertiary": "rgba(0, 0, 0, 0.3)";
|
|
101
110
|
};
|
|
102
111
|
export default tokens;
|
package/dist/index.js
CHANGED
|
@@ -6,12 +6,15 @@ export const tokens = {
|
|
|
6
6
|
"color-blue-700": "#2A719B",
|
|
7
7
|
"color-green-100": "#EDF7E6",
|
|
8
8
|
"color-green-500": "#4EAE01",
|
|
9
|
+
"color-green-700": "#3A8501",
|
|
9
10
|
"color-navygreen-100": "#E5F1EA",
|
|
10
11
|
"color-navygreen-500": "#007C2F",
|
|
11
12
|
"color-yellow-100": "#FFF4E6",
|
|
12
13
|
"color-yellow-500": "#FF9001",
|
|
14
|
+
"color-yellow-700": "#CC7300",
|
|
13
15
|
"color-red-100": "#FFF0F1",
|
|
14
16
|
"color-red-500": "#D80115",
|
|
17
|
+
"color-red-700": "#A50110",
|
|
15
18
|
"color-darkblue-100": "#E5ECF5",
|
|
16
19
|
"color-darkblue-500": "#004A9F",
|
|
17
20
|
"color-navyblue-100": "var(--rs-color-darkblue-100)",
|
|
@@ -44,6 +47,7 @@ export const tokens = {
|
|
|
44
47
|
"color-text-brand-red": "var(--rs-color-red-500)",
|
|
45
48
|
"color-text-placeholder": "var(--rs-color-gray-500)",
|
|
46
49
|
"color-text-caution": "var(--rs-color-yellow-500)",
|
|
50
|
+
"color-text-inverted": "var(--rs-color-white-500)",
|
|
47
51
|
"color-text-button-primary": "var(--rs-color-white-500)",
|
|
48
52
|
"color-text-button-secondary": "var(--rs-color-gray-600)",
|
|
49
53
|
"color-text-button-tertiary": "var(--rs-color-blue-500)",
|
|
@@ -97,6 +101,11 @@ export const tokens = {
|
|
|
97
101
|
"color-sidebar-background-active": "var(--rs-color-blue-100)",
|
|
98
102
|
"color-sidebar-background-hover": "var(--rs-color-blue-100)",
|
|
99
103
|
"color-sidebar-stroke": "var(--rs-color-gray-100)",
|
|
100
|
-
"color-sidebar-stroke-active": "var(--rs-color-blue-500)"
|
|
104
|
+
"color-sidebar-stroke-active": "var(--rs-color-blue-500)",
|
|
105
|
+
"color-header-light-bg-primary": "var(--rs-color-white-500)",
|
|
106
|
+
"color-header-light-bg-secondary": "var(--rs-color-gray-100)",
|
|
107
|
+
"color-header-dark-bg-primary": "var(--rs-color-black-500)",
|
|
108
|
+
"color-header-dark-bg-secondary": "var(--rs-color-gray-700)",
|
|
109
|
+
"color-header-bg-tertiary": "rgba(0, 0, 0, 0.3)"
|
|
101
110
|
};
|
|
102
111
|
export default tokens;
|
package/dist/tailwind-preset.js
CHANGED
|
@@ -10,12 +10,15 @@ const preset = {
|
|
|
10
10
|
"blue-700": "var(--rs-color-blue-700)",
|
|
11
11
|
"green-100": "var(--rs-color-green-100)",
|
|
12
12
|
"green-500": "var(--rs-color-green-500)",
|
|
13
|
+
"green-700": "var(--rs-color-green-700)",
|
|
13
14
|
"navygreen-100": "var(--rs-color-navygreen-100)",
|
|
14
15
|
"navygreen-500": "var(--rs-color-navygreen-500)",
|
|
15
16
|
"yellow-100": "var(--rs-color-yellow-100)",
|
|
16
17
|
"yellow-500": "var(--rs-color-yellow-500)",
|
|
18
|
+
"yellow-700": "var(--rs-color-yellow-700)",
|
|
17
19
|
"red-100": "var(--rs-color-red-100)",
|
|
18
20
|
"red-500": "var(--rs-color-red-500)",
|
|
21
|
+
"red-700": "var(--rs-color-red-700)",
|
|
19
22
|
"darkblue-100": "var(--rs-color-darkblue-100)",
|
|
20
23
|
"darkblue-500": "var(--rs-color-darkblue-500)",
|
|
21
24
|
"navyblue-100": "var(--rs-color-navyblue-100)",
|
|
@@ -47,6 +50,7 @@ const preset = {
|
|
|
47
50
|
"text-brand-red": "var(--rs-color-text-brand-red)",
|
|
48
51
|
"text-placeholder": "var(--rs-color-text-placeholder)",
|
|
49
52
|
"text-caution": "var(--rs-color-text-caution)",
|
|
53
|
+
"text-inverted": "var(--rs-color-text-inverted)",
|
|
50
54
|
"text-button-primary": "var(--rs-color-text-button-primary)",
|
|
51
55
|
"text-button-secondary": "var(--rs-color-text-button-secondary)",
|
|
52
56
|
"text-button-tertiary": "var(--rs-color-text-button-tertiary)",
|
|
@@ -88,7 +92,12 @@ const preset = {
|
|
|
88
92
|
"sidebar-background-active": "var(--rs-color-sidebar-background-active)",
|
|
89
93
|
"sidebar-background-hover": "var(--rs-color-sidebar-background-hover)",
|
|
90
94
|
"sidebar-stroke": "var(--rs-color-sidebar-stroke)",
|
|
91
|
-
"sidebar-stroke-active": "var(--rs-color-sidebar-stroke-active)"
|
|
95
|
+
"sidebar-stroke-active": "var(--rs-color-sidebar-stroke-active)",
|
|
96
|
+
"header-light-bg-primary": "var(--rs-color-header-light-bg-primary)",
|
|
97
|
+
"header-light-bg-secondary": "var(--rs-color-header-light-bg-secondary)",
|
|
98
|
+
"header-dark-bg-primary": "var(--rs-color-header-dark-bg-primary)",
|
|
99
|
+
"header-dark-bg-secondary": "var(--rs-color-header-dark-bg-secondary)",
|
|
100
|
+
"header-bg-tertiary": "var(--rs-color-header-bg-tertiary)"
|
|
92
101
|
}
|
|
93
102
|
},
|
|
94
103
|
"fontFamily": {
|
package/dist/tailwind.css
CHANGED
|
@@ -6,12 +6,15 @@
|
|
|
6
6
|
--color-rs-blue-700: var(--rs-color-blue-700);
|
|
7
7
|
--color-rs-green-100: var(--rs-color-green-100);
|
|
8
8
|
--color-rs-green-500: var(--rs-color-green-500);
|
|
9
|
+
--color-rs-green-700: var(--rs-color-green-700);
|
|
9
10
|
--color-rs-navygreen-100: var(--rs-color-navygreen-100);
|
|
10
11
|
--color-rs-navygreen-500: var(--rs-color-navygreen-500);
|
|
11
12
|
--color-rs-yellow-100: var(--rs-color-yellow-100);
|
|
12
13
|
--color-rs-yellow-500: var(--rs-color-yellow-500);
|
|
14
|
+
--color-rs-yellow-700: var(--rs-color-yellow-700);
|
|
13
15
|
--color-rs-red-100: var(--rs-color-red-100);
|
|
14
16
|
--color-rs-red-500: var(--rs-color-red-500);
|
|
17
|
+
--color-rs-red-700: var(--rs-color-red-700);
|
|
15
18
|
--color-rs-darkblue-100: var(--rs-color-darkblue-100);
|
|
16
19
|
--color-rs-darkblue-500: var(--rs-color-darkblue-500);
|
|
17
20
|
--color-rs-navyblue-100: var(--rs-color-navyblue-100);
|
|
@@ -44,6 +47,7 @@
|
|
|
44
47
|
--color-rs-text-brand-red: var(--rs-color-text-brand-red);
|
|
45
48
|
--color-rs-text-placeholder: var(--rs-color-text-placeholder);
|
|
46
49
|
--color-rs-text-caution: var(--rs-color-text-caution);
|
|
50
|
+
--color-rs-text-inverted: var(--rs-color-text-inverted);
|
|
47
51
|
--color-rs-text-button-primary: var(--rs-color-text-button-primary);
|
|
48
52
|
--color-rs-text-button-secondary: var(--rs-color-text-button-secondary);
|
|
49
53
|
--color-rs-text-button-tertiary: var(--rs-color-text-button-tertiary);
|
package/dist/tokens.css
CHANGED
|
@@ -6,12 +6,15 @@
|
|
|
6
6
|
--rs-color-blue-700: #2A719B;
|
|
7
7
|
--rs-color-green-100: #EDF7E6;
|
|
8
8
|
--rs-color-green-500: #4EAE01;
|
|
9
|
+
--rs-color-green-700: #3A8501;
|
|
9
10
|
--rs-color-navygreen-100: #E5F1EA;
|
|
10
11
|
--rs-color-navygreen-500: #007C2F;
|
|
11
12
|
--rs-color-yellow-100: #FFF4E6;
|
|
12
13
|
--rs-color-yellow-500: #FF9001;
|
|
14
|
+
--rs-color-yellow-700: #CC7300;
|
|
13
15
|
--rs-color-red-100: #FFF0F1;
|
|
14
16
|
--rs-color-red-500: #D80115;
|
|
17
|
+
--rs-color-red-700: #A50110;
|
|
15
18
|
--rs-color-darkblue-100: #E5ECF5;
|
|
16
19
|
--rs-color-darkblue-500: #004A9F;
|
|
17
20
|
--rs-color-navyblue-100: var(--rs-color-darkblue-100);
|
|
@@ -44,6 +47,7 @@
|
|
|
44
47
|
--rs-color-text-brand-red: var(--rs-color-red-500);
|
|
45
48
|
--rs-color-text-placeholder: var(--rs-color-gray-500);
|
|
46
49
|
--rs-color-text-caution: var(--rs-color-yellow-500);
|
|
50
|
+
--rs-color-text-inverted: var(--rs-color-white-500);
|
|
47
51
|
--rs-color-text-button-primary: var(--rs-color-white-500);
|
|
48
52
|
--rs-color-text-button-secondary: var(--rs-color-gray-600);
|
|
49
53
|
--rs-color-text-button-tertiary: var(--rs-color-blue-500);
|
|
@@ -98,6 +102,11 @@
|
|
|
98
102
|
--rs-color-sidebar-background-hover: var(--rs-color-blue-100);
|
|
99
103
|
--rs-color-sidebar-stroke: var(--rs-color-gray-100);
|
|
100
104
|
--rs-color-sidebar-stroke-active: var(--rs-color-blue-500);
|
|
105
|
+
--rs-color-header-light-bg-primary: var(--rs-color-white-500);
|
|
106
|
+
--rs-color-header-light-bg-secondary: var(--rs-color-gray-100);
|
|
107
|
+
--rs-color-header-dark-bg-primary: var(--rs-color-black-500);
|
|
108
|
+
--rs-color-header-dark-bg-secondary: var(--rs-color-gray-700);
|
|
109
|
+
--rs-color-header-bg-tertiary: rgba(0, 0, 0, 0.3);
|
|
101
110
|
|
|
102
111
|
/* Deprecated legacy aliases. Use --rs-* tokens instead. */
|
|
103
112
|
--color-blue-50: var(--rs-color-blue-50);
|
|
@@ -106,12 +115,15 @@
|
|
|
106
115
|
--color-blue-700: var(--rs-color-blue-700);
|
|
107
116
|
--color-green-100: var(--rs-color-green-100);
|
|
108
117
|
--color-green-500: var(--rs-color-green-500);
|
|
118
|
+
--color-green-700: var(--rs-color-green-700);
|
|
109
119
|
--color-navygreen-100: var(--rs-color-navygreen-100);
|
|
110
120
|
--color-navygreen-500: var(--rs-color-navygreen-500);
|
|
111
121
|
--color-yellow-100: var(--rs-color-yellow-100);
|
|
112
122
|
--color-yellow-500: var(--rs-color-yellow-500);
|
|
123
|
+
--color-yellow-700: var(--rs-color-yellow-700);
|
|
113
124
|
--color-red-100: var(--rs-color-red-100);
|
|
114
125
|
--color-red-500: var(--rs-color-red-500);
|
|
126
|
+
--color-red-700: var(--rs-color-red-700);
|
|
115
127
|
--color-darkblue-100: var(--rs-color-darkblue-100);
|
|
116
128
|
--color-darkblue-500: var(--rs-color-darkblue-500);
|
|
117
129
|
--color-navyblue-100: var(--rs-color-navyblue-100);
|
|
@@ -144,6 +156,7 @@
|
|
|
144
156
|
--color-text-brand-red: var(--rs-color-text-brand-red);
|
|
145
157
|
--color-text-placeholder: var(--rs-color-text-placeholder);
|
|
146
158
|
--color-text-caution: var(--rs-color-text-caution);
|
|
159
|
+
--color-text-inverted: var(--rs-color-text-inverted);
|
|
147
160
|
--color-text-button-primary: var(--rs-color-text-button-primary);
|
|
148
161
|
--color-text-button-secondary: var(--rs-color-text-button-secondary);
|
|
149
162
|
--color-text-button-tertiary: var(--rs-color-text-button-tertiary);
|
|
@@ -198,4 +211,9 @@
|
|
|
198
211
|
--color-sidebar-background-hover: var(--rs-color-sidebar-background-hover);
|
|
199
212
|
--color-sidebar-stroke: var(--rs-color-sidebar-stroke);
|
|
200
213
|
--color-sidebar-stroke-active: var(--rs-color-sidebar-stroke-active);
|
|
214
|
+
--color-header-light-bg-primary: var(--rs-color-header-light-bg-primary);
|
|
215
|
+
--color-header-light-bg-secondary: var(--rs-color-header-light-bg-secondary);
|
|
216
|
+
--color-header-dark-bg-primary: var(--rs-color-header-dark-bg-primary);
|
|
217
|
+
--color-header-dark-bg-secondary: var(--rs-color-header-dark-bg-secondary);
|
|
218
|
+
--color-header-bg-tertiary: var(--rs-color-header-bg-tertiary);
|
|
201
219
|
}
|
package/dist/tokens.html
CHANGED
|
@@ -13,12 +13,15 @@
|
|
|
13
13
|
--rs-color-blue-700: #2A719B;
|
|
14
14
|
--rs-color-green-100: #EDF7E6;
|
|
15
15
|
--rs-color-green-500: #4EAE01;
|
|
16
|
+
--rs-color-green-700: #3A8501;
|
|
16
17
|
--rs-color-navygreen-100: #E5F1EA;
|
|
17
18
|
--rs-color-navygreen-500: #007C2F;
|
|
18
19
|
--rs-color-yellow-100: #FFF4E6;
|
|
19
20
|
--rs-color-yellow-500: #FF9001;
|
|
21
|
+
--rs-color-yellow-700: #CC7300;
|
|
20
22
|
--rs-color-red-100: #FFF0F1;
|
|
21
23
|
--rs-color-red-500: #D80115;
|
|
24
|
+
--rs-color-red-700: #A50110;
|
|
22
25
|
--rs-color-darkblue-100: #E5ECF5;
|
|
23
26
|
--rs-color-darkblue-500: #004A9F;
|
|
24
27
|
--rs-color-navyblue-100: var(--rs-color-darkblue-100);
|
|
@@ -51,6 +54,7 @@
|
|
|
51
54
|
--rs-color-text-brand-red: var(--rs-color-red-500);
|
|
52
55
|
--rs-color-text-placeholder: var(--rs-color-gray-500);
|
|
53
56
|
--rs-color-text-caution: var(--rs-color-yellow-500);
|
|
57
|
+
--rs-color-text-inverted: var(--rs-color-white-500);
|
|
54
58
|
--rs-color-text-button-primary: var(--rs-color-white-500);
|
|
55
59
|
--rs-color-text-button-secondary: var(--rs-color-gray-600);
|
|
56
60
|
--rs-color-text-button-tertiary: var(--rs-color-blue-500);
|
|
@@ -105,6 +109,11 @@
|
|
|
105
109
|
--rs-color-sidebar-background-hover: var(--rs-color-blue-100);
|
|
106
110
|
--rs-color-sidebar-stroke: var(--rs-color-gray-100);
|
|
107
111
|
--rs-color-sidebar-stroke-active: var(--rs-color-blue-500);
|
|
112
|
+
--rs-color-header-light-bg-primary: var(--rs-color-white-500);
|
|
113
|
+
--rs-color-header-light-bg-secondary: var(--rs-color-gray-100);
|
|
114
|
+
--rs-color-header-dark-bg-primary: var(--rs-color-black-500);
|
|
115
|
+
--rs-color-header-dark-bg-secondary: var(--rs-color-gray-700);
|
|
116
|
+
--rs-color-header-bg-tertiary: rgba(0, 0, 0, 0.3);
|
|
108
117
|
--page-background: #f7f8fa;
|
|
109
118
|
--page-surface: #ffffff;
|
|
110
119
|
--page-text: #1f2933;
|
|
@@ -262,6 +271,12 @@
|
|
|
262
271
|
<td><code>#4EAE01</code></td>
|
|
263
272
|
<td></td>
|
|
264
273
|
</tr>
|
|
274
|
+
<tr>
|
|
275
|
+
<td><span class="swatch" style="background: var(--rs-color-green-700);"></span><code>color-green-700</code></td>
|
|
276
|
+
<td><code>--rs-color-green-700</code></td>
|
|
277
|
+
<td><code>#3A8501</code></td>
|
|
278
|
+
<td></td>
|
|
279
|
+
</tr>
|
|
265
280
|
<tr>
|
|
266
281
|
<td><span class="swatch" style="background: var(--rs-color-navygreen-100);"></span><code>color-navygreen-100</code></td>
|
|
267
282
|
<td><code>--rs-color-navygreen-100</code></td>
|
|
@@ -286,6 +301,12 @@
|
|
|
286
301
|
<td><code>#FF9001</code></td>
|
|
287
302
|
<td></td>
|
|
288
303
|
</tr>
|
|
304
|
+
<tr>
|
|
305
|
+
<td><span class="swatch" style="background: var(--rs-color-yellow-700);"></span><code>color-yellow-700</code></td>
|
|
306
|
+
<td><code>--rs-color-yellow-700</code></td>
|
|
307
|
+
<td><code>#CC7300</code></td>
|
|
308
|
+
<td></td>
|
|
309
|
+
</tr>
|
|
289
310
|
<tr>
|
|
290
311
|
<td><span class="swatch" style="background: var(--rs-color-red-100);"></span><code>color-red-100</code></td>
|
|
291
312
|
<td><code>--rs-color-red-100</code></td>
|
|
@@ -298,6 +319,12 @@
|
|
|
298
319
|
<td><code>#D80115</code></td>
|
|
299
320
|
<td></td>
|
|
300
321
|
</tr>
|
|
322
|
+
<tr>
|
|
323
|
+
<td><span class="swatch" style="background: var(--rs-color-red-700);"></span><code>color-red-700</code></td>
|
|
324
|
+
<td><code>--rs-color-red-700</code></td>
|
|
325
|
+
<td><code>#A50110</code></td>
|
|
326
|
+
<td></td>
|
|
327
|
+
</tr>
|
|
301
328
|
<tr>
|
|
302
329
|
<td><span class="swatch" style="background: var(--rs-color-darkblue-100);"></span><code>color-darkblue-100</code></td>
|
|
303
330
|
<td><code>--rs-color-darkblue-100</code></td>
|
|
@@ -484,6 +511,12 @@
|
|
|
484
511
|
<td><code>var(--rs-color-yellow-500)</code></td>
|
|
485
512
|
<td></td>
|
|
486
513
|
</tr>
|
|
514
|
+
<tr>
|
|
515
|
+
<td><span class="swatch" style="background: var(--rs-color-text-inverted);"></span><code>color-text-inverted</code></td>
|
|
516
|
+
<td><code>--rs-color-text-inverted</code></td>
|
|
517
|
+
<td><code>var(--rs-color-white-500)</code></td>
|
|
518
|
+
<td></td>
|
|
519
|
+
</tr>
|
|
487
520
|
<tr>
|
|
488
521
|
<td><span class="swatch" style="background: var(--rs-color-text-button-primary);"></span><code>color-text-button-primary</code></td>
|
|
489
522
|
<td><code>--rs-color-text-button-primary</code></td>
|
|
@@ -836,6 +869,36 @@
|
|
|
836
869
|
<td><code>var(--rs-color-blue-500)</code></td>
|
|
837
870
|
<td></td>
|
|
838
871
|
</tr>
|
|
872
|
+
<tr>
|
|
873
|
+
<td><span class="swatch" style="background: var(--rs-color-header-light-bg-primary);"></span><code>color-header-light-bg-primary</code></td>
|
|
874
|
+
<td><code>--rs-color-header-light-bg-primary</code></td>
|
|
875
|
+
<td><code>var(--rs-color-white-500)</code></td>
|
|
876
|
+
<td></td>
|
|
877
|
+
</tr>
|
|
878
|
+
<tr>
|
|
879
|
+
<td><span class="swatch" style="background: var(--rs-color-header-light-bg-secondary);"></span><code>color-header-light-bg-secondary</code></td>
|
|
880
|
+
<td><code>--rs-color-header-light-bg-secondary</code></td>
|
|
881
|
+
<td><code>var(--rs-color-gray-100)</code></td>
|
|
882
|
+
<td></td>
|
|
883
|
+
</tr>
|
|
884
|
+
<tr>
|
|
885
|
+
<td><span class="swatch" style="background: var(--rs-color-header-dark-bg-primary);"></span><code>color-header-dark-bg-primary</code></td>
|
|
886
|
+
<td><code>--rs-color-header-dark-bg-primary</code></td>
|
|
887
|
+
<td><code>var(--rs-color-black-500)</code></td>
|
|
888
|
+
<td></td>
|
|
889
|
+
</tr>
|
|
890
|
+
<tr>
|
|
891
|
+
<td><span class="swatch" style="background: var(--rs-color-header-dark-bg-secondary);"></span><code>color-header-dark-bg-secondary</code></td>
|
|
892
|
+
<td><code>--rs-color-header-dark-bg-secondary</code></td>
|
|
893
|
+
<td><code>var(--rs-color-gray-700)</code></td>
|
|
894
|
+
<td></td>
|
|
895
|
+
</tr>
|
|
896
|
+
<tr>
|
|
897
|
+
<td><span class="swatch" style="background: var(--rs-color-header-bg-tertiary);"></span><code>color-header-bg-tertiary</code></td>
|
|
898
|
+
<td><code>--rs-color-header-bg-tertiary</code></td>
|
|
899
|
+
<td><code>rgba(0, 0, 0, 0.3)</code></td>
|
|
900
|
+
<td></td>
|
|
901
|
+
</tr>
|
|
839
902
|
</tbody>
|
|
840
903
|
</table>
|
|
841
904
|
</section>
|
package/dist/tokens.json
CHANGED
|
@@ -30,6 +30,11 @@
|
|
|
30
30
|
"value": "#4EAE01",
|
|
31
31
|
"type": "color"
|
|
32
32
|
},
|
|
33
|
+
"color-green-700": {
|
|
34
|
+
"cssVariable": "--rs-color-green-700",
|
|
35
|
+
"value": "#3A8501",
|
|
36
|
+
"type": "color"
|
|
37
|
+
},
|
|
33
38
|
"color-navygreen-100": {
|
|
34
39
|
"cssVariable": "--rs-color-navygreen-100",
|
|
35
40
|
"value": "#E5F1EA",
|
|
@@ -50,6 +55,11 @@
|
|
|
50
55
|
"value": "#FF9001",
|
|
51
56
|
"type": "color"
|
|
52
57
|
},
|
|
58
|
+
"color-yellow-700": {
|
|
59
|
+
"cssVariable": "--rs-color-yellow-700",
|
|
60
|
+
"value": "#CC7300",
|
|
61
|
+
"type": "color"
|
|
62
|
+
},
|
|
53
63
|
"color-red-100": {
|
|
54
64
|
"cssVariable": "--rs-color-red-100",
|
|
55
65
|
"value": "#FFF0F1",
|
|
@@ -60,6 +70,11 @@
|
|
|
60
70
|
"value": "#D80115",
|
|
61
71
|
"type": "color"
|
|
62
72
|
},
|
|
73
|
+
"color-red-700": {
|
|
74
|
+
"cssVariable": "--rs-color-red-700",
|
|
75
|
+
"value": "#A50110",
|
|
76
|
+
"type": "color"
|
|
77
|
+
},
|
|
63
78
|
"color-darkblue-100": {
|
|
64
79
|
"cssVariable": "--rs-color-darkblue-100",
|
|
65
80
|
"value": "#E5ECF5",
|
|
@@ -227,6 +242,11 @@
|
|
|
227
242
|
"value": "var(--rs-color-yellow-500)",
|
|
228
243
|
"type": "color"
|
|
229
244
|
},
|
|
245
|
+
"color-text-inverted": {
|
|
246
|
+
"cssVariable": "--rs-color-text-inverted",
|
|
247
|
+
"value": "var(--rs-color-white-500)",
|
|
248
|
+
"type": "color"
|
|
249
|
+
},
|
|
230
250
|
"color-text-button-primary": {
|
|
231
251
|
"cssVariable": "--rs-color-text-button-primary",
|
|
232
252
|
"value": "var(--rs-color-white-500)",
|
|
@@ -498,5 +518,30 @@
|
|
|
498
518
|
"cssVariable": "--rs-color-sidebar-stroke-active",
|
|
499
519
|
"value": "var(--rs-color-blue-500)",
|
|
500
520
|
"type": "component"
|
|
521
|
+
},
|
|
522
|
+
"color-header-light-bg-primary": {
|
|
523
|
+
"cssVariable": "--rs-color-header-light-bg-primary",
|
|
524
|
+
"value": "var(--rs-color-white-500)",
|
|
525
|
+
"type": "component"
|
|
526
|
+
},
|
|
527
|
+
"color-header-light-bg-secondary": {
|
|
528
|
+
"cssVariable": "--rs-color-header-light-bg-secondary",
|
|
529
|
+
"value": "var(--rs-color-gray-100)",
|
|
530
|
+
"type": "component"
|
|
531
|
+
},
|
|
532
|
+
"color-header-dark-bg-primary": {
|
|
533
|
+
"cssVariable": "--rs-color-header-dark-bg-primary",
|
|
534
|
+
"value": "var(--rs-color-black-500)",
|
|
535
|
+
"type": "component"
|
|
536
|
+
},
|
|
537
|
+
"color-header-dark-bg-secondary": {
|
|
538
|
+
"cssVariable": "--rs-color-header-dark-bg-secondary",
|
|
539
|
+
"value": "var(--rs-color-gray-700)",
|
|
540
|
+
"type": "component"
|
|
541
|
+
},
|
|
542
|
+
"color-header-bg-tertiary": {
|
|
543
|
+
"cssVariable": "--rs-color-header-bg-tertiary",
|
|
544
|
+
"value": "rgba(0, 0, 0, 0.3)",
|
|
545
|
+
"type": "component"
|
|
501
546
|
}
|
|
502
547
|
}
|
package/dist/tokens.md
CHANGED
|
@@ -15,12 +15,15 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
|
|
|
15
15
|
| `color-blue-700` | `--rs-color-blue-700` | `#2A719B` | |
|
|
16
16
|
| `color-green-100` | `--rs-color-green-100` | `#EDF7E6` | |
|
|
17
17
|
| `color-green-500` | `--rs-color-green-500` | `#4EAE01` | |
|
|
18
|
+
| `color-green-700` | `--rs-color-green-700` | `#3A8501` | |
|
|
18
19
|
| `color-navygreen-100` | `--rs-color-navygreen-100` | `#E5F1EA` | |
|
|
19
20
|
| `color-navygreen-500` | `--rs-color-navygreen-500` | `#007C2F` | |
|
|
20
21
|
| `color-yellow-100` | `--rs-color-yellow-100` | `#FFF4E6` | |
|
|
21
22
|
| `color-yellow-500` | `--rs-color-yellow-500` | `#FF9001` | |
|
|
23
|
+
| `color-yellow-700` | `--rs-color-yellow-700` | `#CC7300` | |
|
|
22
24
|
| `color-red-100` | `--rs-color-red-100` | `#FFF0F1` | |
|
|
23
25
|
| `color-red-500` | `--rs-color-red-500` | `#D80115` | |
|
|
26
|
+
| `color-red-700` | `--rs-color-red-700` | `#A50110` | |
|
|
24
27
|
| `color-darkblue-100` | `--rs-color-darkblue-100` | `#E5ECF5` | |
|
|
25
28
|
| `color-darkblue-500` | `--rs-color-darkblue-500` | `#004A9F` | |
|
|
26
29
|
| `color-navyblue-100` | `--rs-color-navyblue-100` | `var(--rs-color-darkblue-100)` | Backfilled legacy navyblue reference from the darkblue scale. |
|
|
@@ -52,6 +55,7 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
|
|
|
52
55
|
| `color-text-brand-red` | `--rs-color-text-brand-red` | `var(--rs-color-red-500)` | |
|
|
53
56
|
| `color-text-placeholder` | `--rs-color-text-placeholder` | `var(--rs-color-gray-500)` | |
|
|
54
57
|
| `color-text-caution` | `--rs-color-text-caution` | `var(--rs-color-yellow-500)` | |
|
|
58
|
+
| `color-text-inverted` | `--rs-color-text-inverted` | `var(--rs-color-white-500)` | |
|
|
55
59
|
| `color-text-button-primary` | `--rs-color-text-button-primary` | `var(--rs-color-white-500)` | |
|
|
56
60
|
| `color-text-button-secondary` | `--rs-color-text-button-secondary` | `var(--rs-color-gray-600)` | |
|
|
57
61
|
| `color-text-button-tertiary` | `--rs-color-text-button-tertiary` | `var(--rs-color-blue-500)` | |
|
|
@@ -117,3 +121,8 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
|
|
|
117
121
|
| `color-sidebar-background-hover` | `--rs-color-sidebar-background-hover` | `var(--rs-color-blue-100)` | |
|
|
118
122
|
| `color-sidebar-stroke` | `--rs-color-sidebar-stroke` | `var(--rs-color-gray-100)` | |
|
|
119
123
|
| `color-sidebar-stroke-active` | `--rs-color-sidebar-stroke-active` | `var(--rs-color-blue-500)` | |
|
|
124
|
+
| `color-header-light-bg-primary` | `--rs-color-header-light-bg-primary` | `var(--rs-color-white-500)` | |
|
|
125
|
+
| `color-header-light-bg-secondary` | `--rs-color-header-light-bg-secondary` | `var(--rs-color-gray-100)` | |
|
|
126
|
+
| `color-header-dark-bg-primary` | `--rs-color-header-dark-bg-primary` | `var(--rs-color-black-500)` | |
|
|
127
|
+
| `color-header-dark-bg-secondary` | `--rs-color-header-dark-bg-secondary` | `var(--rs-color-gray-700)` | |
|
|
128
|
+
| `color-header-bg-tertiary` | `--rs-color-header-bg-tertiary` | `rgba(0, 0, 0, 0.3)` | |
|