slippers-ui 3.3.7-alpha.2 → 3.3.8-alpha.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 (2) hide show
  1. package/package.json +7 -9
  2. package/src/styles/_variables.scss +31 -4
package/package.json CHANGED
@@ -2,8 +2,7 @@
2
2
  "name": "slippers-ui",
3
3
  "description": "GitLab Marketing Design System",
4
4
  "author": "GitLab",
5
- "version": "3.3.7-alpha.2",
6
- "packageManager": "pnpm@10.28.1",
5
+ "version": "3.3.8-alpha.1",
7
6
  "engines": {
8
7
  "node": "24.12.0",
9
8
  "pnpm": "10.28.1"
@@ -44,12 +43,6 @@
44
43
  "type": "git",
45
44
  "url": "git+https://gitlab.com/gitlab-com/marketing/digital-experience/slippers-ui.git"
46
45
  },
47
- "scripts": {
48
- "prepublishOnly": "node ./scripts/add-icons.mjs",
49
- "dev": "storybook dev",
50
- "storybook": "storybook",
51
- "build": "vite build && vite build --config vite.icons.config.ts"
52
- },
53
46
  "peerDependencies": {
54
47
  "vue": "^3.5.27"
55
48
  },
@@ -66,5 +59,10 @@
66
59
  "typescript": "^5.9.3",
67
60
  "vite": "^7.3.1",
68
61
  "vue": "^3.5.27"
62
+ },
63
+ "scripts": {
64
+ "dev": "storybook dev",
65
+ "storybook": "storybook",
66
+ "build": "vite build && vite build --config vite.icons.config.ts"
69
67
  }
