@cherryport/tokens - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

uni-base.scss

+@import "@dcloudio/uni-ui/lib/uni-scss/variables.scss";
+@import "@cherryport/tokens/tokens.scss";
+
+:root {
+  color-scheme: light;
+}
+
+page {
+  background: $cp-surface-muted;
+  color: $cp-ink;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, $cp-ink-soft, $cp-ink);
+  color: $cp-surface;
+  border-radius: $cp-radius-pill;
+  padding: 16rpx 28rpx;
+  font-size: 26rpx;
+}
+
+.btn-ghost {
+  background: $cp-surface;
+  border: 1px solid $cp-border;
+  color: $cp-ink;
+  border-radius: $cp-radius-pill;
+  padding: 12rpx 22rpx;
+  font-size: 24rpx;
+}
+
+.card {
+  background: $cp-surface;
+  border-radius: 24rpx;
+  box-shadow: $cp-shadow-sm;
+}
+
+.badge {
+  background: $cp-success-soft;
+  color: $cp-success;
+  padding: 4rpx 16rpx;
+  border-radius: 999rpx;
+  font-size: 22rpx;
+}
+
+.badge-warning {
+  background: $cp-warning-soft;
+  color: $cp-warning;
+}
+
+.badge-danger {
+  background: $cp-danger-soft;
+  color: $cp-danger;
+}
+
+.text-muted {
+  color: $cp-ink-muted;
+}

package.json

 {
   "name": "@cherryport/tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cherryport/cherry.git",
+    "directory": "packages/tokens"
+  },
   "description": "design tokens for cherryport apps",
@@ -13,2 +18,3 @@ "license": "MIT",
     "tokens.scss",
+    "uni-base.scss",
     "README.md"
@@ -18,3 +24,4 @@ ],
     "./tokens.css": "./tokens.css",
-    "./tokens.scss": "./tokens.scss"
+    "./tokens.scss": "./tokens.scss",
+    "./uni-base.scss": "./uni-base.scss"
   },
