@reshape-biotech/design-system 2.7.34 → 2.7.36

package/dist/app.css

@@ -59,7 +59,7 @@
     font-style: normal;
     font-weight: 600;
     line-height: 4.5rem;
-    letter-spacing: -0.1em;
+    letter-spacing: -0.025em;
   }
 
   h2 {
@@ -68,7 +68,7 @@
     font-style: normal;
     font-weight: 600;
     line-height: 3rem;
-    letter-spacing: -0.05em;
+    letter-spacing: -0.025em;
   }
 
   h3 {

package/dist/components/button/Button.stories.svelte

@@ -21,6 +21,7 @@
     'transparent',
     'outline',
     'secondary-inverse',
+    'transparent-inverse',
   ];
   const sizes = ['xs', 'sm', 'md', 'lg'];
 </script>
@@ -28,15 +29,21 @@
 <Story name="Variants" asChild>
   <div class="flex flex-col gap-4">
     {#each variants as variant}
-      {#if variant === 'secondary-inverse'}
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
         <div class="bg-base-inverse p-4 text-primary-inverse">
           <p>{variant}</p>
-          <Button variant={variant as ButtonVariant}>Button</Button>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant}>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded>Button</Button>
+          </div>
         </div>
       {:else}
         <div>
           <p>{variant}</p>
-          <Button variant={variant as ButtonVariant}>Button</Button>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant}>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded>Button</Button>
+          </div>
         </div>
       {/if}
     {/each}
@@ -57,10 +64,23 @@
 <Story name="Disabled" asChild>
   <div class="flex flex-col gap-4">
     {#each variants as variant}
-      <div>
-        <p>{variant}</p>
-        <Button variant={variant as ButtonVariant} disabled>Button</Button>
-      </div>
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="bg-base-inverse p-4 text-primary-inverse">
+          <p>{variant}</p>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant} disabled>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
+          </div>
+        </div>
+      {:else}
+        <div>
+          <p>{variant}</p>
+          <div class="flex gap-4">
+            <Button variant={variant as ButtonVariant} disabled>Button</Button>
+            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
+          </div>
+        </div>
+      {/if}
     {/each}
   </div>
 </Story>

package/dist/components/button/Button.svelte

@@ -119,35 +119,14 @@
 
 .button:disabled {
 
-    border-color: transparent;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-.button:hover:disabled {
-
-    cursor: not-allowed;
-
-    background-color: #12192a0A;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+    cursor: not-allowed
 }
 
   .rounded {
 
-    border-radius: 9999px
+    border-radius: 9999px !important
 }
 
-  .disabled:hover {
-
-    background-color: #12192a0A !important
-}
   /* Size variants */
   .btn-size-xs {
 
@@ -220,6 +199,20 @@
 
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
+  .btn-primary:disabled {
+
+    border-color: transparent;
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-primary:hover:disabled {
+
+    background-color: #12192a0A
+}
 
   .btn-secondary {
 
@@ -239,6 +232,22 @@
 
     background-color: #12192a0A
 }
+
+  .btn-secondary:disabled {
+
+    border-color: transparent;
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+  .btn-secondary:hover:disabled {
+
+    background-color: #12192a0A
+}
   .btn-transparent {
 
     background-color: transparent;
@@ -248,6 +257,18 @@
   .btn-transparent:hover {
 
     background-color: #12192a0A
+}
+  .btn-transparent:disabled {
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-transparent:hover:disabled {
+
+    background-color: transparent
 }
   .btn-danger {
 
@@ -272,6 +293,20 @@
     --tw-bg-opacity: 1;
 
     background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+  .btn-danger:disabled {
+
+    border-color: transparent;
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-danger:hover:disabled {
+
+    background-color: #12192a0A
 }
   .btn-outline {
 
@@ -303,7 +338,29 @@
 }
   .btn-outline:disabled {
 
-    border-style: none
+    border-color: #12192a14;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 0 #0000;
+
+    --tw-shadow-colored: 0 0 #0000;
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+  .btn-outline:hover:disabled {
+
+    border-color: #12192a14;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
 }
   .btn-secondary-inverse {
 
@@ -321,6 +378,20 @@
 
     background-color: #FFFFFF0D
 }
+  .btn-secondary-inverse:disabled {
+
+    border-color: transparent;
+
+    background-color: #FFFFFF0D;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-secondary-inverse:hover:disabled {
+
+    background-color: #FFFFFF0D
+}
   .btn-transparent-inverse {
 
     background-color: transparent;
@@ -336,5 +407,17 @@
   .btn-transparent-inverse:active {
 
     background-color: #FFFFFF0D
+}
+  .btn-transparent-inverse:disabled {
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+  .btn-transparent-inverse:hover:disabled {
+
+    background-color: transparent
 }
 </style>