testing tokens with buttons

.storybook/preview.tsx

@@ -24,6 +24,22 @@ const decorator = componentWrapperDecorator(
         ${story}
       </div>
     </ng-template>
+    <ng-template #lightPreviewNew>
+      <div
+        class="theme_light ui_refresh tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff] tw-px-5 tw-py-10 tw-mb-5"
+        *ngIf="theme == 'both' || theme == 'light'"
+      >
+        ${story}
+      </div>
+    </ng-template>
+    <ng-template #darkPreviewNew>
+      <div
+        class="theme_dark ui_refresh tw-border-2 tw-border-solid tw-bg-[#1f242e] tw-px-5 tw-py-10"
+        *ngIf="theme == 'both' || theme == 'dark'"
+      >
+        ${story}
+      </div>
+    </ng-template>
     <ng-template #nordPreview>
       <div
         class="theme_nord tw-border-2 tw-border-solid tw-bg-[#434C5E] tw-px-5 tw-py-10"
@@ -42,6 +58,8 @@ const decorator = componentWrapperDecorator(
 
     <ng-container *ngTemplateOutlet="lightPreview"></ng-container>
     <ng-container *ngTemplateOutlet="darkPreview"></ng-container>
+    <ng-container *ngTemplateOutlet="lightPreviewNew"></ng-container>
+    <ng-container *ngTemplateOutlet="darkPreviewNew"></ng-container>
     <ng-container *ngTemplateOutlet="nordPreview"></ng-container>
     <ng-container *ngTemplateOutlet="solarizedPreview"></ng-container>
   `;

libs/components/src/button/button.component.ts

@@ -17,9 +17,9 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "!tw-text-contrast",
     "hover:tw-bg-primary-700",
     "hover:tw-border-primary-700",
-    "disabled:tw-bg-primary-500/60",
-    "disabled:tw-border-primary-500/60",
-    "disabled:!tw-text-contrast/60",
+    "disabled:tw-bg-[--button-disabled-primary-bg]",
+    "disabled:tw-border-[--button-disabled-primary-bg]",
+    "disabled:!tw-text-[--button-disabled-primary-text]",
     "disabled:tw-bg-clip-padding",
     "disabled:tw-cursor-not-allowed",
     ...focusRing,
@@ -31,9 +31,9 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "hover:tw-bg-text-muted",
     "hover:tw-border-text-muted",
     "hover:!tw-text-contrast",
-    "disabled:tw-bg-transparent",
-    "disabled:tw-border-text-muted/60",
-    "disabled:!tw-text-muted/60",
+    "disabled:tw-bg-[--button-disabled-secondary-bg]",
+    "disabled:tw-border-[--button-disabled-secondary-border]",
+    "disabled:!tw-text-[--button-disabled-secondary-text]",
     "disabled:tw-cursor-not-allowed",
     ...focusRing,
   ],
@@ -64,9 +64,9 @@ export class ButtonComponent implements ButtonLikeAbstraction {
       "tw-font-semibold",
       "tw-py-1.5",
       "tw-px-3",
-      "tw-rounded",
+      "tw-rounded-[--button-border-radius]",
       "tw-transition",
-      "tw-border",
+      "!tw-border-[length:--button-border-width]",
       "tw-border-solid",
       "tw-text-center",
       "hover:tw-no-underline",

libs/components/src/button/button.stories.ts

@@ -24,7 +24,7 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button with some text</button>
       <a bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
     `,
   }),

libs/components/src/tw-theme.css

@@ -1,6 +1,7 @@
 @import "./reset.css";
 
 :root {
+  /* COLORS */
   --color-transparent-hover: rgb(0 0 0 / 0.03);
 
   --color-background: 255 255 255;
@@ -37,6 +38,26 @@
   --color-text-code: 192 17 118;
 
   --tw-ring-offset-color: #ffffff;
+
+  /* BUTTON COMPONENT */
+  --button-border-radius: theme(borderRadius.DEFAULT);
+  --button-border-width: theme(borderWidth.DEFAULT);
+  --button-disabled-primary-bg: rgb(var(--color-primary-500) / 0.6);
+  --button-disabled-primary-text: rgb(var(--color-text-contrast) / 0.6);
+  --button-disabled-secondary-bg: theme(colors.transparent.DEFAULT);
+  --button-disabled-secondary-border: rgb(var(--color-text-muted) / 0.6);
+  --button-disabled-secondary-text: rgb(var(--color-text-muted) / 0.6);
+
+  .ui_refresh {
+    /* BUTTON COMPONENT */
+    /* colors are temporary */
+    --button-border-radius: theme(borderRadius.3xl);
+    --button-border-width: theme(borderWidth.2);
+    --button-disabled-primary-bg: rgb(var(--color-secondary-500));
+    --button-disabled-secondary-bg: rgb(var(--color-secondary-500));
+    --button-disabled-secondary-border: rgb(var(--color-secondary-500));
+    --button-disabled-secondary-text: rgb(var(--color-secondary-700));
+  }
 }
 
 .theme_light {
@@ -80,6 +101,21 @@
   --color-text-code: 240 141 199;
 
   --tw-ring-offset-color: #1f242e;
+
+  /* BUTTON COMPONENT */
+  --button-disabled-primary-bg: rgb(var(--color-primary-500) / 0.6);
+  --button-disabled-primary-text: rgb(var(--color-text-contrast) / 0.6);
+  --button-disabled-secondary-border: rgb(var(--color-text-muted) / 0.6);
+  --button-disabled-secondary-text: rgb(var(--color-text-muted) / 0.6);
+
+  .ui_refresh {
+    /* BUTTON COMPONENT */
+    /* colors are temporaryi */
+    --button-disabled-primary-bg: rgb(var(--color-secondary-500));
+    --button-disabled-secondary-bg: rgb(var(--color-secondary-500));
+    --button-disabled-secondary-border: rgb(var(--color-secondary-500));
+    --button-disabled-secondary-text: rgb(var(--color-secondary-700));
+  }
 }
 
 .theme_nord {