@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-button/eds-button.css

@@ -1,3 +1,7 @@
+/* ============================================
+   EDS BUTTON - NEW EBRAINS VISUAL SYSTEM
+   ============================================ */
+
 *,
 ::before,
 ::after {
@@ -82,6 +86,10 @@ button,
   display: none;
 }
 
+/* ============================================
+   TYPOGRAPHY CLASSES
+   ============================================ */
+
 .f-body-01 {
   font-family: var(--f-body-01-fontFamily);
   font-weight: var(--f-body-01-fontWeight);
@@ -114,66 +122,57 @@ button,
   letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
+/* ============================================
+   BUTTON BORDER EFFECTS - NEW SYSTEM
+   ============================================ */
+
 .border-inside {
   position: relative;
 
   &::after {
     pointer-events: none;
-  }
-
-  &::after {
     position: absolute;
-  }
-
-  &::after {
     inset: 0rem;
-  }
-
-  &::after {
     z-index: 1;
-  }
-
-  &::after {
     border-radius: 8px;
-  }
-
-  &::after {
-    border-width: 1px;
-  }
-
-  &::after {
     border-width: 2px;
-  }
-
-  &::after {
-    border-color: rgba(0, 0, 0, .1);
-  }
-
-  &::after {
+    border-color: rgba(7, 20, 13, 1); /* brand-black with opacity */
     content: '';
   }
 }
 
 .border-inside-inverse {
-  &::after {
-    border-color: rgba(255, 255, 255, 0.3);
-  }
+  position: relative;
 
   &::after {
+    pointer-events: none;
+    position: absolute;
+    inset: 0rem;
+    z-index: 1;
+    border-radius: 8px;
+    border-width: 2px;
+    border-color: rgba(255, 255, 255, 1); /* white border */
     content: '';
   }
 }
 
 .border-inside-pill {
   &::after {
-    border-radius: 100px;
+    border-radius: 100px; /* pill shape */
+    content: '';
   }
+}
 
+.border-inside-inverse.border-inside-pill {
   &::after {
-    content: '';
+    border-radius: 100px; /* pill shape for inverse border */
   }
 }
 
+/* ============================================
+   LOADER SPINNER
+   ============================================ */
+
 .loader {
   box-sizing: border-box;
   display: inline-block;
@@ -190,11 +189,14 @@ button,
 .loader {
   animation: spin 1s linear infinite;
   border-radius: 9999px;
-  border: 3px solid rgba(0, 0, 0, .3);
-  border-bottom-color: #000;
+  border: 3px solid rgba(7, 20, 13, 0.3); /* brand-black */
+  border-bottom-color: #07140D; /* brand-black */
 }
 
-/** region TRANSITIONS */
+/* ============================================
+   TRANSITIONS & EFFECTS
+   ============================================ */
+
 .effect-color {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -205,7 +207,7 @@ button,
 .effect-focus {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green); /* NEW: brand-green for focus */
 }
 
 .effect-focus:focus-visible {
@@ -215,13 +217,53 @@ button,
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green); /* NEW: brand-green for focus */
 }
 
 .effect-focus-within:focus-within {
   outline-style: solid;
 }
 
+/* ============================================
+   BRAND HOVER TRANSFORM EFFECT
+   ============================================ */
+.brand-hover-transform {
+  transition-property: transform, box-shadow, color, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.brand-hover-transform:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 255, 157, 0.3);
+}
+
+.brand-hover-transform[aria-disabled="true"]:hover,
+.brand-hover-transform:disabled:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+/* Secondary Inverse Transform Effect */
+.secondary-inverse-transform {
+  transition-property: transform, background-color, color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.secondary-inverse-transform:hover {
+  transform: translateY(-2px);
+}
+
+.secondary-inverse-transform[aria-disabled="true"]:hover,
+.secondary-inverse-transform:disabled:hover {
+  transform: none;
+}
+
+/* ============================================
+   UTILITY CLASSES
+   ============================================ */
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -267,6 +309,10 @@ button,
   right: 1rem;
 }
 
+/* ============================================
+   POSITIONING
+   ============================================ */
+
 .-top-8 {
   top: -0.5rem;
 }
@@ -311,6 +357,10 @@ button,
   top: 50%;
 }
 
+/* ============================================
+   SPACING
+   ============================================ */
+
 .m-0 {
   margin: 0rem;
 }
@@ -360,6 +410,10 @@ button,
   margin-right: auto;
 }
 
