fix: global css file reduce 5000 lines

packages/calcite-components/src/components/accordion-item/accordion-item.scss

@@ -1,3 +1,5 @@
+@forward "~@esri/calcite-design-tokens/dist/scss/accordion-item";
+
 %icon-position {
   /* icon rotation variables */
   --calcite-accordion-item-icon-rotation: calc(theme("rotate.90") * -1);

packages/calcite-components/src/components/accordion-item/accordion-item.tsx

@@ -24,6 +24,7 @@ import { CSS_UTILITY } from "../../utils/resources";
 import { SLOTS, CSS, IDS } from "./resources";
 import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
 import { RequestedItem } from "./interfaces";
+import { getMode, Mode } from "../../utils/modePublisher";
 
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
@@ -87,6 +88,8 @@ export class AccordionItem implements ConditionalSlotComponent {
    */
   @Prop() scale: Scale;
 
+  @Prop({ mutable: true, reflect: true }) calciteMode: Mode;
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -108,6 +111,11 @@ export class AccordionItem implements ConditionalSlotComponent {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  componentWillLoad(): void {
+    // TODO: check if this attribute is manually set by the user before getting the theme set in local storage.
+    // TODO: make this a part of the generic component setup.
+    this.calciteMode = getMode();
+  }
 
   connectedCallback(): void {
     connectConditionalSlotComponent(this);

packages/calcite-components/src/utils/modePublisher.ts

@@ -0,0 +1,53 @@
+// Default
+let modeStore: Mode = "light";
+// TODO: is this the right local storage key name?
+export const storageKey = "calcite-theme";
+export type Mode = "dark" | "light";
+export type Disconnect = () => void;
+
+export type ModePublisher<T> = () => {
+  (value: T): void;
+  subscribe(listener: (msg: T) => void): () => boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const modePublisher = <T>() => {
+  const listeners = new Set<(value: T) => void>();
+  function createPublisher(value: T) {
+    for (const cb of listeners) {
+      cb(value);
+    }
+  }
+  createPublisher.subscribe = (listener: (msg: T) => void) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  return createPublisher;
+};
+
+type GetMode<T> = {
+  (): T;
+  subscribe(cb: (arg: T) => void): Disconnect;
+};
+
+if (window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches) {
+  // is light
+  modeStore = "light";
+} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  // is dark
+  modeStore = "dark";
+}
+
+let pub: ReturnType<ModePublisher<Mode>>;
+
+export const getMode: GetMode<Mode> = () => (localStorage.getItem(storageKey) as Mode) ?? modeStore;
+
+getMode.subscribe = (cb: (arg: Mode) => void) => {
+  pub = pub ?? modePublisher<Mode>();
+  return pub.subscribe(cb);
+};
+
+export const setMode = (mode: Mode): void => {
+  localStorage.setItem(storageKey, mode);
+  pub && pub(mode);
+};

packages/calcite-design-tokens/src/$config.ts

@@ -0,0 +1,64 @@
+import { readdirSync } from "fs";
+import { readdir } from "fs/promises";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import { Config, File } from "../support/run";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const modesDirectory = resolve(__dirname, "calcite");
+const componentsDirectory = resolve(__dirname, "component");
+const globalSourceReference = [resolve(__dirname, "core.json"), resolve(__dirname, "semantic.json")];
+
+const { components, componentRefs } = await readdir(componentsDirectory, { withFileTypes: true }).then((components) =>
+  components.reduce(
+    (acc, c) => {
+      if (c.isDirectory()) {
+        const component = readdirSync(resolve(componentsDirectory, c.name));
+        component.forEach((mode) => {
+          acc.components.push({
+            name: `${c.name}/${mode.includes("base") ? "base" : `${mode.match(/[\w\d-]+(?=.json)/)[0]}`}`,
+            source: [resolve(componentsDirectory, c.name, `${mode}`)],
+            references: [
+              ...globalSourceReference,
+              ...(mode.includes("base") ? [] : [`${resolve(componentsDirectory, c.name, "base.json")}`]),
+            ],
+          });
+        });
+      } else {
+        acc.componentRefs.push(`${resolve(componentsDirectory, c.name)}`);
+      }
+
+      return acc;
+    },
+    { components: [], componentRefs: [] } as { components: File[]; componentRefs: string[] }
+  )
+);
+
+const global: File = {
+  name: "global",
+  source: globalSourceReference,
+  references: componentRefs,
+};
+
+const modes = await readdir(modesDirectory).then((modes) =>
+  modes.map((mode) => ({
+    name: `mode/${mode.match(/[\w\d-]+(?=.json)/)[0]}`,
+    source: [resolve(modesDirectory, `${mode}`)],
+    references: [...globalSourceReference, ...componentRefs],
+  }))
+);
+
+export const config: Config = {
+  files: [global, ...modes, ...components],
+  options: {
+    prefix: "calcite",
+    outputReferences: true,
+  },
+  output: {
+    dir: resolve(__dirname, "../dist"),
+    platforms: ["css", "scss"],
+  },
+};
+
+export default config;

packages/calcite-design-tokens/src/$metadata.json

@@ -10,6 +10,8 @@
     "component/fab",
     "component/checkbox",
     "component/chip",
+    "component/combobox",
+    "component/combobox-item",
     "component/dropdown",
     "component/dropdown-item",
     "component/action-bar",
@@ -21,8 +23,9 @@
     "component/block",
     "component/block-section",
     "component/card",
-    "component/combobox",
+    "component/list-item",
     "component/date-picker",
+    "component/select",
     "component/color-picker",
     "component/input-date-picker",
     "component/input-datetime-local",
@@ -48,13 +51,17 @@
     "component/tab-title",
     "component/tabs",
     "component/rating",
+    "component/select",
     "component/tip",
     "component/tip-manager",
     "component/tooltip",
     "component/panel-header",
+    "component/flow-header",
+    "component/segmented-control",
+    "component/segmented-control-item",
     "component/popover",
     "component/pagination",
-    "component/segmented-control",
+    "component/pagination-item",
     "component/slider",
     "component/slider-histogram",
     "component/slider-histogram-range",
@@ -63,12 +70,14 @@
     "component/stepper-item",
     "component/switch",
     "component/[template-comp-name]",
+    "component/progress",
     "component/time-picker",
     "component/scrim",
     "component/tree-item",
     "component/accordion_backup",
     "calcite/light",
     "calcite/dark",
+    "calcite/grayscale",
     "brand/global",
     "brand/light",
     "brand/dark"