slippers-ui 3.3.5 → 3.3.6-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 +1 -1
  2. package/src/styles/_variables.scss +51 -4
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "slippers-ui",
3
3
  "description": "GitLab Marketing Design System",
4
4
  "author": "GitLab",
5
- "version": "3.3.5",
5
+ "version": "3.3.6-alpha.1",
6
6
  "engines": {
7
7
  "node": "24.12.0",
8
8
  "pnpm": "10.28.1"
package/src/styles/_variables.scss CHANGED
@@ -140,15 +140,62 @@ $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
+ //
145
+ // Multi-layer background recipes for decorative section/card surfaces.
146
+ // Apply via the shorthand `background:` property — each token is a complete value.
147
+ //
148
+ // Dot recipes reproduce the legacy lbrdsz / qmtr / 64-64-64-dot Cloudinary assets in pure CSS.
149
+ // "Warm" tokens use inlined SVG data URIs to keep pixel-perfect parity with the original artwork
150
+ // while eliminating the network fetch.
151
+
152
+ // Light dot primitive — dark dots on transparent. Compose with masks, blend modes, or alternate
153
+ // surfaces (e.g. a :before overlay where the parent already owns the background color).
154
+ $bg-dots-light: radial-gradient(circle, rgba($color-surface-700, 0.13) 1.6px, transparent 2.4px) center center / 15px 15px repeat;
155
+
156
+ // Light dot primitive layered on a $color-surface-100 card surface. For self-contained card backgrounds.
157
+ $bg-dots-light-card: $bg-dots-light, $color-surface-100;
158
+
159
+ // Dark surface with light dots and a vertical fade to opaque $color-surface-700.
160
+ // Used on tall hero sections where the dots should fade out below the fold.
161
+ $bg-dots-dark:
162
+ linear-gradient(
163
+ 180deg,
164
+ rgba($color-surface-700, 0) 0,
165
+ rgba($color-surface-700, 0) 179px,
166
+ $color-surface-700 822px,
167
+ $color-surface-700 100%
168
+ )
169
+ center top / 100% 100% no-repeat,
170
+ radial-gradient(circle, rgba($color-surface-50, 0.16) 1.6px, transparent 2.4px) center top / 15px 15px repeat,
171
+ $color-surface-700;
172
+
173
+ // Vibrant pink → orange blob. Pure CSS layered radial-gradients (no SVG fetch).
174
+ // Hot pink top-left, saturated orange covering right and bottom.
175
+ $bg-warm-blob: radial-gradient(ellipse 60% 55% at 25% 25%, rgba(255, 15, 125, 0.95) 0%, transparent 70%),
176
+ radial-gradient(ellipse 85% 130% at 72% 60%, rgba($color-accent-200, 0.95) 0%, transparent 65%) $color-surface-100;
177
+
178
+ // Coral-dominant pink → orange gradient. SVG data URI, side-panel or full-bleed hero backdrop.
179
+ $bg-warm-coral: 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;
180
+
181
+ // Pink → orange diagonal gradient blob. SVG data URI, designed as decorative outer "border"
182
+ // when a centered card sits on top with padding revealing the gradient at the edges.
183
+ $bg-warm-border: 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;
184
+
185
+ // Soft warm glow on a light surface — pink-coral on the left, red-orange on the right.
186
+ // SVG data URI, anchored to the bottom of the section. Designed for footer-style CTAs.
187
+ $bg-warm-glow: 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;
188
+
189
+
143
190
  /*
144
- _____ _
145
- / ____| (_)
146
- | (___ _ __ __ _ ___ _ _ __ __ _
191
+ _____ _
192
+ / ____| (_)
193
+ | (___ _ __ __ _ ___ _ _ __ __ _
147
194
  \___ \| '_ \ / _` |/ __| | '_ \ / _` |
148
195
  ____) | |_) | (_| | (__| | | | | (_| |
149
196
  |_____/| .__/ \__,_|\___|_|_| |_|\__, |
150
197
  | | __/ |
151
- |_| |___/
198
+ |_| |___/
152
199
  */
153
200
 
154
201
  $spacing-default: 16px !default;