@orderly.network/ui 2.10.1 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/ui",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -42,7 +42,7 @@
     "react-error-boundary": "^4.0.13",
     "react-hot-toast": "^2.4.1",
     "tailwind-variants": "^0.2.1",
-    "@orderly.network/utils": "2.10.1"
+    "@orderly.network/utils": "2.10.2"
   },
   "devDependencies": {
     "@types/node": "^22.15.21",
@@ -55,7 +55,7 @@
     "tailwindcss-animate": "^1.0.6",
     "tsup": "^8.5.1",
     "typescript": "^5.1.6",
-    "tsconfig": "0.13.1"
+    "tsconfig": "0.13.2"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/tailwind/index.ts

@@ -5,4 +5,4 @@ export { gradientPlugin } from "./gradient";
 export { positionPlugin } from "./position";
 export { scrollBarPlugin } from "./scrollBar";
 export { sizePlugin } from "./size";
-export { themePlugin } from "./theme";
+export * from "./theme";

package/src/tailwind/theme/darkTheme.ts

@@ -0,0 +1,109 @@
+import plugin from "tailwindcss/plugin";
+
+export const DARK_THEME_CSS_VARS = {
+  "--oui-font-family":
+    '"Manrope","PingFang SC", "Noto Sans CJK SC", "Noto Sans", sans-serif',
+
+  /* colors */
+  "--oui-color-primary": "176 132 233",
+  "--oui-color-primary-light": "213 190 244",
+  "--oui-color-primary-darken": "137 76 209",
+  "--oui-color-primary-contrast": "255 255 255",
+
+  "--oui-color-link": "189 107 237",
+  "--oui-color-link-light": "217 152 250",
+
+  "--oui-color-secondary": "255 255 255",
+  "--oui-color-tertiary": "218 218 218",
+  "--oui-color-quaternary": "218 218 218",
+
+  "--oui-color-danger": "245 97 139",
+  "--oui-color-danger-light": "250 167 188",
+  "--oui-color-danger-darken": "237 72 122",
+  "--oui-color-danger-contrast": "255 255 255",
+
+  "--oui-color-success": "41 233 169",
+  "--oui-color-success-light": "101 240 194",
+  "--oui-color-success-darken": "0 161 120",
+  "--oui-color-success-contrast": "255 255 255",
+
+  "--oui-color-warning": "255 209 70",
+  "--oui-color-warning-light": "255 229 133",
+  "--oui-color-warning-darken": "255 152 0",
+  "--oui-color-warning-contrast": "255 255 255",
+
+  "--oui-color-fill": "36 32 47",
+  "--oui-color-fill-active": "40 46 58",
+
+  "--oui-color-base-1": "93 83 123",
+  "--oui-color-base-2": "81 72 107",
+  "--oui-color-base-3": "68 61 69",
+  "--oui-color-base-4": "57 52 74",
+  "--oui-color-base-5": "51 46 66",
+  "--oui-color-base-6": "43 38 56",
+  "--oui-color-base-7": "36 32 47",
+  "--oui-color-base-8": "29 26 38",
+  "--oui-color-base-9": "22 20 28",
+  "--oui-color-base-10": "14 13 18",
+
+  "--oui-color-base-foreground": "255 255 255",
+  "--oui-color-line": "255 255 255",
+
+  "--oui-color-base-static": "255 255 255",
+  "--oui-color-base-static-contrast": "0 0 0",
+
+  "--oui-color-trading-loss": "245 97 139",
+  "--oui-color-trading-loss-contrast": "255 255 255",
+  "--oui-color-trading-profit": "41 233 169",
+  "--oui-color-trading-profit-contrast": "255 255 255",
+
+  /* gradients */
+  "--oui-gradient-primary-start": "40 0 97",
+  "--oui-gradient-primary-end": "189 107 237",
+
+  "--oui-gradient-secondary-start": "81 42 121",
+  "--oui-gradient-secondary-end": "176 132 233",
+
+  "--oui-gradient-success-start": "1 83 68",
+  "--oui-gradient-success-end": "41 223 169",
+
+  "--oui-gradient-danger-start": "153 24 76",
+  "--oui-gradient-danger-end": "245 97 139",
+
+  "--oui-gradient-brand-start": "231 219 249",
+  "--oui-gradient-brand-end": "159 107 225",
+  "--oui-gradient-brand-stop-start": "6.62%",
+  "--oui-gradient-brand-stop-end": "86.5%",
+  "--oui-gradient-brand-angle": "17.44deg",
+
+  "--oui-gradient-warning-start": "152 58 8",
+  "--oui-gradient-warning-end": "255 209 70",
+
+  "--oui-gradient-neutral-start": "27 29 24",
+  "--oui-gradient-neutral-end": "38 41 46",
+
+  /* rounded */
+  "--oui-rounded-sm": "2px",
+  "--oui-rounded": "4px",
+  "--oui-rounded-md": "6px",
+  "--oui-rounded-lg": "8px",
+  "--oui-rounded-xl": "12px",
+  "--oui-rounded-2xl": "16px",
+  "--oui-rounded-full": "9999px",
+
+  /* spacing */
+  "--oui-spacing-xs": "20rem",
+  "--oui-spacing-sm": "22.5rem",
+  "--oui-spacing-md": "26.25rem",
+  "--oui-spacing-lg": "30rem",
+  "--oui-spacing-xl": "33.75rem",
+};
+
+export type ThemeCssVars = typeof DARK_THEME_CSS_VARS;
+
+export const darkThemePlugin = () =>
+  plugin(function ({ addBase }) {
+    addBase({
+      ":root": DARK_THEME_CSS_VARS,
+    });
+  });

package/src/tailwind/theme/index.ts

@@ -0,0 +1,2 @@
+export * from "./darkTheme";
+export * from "./lightTheme";

package/src/tailwind/theme/lightTheme.ts

@@ -0,0 +1,108 @@
+import plugin from "tailwindcss/plugin";
+
+export const LIGHT_THEME_CSS_VARS = {
+  "--oui-font-family":
+    '"Manrope", "PingFang SC", "Noto Sans CJK SC", "Noto Sans", sans-serif',
+
+  /* colors */
+  "--oui-color-primary": "240 185 11",
+  "--oui-color-primary-light": "240 185 11",
+  "--oui-color-primary-darken": "240 185 11",
+  "--oui-color-primary-contrast": "12 14 18",
+
+  "--oui-color-link": "230 175 0",
+  "--oui-color-link-light": "252 213 53",
+
+  "--oui-color-secondary": "255 255 255",
+  "--oui-color-tertiary": "234 236 239",
+  "--oui-color-quaternary": "218 218 218",
+
+  "--oui-color-danger": "246 70 93",
+  "--oui-color-danger-light": "255 120 140",
+  "--oui-color-danger-darken": "220 50 75",
+  "--oui-color-danger-contrast": "0 0 0",
+
+  "--oui-color-success": "14 203 129",
+  "--oui-color-success-light": "50 220 160",
+  "--oui-color-success-darken": "46 189 133",
+  "--oui-color-success-contrast": "0 0 0",
+
+  "--oui-color-warning": "255 182 93",
+  "--oui-color-warning-light": "255 207 139",
+  "--oui-color-warning-darken": "255 125 0",
+  "--oui-color-warning-contrast": "0 0 0",
+
+  "--oui-color-fill": "245 245 245",
+  "--oui-color-fill-active": "238 238 238",
+
+  "--oui-color-base-1": "160 160 160",
+  "--oui-color-base-2": "210 210 210",
+  "--oui-color-base-3": "180 180 180",
+  "--oui-color-base-4": "200 202 205",
+  "--oui-color-base-5": "230 230 230",
+  "--oui-color-base-6": "245 245 245",
+  "--oui-color-base-7": "234 236 239",
+  "--oui-color-base-8": "255 255 255",
+  "--oui-color-base-9": "255 255 255",
+  "--oui-color-base-10": "245 245 245",
+
+  "--oui-color-base-foreground": "0 0 0",
+  "--oui-color-line": "0 0 0",
+
+  "--oui-color-base-static": "255 255 255",
+  "--oui-color-base-static-contrast": "0 0 0",
+
+  "--oui-color-trading-loss": "246 70 93",
+  "--oui-color-trading-loss-contrast": "255 255 255",
+  "--oui-color-trading-profit": "14 203 129",
+  "--oui-color-trading-profit-contrast": "255 255 255",
+
+  /* gradients */
+  "--oui-gradient-primary-start": "240 185 11",
+  "--oui-gradient-primary-end": "240 185 11",
+
+  "--oui-gradient-secondary-start": "252 213 53",
+  "--oui-gradient-secondary-end": "210 160 0",
+
+  "--oui-gradient-success-start": "14 203 129",
+  "--oui-gradient-success-end": "14 203 129",
+
+  "--oui-gradient-danger-start": "2246 70 93",
+  "--oui-gradient-danger-end": "246 70 93",
+
+  "--oui-gradient-warning-start": "255 182 93",
+  "--oui-gradient-warning-end": "255 182 93",
+
+  "--oui-gradient-neutral-start": "245 245 245",
+  "--oui-gradient-neutral-end": "245 245 245",
+
+  "--oui-gradient-brand-stop-start": "6.62%",
+  "--oui-gradient-brand-stop-end": "86.5%",
+  "--oui-gradient-brand-angle": "17.44deg",
+
+  "--oui-gradient-brand-start": "240 185 11",
+  "--oui-gradient-brand-end": "240 185 11",
+
+  /* rounded */
+  "--oui-rounded-sm": "2px",
+  "--oui-rounded": "4px",
+  "--oui-rounded-md": "6px",
+  "--oui-rounded-lg": "8px",
+  "--oui-rounded-xl": "12px",
+  "--oui-rounded-2xl": "16px",
+  "--oui-rounded-full": "9999px",
+
+  /* spacing */
+  "--oui-spacing-xs": "20rem",
+  "--oui-spacing-sm": "22.5rem",
+  "--oui-spacing-md": "26.25rem",
+  "--oui-spacing-lg": "30rem",
+  "--oui-spacing-xl": "33.75rem",
+};
+
+export const lightThemePlugin = () =>
+  plugin(function ({ addBase }) {
+    addBase({
+      '[data-oui-theme="light"]': LIGHT_THEME_CSS_VARS,
+    });
+  });

package/tailwind.config.js

@@ -1,13 +1,14 @@
-const { withTV } = require("tailwind-variants/transformer");
-
-const { sizePlugin } = require("./src/tailwind/size");
-const { gradientPlugin } = require("./src/tailwind/gradient");
-const { positionPlugin } = require("./src/tailwind/position");
-const { basePlugin } = require("./src/tailwind/base");
-const { componentsPlugin } = require("./src/tailwind/components");
-const { themePlugin } = require("./src/tailwind/theme");
-const { scrollBarPlugin } = require("./src/tailwind/scrollBar");
-const { chartPlugin } = require("./src/tailwind/chart");
+import { withTV } from "tailwind-variants/transformer";
+import {
+  darkThemePlugin,
+  basePlugin,
+  sizePlugin,
+  chartPlugin,
+  gradientPlugin,
+  positionPlugin,
+  componentsPlugin,
+  scrollBarPlugin,
+} from "./src/tailwind";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = withTV({
@@ -156,16 +157,35 @@ module.exports = withTV({
             80: "rgb(var(--oui-color-base-foreground) / 0.80)",
             54: "rgb(var(--oui-color-base-foreground) / 0.54)",
             36: "rgb(var(--oui-color-base-foreground) / 0.36)",
+            30: "rgb(var(--oui-color-base-foreground) / 0.30)",
             20: "rgb(var(--oui-color-base-foreground) / 0.2)",
             16: "rgb(var(--oui-color-base-foreground) / 0.16)",
             12: "rgb(var(--oui-color-base-foreground) / 0.12)",
+            10: "rgb(var(--oui-color-base-foreground) / 0.10)",
+            8: "rgb(var(--oui-color-base-foreground) / 0.08)",
+            6: "rgb(var(--oui-color-base-foreground) / 0.06)",
             4: "rgb(var(--oui-color-base-foreground) / 0.04)",
           },
+          static: {
+            DEFAULT: "rgb(var(--oui-color-base-static) / 0.98)",
+            80: "rgb(var(--oui-color-base-static) / 0.80)",
+            54: "rgb(var(--oui-color-base-static) / 0.54)",
+            36: "rgb(var(--oui-color-base-static) / 0.36)",
+            20: "rgb(var(--oui-color-base-static) / 0.2)",
+            contrast: {
+              DEFAULT: "rgb(var(--oui-color-base-static-contrast) / 0.98)",
+              80: "rgb(var(--oui-color-base-static-contrast) / 0.80)",
+              54: "rgb(var(--oui-color-base-static-contrast) / 0.54)",
+              36: "rgb(var(--oui-color-base-static-contrast) / 0.36)",
+              20: "rgb(var(--oui-color-base-static-contrast) / 0.2)",
+            },
+          },
         },
         line: {
           4: "rgb(var(--oui-color-line, 255 255 255) / 0.04)",
           6: "rgb(var(--oui-color-line, 255 255 255) / 0.06)",
           DEFAULT: "rgb(var(--oui-color-line, 255 255 255) / 0.08)",
+          10: "rgb(var(--oui-color-line, 255 255 255) / 0.10)",
           12: "rgb(var(--oui-color-line, 255 255 255) / 0.12)",
           16: "rgb(var(--oui-color-line, 255 255 255) / 0.16)",
         },
@@ -240,7 +260,7 @@ module.exports = withTV({
     },
   },
   plugins: [
-    themePlugin(),
+    darkThemePlugin(),
     basePlugin(),
     sizePlugin(),
     chartPlugin(),

package/src/tailwind/theme.ts

@@ -1,102 +0,0 @@
-import plugin from "tailwindcss/plugin";
-
-export const themePlugin = () =>
-  plugin(function ({ addBase }) {
-    addBase({
-      ":root": {
-        "--oui-font-family":
-          '"Manrope","PingFang SC", "Noto Sans CJK SC", "Noto Sans", sans-serif',
-
-        /* colors */
-        "--oui-color-primary": "176 132 233",
-        "--oui-color-primary-light": "213 190 244",
-        "--oui-color-primary-darken": "137 76 209",
-        "--oui-color-primary-contrast": "255 255 255",
-
-        "--oui-color-link": "189 107 237",
-        "--oui-color-link-light": "217 152 250",
-
-        "--oui-color-secondary": "255 255 255",
-        "--oui-color-tertiary": "218 218 218",
-        "--oui-color-quaternary": "218 218 218",
-
-        "--oui-color-danger": "245 97 139",
-        "--oui-color-danger-light": "250 167 188",
-        "--oui-color-danger-darken": "237 72 122",
-        "--oui-color-danger-contrast": "255 255 255",
-
-        "--oui-color-success": "41 233 169",
-        "--oui-color-success-light": "101 240 194",
-        "--oui-color-success-darken": "0 161 120",
-        "--oui-color-success-contrast": "255 255 255",
-
-        "--oui-color-warning": "255 209 70",
-        "--oui-color-warning-light": "255 229 133",
-        "--oui-color-warning-darken": "255 152 0",
-        "--oui-color-warning-contrast": "255 255 255",
-
-        "--oui-color-fill": "36 32 47",
-        "--oui-color-fill-active": "40 46 58",
-
-        "--oui-color-base-1": "93 83 123",
-        "--oui-color-base-2": "81 72 107",
-        "--oui-color-base-3": "68 61 69",
-        "--oui-color-base-4": "57 52 74",
-        "--oui-color-base-5": "51 46 66",
-        "--oui-color-base-6": "43 38 56",
-        "--oui-color-base-7": "36 32 47",
-        "--oui-color-base-8": "29 26 38",
-        "--oui-color-base-9": "22 20 28",
-        "--oui-color-base-10": "14 13 18",
-
-        "--oui-color-base-foreground": "255 255 255",
-        "--oui-color-line": "255 255 255",
-
-        "--oui-color-trading-loss": "245 97 139",
-        "--oui-color-trading-loss-contrast": "255 255 255",
-        "--oui-color-trading-profit": "41 233 169",
-        "--oui-color-trading-profit-contrast": "255 255 255",
-
-        /* gradients */
-        "--oui-gradient-primary-start": "40 0 97",
-        "--oui-gradient-primary-end": "189 107 237",
-
-        "--oui-gradient-secondary-start": "81 42 121",
-        "--oui-gradient-secondary-end": "176 132 233",
-
-        "--oui-gradient-success-start": "1 83 68",
-        "--oui-gradient-success-end": "41 223 169",
-
-        "--oui-gradient-danger-start": "153 24 76",
-        "--oui-gradient-danger-end": "245 97 139",
-
-        "--oui-gradient-brand-start": "231 219 249",
-        "--oui-gradient-brand-end": "159 107 225",
-        "--oui-gradient-brand-stop-start": "6.62%",
-        "--oui-gradient-brand-stop-end": "86.5%",
-        "--oui-gradient-brand-angle": "17.44deg",
-
-        "--oui-gradient-warning-start": "152 58 8",
-        "--oui-gradient-warning-end": "255 209 70",
-
-        "--oui-gradient-neutral-start": "27 29 24",
-        "--oui-gradient-neutral-end": "38 41 46",
-
-        /* rounded */
-        "--oui-rounded-sm": "2px",
-        "--oui-rounded": "4px",
-        "--oui-rounded-md": "6px",
-        "--oui-rounded-lg": "8px",
-        "--oui-rounded-xl": " 12px",
-        "--oui-rounded-2xl": "16px",
-        "--oui-rounded-full": "9999px",
-
-        /* spacing */
-        "--oui-spacing-xs": "20rem",
-        "--oui-spacing-sm": "22.5rem",
-        "--oui-spacing-md": "26.25rem",
-        "--oui-spacing-lg": "30rem",
-        "--oui-spacing-xl": "33.75rem",
-      },
-    });
-  });