@pequity/squirrel 5.4.0 → 5.4.1

package/dist/style.css

@@ -21,11 +21,11 @@ div[id^=popper_].dropdown .v-popper__inner {
 
     border-width: 1px;
 
-    border-color: var(--color-p-gray-30);
+    border-color: rgb(var(--color-p-gray-30));
 
-    background-color: var(--color-surface);
+    background-color: rgb(var(--color-surface));
 
-    color: var(--color-on-surface);
+    color: rgb(var(--color-on-surface));
 
     --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
@@ -59,7 +59,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-header {
 
     text-transform: uppercase;
 
-    color: var(--color-p-gray-40)
+    color: rgb(var(--color-p-gray-40))
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item {
 
@@ -90,7 +90,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item {
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:active,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.active {
 
-    background-color: var(--color-p-blue-15)
+    background-color: rgb(var(--color-p-blue-15))
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:active:hover,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:active:focus,
@@ -99,13 +99,13 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.active:
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.active:focus,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.active.focus {
 
-    background-color: var(--color-p-blue-15)
+    background-color: rgb(var(--color-p-blue-15))
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:hover,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:focus,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.focus {
 
-    background-color: var(--color-p-blue-10);
+    background-color: rgb(var(--color-p-blue-10));
 
     outline: 2px solid transparent;
 
@@ -116,14 +116,14 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.disable
 
     cursor: default;
 
-    color: var(--color-p-gray-40)
+    color: rgb(var(--color-p-gray-40))
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:disabled:hover,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item:disabled:focus,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.disabled:hover,
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-item.disabled:focus {
 
-    background-color: var(--color-surface)
+    background-color: rgb(var(--color-surface))
 }
 div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
 
@@ -137,7 +137,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
 
     border-top-width: 1px;
 
-    border-color: var(--color-p-gray-30);
+    border-color: rgb(var(--color-p-gray-30));
 
     opacity: 1
 }
@@ -148,30 +148,30 @@ input[type='checkbox'][data-v-01f2e2c0]:checked {
 .bg-cross[data-v-cb511035] {
   background-image: url("data:image/svg+xml,%3csvg%20width='6'%20height='6'%20viewBox='0%200%206%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2511_8629)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3%203.51667L5.42083%205.9375L5.9375%205.42083L3.51667%203L5.9375%200.57917L5.42083%200.0625L3%202.48333L0.57917%200.0625L0.0625%200.57917L2.48333%203L0.0625%205.42083L0.57917%205.9375L3%203.51667Z'%20fill='%231A123B'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2511_8629'%3e%3crect%20width='6'%20height='6'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
 }
-.drawer[data-v-a1affdb7] {
+.drawer[data-v-95d3e794] {
   position: fixed;
   bottom: 0px;
   top: 0px;
   display: flex;
   flex-direction: column;
-  background-color: var(--color-surface);
+  background-color: rgb(var(--color-surface));
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  max-width: var(--3e3927a8);
+  max-width: var(--508822d0);
   width: 100%;
 }
-.drawer.drawer-left[data-v-a1affdb7] {
+.drawer.drawer-left[data-v-95d3e794] {
   left: 0px;
 }
-.drawer.drawer-right[data-v-a1affdb7] {
+.drawer.drawer-right[data-v-95d3e794] {
   right: 0px;
 }
 
 /* Slide from right animations */
-@keyframes slideInRight-a1affdb7 {
+@keyframes slideInRight-95d3e794 {
 0% {
     transform: translate3d(100%, 0, 0);
     visibility: visible;
@@ -180,12 +180,12 @@ input[type='checkbox'][data-v-01f2e2c0]:checked {
     transform: translate3d(0, 0, 0);
 }
 }
-.slideInRight[data-v-a1affdb7] {
+.slideInRight[data-v-95d3e794] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: slideInRight-a1affdb7;
+  animation-name: slideInRight-95d3e794;
 }
-@keyframes slideOutRight-a1affdb7 {
+@keyframes slideOutRight-95d3e794 {
 0% {
     transform: translate3d(0, 0, 0);
 }
@@ -194,14 +194,14 @@ input[type='checkbox'][data-v-01f2e2c0]:checked {
     transform: translate3d(100%, 0, 0);
 }
 }
-.slideOutRight[data-v-a1affdb7] {
+.slideOutRight[data-v-95d3e794] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: slideOutRight-a1affdb7;
+  animation-name: slideOutRight-95d3e794;
 }
 
 /* Slide from left animations */
-@keyframes slideInLeft-a1affdb7 {
+@keyframes slideInLeft-95d3e794 {
 0% {
     transform: translate3d(-100%, 0, 0);
     visibility: visible;
@@ -210,12 +210,12 @@ input[type='checkbox'][data-v-01f2e2c0]:checked {
     transform: translate3d(0, 0, 0);
 }
 }
-.slideInLeft[data-v-a1affdb7] {
+.slideInLeft[data-v-95d3e794] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: slideInLeft-a1affdb7;
+  animation-name: slideInLeft-95d3e794;
 }
-@keyframes slideOutLeft-a1affdb7 {
+@keyframes slideOutLeft-95d3e794 {
 0% {
     transform: translate3d(0, 0, 0);
 }
@@ -224,25 +224,25 @@ input[type='checkbox'][data-v-01f2e2c0]:checked {
     transform: translate3d(-100%, 0, 0);
 }
 }
-.slideOutLeft[data-v-a1affdb7] {
+.slideOutLeft[data-v-95d3e794] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: slideOutLeft-a1affdb7;
+  animation-name: slideOutLeft-95d3e794;
 }
 
 /* Backdrop */
-.fadeIn[data-v-a1affdb7] {
-  animation-name: fadeInFrames-a1affdb7;
+.fadeIn[data-v-95d3e794] {
+  animation-name: fadeInFrames-95d3e794;
 }
-.fadeOut[data-v-a1affdb7] {
-  animation-name: fadeOutFrames-a1affdb7;
+.fadeOut[data-v-95d3e794] {
+  animation-name: fadeOutFrames-95d3e794;
 }
-.fadeIn[data-v-a1affdb7],
-.fadeOut[data-v-a1affdb7] {
+.fadeIn[data-v-95d3e794],
+.fadeOut[data-v-95d3e794] {
   animation-duration: 0.25s;
   animation-fill-mode: both;
 }
-@keyframes fadeInFrames-a1affdb7 {
+@keyframes fadeInFrames-95d3e794 {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -251,7 +251,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-a1affdb7 {
+@keyframes fadeOutFrames-95d3e794 {
 from {
     opacity: 1;
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -378,33 +378,33 @@ to {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
 }
-}.pm[data-v-7e6a0b8d] {
+}.pm[data-v-dd6e68e1] {
   width: calc(100% - 32px);
   min-width: 110px;
-  max-width: var(--4046568f);
+  max-width: var(--6f065855);
   max-height: calc(100vh - 32px);
 }
-.fadeIn[data-v-7e6a0b8d] {
+.fadeIn[data-v-dd6e68e1] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-7e6a0b8d;
+  animation-name: fadeInFrames-dd6e68e1;
   animation-fill-mode: both;
 }
-.fadeOut[data-v-7e6a0b8d] {
+.fadeOut[data-v-dd6e68e1] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-7e6a0b8d;
+  animation-name: fadeOutFrames-dd6e68e1;
   animation-fill-mode: both;
 }
-.slideInTop[data-v-7e6a0b8d] {
+.slideInTop[data-v-dd6e68e1] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-7e6a0b8d,slideInTopFrames-7e6a0b8d;
+  animation-name: fadeInFrames-dd6e68e1,slideInTopFrames-dd6e68e1;
   animation-fill-mode: both;
 }
-.slideOutTop[data-v-7e6a0b8d] {
+.slideOutTop[data-v-dd6e68e1] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-7e6a0b8d,slideOutTopFrames-7e6a0b8d;
+  animation-name: fadeOutFrames-dd6e68e1,slideOutTopFrames-dd6e68e1;
   animation-fill-mode: both;
 }
-@keyframes slideInTopFrames-7e6a0b8d {
+@keyframes slideInTopFrames-dd6e68e1 {
 from {
     transform: translate(0, -12px);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
@@ -413,7 +413,7 @@ to {
     transform: translate(0, 0);
 }
 }
-@keyframes slideOutTopFrames-7e6a0b8d {
+@keyframes slideOutTopFrames-dd6e68e1 {
 from {
     transform: translate(0, 0);
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -422,7 +422,7 @@ to {
     transform: translate(0, -12px);
 }
 }
-@keyframes fadeInFrames-7e6a0b8d {
+@keyframes fadeInFrames-dd6e68e1 {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -431,7 +431,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-7e6a0b8d {
+@keyframes fadeOutFrames-dd6e68e1 {
 from {
     opacity: 1;
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -461,7 +461,7 @@ to {
   left: 0px;
   height: 1px;
   width: 100%;
-  background-color: var(--color-p-gray-30);
+  background-color: rgb(var(--color-p-gray-30));
   --tw-content: "";
   content: var(--tw-content);
 }
@@ -1978,48 +1978,48 @@ to {
     border: 0;
   }:root {
   /* Design system colors */
-  --color-white: #fff;
-  --color-black: #000;
-  --color-night: #1a123b;
-  --color-barley-white: #fff5ce;
-  --color-horses-neck: #634816;
-  --color-active-blue: #0f45af;
+  --color-white: 255 255 255;
+  --color-black: 0 0 0;
+  --color-night: 26 18 59;
+  --color-barley-white: 255 245 206;
+  --color-horses-neck: 99 72 22;
+  --color-active-blue: 15 69 175;
   /* Pequity Colors */
-  --color-p-gray-10: #f5f5fa;
-  --color-p-gray-20: #e4e3e7;
-  --color-p-gray-30: #d6d4dc;
-  --color-p-gray-40: #918da1;
-  --color-p-gray-50: #767189;
-  --color-p-gray-60: #5e5a6e;
-  --color-p-gray-70: #474452;
-  --color-p-gray-80: #2f2d37;
-  --color-p-gray-90: #232229;
-  --color-p-gray-100: #0c0b0e;
-  --color-p-blue-10: #f5f5fa;
-  --color-p-blue-15: #e4edfa;
-  --color-p-blue-20: #e4e4f0;
-  --color-p-blue-30: #9999c9;
-  --color-p-blue-40: #6666ae;
-  --color-p-blue-50: #333393;
-  --color-p-blue-60: #000078;
-  --color-p-blue-70: #000060;
-  --color-p-blue-80: #000048;
-  --color-p-purple-10: #cdc5ed;
-  --color-p-purple-20: #a9a1c9;
-  --color-p-purple-30: #978fb8;
-  --color-p-purple-40: #857da6;
-  --color-p-purple-50: #625a82;
-  --color-p-purple-60: #1a123b;
-  --color-p-green-10: #e9f8f2;
-  --color-p-green-20: #bee9d7;
-  --color-p-green-30: #7dd2ae;
-  --color-p-green-40: #27b478;
-  --color-p-green-50: #176c48;
-  --color-p-red-10: #fef3f3;
-  --color-p-red-20: #f8b8b4;
-  --color-p-red-30: #f48882;
-  --color-p-red-40: #f45148;
-  --color-p-red-50: #f0453c;
+  --color-p-gray-10: 245 245 250;
+  --color-p-gray-20: 228 227 231;
+  --color-p-gray-30: 214 212 220;
+  --color-p-gray-40: 145 141 161;
+  --color-p-gray-50: 118 113 137;
+  --color-p-gray-60: 94 90 110;
+  --color-p-gray-70: 71 68 82;
+  --color-p-gray-80: 47 45 55;
+  --color-p-gray-90: 35 34 41;
+  --color-p-gray-100: 12 11 14;
+  --color-p-blue-10: 245 245 250;
+  --color-p-blue-15: 228 237 250;
+  --color-p-blue-20: 228 228 240;
+  --color-p-blue-30: 153 153 201;
+  --color-p-blue-40: 102 102 174;
+  --color-p-blue-50: 51 51 147;
+  --color-p-blue-60: 0 0 120;
+  --color-p-blue-70: 0 0 96;
+  --color-p-blue-80: 0 0 72;
+  --color-p-purple-10: 205 197 237;
+  --color-p-purple-20: 169 161 201;
+  --color-p-purple-30: 151 143 184;
+  --color-p-purple-40: 133 125 166;
+  --color-p-purple-50: 98 90 130;
+  --color-p-purple-60: 26 18 59;
+  --color-p-green-10: 233 248 242;
+  --color-p-green-20: 190 233 215;
+  --color-p-green-30: 125 210 174;
+  --color-p-green-40: 39 180 120;
+  --color-p-green-50: 23 108 72;
+  --color-p-red-10: 254 243 243;
+  --color-p-red-20: 248 184 180;
+  --color-p-red-30: 244 136 130;
+  --color-p-red-40: 244 81 72;
+  --color-p-red-50: 240 69 60;
   /* Aliases */
   --color-primary: var(--color-p-blue-60);
   --color-accent: var(--color-p-blue-70);
@@ -2099,7 +2099,7 @@ to {
   background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%208C0%209.58225%200.469192%2011.129%201.34824%2012.4446C2.22729%2013.7602%203.47672%2014.7855%204.93853%2015.391C6.40034%2015.9965%208.00887%2016.155%209.56072%2015.8463C11.1126%2015.5376%2012.538%2014.7757%2013.6569%2013.6569C14.7757%2012.538%2015.5376%2011.1126%2015.8463%209.56072C16.155%208.00887%2015.9965%206.40034%2015.391%204.93853C14.7855%203.47672%2013.7602%202.22729%2012.4446%201.34824C11.129%200.469192%209.58225%200%208%200C5.87827%200%203.84344%200.842855%202.34315%202.34315C0.842855%203.84344%200%205.87827%200%208ZM14.3333%208C14.3333%209.25262%2013.9619%2010.4771%2013.266%2011.5186C12.5701%2012.5601%2011.5809%2013.3719%2010.4237%2013.8512C9.2664%2014.3306%207.99298%2014.456%206.76443%2014.2116C5.53588%2013.9673%204.40739%2013.3641%203.52166%2012.4783C2.63592%2011.5926%202.03273%2010.4641%201.78836%209.23557C1.54399%208.00703%201.66941%206.7336%202.14876%205.57634C2.62812%204.41907%203.43988%203.42994%204.48139%202.73403C5.5229%202.03811%206.74739%201.66667%208%201.66667C9.67916%201.66843%2011.289%202.33626%2012.4764%203.52361C13.6637%204.71096%2014.3316%206.32084%2014.3333%208Z'%20fill='%23BB1410'%20/%3e%3cpath%20d='M5.88634%204.71322C5.73075%204.55763%205.51972%204.47021%205.29967%204.47021C5.07963%204.47021%204.8686%204.55763%204.71301%204.71322C4.55741%204.86881%204.47%205.07984%204.47%205.29989C4.47%205.51993%204.55741%205.73096%204.71301%205.88655L6.71301%207.88655C6.72914%207.9021%206.74197%207.92074%206.75073%207.94136C6.7595%207.96198%206.76401%207.98415%206.76401%208.00655C6.76401%208.02896%206.7595%208.05113%206.75073%208.07175C6.74197%208.09237%206.72914%208.11101%206.71301%208.12655L4.71301%2010.1266C4.63561%2010.2034%204.57417%2010.2948%204.53225%2010.3955C4.49033%2010.4962%204.46875%2010.6042%204.46875%2010.7132C4.46875%2010.8223%204.49033%2010.9303%204.53225%2011.031C4.57417%2011.1317%204.63561%2011.223%204.71301%2011.2999C4.78939%2011.3781%204.88063%2011.4403%204.98138%2011.4827C5.08213%2011.5251%205.19035%2011.547%205.29967%2011.547C5.409%2011.547%205.51721%2011.5251%205.61796%2011.4827C5.71871%2011.4403%205.80996%2011.3781%205.88634%2011.2999L7.88634%209.29989C7.91934%209.27037%207.96207%209.25405%208.00634%209.25405C8.05062%209.25405%208.09334%209.27037%208.12634%209.29989L10.1263%2011.2999C10.2027%2011.3781%2010.294%2011.4403%2010.3947%2011.4827C10.4955%2011.5251%2010.6037%2011.547%2010.713%2011.547C10.8223%2011.547%2010.9305%2011.5251%2011.0313%2011.4827C11.132%2011.4403%2011.2233%2011.3781%2011.2997%2011.2999C11.3771%2011.223%2011.4385%2011.1317%2011.4804%2011.031C11.5224%2010.9303%2011.5439%2010.8223%2011.5439%2010.7132C11.5439%2010.6042%2011.5224%2010.4962%2011.4804%2010.3955C11.4385%2010.2948%2011.3771%2010.2034%2011.2997%2010.1266L9.29967%208.12655C9.27016%208.09355%209.25384%208.05083%209.25384%208.00655C9.25384%207.96228%209.27016%207.91955%209.29967%207.88655L11.2997%205.88655C11.4553%205.73096%2011.5427%205.51993%2011.5427%205.29989C11.5427%205.07984%2011.4553%204.86881%2011.2997%204.71322C11.1441%204.55763%2010.9331%204.47021%2010.713%204.47021C10.493%204.47021%2010.2819%204.55763%2010.1263%204.71322L8.12634%206.71322C8.09334%206.74274%208.05062%206.75906%208.00634%206.75906C7.96207%206.75906%207.91934%206.74274%207.88634%206.71322L5.88634%204.71322Z'%20fill='%23BB1410'%20/%3e%3c/svg%3e");
 }
 .p-table[data-v-1d76cd98] {
-  color: var(--color-night);
+  color: rgb(var(--color-night));
   height: 1px;
 }
 .p-table th[data-v-1d76cd98] {

package/dist/tailwind/config.js

@@ -8,71 +8,71 @@ exports.config = {
             transparent: 'transparent',
             current: 'currentColor',
             /* Design system colors */
-            white: '#fff',
-            black: '#000',
-            night: 'var(--color-night)',
-            'barley-white': 'var(--color-barley-white)',
-            'horses-neck': 'var(--color-horses-neck)',
-            'active-blue': 'var(--color-active-blue)',
+            white: 'rgb(var(--color-white))',
+            black: 'rgb(var(--color-black))',
+            night: 'rgb(var(--color-night))',
+            'barley-white': 'rgb(var(--color-barley-white))',
+            'horses-neck': 'rgb(var(--color-horses-neck))',
+            'active-blue': 'rgb(var(--color-active-blue))',
             /* Pequity colors */
             'p-gray': {
-                10: 'var(--color-p-gray-10)',
-                20: 'var(--color-p-gray-20)',
-                30: 'var(--color-p-gray-30)',
-                40: 'var(--color-p-gray-40)',
-                50: 'var(--color-p-gray-50)',
-                60: 'var(--color-p-gray-60)',
-                70: 'var(--color-p-gray-70)',
-                80: 'var(--color-p-gray-80)',
-                90: 'var(--color-p-gray-90)',
-                100: 'var(--color-p-gray-100)',
+                10: 'rgb(var(--color-p-gray-10))',
+                20: 'rgb(var(--color-p-gray-20))',
+                30: 'rgb(var(--color-p-gray-30))',
+                40: 'rgb(var(--color-p-gray-40))',
+                50: 'rgb(var(--color-p-gray-50))',
+                60: 'rgb(var(--color-p-gray-60))',
+                70: 'rgb(var(--color-p-gray-70))',
+                80: 'rgb(var(--color-p-gray-80))',
+                90: 'rgb(var(--color-p-gray-90))',
+                100: 'rgb(var(--color-p-gray-100))',
             },
             'p-blue': {
-                10: 'var(--color-p-blue-10)',
-                15: 'var(--color-p-blue-15)',
-                20: 'var(--color-p-blue-20)',
-                30: 'var(--color-p-blue-30)',
-                40: 'var(--color-p-blue-40)',
-                50: 'var(--color-p-blue-50)',
-                60: 'var(--color-p-blue-60)',
-                70: 'var(--color-p-blue-70)',
-                80: 'var(--color-p-blue-80)',
+                10: 'rgb(var(--color-p-blue-10))',
+                15: 'rgb(var(--color-p-blue-15))',
+                20: 'rgb(var(--color-p-blue-20))',
+                30: 'rgb(var(--color-p-blue-30))',
+                40: 'rgb(var(--color-p-blue-40))',
+                50: 'rgb(var(--color-p-blue-50))',
+                60: 'rgb(var(--color-p-blue-60))',
+                70: 'rgb(var(--color-p-blue-70))',
+                80: 'rgb(var(--color-p-blue-80))',
             },
             'p-purple': {
-                10: 'var(--color-p-purple-10)',
-                20: 'var(--color-p-purple-20)',
-                30: 'var(--color-p-purple-30)',
-                40: 'var(--color-p-purple-40)',
-                50: 'var(--color-p-purple-50)',
-                60: 'var(--color-p-purple-60)',
+                10: 'rgb(var(--color-p-purple-10))',
+                20: 'rgb(var(--color-p-purple-20))',
+                30: 'rgb(var(--color-p-purple-30))',
+                40: 'rgb(var(--color-p-purple-40))',
+                50: 'rgb(var(--color-p-purple-50))',
+                60: 'rgb(var(--color-p-purple-60))',
             },
             'p-green': {
-                10: 'var(--color-p-green-10)',
-                20: 'var(--color-p-green-20)',
-                30: 'var(--color-p-green-30)',
-                40: 'var(--color-p-green-40)',
-                50: 'var(--color-p-green-50)',
+                10: 'rgb(var(--color-p-green-10))',
+                20: 'rgb(var(--color-p-green-20))',
+                30: 'rgb(var(--color-p-green-30))',
+                40: 'rgb(var(--color-p-green-40))',
+                50: 'rgb(var(--color-p-green-50))',
             },
             'p-red': {
-                10: 'var(--color-p-red-10)',
-                20: 'var(--color-p-red-20)',
-                30: 'var(--color-p-red-30)',
-                40: 'var(--color-p-red-40)',
-                50: 'var(--color-p-red-50)',
+                10: 'rgb(var(--color-p-red-10))',
+                20: 'rgb(var(--color-p-red-20))',
+                30: 'rgb(var(--color-p-red-30))',
+                40: 'rgb(var(--color-p-red-40))',
+                50: 'rgb(var(--color-p-red-50))',
             },
             /* Aliases */
-            primary: 'var(--color-primary)',
-            accent: 'var(--color-accent)',
-            surface: 'var(--color-surface)',
-            'on-surface': 'var(--color-on-surface)',
-            error: 'var(--color-error)',
-            'on-error': 'var(--color-on-error)',
-            info: 'var(--color-info)',
-            'on-info': 'var(--color-on-info)',
-            success: 'var(--color-success)',
-            'on-success': 'var(--color-on-success)',
-            warning: 'var(--color-warning)',
-            'on-warning': 'var(--color-on-warning)',
+            primary: 'rgb(var(--color-primary))',
+            accent: 'rgb(var(--color-accent))',
+            surface: 'rgb(var(--color-surface))',
+            'on-surface': 'rgb(var(--color-on-surface))',
+            error: 'rgb(var(--color-error))',
+            'on-error': 'rgb(var(--color-on-error))',
+            info: 'rgb(var(--color-info))',
+            'on-info': 'rgb(var(--color-on-info))',
+            success: 'rgb(var(--color-success))',
+            'on-success': 'rgb(var(--color-on-success))',
+            warning: 'rgb(var(--color-warning))',
+            'on-warning': 'rgb(var(--color-on-warning))',
         },
         fontFamily: {
             sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
@@ -91,7 +91,7 @@ exports.config = {
         },
         extend: {
             borderColor: {
-                DEFAULT: 'var(--color-p-gray-30)',
+                DEFAULT: 'rgb(var(--color-p-gray-30))',
             },
             spacing: {
                 7.5: '1.875rem',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "packageManager": "pnpm@9.11.0",
   "type": "module",
   "scripts": {
@@ -95,7 +95,7 @@
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
     "sass": "^1.79.3",
-    "semantic-release": "^24.1.1",
+    "semantic-release": "^24.1.2",
     "storybook": "^8.3.3",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.13",

package/squirrel/assets/squirrel.css

@@ -4,48 +4,48 @@
 
 :root {
   /* Design system colors */
-  --color-white: #fff;
-  --color-black: #000;
-  --color-night: #1a123b;
-  --color-barley-white: #fff5ce;
-  --color-horses-neck: #634816;
-  --color-active-blue: #0f45af;
+  --color-white: 255 255 255;
+  --color-black: 0 0 0;
+  --color-night: 26 18 59;
+  --color-barley-white: 255 245 206;
+  --color-horses-neck: 99 72 22;
+  --color-active-blue: 15 69 175;
   /* Pequity Colors */
-  --color-p-gray-10: #f5f5fa;
-  --color-p-gray-20: #e4e3e7;
-  --color-p-gray-30: #d6d4dc;
-  --color-p-gray-40: #918da1;
-  --color-p-gray-50: #767189;
-  --color-p-gray-60: #5e5a6e;
-  --color-p-gray-70: #474452;
-  --color-p-gray-80: #2f2d37;
-  --color-p-gray-90: #232229;
-  --color-p-gray-100: #0c0b0e;
-  --color-p-blue-10: #f5f5fa;
-  --color-p-blue-15: #e4edfa;
-  --color-p-blue-20: #e4e4f0;
-  --color-p-blue-30: #9999c9;
-  --color-p-blue-40: #6666ae;
-  --color-p-blue-50: #333393;
-  --color-p-blue-60: #000078;
-  --color-p-blue-70: #000060;
-  --color-p-blue-80: #000048;
-  --color-p-purple-10: #cdc5ed;
-  --color-p-purple-20: #a9a1c9;
-  --color-p-purple-30: #978fb8;
-  --color-p-purple-40: #857da6;
-  --color-p-purple-50: #625a82;
-  --color-p-purple-60: #1a123b;
-  --color-p-green-10: #e9f8f2;
-  --color-p-green-20: #bee9d7;
-  --color-p-green-30: #7dd2ae;
-  --color-p-green-40: #27b478;
-  --color-p-green-50: #176c48;
-  --color-p-red-10: #fef3f3;
-  --color-p-red-20: #f8b8b4;
-  --color-p-red-30: #f48882;
-  --color-p-red-40: #f45148;
-  --color-p-red-50: #f0453c;
+  --color-p-gray-10: 245 245 250;
+  --color-p-gray-20: 228 227 231;
+  --color-p-gray-30: 214 212 220;
+  --color-p-gray-40: 145 141 161;
+  --color-p-gray-50: 118 113 137;
+  --color-p-gray-60: 94 90 110;
+  --color-p-gray-70: 71 68 82;
+  --color-p-gray-80: 47 45 55;
+  --color-p-gray-90: 35 34 41;
+  --color-p-gray-100: 12 11 14;
+  --color-p-blue-10: 245 245 250;
+  --color-p-blue-15: 228 237 250;
+  --color-p-blue-20: 228 228 240;
+  --color-p-blue-30: 153 153 201;
+  --color-p-blue-40: 102 102 174;
+  --color-p-blue-50: 51 51 147;
+  --color-p-blue-60: 0 0 120;
+  --color-p-blue-70: 0 0 96;
+  --color-p-blue-80: 0 0 72;
+  --color-p-purple-10: 205 197 237;
+  --color-p-purple-20: 169 161 201;
+  --color-p-purple-30: 151 143 184;
+  --color-p-purple-40: 133 125 166;
+  --color-p-purple-50: 98 90 130;
+  --color-p-purple-60: 26 18 59;
+  --color-p-green-10: 233 248 242;
+  --color-p-green-20: 190 233 215;
+  --color-p-green-30: 125 210 174;
+  --color-p-green-40: 39 180 120;
+  --color-p-green-50: 23 108 72;
+  --color-p-red-10: 254 243 243;
+  --color-p-red-20: 248 184 180;
+  --color-p-red-30: 244 136 130;
+  --color-p-red-40: 244 81 72;
+  --color-p-red-50: 240 69 60;
   /* Aliases */
   --color-primary: var(--color-p-blue-60);
   --color-accent: var(--color-p-blue-70);

package/squirrel/components/p-alert/p-alert.spec.js

@@ -14,7 +14,7 @@ describe('PAlert.vue', () => {
     const path = wrapper.find('path');
 
     expect(classes.every((c) => alert.classes().includes(c))).toBe(true);
-    expect(path.attributes().fill).toBe(`var(--color-on-${type})`);
+    expect(path.attributes().fill).toBe(`rgb(var(--color-on-${type}))`);
   });
 
   it('renders slots for icon and content', async () => {

package/squirrel/components/p-drawer/p-drawer.vue

@@ -3,7 +3,7 @@
     <Transition name="pd-backdrop-transition" enter-active-class="fadeIn" leave-active-class="fadeOut">
       <div
         v-show="show && showBackdrop"
-        :class="['fixed bottom-0 left-0 right-0 top-0 bg-black bg-opacity-20', { 'cursor-pointer': enableClose }]"
+        :class="['fixed bottom-0 left-0 right-0 top-0 bg-black/20', { 'cursor-pointer': enableClose }]"
         :style="{ 'z-index': zIndex - 1 }"
         tabindex="-1"
         @click="close"

package/squirrel/components/p-modal/p-modal.vue

@@ -119,7 +119,7 @@ const props = defineProps({
   },
   bgClass: {
     type: [String, Object, Array] as PropType<StyleValue>,
-    default: 'fixed bottom-0 left-0 right-0 top-0 bg-black bg-opacity-20',
+    default: 'fixed bottom-0 left-0 right-0 top-0 bg-black/20',
   },
   wrapperClass: {
     type: [String, Object, Array] as PropType<StyleValue>,