@crewlethq/tokens 0.18.0 → 0.19.0

package/dist/css/themes/abyss.css

@@ -39,6 +39,7 @@
   --color-border-hover: #3c3054;
   --color-border-strong: #3c3054;
   --color-border-strong-hover: #4a3e64;
+  --color-border-hatch: #2b1e41;
   --color-border-control: #7b738e;
   --color-focus: #8e4eff;
   --color-feedback-success: #16d297;
@@ -146,6 +147,7 @@
     --color-border-hover: #cdc7dc;
     --color-border-strong: #cdc7dc;
     --color-border-strong-hover: #bcb5cc;
+    --color-border-hatch: #dedae9;
     --color-border-control: #78708b;
     --color-focus: #6b11da;
     --color-feedback-success: #019472;
@@ -253,6 +255,7 @@
   --color-border-hover: #cdc7dc;
   --color-border-strong: #cdc7dc;
   --color-border-strong-hover: #bcb5cc;
+  --color-border-hatch: #dedae9;
   --color-border-control: #78708b;
   --color-focus: #6b11da;
   --color-feedback-success: #019472;

package/dist/css/themes/all.css

@@ -41,6 +41,7 @@
   --color-border-hover: #303038;
   --color-border-strong: #303038;
   --color-border-strong-hover: #3e3e48;
+  --color-border-hatch: #232329;
   --color-border-control: #797983;
   --color-focus: #7e5bff;
   --color-feedback-success: #3ecf8f;
@@ -148,6 +149,7 @@
     --color-border-hover: #d3d3ce;
     --color-border-strong: #d3d3ce;
     --color-border-strong-hover: #c2c2bc;
+    --color-border-hatch: #e2e2df;
     --color-border-control: #7b7a81;
     --color-focus: #6b45f0;
     --color-feedback-success: #009b74;
@@ -255,6 +257,7 @@
   --color-border-hover: #d3d3ce;
   --color-border-strong: #d3d3ce;
   --color-border-strong-hover: #c2c2bc;
+  --color-border-hatch: #e2e2df;
   --color-border-control: #7b7a81;
   --color-focus: #6b45f0;
   --color-feedback-success: #009b74;
@@ -362,6 +365,7 @@
   --color-border-hover: #3f4145;
   --color-border-strong: #4a4d52;
   --color-border-strong-hover: #4a4d52;
+  --color-border-hatch: #323439;
   --color-border-control: #828ca0;
   --color-focus: #7d8fe8;
   --color-feedback-success: #3eba82;
@@ -469,6 +473,7 @@
     --color-border-hover: #c4c4ca;
     --color-border-strong: #d4d4d8;
     --color-border-strong-hover: #b4b4bc;
+    --color-border-hatch: #e5e5e8;
     --color-border-control: #71717a;
     --color-focus: #5469d4;
     --color-feedback-success: #0f9a73;
@@ -576,6 +581,7 @@
   --color-border-hover: #c4c4ca;
   --color-border-strong: #d4d4d8;
   --color-border-strong-hover: #b4b4bc;
+  --color-border-hatch: #e5e5e8;
   --color-border-control: #71717a;
   --color-focus: #5469d4;
   --color-feedback-success: #0f9a73;
@@ -683,6 +689,7 @@
   --color-border-hover: #3c3054;
   --color-border-strong: #3c3054;
   --color-border-strong-hover: #4a3e64;
+  --color-border-hatch: #2b1e41;
   --color-border-control: #7b738e;
   --color-focus: #8e4eff;
   --color-feedback-success: #16d297;
@@ -790,6 +797,7 @@
     --color-border-hover: #cdc7dc;
     --color-border-strong: #cdc7dc;
     --color-border-strong-hover: #bcb5cc;
+    --color-border-hatch: #dedae9;
     --color-border-control: #78708b;
     --color-focus: #6b11da;
     --color-feedback-success: #019472;
