@redgate/brand-web-toolkit 0.0.7 → 0.0.9

package/components/button/Button.d.ts

@@ -0,0 +1,22 @@
+import { IIcon } from '../icons/Icon';
+export type IButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'transparent';
+export type IButton = {
+    hierarchy?: IButtonHierarchy;
+    label: string;
+    size?: 'xl';
+    type?: 'button' | 'reset' | 'submit' | 'link';
+    href?: string;
+    disabled?: boolean;
+    icon?: {
+        leading?: {
+            icon: IIcon['icon'];
+            size?: IIcon['size'];
+        };
+        trailing?: {
+            icon: IIcon['icon'];
+            size?: IIcon['size'];
+        };
+    };
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
+};
+export default function Button({ hierarchy, label, icon, type, disabled, size, href, onClick, }: IButton): import("react/jsx-runtime").JSX.Element;

package/components/button/Button.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Icon from '../icons/Icon.js';
+
+const classNames = [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'gap-sm',
+    'overflow-clip',
+    'text-md',
+    'font-semibold',
+    'rounded-button-default',
+    'cursor-pointer',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+];
+const hierarchyStyles = {
+    primary: [
+        'bg-bg-accent-strongest-alt',
+        'text-text-primary_on-accent-strongest-alt',
+        'hover:bg-bg-accent-strongest-alt_hover',
+        'disabled:bg-bg-accent-strongest',
+        'disabled:text-text-primary_on-accent-strongest-alt',
+    ],
+    secondary: [
+        'bg-bg-primary',
+        'inset-ring-2',
+        'inset-ring-border-accent',
+        'text-text-secondary',
+        'hover:bg-bg-primary_hover',
+        'hover:text-text-secondary_hover',
+        'disabled:bg-bg-primary',
+        'disabled:inset-ring-2',
+        'disabled:inset-ring-border-primary',
+        'disabled:text-text-secondary',
+    ],
+    tertiary: [
+        'bg-bg-primary',
+        'inset-ring-1',
+        'inset-ring-border-accent',
+        'text-text-secondary',
+        'hover:bg-bg-primary_hover',
+        'hover:text-text-secondary_hover',
+        'disabled:bg-bg-primary',
+        'disabled:inset-ring-1',
+        'disabled:inset-ring-border-primary',
+        'disabled:text-text-secondary',
+    ],
+    transparent: [
+        'text-text-tertiary',
+        'hover:bg-bg-primary_hover',
+        'hover:text-text-tertiary_hover',
+        'disabled:text-text-tertiary',
+    ],
+};
+const sizingStyles = {
+    xl: ['px-xl', 'py-lg'],
+};
+function ButtonWrapper({ type, href, disabled, className, onClick, children, }) {
+    const props = type === 'link'
+        ? {
+            href,
+            className,
+            onClick,
+        }
+        : {
+            type,
+            disabled,
+            className,
+            onClick,
+        };
+    return type === 'link' ? (jsx("a", { ...props, children: children })) : (jsx("button", { ...props, children: children }));
+}
+function Button({ hierarchy = 'primary', label, icon, type = 'button', disabled = false, size = 'xl', href, onClick, }) {
+    const defaultIconSize = 20;
+    const styles = hierarchyStyles[hierarchy];
+    const sizeStyles = sizingStyles[size];
+    let className = [...classNames, ...styles, ...sizeStyles].join(' ');
+    // Disable links if set to disabled.
+    if (disabled && type === 'link') {
+        className = className + ' pointer-events-none';
+    }
+    return (jsxs(ButtonWrapper, { type: type, href: href, disabled: disabled, className: className, onClick: onClick, children: [icon?.leading?.icon && (jsx(Icon, { icon: icon.leading.icon, size: icon?.leading?.size || defaultIconSize })), jsx("span", { children: label }), icon?.trailing?.icon && (jsx(Icon, { icon: icon.trailing.icon, size: icon?.trailing?.size || defaultIconSize }))] }));
+}
+
+export { Button as default };
+//# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../components/button/Button.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport Icon, { IIcon } from '../icons/Icon';\n\nexport type IButtonHierarchy =\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'transparent';\n\nexport type IButton = {\n    hierarchy?: IButtonHierarchy;\n    label: string;\n    size?: 'xl';\n    type?: 'button' | 'reset' | 'submit' | 'link';\n    href?: string;\n    disabled?: boolean;\n    icon?: {\n        leading?: {\n            icon: IIcon['icon'];\n            size?: IIcon['size'];\n        };\n        trailing?: {\n            icon: IIcon['icon'];\n            size?: IIcon['size'];\n        };\n    };\n    onClick?: (\n        e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>,\n    ) => void;\n};\n\nconst classNames = [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'gap-sm',\n    'overflow-clip',\n    'text-md',\n    'font-semibold',\n    'rounded-button-default',\n    'cursor-pointer',\n\n    'disabled:opacity-50',\n    'disabled:cursor-not-allowed',\n];\n\nconst hierarchyStyles: Record<IButtonHierarchy, string[]> = {\n    primary: [\n        'bg-bg-accent-strongest-alt',\n        'text-text-primary_on-accent-strongest-alt',\n        'hover:bg-bg-accent-strongest-alt_hover',\n        'disabled:bg-bg-accent-strongest',\n        'disabled:text-text-primary_on-accent-strongest-alt',\n    ],\n    secondary: [\n        'bg-bg-primary',\n        'inset-ring-2',\n        'inset-ring-border-accent',\n        'text-text-secondary',\n        'hover:bg-bg-primary_hover',\n        'hover:text-text-secondary_hover',\n        'disabled:bg-bg-primary',\n        'disabled:inset-ring-2',\n        'disabled:inset-ring-border-primary',\n        'disabled:text-text-secondary',\n    ],\n    tertiary: [\n        'bg-bg-primary',\n        'inset-ring-1',\n        'inset-ring-border-accent',\n        'text-text-secondary',\n        'hover:bg-bg-primary_hover',\n        'hover:text-text-secondary_hover',\n        'disabled:bg-bg-primary',\n        'disabled:inset-ring-1',\n        'disabled:inset-ring-border-primary',\n        'disabled:text-text-secondary',\n    ],\n    transparent: [\n        'text-text-tertiary',\n        'hover:bg-bg-primary_hover',\n        'hover:text-text-tertiary_hover',\n        'disabled:text-text-tertiary',\n    ],\n};\n\nconst sizingStyles: Record<NonNullable<IButton['size']>, string[]> = {\n    xl: ['px-xl', 'py-lg'],\n};\n\nfunction ButtonWrapper({\n    type,\n    href,\n    disabled,\n    className,\n    onClick,\n    children,\n}: {\n    type: IButton['type'];\n    href?: IButton['href'];\n    disabled: IButton['disabled'];\n    className: string;\n    onClick: IButton['onClick'];\n    children: ReactNode;\n}) {\n    const props =\n        type === 'link'\n            ? {\n                  href,\n                  className,\n                  onClick,\n              }\n            : {\n                  type,\n                  disabled,\n                  className,\n                  onClick,\n              };\n\n    return type === 'link' ? (\n        <a {...props}>{children}</a>\n    ) : (\n        <button {...props}>{children}</button>\n    );\n}\n\nexport default function Button({\n    hierarchy = 'primary',\n    label,\n    icon,\n    type = 'button',\n    disabled = false,\n    size = 'xl',\n    href,\n    onClick,\n}: IButton) {\n    const defaultIconSize = 20;\n    const styles = hierarchyStyles[hierarchy];\n    const sizeStyles = sizingStyles[size];\n\n    let className = [...classNames, ...styles, ...sizeStyles].join(' ');\n\n    // Disable links if set to disabled.\n    if (disabled && type === 'link') {\n        className = className + ' pointer-events-none';\n    }\n\n    return (\n        <ButtonWrapper\n            type={type}\n            href={href}\n            disabled={disabled}\n            className={className}\n            onClick={onClick}\n        >\n            {icon?.leading?.icon && (\n                <Icon\n                    icon={icon.leading.icon}\n                    size={icon?.leading?.size || defaultIconSize}\n                />\n            )}\n            {<span>{label}</span>}\n            {icon?.trailing?.icon && (\n                <Icon\n                    icon={icon.trailing.icon}\n                    size={icon?.trailing?.size || defaultIconSize}\n                />\n            )}\n        </ButtonWrapper>\n    );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/components/button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './Button';
+export { Button };

