@bagelink/vue 1.12.36 → 1.12.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.12.36",
+  "version": "1.12.38",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -90,7 +90,7 @@
     "signature_pad": "^5.0.9",
     "vue-i18n": "^11.2.8",
     "vue-toastification": "^2.0.0-rc.5",
-    "@bagelink/utils": "1.12.36"
+    "@bagelink/utils": "1.12.38"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/styles/base-colors.css

@@ -214,6 +214,12 @@
 }
 
 /* 10% Variants (lightest) */
+.pair-primary-10 {
+    background-color: var(--bgl-primary-10);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-10);
+}
+
 .pair-blue-10 {
     background-color: var(--bgl-blue-10);
     color: var(--bgl-black);
@@ -335,6 +341,12 @@
     border-color: var(--bgl-pink-10);
 }
 
+.pair-primary-10-alt {
+    background-color: var(--bgl-primary-10);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-10);
+}
+
 /* 20% Variants */
 .pair-blue-20 {
     background-color: var(--bgl-blue-20);
@@ -402,6 +414,12 @@
     border-color: var(--bgl-pink-20);
 }
 
+.pair-primary-20 {
+    background-color: var(--bgl-primary-20);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-20);
+}
+
 /* 20% Alt Variants (colored text) */
 .pair-blue-20-alt {
     background-color: var(--bgl-blue-20);
@@ -457,6 +475,12 @@
     border-color: var(--bgl-pink-20);
 }
 
+.pair-primary-20-alt {
+    background-color: var(--bgl-primary-20);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-20);
+}
+
 /* 30% Variants */
 .pair-blue-30 {
     background-color: var(--bgl-blue-30);
@@ -524,6 +548,12 @@
     border-color: var(--bgl-pink-30);
 }
 
+.pair-primary-30 {
+    background-color: var(--bgl-primary-30);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-30);
+}
+
 /* 30% Alt Variants (colored text) */
 .pair-blue-30-alt {
     background-color: var(--bgl-blue-30);
@@ -579,6 +609,12 @@
     border-color: var(--bgl-pink-30);
 }
 
+.pair-primary-30-alt {
+    background-color: var(--bgl-primary-30);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-30);
+}
+
 /* 40% Variants */
 .pair-blue-40 {
     background-color: var(--bgl-blue-40);
@@ -646,6 +682,12 @@
     border-color: var(--bgl-pink-40);
 }
 
+.pair-primary-40 {
+    background-color: var(--bgl-primary-40);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-40);
+}
+
 /* 40% Alt Variants (colored text) */
 .pair-blue-40-alt {
     background-color: var(--bgl-blue-40);
@@ -701,6 +743,12 @@
     border-color: var(--bgl-pink-40);
 }
 
+.pair-primary-40-alt {
+    background-color: var(--bgl-primary-40);
+    color: var(--bgl-primary);
+    border-color: var(--bgl-primary-40);
+}
+
 /* 50% Variants */
 .pair-blue-50 {
     background-color: var(--bgl-blue-50);
@@ -768,6 +816,12 @@
     border-color: var(--bgl-pink-50);
 }
 
+.pair-primary-50 {
+    background-color: var(--bgl-primary-50);
+    color: var(--bgl-black);
+    border-color: var(--bgl-primary-50);
+}
+
 /* 50% Alt Variants (colored text) - none needed as all are already black text in 50% */
 
 /* 60% Variants */
@@ -837,6 +891,12 @@
     border-color: var(--bgl-pink-60);
 }
 
+.pair-primary-60 {
+    background-color: var(--bgl-primary-60);
+    color: var(--bgl-white);
+    border-color: var(--bgl-primary-60);
+}
+
 /* 70%-130% Variants (darker colors with white text) */
 .pair-blue-70,
 .pair-blue-80,
@@ -948,6 +1008,16 @@
     color: var(--bgl-white);
 }
 
+.pair-primary-70,
+.pair-primary-80,
+.pair-primary-90,
+.pair-primary-100,
+.pair-primary-110,
+.pair-primary-120,
+.pair-primary-130 {
+    color: var(--bgl-white);
+}
+
 /* Individual background definitions for 70%-130% */
 .pair-blue-70 {
     background-color: var(--bgl-blue-70);
@@ -1004,6 +1074,11 @@
     border-color: var(--bgl-pink-70);
 }
 
+.pair-primary-70 {
+    background-color: var(--bgl-primary-70);
+    border-color: var(--bgl-primary-70);
+}
+
 .pair-blue-80 {
     background-color: var(--bgl-blue-80);
     border-color: var(--bgl-blue-80);
@@ -1059,6 +1134,11 @@
     border-color: var(--bgl-pink-80);
 }
 