@@ -897,6 +905,7 @@
   --color-border-hover: #cdc7dc;
   --color-border-strong: #cdc7dc;
   --color-border-strong-hover: #bcb5cc;
+  --color-border-hatch: #dedae9;
   --color-border-control: #78708b;
   --color-focus: #6b11da;
   --color-feedback-success: #019472;
@@ -1004,6 +1013,7 @@
   --color-border-hover: #39334b;
   --color-border-strong: #39334b;
   --color-border-strong-hover: #48415d;
+  --color-border-hatch: #292339;
   --color-border-control: #767285;
   --color-focus: #9584ff;
   --color-feedback-success: #27cf9b;
@@ -1111,6 +1121,7 @@
     --color-border-hover: #c8c4d8;
     --color-border-strong: #c8c4d8;
     --color-border-strong-hover: #b6b2c8;
+    --color-border-hatch: #dbd8e7;
     --color-border-control: #4c495b;
     --color-focus: #4a2abd;
     --color-feedback-success: #039571;
@@ -1218,6 +1229,7 @@
   --color-border-hover: #c8c4d8;
   --color-border-strong: #c8c4d8;
   --color-border-strong-hover: #b6b2c8;
+  --color-border-hatch: #dbd8e7;
   --color-border-control: #4c495b;
   --color-focus: #4a2abd;
   --color-feedback-success: #039571;
@@ -1325,6 +1337,7 @@
   --color-border-hover: #393044;
   --color-border-strong: #393044;
   --color-border-strong-hover: #473e53;
+  --color-border-hatch: #292232;
   --color-border-control: #837b92;
   --color-focus: #d6b7fc;
   --color-feedback-success: #8ec899;
@@ -1432,6 +1445,7 @@
     --color-border-hover: #ccc5d5;
     --color-border-strong: #ccc5d5;
     --color-border-strong-hover: #bbb4c4;
+    --color-border-hatch: #dcd7e3;
     --color-border-control: #7d7089;
     --color-focus: #4e247e;
     --color-feedback-success: #527b67;
@@ -1539,6 +1553,7 @@
   --color-border-hover: #ccc5d5;
   --color-border-strong: #ccc5d5;
   --color-border-strong-hover: #bbb4c4;
+  --color-border-hatch: #dcd7e3;
   --color-border-control: #7d7089;
   --color-focus: #4e247e;
   --color-feedback-success: #527b67;
@@ -1646,6 +1661,7 @@
   --color-border-hover: #2b3245;
   --color-border-strong: #2b3245;
   --color-border-strong-hover: #384158;
+  --color-border-hatch: #1f2432;
   --color-border-control: #727a8f;
   --color-focus: #606af8;
   --color-feedback-success: #34c98b;
@@ -1753,6 +1769,7 @@
     --color-border-hover: #c9cfdc;
     --color-border-strong: #c9cfdc;
     --color-border-strong-hover: #b5bdce;
+    --color-border-hatch: #dbdfe8;
     --color-border-control: #74798c;
     --color-focus: #4c55e6;
     --color-feedback-success: #00916f;
@@ -1860,6 +1877,7 @@
   --color-border-hover: #c9cfdc;
   --color-border-strong: #c9cfdc;
   --color-border-strong-hover: #b5bdce;
+  --color-border-hatch: #dbdfe8;
   --color-border-control: #74798c;
   --color-focus: #4c55e6;
   --color-feedback-success: #00916f;
@@ -1967,6 +1985,7 @@
   --color-border-hover: #2b3245;
   --color-border-strong: #2b3245;
   --color-border-strong-hover: #38405a;
+  --color-border-hatch: #1f2432;
   --color-border-control: #72798b;
   --color-focus: #9584ff;
   --color-feedback-success: #20cc98;
@@ -2074,6 +2093,7 @@
     --color-border-hover: #c9cfdc;
     --color-border-strong: #c9cfdc;
     --color-border-strong-hover: #b7becd;
