@preply/ds-web-core 7.1.0 → 8.0.0

package/dist/actions/style/mixins.less

@@ -2,6 +2,7 @@
 @import '../../generated/hover.less';
 @import '../../generated/options.less';
 @import '../../theme/style/declarations.mixins.less';
+@import '../../gradient-border/mixin.less';
 
 .computedVerticalPadding(@size) {
     padding-top: 6px;
@@ -86,13 +87,16 @@
 
 .action-ai-variant() {
     &--variant-ai {
-        // @see https://github.com/preply/design-system/pull/583
-        border-image: @action-variant-ai-button-borderImage;
+        .gradient-border(@action-base-borderWidth, @color-border-ai-button-linearGradient);
 
-        &[disabled],
-        &[disabled]:hover {
-            border-image: initial;
-            .border-color('action', 'variant-ai-disabled');
+        &[disabled] {
+            &:before {
+                display: none;
+            }
+            &,
+            &:hover {
+                .border-color('action', 'variant-ai-disabled');
+            }
         }
     }
 }

package/dist/generated/breakpoints.less

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Thu Nov 20 2025 14:49:13 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-less.ts @Fri Dec 05 2025 08:14:11 GMT+0000 (Coordinated Universal Time) */
 
 @breakpoints: {
     narrow-l: 400px;

package/dist/generated/breakpoints.scss

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-scss.ts @Thu Nov 20 2025 14:49:13 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/breakpoints/web-core-breakpoints-scss.ts @Fri Dec 05 2025 08:14:11 GMT+0000 (Coordinated Universal Time) */
 
 $breakpoints: (
     narrow-l: 400px,

package/dist/generated/hover.less

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-less.ts @Thu Nov 20 2025 14:49:13 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-less.ts @Fri Dec 05 2025 08:14:11 GMT+0000 (Coordinated Universal Time) */
 
 .onHover(@styles) {
     @media (hover: hover) and (pointer: fine) {

package/dist/generated/hover.scss

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-scss.ts @Thu Nov 20 2025 14:49:13 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/hover/web-core-hover-scss.ts @Fri Dec 05 2025 08:14:11 GMT+0000 (Coordinated Universal Time) */
 
 @mixin onHover {
     @media (hover: hover) and (pointer: fine) {

package/dist/generated/options.less

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Thu Nov 20 2025 14:49:11 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-less.ts @Fri Dec 05 2025 08:14:10 GMT+0000 (Coordinated Universal Time) */
 
 @ACTION_LINK_VARIANT_ACTIVE_COLOR_OPTIONS: accentDark, accentDarkInverted, neutral, neutralInverted,
     unsetColors;

package/dist/generated/options.scss

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-scss.ts @Thu Nov 20 2025 14:49:11 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/types/web-core-options-scss.ts @Fri Dec 05 2025 08:14:10 GMT+0000 (Coordinated Universal Time) */
 
 $ACTION_LINK_VARIANT_ACTIVE_COLOR_OPTIONS:
     accentDark, accentDarkInverted, neutral, neutralInverted, unsetColors;

package/dist/generated/tokens.less

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Thu Nov 20 2025 14:49:12 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-less.ts @Fri Dec 05 2025 08:14:10 GMT+0000 (Coordinated Universal Time) */
 
 @text-typeface: var(--42e7c5);
 @text-fontFamily: var(--51aa6f);
@@ -853,10 +853,8 @@
 @icon-fieldLayout-width: var(--d57208);
 @icon-fieldLayout-height: var(--3caeb9);
 @icon-fieldLayout-borderRadius: var(--0191ea);
-@color-border-ai-button-borderImage: var(--d80c7b);
-@color-border-ai-surface-borderImage: var(--f9b3c4);
+@color-border-ai-button-linearGradient: var(--cab35d);
 @color-background-ai-surface-linearGradient: var(--decc79);
-@action-variant-ai-button-borderImage: var(--a784e2);
 @motion-components-interaction-duration: var(--970975);
 @motion-components-interaction-easing-function: var(--1f4492);
 @motion-components-interaction-easing-functionName: var(--445832);

package/dist/generated/tokens.scss

@@ -1,4 +1,4 @@
-/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-scss.ts @Thu Nov 20 2025 14:49:12 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED by support/tools/src/tool/code-generator/output/tokens/web-core-tokens-scss.ts @Fri Dec 05 2025 08:14:10 GMT+0000 (Coordinated Universal Time) */
 
 $text-typeface: var(--42e7c5);
 $text-fontFamily: var(--51aa6f);
@@ -853,10 +853,8 @@ $action-base-borderWidth: var(--0b1b71);
 $icon-fieldLayout-width: var(--d57208);
 $icon-fieldLayout-height: var(--3caeb9);
 $icon-fieldLayout-borderRadius: var(--0191ea);
-$color-border-ai-button-borderImage: var(--d80c7b);
-$color-border-ai-surface-borderImage: var(--f9b3c4);
+$color-border-ai-button-linearGradient: var(--cab35d);
 $color-background-ai-surface-linearGradient: var(--decc79);
-$action-variant-ai-button-borderImage: var(--a784e2);
 $motion-components-interaction-duration: var(--970975);
 $motion-components-interaction-easing-function: var(--1f4492);
 $motion-components-interaction-easing-functionName: var(--445832);

package/dist/gradient-border/index.d.ts

@@ -0,0 +1,17 @@
+export declare function gradientBorder(borderWidth: string | number, borderColor: string, fallbackColor?: string): {
+    position: "relative";
+    border: `${string} solid ${string}` | `${number} solid ${string}`;
+    '&::before': {
+        content: "\"\"";
+        position: "absolute";
+        inset: number;
+        borderRadius: "inherit";
+        padding: string | number;
+        margin: `calc(-1 * ${string})` | `calc(-1 * ${number})`;
+        background: string;
+        mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)";
+        maskComposite: "exclude";
+        pointerEvents: "none";
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/gradient-border/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/gradient-border/index.ts"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,CAC1B,WAAW,EAAE,MAAM,GAAG,MAAM,EAC5B,WAAW,EAAE,MAAM,EACnB,aAAa,SAAoC;;;;;;;;;;;;;;;EAkBpD"}

package/dist/gradient-border/index.js

@@ -0,0 +1,24 @@
+import { color } from '@preply/ds-core';
+import { getTokenVar } from '../token/util/getTokenVar.js';
+
+function gradientBorder(borderWidth, borderColor, fallbackColor = getTokenVar(color.border.primary)) {
+    return {
+        position: 'relative',
+        border: `${borderWidth} solid ${fallbackColor}`,
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            padding: borderWidth,
+            margin: `calc(-1 * ${borderWidth})`,
+            background: borderColor,
+            mask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+            maskComposite: 'exclude',
+            pointerEvents: 'none',
+        },
+    };
+}
+
+export { gradientBorder };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9ncmFkaWVudC1ib3JkZXIvaW5kZXgudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY29sb3IgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgZ2V0VG9rZW5WYXIgfSBmcm9tICcuLi90b2tlbic7XG5pbXBvcnQgdHlwZSB7IFN0eWxlZE9iamVjdCB9IGZyb20gJ3N0eWxlZC1jb21wb25lbnRzJztcblxuZXhwb3J0IGZ1bmN0aW9uIGdyYWRpZW50Qm9yZGVyKFxuICAgIGJvcmRlcldpZHRoOiBzdHJpbmcgfCBudW1iZXIsXG4gICAgYm9yZGVyQ29sb3I6IHN0cmluZyxcbiAgICBmYWxsYmFja0NvbG9yID0gZ2V0VG9rZW5WYXIoY29sb3IuYm9yZGVyLnByaW1hcnkpLFxuKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAgIGJvcmRlcjogYCR7Ym9yZGVyV2lkdGh9IHNvbGlkICR7ZmFsbGJhY2tDb2xvcn1gLFxuICAgICAgICAnJjo6YmVmb3JlJzoge1xuICAgICAgICAgICAgY29udGVudDogJ1wiXCInLFxuICAgICAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgICAgICBpbnNldDogMCxcbiAgICAgICAgICAgIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICAgICAgICAgICAgcGFkZGluZzogYm9yZGVyV2lkdGgsXG4gICAgICAgICAgICBtYXJnaW46IGBjYWxjKC0xICogJHtib3JkZXJXaWR0aH0pYCxcbiAgICAgICAgICAgIGJhY2tncm91bmQ6IGJvcmRlckNvbG9yLFxuICAgICAgICAgICAgbWFzazogJ2xpbmVhci1ncmFkaWVudCgjMDAwIDAgMCkgY29udGVudC1ib3gsIGxpbmVhci1ncmFkaWVudCgjMDAwIDAgMCknLFxuICAgICAgICAgICAgbWFza0NvbXBvc2l0ZTogJ2V4Y2x1ZGUnLFxuICAgICAgICAgICAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICAgICAgICB9LFxuICAgIH0gc2F0aXNmaWVzIFN0eWxlZE9iamVjdDtcbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7U0FJZ0IsY0FBYyxDQUMxQixXQUE0QixFQUM1QixXQUFtQixFQUNuQixhQUFhLEdBQUcsV0FBVyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLEVBQUE7SUFFakQsT0FBTztBQUNILFFBQUEsUUFBUSxFQUFFLFVBQVU7QUFDcEIsUUFBQSxNQUFNLEVBQUUsQ0FBQSxFQUFHLFdBQVcsQ0FBQSxPQUFBLEVBQVUsYUFBYSxDQUFBLENBQUU7QUFDL0MsUUFBQSxXQUFXLEVBQUU7QUFDVCxZQUFBLE9BQU8sRUFBRSxJQUFJO0FBQ2IsWUFBQSxRQUFRLEVBQUUsVUFBVTtBQUNwQixZQUFBLEtBQUssRUFBRSxDQUFDO0FBQ1IsWUFBQSxZQUFZLEVBQUUsU0FBUztBQUN2QixZQUFBLE9BQU8sRUFBRSxXQUFXO1lBQ3BCLE1BQU0sRUFBRSxDQUFBLFVBQUEsRUFBYSxXQUFXLENBQUEsQ0FBQSxDQUFHO0FBQ25DLFlBQUEsVUFBVSxFQUFFLFdBQVc7QUFDdkIsWUFBQSxJQUFJLEVBQUUsa0VBQWtFO0FBQ3hFLFlBQUEsYUFBYSxFQUFFLFNBQVM7QUFDeEIsWUFBQSxhQUFhLEVBQUUsTUFBTTtBQUN4QixTQUFBO0tBQ21CO0FBQzVCOzs7OyJ9

package/dist/gradient-border/mixin.less

@@ -0,0 +1,27 @@
+@import '../generated/tokens.less';
+
+// Based on https://dev.to/afif/border-with-gradient-and-radius-387f
+.gradient-border(@border-width, @border-color, @fallback-color: @color-border-primary) {
+    position: relative;
+    border: @border-width solid @fallback-color;
+
+    @supports (mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)) and
+        (mask-composite: exclude) {
+        border-color: transparent;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            padding: @border-width;
+            margin: calc(-1 * @border-width);
+            background: @border-color;
+            mask:
+                linear-gradient(#000 0 0) content-box,
+                linear-gradient(#000 0 0);
+            mask-composite: exclude;
+            pointer-events: none;
+        }
+    }
+}

package/dist/gradient-border/mixin.less.js

@@ -0,0 +1,8 @@
+import styleInject from '../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = "";
+var stylesheet="";
+styleInject(css_248z);
+
+export { css_248z as default, stylesheet };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWl4aW4ubGVzcy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OyJ9

package/dist/gradient-border/mixin.scss

@@ -0,0 +1,32 @@
+@use '../generated/tokens.scss' as *;
+
+// Based on https://dev.to/afif/border-with-gradient-and-radius-387f
+@mixin gradient-border($border-width, $border-color, $fallback-color: $color-border-primary) {
+    position: relative;
+    border: $border-width solid $fallback-color;
+
+    @supports (
+            mask: linear-gradient(#000 0 0) content-box,
+            linear-gradient(
+                #000 0 0,
+            )
+        )
+        and (mask-composite: exclude) {
+        border-color: transparent;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            padding: $border-width;
+            margin: calc(-1 * $border-width);
+            background: $border-color;
+            mask:
+                linear-gradient(#000 0 0) content-box,
+                linear-gradient(#000 0 0);
+            mask-composite: exclude;
+            pointer-events: none;
+        }
+    }
+}

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export * from './svg';
 export * from './theme';
 export * from './token';
 export * from './types';
+export * from './gradient-border';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,6 +1,7 @@
 export { getDatasetProps, getExternalUrlProps } from './dom/props/index.js';
 export { mapEdgeKeyToStandard } from './keyboard/index.js';
 export { currentHostname, currentHref } from './location/index.js';
+export { gradientBorder } from './gradient-border/index.js';
 export { colorSchemes } from './color-scheme/colorSchemes.js';
 export { ColorScheme } from './color-scheme/classes/ColorScheme.js';
 export { ColorSchemeProvider } from './color-scheme/providers/ColorSchemeProvider.js';
@@ -27,4 +28,4 @@ export { withTheme } from './theme/hocs/withTheme.js';
 export { getTokenVar } from './token/util/getTokenVar.js';
 export { useToken } from './token/hooks/useToken.js';
 export { withGetToken } from './token/hocs/withGetToken.js';
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preply/ds-web-core",
-    "version": "7.1.0",
+    "version": "8.0.0",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -13,21 +13,21 @@
     "browserslist": "last 2 versions",
     "scripts": {
         "clean": "rm -rf dist && rm -rf src/generated",
-        "test": "run check:types && run --top-level vitest --coverage --watch=false",
+        "test": "run check:types && run --top-level vitest --watch=false",
         "check:types": "run --top-level tsc --noEmit",
         "build": "NODE_ENV=production && run build:rollup",
         "build:rollup": "run --top-level rollup -c rollup.config.cjs",
         "dev": "run build:rollup -w"
     },
     "devDependencies": {
-        "@preply/ds-core": "7.1.0",
-        "@preply/ds-core-types": "7.1.0"
+        "@preply/ds-core": "8.0.0",
+        "@preply/ds-core-types": "8.0.0"
     },
     "peerDependencies": {
-        "@preply/ds-core": "7.1.0",
-        "@preply/ds-core-types": "7.1.0",
+        "@preply/ds-core": "8.0.0",
+        "@preply/ds-core-types": "8.0.0",
         "react": "^16 || ^18",
         "react-dom": "^16 || ^18"
     },
-    "gitHead": "3886be9e89f0f02d5c9236ec751afe00eb4a81b8"
+    "gitHead": "47adbb783c4acd244a24e509a859630151e66aec"
 }