RC Updates

.github/workflows/lint.yaml

@@ -5,7 +5,7 @@ on:
       - master
       - rc-updates
       - rc-staged
-      
+
 jobs:
   run-linters:
     name: Run linters
@@ -41,3 +41,23 @@ jobs:
         run: |
           # Find all JSON files in dist directory and run validation
           npx jsonlint ./dist/**/*.json --no-duplicate-keys
+
+      - name: Check for [object Object] in SCSS
+        run: |
+          if grep -r '\[object Object\]' dist/scss; then
+            echo "Error: Found [object Object] in SCSS files."
+            exit 1
+          fi
+
+      - name: Compile SCSS
+        run: |
+          (
+            echo "@import 'global.scss';"
+            echo "@import 'dark.scss';"
+            echo "@import 'light.scss';"
+            for f in dist/scss/components/*.scss; do
+              fname=$(basename "$f")
+              echo "@import 'components/$fname';"
+            done
+          ) > dist/scss/index.scss
+          npx sass dist/scss/index.scss dist/scss/index.css

README.md

@@ -47,43 +47,109 @@ You can also add the files directly by downloading from the [releases page on Gi
 To make use of the css variables, import them into your code like so:
 
 ```css
-/* Inside css */
-@import "~@sage/design-tokens/css/<theme>.css";
+@import url("@sage/design-tokens/css/light.css");
+@import url("@sage/design-tokens/css/dark.css") (prefers-color-scheme: dark);
+@import url("@sage/design-tokens/css/components/button.css");
 ```
 
+**Note:** For manual theme switching in JavaScript applications, we recommend using the HTML `<link>` approach rather than dynamic imports to avoid bundler complexity. You can import the component css files in your JS like below.
+
 ```js
-// For projects where you can import css files into JS
-import "@sage/design-tokens/css/<theme>.css";
+import "@sage/design-tokens/css/components/button.css";
 ```
 
-This will add the variables to the root element of the page.
+```html
+<link rel="stylesheet" href="node_modules/@sage/design-tokens/css/light.css" id="app-theme">
+
+<script type="text/javascript">
+  function switchTheme(theme) {
+    document.getElementById('app-theme').href = 
+      `node_modules/@sage/design-tokens/css/${theme}.css`;
+  }
+
+  function updateTheme() {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    switchTheme(prefersDark ? "dark" : "light");
+  }
+
+  // Listen for system preference changes
+  window.matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", updateTheme);
+
+  // Set initial theme on content load
+  document.addEventListener("DOMContentLoaded", updateTheme);
+</script>
+```
 
 #### SCSS
 
-To make use of the scss variables, import them into your scss files like so:
+The SCSS format provides traditional Sass variables while handling mode switching through separate mode files. Due to variable naming conventions, loading both `light` and `dark` modes simultaneously would cause conflicts. To address this, dedicated mode files are provided.
+
+##### Available Files
+
+- Individual component files (e.g., `button.scss`, `container.scss`) - Available for granular imports
+- The `global`, `light` and `dark` tokens are also exported in their own files for granularity as well
+
+**Note:** The current SCSS output requires the use of `@import` statements to ensure variables are properly scoped across files. While `@import` will be deprecated when Dart Sass 3.0.0 is released, we will endeavor to update our output format to support the modern `@use` module system before that release.
+
+To suppress deprecation warnings during compilation, add the `--silence-deprecation=import` flag to your Sass build command.
+
+##### Light and Dark Mode Support with Granular Imports
+
+Import specific components when you only need certain tokens and create separate CSS files for each mode:
 
 ```scss
-@use '~@sage/design-tokens/scss/<theme>.scss';
+// button-light.scss
+@import "@sage/design-tokens/scss/global.scss";
+@import "@sage/design-tokens/scss/light.scss";
+@import "@sage/design-tokens/scss/components/button.scss";
+
+.button-destructive-primary {
+  background-color: $button-destructive-primary-bg-default;
+
+  &:hover {
+    background-color: $button-destructive-primary-bg-hover;
+  }
+}
 ```
 
-You can also use `@import`, but for scss this is [being deprecated](https://sass-lang.com/documentation/at-rules/import) in favour of `@use`;
+```scss
+// button-dark.scss
+@import "@sage/design-tokens/scss/global.scss";
+@import "@sage/design-tokens/scss/dark.scss";
+@import "@sage/design-tokens/scss/components/button.scss";
+
+.button-destructive-primary {
+  background-color: $button-destructive-primary-bg-default;
+
+  &:hover {
+    background-color: $button-destructive-primary-bg-hover;
+  }
+}
+```
+
+Build process:
+```bash
+sass button-light.scss:button-light.css --no-source-map --silence-deprecation=import
+
+sass button-dark.scss:button-dark.css --no-source-map --silence-deprecation=import
+```
 
 #### Common JS module
 
 ```js
-const tokens = require('@sage/design-tokens/js/<theme>/common')
+const commonTokens = require("@sage/design-tokens/js/common");
+const buttonTokens = commonTokens.button;
 
-// Then use in code:
-element.style.color = tokens.colorsBase500
+element.style.backgroundColor = buttonTokens.buttonDestructivePrimaryBgDefault;
 ```
 
 #### ES6 module
 
 ```js
-import tokens from "@sage/design-tokens/js/<theme>/es6";
-
-// Then use in code:
-element.style.color = tokens.colorsBase500
+import { button } from "@sage/design-tokens/js/es6";
+
+element.style.backgroundColor = button.buttonDestructivePrimaryBgDefault;
 ```
 
 A type definition file is also included to work in projects with typescript installed.
@@ -108,4 +174,4 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-Copyright (c) 2024 Sage Group Plc. All rights reserved.
+Copyright (c) 2025 Sage Group Plc. All rights reserved.

data/tokens/$metadata.json

@@ -1,34 +1,31 @@
 {
   "tokenSetOrder": [
-    "primitives",
+    "core",
     "global/borderwidth",
-    "global/shadow",
+    "global/modifier",
     "global/radius",
+    "global/shadow",
     "global/size",
     "global/space",
-    "global/typography",
-    "modes/light",
-    "modes/dark",
+    "global/font",
+    "mode/light",
+    "mode/dark",
     "components/badge",
     "components/button",
     "components/container",
     "components/dataviz",
     "components/focus",
-    "components/form",
+    "components/input",
     "components/link",
     "components/logo",
+    "components/message",
     "components/nav",
     "components/page",
+    "components/pill",
+    "components/progress",
     "components/popover",
     "components/profile",
-    "components/progress",
-    "components/status",
     "components/tab",
-    "components/table",
-    "components/typography",
-    "context/product",
-    "context/frozenproduct",
-    "screensize/large",
-    "screensize/small"
+    "components/table"
   ]
 }