+    --color-border-hatch: #dbdfe8;
     --color-border-control: #464b5c;
     --color-focus: #4a2abd;
     --color-feedback-success: #039571;
@@ -2181,6 +2201,7 @@
   --color-border-hover: #c9cfdc;
   --color-border-strong: #c9cfdc;
   --color-border-strong-hover: #b7becd;
+  --color-border-hatch: #dbdfe8;
   --color-border-control: #464b5c;
   --color-focus: #4a2abd;
   --color-feedback-success: #039571;
@@ -2288,6 +2309,7 @@
   --color-border-hover: #3a3730;
   --color-border-strong: #3a3730;
   --color-border-strong-hover: #4b473e;
+  --color-border-hatch: #2b2923;
   --color-border-control: #827d74;
   --color-focus: #5272f6;
   --color-feedback-success: #53cc8f;
@@ -2395,6 +2417,7 @@
     --color-border-hover: #cdc6b8;
     --color-border-strong: #cdc6b8;
     --color-border-strong-hover: #bab1a0;
+    --color-border-hatch: #ddd9cf;
     --color-border-control: #7e776b;
     --color-focus: #2f50d8;
     --color-feedback-success: #1a9368;
@@ -2502,6 +2525,7 @@
   --color-border-hover: #cdc6b8;
   --color-border-strong: #cdc6b8;
   --color-border-strong-hover: #bab1a0;
+  --color-border-hatch: #ddd9cf;
   --color-border-control: #7e776b;
   --color-focus: #2f50d8;
   --color-feedback-success: #1a9368;
@@ -2609,6 +2633,7 @@
   --color-border-hover: #9a9aae;
   --color-border-strong: #9a9aae;
   --color-border-strong-hover: #b8b8c8;
+  --color-border-hatch: #61616f;
   --color-border-control: #a2a2b4;
   --color-focus: #ffe066;
   --color-feedback-success: #34c98b;
@@ -2716,6 +2741,7 @@
     --color-border-hover: #4f4f60;
     --color-border-strong: #4f4f60;
     --color-border-strong-hover: #383846;
+    --color-border-hatch: #92929e;
     --color-border-control: #5b5b69;
     --color-focus: #4424c4;
     --color-feedback-success: #0b9a74;
@@ -2823,6 +2849,7 @@
   --color-border-hover: #4f4f60;
   --color-border-strong: #4f4f60;
   --color-border-strong-hover: #383846;
+  --color-border-hatch: #92929e;
   --color-border-control: #5b5b69;
   --color-focus: #4424c4;
   --color-feedback-success: #0b9a74;

package/dist/css/themes/dusk.css

@@ -39,6 +39,7 @@
   --color-border-hover: #393044;
   --color-border-strong: #393044;
   --color-border-strong-hover: #473e53;
+  --color-border-hatch: #292232;
   --color-border-control: #837b92;
   --color-focus: #d6b7fc;
   --color-feedback-success: #8ec899;
@@ -146,6 +147,7 @@
     --color-border-hover: #ccc5d5;
     --color-border-strong: #ccc5d5;
     --color-border-strong-hover: #bbb4c4;
+    --color-border-hatch: #dcd7e3;
     --color-border-control: #7d7089;
     --color-focus: #4e247e;
     --color-feedback-success: #527b67;
@@ -253,6 +255,7 @@
   --color-border-hover: #ccc5d5;
   --color-border-strong: #ccc5d5;
   --color-border-strong-hover: #bbb4c4;
+  --color-border-hatch: #dcd7e3;
   --color-border-control: #7d7089;
   --color-focus: #4e247e;
   --color-feedback-success: #527b67;

package/dist/css/themes/high-contrast.css

@@ -39,6 +39,7 @@
   --color-border-hover: #9a9aae;
   --color-border-strong: #9a9aae;
   --color-border-strong-hover: #b8b8c8;
+  --color-border-hatch: #61616f;
   --color-border-control: #a2a2b4;
   --color-focus: #ffe066;
   --color-feedback-success: #34c98b;