+.pair-primary-80 {
+    background-color: var(--bgl-primary-80);
+    border-color: var(--bgl-primary-80);
+}
+
 .pair-blue-90 {
     background-color: var(--bgl-blue-90);
     border-color: var(--bgl-blue-90);
@@ -1114,6 +1194,11 @@
     border-color: var(--bgl-pink-90);
 }
 
+.pair-primary-90 {
+    background-color: var(--bgl-primary-90);
+    border-color: var(--bgl-primary-90);
+}
+
 .pair-blue-100 {
     background-color: var(--bgl-blue-100);
     border-color: var(--bgl-blue-100);
@@ -1169,6 +1254,11 @@
     border-color: var(--bgl-pink-100);
 }
 
+.pair-primary-100 {
+    background-color: var(--bgl-primary-100);
+    border-color: var(--bgl-primary-100);
+}
+
 .pair-blue-110 {
     background-color: var(--bgl-blue-110);
     border-color: var(--bgl-blue-110);
@@ -1224,6 +1314,11 @@
     border-color: var(--bgl-pink-110);
 }
 
+.pair-primary-110 {
+    background-color: var(--bgl-primary-110);
+    border-color: var(--bgl-primary-110);
+}
+
 .pair-blue-120 {
     background-color: var(--bgl-blue-120);
     border-color: var(--bgl-blue-120);
@@ -1279,6 +1374,11 @@
     border-color: var(--bgl-pink-120);
 }
 
+.pair-primary-120 {
+    background-color: var(--bgl-primary-120);
+    border-color: var(--bgl-primary-120);
+}
+
 .pair-blue-130 {
     background-color: var(--bgl-blue-130);
     border-color: var(--bgl-blue-130);
@@ -1334,6 +1434,11 @@
     border-color: var(--bgl-pink-130);
 }
 
+.pair-primary-130 {
+    background-color: var(--bgl-primary-130);
+    border-color: var(--bgl-primary-130);
+}
+
 /* Alt Variants - With colored text */
 
 /* Semantic Light Variants */

package/src/styles/colors.css

@@ -1063,6 +1063,30 @@
     color: var(--bgl-pink-10) !important;
 }
 
+.bg-primary-10 {
+    background: var(--bgl-primary-10) !important;
+    --alpha-color: var(--bgl-primary-10);
+}
+
+.color-primary-10 {
+    color: var(--bgl-primary-10) !important;
+}
+
+.bg-input-primary-10 input,
+.bg-input-primary-10 textarea,
+.bg-input-primary-10 .selectinput-btn {
+    background: var(--bgl-primary-10) !important;
+    --alpha-color: var(--bgl-primary-10);
+}
+
+.border-primary-10 {
+    border-color: var(--bgl-primary-10) !important;
+}
+
+.color-input-primary-10 input {
+    color: var(--bgl-primary-10) !important;
+}
+
 /* Color Variations - 20% */
 .bg-blue-20 {
     background: var(--bgl-blue-20) !important;
@@ -1328,6 +1352,30 @@
     color: var(--bgl-pink-20) !important;
 }
 
+.bg-primary-20 {
+    background: var(--bgl-primary-20) !important;
+    --alpha-color: var(--bgl-primary-20);
+}
+
+.color-primary-20 {
+    color: var(--bgl-primary-20) !important;
+}
+
+.bg-input-primary-20 input,
+.bg-input-primary-20 textarea,
+.bg-input-primary-20 .selectinput-btn {
+    background: var(--bgl-primary-20) !important;
+    --alpha-color: var(--bgl-primary-20);
+}
+
+.border-primary-20 {
+    border-color: var(--bgl-primary-20) !important;
+}
+
+.color-input-primary-20 input {
+    color: var(--bgl-primary-20) !important;
+}
+
 /* Color Variations - 30% */
 .bg-blue-30 {
     background: var(--bgl-blue-30) !important;
@@ -1593,6 +1641,30 @@
     color: var(--bgl-pink-30) !important;
 }
 
+.bg-primary-30 {
+    background: var(--bgl-primary-30) !important;
+    --alpha-color: var(--bgl-primary-30);
+}
+
+.color-primary-30 {
+    color: var(--bgl-primary-30) !important;
+}
+
+.bg-input-primary-30 input,
+.bg-input-primary-30 textarea,
+.bg-input-primary-30 .selectinput-btn {
+    background: var(--bgl-primary-30) !important;
+    --alpha-color: var(--bgl-primary-30);
+}
+
+.border-primary-30 {
+    border-color: var(--bgl-primary-30) !important;
+}
+
+.color-input-primary-30 input {
+    color: var(--bgl-primary-30) !important;
+}
+
 /* Color Variations - 40% & 50% */
 /* 40% */
 .bg-blue-40 {
@@ -1859,6 +1931,30 @@
     color: var(--bgl-pink-40) !important;
 }
 
