keystone-design-bootstrap 1.0.84 → 1.0.85

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 (11) hide show
  1. package/dist/design_system/logo/keystone-logo.js +102 -31
  2. package/dist/design_system/logo/keystone-logo.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/design_system/logo/assets/keystone-logo.svg +17 -0
  5. package/src/design_system/logo/assets/keystone-wordmark.svg +22 -0
  6. package/src/design_system/logo/keystone-brand-lockup.tsx +25 -0
  7. package/src/design_system/logo/keystone-logo-minimal.tsx +26 -87
  8. package/src/design_system/logo/keystone-logo.tsx +3 -9
  9. package/src/design_system/logo/keystone-wordmark.tsx +49 -0
  10. package/src/design_system/portal/LoginModalController.tsx +12 -6
  11. package/src/design_system/portal/PortalPage.tsx +16 -5
package/dist/design_system/logo/keystone-logo.js CHANGED
@@ -31,42 +31,113 @@ var twMerge = extendTailwindMerge({
31
31
  var cx = twMerge;
32
32
 
33
33
  // src/design_system/logo/keystone-logo-minimal.tsx
34
- import { useId } from "react";
35
34
  var KeystoneLogoMinimal = (props) => {
36
- const id = useId();
37
- return /* @__PURE__ */ React.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 38 38", fill: "none" }, props), { className: cx("size-8 origin-center scale-[1.2]", props.className) }), /* @__PURE__ */ React.createElement("g", { filter: `url(#filter0-${id})` }, /* @__PURE__ */ React.createElement("g", { clipPath: `url(#clip0-${id})` }, /* @__PURE__ */ React.createElement(
38
- "path",
39
- {
40
- d: "M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z",
41
- fill: "white"
42
- }
43
- ), /* @__PURE__ */ React.createElement(
44
- "path",
45
- {
46
- d: "M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z",
47
- fill: `url(#paint0_linear-${id})`,
48
- fillOpacity: "0.2"
49
- }
50
- ), /* @__PURE__ */ React.createElement("circle", { cx: "19", cy: "19", r: "8", fill: `url(#paint1_linear-${id})` })), /* @__PURE__ */ React.createElement(
51
- "path",
52
- {
53
- d: "M3.1 14.8C3.1 12.5581 3.10008 10.8828 3.20866 9.55376C3.31715 8.22593 3.53345 7.25268 3.96105 6.41348C4.71845 4.92699 5.92699 3.71845 7.41348 2.96105C8.25268 2.53345 9.22593 2.31715 10.5538 2.20866C11.8828 2.10008 13.5581 2.1 15.8 2.1H22.2C24.4419 2.1 26.1172 2.10008 27.4462 2.20866C28.7741 2.31715 29.7473 2.53345 30.5865 2.96105C32.073 3.71845 33.2816 4.92699 34.039 6.41348C34.4665 7.25268 34.6828 8.22593 34.7913 9.55376C34.8999 10.8828 34.9 12.5581 34.9 14.8V21.2C34.9 23.4419 34.8999 25.1172 34.7913 26.4462C34.6828 27.7741 34.4665 28.7473 34.039 29.5865C33.2816 31.073 32.073 32.2816 30.5865 33.039C29.7473 33.4665 28.7741 33.6828 27.4462 33.7913C26.1172 33.8999 24.4419 33.9 22.2 33.9H15.8C13.5581 33.9 11.8828 33.8999 10.5538 33.7913C9.22593 33.6828 8.25268 33.4665 7.41348 33.039C5.92699 32.2816 4.71845 31.073 3.96105 29.5865C3.53345 28.7473 3.31715 27.7741 3.20866 26.4462C3.10008 25.1172 3.1 23.4419 3.1 21.2V14.8Z",
54
- stroke: "#0A0D12",
55
- strokeOpacity: "0.12",
56
- strokeWidth: "0.2"
57
- }
58
- )), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: `filter0-${id}`, x: "0", y: "0", width: "38", height: "38", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "effect2_dropShadow", result: "effect2_dropShadow" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feMorphology", { radius: "0.5", operator: "erode", in: "SourceAlpha", result: "effect3_dropShadow" }), /* @__PURE__ */ React.createElement("feOffset", { dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "0.5" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "out" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.13 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "effect2_dropShadow", result: "effect3_dropShadow" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect3_dropShadow", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dy: "-0.5" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "0.25" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect4_innerShadow" })), /* @__PURE__ */ React.createElement("filter", { id: `filter1_dd-${id}`, x: "8", y: "8", width: "22", height: "22", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dy: "1" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "1.5" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow", result: "effect2_dropShadow" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow", result: "shape" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `paint0_linear-${id}`, x1: "19", y1: "2", x2: "19", y2: "34", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "white" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#0A0D12" })), /* @__PURE__ */ React.createElement("linearGradient", { id: `paint1_linear-${id}`, x1: "15", y1: "26", x2: "23", y2: "10", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "#66D674" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#42D674" })), /* @__PURE__ */ React.createElement("clipPath", { id: `clip0-${id}` }, /* @__PURE__ */ React.createElement(
59
- "path",
60
- {
61
- d: "M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z",
62
- fill: "white"
63
- }
64
- ))));
35
+ return /* @__PURE__ */ React.createElement(
36
+ "svg",
37
+ __spreadProps(__spreadValues({
38
+ viewBox: "0 0 36 41",
39
+ fill: "none",
40
+ "aria-hidden": "true"
41
+ }, props), {
42
+ className: cx("text-[#6ECC8B]", props.className)
43
+ }),
44
+ /* @__PURE__ */ React.createElement(
45
+ "path",
46
+ {
47
+ d: "M36 13.6677L24.0031 20.4999L36 27.3321V40.9966L11.998 27.3288V13.671L36 0.0032959V13.6677Z",
48
+ fill: "currentColor"
49
+ }
50
+ ),
51
+ /* @__PURE__ */ React.createElement(
52
+ "path",
53
+ {
54
+ d: "M11.9971 27.3288V40.9958L0 34.1644V20.4973L11.9971 27.3288Z",
55
+ fill: "currentColor"
56
+ }
57
+ ),
58
+ /* @__PURE__ */ React.createElement(
59
+ "path",
60
+ {
61
+ d: "M11.9971 13.671L0.00476074 20.4999L0 20.4973V6.83551L11.9971 0.00402832V13.671Z",
62
+ fill: "currentColor"
63
+ }
64
+ )
65
+ );
66
+ };
67
+
68
+ // src/design_system/logo/keystone-wordmark.tsx
69
+ var KeystoneWordmark = (props) => {
70
+ return /* @__PURE__ */ React.createElement(
71
+ "svg",
72
+ __spreadProps(__spreadValues({
73
+ viewBox: "0 0 104 20",
74
+ fill: "none",
75
+ "aria-hidden": "true"
76
+ }, props), {
77
+ className: cx("text-[#6ECC8B]", props.className)
78
+ }),
79
+ /* @__PURE__ */ React.createElement(
80
+ "path",
81
+ {
82
+ d: "M3.14032 0L3.1612 8.23754H3.82871L9.47236 2.94575H13.0328V3.34299L6.45695 9.52024L13.2946 16.1684V16.5656H9.53903L3.8267 11.0811H3.15919V16.5584H0V0H3.14032Z",
83
+ fill: "currentColor"
84
+ }
85
+ ),
86
+ /* @__PURE__ */ React.createElement(
87
+ "path",
88
+ {
89
+ d: "M18.4299 2.62219C22.4643 2.62219 24.8242 5.10147 24.8242 9.20756V10.6049H14.6121C14.6635 12.8878 16.0848 14.486 18.4167 14.486C20.7485 14.486 21.6835 13.2718 21.8892 12.243H24.5535V12.6403C24.1957 14.422 22.5534 16.8876 18.4552 16.8876C14.357 16.8876 11.7031 14.4462 11.7031 9.7505C11.7031 5.05478 14.3675 2.62662 18.4295 2.62662L18.4299 2.62219ZM21.9647 8.28025C21.939 6.42119 20.7365 4.9932 18.3914 4.9932C16.0463 4.9932 14.8181 6.45903 14.6506 8.28025H21.9667H21.9647Z",
90
+ fill: "currentColor"
91
+ }
92
+ ),
93
+ /* @__PURE__ */ React.createElement(
94
+ "path",
95
+ {
96
+ d: "M27.5146 2.93809L31.2554 12.994H31.459L35.1865 2.93809H38.2369V3.33534L31.565 19.9996H28.5147V19.6024L29.7417 16.5942L24.3848 3.33292V2.93567H27.5142L27.5146 2.93809Z",
97
+ fill: "currentColor"
98
+ }
99
+ ),
100
+ /* @__PURE__ */ React.createElement(
101
+ "path",
102
+ {
103
+ d: "M44.1191 2.63538C47.759 2.63538 49.8832 4.19177 50.1017 6.73947V7.13671H47.3345C47.2445 5.53847 45.965 4.98667 44.1319 4.98667C42.2989 4.98667 41.3129 5.54088 41.3129 6.5982C41.3129 7.65551 42.1338 7.9956 43.3002 8.18115L45.8103 8.57839C48.4747 9.0022 50.2796 10.1214 50.2796 12.6027C50.2796 15.084 48.3591 16.8767 44.4898 16.8767C40.6205 16.8767 38.3782 15.082 38.1855 12.6667V12.2695H41.0045C41.133 13.8677 42.5692 14.5258 44.4898 14.5258C46.4104 14.5258 47.3859 13.8391 47.3859 12.7706C47.3859 11.702 46.5521 11.2782 45.1332 11.0552L42.623 10.658C40.1129 10.2607 38.4324 9.12818 38.4324 6.66219C38.4324 4.1962 40.4944 2.6378 44.1215 2.6378H44.1195L44.1191 2.63538Z",
104
+ fill: "currentColor"
105
+ }
106
+ ),
107
+ /* @__PURE__ */ React.createElement(
108
+ "path",
109
+ {
110
+ d: "M54.2257 2.93729V0H57.2632V2.93729H62.247V5.35257H57.2632V13.7724L57.4668 13.9821H62.1679V16.5673H57.8765C55.5828 16.5673 54.2237 15.353 54.2237 13.0327V5.35217H50.2773V2.93689L54.2257 2.93729Z",
111
+ fill: "currentColor"
112
+ }
113
+ ),
114
+ /* @__PURE__ */ React.createElement(
115
+ "path",
116
+ {
117
+ d: "M69.219 2.62219C73.3325 2.62219 76.2025 5.13004 76.2025 9.74608C76.2025 14.3621 73.3325 16.8832 69.219 16.8832C65.1056 16.8832 62.25 14.3754 62.25 9.74608C62.25 5.11676 65.1052 2.62219 69.219 2.62219ZM69.219 14.4442C71.6003 14.4442 73.1265 12.7687 73.1265 9.74648C73.1265 6.72426 71.6023 5.06202 69.219 5.06202C66.8358 5.06202 65.3241 6.73754 65.3241 9.74648C65.3241 12.7554 66.8482 14.4442 69.219 14.4442Z",
118
+ fill: "currentColor"
119
+ }
120
+ ),
121
+ /* @__PURE__ */ React.createElement(
122
+ "path",
123
+ {
124
+ d: "M80.2535 2.94007V4.45661H80.4568C81.3785 3.16304 82.8641 2.64868 84.6606 2.64868C87.7989 2.64868 89.7472 4.29763 89.7472 7.66236V16.5681H86.7097V7.93846C86.7097 6.03755 85.698 5.15451 83.8907 5.15451C81.9315 5.15451 80.3539 6.30238 80.3539 8.95392V16.566H77.3164V2.94007H80.2535Z",
125
+ fill: "currentColor"
126
+ }
127
+ ),
128
+ /* @__PURE__ */ React.createElement(
129
+ "path",
130
+ {
131
+ d: "M97.6065 2.62219C101.64 2.62219 104 5.10147 104 9.20756V10.6049H93.7886C93.838 12.8878 95.261 14.486 97.5933 14.486C99.9255 14.486 100.859 13.2718 101.065 12.243H103.729V12.6403C103.371 14.422 101.73 16.8876 97.6314 16.8876C93.5328 16.8876 90.8789 14.4462 90.8789 9.7505C90.8789 5.05478 93.5437 2.62662 97.6057 2.62662L97.6065 2.62219ZM101.141 8.28025C101.115 6.42119 99.9127 4.9932 97.568 4.9932C95.2233 4.9932 93.9943 6.45903 93.8272 8.28025H101.143H101.141Z",
132
+ fill: "currentColor"
133
+ }
134
+ )
135
+ );
65
136
  };
