@galaxy-io/dls 2.8.0 → 2.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/brand/GalaxyAlchemyWordmark.d.ts +31 -0
- package/dist/brand/GalaxyAlchemyWordmark.js +38 -0
- package/dist/brand/brandMark.js +3 -2
- package/dist/brand/internal/svg/GalaxyAlchemyWordmarkSvg.d.ts +13 -0
- package/dist/brand/internal/svg/GalaxyAlchemyWordmarkSvg.js +29 -0
- package/package.json +5 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type AriaAttributes, type CSSProperties } from "react";
|
|
2
|
+
export interface GalaxyAlchemyWordmarkProps extends AriaAttributes {
|
|
3
|
+
/**
|
|
4
|
+
* Height of the wordmark in px, descender included. The width follows the aspect ratio
|
|
5
|
+
* (≈ 2.77 × height).
|
|
6
|
+
* @default 20
|
|
7
|
+
*/
|
|
8
|
+
size?: number;
|
|
9
|
+
/**
|
|
10
|
+
* For a wordmark on an inverted fill (`text.primary`): paints `background.base`.
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
isInverse?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Accessible name. Pass `""` to make it decorative (`aria-hidden`) when the name is already in
|
|
16
|
+
* the surrounding text.
|
|
17
|
+
* @default Alchemy
|
|
18
|
+
*/
|
|
19
|
+
ariaLabel?: string;
|
|
20
|
+
/** DOM id on the `<svg>`. */
|
|
21
|
+
id?: string;
|
|
22
|
+
/** Any `data-*` attribute, forwarded to the `<svg>`. */
|
|
23
|
+
[dataAttribute: `data-${string}`]: string | number | boolean | undefined;
|
|
24
|
+
/** Extra class on the `<svg>`. */
|
|
25
|
+
className?: string;
|
|
26
|
+
/** Inline style on the `<svg>`. */
|
|
27
|
+
style?: CSSProperties;
|
|
28
|
+
}
|
|
29
|
+
/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
|
|
30
|
+
declare const GalaxyAlchemyWordmark: import("react").ForwardRefExoticComponent<GalaxyAlchemyWordmarkProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
31
|
+
export default GalaxyAlchemyWordmark;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { BRAND_MARK_INVERSE_CSS, BRAND_MARK_NEUTRAL_CSS, BRAND_MARK_SVG_CSS, brandMarkAriaProps } from "./brandMark.js";
|
|
2
|
+
import GalaxyAlchemyWordmarkSvg, { GALAXY_ALCHEMY_WORDMARK_VIEW_BOX } from "./internal/svg/GalaxyAlchemyWordmarkSvg.js";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cx } from "@linaria/core";
|
|
6
|
+
//#region src/brand/GalaxyAlchemyWordmark.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Alchemy's product wordmark: the word "alchemy" in a heavy connected script, as one inline SVG.
|
|
9
|
+
* It behaves exactly like `GalaxyWordmark`: it paints `text.primary`, reads only CSS variables,
|
|
10
|
+
* and is SSR-safe.
|
|
11
|
+
*
|
|
12
|
+
* The artwork is `src/brand/assets/galaxy-alchemy-wordmark.svg`, compiled by `pnpm assets` into
|
|
13
|
+
* the private `GalaxyAlchemyWordmarkSvg`; the aspect ratio comes from its
|
|
14
|
+
* `GALAXY_ALCHEMY_WORDMARK_VIEW_BOX`.
|
|
15
|
+
*/
|
|
16
|
+
/** Width ÷ height of the artwork, from its viewBox. */
|
|
17
|
+
var GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO = GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.width / GALAXY_ALCHEMY_WORDMARK_VIEW_BOX.height;
|
|
18
|
+
/** Alchemy's product wordmark, painted `text.primary`. Labelled "Alchemy" unless `ariaLabel=""`. */
|
|
19
|
+
var GalaxyAlchemyWordmark = forwardRef(function GalaxyAlchemyWordmark({ size = 20, isInverse = false, ariaLabel = "Alchemy", id, className, style, ...rest }, ref) {
|
|
20
|
+
const aria = brandMarkAriaProps(ariaLabel);
|
|
21
|
+
return /* @__PURE__ */ jsx(GalaxyAlchemyWordmarkSvg, {
|
|
22
|
+
ref,
|
|
23
|
+
id,
|
|
24
|
+
role: aria.role,
|
|
25
|
+
"aria-label": aria["aria-label"],
|
|
26
|
+
"aria-hidden": aria["aria-hidden"],
|
|
27
|
+
...rest,
|
|
28
|
+
width: size * GALAXY_ALCHEMY_WORDMARK_ASPECT_RATIO,
|
|
29
|
+
height: size,
|
|
30
|
+
fill: "currentColor",
|
|
31
|
+
focusable: "false",
|
|
32
|
+
className: cx(BRAND_MARK_SVG_CSS, isInverse ? BRAND_MARK_INVERSE_CSS : BRAND_MARK_NEUTRAL_CSS, className),
|
|
33
|
+
style
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
GalaxyAlchemyWordmark.displayName = "GalaxyAlchemyWordmark";
|
|
37
|
+
//#endregion
|
|
38
|
+
export { GalaxyAlchemyWordmark as default };
|
package/dist/brand/brandMark.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/* empty css */
|
|
2
2
|
//#region src/brand/brandMark.ts
|
|
3
3
|
/**
|
|
4
|
-
* @internal Shared by the
|
|
5
|
-
* `GalaxyFilamentWordmark`, `
|
|
4
|
+
* @internal Shared by the six brand components (`GalaxyLogomark`, `GalaxyWordmark`,
|
|
5
|
+
* `GalaxyFilamentWordmark`, `GalaxyAlchemyWordmark`, `GalaxyLogomarkAnimation`,
|
|
6
|
+
* `GalaxyLogomark3D`); not documented API.
|
|
6
7
|
*
|
|
7
8
|
* The marks are one inline SVG painted with `fill="currentColor"`, so their color is CSS: exactly
|
|
8
9
|
* one of the color classes below sets `color` on the mark. One class never overrides another, so
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-alchemy-wordmark.svg`.
|
|
3
|
+
* Do not edit: change the SVG and run `pnpm assets`. Every fill is `currentColor` and the
|
|
4
|
+
* root has no size; the public mark that renders this sets both.
|
|
5
|
+
*/
|
|
6
|
+
import { type SVGProps } from "react";
|
|
7
|
+
declare const GalaxyAlchemyWordmarkSvg: import("react").ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
8
|
+
export default GalaxyAlchemyWordmarkSvg;
|
|
9
|
+
/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
|
|
10
|
+
export declare const GALAXY_ALCHEMY_WORDMARK_VIEW_BOX: {
|
|
11
|
+
readonly width: 697;
|
|
12
|
+
readonly height: 252;
|
|
13
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/brand/internal/svg/GalaxyAlchemyWordmarkSvg.tsx
|
|
4
|
+
/**
|
|
5
|
+
* @internal Generated by `pnpm assets` from `src/brand/assets/galaxy-alchemy-wordmark.svg`.
|
|
6
|
+
* Do not edit: change the SVG and run `pnpm assets`. Every fill is `currentColor` and the
|
|
7
|
+
* root has no size; the public mark that renders this sets both.
|
|
8
|
+
*/
|
|
9
|
+
var GalaxyAlchemyWordmarkSvg = forwardRef(function GalaxyAlchemyWordmarkSvg(props, ref) {
|
|
10
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
11
|
+
viewBox: "0 0 697 252",
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
ref,
|
|
15
|
+
...props,
|
|
16
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
17
|
+
d: "M46.56 188.16C-1.52588e-05 184.08 16.8 64.5601 70.56 77.28C75.6 78.48 81.36 83.04 84.24 91.92C93.12 67.92 122.16 72.96 126.24 82.8C115.92 94.8 115.2 124.56 116.4 138C118.32 157.2 128.64 142.8 132.96 117.36C133.68 113.52 143.28 114.48 142.32 119.28C136.8 147.36 130.8 187.92 109.68 187.92C82.8 187.92 83.52 152.16 83.52 140.88C83.52 139.92 82.08 139.92 82.08 140.88C78.96 158.16 72.96 190.56 46.56 188.16ZM71.76 93.6C61.2 94.3199 52.32 140.16 58.56 145.44C66 151.44 79.2 92.88 71.76 93.6ZM198.219 37.2C170.859 38.64 167.259 107.28 169.419 138C170.859 157.2 179.259 142.8 183.099 117.36C183.579 113.52 194.139 114.48 193.179 119.28C188.139 147.36 186.699 186.72 162.219 187.92C135.099 189.36 129.819 150.48 130.539 111.12C131.019 78.48 134.619 45.84 139.419 33.84C151.179 3.35999 196.539 8.40002 198.219 37.2ZM213.855 186.96C190.335 183.84 177.135 156.24 179.055 129.36C180.975 103.2 197.775 77.76 224.655 75.6C254.175 73.4399 260.895 101.28 257.055 114.96C250.095 139.92 218.655 135.6 222.015 110.16C223.215 101.52 229.935 95.28 236.895 96.72C235.935 90.24 229.455 91.2 226.575 93.36C211.695 104.16 214.335 138.72 230.175 143.04C246.975 147.36 260.175 126.24 261.855 117.6C262.575 113.52 271.935 115.44 271.215 119.52C267.615 137.04 253.455 192.48 213.855 186.96ZM325.474 38.16C304.834 43.4401 297.154 71.76 294.514 104.16C294.274 104.64 294.994 104.88 295.234 104.16C303.154 83.04 315.634 74.88 329.074 76.5601C342.994 78.24 351.634 87.12 353.314 98.16C355.954 118.8 345.394 146.64 353.554 148.32C357.634 149.04 363.394 135.36 366.514 117.36C367.234 113.52 376.834 114.48 375.874 119.28C370.354 147.36 362.434 186.96 340.114 187.92C288.994 190.32 323.074 103.92 317.794 100.32C307.714 93.12 298.834 148.08 302.914 177.36C304.834 192.72 263.314 194.88 262.354 180C260.434 149.28 256.114 71.28 267.154 36.96C279.394 0 326.674 7.91998 325.474 38.16ZM401.691 188.16C374.811 187.2 360.891 155.52 362.811 127.68C364.731 101.04 380.811 75.6 406.971 75.36C424.491 75.12 440.091 88.5601 434.571 114.48C430.011 137.52 410.571 144.96 402.411 132.72C401.931 132 401.211 131.28 401.451 132.24C401.691 142.56 410.811 149.76 418.251 149.28C429.051 148.56 436.731 135.84 440.331 117.84C441.051 114.72 449.211 115.92 448.731 119.28C446.091 144.24 435.291 189.6 401.691 188.16ZM412.011 91.2C405.771 94.08 400.971 116.16 403.611 118.56C409.371 123.6 420.651 86.88 412.011 91.2ZM473.587 104.16C481.267 81.6 493.987 76.08 507.427 76.5601C519.667 76.8 527.587 84.72 530.707 93.6C544.148 67.6801 580.388 73.4399 583.747 98.16C586.388 118.8 575.828 146.64 584.227 148.32C588.068 149.04 593.828 135.36 596.948 117.36C597.667 113.52 607.268 114.48 606.307 119.28C600.787 147.36 593.107 186.96 570.547 187.92C519.427 190.32 553.508 103.92 548.227 100.32C538.147 93.12 528.787 140.64 534.547 175.92C536.707 190.56 494.227 196.32 492.547 177.36C488.707 130.32 502.387 104.4 497.107 101.52C486.547 95.04 475.027 141.36 480.547 176.64C483.188 192 444.067 195.6 440.707 180.96C437.347 164.64 435.667 119.52 441.427 84.96C442.147 70.8 477.908 72 475.987 89.28C475.027 94.8 473.347 97.92 472.867 104.16C472.867 104.64 473.587 104.88 473.587 104.16ZM694.247 82.8C667.847 100.8 696.887 160.08 686.567 208.32C681.287 232.56 659.447 251.76 633.287 247.68C613.367 244.56 597.527 224.64 603.527 200.88C611.207 213.12 629.927 215.76 640.487 201.36C650.327 187.92 655.847 160.32 651.767 137.28C651.527 136.56 650.327 136.8 650.087 137.52C647.927 155.28 640.967 190.56 614.327 188.16C578.807 185.04 588.407 122.4 604.967 80.64C609.767 68.4 642.887 74.88 635.927 91.4399C627.527 111.36 621.047 140.88 626.567 145.44C628.967 147.36 631.847 142.32 634.727 134.88C642.167 114.24 642.887 77.52 670.727 74.16C680.807 72.72 691.367 75.84 694.247 82.8Z",
|
|
18
|
+
fill: "currentColor"
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
GalaxyAlchemyWordmarkSvg.displayName = "GalaxyAlchemyWordmarkSvg";
|
|
23
|
+
/** @internal The artwork's viewBox; the public mark derives its width as `size × width / height`. */
|
|
24
|
+
var GALAXY_ALCHEMY_WORDMARK_VIEW_BOX = {
|
|
25
|
+
width: 697,
|
|
26
|
+
height: 252
|
|
27
|
+
};
|
|
28
|
+
//#endregion
|
|
29
|
+
export { GALAXY_ALCHEMY_WORDMARK_VIEW_BOX, GalaxyAlchemyWordmarkSvg as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@galaxy-io/dls",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.1",
|
|
4
4
|
"description": "Galaxy Design Language System",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
@@ -45,6 +45,10 @@
|
|
|
45
45
|
"types": "./dist/beacons/Beacon.d.ts",
|
|
46
46
|
"import": "./dist/beacons/Beacon.js"
|
|
47
47
|
},
|
|
48
|
+
"./brand/GalaxyAlchemyWordmark": {
|
|
49
|
+
"types": "./dist/brand/GalaxyAlchemyWordmark.d.ts",
|
|
50
|
+
"import": "./dist/brand/GalaxyAlchemyWordmark.js"
|
|
51
|
+
},
|
|
48
52
|
"./brand/GalaxyFilamentWordmark": {
|
|
49
53
|
"types": "./dist/brand/GalaxyFilamentWordmark.d.ts",
|
|
50
54
|
"import": "./dist/brand/GalaxyFilamentWordmark.js"
|