@muraldevkit/ui-toolkit 4.62.0 → 4.63.0-dev-VRgs.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.
Files changed (7) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/styles/MrlToolbar/module.scss +1 -1
  3. package/dist/styles.css +1 -1
  4. package/dist/utils/colors/colors.d.ts +35 -0
  5. package/dist/utils/colors/colors.test.d.ts +1 -0
  6. package/dist/utils/colors/index.d.ts +1 -0
  7. package/package.json +1 -2
package/dist/styles/MrlToolbar/module.scss CHANGED
@@ -29,7 +29,7 @@ $xsmall-size: 2rem;
29
29
  padding: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
30
30
  }
31
31
  .MrlToolbar-xsmall {
32
- gap: var(--mrl-spacing-01);
32
+ gap: var(--mrl-spacing-02);
33
33
  min-height: $xsmall-size;
34
34
  padding: var(--mrl-spacing-02);
35
35
  }
package/dist/styles.css CHANGED
@@ -526,7 +526,7 @@
526
526
  .MrlPanel--ctJ4U{background-color:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-raised);display:flex;flex-direction:column;height:auto;max-height:100%;overflow:hidden;padding:var(--mrl-spacing-06) 0 0 0;pointer-events:auto;position:relative;width:16.75rem;z-index:400}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag{margin-bottom:calc(var(--mrl-spacing-06) - var(--mrl-spacing-01));padding:0 var(--mrl-spacing-09) 0 var(--mrl-spacing-06)}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag.MrlPanel--header-content-description--CUyJq{margin-bottom:calc(var(--mrl-spacing-04) - var(--mrl-spacing-01))}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag .MrlPanel--title--tyjoU{height:auto}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag .MrlPanel--top-actions--vzrrd{align-items:center;display:flex;justify-content:center;position:absolute;right:calc(var(--mrl-spacing-10) - var(--mrl-spacing-02));top:var(--mrl-spacing-04)}.MrlPanel--ctJ4U .MrlPanel--header-content--VTdag .MrlPanel--top-actions-divider--xLz2L{align-self:auto}.MrlPanel--ctJ4U .MrlPanel--close--sRBzI{position:absolute;right:var(--mrl-spacing-04);top:var(--mrl-spacing-04)}.MrlPanel--scrollable--kRudV{outline:none;overflow:clip scroll;overflow-y:overlay;padding-left:var(--mrl-spacing-06);padding-right:var(--mrl-spacing-06);padding-top:var(--mrl-spacing-01)}.MrlPanel--scrollable--kRudV:focus-visible{outline:var(--mrl-spacing-01) var(--mrl-color-focus) solid}.MrlPanel--scrollable--kRudV.MrlPanel--scrollable-has-sticky-header--CIres{padding-top:0}.MrlPanel--scrollable--kRudV .MrlPanel--description--dCF7g{margin-bottom:var(--mrl-spacing-06);padding-right:var(--mrl-space-inset-container-large)}
527
527
  .MrlPanelFooter--iX4RS{background-color:var(--mrl-color-background);bottom:var(--mrl-spacing-03);color:rgba(var(--mrl-gray-60), 1);left:0;margin:0 var(--mrl-spacing-06);position:absolute;width:calc(100% - var(--mrl-spacing-06)*2)}.MrlPanelFooter--iX4RS .MrlPanelFooter--divider--DMvrl{margin:0 0 var(--mrl-spacing-02) 0}
528
528
  .MrlPanelStickyHeader--I1FiZ{background-color:var(--mrl-color-background);position:sticky;top:0}.MrlPanelStickyHeader--I1FiZ::after{background:var(--mrl-color-background);content:"";display:block;inset:0 calc(-1*var(--mrl-spacing-03));pointer-events:all;position:absolute;z-index:-1}
