@layer components { .coco-button-wrapper { @apply !contents; } [data-coco].coco-button { @apply flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none no-underline outline-none focus-visible:outline-0; width: min-content; .button-inner { @apply inline-flex items-center text-center mx-auto gap-2; width: fit-content; } .button-content { @apply whitespace-nowrap relative leading-none inline-flex items-center order-2; } .button-state-content { @apply contents; } .button-icon { @apply inline-flex items-center order-1; } .button-dropdown { @apply contents rounded-md; } .button-toggle { @apply order-3; } /* disabled */ &[data-disabled="true"] { @apply cursor-not-allowed pointer-events-none; } /* loading */ &[data-state="loading"] .button-icon { @apply animate-spin; } /* Fit */ &[data-fit="full"] { @apply w-full; } /* Icons */ &[data-icon-position="end"] { .button-content { @apply order-1; } .button-icon { @apply order-2; } .button-toggle { @apply order-3; } } &.with-icon[data-collapsed="true"] { .button-content { display: none; } } /* Themes */ &[data-theme] { @apply transition-all overflow-hidden; border-radius: 44px; .button-content { @apply font-semibold; } } &[data-theme="primary"], &[data-theme="positive"] { @apply bg-background-primary text-content-light-1 hover:bg-primary-600 active:bg-primary-700 antialiased; &[data-state="loading"] { @apply bg-background-primary; } &[data-state="active"] { @apply bg-primary-700; } &[data-state="loading"] .button-icon { @apply text-positive-300; } &[data-disabled="true"] { @apply bg-primary-200; } } &[data-theme="text-primary"], &[data-theme="text-positive"] { @apply bg-transparent text-content-primary hover:bg-gray-blend-50 active:bg-gray-blend-100; &[data-state="loading"] { @apply bg-transparent; } &[data-state="active"] { @apply bg-gray-blend-100; } &[data-state="loading"] .button-icon { @apply text-positive-300; } &[data-disabled="true"] { @apply bg-transparent opacity-30; } } &[data-theme="secondary"], &[data-theme="toolbar"], &[data-theme="toolbar-floating"] { @apply bg-transparent text-content-dark-1 border-gray-transparent-200 hover:bg-gray-blend-50 active:bg-gray-blend-100; &[data-state="loading"] { @apply bg-transparent; } &[data-state="active"] { @apply bg-gray-blend-100; } &[data-state="loading"] .button-icon { @apply text-positive-300; } &[data-disabled="true"] { @apply bg-transparent opacity-30; } } &[data-theme="toolbar-floating"] { @apply bg-white hover:bg-gray-100 active:bg-gray-200 border-gray-300; &[data-state="active"] { @apply bg-gray-200; } } &[data-theme="text-secondary"], &[data-theme="text-toolbar"] { @apply bg-transparent text-content-dark-1 hover:bg-gray-blend-50 active:bg-gray-blend-100; &[data-state="loading"] { @apply bg-transparent; } &[data-state="active"] { @apply bg-gray-blend-100; } &[data-state="loading"] .button-icon { @apply text-positive-300; } &[data-disabled="true"] { @apply bg-transparent opacity-30; } } &[data-theme="negative"] { @apply bg-background-negative text-content-light-1 hover:bg-negative-700 active:bg-negative-800 antialiased; &[data-state="loading"] { @apply bg-background-negative; } &[data-state="active"] { @apply bg-negative-800; } &[data-state="loading"] .button-icon { @apply text-negative-300; } &[data-disabled="true"] { @apply bg-negative-200; } } &[data-theme="text-negative"] { @apply bg-transparent text-content-negative hover:bg-gray-blend-50 active:bg-gray-blend-100; &[data-state="loading"] { @apply bg-transparent; } &[data-state="active"] { @apply bg-gray-blend-100; } &[data-state="loading"] .button-icon { @apply text-negative-300; } &[data-disabled="true"] { @apply bg-transparent opacity-30; } } &[data-theme="warning"] { @apply bg-background-warning text-content-light-1 hover:bg-warning-700 active:bg-warning-800 antialiased; &[data-state="loading"] { @apply bg-background-warning; } &[data-state="active"] { @apply bg-warning-800; } &[data-state="loading"] .button-icon { @apply text-warning-300; } &[data-disabled="true"] { @apply bg-warning-200; } } &[data-theme="text-warning"] { @apply bg-transparent text-content-warning hover:bg-gray-blend-50 active:bg-gray-blend-100; &[data-state="loading"] { @apply bg-transparent; } &[data-state="active"] { @apply bg-gray-blend-100; } &[data-state="loading"] .button-icon { @apply text-warning-300; } &[data-disabled="true"] { @apply bg-transparent opacity-30; } } &[data-theme="info"] { @apply bg-background-info text-content-light-1 hover:bg-info-700 active:bg-info-800 antialiased; &[data-state="loading"] { @apply bg-background-info; } &[data-state="active"] { @apply bg-info-800; } &[data-state="loading"] .button-icon { @apply text-info-300; } &[data-disabled="true"] { @apply bg-info-200; } } &[data-theme="text-info"] { @apply bg-transparent text-content-info hover:bg-gray-blend-50 active:bg-gray-blend-100; &[data-state="loading"] { @apply bg-transparent; } &[data-state="active"] { @apply bg-gray-blend-100; } &[data-state="loading"] .button-icon { @apply text-info-300; } &[data-disabled="true"] { @apply bg-transparent opacity-30; } } &[data-theme="neutral-dark"] { @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600 antialiased; &[data-state="loading"] { @apply bg-background-dark-1; } &[data-state="active"] { @apply bg-gray-600; } &[data-disabled="true"] { @apply bg-gray-300; } } &[data-theme="neutral-light"] { @apply border border-transparent bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3; &[data-state="loading"] { @apply bg-background-light-1; } &[data-state="active"] { @apply bg-background-light-3; } &[data-disabled="true"] { @apply bg-background-light-1; .button-inner { @apply opacity-40; } } } &[data-theme="text-neutral-light"] { @apply bg-transparent text-content-light-1 hover:bg-content-light-1/10 antialiased; &[data-state="active"] { @apply bg-content-light-1/10; } &[data-disabled="true"] { @apply opacity-30; } } &[data-theme="text-neutral-dark"] { @apply bg-transparent text-content-dark-1 hover:bg-content-dark-1/10; &[data-state="active"] { @apply bg-content-dark-1/10; } &[data-disabled="true"] { @apply opacity-30; } } /* Responsive resizing */ &[data-size="xs"] { @apply button-xs; } &[data-size="sm"] { @apply button-sm; } &[data-size="md"] { @apply button-md; } &[data-size="lg"] { @apply button-lg; } @media screen(md) { &[data-size-md="xs"] { @apply button-xs; } &[data-size-md="sm"] { @apply button-sm; } &[data-size-md="md"] { @apply button-md; } &[data-size-md="lg"] { @apply button-lg; } } @media screen(lg) { &[data-size-lg="xs"] { @apply button-xs; } &[data-size-lg="sm"] { @apply button-sm; } &[data-size-lg="md"] { @apply button-md; } &[data-size-lg="lg"] { @apply button-lg; } } @media screen(xl) { &[data-size-xl="xs"] { @apply button-xs; } &[data-size-xl="sm"] { @apply button-sm; } &[data-size-xl="md"] { @apply button-md; } &[data-size-xl="lg"] { @apply button-lg; } } @media screen(2xl) { &[data-size-xxl="xs"], &[data-size-2xl="xs"] { @apply button-xs; } &[data-size-xxl="sm"], &[data-size-2xl="sm"] { @apply button-sm; } &[data-size-xxl="md"], &[data-size-2xl="md"] { @apply button-md; } &[data-size-xxl="lg"], &[data-size-2xl="lg"] { @apply button-lg; } } @media screen(max) { &[data-size-max="xs"] { @apply button-xs; } &[data-size-max="sm"] { @apply button-sm; } &[data-size-max="md"] { @apply button-md; } &[data-size-max="lg"] { @apply button-lg; } } } } @layer utilities { .button-xs { .button-content { font-size: 14px; line-height: 14px; } .button-icon [data-component="icon"], .button-toggle { @apply w-3.5 h-3.5; } &[data-theme] { @apply py-2 px-3; } &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply -ml-1 -mr-1; } &[data-theme|="text"] { @apply px-2; &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply px-2; } } } .button-sm { .button-content { @apply label-sm; } .button-icon [data-component="icon"], .button-toggle { @apply w-4 h-4; } &[data-theme] { @apply py-2.5 px-4; &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply -ml-1.5 -mr-1.5; } } &[data-theme|="text"] { @apply px-2; &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply px-2; } } } .button-md { .button-content { @apply label-md; } .button-icon [data-component="icon"], .button-toggle { @apply w-5 h-5; } &[data-theme] { @apply py-3 px-5; &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply -ml-2 -mr-2; } } &[data-theme|="text"] { @apply px-3; &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply px-2; } } } .button-lg { .button-content { @apply label-lg; } .button-icon [data-component="icon"], .button-toggle { @apply w-6 h-6; } &[data-theme] { @apply py-4 px-6; &.icon-only .button-icon, &[data-collapsed="true"] .button-inner { @apply ml-[-8px] mr-[-8px]; } } &[data-theme|="text"] { @apply px-3; &.icon-only .button-icon, &[data-collapsed="true"] .button-icon { @apply px-3; } } } }