@robosophy/tokens 1.0.6 → 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.
Files changed (10) hide show
  1. package/dist/ai-context.md +10 -1
  2. package/dist/index.d.ts +10 -1
  3. package/dist/index.js +11 -2
  4. package/dist/tailwind-preset.js +11 -2
  5. package/dist/tailwind.css +5 -1
  6. package/dist/tokens.css +20 -2
  7. package/dist/tokens.html +66 -3
  8. package/dist/tokens.json +47 -2
  9. package/dist/tokens.md +10 -1
  10. 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)`
@@ -104,7 +108,7 @@ import tokensJson from "@robosophy/tokens/tokens.json";
104
108
  - `--rs-color-icon-project-cyo`: `var(--rs-color-project-cyo)`
105
109
  - `--rs-color-icon-success`: `var(--rs-color-green-500)`
106
110
  - `--rs-color-icon-warning`: `var(--rs-color-yellow-500)`
107
- - `--rs-color-icon-error`: `var(--rs-color-red-500)`
111
+ - `--rs-color-icon-danger`: `var(--rs-color-red-500)`
108
112
  - `--rs-color-stroke-default`: `var(--rs-color-gray-500)`
109
113
  - `--rs-color-stroke-focused`: `var(--rs-color-blue-500)`
110
114
  - `--rs-color-stroke-disabled`: `var(--rs-color-gray-100)`
@@ -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)";
@@ -66,7 +70,7 @@ export declare const tokens: {
66
70
  readonly "color-icon-project-cyo": "var(--rs-color-project-cyo)";
67
71
  readonly "color-icon-success": "var(--rs-color-green-500)";
68
72
  readonly "color-icon-warning": "var(--rs-color-yellow-500)";
69
- readonly "color-icon-error": "var(--rs-color-red-500)";
73
+ readonly "color-icon-danger": "var(--rs-color-red-500)";
70
74
  readonly "color-stroke-default": "var(--rs-color-gray-500)";
71
75
  readonly "color-stroke-focused": "var(--rs-color-blue-500)";
72
76
  readonly "color-stroke-disabled": "var(--rs-color-gray-100)";
@@ -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)",
@@ -66,7 +70,7 @@ export const tokens = {
66
70
  "color-icon-project-cyo": "var(--rs-color-project-cyo)",
67
71
  "color-icon-success": "var(--rs-color-green-500)",
68
72
  "color-icon-warning": "var(--rs-color-yellow-500)",
69
- "color-icon-error": "var(--rs-color-red-500)",
73
+ "color-icon-danger": "var(--rs-color-red-500)",
70
74
  "color-stroke-default": "var(--rs-color-gray-500)",
71
75
  "color-stroke-focused": "var(--rs-color-blue-500)",
72
76
  "color-stroke-disabled": "var(--rs-color-gray-100)",
@@ -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)",
@@ -69,7 +73,7 @@ const preset = {
69
73
  "icon-project-cyo": "var(--rs-color-icon-project-cyo)",
70
74
  "icon-success": "var(--rs-color-icon-success)",
71
75
  "icon-warning": "var(--rs-color-icon-warning)",
72
- "icon-error": "var(--rs-color-icon-error)",
76
+ "icon-danger": "var(--rs-color-icon-danger)",
73
77
  "stroke-default": "var(--rs-color-stroke-default)",
74
78
  "stroke-focused": "var(--rs-color-stroke-focused)",
75
79
  "stroke-disabled": "var(--rs-color-stroke-disabled)",
@@ -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);
@@ -66,7 +70,7 @@
66
70
  --color-rs-icon-project-cyo: var(--rs-color-icon-project-cyo);
67
71
  --color-rs-icon-success: var(--rs-color-icon-success);
68
72
  --color-rs-icon-warning: var(--rs-color-icon-warning);
69
- --color-rs-icon-error: var(--rs-color-icon-error);
73
+ --color-rs-icon-danger: var(--rs-color-icon-danger);
70
74
  --color-rs-stroke-default: var(--rs-color-stroke-default);
71
75
  --color-rs-stroke-focused: var(--rs-color-stroke-focused);
72
76
  --color-rs-stroke-disabled: var(--rs-color-stroke-disabled);
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);
@@ -66,7 +70,7 @@
66
70
  --rs-color-icon-project-cyo: var(--rs-color-project-cyo);
67
71
  --rs-color-icon-success: var(--rs-color-green-500);
68
72
  --rs-color-icon-warning: var(--rs-color-yellow-500);
69
- --rs-color-icon-error: var(--rs-color-red-500);
73
+ --rs-color-icon-danger: var(--rs-color-red-500);
70
74
  --rs-color-stroke-default: var(--rs-color-gray-500);
71
75
  --rs-color-stroke-focused: var(--rs-color-blue-500);
72
76
  --rs-color-stroke-disabled: var(--rs-color-gray-100);
@@ -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);
@@ -166,7 +179,7 @@
166
179
  --color-icon-project-cyo: var(--rs-color-icon-project-cyo);
167
180
  --color-icon-success: var(--rs-color-icon-success);
168
181
  --color-icon-warning: var(--rs-color-icon-warning);
169
- --color-icon-error: var(--rs-color-icon-error);
182
+ --color-icon-danger: var(--rs-color-icon-danger);
170
183
  --color-stroke-default: var(--rs-color-stroke-default);
171
184
  --color-stroke-focused: var(--rs-color-stroke-focused);
172
185
  --color-stroke-disabled: var(--rs-color-stroke-disabled);
@@ -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);
@@ -73,7 +77,7 @@
73
77
  --rs-color-icon-project-cyo: var(--rs-color-project-cyo);
74
78
  --rs-color-icon-success: var(--rs-color-green-500);
75
79
  --rs-color-icon-warning: var(--rs-color-yellow-500);
76
- --rs-color-icon-error: var(--rs-color-red-500);
80
+ --rs-color-icon-danger: var(--rs-color-red-500);
77
81
  --rs-color-stroke-default: var(--rs-color-gray-500);
78
82
  --rs-color-stroke-focused: var(--rs-color-blue-500);
79
83
  --rs-color-stroke-disabled: var(--rs-color-gray-100);
@@ -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>
@@ -617,8 +650,8 @@
617
650
  <td></td>
618
651
  </tr>
619
652
  <tr>
620
- <td><span class="swatch" style="background: var(--rs-color-icon-error);"></span><code>color-icon-error</code></td>
621
- <td><code>--rs-color-icon-error</code></td>
653
+ <td><span class="swatch" style="background: var(--rs-color-icon-danger);"></span><code>color-icon-danger</code></td>
654
+ <td><code>--rs-color-icon-danger</code></td>
622
655
  <td><code>var(--rs-color-red-500)</code></td>
623
656
  <td></td>
624
657
  </tr>
@@ -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)",
@@ -337,8 +357,8 @@
337
357
  "value": "var(--rs-color-yellow-500)",
338
358
  "type": "color"
339
359
  },
340
- "color-icon-error": {
341
- "cssVariable": "--rs-color-icon-error",
360
+ "color-icon-danger": {
361
+ "cssVariable": "--rs-color-icon-danger",
342
362
  "value": "var(--rs-color-red-500)",
343
363
  "type": "color"
344
364
  },
@@ -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)` | |
@@ -74,7 +78,7 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
74
78
  | `color-icon-project-cyo` | `--rs-color-icon-project-cyo` | `var(--rs-color-project-cyo)` | |
75
79
  | `color-icon-success` | `--rs-color-icon-success` | `var(--rs-color-green-500)` | |
76
80
  | `color-icon-warning` | `--rs-color-icon-warning` | `var(--rs-color-yellow-500)` | |
77
- | `color-icon-error` | `--rs-color-icon-error` | `var(--rs-color-red-500)` | |
81
+ | `color-icon-danger` | `--rs-color-icon-danger` | `var(--rs-color-red-500)` | |
78
82
  | `color-stroke-default` | `--rs-color-stroke-default` | `var(--rs-color-gray-500)` | |
79
83
  | `color-stroke-focused` | `--rs-color-stroke-focused` | `var(--rs-color-blue-500)` | |
80
84
  | `color-stroke-disabled` | `--rs-color-stroke-disabled` | `var(--rs-color-gray-100)` | |
@@ -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)` | |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "private": false,
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",