+/* ============================================
+   DISPLAY
+   ============================================ */
+
 .block {
   display: block;
 }
@@ -388,6 +442,10 @@ button,
   display: none;
 }
 
+/* ============================================
+   DIMENSIONS
+   ============================================ */
+
 .h-20 {
   height: 1.25rem;
 }
@@ -400,10 +458,29 @@ button,
   height: 2.25rem;
 }
 
+.h-40 {
+  height: 2.5rem;
+}
+
 .h-44 {
   height: 2.75rem;
 }
 
+/* Min-height variants — used for button sizing so a label that wraps to
+   two lines grows (with its py-12 padding) instead of being clipped at a
+   fixed height. Single-line buttons keep the same height. */
+.min-h-36 {
+  min-height: 2.25rem;
+}
+
+.min-h-44 {
+  min-height: 2.75rem;
+}
+
+.h-48 {
+  height: 3rem;
+}
+
 .h-auto {
   height: auto;
 }
@@ -424,10 +501,22 @@ button,
   width: 1.25rem;
 }
 
+.w-24 {
+  width: 1.5rem;
+}
+
 .w-full {
   width: 100%;
 }
 
+.w-auto {
+  width: auto;
+}
+
+/* ============================================
+   FLEXBOX
+   ============================================ */
+
 .flex-none {
   flex: none;
 }
@@ -472,12 +561,24 @@ button,
   justify-content: space-between;
 }
 
+.gap-4 {
+  gap: 0.25rem;
+}
+
+.gap-8 {
+  gap: 0.5rem;
+}
+
 .space-x-2> :not([hidden])~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.125rem * var(--tw-space-x-reverse));
   margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+/* ============================================
+   OVERFLOW
+   ============================================ */
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -494,6 +595,10 @@ button,
   overflow-y: scroll;
 }
 
+/* ============================================
+   TEXT
+   ============================================ */
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -502,6 +607,10 @@ button,
   overflow-wrap: break-word;
 }
 
+/* ============================================
+   BORDERS & RADIUS - NEW SYSTEM
+   ============================================ */
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -519,7 +628,7 @@ button,
 }
 
 .rounded-pill {
-  border-radius: 100px;
+  border-radius: 100px; /* NEW: pill shape */
 }
 
 .rounded-sm {
@@ -545,61 +654,77 @@ button,
 }
 
 .border-softest {
-  border-color: rgba(0, 0, 0, .05);
+  border-color: var(--grey-light);
 }
 
 .border-b-softer {
-  border-bottom-color: rgba(0, 0, 0, .1);
+  border-bottom-color: rgba(7, 20, 13, 0.1); /* NEW: brand-black */
 }
 
+/* ============================================
+   BACKGROUNDS - NEW EBRAINS COLORS
+   ============================================ */
+
+/* Accent backgrounds - NEW green */
 .\!bg-accent-dark {
-  background-color: var(--green-600) !important;
+  background-color: var(--brand-green-dark) !important; /* NEW: #00C87B */
 }
 