@@ -21,0 +28,0 @@ "publishConfig": {

tokens.css

@@ -1,9 +0,68 @@
-:root {
+:root,
+/* biome-ignore lint/correctness/noUnknownTypeSelector: uni-app uses the `page` selector */
+page {
   --cp-ink: #0f172a;
+  --cp-ink-soft: #334155;
+  --cp-ink-subtle: #64748b;
   --cp-ink-muted: #94a3b8;
   --cp-surface: #ffffff;
   --cp-surface-muted: #f8fafc;
+  --cp-surface-hover: #f1f1f1;
+  --cp-surface-cool: #eef2ff;
   --cp-border: #e2e8f0;
+  --cp-overlay: rgba(0, 0, 0, 0.4);
+  --cp-surface-soft: rgba(255, 255, 255, 0.7);
 
+  --cp-brand: #ef4b4b;
+  --cp-brand-soft: #ff6b6b;
+  --cp-brand-strong: #c61f1f;
+  --cp-brand-tint-1: #fff1f2;
+  --cp-brand-tint-2: #fef3c7;
+  --cp-brand-tint-3: #ecfccb;
+  --cp-brand-tint-4: #fde68a;
+  --cp-brand-tint-5: #fca5a5;
+  --cp-brand-tint-6: #fecdd3;
+  --cp-brand-glow: rgba(239, 75, 75, 0.25);
+
+  --cp-info: #2563eb;
+  --cp-info-soft: rgba(37, 99, 235, 0.12);
+  --cp-info-border: rgba(37, 99, 235, 0.35);
+
+  --cp-success: #16a34a;
+  --cp-success-soft: rgba(22, 163, 74, 0.12);
+  --cp-success-border: rgba(22, 163, 74, 0.35);
+
+  --cp-warning: #f59e0b;
+  --cp-warning-soft: rgba(245, 158, 11, 0.12);
+  --cp-warning-border: rgba(245, 158, 11, 0.4);
+
+  --cp-danger: #ef4444;
+  --cp-danger-soft: rgba(239, 68, 68, 0.12);
+  --cp-danger-border: rgba(239, 68, 68, 0.35);
+
+  --cp-space-1: 4px;
+  --cp-space-2: 8px;
+  --cp-space-3: 12px;
+  --cp-space-4: 16px;
+  --cp-space-5: 20px;
+  --cp-space-6: 24px;
+  --cp-space-8: 32px;
+
+  --cp-radius-sm: 8px;
+  --cp-radius-md: 12px;
+  --cp-radius-lg: 16px;
+  --cp-radius-xl: 24px;
+
   --cp-radius-pill: 9999px;
+
+  --cp-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
+  --cp-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.12);
+  --cp-shadow-brand: 0 12px 24px rgba(239, 75, 75, 0.25);
+
+  --cp-surface-glass: rgba(255, 255, 255, 0.92);
+
+  --cp-motion-fast: 120ms;
+  --cp-motion-base: 180ms;
+  --cp-motion-slow: 260ms;
+  --cp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 }

tokens.scss

 $cp-ink: #0f172a;
+$cp-ink-soft: #334155;
+$cp-ink-subtle: #64748b;
 $cp-ink-muted: #94a3b8;
 $cp-surface: #ffffff;
 $cp-surface-muted: #f8fafc;
+$cp-surface-hover: #f1f1f1;
+$cp-surface-cool: #eef2ff;
 $cp-border: #e2e8f0;
+$cp-overlay: rgba(0, 0, 0, 0.4);
+$cp-surface-soft: rgba(255, 255, 255, 0.7);
 
+$cp-brand: #ef4b4b;
+$cp-brand-soft: #ff6b6b;
+$cp-brand-strong: #c61f1f;
+$cp-brand-tint-1: #fff1f2;
+$cp-brand-tint-2: #fef3c7;
+$cp-brand-tint-3: #ecfccb;
+$cp-brand-tint-4: #fde68a;
+$cp-brand-tint-5: #fca5a5;
+$cp-brand-tint-6: #fecdd3;
+$cp-brand-glow: rgba(239, 75, 75, 0.25);
+
+$cp-info: #2563eb;
+$cp-info-soft: rgba(37, 99, 235, 0.12);
+$cp-info-border: rgba(37, 99, 235, 0.35);
+
+$cp-success: #16a34a;
+$cp-success-soft: rgba(22, 163, 74, 0.12);
+$cp-success-border: rgba(22, 163, 74, 0.35);
+
+$cp-warning: #f59e0b;
+$cp-warning-soft: rgba(245, 158, 11, 0.12);
+$cp-warning-border: rgba(245, 158, 11, 0.4);
+
+$cp-danger: #ef4444;
+$cp-danger-soft: rgba(239, 68, 68, 0.12);
+$cp-danger-border: rgba(239, 68, 68, 0.35);
+
+$cp-space-1: 4px;
+$cp-space-2: 8px;
+$cp-space-3: 12px;
+$cp-space-4: 16px;
+$cp-space-5: 20px;
+$cp-space-6: 24px;
+$cp-space-8: 32px;
+
+$cp-radius-sm: 8px;
+$cp-radius-md: 12px;
+$cp-radius-lg: 16px;
+$cp-radius-xl: 24px;
+
 $cp-radius-pill: 9999px;
+
+$cp-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
+$cp-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.12);
+$cp-shadow-brand: 0 12px 24px rgba(239, 75, 75, 0.25);
+
+$cp-surface-glass: rgba(255, 255, 255, 0.92);
+
+$cp-motion-fast: 120ms;
+$cp-motion-base: 180ms;
+$cp-motion-slow: 260ms;
+$cp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Improved metrics

Total package byte prevSize

5223

468.34%

Number of package files

5

25%

Lines of code

57

612.5%

Number of low supply chain risk alerts

0

-100%

Number of medium supply chain risk alerts

0

-100%

No dependency changes