package/components/button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.js';
+//# sourceMappingURL=index.js.map

package/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/notification/Notification.d.ts

@@ -0,0 +1,7 @@
+import { IIcon } from '../icons/Icon';
+export type INotification = {
+    type: 'info' | 'fail' | 'success' | 'warning';
+    icon?: boolean | IIcon['icon'];
+    children: React.ReactElement;
+};
+export default function Notification({ type, icon, children }: INotification): import("react/jsx-runtime").JSX.Element;

package/components/notification/Notification.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Icon from '../icons/Icon.js';
+
+function NotificationIcon({ type, icon, }) {
+    if (icon === false || icon === undefined) {
+        return null;
+    }
+    const defaultIcon = {
+        info: 'PlusCircle',
+        fail: 'CloseCircle',
+        success: 'TickCircle',
+        warning: 'MinusCircle',
+    };
+    return jsx(Icon, { icon: icon === true ? defaultIcon[type] : icon, size: 24 });
+}
+function Notification({ type, icon, children }) {
+    const notificationColours = {
+        info: {
+            border: 'border-fg-info-secondary',
+            text: 'text-fg-info-secondary',
+        },
+        fail: {
+            border: 'border-fg-error-secondary',
+            text: 'text-fg-error-secondary',
+        },
+        success: {
+            border: 'border-fg-success-secondary',
+            text: 'text-fg-success-secondary',
+        },
+        warning: {
+            border: 'border-fg-warning-secondary',
+            text: 'text-fg-warning-secondary',
+        },
+    };
+    return (jsx("div", { className: `flex bg-bg-secondary p-5 border-l-10 ${notificationColours[type].border}`, children: jsxs("div", { className: `flex grow items-start gap-5`, children: [icon && (jsx("span", { className: notificationColours[type].text, children: jsx(NotificationIcon, { type: type, icon: icon }) })), jsx("div", { className: "flex flex-col grow", children: children })] }) }));
+}
+
+export { Notification as default };
+//# sourceMappingURL=Notification.js.map

