@wistia/ui 0.0.23 → 0.0.24

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.cjs +64 -19
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.mts +6 -2
  4. package/dist/index.d.ts +6 -2
  5. package/dist/index.mjs +64 -19
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -50,10 +50,14 @@ declare const useActiveMq: () => MediaQueryLabels[];
50
50
  declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
51
51
  type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
52
52
  type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
53
+ /**
54
+ * @ignore For use in creating navs - will override any colorScheme prop
55
+ */
56
+ __nav?: boolean;
53
57
  /**
54
58
  * The color scheme to apply
55
59
  */
56
- colorScheme: ColorSchemeTypes;
60
+ colorScheme?: ColorSchemeTypes;
57
61
  /**
58
62
  * Children
59
63
  */
@@ -63,7 +67,7 @@ type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
63
67
  * A wrapper to apply a color scheme to its children.
64
68
  */
65
69
  declare const ColorSchemeWrapper: {
66
- ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
70
+ ({ __nav, colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
67
71
  displayName: string;
68
72
  };
69
73
 
package/dist/index.d.ts CHANGED
@@ -50,10 +50,14 @@ declare const useActiveMq: () => MediaQueryLabels[];
50
50
  declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
51
51
  type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
52
52
  type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
53
+ /**
54
+ * @ignore For use in creating navs - will override any colorScheme prop
55
+ */
56
+ __nav?: boolean;
53
57
  /**
54
58
  * The color scheme to apply
55
59
  */
56
- colorScheme: ColorSchemeTypes;
60
+ colorScheme?: ColorSchemeTypes;
57
61
  /**
58
62
  * Children
59
63
  */
@@ -63,7 +67,7 @@ type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
63
67
  * A wrapper to apply a color scheme to its children.
64
68
  */
65
69
  declare const ColorSchemeWrapper: {
66
- ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
70
+ ({ __nav, colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
67
71
  displayName: string;
68
72
  };
69
73
 
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.0.23
3
+ * @license @wistia/ui v0.0.24
4
4
  *
5
5
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
6
6
  *
@@ -820,11 +820,11 @@ import { css as css4 } from "styled-components";
820
820
  var colorAliasTokens = css4`
821
821
  --wui-color-bg-app: var(--wui-app-background);
822
822
 
823
- /* --- Default --- */
823
+ /* --- default --- */
824
824
  --wui-color-bg-fill: var(--wui-blue-9);
825
825
  --wui-color-bg-fill-active: var(--wui-blue-11);
826
826
  --wui-color-bg-fill-hover: var(--wui-blue-10);
827
- --wui-color-bg-surface: var(--wui-gray-surface);
827
+ --wui-color-bg-surface: var(--wui-gray-1);
828
828
  --wui-color-bg-surface-active: var(--wui-gray-4);
829
829
  --wui-color-bg-surface-hover: var(--wui-gray-3);
830
830
  --wui-color-bg-surface-secondary: var(--wui-gray-3);
@@ -853,7 +853,7 @@ var colorAliasTokens = css4`
853
853
  --wui-color-bg-fill-error: var(--wui-error-9);
854
854
  --wui-color-bg-fill-hover-error: var(--wui-error-10);
855
855
  --wui-color-bg-surface-active-error: var(--wui-error-4);
856
- --wui-color-bg-surface-error: var(--wui-error-surface);
856
+ --wui-color-bg-surface-error: var(--wui-error-2);
857
857
  --wui-color-bg-surface-hover-error: var(--wui-error-3);
858
858
  --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);
859
859
  --wui-color-bg-surface-secondary-error: var(--wui-error-3);
@@ -880,7 +880,7 @@ var colorAliasTokens = css4`
880
880
  --wui-color-bg-fill-info: var(--wui-blue-9);
881
881
  --wui-color-bg-surface-active-info: var(--wui-blue-4);
882
882
  --wui-color-bg-surface-hover-info: var(--wui-blue-3);
883
- --wui-color-bg-surface-info: var(--wui-blue-surface);
883
+ --wui-color-bg-surface-info: var(--wui-blue-2);
884
884
  --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);
885
885
  --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);
886
886
  --wui-color-bg-surface-secondary-info: var(--wui-blue-3);
@@ -909,7 +909,7 @@ var colorAliasTokens = css4`
909
909
  --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);
910
910
  --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);
911
911
  --wui-color-bg-surface-secondary-success: var(--wui-success-3);
912
- --wui-color-bg-surface-success: var(--wui-success-surface);
912
+ --wui-color-bg-surface-success: var(--wui-success-2);
913
913
  --wui-color-bg-surface-tertiary-success: var(--wui-success-5);
914
914
  --wui-color-border-success: var(--wui-success-6);
915
915
  --wui-color-border-hover-success: var(--wui-success-8);
@@ -936,14 +936,14 @@ var colorAliasTokens = css4`
936
936
  --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);
937
937
  --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);
938
938
  --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);
939
- --wui-color-bg-surface-warning: var(--wui-warning-surface);
939
+ --wui-color-bg-surface-warning: var(--wui-warning-2);
940
940
  --wui-color-border-warning: var(--wui-warning-6);
941
941
  --wui-color-border-hover-warning: var(--wui-warning-8);
942
942
  --wui-color-border-active-warning: var(--wui-warning-9);
943
943
  --wui-color-border-secondary-warning: var(--wui-warning-8);
944
944
  --wui-color-border-secondary-hover-warning: var(--wui-warning-10);
945
945
  --wui-color-border-secondary-active-warning: var(--wui-warning-11);
946
- --wui-color-icon-on-fill-warning: var(--wui-warning-contrast);
946
+ --wui-color-icon-on-fill-warning: var(--wui-warning-2);
947
947
  --wui-color-icon-warning: var(--wui-warning-11);
948
948
  --wui-color-text-high-contrast-warning: var(--wui-warning-12);
949
949
  --wui-color-text-link-warning: var(--wui-warning-11);
@@ -959,7 +959,7 @@ var colorAliasTokens = css4`
959
959
  --wui-color-bg-fill-blue: var(--wui-blue-9);
960
960
  --wui-color-bg-fill-hover-blue: var(--wui-blue-10);
961
961
  --wui-color-bg-surface-active-blue: var(--wui-blue-4);
962
- --wui-color-bg-surface-blue: var(--wui-blue-surface);
962
+ --wui-color-bg-surface-blue: var(--wui-blue-2);
963
963
  --wui-color-bg-surface-hover-blue: var(--wui-blue-3);
964
964
  --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);