-.\!bg-darker {
-  background-color: var(--grey-400) !important;
+.bg-accent {
+  background-color: var(--brand-green); /* NEW: #00FF9D */
 }
 
-.\!bg-strong-dark {
-  background-color: var(--grey-800) !important;
+.bg-brand-light {
+  background-color: var(--green-200); /* light brand tint #d3ffdc — brandLight intent */
 }
 
-.bg-accent {
-  background-color: var(--green-500);
+.bg-accent-dark {
+  background-color: var(--brand-green-dark); /* NEW: #00C87B */
 }
 
-.bg-accent-dark {
-  background-color: var(--green-600);
+/* Neutral backgrounds - NEW simplified greys */
+.\!bg-darker {
+  background-color: var(--grey-dark) !important; /* NEW: #7A7B7A */
 }
 
 .bg-dark {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light); /* NEW: #ECECEC */
 }
 
 .bg-darker {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
-.bg-overlay {
-  background-color: rgba(0, 0, 0, 0.25);
+/* Strong backgrounds - NEW brand-black */
+.\!bg-strong-dark {
+  background-color: var(--brand-black) !important; /* NEW: #07140D */
 }
 
 .bg-strong {
-  background-color: var(--grey-700);
+  background-color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
 .bg-strong-dark {
-  background-color: var(--grey-800);
+  background-color: var(--brand-black); /* NEW: #07140D */
 }
 
 .bg-stronger {
-  background-color: var(--grey-900);
+  background-color: var(--brand-black); /* NEW: #07140D */
 }
 
 .bg-strongest {
-  background-color: var(--black);
+  background-color: var(--brand-black); /* NEW: #07140D (was pure black) */
+}
+
+/* Overlay */
+.bg-overlay {
+  background-color: rgba(7, 20, 13, 0.25); /* NEW: brand-black overlay */
 }
 
+/* ============================================
+   PADDING
+   ============================================ */
+
 .p-12 {
   padding: 0.75rem;
 }
@@ -627,11 +752,25 @@ button,
   padding-right: 1rem;
 }
 
+.px-32 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .py-8 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.py-12 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.pl-2 {
+  padding-left: 0.125rem;
+}
+
 .pl-4 {
   padding-left: 0.25rem;
 }
@@ -640,6 +779,10 @@ button,
   padding-left: 0.5rem;
 }
 
+.pr-2 {
+  padding-right: 0.125rem;
+}
+
 .pr-4 {
   padding-right: 0.25rem;
 }
@@ -648,12 +791,16 @@ button,
   padding-right: 0.5rem;
 }
 
+/* ============================================
+   TEXT COLORS - NEW SYSTEM
+   ============================================ */
+
 .\!text-current {
   color: currentColor !important;
 }
 
 .text-accent {
-  color: var(--green-500);
+  color: var(--brand-green); /* NEW: #00FF9D */
 }
 
 .text-current {
@@ -661,30 +808,47 @@ button,
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black); /* NEW: #07140D (was pure black) */
 }
 
 .text-inverse {
   color: var(--white);
 }
 
+.text-light {
+  color: var(--grey-dark); /* NEW: simplified to grey-dark */
+}
+
+
 .text-lightest {
-  color: var(--grey-500);
+  color: var(--grey-light); /* NEW: simplified to grey-dark */
 }
 
+/* ============================================
+   OPACITY
+   ============================================ */
+
 .opacity-0 {
   opacity: 0;
 }
 
+.opacity-20 {
+  opacity: 20;
+}
+
+/* ============================================
+   SHADOWS - NEW SYSTEM
+   ============================================ */
+
 .shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  --tw-shadow: 0 1px 3px rgba(7, 20, 13, 0.1); /* NEW: brand-black */
+  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .shadow-accent {
-  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);
-  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);
+  --tw-shadow: 0 0 16px rgba(0, 255, 157, 0.5); /* NEW: brand-green glow */
+  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -696,6 +860,10 @@ button,
   container-type: inline-size;
 }
 
+/* ============================================
+   PSEUDO-ELEMENT EFFECTS
+   ============================================ */
+
 .after\:effect-opacity::after {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -708,27 +876,58 @@ button,
 }
 
 .invalid\:text-lightest:invalid {
-  color: var(--grey-500);
+  color: var(--grey-dark); /* NEW: simplified */
 }
 
