[Bug]: Theming and nested rules

[hausdora]

Browser

No response

Package version

3.0.687

React version

18

Description

When generating a theme for build-time theming I get errors for some (or every?) design tokens. There are too many for me to view in my console but they all look like this:

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

   ┌──> node_modules/@cloudscape-design/components-themeable/lib/internal/scss/tutorial-panel/components/tutorial-list/motion.scss
13 │         animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
   ╵
   ┌──> node_modules/@cloudscape-design/components-themeable/lib/internal/scss/internal/styles/motion/animations.scss
9  │ ┌   @keyframes awsui-motion-fade-in {
10 │ │     from {
11 │ │       opacity: 0.2;
12 │ │     }
13 │ │ 
14 │ │     to {
15 │ │       opacity: 1;
16 │ │     }
17 │ │   }
   │ └─── nested rule

My theme.ts:

const path = require('path');
const {
  buildThemedComponents,
} = require('@cloudscape-design/components-themeable');

const theme = {
  tokens: {
    // Background colors
    colorBackgroundLayoutMain: {
      light: '#ffffff',
      dark: '#1b1b1b',
    },
  },
};

// module.exports = theme;

buildThemedComponents({
  theme,
  outputDir: path.join(__dirname, './styles/themed'),
});

Versions: "@cloudscape-design/component-toolkit": "^1.0.0-beta.58", "@cloudscape-design/components": "^3.0.687", "@cloudscape-design/components-themeable": "^3.0.729", "@cloudscape-design/design-tokens": "^3.0.43", "@cloudscape-design/global-styles": "^1.0.31",

Source code

Reproduction

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[just-boris]

Hello!

The "more info" link in the warning contains the info: https://sass-lang.com/d/mixed-decls

This is not an error it is a deprecation warning. We certainly should fix it on our end, but it should not block you because it is a warning only, the output is still fine