965
965
  --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);
@@ -976,7 +976,7 @@ var colorAliasTokens = css4`
976
976
  --wui-color-text-blue: var(--wui-blue-11);
977
977
  --wui-color-text-high-contrast-blue: var(--wui-blue-12);
978
978
  --wui-color-text-link-blue: var(--wui-blue-9);
979
- --wui-color-text-on-fill-blue: var(--wui-blue-contrast);
979
+ --wui-color-text-on-fill-blue: var(--wui-blue-2);
980
980
  --wui-color-text-secondary-blue: var(--wui-blue-5);
981
981
  --wui-color-focus-ring-blue: var(--wui-blue-9);
982
982
 
@@ -985,7 +985,7 @@ var colorAliasTokens = css4`
985
985
  --wui-color-bg-fill-green: var(--wui-green-9);
986
986
  --wui-color-bg-fill-hover-green: var(--wui-green-10);
987
987
  --wui-color-bg-surface-active-green: var(--wui-green-4);
988
- --wui-color-bg-surface-green: var(--wui-green-surface);
988
+ --wui-color-bg-surface-green: var(--wui-green-2);
989
989
  --wui-color-bg-surface-hover-green: var(--wui-green-3);
990
990
  --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);
991
991
  --wui-color-bg-surface-secondary-green: var(--wui-green-3);
@@ -1012,7 +1012,7 @@ var colorAliasTokens = css4`
1012
1012
  --wui-color-bg-fill-orange: var(--wui-orange-9);
1013
1013
  --wui-color-bg-surface-active-orange: var(--wui-orange-4);
1014
1014
  --wui-color-bg-surface-hover-orange: var(--wui-orange-3);
1015
- --wui-color-bg-surface-orange: var(--wui-orange-surface);
1015
+ --wui-color-bg-surface-orange: var(--wui-orange-2);
1016
1016
  --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);
1017
1017
  --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);
1018
1018
  --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);
@@ -1038,7 +1038,7 @@ var colorAliasTokens = css4`
1038
1038
  --wui-color-bg-fill-pink: var(--wui-pink-9);
1039
1039
  --wui-color-bg-surface-active-pink: var(--wui-pink-4);
1040
1040
  --wui-color-bg-surface-hover-pink: var(--wui-pink-3);
1041
- --wui-color-bg-surface-pink: var(--wui-pink-surface);
1041
+ --wui-color-bg-surface-pink: var(--wui-pink-2);
1042
1042
  --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);
1043
1043
  --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);
1044
1044
  --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);
@@ -1064,7 +1064,7 @@ var colorAliasTokens = css4`
1064
1064
  --wui-color-bg-fill-purple: var(--wui-purple-9);
1065
1065
  --wui-color-bg-surface-active-purple: var(--wui-purple-4);
1066
1066
  --wui-color-bg-surface-hover-purple: var(--wui-purple-3);
1067
- --wui-color-bg-surface-purple: var(--wui-purple-surface);
1067
+ --wui-color-bg-surface-purple: var(--wui-purple-2);
1068
1068
  --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);
1069
1069
  --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);
1070
1070
  --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);
@@ -1094,7 +1094,7 @@ var colorAliasTokens = css4`
1094
1094
  --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);
1095
1095
  --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);
1096
1096
  --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);
1097
- --wui-color-bg-surface-yellow: var(--wui-yellow-surface);
1097
+ --wui-color-bg-surface-yellow: var(--wui-yellow-2);
1098
1098
  --wui-color-border-yellow: var(--wui-yellow-6);
1099
1099
  --wui-color-border-hover-yellow: var(--wui-yellow-8);