@@ -146,6 +147,7 @@
     --color-border-hover: #4f4f60;
     --color-border-strong: #4f4f60;
     --color-border-strong-hover: #383846;
+    --color-border-hatch: #92929e;
     --color-border-control: #5b5b69;
     --color-focus: #4424c4;
     --color-feedback-success: #0b9a74;
@@ -253,6 +255,7 @@
   --color-border-hover: #4f4f60;
   --color-border-strong: #4f4f60;
   --color-border-strong-hover: #383846;
+  --color-border-hatch: #92929e;
   --color-border-control: #5b5b69;
   --color-focus: #4424c4;
   --color-feedback-success: #0b9a74;

package/dist/css/themes/iris.css

@@ -39,6 +39,7 @@
   --color-border-hover: #39334b;
   --color-border-strong: #39334b;
   --color-border-strong-hover: #48415d;
+  --color-border-hatch: #292339;
   --color-border-control: #767285;
   --color-focus: #9584ff;
   --color-feedback-success: #27cf9b;
@@ -146,6 +147,7 @@
     --color-border-hover: #c8c4d8;
     --color-border-strong: #c8c4d8;
     --color-border-strong-hover: #b6b2c8;
+    --color-border-hatch: #dbd8e7;
     --color-border-control: #4c495b;
     --color-focus: #4a2abd;
     --color-feedback-success: #039571;
@@ -253,6 +255,7 @@
   --color-border-hover: #c8c4d8;
   --color-border-strong: #c8c4d8;
   --color-border-strong-hover: #b6b2c8;
+  --color-border-hatch: #dbd8e7;
   --color-border-control: #4c495b;
   --color-focus: #4a2abd;
   --color-feedback-success: #039571;

package/dist/css/themes/ledger.css

@@ -39,6 +39,7 @@
   --color-border-hover: #3a3730;
   --color-border-strong: #3a3730;
   --color-border-strong-hover: #4b473e;
+  --color-border-hatch: #2b2923;
   --color-border-control: #827d74;
   --color-focus: #5272f6;
   --color-feedback-success: #53cc8f;
@@ -146,6 +147,7 @@
     --color-border-hover: #cdc6b8;
     --color-border-strong: #cdc6b8;
     --color-border-strong-hover: #bab1a0;
+    --color-border-hatch: #ddd9cf;
     --color-border-control: #7e776b;
     --color-focus: #2f50d8;
     --color-feedback-success: #1a9368;
@@ -253,6 +255,7 @@
   --color-border-hover: #cdc6b8;
   --color-border-strong: #cdc6b8;
   --color-border-strong-hover: #bab1a0;
+  --color-border-hatch: #ddd9cf;
   --color-border-control: #7e776b;
   --color-focus: #2f50d8;
   --color-feedback-success: #1a9368;

package/dist/css/themes/nightshade.css

@@ -39,6 +39,7 @@
   --color-border-hover: #2b3245;
   --color-border-strong: #2b3245;
   --color-border-strong-hover: #38405a;
+  --color-border-hatch: #1f2432;
   --color-border-control: #72798b;
   --color-focus: #9584ff;
   --color-feedback-success: #20cc98;
@@ -146,6 +147,7 @@
     --color-border-hover: #c9cfdc;
     --color-border-strong: #c9cfdc;
     --color-border-strong-hover: #b7becd;
+    --color-border-hatch: #dbdfe8;
     --color-border-control: #464b5c;
     --color-focus: #4a2abd;
     --color-feedback-success: #039571;
@@ -253,6 +255,7 @@
   --color-border-hover: #c9cfdc;
   --color-border-strong: #c9cfdc;
   --color-border-strong-hover: #b7becd;
+  --color-border-hatch: #dbdfe8;
   --color-border-control: #464b5c;
   --color-focus: #4a2abd;
   --color-feedback-success: #039571;

package/dist/css/themes/nocturne.css

