le-kit 0.5.2 → 0.5.4

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

@@ -1,290 +0,0 @@
-/**
- * Default mode styles for le-button
- * Uses global design tokens with component-specific overrides
- */
-:host {
-  display: inline-block;
-  
-  /* Component-specific tokens */
-  --le-button-border-radius: var(--le-radius-md);
-  --le-button-padding-x: var(--le-spacing-3);
-  --le-button-padding-y: var(--le-spacing-1);
-  --le-button-padding: var(--le-button-padding-y) var(--le-button-padding-x);
-  --le-button-small-padding: 0.25rem;
-  --le-button-font-size: var(--le-font-size-md);
-  --le-button-font-weight: var(--le-font-weight-medium);
-  --le-button-transition: var(--le-transition-fast);
-  --le-transition-easing: ease-in-out;
-  --le-button-icon-aspect-ratio: 1;
-  --le-button-color: var(--le-color-primary-contrast);
-  
-  /* Internal state variables - set by color classes */
-  --_btn-bg: var(--le-color-primary);
-  --_btn-bg-hover: var(--le-color-primary-dark);
-  --_btn-bg-system: var(--le-color-black);
-  --_btn-color: var(--le-button-color);
-  --_btn-border-color: var(--le-color-primary);
-}
-
-:host([full-width]) {
-  display: block;
-  width: 100%;
-}
-
-.le-button-container {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: var(--le-spacing-3);
-  width: 100%;
-  padding: var(--le-button-padding);
-  border: 1px solid var(--_btn-border-color);
-  border-radius: var(--le-button-border-radius);
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
-  font-family: var(--le-font-family-base);
-  font-size: var(--le-button-font-size);
-  font-weight: var(--le-button-font-weight);
-  line-height: var(--le-line-height-tight);
-  text-decoration: none;
-  cursor: pointer;
-  transition: 
-    background-color var(--le-button-transition) var(--le-transition-easing),
-    border-color var(--le-button-transition) var(--le-transition-easing),
-    box-shadow var(--le-button-transition) var(--le-transition-easing),
-    transform var(--le-button-transition) var(--le-transition-easing);
-}
-
-.le-button-container:hover:not(:disabled) {
-  background: var(--_btn-bg-hover);
-  border-color: var(--_btn-bg-hover);
-}
-
-.le-button-container:active:not(:disabled) {
-  box-shadow: inset 0 0 5px color-mix(in srgb, var(--_btn-bg) 50%, transparent);
-}
-
-.le-button-container:focus-visible {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-.le-button-container:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.le-button-label {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: var(--le-spacing-2);
-}
-
-/* ===========================================
- * COLOR VARIANTS - Use theme semantic colors
- * =========================================== */
-
-/* Primary (default) */
-:host(.color-primary) {
-  --_btn-bg: var(--le-color-primary);
-  --_btn-bg-hover: var(--le-color-primary-dark);
-  --_btn-color: var(--le-button-color);
-  --_btn-border-color: var(--le-color-primary);
-}
-
-/* Secondary */
-:host(.color-secondary) {
-  --_btn-bg: var(--le-color-secondary);
-  --_btn-bg-hover: var(--le-color-secondary-dark);
-  --_btn-color: var(--le-color-secondary-contrast);
-  --_btn-border-color: var(--le-color-secondary);
-}
-
-/* Success */
-:host(.color-success) {
-  --_btn-bg: var(--le-color-success);
-  --_btn-bg-hover: var(--le-color-success-dark);
-  --_btn-color: var(--le-color-success-contrast);
-  --_btn-border-color: var(--le-color-success);
-}
-
-/* Warning */
-:host(.color-warning) {
-  --_btn-bg: var(--le-color-warning);
-  --_btn-bg-hover: var(--le-color-warning-dark);
-  --_btn-color: var(--le-color-warning-contrast);
-  --_btn-border-color: var(--le-color-warning);
-}
-
-/* Danger */
-:host(.color-danger) {
-  --_btn-bg: var(--le-color-danger);
-  --_btn-bg-hover: var(--le-color-danger-dark);
-  --_btn-color: var(--le-color-danger-contrast);
-  --_btn-border-color: var(--le-color-danger);
-}
-
-/* Info */
-:host(.color-info) {
-  --_btn-bg: var(--le-color-info);
-  --_btn-bg-hover: var(--le-color-info-dark);
-  --_btn-color: var(--le-color-info-contrast);
-  --_btn-border-color: var(--le-color-info);
-}
-
-/* ===========================================
- * STYLE VARIANTS
- * =========================================== */
-
-/* Solid (default) - already styled by color classes */
-:host(.variant-solid) .le-button-container {
-  box-shadow: var(--le-shadow-sm);
-}
-
-:host(.variant-solid) .le-button-container:hover:not(:disabled) {
-  box-shadow: var(--le-shadow-md);
-}
-
-/* Outlined */
-:host(.variant-outlined) .le-button-container {
-  background: transparent;
-  color: var(--_btn-bg);
-  border-color: color-mix(in srgb, var(--_btn-border-color) 33%, transparent);
-}
-
-:host(.variant-outlined) .le-button-container:hover:not(:disabled) {
-  border-color: var(--_btn-border-color);
-}
-
-/* Clear (ghost) */
-:host(.variant-clear) .le-button-container {
-  background: transparent;
-  color: var(--_btn-bg);
-  border-color: transparent;
-}
-
-:host(.variant-clear) .le-button-container:hover:not(:disabled) {
-  background: var(--le-color-gray-100);
-  border-color: transparent;
-}
-
-/* System (controls without access) */
-:host(.variant-system) .le-button-container {
-  background: transparent;
-  color: var(--_btn-bg-system);
-  border-color: transparent;
-}
-
-/* ===========================================
- * SIZES
- * =========================================== */
-:host(.size-small) {
-  --le-button-padding-x: 0.4rem;
-  --le-button-padding-y: 0.3rem;
-  --le-button-padding-top: 0.35rem;
-  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));
-}
-
-:host(.size-large) {
-  --le-button-padding-x: 0.9rem;
-  --le-button-padding-y: 0.6rem;
-  --le-button-font-size: var(--le-font-size-xl);
-}
-
-/* ===========================================
- * STATES & MODIFIERS
- * =========================================== */
-
-/* Full width */
-:host(.full-width) {
-  display: block;
-  width: 100%;
-}
-
-/* Selected state */
-:host(.selected) .le-button-container {
-  box-shadow: inset 0 0 4px var(--le-color-shadow);
-}
-
-:host(.variant-outlined.selected) .le-button-container,
-:host(.variant-clear.selected) .le-button-container {
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
-}
-
-/* Icon only */
-:host(.icon-only) .le-button-container {
-  padding: var(--le-button-icon-only-padding, 0.5rem);
-  padding-bottom: var(--le-button-icon-only-padding, 0.6rem);
-  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
-}
-
-:host(.icon-only.size-small) .le-button-container {
-  padding: var(--le-button-small-padding, 0.25rem);
-}
-
-:host(.icon-only.size-large) .le-button-container {
-  padding: 0.75rem;
-}
-
-/* Hide content in icon-only mode */
-:host(.icon-only) .content {
-  display: none;
-}
-
-/* ===========================================
- * CONTENT (le-slot wrapper)
- * =========================================== */
-.content {
-  display: inline;
-}
-
-.content:empty {
-  display: none;
-}
-
-/* ===========================================
- * ICON WRAPPERS & SLOTS
- * =========================================== */
-.icon-start,
-.icon-only,
-.icon-end {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-start:empty,
-.icon-only:empty,
-.icon-end:empty {
-  display: none;
-}
-
-::slotted([slot="icon-start"]),
-::slotted([slot="icon-only"]),
-::slotted([slot="icon-end"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125em;
-  height: 1.125em;
-}
-
-/* ===========================================
- * ALIGNMENT MODIFIERS
- * =========================================== */
-.le-button-align-start {
-  justify-content: flex-start;
-}
-.le-button-align-center {
-  justify-content: center;
-}
-.le-button-align-space-between {
-  justify-content: space-between;
-}
-.le-button-align-end {
-  justify-content: flex-end;
-}