66
137
 
67
138
  // src/design_system/logo/keystone-logo.tsx
68
139
  var KeystoneLogo = (props) => {
69
- return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), { className: cx("flex h-8 w-max items-center justify-start overflow-visible", props.className) }), /* @__PURE__ */ React.createElement(KeystoneLogoMinimal, { className: "aspect-square h-full w-auto shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "aspect-[0.4] h-full" }), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("span", { className: "text-lg font-semibold text-fg-primary" }, "Keystone")));
140
+ return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), { className: cx("flex h-8 w-max items-stretch justify-start overflow-visible", props.className) }), /* @__PURE__ */ React.createElement(KeystoneLogoMinimal, { className: "aspect-square h-full w-auto shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "aspect-[0.4] h-full" }), /* @__PURE__ */ React.createElement(KeystoneWordmark, { className: "h-full w-auto shrink-0" }));
70
141
  };
71
142
  export {
72
143
  KeystoneLogo
package/dist/design_system/logo/keystone-logo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/utils/cx.ts","../../../src/design_system/logo/keystone-logo-minimal.tsx","../../../src/design_system/logo/keystone-logo.tsx"],"sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n },\n },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n return classes;\n}\n\n","\"use client\";\n\nimport type { SVGProps } from \"react\";\nimport { useId } from \"react\";\nimport { cx } from '../../utils/cx';\n\nexport const KeystoneLogoMinimal = (props: SVGProps<SVGSVGElement>) => {\n const id = useId();\n\n return (\n <svg viewBox=\"0 0 38 38\" fill=\"none\" {...props} className={cx(\"size-8 origin-center scale-[1.2]\", props.className)}>\n <g filter={`url(#filter0-${id})`}>\n <g clipPath={`url(#clip0-${id})`}>\n <path\n d=\"M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z\"\n fill=\"white\"\n />\n <path\n d=\"M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z\"\n fill={`url(#paint0_linear-${id})`}\n fillOpacity=\"0.2\"\n />\n {/* Clean pistachio circle */}\n <circle cx=\"19\" cy=\"19\" r=\"8\" fill={`url(#paint1_linear-${id})`} />\n </g>\n <path\n d=\"M3.1 14.8C3.1 12.5581 3.10008 10.8828 3.20866 9.55376C3.31715 8.22593 3.53345 7.25268 3.96105 6.41348C4.71845 4.92699 5.92699 3.71845 7.41348 2.96105C8.25268 2.53345 9.22593 2.31715 10.5538 2.20866C11.8828 2.10008 13.5581 2.1 15.8 2.1H22.2C24.4419 2.1 26.1172 2.10008 27.4462 2.20866C28.7741 2.31715 29.7473 2.53345 30.5865 2.96105C32.073 3.71845 33.2816 4.92699 34.039 6.41348C34.4665 7.25268 34.6828 8.22593 34.7913 9.55376C34.8999 10.8828 34.9 12.5581 34.9 14.8V21.2C34.9 23.4419 34.8999 25.1172 34.7913 26.4462C34.6828 27.7741 34.4665 28.7473 34.039 29.5865C33.2816 31.073 32.073 32.2816 30.5865 33.039C29.7473 33.4665 28.7741 33.6828 27.4462 33.7913C26.1172 33.8999 24.4419 33.9 22.2 33.9H15.8C13.5581 33.9 11.8828 33.8999 10.5538 33.7913C9.22593 33.6828 8.25268 33.4665 7.41348 33.039C5.92699 32.2816 4.71845 31.073 3.96105 29.5865C3.53345 28.7473 3.31715 27.7741 3.20866 26.4462C3.10008 25.1172 3.1 23.4419 3.1 21.2V14.8Z\"\n stroke=\"#0A0D12\"\n strokeOpacity=\"0.12\"\n strokeWidth=\"0.2\"\n />\n </g>\n\n <defs>\n <filter id={`filter0-${id}`} x=\"0\" y=\"0\" width=\"38\" height=\"38\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n <feOffset dy=\"1\" />\n <feGaussianBlur stdDeviation=\"1\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\" />\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n <feOffset dy=\"1\" />\n <feGaussianBlur stdDeviation=\"1.5\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow\" result=\"effect2_dropShadow\" />\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n <feMorphology radius=\"0.5\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect3_dropShadow\" />\n <feOffset dy=\"1\" />\n <feGaussianBlur stdDeviation=\"0.5\" />\n <feComposite in2=\"hardAlpha\" operator=\"out\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.13 0\" />\n <feBlend mode=\"normal\" in2=\"effect2_dropShadow\" result=\"effect3_dropShadow\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect3_dropShadow\" result=\"shape\" />\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n <feOffset dy=\"-0.5\" />\n <feGaussianBlur stdDeviation=\"0.25\" />\n <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"shape\" result=\"effect4_innerShadow\" />\n </filter>\n <filter id={`filter1_dd-${id}`} x=\"8\" y=\"8\" width=\"22\" height=\"22\" filterUnits=\"userSpaceOnUse\" colorInterpolationFilters=\"sRGB\">\n <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n <feOffset dy=\"1\" />\n <feGaussianBlur stdDeviation=\"1\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0\" />\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\" />\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\n <feOffset dy=\"1\" />\n <feGaussianBlur stdDeviation=\"1.5\" />\n <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0\" />\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow\" result=\"effect2_dropShadow\" />\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow\" result=\"shape\" />\n </filter>\n <linearGradient id={`paint0_linear-${id}`} x1=\"19\" y1=\"2\" x2=\"19\" y2=\"34\" gradientUnits=\"userSpaceOnUse\">\n <stop stopColor=\"white\" />\n <stop offset=\"1\" stopColor=\"#0A0D12\" />\n </linearGradient>\n <linearGradient id={`paint1_linear-${id}`} x1=\"15\" y1=\"26\" x2=\"23\" y2=\"10\" gradientUnits=\"userSpaceOnUse\">\n <stop stopColor=\"#66D674\" />\n <stop offset=\"1\" stopColor=\"#42D674\" />\n </linearGradient>\n <clipPath id={`clip0-${id}`}>\n <path\n d=\"M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z\"\n fill=\"white\"\n />\n </clipPath>\n </defs>\n </svg>\n );\n};\n","\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from '../../utils/cx';\nimport { KeystoneLogoMinimal } from \"./keystone-logo-minimal\";\n\nexport const KeystoneLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {\n return (\n <div {...props} className={cx(\"flex h-8 w-max items-center justify-start overflow-visible\", props.className)}>\n {/* Minimal logo */}\n <KeystoneLogoMinimal className=\"aspect-square h-full w-auto shrink-0\" />\n\n {/* Gap that adjusts to the height of the container */}\n <div className=\"aspect-[0.4] h-full\" />\n\n {/* Clean text logo */}\n <div className=\"flex items-center\">\n <span className=\"text-lg font-semibold text-fg-primary\">Keystone</span>\n </div>\n </div>\n );\n};\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/utils/cx.ts","../../../src/design_system/logo/keystone-logo-minimal.tsx","../../../src/design_system/logo/keystone-wordmark.tsx","../../../src/design_system/logo/keystone-logo.tsx"],"sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: {\n text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n },\n },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n return classes;\n}\n\n","\"use client\";\n\nimport type { SVGProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport const KEYSTONE_BRAND_COLOR = \"#6ECC8B\";\nexport const KEYSTONE_APP_URL = \"https://www.keystone.app\";\n\nexport const KeystoneLogoMinimal = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg\n viewBox=\"0 0 36 41\"\n fill=\"none\"\n aria-hidden=\"true\"\n {...props}\n className={cx(\"text-[#6ECC8B]\", props.className)}\n >\n <path\n d=\"M36 13.6677L24.0031 20.4999L36 27.3321V40.9966L11.998 27.3288V13.671L36 0.0032959V13.6677Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M11.9971 27.3288V40.9958L0 34.1644V20.4973L11.9971 27.3288Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M11.9971 13.671L0.00476074 20.4999L0 20.4973V6.83551L11.9971 0.00402832V13.671Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n","\"use client\";\n\nimport type { SVGProps } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport const KeystoneWordmark = (props: SVGProps<SVGSVGElement>) => {\n return (\n <svg\n viewBox=\"0 0 104 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n {...props}\n className={cx(\"text-[#6ECC8B]\", props.className)}\n >\n <path\n d=\"M3.14032 0L3.1612 8.23754H3.82871L9.47236 2.94575H13.0328V3.34299L6.45695 9.52024L13.2946 16.1684V16.5656H9.53903L3.8267 11.0811H3.15919V16.5584H0V0H3.14032Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M18.4299 2.62219C22.4643 2.62219 24.8242 5.10147 24.8242 9.20756V10.6049H14.6121C14.6635 12.8878 16.0848 14.486 18.4167 14.486C20.7485 14.486 21.6835 13.2718 21.8892 12.243H24.5535V12.6403C24.1957 14.422 22.5534 16.8876 18.4552 16.8876C14.357 16.8876 11.7031 14.4462 11.7031 9.7505C11.7031 5.05478 14.3675 2.62662 18.4295 2.62662L18.4299 2.62219ZM21.9647 8.28025C21.939 6.42119 20.7365 4.9932 18.3914 4.9932C16.0463 4.9932 14.8181 6.45903 14.6506 8.28025H21.9667H21.9647Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M27.5146 2.93809L31.2554 12.994H31.459L35.1865 2.93809H38.2369V3.33534L31.565 19.9996H28.5147V19.6024L29.7417 16.5942L24.3848 3.33292V2.93567H27.5142L27.5146 2.93809Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M44.1191 2.63538C47.759 2.63538 49.8832 4.19177 50.1017 6.73947V7.13671H47.3345C47.2445 5.53847 45.965 4.98667 44.1319 4.98667C42.2989 4.98667 41.3129 5.54088 41.3129 6.5982C41.3129 7.65551 42.1338 7.9956 43.3002 8.18115L45.8103 8.57839C48.4747 9.0022 50.2796 10.1214 50.2796 12.6027C50.2796 15.084 48.3591 16.8767 44.4898 16.8767C40.6205 16.8767 38.3782 15.082 38.1855 12.6667V12.2695H41.0045C41.133 13.8677 42.5692 14.5258 44.4898 14.5258C46.4104 14.5258 47.3859 13.8391 47.3859 12.7706C47.3859 11.702 46.5521 11.2782 45.1332 11.0552L42.623 10.658C40.1129 10.2607 38.4324 9.12818 38.4324 6.66219C38.4324 4.1962 40.4944 2.6378 44.1215 2.6378H44.1195L44.1191 2.63538Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M54.2257 2.93729V0H57.2632V2.93729H62.247V5.35257H57.2632V13.7724L57.4668 13.9821H62.1679V16.5673H57.8765C55.5828 16.5673 54.2237 15.353 54.2237 13.0327V5.35217H50.2773V2.93689L54.2257 2.93729Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M69.219 2.62219C73.3325 2.62219 76.2025 5.13004 76.2025 9.74608C76.2025 14.3621 73.3325 16.8832 69.219 16.8832C65.1056 16.8832 62.25 14.3754 62.25 9.74608C62.25 5.11676 65.1052 2.62219 69.219 2.62219ZM69.219 14.4442C71.6003 14.4442 73.1265 12.7687 73.1265 9.74648C73.1265 6.72426 71.6023 5.06202 69.219 5.06202C66.8358 5.06202 65.3241 6.73754 65.3241 9.74648C65.3241 12.7554 66.8482 14.4442 69.219 14.4442Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M80.2535 2.94007V4.45661H80.4568C81.3785 3.16304 82.8641 2.64868 84.6606 2.64868C87.7989 2.64868 89.7472 4.29763 89.7472 7.66236V16.5681H86.7097V7.93846C86.7097 6.03755 85.698 5.15451 83.8907 5.15451C81.9315 5.15451 80.3539 6.30238 80.3539 8.95392V16.566H77.3164V2.94007H80.2535Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M97.6065 2.62219C101.64 2.62219 104 5.10147 104 9.20756V10.6049H93.7886C93.838 12.8878 95.261 14.486 97.5933 14.486C99.9255 14.486 100.859 13.2718 101.065 12.243H103.729V12.6403C103.371 14.422 101.73 16.8876 97.6314 16.8876C93.5328 16.8876 90.8789 14.4462 90.8789 9.7505C90.8789 5.05478 93.5437 2.62662 97.6057 2.62662L97.6065 2.62219ZM101.141 8.28025C101.115 6.42119 99.9127 4.9932 97.568 4.9932C95.2233 4.9932 93.9943 6.45903 93.8272 8.28025H101.143H101.141Z\"\n fill=\"currentColor\"\n />\n </svg>\n );\n};\n","\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\nimport { cx } from '../../utils/cx';\nimport { KeystoneLogoMinimal } from \"./keystone-logo-minimal\";\nimport { KeystoneWordmark } from \"./keystone-wordmark\";\n\nexport const KeystoneLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {\n return (\n <div {...props} className={cx(\"flex h-8 w-max items-stretch justify-start overflow-visible\", props.className)}>\n <KeystoneLogoMinimal className=\"aspect-square h-full w-auto shrink-0\" />\n <div className=\"aspect-[0.4] h-full\" />\n <KeystoneWordmark className=\"h-full w-auto shrink-0\" />\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EAChC,QAAQ;AAAA,IACJ,OAAO;AAAA,MACH,MAAM,CAAC,cAAc,cAAc,cAAc,cAAc,cAAc,aAAa;AAAA,IAC9F;AAAA,EACJ;AACJ,CAAC;AAMM,IAAM,KAAK;;;ACNX,IAAM,sBAAsB,CAAC,UAAmC;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,OACR,QAJL;AAAA,MAKC,WAAW,GAAG,kBAAkB,MAAM,SAAS;AAAA;AAAA,IAE/C;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,EACF;AAEJ;;;AC1BO,IAAM,mBAAmB,CAAC,UAAmC;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,OACR,QAJL;AAAA,MAKC,WAAW,GAAG,kBAAkB,MAAM,SAAS;AAAA;AAAA,IAE/C;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,EACF;AAEJ;;;ACzCO,IAAM,eAAe,CAAC,UAA4C;AACrE,SACI,oCAAC,wCAAQ,QAAR,EAAe,WAAW,GAAG,+DAA+D,MAAM,SAAS,MACxG,oCAAC,uBAAoB,WAAU,wCAAuC,GACtE,oCAAC,SAAI,WAAU,uBAAsB,GACrC,oCAAC,oBAAiB,WAAU,0BAAyB,CACzD;AAER;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "keystone-design-bootstrap",
3
- "version": "1.0.84",
3
+ "version": "1.0.85",
4
4
  "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/design_system/logo/assets/keystone-logo.svg ADDED
