🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@cherryport/tokens

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cherryport/tokens - npm Package Compare versions

Comparing version
0.2.1
 to
0.3.0
+1
-1
package.json
{
"name": "@cherryport/tokens",
"version": "0.2.1",
"version": "0.3.0",
"repository": {

@@ -5,0 +5,0 @@ "type": "git",

+36
-42
tokens.scss

@@ -1,39 +0,33 @@

$cp-ink: #0f172a;
$cp-ink-soft: #334155;
$cp-ink-subtle: #64748b;
$cp-ink-muted: #94a3b8;
$cp-ink: #1c1c1a;
$cp-ink-soft: #4a4a44;
$cp-ink-subtle: #6b6b64;
$cp-ink-muted: #9e9e94;
$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-muted: #fafaf9;
$cp-surface-hover: #f5f5f2;
$cp-surface-cool: #f0f4f8;
$cp-border: rgba(28, 28, 26, 0.08);
$cp-border-strong: rgba(28, 28, 26, 0.15);
$cp-overlay: rgba(28, 28, 26, 0.4);
$cp-surface-soft: rgba(255, 255, 255, 0.7);
$cp-brand: #ef4b4b;
$cp-brand-soft: #ff6b6b;
$cp-brand-strong: #c61f1f;
// New High-End Palette
$cp-brand: #d21f3c; /* Cherry Red */
$cp-brand-soft: #ff4d6d;
$cp-brand-strong: #b11a32;
$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-brand-tint-2: #fff5f5;
$cp-brand-glow: rgba(210, 31, 60, 0.2);
$cp-info: #2563eb;
$cp-info-soft: rgba(37, 99, 235, 0.12);
$cp-info-border: rgba(37, 99, 235, 0.35);
$cp-info: #0066cc;
$cp-info-soft: rgba(0, 102, 204, 0.08);
$cp-success: #16a34a;
$cp-success-soft: rgba(22, 163, 74, 0.12);
$cp-success-border: rgba(22, 163, 74, 0.35);
$cp-success: #1a8a3d;
$cp-success-soft: rgba(26, 138, 61, 0.08);
$cp-warning: #f59e0b;
$cp-warning-soft: rgba(245, 158, 11, 0.12);
$cp-warning-border: rgba(245, 158, 11, 0.4);
$cp-warning: #b36b00;
$cp-warning-soft: rgba(179, 107, 0, 0.08);
$cp-danger: #ef4444;
$cp-danger-soft: rgba(239, 68, 68, 0.12);
$cp-danger-border: rgba(239, 68, 68, 0.35);
$cp-danger: #d93025;
$cp-danger-soft: rgba(217, 48, 37, 0.08);

@@ -49,17 +43,17 @@ $cp-space-1: 4px;

$cp-radius-sm: 8px;
$cp-radius-md: 12px;
$cp-radius-lg: 16px;
$cp-radius-xl: 24px;
$cp-radius-md: 16px;
$cp-radius-lg: 24px;
$cp-radius-xl: 32px;
$cp-radius-pill: 999px;
$cp-radius-pill: 9999px;
$cp-shadow-sm: 0 2px 8px rgba(28, 28, 26, 0.04);
$cp-shadow-md: 0 12px 32px -8px rgba(28, 28, 26, 0.12);
$cp-shadow-lg: 0 24px 48px -12px rgba(28, 28, 26, 0.18);
$cp-shadow-brand: 0 12px 24px -4px rgba(210, 31, 60, 0.25);
$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.85);
$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);
$cp-motion-base: 200ms;
$cp-motion-slow: 300ms;
$cp-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
+72
-21
uni-base.scss

@@ -1,2 +0,1 @@

@import "@dcloudio/uni-ui/lib/uni-scss/variables.scss";
@import "@cherryport/tokens/tokens.scss";

@@ -10,36 +9,72 @@ @import "@cherryport/tokens/uni-layout.scss";

page {
background: $cp-surface-muted;
color: $cp-ink;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
--brand: #{$cp-brand};
--brand-dark: #{$cp-brand-strong};
--brand-soft: #{$cp-brand-soft};
--ink: #{$cp-ink};
--muted: #{$cp-ink-subtle};
--line: #{$cp-border};
--card: #{$cp-surface};
--bg: #{$cp-surface-muted};
--shadow: #{$cp-shadow-md};
--shadow-brand: #{$cp-shadow-brand};
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.5;
}
.btn-primary {
background: linear-gradient(135deg, $cp-ink-soft, $cp-ink);
background: linear-gradient(180deg, #{$cp-brand-soft} 0%, #{$cp-brand} 100%);
color: $cp-surface;
border-radius: $cp-radius-pill;
padding: 16rpx 28rpx;
font-size: 26rpx;
border-radius: $cp-radius-md;
font-weight: 600;
box-shadow: $cp-shadow-brand;
display: flex;
align-items: center;
justify-content: center;
transition: transform $cp-motion-base $cp-ease-out;
}
.btn-primary:active {
transform: scale(0.97);
opacity: 0.9;
}
.btn-ghost {
background: $cp-surface;
border: 1px solid $cp-border;
color: $cp-ink;
border-radius: $cp-radius-pill;
padding: 12rpx 22rpx;
font-size: 24rpx;
background: var(--card);
border: 1px solid var(--line);
border-radius: $cp-radius-md;
color: var(--ink);
}
button.btn-primary,
button.btn-ghost {
height: 88rpx;
padding: 0 40rpx;
font-size: 28rpx;
line-height: 1;
}
button {
border: none;
background: none;
margin: 0;
}
.card {
background: $cp-surface;
border-radius: 24rpx;
background: var(--card);
border-radius: $cp-radius-md;
box-shadow: $cp-shadow-sm;
border: 1px solid var(--line);
overflow: hidden;
}
.badge {
background: $cp-success-soft;
color: $cp-success;
padding: 4rpx 16rpx;
border-radius: 999rpx;
background: $cp-brand-tint-1;
color: $cp-brand;
padding: 4rpx 12rpx;
border-radius: $cp-radius-sm;
font-size: 22rpx;
font-weight: 500;
}

@@ -52,2 +87,7 @@

.badge-muted {
background: $cp-surface-muted;
color: $cp-ink-subtle;
}
.badge-danger {

@@ -58,4 +98,15 @@ background: $cp-danger-soft;

.chip {
display: inline-flex;
align-items: center;
gap: 6rpx;
padding: 6rpx 14rpx;
font-size: 22rpx;
border-radius: 999rpx;
background: $cp-warning-soft;
color: $cp-warning;
}
.text-muted {
color: $cp-ink-muted;
color: $cp-ink-subtle;
}
+27
-0
uni-layout.scss

@@ -28,1 +28,28 @@ .page {

}
.block {
padding: 20rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.block-tight {
gap: 12rpx;
}
.block-dense {
gap: 6rpx;
}
.block-loose {
gap: 18rpx;
}
.block-flat {
gap: 0;
}
.block-stack {
margin-bottom: 16rpx;
}