@@ -39,6 +39,7 @@
   --color-border-hover: #2b3245;
   --color-border-strong: #2b3245;
   --color-border-strong-hover: #384158;
+  --color-border-hatch: #1f2432;
   --color-border-control: #727a8f;
   --color-focus: #606af8;
   --color-feedback-success: #34c98b;
@@ -146,6 +147,7 @@
     --color-border-hover: #c9cfdc;
     --color-border-strong: #c9cfdc;
     --color-border-strong-hover: #b5bdce;
+    --color-border-hatch: #dbdfe8;
     --color-border-control: #74798c;
     --color-focus: #4c55e6;
     --color-feedback-success: #00916f;
@@ -253,6 +255,7 @@
   --color-border-hover: #c9cfdc;
   --color-border-strong: #c9cfdc;
   --color-border-strong-hover: #b5bdce;
+  --color-border-hatch: #dbdfe8;
   --color-border-control: #74798c;
   --color-focus: #4c55e6;
   --color-feedback-success: #00916f;

package/dist/css/themes/origin.css

@@ -39,6 +39,7 @@
   --color-border-hover: #3f4145;
   --color-border-strong: #4a4d52;
   --color-border-strong-hover: #4a4d52;
+  --color-border-hatch: #323439;
   --color-border-control: #828ca0;
   --color-focus: #7d8fe8;
   --color-feedback-success: #3eba82;
@@ -146,6 +147,7 @@
     --color-border-hover: #c4c4ca;
     --color-border-strong: #d4d4d8;
     --color-border-strong-hover: #b4b4bc;
+    --color-border-hatch: #e5e5e8;
     --color-border-control: #71717a;
     --color-focus: #5469d4;
     --color-feedback-success: #0f9a73;
@@ -253,6 +255,7 @@
   --color-border-hover: #c4c4ca;
   --color-border-strong: #d4d4d8;
   --color-border-strong-hover: #b4b4bc;
+  --color-border-hatch: #e5e5e8;
   --color-border-control: #71717a;
   --color-focus: #5469d4;
   --color-feedback-success: #0f9a73;

package/dist/css/themes/violet.css

@@ -39,6 +39,7 @@
   --color-border-hover: #303038;
   --color-border-strong: #303038;
   --color-border-strong-hover: #3e3e48;
+  --color-border-hatch: #232329;
   --color-border-control: #797983;
   --color-focus: #7e5bff;
   --color-feedback-success: #3ecf8f;
@@ -146,6 +147,7 @@
     --color-border-hover: #d3d3ce;
     --color-border-strong: #d3d3ce;
     --color-border-strong-hover: #c2c2bc;
+    --color-border-hatch: #e2e2df;
     --color-border-control: #7b7a81;
     --color-focus: #6b45f0;
     --color-feedback-success: #009b74;
@@ -253,6 +255,7 @@
   --color-border-hover: #d3d3ce;
   --color-border-strong: #d3d3ce;
   --color-border-strong-hover: #c2c2bc;
+  --color-border-hatch: #e2e2df;
   --color-border-control: #7b7a81;
   --color-focus: #6b45f0;
   --color-feedback-success: #009b74;

package/dist/css/themes.css

@@ -45,6 +45,7 @@
   --color-border-hover: #2d3448;
   --color-border-strong: #2d3448;
   --color-border-strong-hover: #424f74;
+  --color-border-hatch: #202534;
   --color-border-control: #7f879c;
   --color-focus: #8572fe;
   --color-feedback-success: #34c98b;
@@ -155,6 +156,7 @@
     --color-border-hover: #c9cfdc;
     --color-border-strong: #c9cfdc;
     --color-border-strong-hover: #acb6cc;
+    --color-border-hatch: #dbdfe8;
     --color-border-control: #777a83;
     --color-focus: #735af2;
     --color-feedback-success: #0b9a74;
@@ -263,6 +265,7 @@
   --color-border-hover: #c9cfdc;
   --color-border-strong: #c9cfdc;
   --color-border-strong-hover: #acb6cc;