+/* ============================================
+   INTERACTIVE STATES - NEW COLORS
+   ============================================ */
+
 .focus-within\:bg-transparent:focus-within {
-  background-color: var(--transparent);
+  background-color: transparent;
+}
+
+/* Hover states with NEW colors */
+
+.hover\:border-0::hover {
+  border-width: 0px;
+}
+
+.hover\:border-accent::hover {
+  border-color: var(--brand-green); /* NEW: #00FF9D */
+}
+
+.hover\:text-default:hover {
+  color: var(--brand-black);
+}
+
+.hover\:text-light:hover {
+  color: var(--grey-dark);
+}
+
+.hover\:text-inverse:hover {
+  color: var(--white);
+}
+
+
+.hover\:bg-accent:hover {
+  background-color: var(--brand-green); /* NEW: #00C87B */
 }
 
 .hover\:bg-accent-dark:hover {
-  background-color: var(--green-600);
+  background-color: var(--brand-green-dark); /* NEW: #00C87B */
 }
 
 .hover\:bg-dark:hover {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light); /* NEW: #ECECEC */
 }
 
 .hover\:bg-darker:hover {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
 .hover\:bg-default:hover {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .hover\:bg-inverse:hover {
@@ -736,19 +935,23 @@ button,
 }
 
 .hover\:bg-strong-dark:hover {
-  background-color: var(--grey-800);
+  background-color: var(--brand-black); /* NEW: #07140D */
 }
 
 .hover\:bg-transparent:hover {
-  background-color: var(--transparent);
+  background-color: transparent;
+}
+
+.hover\:bg-strongest:hover {
+  background-color: var(--brand-black);
 }
 
 .hover\:text-default:hover {
-  color: var(--black);
+  color: var(--brand-black); /* NEW: #07140D */
 }
 
 .hover\:text-lighter:hover {
-  color: var(--grey-600);
+  color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
 .hover\:\!underline:hover {
@@ -760,8 +963,8 @@ button,
 }
 
 .hover\:shadow-hover:hover {
-  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
-  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
+  --tw-shadow: 0 8px 24px rgba(7, 20, 13, 0.2); /* NEW: brand-black */
+  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
@@ -776,16 +979,20 @@ button,
   outline-offset: 2px;
 }
 
+/* ============================================
+   DISABLED STATES - NEW COLORS
+   ============================================ */
+
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
 
 .disabled\:bg-dark:disabled {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light); /* NEW: #ECECEC */
 }
 
 .disabled\:text-lightest:disabled {
-  color: var(--grey-500);
+  color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
 .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
@@ -793,23 +1000,23 @@ button,
 }
 
 .aria-disabled\:\!border-transparent[aria-disabled="true"] {
-  border-color: var(--transparent) !important;
+  border-color: transparent !important;
 }
 
 .aria-disabled\:bg-dark[aria-disabled="true"] {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light); /* NEW: #ECECEC */
 }
 
 .aria-disabled\:bg-transparent[aria-disabled="true"] {
-  background-color: var(--transparent);
+  background-color: transparent;
 }
 
 .aria-disabled\:text-light[aria-disabled="true"] {
-  color: var(--grey-700);
+  color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
 .aria-disabled\:text-lightest[aria-disabled="true"] {
-  color: var(--grey-500);
+  color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
 .aria-disabled\:line-through[aria-disabled="true"] {
@@ -823,9 +1030,13 @@ button,
 }
 
 .aria-current-page\:bg-darker[aria-current="page"] {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark); /* NEW: #7A7B7A */
 }
 
+/* ============================================
+   AFTER PSEUDO-ELEMENTS
+   ============================================ */
+
 .after\:absolute::after {
   position: absolute;
 }
@@ -873,15 +1084,23 @@ button,
 }
 
 .after\:\!border-transparent::after {
-  border-color: var(--transparent) !important;
+  border-color: transparent !important;
 }
 
 .after\:border-accent::after {
-  border-color: var(--green-500);
+  border-color: var(--brand-green); /* NEW: #00FF9D */
+}
+
+.after\:border-accent-dark::after {
+  border-color: var(--brand-green-dark); /* NEW: #00FF9D */
+}
+
+.after\:border-soft::after {
+  border-color: var(--grey-dark);
 }
 
 .after\:border-softest::after {
-  border-color: rgba(0, 0, 0, .05);
+  border-color: var(--grey-light);
 }
 
 .after\:opacity-0::after {
@@ -893,8 +1112,16 @@ button,
   content: var(--tw-content);
 }
 
+.hover\:text-accent:hover {
+  color: var(--brand-green);
+}
+
+.hover\:after\:\border-accent:hover::after {
+  border-color: var(--brand-green);
+}
+
 .hover\:after\:\!border-transparent:hover::after {
-  border-color: var(--transparent) !important;
+  border-color: transparent !important;
 }
 
 .hover\:after\:opacity-100:hover::after {
@@ -906,9 +1133,59 @@ button,
 }
 
 .aria-disabled\:after\:\!border-transparent[aria-disabled="true"]::after {
-  border-color: var(--transparent) !important;
+  border-color: transparent !important;
+}
+
+.aria-disabled\:after\:\!border-0[aria-disabled="true"]::after {
+  border-width: 0 !important;
 }
 
 .hover\:before\:opacity-100:hover::before {
   opacity: 1;
+}
+
+/* ============================================
+   CTA BUTTON STYLES
+   ============================================ */
+
+/* CTA link style */
+.cta-link {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: var(--f-ui-01-fontSize);
+  color: var(--grey-dark);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.cta-link:hover {
+  color: var(--brand-green);
+}
+
+/* CTA brand link style - always green */
+.cta-link-brand {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: var(--f-ui-02-fontSize);
+  color: var(--brand-green);
+  text-decoration: none;
+  transition: color 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cta-link-brand:hover {
+  color: var(--brand-green-dark);
+}
+
+@media (min-width: 750px) {
+  .md\:w-full {
+    width: 100%;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
 }