529
- .MrlToolbar--Lrhb6{align-items:center;background:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);cursor:default;display:flex;gap:var(--mrl-spacing-02);min-height:3rem;padding:var(--mrl-spacing-03);pointer-events:all;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m3)}.MrlToolbar-inverse--OwdSd{background:var(--mrl-color-background-inverse);box-shadow:none;color:var(--mrl-color-text-inverse)}.MrlToolbar-skeleton--eWZQv.MrlToolbar-vertical--hO8hj{background-color:rgba(var(--mrl-gray-30), 1)}.MrlToolbar-medium--FKg7Y{gap:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));min-height:3.5rem;padding:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01))}.MrlToolbar-xsmall--St9Ez{gap:var(--mrl-spacing-01);min-height:2rem;padding:var(--mrl-spacing-02)}.MrlToolbar-vertical--hO8hj{flex-direction:column;min-height:0;min-width:3rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-medium--FKg7Y{min-width:3.5rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-xsmall--St9Ez{min-width:2rem}.MrlToolbar-spaced--gmE0X{gap:var(--mrl-spacing-05);padding-left:var(--mrl-spacing-05)}.MrlToolbar-spaced--gmE0X .mrlButton--Oymf3+.mrlButton--Oymf3{margin-left:calc(var(--mrl-spacing-03)/2*-1)}
529
+ .MrlToolbar--Lrhb6{align-items:center;background:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);cursor:default;display:flex;gap:var(--mrl-spacing-02);min-height:3rem;padding:var(--mrl-spacing-03);pointer-events:all;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m3)}.MrlToolbar-inverse--OwdSd{background:var(--mrl-color-background-inverse);box-shadow:none;color:var(--mrl-color-text-inverse)}.MrlToolbar-skeleton--eWZQv.MrlToolbar-vertical--hO8hj{background-color:rgba(var(--mrl-gray-30), 1)}.MrlToolbar-medium--FKg7Y{gap:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));min-height:3.5rem;padding:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01))}.MrlToolbar-xsmall--St9Ez{gap:var(--mrl-spacing-02);min-height:2rem;padding:var(--mrl-spacing-02)}.MrlToolbar-vertical--hO8hj{flex-direction:column;min-height:0;min-width:3rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-medium--FKg7Y{min-width:3.5rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-xsmall--St9Ez{min-width:2rem}.MrlToolbar-spaced--gmE0X{gap:var(--mrl-spacing-05);padding-left:var(--mrl-spacing-05)}.MrlToolbar-spaced--gmE0X .mrlButton--Oymf3+.mrlButton--Oymf3{margin-left:calc(var(--mrl-spacing-03)/2*-1)}
530
530
  .MrlToolbarButtonIcon--Oetsi{margin-right:var(--mrl-spacing-03)}
531
531
  .mrl-u-focus-wrapper--f4yRC{position:relative}.MrlFilterItem--qYLqp{position:relative;align-items:center;background-color:var(--mrl-color-background-decorative);border-radius:var(--mrl-border-radius-rounded);color:rgba(var(--mrl-gray-100), 1);display:flex;font-family:var(--mrl-body-font);font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-04);gap:var(--mrl-spacing-02);height:var(--mrl-spacing-08);justify-content:center;line-height:var(--mrl-line-height-06);min-width:3.5rem;outline-color:rgba(0,0,0,0);padding:var(--mrl-spacing-03) var(--mrl-spacing-04);text-align:center;transition:outline-color var(--mrl-duration-04) var(--mrl-timing-m2),background-color var(--mrl-duration-04) var(--mrl-timing-m2),color var(--mrl-duration-04) var(--mrl-timing-m2)}.MrlFilterItem--qYLqp:focus-visible{outline:none}.MrlFilterItem--qYLqp:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:var(--mrl-timing-m3);border:0 solid rgba(0,0,0,0);border-radius:calc(
532
532
  var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
package/dist/utils/colors/colors.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ type RgbTuple = [number, number, number];
2
+ /**
3
+ * Returns `true` when the input is a valid `#rgb` or `#rrggbb` CSS color string.
4
+ * @param {string} color CSS-like hex color string
5
+ * @returns {boolean} whether the string is a valid hex color
6
+ */
7
+ export declare const isValidHexColor: (color: string) => boolean;
8
+ /**
9
+ * Returns `true` when the input is a valid `rgb(r, g, b)` CSS color string.
10
+ * @param {string} color CSS-like rgb color string
11
+ * @returns {boolean} whether the string is a valid rgb color
12
+ */
13
+ export declare const isValidRgbString: (color: string) => boolean;
14
+ /**
15
+ * Returns `true` when the input is a valid `rgba(r, g, b, a)` CSS color string.
16
+ * @param {string} color CSS-like rgba color string
17
+ * @returns {boolean} whether the string is a valid rgba color
18
+ */
19
+ export declare const isValidRgbaString: (color: string) => boolean;
20
+ /**
21
+ * Converts a valid hex color string to its `[r, g, b]` tuple representation.
22
+ * @param {string} hexColor valid hex color string
23
+ * @returns {RgbTuple} rgb tuple representation of the color
24
+ */
25
+ export declare const hexToRgb: (hexColor: string) => RgbTuple;
26
+ /**
27
+ * Returns the preferred text token for a background color using the same luminance threshold
28
+ * and alpha handling as the previous `@tactivos/mural-shared` helper.
29
+ * @param {string} backgroundColor background color to evaluate
30
+ * @param {string} blackTextColor token returned for light/transparent backgrounds
31
+ * @param {string} whiteTextColor token returned for dark backgrounds
32
+ * @returns {string} selected text token
33
+ */
34
+ export declare const stickyTextColor: <T extends string>(backgroundColor: string, blackTextColor: T, whiteTextColor: T) => T;
35
+ export {};
package/dist/utils/colors/colors.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/utils/colors/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './colors';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "4.62.0",
3
+ "version": "4.63.0-dev-VRgs.1",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -41,7 +41,6 @@
41
41
  },
42
42
  "license": "https://www.mural.co/terms/developer-addendum",
43
43
  "peerDependencies": {
44
- "@tactivos/mural-shared": "2.8.0",
45
44
  "lottie-web": "^5.9.6"
46
45
  },
47
46
  "devDependencies": {