package/components/notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../../components/notification/Notification.tsx"],"sourcesContent":["import Icon, { IIcon } from '../icons/Icon';\n\nexport type INotification = {\n    type: 'info' | 'fail' | 'success' | 'warning';\n    icon?: boolean | IIcon['icon'];\n    children: React.ReactElement;\n};\n\nfunction NotificationIcon({\n    type,\n    icon,\n}: {\n    type: INotification['type'];\n    icon: INotification['icon'];\n}) {\n    if (icon === false || icon === undefined) {\n        return null;\n    }\n\n    const defaultIcon: Record<INotification['type'], IIcon['icon']> = {\n        info: 'PlusCircle',\n        fail: 'CloseCircle',\n        success: 'TickCircle',\n        warning: 'MinusCircle',\n    };\n\n    return <Icon icon={icon === true ? defaultIcon[type] : icon} size={24} />;\n}\n\nexport default function Notification({ type, icon, children }: INotification) {\n    const notificationColours: Record<\n        INotification['type'],\n        { border: string; text: string }\n    > = {\n        info: {\n            border: 'border-fg-info-secondary',\n            text: 'text-fg-info-secondary',\n        },\n        fail: {\n            border: 'border-fg-error-secondary',\n            text: 'text-fg-error-secondary',\n        },\n        success: {\n            border: 'border-fg-success-secondary',\n            text: 'text-fg-success-secondary',\n        },\n        warning: {\n            border: 'border-fg-warning-secondary',\n            text: 'text-fg-warning-secondary',\n        },\n    };\n\n    return (\n        <div\n            className={`flex bg-bg-secondary p-5 border-l-10 ${notificationColours[type].border}`}\n        >\n            <div className={`flex grow items-start gap-5`}>\n                {icon && (\n                    <span className={notificationColours[type].text}>\n                        <NotificationIcon type={type} icon={icon} />\n                    </span>\n                )}\n                <div className=\"flex flex-col grow\">{children}</div>\n            </div>\n        </div>\n    );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAQA,SAAS,gBAAgB,CAAC,EACtB,IAAI,EACJ,IAAI,GAIP,EAAA;IACG,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,SAAS,EAAE;AACtC,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,WAAW,GAAiD;AAC9D,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,OAAO,EAAE,aAAa;KACzB;IAED,OAAOA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI;AAC7E;AAEc,SAAU,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAiB,EAAA;AACxE,IAAA,MAAM,mBAAmB,GAGrB;AACA,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,IAAI,EAAE,wBAAwB;AACjC,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,2BAA2B;AACnC,YAAA,IAAI,EAAE,yBAAyB;AAClC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,6BAA6B;AACrC,YAAA,IAAI,EAAE,2BAA2B;AACpC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,6BAA6B;AACrC,YAAA,IAAI,EAAE,2BAA2B;AACpC,SAAA;KACJ;IAED,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,qCAAA,EAAwC,mBAAmB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAA,CAAE,YAErFC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,CACxC,IAAI,KACDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAA,QAAA,EAC3CA,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,GACzC,CACV,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,CAAA,EAAA,CAClD,EAAA,CACJ;AAEd;;;;"}

package/components/notification/index.d.ts

@@ -0,0 +1,2 @@
+import Notification from './Notification';
+export { Notification };

package/components/notification/index.js

@@ -0,0 +1,2 @@
+export { default as Notification } from './Notification.js';
+//# sourceMappingURL=index.js.map

package/components/notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redgate/brand-web-toolkit",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "description": "Web toolkit for the Redgate Brand design system",
     "main": "components/index.js",
     "module": "components/index.js",

package/tailwindcss/pass.css

@@ -8,6 +8,8 @@
       "Courier New", monospace;
     --text-xl: 20px;
     --text-xl--line-height: var(--line-height-10);
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --default-font-family: var(--font-family-body);
     --default-mono-font-family: var(--font-mono);
     --color-white: #FFFFFF;
@@ -106,6 +108,9 @@
     --spacing-360: 1440px;
     --spacing-400: 1600px;
     --spacing-480: 1920px;
+    --spacing-sm: var(--spacing-1-5);
+    --spacing-lg: var(--spacing-3);
+    --spacing-xl: var(--spacing-4);
     --radius-xxs: 2px;
     --radius-xs: 4px;
     --radius-sm: 6px;
@@ -149,14 +154,29 @@
     --fluid-line-height-max-16: 72;
     --fluid-line-height-min-17: 48;
     --fluid-line-height-max-17: 80;
+    --color-text-primary_on-accent-strongest-alt: var(--color-white);
     --color-text-secondary: var(--color-indigo-400);
+    --color-text-secondary_hover: var(--color-indigo-700);
+    --color-text-tertiary: var(--color-indigo-400);
+    --color-text-tertiary_hover: var(--color-indigo-600);
+    --color-border-primary: var(--color-indigo-300);
+    --color-border-accent: var(--color-pass-pink);
     --color-fg-accent-primary: var(--color-indigo-600);
     --color-fg-accent-secondary: var(--color-indigo-500);
+    --color-fg-error-secondary: var(--color-red-500);
+    --color-fg-warning-secondary: var(--color-yellow-500);
+    --color-fg-success-secondary: var(--color-green-500);
+    --color-fg-info-secondary: var(--color-blue-500);
     --color-bg-primary: var(--color-white);
+    --color-bg-primary_hover: var(--color-gray-50);
     --color-bg-secondary: var(--color-gray-50);
     --color-bg-tertiary: var(--color-gray-100);
+    --color-bg-accent-strongest: var(--color-pass-yellow);
+    --color-bg-accent-strongest-alt: var(--color-indigo-400);
+    --color-bg-accent-strongest-alt_hover: var(--color-indigo-400);
     --default-font-color: var(--color-text-secondary);
     --default-background-color: var(--color-bg-primary);
+    --radius-button-default: var(--radius-full);
     --font-family-display: 'Kanit', sans-serif;
     --font-family-body: 'Kanit', sans-serif;
   }