1100
1100
  --wui-color-border-active-yellow: var(--wui-yellow-9);
@@ -1112,7 +1112,6 @@ var colorAliasTokens = css4`
1112
1112
 
1113
1113
  /* --- Misc --- */
1114
1114
  --wui-color-bg-fill-white: #ffffff;
1115
- --wui-color-bg-nav: #1f3399;
1116
1115
  --wui-color-focus-color: var(--wui-blue-9);
1117
1116
  --wui-color-notification-pill-color: var(--wui-pink-9);
1118
1117
  --wui-color-overlay: var(--wui-gray-alpha-9);
@@ -1641,7 +1640,51 @@ var defaultScheme = css10`
1641
1640
  --wui-color-icon-on-fill: var(--wui-gray-contrast);
1642
1641
  --wui-color-focus-ring: var(--wui-blue-9);
1643
1642
  `;
1643
+ var navScheme = css10`
1644
+ --wui-color-bg-fill-active: var(--wui-blue-5);
1645
+ --wui-color-bg-fill-hover: var(--wui-blue-4);
1646
+ --wui-color-bg-fill: var(--wui-blue-1);
1647
+ --wui-color-bg-surface-active: #15246b;
1648
+ --wui-color-bg-surface-hover: #18297a;
1649
+ --wui-color-bg-surface-secondary-active: #121f5c;
1650
+ --wui-color-bg-surface-secondary-hover: #15246b;
1651
+ --wui-color-bg-surface-secondary: #18297a;
1652
+ --wui-color-bg-surface-tertiary: #3547a3;
1653
+ --wui-color-bg-surface: #1e3399;
1654
+ --wui-color-border: var(--wui-blue-1);
1655
+ --wui-color-border-hover: var(--wui-blue-2);
1656
+ --wui-color-border-active: var(--wui-blue-3);
1657
+ --wui-color-border-secondary: var(--wui-blue-9);
1658
+ --wui-color-border-secondary-hover: var(--wui-blue-10);
1659
+ --wui-color-border-secondary-active: var(--wui-blue-12);
1660
+ --wui-color-icon-on-fill: var(--wui-blue-9);
1661
+ --wui-color-icon: var(--wui-blue-4);
1662
+ --wui-color-text-high-contrast: var(--wui-blue-1);
1663
+ --wui-color-text-link: var(--wui-blue-4);
1664
+ --wui-color-text-on-fill: var(--wui-blue-9);
1665
+ --wui-color-text-secondary: var(--wui-blue-4);
1666
+ --wui-color-text: var(--wui-blue-1);
1667
+ --wui-color-focus-ring: var(--wui-blue-1);
1668
+
1669
+ /* Nav - Disabled */
1670
+ --wui-color-bg-surface-disabled: var(--wui-blue-12);
1671
+ --wui-color-icon-disabled: var(--wui-blue-8);
1672
+ --wui-color-text-disabled: var(--wui-blue-8);
1673
+
1674
+ /* Nav - Selected */
1675
+ --wui-color-bg-surface-selected: var(--wui-blue-3);
1676
+ --wui-color-bg-surface-selected-active: var(--wui-blue-5);
1677
+ --wui-color-bg-surface-selected-hover: var(--wui-blue-4);
1678
+ --wui-color-icon-selected: var(--wui-blue-9);
1679
+ --wui-color-text-selected: var(--wui-blue-9);
1680
+ --wui-color-border-selected: rgba(0, 0, 0, 0);
1681
+ --wui-color-border-hover-selected: rgba(0, 0, 0, 0);
1682
+ --wui-color-border-active-selected: rgba(0, 0, 0, 0);
1683
+ `;
1644
1684
  var getColorScheme = (colorScheme) => {
1685
+ if (colorScheme === "nav") {
1686
+ return navScheme;
1687
+ }
1645
1688
  if (colorScheme === "inherit") {
1646
1689
  return null;
1647
1690
  }
@@ -1651,7 +1694,7 @@ var getColorScheme = (colorScheme) => {
1651
1694
  return css10`
1652
1695
  ${colorSchemeSchema.map(({ token, step }) => {
1653
1696
  return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
1654
- })}
1697
+ }).join("")}
1655
1698
  `;
1656
1699
  };
1657
1700
 
@@ -1801,16 +1844,18 @@ var colorSchemeOptions = [
1801
1844
  "vendor-pardot"
1802
1845
  ];
1803
1846
  var StyledColorSchemeWrapper = styled3.div`
1804
- ${({ $colorScheme }) => getColorScheme($colorScheme)};
1847
+ ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
1805
1848
  `;
1806
1849
  var ColorSchemeWrapper = ({
1807
- colorScheme,
1850
+ __nav = false,
1851
+ colorScheme = "inherit",
1808
1852
  children,
1809
1853
  ...otherProps
1810
1854
  }) => /* @__PURE__ */ jsx7(
1811
1855
  StyledColorSchemeWrapper,
1812
1856
  {
1813
1857
  $colorScheme: colorScheme,
1858
+ $nav: __nav,
1814
1859
  ...otherProps,
1815
1860
  children
1816
1861
  }