70
- }
68
+ }
package/src/styles/_variables.scss CHANGED
@@ -140,15 +140,42 @@ $color-surface-gradient-duo-background: linear-gradient(0deg, rgba(225, 152, 109
140
140
  $color-surface-gradient-accent: linear-gradient(89.09deg, #e1986d -1.12%, $color-accent-500 102.06%, #6e43d3 102.07%);
141
141
 
142
142
 
143
+ // Background recipes
144
+ $bg-dots-on-white: radial-gradient(circle, rgba($color-surface-700, 0.13) 1.6px, transparent 2.4px) center center / 15px 15px repeat;
145
+
146
+ $bg-dots-on-grey: $bg-dots-on-white, $color-surface-100;
147
+
148
+ $bg-dots-on-dark:
149
+ linear-gradient(
150
+ 180deg,
151
+ rgba($color-surface-700, 0) 0,
152
+ rgba($color-surface-700, 0) 179px,
153
+ $color-surface-700 822px,
154
+ $color-surface-700 100%
155
+ )
156
+ center top / 100% 100% no-repeat,
157
+ radial-gradient(circle, rgba($color-surface-50, 0.16) 1.6px, transparent 2.4px) center top / 15px 15px repeat,
158
+ $color-surface-700;
159
+
160
+ $bg-po-gradient-blob: radial-gradient(ellipse 60% 55% at 25% 25%, rgba(255, 15, 125, 0.95) 0%, transparent 70%),
161
+ radial-gradient(ellipse 85% 130% at 72% 60%, rgba($color-accent-200, 0.95) 0%, transparent 65%) $color-surface-100;
162
+
163
+ $bg-po-gradient-full: url("data:image/svg+xml,%3Csvg width='721' height='899' viewBox='0 0 721 899' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_177_783)'%3E%3Crect width='1987.06' height='1248' transform='translate(-442.426 -1)' fill='%23EDECEF'/%3E%3Cg filter='url(%23filter0_f_177_783)'%3E%3Ccircle cx='1212.11' cy='716.019' r='257.379' transform='rotate(15 1212.11 716.019)' fill='url(%23paint0_linear_177_783)'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_177_783)'%3E%3Cellipse cx='1173.24' cy='861.107' rx='167.403' ry='62.0362' transform='rotate(15 1173.24 861.107)' fill='%23FFB89A'/%3E%3C/g%3E%3Cg filter='url(%23filter2_f_177_783)'%3E%3Cpath d='M92.0109 420.946C68.6002 370.884 108.161 314.253 163.221 319.01L1455.86 430.675C1510.92 435.432 1540.18 498.008 1508.53 543.313L765.51 1606.94C733.861 1652.24 665.036 1646.3 641.625 1596.24L92.0109 420.946Z' fill='%23FCA326'/%3E%3C/g%3E%3Cg filter='url(%23filter3_f_177_783)'%3E%3Cpath d='M193.04 457.411C176.393 429.565 200.455 395.12 232.329 401.169L1508.44 643.367C1535.24 648.454 1547.88 679.487 1532.25 701.848L922.634 1574.51C907.012 1596.87 873.526 1595.68 859.529 1572.27L193.04 457.411Z' fill='%23FC6D26'/%3E%3C/g%3E%3Cg filter='url(%23filter4_f_177_783)'%3E%3Cpath d='M337.765 545.517C323.756 527.012 341.647 501.402 363.842 508.188L1406.99 827.146C1422.52 831.896 1428.91 850.417 1419.61 863.735L1034.87 1414.48C1025.56 1427.8 1005.98 1428.18 996.169 1415.22L337.765 545.517Z' fill='%23E24329'/%3E%3C/g%3E%3Cg filter='url(%23filter5_f_177_783)'%3E%3Ccircle cx='127.091' cy='84.0024' r='534.206' transform='rotate(-180 127.091 84.0024)' fill='url(%23paint1_linear_177_783)'/%3E%3C/g%3E%3Cg filter='url(%23filter6_f_177_783)'%3E%3Ccircle cx='127.091' cy='84.0024' r='529.298' transform='rotate(-180 127.091 84.0024)' stroke='%23FF1493' stroke-width='9.81769'/%3E%3C/g%3E%3Cg filter='url(%23filter7_f_177_783)'%3E%3Cellipse cx='127.095' cy='-227.758' rx='347.455' ry='128.76' transform='rotate(-180 127.095 -227.758)' fill='%23FFB89A'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_177_783' x='661.933' y='165.838' width='1100.36' height='1100.36' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='146.369' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter1_f_177_783' x='717.993' y='494.418' width='910.487' height='733.377' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='146.369' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter2_f_177_783' x='-248.174' y='-14.5863' width='2103.05' height='1985.52' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='166.658' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter3_f_177_783' x='-120.064' y='92.7949' width='1966.8' height='1805.46' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='153.838' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter4_f_177_783' x='-9.05524' y='165.21' width='1774.85' height='1601.36' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='170.931' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter5_f_177_783' x='-699.852' y='-742.942' width='1653.89' height='1653.89' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='146.369' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter6_f_177_783' x='-507.115' y='-550.204' width='1268.41' height='1268.41' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='49.0884' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3Cfilter id='filter7_f_177_783' x='-513.098' y='-649.256' width='1280.39' height='842.995' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='146.369' result='effect1_foregroundBlur_177_783'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_177_783' x1='1212.11' y1='458.64' x2='1212.11' y2='973.398' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF1493'/%3E%3Cstop offset='0.600962' stop-color='%23FF6B35'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_177_783' x1='127.091' y1='-450.204' x2='127.091' y2='618.209' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF1493'/%3E%3Cstop offset='0.600962' stop-color='%23FF6B35'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_177_783'%3E%3Crect width='1987.06' height='1248' fill='white' transform='translate(-442.426 -1)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center center / cover;
164
+
165
+ $bg-po-gradient-partial: url("data:image/svg+xml,%3Csvg width='1240' height='976' viewBox='0 0 1240 976' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1162_40638)'%3E%3Crect width='1950' height='1481' transform='translate(-325 -25)' fill='%23EDECEF'/%3E%3Cg filter='url(%23filter0_f_1162_40638)'%3E%3Ccircle cx='1299.05' cy='678.805' r='252.636' transform='rotate(15 1299.05 678.805)' fill='url(%23paint0_linear_1162_40638)'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_1162_40638)'%3E%3Ccircle cx='1299.05' cy='678.805' r='247.818' transform='rotate(15 1299.05 678.805)' stroke='%23FF1493' stroke-width='9.63675'/%3E%3C/g%3E%3Cg filter='url(%23filter2_f_1162_40638)'%3E%3Cellipse cx='1260.89' cy='821.219' rx='164.318' ry='60.8929' transform='rotate(15 1260.89 821.219)' fill='%23FFB89A'/%3E%3C/g%3E%3Cg filter='url(%23filter3_f_1162_40638)'%3E%3Cpath d='M199.587 389.169C176.608 340.031 215.44 284.443 269.485 289.112L1538.3 398.72C1592.35 403.389 1621.07 464.812 1590.01 509.282L860.673 1553.31C829.608 1597.78 762.052 1591.94 739.072 1542.8L199.587 389.169Z' fill='%23FCA326'/%3E%3C/g%3E%3Cg filter='url(%23filter4_f_1162_40638)'%3E%3Cpath d='M298.754 424.962C282.414 397.629 306.032 363.82 337.319 369.757L1589.91 607.492C1616.22 612.484 1628.62 642.945 1613.29 664.895L1014.9 1521.47C999.568 1543.42 966.699 1542.26 952.96 1519.27L298.754 424.962Z' fill='%23FC6D26'/%3E%3C/g%3E%3Cg filter='url(%23filter5_f_1162_40638)'%3E%3Cpath d='M440.812 511.445C427.062 493.281 444.623 468.143 466.409 474.804L1490.33 787.884C1505.58 792.546 1511.85 810.725 1502.72 823.798L1125.07 1364.4C1115.93 1377.47 1096.71 1377.84 1087.08 1365.12L440.812 511.445Z' fill='%23E24329'/%3E%3C/g%3E%3Cg filter='url(%23filter6_f_1162_40638)'%3E%3Ccircle cx='234.022' cy='58.4365' r='524.361' transform='rotate(-180 234.022 58.4365)' fill='url(%23paint1_linear_1162_40638)'/%3E%3C/g%3E%3Cg filter='url(%23filter7_f_1162_40638)'%3E%3Ccircle cx='234.02' cy='58.3618' r='519.543' transform='rotate(-180 234.02 58.3618)' stroke='%23FF1493' stroke-width='9.63675'/%3E%3C/g%3E%3Cg filter='url(%23filter8_f_1162_40638)'%3E%3Cellipse cx='234.025' cy='-247.579' rx='341.052' ry='126.387' transform='rotate(-180 234.025 -247.579)' fill='%23FFB89A'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_1162_40638' x='759.006' y='138.763' width='1080.08' height='1080.08' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='143.671' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter1_f_1162_40638' x='946.349' y='326.106' width='705.396' height='705.397' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='48.1838' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter2_f_1162_40638' x='814.032' y='461.288' width='893.708' height='719.861' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='143.671' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter3_f_1162_40638' x='-134.329' y='-38.3361' width='2064.3' height='1948.93' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='163.586' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter4_f_1162_40638' x='-8.5806' y='67.0659' width='1930.56' height='1772.19' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='151.003' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter5_f_1162_40638' x='100.385' y='138.146' width='1742.14' height='1571.85' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='167.781' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter6_f_1162_40638' x='-577.682' y='-753.267' width='1623.41' height='1623.41' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='143.671' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter7_f_1162_40638' x='-390.342' y='-566' width='1248.72' height='1248.72' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='48.1838' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3Cfilter id='filter8_f_1162_40638' x='-394.369' y='-661.308' width='1256.79' height='827.459' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='143.671' result='effect1_foregroundBlur_1162_40638'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_1162_40638' x1='1299.05' y1='426.169' x2='1299.05' y2='931.441' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF1493'/%3E%3Cstop offset='0.600962' stop-color='%23FF6B35'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_1162_40638' x1='234.022' y1='-465.925' x2='234.022' y2='582.798' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF1493'/%3E%3Cstop offset='0.600962' stop-color='%23FF6B35'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_1162_40638'%3E%3Crect width='1950' height='1481' fill='white' transform='translate(-325 -25)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center center / cover;
166
+
167
+ $bg-po-gradient-border: url("data:image/svg+xml,%3Csvg width='1440' height='584' viewBox='0 0 1440 584' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2788_22869)'%3E%3Crect width='1440' height='584' fill='white'/%3E%3Crect x='-96' y='-110' width='1632' height='1026' rx='59.0873' fill='%23EDECEF'/%3E%3Cg filter='url(%23filter0_f_2788_22869)'%3E%3Cpath d='M705.093 548.282C500.026 393.66 83.0876 460.741 -102.985 517.758L-72.4531 822.231L1528.02 661.738L1468.6 69.2097C1028.02 160.626 1113.62 402.794 1100.11 508.67C1092.84 565.68 1041.64 632.12 975.77 646.766C909.903 661.411 826.963 640.173 705.093 548.282Z' fill='url(%23paint0_radial_2788_22869)'/%3E%3C/g%3E%3Cg filter='url(%23filter1_f_2788_22869)'%3E%3Cpath d='M779.021 670.794C547.772 496.587 77.5631 572.213 -132.286 636.478L-97.8828 979.553L1707.06 798.556L1640.11 130.905C1143.24 233.954 1239.75 506.82 1224.51 626.121C1216.3 690.361 1158.55 765.23 1084.27 781.739C1009.98 798.247 916.451 774.324 779.021 670.794Z' fill='url(%23paint1_linear_2788_22869)'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_2788_22869' x='-297.984' y='-125.79' width='2021' height='1143.02' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='97.5' result='effect1_foregroundBlur_2788_22869'/%3E%3C/filter%3E%3Cfilter id='filter1_f_2788_22869' x='-232.285' y='30.9045' width='2039.35' height='1048.65' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='25' result='effect1_foregroundBlur_2788_22869'/%3E%3C/filter%3E%3CradialGradient id='paint0_radial_2788_22869' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(698.075 445.72) rotate(-95.7264) scale(297.75 804.25)'%3E%3Cstop stop-color='%23FF1493'/%3E%3Cstop offset='1' stop-color='%23FCA326'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint1_linear_2788_22869' x1='1026.96' y1='806.933' x2='854.877' y2='392.373' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23E24329'/%3E%3Cstop offset='1' stop-color='%23FC6D26'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_2788_22869'%3E%3Crect width='1440' height='584' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center bottom / cover;
168
+
169
+
143
170
  /*
144
- _____ _
145
- / ____| (_)
146
- | (___ _ __ __ _ ___ _ _ __ __ _
171
+ _____ _
172
+ / ____| (_)
173
+ | (___ _ __ __ _ ___ _ _ __ __ _
147
174
  \___ \| '_ \ / _` |/ __| | '_ \ / _` |
148
175
  ____) | |_) | (_| | (__| | | | | (_| |
149
176
  |_____/| .__/ \__,_|\___|_|_| |_|\__, |
150
177
  | | __/ |
151
- |_| |___/
178
+ |_| |___/
152
179
  */
153
180
 
154
181
  $spacing-default: 16px !default;