@@ -310,6 +330,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .static {
     position: static;
   }
@@ -334,6 +357,9 @@
   .contents {
     display: contents;
   }
+  .flex {
+    display: flex;
+  }
   .grid {
     display: grid;
   }
@@ -343,12 +369,210 @@
   .inline {
     display: inline;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .table {
+    display: table;
+  }
+  .grow {
+    flex-grow: 1;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-5 {
+    gap: var(--spacing-5);
+  }
+  .gap-sm {
+    gap: var(--spacing-sm);
+  }
+  .overflow-clip {
+    overflow: clip;
+  }
+  .rounded-button-default {
+    border-radius: var(--radius-button-default);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-l-10 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 10px;
+  }
+  .border-fg-error-secondary {
+    border-color: var(--color-fg-error-secondary);
+  }
+  .border-fg-info-secondary {
+    border-color: var(--color-fg-info-secondary);
+  }
+  .border-fg-success-secondary {
+    border-color: var(--color-fg-success-secondary);
+  }
+  .border-fg-warning-secondary {
+    border-color: var(--color-fg-warning-secondary);
+  }
+  .bg-bg-accent-strongest-alt {
+    background-color: var(--color-bg-accent-strongest-alt);
+  }
+  .bg-bg-primary {
+    background-color: var(--color-bg-primary);
+  }
+  .bg-bg-secondary {
+    background-color: var(--color-bg-secondary);
+  }
+  .p-5 {
+    padding: var(--spacing-5);
+  }
+  .px-xl {
+    padding-inline: var(--spacing-xl);
+  }
+  .py-lg {
+    padding-block: var(--spacing-lg);
+  }
+  .text-md {
+    font-size: var(--text-md);
+    line-height: var(--tw-leading, var(--text-md--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-fg-error-secondary {
+    color: var(--color-fg-error-secondary);
+  }
+  .text-fg-info-secondary {
+    color: var(--color-fg-info-secondary);
+  }
+  .text-fg-success-secondary {
+    color: var(--color-fg-success-secondary);
+  }
+  .text-fg-warning-secondary {
+    color: var(--color-fg-warning-secondary);
+  }
+  .text-text-primary_on-accent-strongest-alt {
+    color: var(--color-text-primary_on-accent-strongest-alt);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
   .lowercase {
     text-transform: lowercase;
   }
+  .inset-ring-1 {
+    --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .inset-ring-2 {
+    --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .inset-ring-border-accent {
+    --tw-inset-ring-color: var(--color-border-accent);
+  }
+  .hover\:bg-bg-accent-strongest-alt_hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-bg-accent-strongest-alt_hover);
+      }
+    }
+  }
+  .hover\:bg-bg-primary_hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-bg-primary_hover);
+      }
+    }
+  }
+  .hover\:text-text-secondary_hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-secondary_hover);
+      }
+    }
+  }
+  .hover\:text-text-tertiary_hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-tertiary_hover);
+      }
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:bg-bg-accent-strongest {
+    &:disabled {
+      background-color: var(--color-bg-accent-strongest);
+    }
+  }
+  .disabled\:bg-bg-primary {
+    &:disabled {
+      background-color: var(--color-bg-primary);
+    }
+  }
+  .disabled\:text-text-primary_on-accent-strongest-alt {
+    &:disabled {
+      color: var(--color-text-primary_on-accent-strongest-alt);
+    }
+  }
+  .disabled\:text-text-secondary {
+    &:disabled {
+      color: var(--color-text-secondary);
+    }
+  }
+  .disabled\:text-text-tertiary {
+    &:disabled {
+      color: var(--color-text-tertiary);
+    }
+  }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+  .disabled\:inset-ring-1 {
+    &:disabled {
+      --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .disabled\:inset-ring-2 {
+    &:disabled {
+      --tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .disabled\:inset-ring-border-primary {
+    &:disabled {
+      --tw-inset-ring-color: var(--color-border-primary);
+    }
+  }
 }
 @layer base {
   html, :host {
@@ -472,6 +696,8 @@
     --color-fg-warning-secondary: var(--color-yellow-400);
     --color-fg-success-primary: var(--color-green-500);
     --color-fg-success-secondary: var(--color-green-400);
+    --color-fg-info-primary: var(--color-blue-500);
+    --color-fg-info-secondary: var(--color-blue-400);
     --color-bg-quaternary: var(--color-indigo-700);
     --color-bg-quaternary-hover: var(--color-indigo-700);
     --color-bg-overlay: var(--color-indigo-800);
@@ -553,6 +779,80 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -561,6 +861,22 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
     }
   }
 }