@@ -0,0 +1,17 @@
1
+ <svg width="36" height="41" viewBox="0 0 36 41" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1455_1264)">
3
+ <mask id="mask0_1455_1264" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="41">
4
+ <path d="M36 0H0V41H36V0Z" fill="white"/>
5
+ </mask>
6
+ <g mask="url(#mask0_1455_1264)">
7
+ <path d="M36.0009 13.6677L24.0031 20.4999L36.0009 27.3321V40.9966L11.998 27.3288V13.671L36.0009 0.0032959V13.6677Z" fill="black"/>
8
+ <path d="M11.9971 27.3288V40.9958L0 34.1644V20.4973L11.9971 27.3288Z" fill="black"/>
9
+ <path d="M11.9971 13.671L0.00476074 20.4999L0 20.4973V6.83551L11.9971 0.00402832V13.671Z" fill="black"/>
10
+ </g>
11
+ </g>
12
+ <defs>
13
+ <clipPath id="clip0_1455_1264">
14
+ <rect width="36" height="41" fill="white"/>
15
+ </clipPath>
16
+ </defs>
17
+ </svg>
package/src/design_system/logo/assets/keystone-wordmark.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg width="104" height="20" viewBox="0 0 104 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_1455_1272)">
3
+ <mask id="mask0_1455_1272" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="104" height="20">
4
+ <path d="M104 0H0V20H104V0Z" fill="white"/>
5
+ </mask>
6
+ <g mask="url(#mask0_1455_1272)">
7
+ <path d="M3.14032 0L3.1612 8.23754H3.82871L9.47236 2.94575H13.0328V3.34299L6.45695 9.52024L13.2946 16.1684V16.5656H9.53903L3.8267 11.0811H3.15919V16.5584H0V0H3.14032Z" fill="black"/>
8
+ <path d="M18.4299 2.62219C22.4643 2.62219 24.8242 5.10147 24.8242 9.20756V10.6049H14.6121C14.6635 12.8878 16.0848 14.486 18.4167 14.486C20.7485 14.486 21.6835 13.2718 21.8892 12.243H24.5535V12.6403C24.1957 14.422 22.5534 16.8876 18.4552 16.8876C14.357 16.8876 11.7031 14.4462 11.7031 9.7505C11.7031 5.05478 14.3675 2.62662 18.4295 2.62662L18.4299 2.62219ZM21.9647 8.28025C21.939 6.42119 20.7365 4.9932 18.3914 4.9932C16.0463 4.9932 14.8181 6.45903 14.6506 8.28025H21.9667H21.9647Z" fill="black"/>
9
+ <path d="M27.5146 2.93809L31.2554 12.994H31.459L35.1865 2.93809H38.2369V3.33534L31.565 19.9996H28.5147V19.6024L29.7417 16.5942L24.3848 3.33292V2.93567H27.5142L27.5146 2.93809Z" fill="black"/>
10
+ <path d="M44.1191 2.63538C47.759 2.63538 49.8832 4.19177 50.1017 6.73947V7.13671H47.3345C47.2445 5.53847 45.965 4.98667 44.1319 4.98667C42.2989 4.98667 41.3129 5.54088 41.3129 6.5982C41.3129 7.65551 42.1338 7.9956 43.3002 8.18115L45.8103 8.57839C48.4747 9.0022 50.2796 10.1214 50.2796 12.6027C50.2796 15.084 48.3591 16.8767 44.4898 16.8767C40.6205 16.8767 38.3782 15.082 38.1855 12.6667V12.2695H41.0045C41.133 13.8677 42.5692 14.5258 44.4898 14.5258C46.4104 14.5258 47.3859 13.8391 47.3859 12.7706C47.3859 11.702 46.5521 11.2782 45.1332 11.0552L42.623 10.658C40.1129 10.2607 38.4324 9.12818 38.4324 6.66219C38.4324 4.1962 40.4944 2.6378 44.1215 2.6378H44.1195L44.1191 2.63538Z" fill="black"/>
11
+ <path d="M54.2257 2.93729V0H57.2632V2.93729H62.247V5.35257H57.2632V13.7724L57.4668 13.9821H62.1679V16.5673H57.8765C55.5828 16.5673 54.2237 15.353 54.2237 13.0327V5.35217H50.2773V2.93689L54.2257 2.93729Z" fill="black"/>
12
+ <path d="M69.219 2.62219C73.3325 2.62219 76.2025 5.13004 76.2025 9.74608C76.2025 14.3621 73.3325 16.8832 69.219 16.8832C65.1056 16.8832 62.25 14.3754 62.25 9.74608C62.25 5.11676 65.1052 2.62219 69.219 2.62219ZM69.219 14.4442C71.6003 14.4442 73.1265 12.7687 73.1265 9.74648C73.1265 6.72426 71.6023 5.06202 69.219 5.06202C66.8358 5.06202 65.3241 6.73754 65.3241 9.74648C65.3241 12.7554 66.8482 14.4442 69.219 14.4442Z" fill="black"/>
13
+ <path d="M80.2535 2.94007V4.45661H80.4568C81.3785 3.16304 82.8641 2.64868 84.6606 2.64868C87.7989 2.64868 89.7472 4.29763 89.7472 7.66236V16.5681H86.7097V7.93846C86.7097 6.03755 85.698 5.15451 83.8907 5.15451C81.9315 5.15451 80.3539 6.30238 80.3539 8.95392V16.566H77.3164V2.94007H80.2535Z" fill="black"/>
14
+ <path d="M97.6065 2.62219C101.64 2.62219 104 5.10147 104 9.20756V10.6049H93.7886C93.838 12.8878 95.261 14.486 97.5933 14.486C99.9255 14.486 100.859 13.2718 101.065 12.243H103.729V12.6403C103.371 14.422 101.73 16.8876 97.6314 16.8876C93.5328 16.8876 90.8789 14.4462 90.8789 9.7505C90.8789 5.05478 93.5437 2.62662 97.6057 2.62662L97.6065 2.62219ZM101.141 8.28025C101.115 6.42119 99.9127 4.9932 97.568 4.9932C95.2233 4.9932 93.9943 6.45903 93.8272 8.28025H101.143H101.141Z" fill="black"/>
15
+ </g>
16
+ </g>
17
+ <defs>
18
+ <clipPath id="clip0_1455_1272">
19
+ <rect width="104" height="20" fill="white"/>
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/src/design_system/logo/keystone-brand-lockup.tsx ADDED
@@ -0,0 +1,25 @@
1
+ "use client";
2
+
3
+ import type { HTMLAttributes } from "react";
4
+ import { cx } from "../../utils/cx";
5
+ import { KeystoneLogoMinimal } from "./keystone-logo-minimal";
6
+ import { KeystoneWordmark } from "./keystone-wordmark";
7
+
8
+ type KeystoneBrandLockupProps = HTMLAttributes<HTMLDivElement> & {
9
+ iconClassName?: string;
10
+ wordmarkClassName?: string;
11
+ };
12
+
13
+ export function KeystoneBrandLockup({
14
+ className,
15
+ iconClassName,
16
+ wordmarkClassName,
17
+ ...props
18
+ }: KeystoneBrandLockupProps) {
19
+ return (
20
+ <div {...props} className={cx("flex flex-col items-start gap-2", className)}>
21
+ <KeystoneLogoMinimal className={cx("h-4 w-auto shrink-0", iconClassName)} />
22
+ <KeystoneWordmark className={cx("h-4 w-auto shrink-0", wordmarkClassName)} />
23
+ </div>
24
+ );
25
+ }
package/src/design_system/logo/keystone-logo-minimal.tsx CHANGED
@@ -1,93 +1,32 @@
1
1
  "use client";