+  --color-border-hatch: #dbdfe8;
   --color-border-control: #777a83;
   --color-focus: #735af2;
   --color-feedback-success: #0b9a74;

package/dist/css/tokens.css

@@ -52,6 +52,7 @@
   --color-border-hover: rgba(255, 255, 255, 0.15);
   --color-border-strong: #4a4d52; /** The heavier resting border, at the plain border's hover weight. It used to hold the same value as --color-border-default in both palettes, so the pair was a copy of the plain pair rather than a third step. */
   --color-border-strong-hover: #5a5e65; /** One step past strong, so the strong pair is a real pair. */
+  --color-border-hatch: #2c2e31; /** The arranging hatch's line: strong at 60% over the sheet. A board under construction draws its diagonals in it, and so does a note standing on that board, which is why it is a colour of its own and not the strong border faded on a layer. */
   --color-border-control: #7f848e; /** The boundary of an input, a checkbox or a switch. It clears 3:1 on every surface a control can sit on, the overlay composites included: a checkbox inside a hovered row in a dialog body is the case the opaque surfaces alone do not catch. */
   --color-focus: #7e5bff; /** The focus indicator, drawn as an OUTLINE at 2px and offset 2px. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone disappears for exactly the readers who need one. It is the ACCENT, lightened dE 1.06 along lightness, which clears this root at 3.01:1: #7c56ff itself measured 2.89:1 on a pressed row inside a raised surface, under the 3:1 a ring has to clear, and the accent cannot make that move for it, because any lighter takes the white label of a primary button under the text floor. */
   --color-feedback-success: #3ecf8f; /** DONE: work that finished. The four states are what a piece of work is doing, and their meanings never move: info is working, warning needs a person, danger is stopped, success is done. The names stay generic because a badge, a callout and a toast mean the same four things. The values here are this root's own; each theme draws its four in tokens/themes, whose comments say what moved each from the approved palette. */

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export declare const color: {
         readonly hover: "rgba(255, 255, 255, 0.15)";
         readonly strong: "#4a4d52";
         readonly strongHover: "#5a5e65";
+        readonly hatch: "#2c2e31";
         readonly control: "#7f848e";
     };
     readonly focus: "#7e5bff";

package/dist/index.js

@@ -60,6 +60,7 @@ export const color = {
         "hover": "rgba(255, 255, 255, 0.15)",
         "strong": "#4a4d52",
         "strongHover": "#5a5e65",
+        "hatch": "#2c2e31",
         "control": "#7f848e"
     },
     "focus": "#7e5bff",

package/dist/themes.d.ts

@@ -48,6 +48,7 @@ export declare const themes: {
                 readonly hover: "#c9cfdc";
                 readonly strong: "#c9cfdc";
                 readonly strongHover: "#acb6cc";
+                readonly hatch: "#dbdfe8";
                 readonly control: "#777a83";
             };
             readonly focus: "#735af2";
@@ -171,6 +172,7 @@ export declare const themes: {
                 readonly hover: "#2d3448";
                 readonly strong: "#2d3448";
                 readonly strongHover: "#424f74";
+                readonly hatch: "#202534";
                 readonly control: "#7f879c";
             };
             readonly focus: "#8572fe";

package/dist/themes.js

@@ -49,6 +49,7 @@ export const themes = {
                 "hover": "#c9cfdc",
                 "strong": "#c9cfdc",
                 "strongHover": "#acb6cc",
+                "hatch": "#dbdfe8",
                 "control": "#777a83"
             },
             "focus": "#735af2",
@@ -172,6 +173,7 @@ export const themes = {
                 "hover": "#2d3448",
                 "strong": "#2d3448",
                 "strongHover": "#424f74",
+                "hatch": "#202534",
                 "control": "#7f879c"
             },
             "focus": "#8572fe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/tokens",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
   "license": "MIT AND OFL-1.1",
   "repository": {