@fluentui/react-theme-sass 9.0.0-alpha.29 → 9.0.0-alpha.30

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-theme-sass
 
-This log was last generated on Mon, 11 Nov 2024 10:01:01 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Jan 2026 17:01:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-sass_v9.0.0-alpha.30)
+
+Thu, 22 Jan 2026 17:01:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme-sass_v9.0.0-alpha.29..@fluentui/react-theme-sass_v9.0.0-alpha.30)
+
+### Changes
+
+- chore(tokens): Add CAP DR tokens ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by jukapsia@microsoft.com)
+
 ## [9.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme-sass_v9.0.0-alpha.26)
 
 Mon, 11 Nov 2024 10:01:01 GMT 

package/README.md

@@ -10,14 +10,14 @@ SASS variables referencing react-theme design tokens injected to DOM by react-pr
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import { FluentProvider, teamsLightTheme } from '@fluentui/react-components';
 import App from './App';
-ReactDOM.render(
+
+ReactDOMClient.createRoot(document.getElementById('root')).render(
   <FluentProvider theme={teamsLightTheme}>
     <App />
   </FluentProvider>,
-  document.getElementById('root'),
 );
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-theme-sass",
-  "version": "9.0.0-alpha.29",
+  "version": "9.0.0-alpha.30",
   "description": "SASS variables referencing react-theme design tokens injected to DOM by react-provider.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,6 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-theme": "*",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "beachball": {
     "disallowedChangeTypes": [
       "major",

package/sass/borderRadiusTokens.scss

@@ -3,4 +3,9 @@ $borderRadiusSmall: var(--borderRadiusSmall);
 $borderRadiusMedium: var(--borderRadiusMedium);
 $borderRadiusLarge: var(--borderRadiusLarge);
 $borderRadiusXLarge: var(--borderRadiusXLarge);
+$borderRadius2XLarge: var(--borderRadius2XLarge);
+$borderRadius3XLarge: var(--borderRadius3XLarge);
+$borderRadius4XLarge: var(--borderRadius4XLarge);
+$borderRadius5XLarge: var(--borderRadius5XLarge);
+$borderRadius6XLarge: var(--borderRadius6XLarge);
 $borderRadiusCircular: var(--borderRadiusCircular);

package/sass/colorTokens.scss

@@ -17,6 +17,10 @@ $colorNeutralForeground3BrandHover: var(--colorNeutralForeground3BrandHover);
 $colorNeutralForeground3BrandPressed: var(--colorNeutralForeground3BrandPressed);
 $colorNeutralForeground3BrandSelected: var(--colorNeutralForeground3BrandSelected);
 $colorNeutralForeground4: var(--colorNeutralForeground4);
+$colorNeutralForeground5: var(--colorNeutralForeground5);
+$colorNeutralForeground5Hover: var(--colorNeutralForeground5Hover);
+$colorNeutralForeground5Pressed: var(--colorNeutralForeground5Pressed);
+$colorNeutralForeground5Selected: var(--colorNeutralForeground5Selected);
 $colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled);
 $colorNeutralForegroundInvertedDisabled: var(--colorNeutralForegroundInvertedDisabled);
 $colorBrandForegroundLink: var(--colorBrandForegroundLink);
@@ -74,7 +78,15 @@ $colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover);
 $colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed);
 $colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected);
 $colorNeutralBackground6: var(--colorNeutralBackground6);
+$colorNeutralBackground7: var(--colorNeutralBackground7);
+$colorNeutralBackground7Hover: var(--colorNeutralBackground7Hover);
+$colorNeutralBackground7Pressed: var(--colorNeutralBackground7Pressed);
+$colorNeutralBackground7Selected: var(--colorNeutralBackground7Selected);
+$colorNeutralBackground8: var(--colorNeutralBackground8);
 $colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted);
+$colorNeutralBackgroundInvertedHover: var(--colorNeutralBackgroundInvertedHover);
+$colorNeutralBackgroundInvertedPressed: var(--colorNeutralBackgroundInvertedPressed);
+$colorNeutralBackgroundInvertedSelected: var(--colorNeutralBackgroundInvertedSelected);
 $colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic);
 $colorNeutralBackgroundAlpha: var(--colorNeutralBackgroundAlpha);
 $colorNeutralBackgroundAlpha2: var(--colorNeutralBackgroundAlpha2);
@@ -94,6 +106,7 @@ $colorTransparentBackgroundHover: var(--colorTransparentBackgroundHover);
 $colorTransparentBackgroundPressed: var(--colorTransparentBackgroundPressed);
 $colorTransparentBackgroundSelected: var(--colorTransparentBackgroundSelected);
 $colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled);
+$colorNeutralBackgroundDisabled2: var(--colorNeutralBackgroundDisabled2);
 $colorNeutralBackgroundInvertedDisabled: var(--colorNeutralBackgroundInvertedDisabled);
 $colorNeutralStencil1: var(--colorNeutralStencil1);
 $colorNeutralStencil2: var(--colorNeutralStencil2);
@@ -133,6 +146,10 @@ $colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed);
 $colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected);
 $colorNeutralStroke2: var(--colorNeutralStroke2);
 $colorNeutralStroke3: var(--colorNeutralStroke3);
+$colorNeutralStroke4: var(--colorNeutralStroke4);
+$colorNeutralStroke4Hover: var(--colorNeutralStroke4Hover);
+$colorNeutralStroke4Pressed: var(--colorNeutralStroke4Pressed);
+$colorNeutralStroke4Selected: var(--colorNeutralStroke4Selected);
 $colorNeutralStrokeSubtle: var(--colorNeutralStrokeSubtle);
 $colorNeutralStrokeOnBrand: var(--colorNeutralStrokeOnBrand);
 $colorNeutralStrokeOnBrand2: var(--colorNeutralStrokeOnBrand2);
@@ -148,6 +165,7 @@ $colorCompoundBrandStroke: var(--colorCompoundBrandStroke);
 $colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover);
 $colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed);
 $colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled);
+$colorNeutralStrokeDisabled2: var(--colorNeutralStrokeDisabled2);
 $colorNeutralStrokeInvertedDisabled: var(--colorNeutralStrokeInvertedDisabled);
 $colorTransparentStroke: var(--colorTransparentStroke);
 $colorTransparentStrokeInteractive: var(--colorTransparentStrokeInteractive);