2
2
 
3
3
  import type { SVGProps } from "react";
4
- import { useId } from "react";
5
- import { cx } from '../../utils/cx';
4
+ import { cx } from "../../utils/cx";
6
5
 
7
- export const KeystoneLogoMinimal = (props: SVGProps<SVGSVGElement>) => {
8
- const id = useId();
9
-
10
- return (
11
- <svg viewBox="0 0 38 38" fill="none" {...props} className={cx("size-8 origin-center scale-[1.2]", props.className)}>
12
- <g filter={`url(#filter0-${id})`}>
13
- <g clipPath={`url(#clip0-${id})`}>
14
- <path
15
- d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
16
- fill="white"
17
- />
18
- <path
19
- d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
20
- fill={`url(#paint0_linear-${id})`}
21
- fillOpacity="0.2"
22
- />
23
- {/* Clean pistachio circle */}
24
- <circle cx="19" cy="19" r="8" fill={`url(#paint1_linear-${id})`} />
25
- </g>
26
- <path
27
- d="M3.1 14.8C3.1 12.5581 3.10008 10.8828 3.20866 9.55376C3.31715 8.22593 3.53345 7.25268 3.96105 6.41348C4.71845 4.92699 5.92699 3.71845 7.41348 2.96105C8.25268 2.53345 9.22593 2.31715 10.5538 2.20866C11.8828 2.10008 13.5581 2.1 15.8 2.1H22.2C24.4419 2.1 26.1172 2.10008 27.4462 2.20866C28.7741 2.31715 29.7473 2.53345 30.5865 2.96105C32.073 3.71845 33.2816 4.92699 34.039 6.41348C34.4665 7.25268 34.6828 8.22593 34.7913 9.55376C34.8999 10.8828 34.9 12.5581 34.9 14.8V21.2C34.9 23.4419 34.8999 25.1172 34.7913 26.4462C34.6828 27.7741 34.4665 28.7473 34.039 29.5865C33.2816 31.073 32.073 32.2816 30.5865 33.039C29.7473 33.4665 28.7741 33.6828 27.4462 33.7913C26.1172 33.8999 24.4419 33.9 22.2 33.9H15.8C13.5581 33.9 11.8828 33.8999 10.5538 33.7913C9.22593 33.6828 8.25268 33.4665 7.41348 33.039C5.92699 32.2816 4.71845 31.073 3.96105 29.5865C3.53345 28.7473 3.31715 27.7741 3.20866 26.4462C3.10008 25.1172 3.1 23.4419 3.1 21.2V14.8Z"
28
- stroke="#0A0D12"
29
- strokeOpacity="0.12"
30
- strokeWidth="0.2"
31
- />
32
- </g>
6
+ export const KEYSTONE_BRAND_COLOR = "#6ECC8B";
7
+ export const KEYSTONE_APP_URL = "https://www.keystone.app";
33
8
 
34
- <defs>
35
- <filter id={`filter0-${id}`} x="0" y="0" width="38" height="38" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
36
- <feFlood floodOpacity="0" result="BackgroundImageFix" />
37
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
38
- <feOffset dy="1" />
39
- <feGaussianBlur stdDeviation="1" />
40
- <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" />
41
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
42
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
43
- <feOffset dy="1" />
44
- <feGaussianBlur stdDeviation="1.5" />
45
- <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
46
- <feBlend mode="normal" in2="effect2_dropShadow" result="effect2_dropShadow" />
47
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
48
- <feMorphology radius="0.5" operator="erode" in="SourceAlpha" result="effect3_dropShadow" />
49
- <feOffset dy="1" />
50
- <feGaussianBlur stdDeviation="0.5" />
51
- <feComposite in2="hardAlpha" operator="out" />
52
- <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.13 0" />
53
- <feBlend mode="normal" in2="effect2_dropShadow" result="effect3_dropShadow" />
54
- <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow" result="shape" />
55
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
56
- <feOffset dy="-0.5" />
57
- <feGaussianBlur stdDeviation="0.25" />
58
- <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
59
- <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
60
- <feBlend mode="normal" in2="shape" result="effect4_innerShadow" />
61
- </filter>
62
- <filter id={`filter1_dd-${id}`} x="8" y="8" width="22" height="22" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
63
- <feFlood floodOpacity="0" result="BackgroundImageFix" />
64
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
65
- <feOffset dy="1" />
66
- <feGaussianBlur stdDeviation="1" />
67
- <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" />
68
- <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
69
- <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
70
- <feOffset dy="1" />
71
- <feGaussianBlur stdDeviation="1.5" />
72
- <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
73
- <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
74
- <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
75
- </filter>
76
- <linearGradient id={`paint0_linear-${id}`} x1="19" y1="2" x2="19" y2="34" gradientUnits="userSpaceOnUse">
77
- <stop stopColor="white" />
78
- <stop offset="1" stopColor="#0A0D12" />
79
- </linearGradient>
80
- <linearGradient id={`paint1_linear-${id}`} x1="15" y1="26" x2="23" y2="10" gradientUnits="userSpaceOnUse">
81
- <stop stopColor="#66D674" />
82
- <stop offset="1" stopColor="#42D674" />
83
- </linearGradient>
84
- <clipPath id={`clip0-${id}`}>
85
- <path
86
- d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
87
- fill="white"
88
- />
89
- </clipPath>
90
- </defs>
91
- </svg>
92
- );
9
+ export const KeystoneLogoMinimal = (props: SVGProps<SVGSVGElement>) => {
10
+ return (
11
+ <svg
12
+ viewBox="0 0 36 41"
13
+ fill="none"
14
+ aria-hidden="true"
15
+ {...props}
16
+ className={cx("text-[#6ECC8B]", props.className)}
17
+ >
18
+ <path
19
+ d="M36 13.6677L24.0031 20.4999L36 27.3321V40.9966L11.998 27.3288V13.671L36 0.0032959V13.6677Z"
20
+ fill="currentColor"
21
+ />
22
+ <path
23
+ d="M11.9971 27.3288V40.9958L0 34.1644V20.4973L11.9971 27.3288Z"
24
+ fill="currentColor"
25
+ />
26
+ <path
27
+ d="M11.9971 13.671L0.00476074 20.4999L0 20.4973V6.83551L11.9971 0.00402832V13.671Z"
28
+ fill="currentColor"
29
+ />
30
+ </svg>
31
+ );
93
32
  };
package/src/design_system/logo/keystone-logo.tsx CHANGED
@@ -3,20 +3,14 @@
3
3
  import type { HTMLAttributes } from "react";
4
4
  import { cx } from '../../utils/cx';
5
5
  import { KeystoneLogoMinimal } from "./keystone-logo-minimal";
6
+ import { KeystoneWordmark } from "./keystone-wordmark";
6
7
 
7
8
  export const KeystoneLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {
8
9
  return (
9
- <div {...props} className={cx("flex h-8 w-max items-center justify-start overflow-visible", props.className)}>
10
- {/* Minimal logo */}
10
+ <div {...props} className={cx("flex h-8 w-max items-stretch justify-start overflow-visible", props.className)}>
11
11
  <KeystoneLogoMinimal className="aspect-square h-full w-auto shrink-0" />
12
-
13
- {/* Gap that adjusts to the height of the container */}
14
12
  <div className="aspect-[0.4] h-full" />
15
-
16
- {/* Clean text logo */}
17
- <div className="flex items-center">
18
- <span className="text-lg font-semibold text-fg-primary">Keystone</span>
19
- </div>
13
+ <KeystoneWordmark className="h-full w-auto shrink-0" />
20
14
  </div>
21
15
  );
22
16
  };
package/src/design_system/logo/keystone-wordmark.tsx ADDED
@@ -0,0 +1,49 @@
1
+ "use client";
2
+
3
+ import type { SVGProps } from "react";
4
+ import { cx } from "../../utils/cx";
5
+
6
+ export const KeystoneWordmark = (props: SVGProps<SVGSVGElement>) => {
7
+ return (
8
+ <svg
9
+ viewBox="0 0 104 20"
10
+ fill="none"
11
+ aria-hidden="true"
12
+ {...props}
13
+ className={cx("text-[#6ECC8B]", props.className)}
14
+ >
15
+ <path
16
+ d="M3.14032 0L3.1612 8.23754H3.82871L9.47236 2.94575H13.0328V3.34299L6.45695 9.52024L13.2946 16.1684V16.5656H9.53903L3.8267 11.0811H3.15919V16.5584H0V0H3.14032Z"
17
+ fill="currentColor"
18
+ />
19
+ <path
20
+ d="M18.4299 2.62219C22.4643 2.62219 24.8242 5.10147 24.8242 9.20756V10.6049H14.6121C14.6635 12.8878 16.0848 14.486 18.4167 14.486C20.7485 14.486 21.6835 13.2718 21.8892 12.243H24.5535V12.6403C24.1957 14.422 22.5534 16.8876 18.4552 16.8876C14.357 16.8876 11.7031 14.4462 11.7031 9.7505C11.7031 5.05478 14.3675 2.62662 18.4295 2.62662L18.4299 2.62219ZM21.9647 8.28025C21.939 6.42119 20.7365 4.9932 18.3914 4.9932C16.0463 4.9932 14.8181 6.45903 14.6506 8.28025H21.9667H21.9647Z"
21
+ fill="currentColor"
22
+ />
23
+ <path
24
+ d="M27.5146 2.93809L31.2554 12.994H31.459L35.1865 2.93809H38.2369V3.33534L31.565 19.9996H28.5147V19.6024L29.7417 16.5942L24.3848 3.33292V2.93567H27.5142L27.5146 2.93809Z"
25
+ fill="currentColor"
26
+ />
27
+ <path
28
+ d="M44.1191 2.63538C47.759 2.63538 49.8832 4.19177 50.1017 6.73947V7.13671H47.3345C47.2445 5.53847 45.965 4.98667 44.1319 4.98667C42.2989 4.98667 41.3129 5.54088 41.3129 6.5982C41.3129 7.65551 42.1338 7.9956 43.3002 8.18115L45.8103 8.57839C48.4747 9.0022 50.2796 10.1214 50.2796 12.6027C50.2796 15.084 48.3591 16.8767 44.4898 16.8767C40.6205 16.8767 38.3782 15.082 38.1855 12.6667V12.2695H41.0045C41.133 13.8677 42.5692 14.5258 44.4898 14.5258C46.4104 14.5258 47.3859 13.8391 47.3859 12.7706C47.3859 11.702 46.5521 11.2782 45.1332 11.0552L42.623 10.658C40.1129 10.2607 38.4324 9.12818 38.4324 6.66219C38.4324 4.1962 40.4944 2.6378 44.1215 2.6378H44.1195L44.1191 2.63538Z"
29
+ fill="currentColor"
30
+ />
31
+ <path
32
+ d="M54.2257 2.93729V0H57.2632V2.93729H62.247V5.35257H57.2632V13.7724L57.4668 13.9821H62.1679V16.5673H57.8765C55.5828 16.5673 54.2237 15.353 54.2237 13.0327V5.35217H50.2773V2.93689L54.2257 2.93729Z"
33
+ fill="currentColor"
34
+ />
35
+ <path
36
+ d="M69.219 2.62219C73.3325 2.62219 76.2025 5.13004 76.2025 9.74608C76.2025 14.3621 73.3325 16.8832 69.219 16.8832C65.1056 16.8832 62.25 14.3754 62.25 9.74608C62.25 5.11676 65.1052 2.62219 69.219 2.62219ZM69.219 14.4442C71.6003 14.4442 73.1265 12.7687 73.1265 9.74648C73.1265 6.72426 71.6023 5.06202 69.219 5.06202C66.8358 5.06202 65.3241 6.73754 65.3241 9.74648C65.3241 12.7554 66.8482 14.4442 69.219 14.4442Z"
37
+ fill="currentColor"
38
+ />
39
+ <path
40
+ d="M80.2535 2.94007V4.45661H80.4568C81.3785 3.16304 82.8641 2.64868 84.6606 2.64868C87.7989 2.64868 89.7472 4.29763 89.7472 7.66236V16.5681H86.7097V7.93846C86.7097 6.03755 85.698 5.15451 83.8907 5.15451C81.9315 5.15451 80.3539 6.30238 80.3539 8.95392V16.566H77.3164V2.94007H80.2535Z"
41
+ fill="currentColor"
42
+ />
43
+ <path
44
+ d="M97.6065 2.62219C101.64 2.62219 104 5.10147 104 9.20756V10.6049H93.7886C93.838 12.8878 95.261 14.486 97.5933 14.486C99.9255 14.486 100.859 13.2718 101.065 12.243H103.729V12.6403C103.371 14.422 101.73 16.8876 97.6314 16.8876C93.5328 16.8876 90.8789 14.4462 90.8789 9.7505C90.8789 5.05478 93.5437 2.62662 97.6057 2.62662L97.6065 2.62219ZM101.141 8.28025C101.115 6.42119 99.9127 4.9932 97.568 4.9932C95.2233 4.9932 93.9943 6.45903 93.8272 8.28025H101.143H101.141Z"
45
+ fill="currentColor"
46
+ />
47
+ </svg>
48
+ );
49
+ };
package/src/design_system/portal/LoginModalController.tsx CHANGED
@@ -4,15 +4,21 @@ import React, { useState, useEffect, useTransition } from 'react';
4
4
  import { useRouter } from 'next/navigation';
5
5
  import { Modal } from '../elements/modal/modal';
6
6
  import { LoginForm } from './LoginForm';
7
- import { KeystoneLogoMinimal } from '../logo/keystone-logo-minimal';
7
+ import { KEYSTONE_APP_URL, KeystoneLogoMinimal } from '../logo/keystone-logo-minimal';
8
8
 
9
9
  const keystoneFooter = (
10
10
  <div className="px-6 py-4 bg-secondary flex flex-col items-center gap-1">
11
- <div className="flex items-center gap-1.5">
12
- <KeystoneLogoMinimal className="size-5 shrink-0" />
13
- <span className="text-sm font-medium text-primary">Keystone</span>
14
- </div>
15
- <p className="text-xs text-quaternary">Powered by Keystone Universal Login</p>
11
+ <a href={KEYSTONE_APP_URL} target="_blank" rel="noopener noreferrer" aria-label="Visit Keystone website">
12
+ <KeystoneLogoMinimal className="h-5 w-auto shrink-0" />
13
+ </a>
14
+ <a
15
+ href={KEYSTONE_APP_URL}
16
+ target="_blank"
17
+ rel="noopener noreferrer"
18
+ className="text-xs text-quaternary hover:text-secondary transition-colors"
19
+ >
20
+ Powered by Keystone Universal Login
21
+ </a>
16
22
  </div>
17
23
  );
18
24
 
package/src/design_system/portal/PortalPage.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import Link from 'next/link';
3
3
  import { cookies } from 'next/headers';
4
- import { KeystoneLogoMinimal } from '../logo/keystone-logo-minimal';
4
+ import { KeystoneBrandLockup } from '../logo/keystone-brand-lockup';
5
+ import { KEYSTONE_APP_URL } from '../logo/keystone-logo-minimal';
5
6
  import { LogoutButton } from './LogoutButton';
6
7
  import { LoginModalController } from './LoginModalController';
7
8
  import { MessageComposer } from './MessageComposer';
@@ -287,7 +288,7 @@ function ServicesPanel({
287
288
  <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} tab="services" />
288
289
  <div className="divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden">
289
290
  {activeServices.map((service) => (
290
- <details key={service.id} className="group">
291
+ <details key={service.id} className="group" open>
291
292
  <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
292
293
  <div>
293
294
  <span className="font-medium text-primary">{service.name}</span>
@@ -715,9 +716,19 @@ export async function PortalPage({
715
716
  </button>
716
717
  )}
717
718
 
718
- <div className="flex items-center gap-1.5 border-l border-tertiary pl-3">
719
- <KeystoneLogoMinimal className="size-5" />
720
- <span className="hidden sm:block text-[10px] font-medium text-quaternary">Keystone</span>
719
+ <div className="border-l border-tertiary pl-3">
720
+ <a
721
+ href={KEYSTONE_APP_URL}
722
+ target="_blank"
723
+ rel="noopener noreferrer"
724
+ aria-label="Visit Keystone website"
725
+ >
726
+ <KeystoneBrandLockup
727
+ className="gap-2"
728
+ iconClassName="h-3.5"
729
+ wordmarkClassName="hidden sm:block h-2.5"
730
+ />
731
+ </a>
721
732
  </div>
722
733
  </div>
723
734
  </div>