@liner-fe/design-token 2.5.45 → 2.5.46

package/lib/index.css

@@ -649,7 +649,7 @@
     line-height: var(--lp-pri-font-lineheight-130);
   }
 }
-:root[data-theme=dark],
+:root[color-theme=dark],
 :root[class=dark] {
   --neutral-container-lowest: var(--lp-pri-gray-cool-100);
   --neutral-container-lowest-hover: var(--lp-pri-gray-cool-200);
@@ -780,7 +780,7 @@
     0px 8px 16px 0px rgba(0, 0, 0, 0.24),
     0px 0px 8px 0px rgba(0, 0, 0, 0.24);
 }
-:root[data-theme=light],
+:root[color-theme=light],
 :root[class=light] {
   --neutral-container-lowest: var(--lp-pri-achromatic-white);
   --neutral-container-lowest-hover: var(--lp-pri-gray-cool-980);

package/lib/index.d.ts

@@ -1,3 +1,13 @@
+import * as recoil from 'recoil';
+
+declare const theme: recoil.RecoilState<boolean>;
+declare const useDarkTheme: () => {
+    setDarkTheme: () => void;
+    setLightTheme: () => void;
+    setPreferTheme: () => void;
+    isDarkMode: boolean;
+};
+
 declare const vars: {
     color: {
         "neutral-container-lowest": string;
@@ -300,4 +310,4 @@ declare const breakpoint: {
     xxxl: string;
 };
 
-export { breakpoint, breakpointOrigin, classNames, vars };
+export { breakpoint, breakpointOrigin, classNames, theme, useDarkTheme, vars };

package/lib/index.js

@@ -1,6 +1,38 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
+// src/hooks/useDarkTheme.ts
+import { atom, useRecoilState } from "recoil";
+var theme = atom({
+  key: "dark-theme",
+  default: false
+});
+var useDarkTheme = /* @__PURE__ */ __name(() => {
+  const [isDarkMode, setIsDarkMode] = useRecoilState(theme);
+  const setDarkTheme = /* @__PURE__ */ __name(() => {
+    document.documentElement.setAttribute("color-theme", "dark");
+    localStorage.setItem("theme", "dark");
+    setIsDarkMode(true);
+  }, "setDarkTheme");
+  const setLightTheme = /* @__PURE__ */ __name(() => {
+    document.documentElement.setAttribute("color-theme", "light");
+    localStorage.setItem("theme", "light");
+    setIsDarkMode(false);
+  }, "setLightTheme");
+  const setPreferTheme = /* @__PURE__ */ __name(() => {
+    const isOsColorThemeDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    localStorage.removeItem("theme");
+    document.documentElement.setAttribute("color-theme", isOsColorThemeDark ? "dark" : "light");
+    setIsDarkMode(isOsColorThemeDark);
+  }, "setPreferTheme");
+  return {
+    setDarkTheme,
+    setLightTheme,
+    setPreferTheme,
+    isDarkMode
+  };
+}, "useDarkTheme");
+
 // src/generated/vars.ts
 var vars = { "color": { "neutral-container-lowest": "var(--neutral-container-lowest)", "neutral-container-lowest-hover": "var(--neutral-container-lowest-hover)", "neutral-container-low": "var(--neutral-container-low)", "neutral-container-low-hover": "var(--neutral-container-low-hover)", "neutral-container-mid": "var(--neutral-container-mid)", "neutral-container-mid-hover": "var(--neutral-container-mid-hover)", "neutral-container-high": "var(--neutral-container-high)", "neutral-container-high-hover": "var(--neutral-container-high-hover)", "neutral-container-highest": "var(--neutral-container-highest)", "neutral-container-static-lowest": "var(--neutral-container-static-lowest)", "neutral-container-static-lowest-hover": "var(--neutral-container-static-lowest-hover)", "neutral-container-variation-lowest": "var(--neutral-container-variation-lowest)", "neutral-fill-overlay-lowest": "var(--neutral-fill-overlay-lowest)", "neutral-fill-overlay-lowest-hover": "var(--neutral-fill-overlay-lowest-hover)", "neutral-fill-overlay-low": "var(--neutral-fill-overlay-low)", "neutral-fill-overlay-low-hover": "var(--neutral-fill-overlay-low-hover)", "neutral-fill-overlay-mid": "var(--neutral-fill-overlay-mid)", "neutral-fill-overlay-mid-hover": "var(--neutral-fill-overlay-mid-hover)", "neutral-fill-overlay-high": "var(--neutral-fill-overlay-high)", "neutral-fill-overlay-high-hover": "var(--neutral-fill-overlay-high-hover)", "neutral-fill-overlay-highest": "var(--neutral-fill-overlay-highest)", "neutral-fill-opaque-lowest": "var(--neutral-fill-opaque-lowest)", "neutral-fill-opaque-lowest-hover": "var(--neutral-fill-opaque-lowest-hover)", "neutral-fill-opaque-low": "var(--neutral-fill-opaque-low)", "neutral-fill-opaque-low-hover": "var(--neutral-fill-opaque-low-hover)", "neutral-fill-opaque-static-lowest": "var(--neutral-fill-opaque-static-lowest)", "neutral-label-primary": "var(--neutral-label-primary)", "neutral-label-secondary": "var(--neutral-label-secondary)", "neutral-label-tertiary": "var(--neutral-label-tertiary)", "neutral-label-quaternary": "var(--neutral-label-quaternary)", "neutral-label-static-primary": "var(--neutral-label-static-primary)", "neutral-label-static-secondary": "var(--neutral-label-static-secondary)", "neutral-border-overlay-strong": "var(--neutral-border-overlay-strong)", "neutral-border-overlay-normal": "var(--neutral-border-overlay-normal)", "neutral-border-overlay-subtle": "var(--neutral-border-overlay-subtle)", "neutral-border-overlay-hint": "var(--neutral-border-overlay-hint)", "neutral-border-opaque-strong": "var(--neutral-border-opaque-strong)", "neutral-border-opaque-normal": "var(--neutral-border-opaque-normal)", "neutral-border-opaque-subtle": "var(--neutral-border-opaque-subtle)", "inverse-container-lowest": "var(--inverse-container-lowest)", "inverse-container-lowest-hover": "var(--inverse-container-lowest-hover)", "inverse-container-low": "var(--inverse-container-low)", "inverse-container-low-hover": "var(--inverse-container-low-hover)", "inverse-container-mid": "var(--inverse-container-mid)", "inverse-container-mid-hover": "var(--inverse-container-mid-hover)", "inverse-container-high": "var(--inverse-container-high)", "inverse-container-high-hover": "var(--inverse-container-high-hover)", "inverse-container-static-high": "var(--inverse-container-static-high)", "inverse-container-static-high-hover": "var(--inverse-container-static-high-hover)", "inverse-container-highest": "var(--inverse-container-highest)", "inverse-fill-opaque-lowest": "var(--inverse-fill-opaque-lowest)", "inverse-fill-opaque-lowest-hover": "var(--inverse-fill-opaque-lowest-hover)", "inverse-fill-opaque-low": "var(--inverse-fill-opaque-low)", "inverse-fill-opaque-low-hover": "var(--inverse-fill-opaque-low-hover)", "inverse-fill-opaque-mid": "var(--inverse-fill-opaque-mid)", "inverse-fill-mid": "var(--inverse-fill-mid)", "inverse-fill-mid-hover": "var(--inverse-fill-mid-hover)", "inverse-label-primary": "var(--inverse-label-primary)", "inverse-label-secondary": "var(--inverse-label-secondary)", "inverse-label-tertiary": "var(--inverse-label-tertiary)", "inverse-label-quaternary": "var(--inverse-label-quaternary)", "inverse-label-static-primary": "var(--inverse-label-static-primary)", "inverse-label-static-secondary": "var(--inverse-label-static-secondary)", "inverse-border-overlay-strong": "var(--inverse-border-overlay-strong)", "inverse-border-overlay-normal": "var(--inverse-border-overlay-normal)", "inverse-border-overlay-subtle": "var(--inverse-border-overlay-subtle)", "inverse-border-overlay-hint": "var(--inverse-border-overlay-hint)", "inverse-border-opaque-strong": "var(--inverse-border-opaque-strong)", "inverse-border-opaque-normal": "var(--inverse-border-opaque-normal)", "inverse-border-opaque-subtle": "var(--inverse-border-opaque-subtle)", "brand-container-mid": "var(--brand-container-mid)", "brand-container-mid-hover": "var(--brand-container-mid-hover)", "brand-container-high": "var(--brand-container-high)", "brand-fill-mid": "var(--brand-fill-mid)", "brand-fill-mid-hover": "var(--brand-fill-mid-hover)", "brand-fill-low": "var(--brand-fill-low)", "brand-fill-low-hover": "var(--brand-fill-low-hover)", "brand-label-primary": "var(--brand-label-primary)", "brand-label-secondary": "var(--brand-label-secondary)", "brand-label-variation-secondary": "var(--brand-label-variation-secondary)", "brand-border-opaque-normal": "var(--brand-border-opaque-normal)", "brand-border-opaque-strong": "var(--brand-border-opaque-strong)", "brandinverse-container-mid": "var(--brandinverse-container-mid)", "brandinverse-container-mid-hover": "var(--brandinverse-container-mid-hover)", "brandinverse-container-high": "var(--brandinverse-container-high)", "brandinverse-fill-mid": "var(--brandinverse-fill-mid)", "brandinverse-fill-mid-hover": "var(--brandinverse-fill-mid-hover)", "brandinverse-fill-low": "var(--brandinverse-fill-low)", "brandinverse-fill-low-hover": "var(--brandinverse-fill-low-hover)", "brandinverse-label-primary": "var(--brandinverse-label-primary)", "brandinverse-label-secondary": "var(--brandinverse-label-secondary)", "brandinverse-label-static-primary": "var(--brandinverse-label-static-primary)", "brandinverse-border-opaque-strong": "var(--brandinverse-border-opaque-strong)", "brandinverse-border-opaque-normal": "var(--brandinverse-border-opaque-normal)", "accent-label-primary": "var(--accent-label-primary)", "accent-label-yellow": "var(--accent-label-yellow)", "accent-label-mint": "var(--accent-label-mint)", "accent-label-cyan": "var(--accent-label-cyan)", "accent-label-purple": "var(--accent-label-purple)", "accent-label-pink": "var(--accent-label-pink)", "accent-fill-primary": "var(--accent-fill-primary)", "function-fill-positive-mid": "var(--function-fill-positive-mid)", "function-fill-negative-mid": "var(--function-fill-negative-mid)", "function-fill-negative-mid-hover": "var(--function-fill-negative-mid-hover)", "function-fill-caution": "var(--function-fill-caution)", "function-fill-highlight": "var(--function-fill-highlight)", "function-fill-selection": "var(--function-fill-selection)", "function-fill-drag": "var(--function-fill-drag)", "function-fill-positive-low": "var(--function-fill-positive-low)", "function-fill-negative-low": "var(--function-fill-negative-low)", "function-label-positive": "var(--function-label-positive)", "function-label-negative": "var(--function-label-negative)", "function-label-caution": "var(--function-label-caution)", "function-label-link": "var(--function-label-link)", "cover-dim-page": "var(--cover-dim-page)" }, "radius": { "xxs": "var(--lp-sys-radius-xxs)", "xs": "var(--lp-sys-radius-xs)", "s": "var(--lp-sys-radius-s)", "m": "var(--lp-sys-radius-m)", "l": "var(--lp-sys-radius-l)", "xl": "var(--lp-sys-radius-xl)", "xxl": "var(--lp-sys-radius-xxl)" }, "opacity": { "0": "var(--lp-pri-opacity-0)", "1": "var(--lp-pri-opacity-1)", "4": "var(--lp-pri-opacity-4)", "8": "var(--lp-pri-opacity-8)", "12": "var(--lp-pri-opacity-12)", "16": "var(--lp-pri-opacity-16)", "20": "var(--lp-pri-opacity-20)", "24": "var(--lp-pri-opacity-24)", "28": "var(--lp-pri-opacity-28)", "32": "var(--lp-pri-opacity-32)", "36": "var(--lp-pri-opacity-36)", "40": "var(--lp-pri-opacity-40)", "44": "var(--lp-pri-opacity-44)", "48": "var(--lp-pri-opacity-48)", "50": "var(--lp-pri-opacity-50)", "56": "var(--lp-pri-opacity-56)", "64": "var(--lp-pri-opacity-64)", "72": "var(--lp-pri-opacity-72)", "80": "var(--lp-pri-opacity-80)" }, "padding": { "component-50": "var(--lp-sys-padding-component-50)", "component-100": "var(--lp-sys-padding-component-100)", "component-150": "var(--lp-sys-padding-component-150)", "component-200": "var(--lp-sys-padding-component-200)", "component-300": "var(--lp-sys-padding-component-300)", "component-400": "var(--lp-sys-padding-component-400)", "component-500": "var(--lp-sys-padding-component-500)", "component-600": "var(--lp-sys-padding-component-600)", "component-700": "var(--lp-sys-padding-component-700)", "component-800": "var(--lp-sys-padding-component-800)", "component-900": "var(--lp-sys-padding-component-900)", "component-1000": "var(--lp-sys-padding-component-1000)", "component-1100": "var(--lp-sys-padding-component-1100)", "component-1300": "var(--lp-sys-padding-component-1300)", "component-1500": "var(--lp-sys-padding-component-1500)", "component-1700": "var(--lp-sys-padding-component-1700)", "section-50": "var(--lp-sys-padding-section-50)", "section-100": "var(--lp-sys-padding-section-100)", "section-200": "var(--lp-sys-padding-section-200)", "section-300": "var(--lp-sys-padding-section-300)", "section-400": "var(--lp-sys-padding-section-400)", "section-500": "var(--lp-sys-padding-section-500)", "section-600": "var(--lp-sys-padding-section-600)", "section-700": "var(--lp-sys-padding-section-700)", "section-800": "var(--lp-sys-padding-section-800)", "section-900": "var(--lp-sys-padding-section-900)" }, "size": { "0": "var(--lp-pri-size-0)", "1": "var(--lp-pri-size-1)", "2": "var(--lp-pri-size-2)", "3": "var(--lp-pri-size-3)", "4": "var(--lp-pri-size-4)", "6": "var(--lp-pri-size-6)", "8": "var(--lp-pri-size-8)", "10": "var(--lp-pri-size-10)", "12": "var(--lp-pri-size-12)", "14": "var(--lp-pri-size-14)", "16": "var(--lp-pri-size-16)", "18": "var(--lp-pri-size-18)", "20": "var(--lp-pri-size-20)", "24": "var(--lp-pri-size-24)", "32": "var(--lp-pri-size-32)", "40": "var(--lp-pri-size-40)", "48": "var(--lp-pri-size-48)", "56": "var(--lp-pri-size-56)", "64": "var(--lp-pri-size-64)", "80": "var(--lp-pri-size-80)", "100": "var(--lp-pri-size-100)", "120": "var(--lp-pri-size-120)", "140": "var(--lp-pri-size-140)", "160": "var(--lp-pri-size-160)", "180": "var(--lp-pri-size-180)", "200": "var(--lp-pri-size-200)", "minus6": "var(--lp-pri-size-minus6)", "minus4": "var(--lp-pri-size-minus4)", "minus2": "var(--lp-pri-size-minus2)" }, "gap": { "positive-50": "var(--lp-sys-gap-positive-50)", "positive-100": "var(--lp-sys-gap-positive-100)", "positive-150": "var(--lp-sys-gap-positive-150)", "positive-200": "var(--lp-sys-gap-positive-200)", "positive-300": "var(--lp-sys-gap-positive-300)", "positive-400": "var(--lp-sys-gap-positive-400)", "positive-500": "var(--lp-sys-gap-positive-500)", "positive-600": "var(--lp-sys-gap-positive-600)", "positive-700": "var(--lp-sys-gap-positive-700)", "positive-800": "var(--lp-sys-gap-positive-800)", "positive-900": "var(--lp-sys-gap-positive-900)" }, "shadow": { "soft": "var(--lp-sys-shadow-soft)", "normal": "var(--lp-sys-shadow-normal)", "strong": "var(--lp-sys-shadow-strong)", "heavy": "var(--lp-sys-shadow-heavy)" }, "iconSize": { "xs": "var(--lp-sys-icon-size-xs)", "s": "var(--lp-sys-icon-size-s)", "m": "var(--lp-sys-icon-size-m)", "l": "var(--lp-sys-icon-size-l)", "xl": "var(--lp-sys-icon-size-xl)" } };
 
@@ -30,5 +62,7 @@ export {
   breakpoint,
   breakpointOrigin,
   classNames,
+  theme,
+  useDarkTheme,
   vars
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/design-token",
-  "version": "2.5.45",
+  "version": "2.5.46",
   "type": "module",
   "devDependencies": {
     "@eslint/js": "^9.36.0",
@@ -16,7 +16,7 @@
     "tsx": "^4.21.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "@liner-fe/design-token-primitive": "^0.2.42"
+    "@liner-fe/design-token-primitive": "^0.2.43"
   },
   "peerDependencies": {
     "react": "^18",

package/src/hooks/useDarkTheme.ts

@@ -0,0 +1,36 @@
+import { atom, useRecoilState } from 'recoil';
+
+export const theme = atom({
+  key: 'dark-theme',
+  default: false,
+});
+
+export const useDarkTheme = () => {
+  const [isDarkMode, setIsDarkMode] = useRecoilState(theme);
+
+  const setDarkTheme = () => {
+    document.documentElement.setAttribute('color-theme', 'dark');
+    localStorage.setItem('theme', 'dark');
+    setIsDarkMode(true);
+  };
+
+  const setLightTheme = () => {
+    document.documentElement.setAttribute('color-theme', 'light');
+    localStorage.setItem('theme', 'light');
+    setIsDarkMode(false);
+  };
+
+  const setPreferTheme = () => {
+    const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    localStorage.removeItem('theme');
+    document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');
+    setIsDarkMode(isOsColorThemeDark);
+  };
+
+  return {
+    setDarkTheme,
+    setLightTheme,
+    setPreferTheme,
+    isDarkMode,
+  };
+};

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './hooks/useDarkTheme';
 export * from './generated/vars';
 export * from './generated/classNames';
 export * from './style/index';

package/src/style/global.css

@@ -611,7 +611,7 @@
 
 
 
-:root[data-theme='dark'],
+:root[color-theme='dark'],
 :root[class='dark'] {
     --neutral-container-lowest: var(--lp-pri-gray-cool-100);
 --neutral-container-lowest-hover: var(--lp-pri-gray-cool-200);
@@ -738,7 +738,7 @@
 
 
 
-:root[data-theme='light'],
+:root[color-theme='light'],
 :root[class='light'] {
     --neutral-container-lowest: var(--lp-pri-achromatic-white);
 --neutral-container-lowest-hover: var(--lp-pri-gray-cool-980);