Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Fix(web): Prevent Skeleton SCSS from failing if tokens are not found #DS-1692 #1964

Merged
merged 1 commit into from
Mar 6, 2025
+77 −57
Merged

Fix(web): Prevent Skeleton SCSS from failing if tokens are not found #DS-1692 #1964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/web/DEPRECATIONS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ The direction values `row` and `column` were removed, please use `horizontal` an

The `Header` component was removed, please use `UNSTABLE_Header` component instead.

### Skeleton

The check for the existence of the `skeleton-gradient` token will be removed. Ensure that the skeleton-gradient token is properly set up in your project, as if you import all components, the project will not run without it.

👉 [What are deprecations?][readme-deprecations]

[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#deprecations
6 changes: 6 additions & 0 deletions packages/web/src/scss/components/Skeleton/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,9 @@ Use CSS custom properties to define the width, height, and radius of the shape.
style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px"
></div>
```

⚠️ Make sure that you have properly set up the `skeleton-gradient` token in your project. Without it, Skeleton will not be available.

### ⚠️ DEPRECATION NOTICE

The check for the existence of the `skeleton-gradient` token is deprecated and will be removed in the next major release. Ensure that the `skeleton-gradient` token is properly set up in your project, as if you import all components, the project will not run without it.
116 changes: 61 additions & 55 deletions packages/web/src/scss/components/Skeleton/_Skeleton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,84 @@
@use 'sass:map';
@use 'sass:meta';
@use '@tokens' as tokens;
@use '../../tools/breakpoint';
@use '../../tools/responsive-properties';
@use 'theme';
@use 'tools';

.Skeleton {
width: 100%;
}
// @deprecated We are deprecating `gradient-skeleton` token check.
// In the next major version, we can be sure the required token will be present so no check will be needed.
@if map.has-key(meta.module-variables(tokens), 'gradient-skeleton') {
.Skeleton {
width: 100%;
}

.Skeleton--text {
@include tools.generate-item-sizes(
$class-name: 'Skeleton',
$sizes: tools.generate-text-sizes(theme.$sizes-body, 'mobile')
);
}
.Skeleton--text {
@include tools.generate-item-sizes(
$class-name: 'Skeleton',
$sizes: tools.generate-text-sizes(theme.$sizes-body, 'mobile')
);
}

.Skeleton--heading {
@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
@include breakpoint.up($breakpoint-value) {
@include tools.generate-item-sizes(
$class-name: 'Skeleton',
$sizes: tools.generate-text-sizes(theme.$sizes-heading, $breakpoint-name)
);
.Skeleton--heading {
@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
@include breakpoint.up($breakpoint-value) {
@include tools.generate-item-sizes(
$class-name: 'Skeleton',
$sizes: tools.generate-text-sizes(theme.$sizes-heading, $breakpoint-name)
);
}
}
}
}

.Skeleton--shape {
display: inline-flex;
flex-shrink: 0;
width: var(--#{tokens.$css-variable-prefix}skeleton-shape-width);
height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height);
border: theme.$shape-border-width solid theme.$shape-border-color;
.Skeleton--shape {
display: inline-flex;
flex-shrink: 0;
width: var(--#{tokens.$css-variable-prefix}skeleton-shape-width);
height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height);
border: theme.$shape-border-width solid theme.$shape-border-color;

@include responsive-properties.create-cascade(
$property: 'border-radius',
$input-custom-property-base-name: '#{tokens.$css-variable-prefix}skeleton-shape-radius',
$breakpoints: theme.$breakpoints,
$fallback-value: theme.$shape-default-border-radius
);
}
@include responsive-properties.create-cascade(
$property: 'border-radius',
$input-custom-property-base-name: '#{tokens.$css-variable-prefix}skeleton-shape-radius',
$breakpoints: theme.$breakpoints,
$fallback-value: theme.$shape-default-border-radius
);
}

.Skeleton__item,
.Skeleton--shape {
background: theme.$item-gradient;
background-size: 600% 600%;
.Skeleton__item,
.Skeleton--shape {
background: theme.$item-gradient;
background-size: 600% 600%;

@media (prefers-reduced-motion: no-preference) {
animation: skeleton-loading 2.5s infinite;
@media (prefers-reduced-motion: no-preference) {
animation: skeleton-loading 2.5s infinite;
}
}
}

.Skeleton--text > .Skeleton__item,
.Skeleton--heading > .Skeleton__item {
display: block;
width: 100%;
height: var(--#{tokens.$css-variable-prefix}skeleton-height, #{theme.$typography-default-height});
border-radius: theme.$typography-border-radius;
.Skeleton--text > .Skeleton__item,
.Skeleton--heading > .Skeleton__item {
display: block;
width: 100%;
height: var(--#{tokens.$css-variable-prefix}skeleton-height, #{theme.$typography-default-height});
border-radius: theme.$typography-border-radius;

&:not(:last-child) {
margin-bottom: theme.$margin-bottom;
}
&:not(:last-child) {
margin-bottom: theme.$margin-bottom;
}

&:last-child:not(:only-child) {
width: 80%;
&:last-child:not(:only-child) {
width: 80%;
}
}
}

@keyframes skeleton-loading {
0% {
background-position: 100% 50%;
}
@keyframes skeleton-loading {
0% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
100% {
background-position: 0 50%;
}
}
}
6 changes: 5 additions & 1 deletion packages/web/src/scss/components/Skeleton/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
@use '@tokens' as tokens;
@use '../../tools/tokens' as tokens-tools;
@use 'tools';

$margin-bottom: tokens.$space-400;
$item-gradient: tokens.$gradient-skeleton;

// @deprecated We are deprecating the usage of the 'get-variable-if-exists' function.
// In the next major version, we can be sure the required token will be present so no check will be needed.
$item-gradient: tokens-tools.get-variable-if-exists('gradient-skeleton');
$breakpoints: tokens.$breakpoints;

$typography-border-radius: tokens.$radius-300;
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/scss/tools/_tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}
}

@function get-variable-if-exists($variable-name, $fallback-value) {
@function get-variable-if-exists($variable-name, $fallback-value: '') {
@if map.has-key(meta.module-variables(tokens), $variable-name) {
@return map.get(meta.module-variables(tokens), $variable-name);
} @else {
Expand Down
Loading