refactor(themes): use .dark selector instead of html.dark (#182)

## Description

Use `.dark` selector for the dark theme instead of `html.dark`.
Similarly we could use e.g. `.onyx-lidl`, `.onyx-kaufland` for our
future themes. This will give us more flexibility because it allows us
to use a specific theme only for a single component (e.g. by setting
`class="onyx-lidl"` on a `<div>`.

.changeset/small-rats-swim.md

@@ -0,0 +1,23 @@
+---
+"@sit-onyx/figma-utils": major
+---
+
+feat: support {mode} placeholder for CSS selector
+
+Previously the mode name was automatically appended to the selector if the selector was
+something other than `:root`. This is no longer the case.
+Instead use the more explicit/flexible placeholder `{mode}` for this.
+
+**Old**
+
+```sh
+npx @sit-onyx/figma-utils import-variables -k "your-file-key" -t "your-token" -m dark -s html
+# resulted in selector "html.dark"
+```
+
+**New**
+
+```sh
+npx @sit-onyx/figma-utils import-variables -k "your-file-key" -t "your-token" -m dark -s html.{mode}
+# results in selector "html.dark"
+```

.github/workflows/import-figma.yml

@@ -37,7 +37,7 @@ jobs:
 
       - name: Import dark variables
         run: |
-          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles" -m dark -s html
+          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles" -m dark -s .{mode}
         working-directory: packages/figma-utils
 
       - name: Create pull request

packages/figma-utils/src/commands/import-variables.ts

@@ -40,7 +40,7 @@ export const importCommand = new Command("import-variables")
   )
   .option(
     "-s, --selector <string>",
-    'CSS selector to use for the CSS format. The mode name will be added to the selector if it is set to something other than ":root", e.g. for the mode named "dark", passing the selector "html" will result in "html.dark"',
+    'CSS selector to use for the CSS format. You can use {mode} as placeholder for the mode name, so e.g. for the mode named "dark", passing the selector "html.{mode}" will result in "html.dark"',
     ":root",
   )
   .action(importCommandAction);

packages/figma-utils/src/utils/generate.spec.ts

@@ -32,15 +32,15 @@ describe("generate.ts", () => {
 `);
   });
 
-  test("should generate as CSS with custom selector", () => {
-    const fileContent = generateAsCSS(mockData, { selector: "html" });
+  test("should generate as CSS with custom selector and replace mode placeholder", () => {
+    const fileContent = generateAsCSS(mockData, { selector: "html.{mode}, .selector-{mode}" });
 
     expect(fileContent).toBe(`/**
  * Do not edit directly.
  * This file contains the specific variables for the "test-mode-1" theme.
  * Imported from Figma API on Sun, 07 Jan 2024 13:42:00 GMT
  */
-html.test-mode-1 {
+html.test-mode-1, .selector-test-mode-1 {
   --test-1: #ffffff;
   --test-2: 1rem;
   --test-3: var(--test-2);

packages/figma-utils/src/utils/generate.ts

@@ -12,12 +12,11 @@ export type BaseGenerateOptions = {
 
 export type GenerateAsCSSOptions = BaseGenerateOptions & {
   /**
-   * Selector to use for the CSS format. The mode name will be added to the selector
-   * if it is set to something other than ":root"
+   * Selector to use for the CSS format. You can use {mode} as placeholder for the mode name.
    *
    * @default ":root"
    * @example
-   * for the mode named "dark", passing the selector "html" will result in "html.dark"
+   * for the mode named "dark", passing the selector "html.{mode}" will result in "html.dark"
    */
   selector?: string;
 };
@@ -37,8 +36,8 @@ export const generateAsCSS = (data: ParsedVariable, options?: GenerateAsCSSOptio
     options,
   );
 
-  let fullSelector = options?.selector?.trim() || ":root";
-  if (fullSelector !== ":root") fullSelector += `.${data.modeName}`;
+  const fullSelector =
+    options?.selector?.trim().replaceAll("{mode}", data.modeName ?? "") || ":root";
 
   return `${generateTimestampComment(data.modeName)}
 ${fullSelector} {\n${variableContent.join("\n")}\n}\n`;

packages/sit-onyx/src/components/TestInput/TestInput.vue

@@ -170,6 +170,7 @@ watch(
   width: max-content;
   display: inline-block;
   font-family: var(--onyx-font-family);
+  color: var(--onyx-color-text-neutral-intense);
 
   &__label {
     margin-right: 8px;

packages/sit-onyx/src/styles/variables-dark.css

@@ -3,7 +3,7 @@
  * This file contains the specific variables for the "dark" theme.
  * Imported from Figma API on Fri, 19 Jan 2024 09:37:12 GMT
  */
-html.dark {
+.dark {
   --onyx-color-base-action-100: var(--onyx-color-themed-action-1100);
   --onyx-color-base-action-200: var(--onyx-color-themed-action-1000);
   --onyx-color-base-action-300: var(--onyx-color-themed-action-900);