+.bg-primary-40 {
+    background: var(--bgl-primary-40) !important;
+    --alpha-color: var(--bgl-primary-40);
+}
+
+.color-primary-40 {
+    color: var(--bgl-primary-40) !important;
+}
+
+.bg-input-primary-40 input,
+.bg-input-primary-40 textarea,
+.bg-input-primary-40 .selectinput-btn {
+    background: var(--bgl-primary-40) !important;
+    --alpha-color: var(--bgl-primary-40);
+}
+
+.border-primary-40 {
+    border-color: var(--bgl-primary-40) !important;
+}
+
+.color-input-primary-40 input {
+    color: var(--bgl-primary-40) !important;
+}
+
 /* Color Variations - 50% */
 .bg-blue-50 {
     background: var(--bgl-blue-50) !important;
@@ -2124,6 +2220,30 @@
     color: var(--bgl-pink-50) !important;
 }
 
+.bg-primary-50 {
+    background: var(--bgl-primary-50) !important;
+    --alpha-color: var(--bgl-primary-50);
+}
+
+.color-primary-50 {
+    color: var(--bgl-primary-50) !important;
+}
+
+.bg-input-primary-50 input,
+.bg-input-primary-50 textarea,
+.bg-input-primary-50 .selectinput-btn {
+    background: var(--bgl-primary-50) !important;
+    --alpha-color: var(--bgl-primary-50);
+}
+
+.border-primary-50 {
+    border-color: var(--bgl-primary-50) !important;
+}
+
+.color-input-primary-50 input {
+    color: var(--bgl-primary-50) !important;
+}
+
 /* Color Variations - 60%, 70%, 80%, 90% */
 /* 60% */
 .bg-blue-60 {
@@ -2390,6 +2510,30 @@
     color: var(--bgl-pink-60) !important;
 }
 
+.bg-primary-60 {
+    background: var(--bgl-primary-60) !important;
+    --alpha-color: var(--bgl-primary-60);
+}
+
+.color-primary-60 {
+    color: var(--bgl-primary-60) !important;
+}
+
+.bg-input-primary-60 input,
+.bg-input-primary-60 textarea,
+.bg-input-primary-60 .selectinput-btn {
+    background: var(--bgl-primary-60) !important;
+    --alpha-color: var(--bgl-primary-60);
+}
+
+.border-primary-60 {
+    border-color: var(--bgl-primary-60) !important;
+}
+
+.color-input-primary-60 input {
+    color: var(--bgl-primary-60) !important;
+}
+
 /* 70% */
 .bg-blue-70 {
     background: var(--bgl-blue-70) !important;
@@ -2655,6 +2799,30 @@
     color: var(--bgl-pink-70) !important;
 }
 
+.bg-primary-70 {
+    background: var(--bgl-primary-70) !important;
+    --alpha-color: var(--bgl-primary-70);
+}
+
+.color-primary-70 {
+    color: var(--bgl-primary-70) !important;
+}
+
+.bg-input-primary-70 input,
+.bg-input-primary-70 textarea,
+.bg-input-primary-70 .selectinput-btn {
+    background: var(--bgl-primary-70) !important;
+    --alpha-color: var(--bgl-primary-70);
+}
+
+.border-primary-70 {
+    border-color: var(--bgl-primary-70) !important;
+}
+
+.color-input-primary-70 input {
+    color: var(--bgl-primary-70) !important;
+}
+
 /* Color Variations - 80% */
 .bg-blue-80 {
     background: var(--bgl-blue-80) !important;
@@ -2920,6 +3088,30 @@
     color: var(--bgl-pink-80) !important;
 }
 
+.bg-primary-80 {
+    background: var(--bgl-primary-80) !important;
+    --alpha-color: var(--bgl-primary-80);
+}
+
+.color-primary-80 {
+    color: var(--bgl-primary-80) !important;
+}
+
+.bg-input-primary-80 input,
+.bg-input-primary-80 textarea,
+.bg-input-primary-80 .selectinput-btn {
+    background: var(--bgl-primary-80) !important;
+    --alpha-color: var(--bgl-primary-80);
+}
+
+.border-primary-80 {
+    border-color: var(--bgl-primary-80) !important;
+}
+
+.color-input-primary-80 input {
+    color: var(--bgl-primary-80) !important;
+}
+
 /* Color Variations - 90% */
 .bg-blue-90 {
     background: var(--bgl-blue-90) !important;
@@ -3185,6 +3377,30 @@
     color: var(--bgl-pink-90) !important;
 }
 
