@solar-taro/ui-sun 1.2.4 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.2.5 (2025-08-04)
+
+This was a version bump only for ui-sun to align it with other projects, there were no code changes.
+
+## 1.2.4 (2025-08-04)
+
+### 🚀 Features
+
+- **ui-sun/popover:** improve usage
+
+### ❤️ Thank You
+
+- HyperLife1119
+
 ## 1.2.3 (2025-08-01)
 
 This was a version bump only for ui-sun to align it with other projects, there were no code changes.

package/_color.scss

@@ -1,41 +1,99 @@
-@use "sass:color";
 @use "sass:map";
+@use "./functions.color.scss" as sun;
 
-$colors: (
-  "white": #fff,
-  "black": #000,
-  "gray": #9e9e9e
-);
+@mixin theme($primary-colors) {
+  $primary: map-get($primary-colors, "base");
+  $secondary: #616161;
+  $info: #2196f3;
+  $success: #34d399;
+  $warning: #fbbf24;
+  $danger: #f43f5e;
+  $light: #f8fafc;
+  $medium: #64748b;
+  $dark: #334155;
+  $white: #ffffff;
+  $black: #000000;
 
-$theme-colors: (
-  // 主色由应用程序端覆盖，这里随便写个颜色
-  "primary": #000,
-  "secondary": #616161,
-  "danger": #ff5252,
-  "info": #2196f3,
-  "success": #22c55e,
-  "warning": #ffc107,
-  "light": #fafafa,
-  "dark": #212121
-);
+  $colors: (
+    primary: (
+      base: $primary,
+      contrast: map-get($primary-colors, "contrast"),
+      shade: sun.get-color-shade($primary),
+      tint: sun.get-color-tint($primary)
+    ),
+    secondary: (
+      base: $secondary,
+      contrast: #fff,
+      shade: sun.get-color-shade($secondary),
+      tint: sun.get-color-tint($secondary)
+    ),
+    info: (
+      base: $info,
+      contrast: #fff,
+      shade: sun.get-color-shade($info),
+      tint: sun.get-color-tint($info)
+    ),
+    success: (
+      base: $success,
+      contrast: #fff,
+      shade: sun.get-color-shade($success),
+      tint: sun.get-color-tint($success)
+    ),
+    warning: (
+      base: $warning,
+      contrast: #fff,
+      shade: sun.get-color-shade($warning),
+      tint: sun.get-color-tint($warning)
+    ),
+    danger: (
+      base: $danger,
+      contrast: #fff,
+      shade: sun.get-color-shade($danger),
+      tint: sun.get-color-tint($danger)
+    ),
+    light: (
+      base: $light,
+      contrast: #000,
+      shade: sun.get-color-shade($light),
+      tint: sun.get-color-tint($light)
+    ),
+    medium: (
+      base: $medium,
+      contrast: #fff,
+      shade: sun.get-color-shade($medium),
+      tint: sun.get-color-tint($medium)
+    ),
+    dark: (
+      base: $dark,
+      contrast: #fff,
+      shade: sun.get-color-shade($dark),
+      tint: sun.get-color-tint($dark)
+    ),
+    "white": (
+      base: $white,
+      contrast: $black,
+      shade: sun.get-color-shade($white),
+      tint: sun.get-color-tint($white)
+    ),
+    "black": (
+      base: $black,
+      contrast: $white,
+      shade: sun.get-color-tint($black),
+      tint: sun.get-color-shade($black)
+    )
+  );
 
-// Converts a color to a comma separated rgb.
-// --------------------------------------------------------------------------------------------
-@function color-to-rgb-list($color) {
-  @return #{color.red($color)}, #{color.green($color)}, #{color.blue($color)};
-}
-
-page {
-  @each $name, $value in map.merge($colors, $theme-colors) {
-    --color-#{$name}: #{$value};
-    --color-#{$name}-rgb: #{color-to-rgb-list($value)};
-
-    .color-#{$name} {
-      color: var(--color-#{$name});
-    }
+  @each $name, $theme in $colors {
+    $base-color: map.get($theme, "base");
+    $contrast-color: map.get($theme, "contrast");
+    $shade-color: map.get($theme, "shade");
+    $tint-color: map.get($theme, "tint");
 
-    .bg-#{$name} {
-      background-color: var(--color-#{$name});
-    }
+    --color-#{$name}: #{$base-color};
+    --color-#{$name}-rgb: #{sun.color-to-rgb-list($base-color)};
+    --color-#{$name}-contrast: #{$contrast-color};
+    --color-#{$name}-contrast-rgb: #{sun.color-to-rgb-list($contrast-color)};
+    --color-#{$name}-shade: #{$shade-color};
+    --color-#{$name}-tint: #{$tint-color};
   }
 }

package/_functions.color.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+@use "sass:color";
+
+// Mixes a color with black to create its shade.
+// --------------------------------------------------------------------------------------------
+@function get-color-shade($color) {
+  @return color.mix(#000, $color, 12%);
+}
+
+// Mixes a color with white to create its tint.
+// --------------------------------------------------------------------------------------------
+@function get-color-tint($color) {
+  @return color.mix(#fff, $color, 10%);
+}
+
+// Converts a color to a comma separated rgb.
+// --------------------------------------------------------------------------------------------
+@function color-to-rgb-list($color) {
+  @return #{color.red($color)}, #{color.green($color)}, #{color.blue($color)};
+  // @return #{color.channel($color, "red", $space: rgb)}, #{color.channel($color, "green", $space: rgb)},
+  //   #{color.channel($color, "blue", $space: rgb)};
+}

package/chip/index.scss

@@ -28,7 +28,7 @@
   }
 
   &-solid {
-    --color: white;
+    --color: var(--color-contrast);
     --background: rgba(var(--color-rgb), 1);
   }
 
@@ -45,33 +45,41 @@
 
   &-primary {
     --color-rgb: var(--color-primary-rgb);
+    --color-contrast: var(--color-primary-contrast);
   }
 
   &-secondary {
     --color-rgb: var(--color-secondary-rgb);
+    --color-contrast: var(--color-secondary-contrast);
   }
 
   &-danger {
     --color-rgb: var(--color-danger-rgb);
+    --color-contrast: var(--color-danger-contrast);
   }
 
   &-success {
     --color-rgb: var(--color-success-rgb);
+    --color-contrast: var(--color-success-contrast);
   }
 
   &-warning {
     --color-rgb: var(--color-warning-rgb);
+    --color-contrast: var(--color-warning-contrast);
   }
 
   &-info {
     --color-rgb: var(--color-info-rgb);
+    --color-contrast: var(--color-info-contrast);
   }
 
   &-light {
     --color-rgb: var(--color-light-rgb);
+    --color-contrast: var(--color-light-contrast);
   }
 
   &-dark {
     --color-rgb: var(--color-dark-rgb);
+    --color-contrast: var(--color-dark-contrast);
   }
 }

package/fab/index.scss

@@ -1,5 +1,6 @@
 .sun-fab {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 54px;

package/index.scss

@@ -1,3 +1,3 @@
-@use "color";
+@forward "color";
 @use "wx";
 @use "sun";

package/index19.js

@@ -1,5 +1,5 @@
 import { renderSlot as r, mergeProps as o, openBlock as t, createElementBlock as n } from "vue";
-import c from "./index25.js";
+import c from "./index31.js";
 const s = {}, l = r, a = o, f = t, _ = n;
 function m(e, p) {
   return f(), _("view", a(e.$attrs, { class: "sun-fab" }), [

package/index20.js

@@ -1,5 +1,5 @@
 import { renderSlot as o, mergeProps as r, openBlock as t, createElementBlock as s } from "vue";
-import n from "./index25.js";
+import n from "./index31.js";
 const c = {}, l = o, m = r, _ = t, a = s;
 function u(e, d) {
   return _(), a("view", m(e.$attrs, { class: "sun-sudoku-item" }), [

package/index22.js

@@ -1,4 +1,4 @@
-import f from "./index5.js";
+import f from "./index4.js";
 export {
   f as default
 };

package/index23.js

@@ -1,4 +1,4 @@
-import f from "./index4.js";
+import f from "./index5.js";
 export {
   f as default
 };

package/index24.js

@@ -1,4 +1,4 @@
-import f from "./index6.js";
+import f from "./index9.js";
 export {
   f as default
 };

package/index25.js

@@ -1,9 +1,4 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
+import f from "./index15.js";
 export {
-  s as default
+  f as default
 };

package/index26.js

@@ -1,4 +1,4 @@
-import f from "./index7.js";
+import f from "./index16.js";
 export {
   f as default
 };

package/index27.js

@@ -1,4 +1,4 @@
-import f from "./index9.js";
+import f from "./index17.js";
 export {
   f as default
 };

package/index28.js

@@ -1,4 +1,4 @@
-import f from "./index8.js";
+import f from "./index10.js";
 export {
   f as default
 };

package/index29.js

@@ -1,4 +1,4 @@
-import f from "./index14.js";
+import f from "./index18.js";
 export {
   f as default
 };

package/index30.js

@@ -1,4 +1,4 @@
-import f from "./index11.js";
+import f from "./index7.js";
 export {
   f as default
 };

package/index31.js

@@ -1,4 +1,9 @@
-import f from "./index12.js";
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
 export {
-  f as default
+  s as default
 };

package/index32.js

@@ -1,4 +1,4 @@
-import f from "./index10.js";
+import f from "./index14.js";
 export {
   f as default
 };

package/index33.js

@@ -1,4 +1,4 @@
-import f from "./index13.js";
+import f from "./index6.js";
 export {
   f as default
 };

package/index34.js

@@ -1,4 +1,4 @@
-import f from "./index15.js";
+import f from "./index13.js";
 export {
   f as default
 };

package/index35.js

@@ -1,4 +1,4 @@
-import f from "./index16.js";
+import f from "./index11.js";
 export {
   f as default
 };

package/index36.js

@@ -1,4 +1,4 @@
-import f from "./index17.js";
+import f from "./index12.js";
 export {
   f as default
 };

package/index37.js

@@ -1,4 +1,4 @@
-import f from "./index18.js";
+import f from "./index8.js";
 export {
   f as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solar-taro/ui-sun",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/tailwind.js

@@ -0,0 +1,64 @@
+module.exports = {
+  colors: {
+    primary: {
+      DEFAULT: 'var(--color-primary)',
+      contrast: 'var(--color-primary-contrast)',
+      tint: 'var(--color-primary-tint)',
+      shade: 'var(--color-primary-shade)',
+    },
+    secondary: {
+      DEFAULT: 'var(--color-secondary)',
+      contrast: 'var(--color-secondary-contrast)',
+      tint: 'var(--color-secondary-tint)',
+      shade: 'var(--color-secondary-shade)',
+    },
+    success: {
+      DEFAULT: 'var(--color-success)',
+      contrast: 'var(--color-success-contrast)',
+      tint: 'var(--color-success-tint)',
+      shade: 'var(--color-success-shade)',
+    },
+    warning: {
+      DEFAULT: 'var(--color-warning)',
+      contrast: 'var(--color-warning-contrast)',
+      tint: 'var(--color-warning-tint)',
+      shade: 'var(--color-warning-shade)',
+    },
+    danger: {
+      DEFAULT: 'var(--color-danger)',
+      contrast: 'var(--color-danger-contrast)',
+      tint: 'var(--color-danger-tint)',
+      shade: 'var(--color-danger-shade)',
+    },
+    medium: {
+      DEFAULT: 'var(--color-medium)',
+      contrast: 'var(--color-medium-contrast)',
+      tint: 'var(--color-medium-tint)',
+      shade: 'var(--color-medium-shade)',
+    },
+    light: {
+      DEFAULT: 'var(--color-light)',
+      contrast: 'var(--color-light-contrast)',
+      tint: 'var(--color-light-tint)',
+      shade: 'var(--color-light-shade)',
+    },
+    dark: {
+      DEFAULT: 'var(--color-dark)',
+      contrast: 'var(--color-dark-contrast)',
+      tint: 'var(--color-dark-tint)',
+      shade: 'var(--color-dark-shade)',
+    },
+    white: {
+      DEFAULT: 'var(--color-white)',
+      contrast: 'var(--color-white-contrast)',
+      tint: 'var(--color-white-tint)',
+      shade: 'var(--color-white-shade)',
+    },
+    black: {
+      DEFAULT: 'var(--color-black)',
+      contrast: 'var(--color-black-contrast)',
+      tint: 'var(--color-black-tint)',
+      shade: 'var(--color-black-shade)',
+    },
+  }
+}