+.bg-primary-90 {
+    background: var(--bgl-primary-90) !important;
+    --alpha-color: var(--bgl-primary-90);
+}
+
+.color-primary-90 {
+    color: var(--bgl-primary-90) !important;
+}
+
+.bg-input-primary-90 input,
+.bg-input-primary-90 textarea,
+.bg-input-primary-90 .selectinput-btn {
+    background: var(--bgl-primary-90) !important;
+    --alpha-color: var(--bgl-primary-90);
+}
+
+.border-primary-90 {
+    border-color: var(--bgl-primary-90) !important;
+}
+
+.color-input-primary-90 input {
+    color: var(--bgl-primary-90) !important;
+}
+
 /* Color Variations - 100%, 110%, 120%, 130% */
 /* 100% */
 .bg-blue-100 {
@@ -3451,6 +3667,30 @@
     color: var(--bgl-pink-100) !important;
 }
 
+.bg-primary-100 {
+    background: var(--bgl-primary-100) !important;
+    --alpha-color: var(--bgl-primary-100);
+}
+
+.color-primary-100 {
+    color: var(--bgl-primary-100) !important;
+}
+
+.bg-input-primary-100 input,
+.bg-input-primary-100 textarea,
+.bg-input-primary-100 .selectinput-btn {
+    background: var(--bgl-primary-100) !important;
+    --alpha-color: var(--bgl-primary-100);
+}
+
+.border-primary-100 {
+    border-color: var(--bgl-primary-100) !important;
+}
+
+.color-input-primary-100 input {
+    color: var(--bgl-primary-100) !important;
+}
+
 /* 110% */
 .bg-blue-110 {
     background: var(--bgl-blue-110) !important;
@@ -3716,6 +3956,30 @@
     color: var(--bgl-pink-110) !important;
 }
 
+.bg-primary-110 {
+    background: var(--bgl-primary-110) !important;
+    --alpha-color: var(--bgl-primary-110);
+}
+
+.color-primary-110 {
+    color: var(--bgl-primary-110) !important;
+}
+
+.bg-input-primary-110 input,
+.bg-input-primary-110 textarea,
+.bg-input-primary-110 .selectinput-btn {
+    background: var(--bgl-primary-110) !important;
+    --alpha-color: var(--bgl-primary-110);
+}
+
+.border-primary-110 {
+    border-color: var(--bgl-primary-110) !important;
+}
+
+.color-input-primary-110 input {
+    color: var(--bgl-primary-110) !important;
+}
+
 /* 120% */
 .bg-blue-120 {
     background: var(--bgl-blue-120) !important;
@@ -3981,6 +4245,30 @@
     color: var(--bgl-pink-120) !important;
 }
 
+.bg-primary-120 {
+    background: var(--bgl-primary-120) !important;
+    --alpha-color: var(--bgl-primary-120);
+}
+
+.color-primary-120 {
+    color: var(--bgl-primary-120) !important;
+}
+
+.bg-input-primary-120 input,
+.bg-input-primary-120 textarea,
+.bg-input-primary-120 .selectinput-btn {
+    background: var(--bgl-primary-120) !important;
+    --alpha-color: var(--bgl-primary-120);
+}
+
+.border-primary-120 {
+    border-color: var(--bgl-primary-120) !important;
+}
+
+.color-input-primary-120 input {
+    color: var(--bgl-primary-120) !important;
+}
+
 /* 130% */
 .bg-blue-130 {
     background: var(--bgl-blue-130) !important;
@@ -4246,6 +4534,30 @@
     color: var(--bgl-pink-130) !important;
 }
 
+.bg-primary-130 {
+    background: var(--bgl-primary-130) !important;
+    --alpha-color: var(--bgl-primary-130);
+}
+
+.color-primary-130 {
+    color: var(--bgl-primary-130) !important;
+}
+
+.bg-input-primary-130 input,
+.bg-input-primary-130 textarea,
+.bg-input-primary-130 .selectinput-btn {
+    background: var(--bgl-primary-130) !important;
+    --alpha-color: var(--bgl-primary-130);
+}
+
+.border-primary-130 {
+    border-color: var(--bgl-primary-130) !important;
+}
+
+.color-input-primary-130 input {
+    color: var(--bgl-primary-130) !important;
+}
+
 /* Alpha system using color-mix - works with existing bg- classes */
 .alpha-10 {
     background-color: color-mix(in srgb, var(--alpha-color, var(--bgl-primary)) 10%, transparent) !important;