native-document 1.0.138 → 1.0.140

package/src/ui/components/button/button.css

@@ -1,362 +1,296 @@
-/* ─────────────────────────────────────────────
-   Button tokens
-   Dépend de : vars.css (colors, spacings, radius, fonts)
-───────────────────────────────────────────── */
 :root {
-    /* Sizes — hauteurs */
-    --btn-height-sm:        28px;
-    --btn-height-md:        36px;
-    --btn-height-lg:        44px;
-
-    /* Sizes — paddings horizontaux */
-    --btn-padding-sm:       var(--space-cozy) var(--space-cozy-comfortable);
-    --btn-padding-md:       var(--space-cozy) var(--space-comfortable);
-    --btn-padding-lg:       var(--space-cozy-comfortable) var(--space-relaxed);
-
-    /* Sizes — font */
-    --btn-font-size-sm:     var(--note-size);
-    --btn-font-size-md:     var(--description-size);
-    --btn-font-size-lg:     var(--text-size);
-
-    /* Sizes — icon */
-    --btn-icon-size-sm:     14px;
-    --btn-icon-size-md:     16px;
-    --btn-icon-size-lg:     18px;
-
-    /* Shape */
-    --btn-radius:           var(--radius-button);
-    --btn-radius-rounded:   var(--radius-x);
-    --btn-radius-pill:      var(--radius-pill);
-
-    /* Misc */
-    --btn-font-family:      var(--font);
-    --btn-font-weight:      500;
-    --btn-gap:              var(--space-cozy);
-    --btn-transition:       background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
+    --btn-height-small: 28px;
+    --btn-height-medium: 36px;
+    --btn-height-large: 44px;
+
+    --btn-padding-small: 0 var(--space-cozy-comfortable);
+    --btn-padding-medium: 0 var(--space-comfortable);
+    --btn-padding-large: 0 var(--space-relaxed);
+
+    --btn-font-size-small: var(--note-size);
+    --btn-font-size-medium: var(--description-size);
+    --btn-font-size-large: var(--text-size);
+
+    --btn-icon-size-small: 14px;
+    --btn-icon-size-medium: 16px;
+    --btn-icon-size-large: 18px;
+
+    --btn-loader-size: 14px;
+    --btn-gap: var(--space-cozy);
+    --btn-font-weight: 500;
+    --btn-transition: background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
     --btn-disabled-opacity: 0.45;
-    --btn-loader-size:      14px;
-    --btn-border-width:     1px;
-
-    /* ── Variants ── */
-
-    /* Primary */
-    --btn-primary-bg:           var(--color-primary);
-    --btn-primary-bg-hover:     var(--color-primary-hover);
-    --btn-primary-color:        var(--white);
-    --btn-primary-border:       var(--color-primary);
-    --btn-primary-border-hover: var(--color-primary-hover);
-
-    /* Secondary */
-    --btn-secondary-bg:           var(--color-secondary);
-    --btn-secondary-bg-hover:     var(--color-secondary-hover);
-    --btn-secondary-color:        var(--color-secondary-text);
-    --btn-secondary-border:       var(--color-secondary);
-    --btn-secondary-border-hover: var(--color-secondary-hover);
-
-    /* Danger */
-    --btn-danger-bg:           var(--color-danger);
-    --btn-danger-bg-hover:     var(--color-danger-hover);
-    --btn-danger-color:        var(--white);
-    --btn-danger-border:       var(--color-danger);
-    --btn-danger-border-hover: var(--color-danger-hover);
-
-    /* Success */
-    --btn-success-bg:           var(--color-success);
-    --btn-success-bg-hover:     var(--color-success-hover);
-    --btn-success-color:        var(--white);
-    --btn-success-border:       var(--color-success);
-    --btn-success-border-hover: var(--color-success-hover);
-
-    /* Warning */
-    --btn-warning-bg:           var(--color-warning);
-    --btn-warning-bg-hover:     var(--color-warning-hover);
-    --btn-warning-color:        var(--white);
-    --btn-warning-border:       var(--color-warning);
-    --btn-warning-border-hover: var(--color-warning-hover);
-
-    /* Info */
-    --btn-info-bg:           var(--color-info);
-    --btn-info-bg-hover:     var(--color-info-hover);
-    --btn-info-color:        var(--white);
-    --btn-info-border:       var(--color-info);
-    --btn-info-border-hover: var(--color-info-hover);
-
-    /* Ghost */
-    --btn-ghost-bg:           var(--color-ghost);
-    --btn-ghost-bg-hover:     var(--color-ghost-hover);
-    --btn-ghost-color:        var(--color-ghost-text);
-    --btn-ghost-border:       transparent;
-    --btn-ghost-border-hover: transparent;
-
-    /* Link */
-    --btn-link-bg:           transparent;
-    --btn-link-bg-hover:     transparent;
-    --btn-link-color:        var(--color-link);
-    --btn-link-color-hover:  var(--color-link-hover);
-    --btn-link-border:       transparent;
-}
-
-/* ─────────────────────────────────────────────
-   Base
-───────────────────────────────────────────── */
-.btn {
-    display:          inline-flex;
-    align-items:      center;
-    justify-content:  center;
-    gap:              var(--btn-gap);
-    border:           var(--btn-border-width) solid transparent;
-    border-radius:    var(--btn-radius);
-    cursor:           pointer;
-    font-family:      var(--btn-font-family);
-    font-weight:      var(--btn-font-weight);
-    font-size:        var(--btn-font-size-md);
-    height:           var(--btn-height-md);
-    padding:          var(--btn-padding-md);
-    line-height:      1;
-    white-space:      nowrap;
-    text-decoration:  none;
-    outline:          none;
-    transition:       var(--btn-transition);
-    user-select:      none;
-    box-sizing:       border-box;
-    vertical-align:   middle;
-}
 
-/* ─────────────────────────────────────────────
-   Sizes
-───────────────────────────────────────────── */
-.btn--sm {
-    height:    var(--btn-height-sm);
-    padding:   var(--btn-padding-sm);
-    font-size: var(--btn-font-size-sm);
-}
-.btn--lg {
-    height:    var(--btn-height-lg);
-    padding:   var(--btn-padding-lg);
-    font-size: var(--btn-font-size-lg);
-}
-
-/* ─────────────────────────────────────────────
-   Shapes
-───────────────────────────────────────────── */
-.btn--rounded { border-radius: var(--btn-radius-rounded); }
-.btn--pill    { border-radius: var(--btn-radius-pill); }
-.btn--circle  {
-    border-radius: 50%;
-    padding:       0;
-    width:         var(--btn-height-md);
-}
-.btn--sm.btn--circle { width: var(--btn-height-sm); }
-.btn--lg.btn--circle { width: var(--btn-height-lg); }
-
-/* ─────────────────────────────────────────────
-   Block
-───────────────────────────────────────────── */
-.btn--block {
-    width:   100%;
-    display: flex;
+    --btn-color-primary: var(--color-primary);
+    --btn-color-primary-hover: var(--color-primary-hover);
+    --btn-color-secondary: var(--color-secondary);
+    --btn-color-secondary-hover: var(--color-secondary-hover);
+    --btn-color-secondary-text: var(--color-secondary-text);
+    --btn-color-danger: var(--color-danger);
+    --btn-color-danger-hover: var(--color-danger-hover);
+    --btn-color-success: var(--color-success);
+    --btn-color-success-hover: var(--color-success-hover);
+    --btn-color-warning: var(--color-warning);
+    --btn-color-warning-hover: var(--color-warning-hover);
+    --btn-color-info: var(--color-info);
+    --btn-color-info-hover: var(--color-info-hover);
+    --btn-color-ghost-hover: var(--color-ghost-hover);
+    --btn-color-ghost-text: var(--color-ghost-text);
+    --btn-color-link: var(--color-link);
+    --btn-color-link-hover: var(--color-link-hover);
 }
 
-/* ─────────────────────────────────────────────
-   Icon
-───────────────────────────────────────────── */
-.btn__icon {
-    display:     inline-flex;
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--btn-gap);
+    border: 1px solid transparent;
+    border-radius: var(--radius-button);
+    cursor: pointer;
+    font-family: var(--font);
+    font-weight: var(--btn-font-weight);
+    font-size: var(--btn-font-size-medium);
+    height: var(--btn-height-medium);
+    padding: var(--btn-padding-medium);
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    outline: none;
+    transition: var(--btn-transition);
+    user-select: none;
+    box-sizing: border-box;
+    vertical-align: middle;
+
+    &.is-small {
+        height: var(--btn-height-small);
+        padding: var(--btn-padding-small);
+        font-size: var(--btn-font-size-small);
+    }
+
+    &.is-large {
+        height: var(--btn-height-large);
+        padding: var(--btn-padding-large);
+        font-size: var(--btn-font-size-large);
+    }
+
+    &.is-block {
+        width: 100%;
+        display: flex;
+    }
+
+    &.is-rounded {
+        border-radius: var(--radius-x);
+    }
+
+    &.is-pill {
+        border-radius: var(--radius-pill);
+    }
+
+    &.is-circle {
+        border-radius: 50%;
+        padding: 0;
+        width: var(--btn-height-medium);
+
+        &.is-small {
+            width: var(--btn-height-small);
+        }
+
+        &.is-large {
+            width: var(--btn-height-large);
+        }
+    }
+
+    &.is-icon-top,
+    &.is-icon-bottom {
+        flex-direction: column;
+    }
+
+    &.is-loading,
+    &.is-disabled {
+        opacity: var(--btn-disabled-opacity);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    &.is-primary {
+        background: var(--btn-color-primary);
+        color: var(--white);
+        border-color: var(--btn-color-primary);
+
+        &:hover {
+            background: var(--btn-color-primary-hover);
+            border-color: var(--btn-color-primary-hover);
+        }
+    }
+
+    &.is-secondary {
+        background: var(--btn-color-secondary);
+        color: var(--btn-color-secondary-text);
+        border-color: var(--btn-color-secondary);
+
+        &:hover {
+            background: var(--btn-color-secondary-hover);
+            border-color: var(--btn-color-secondary-hover);
+        }
+    }
+
+    &.is-danger {
+        background: var(--btn-color-danger);
+        color: var(--white);
+        border-color: var(--btn-color-danger);
+
+        &:hover {
+            background: var(--btn-color-danger-hover);
+            border-color: var(--btn-color-danger-hover);
+        }
+    }
+
+    &.is-success {
+        background: var(--btn-color-success);
+        color: var(--white);
+        border-color: var(--btn-color-success);
+
+        &:hover {
+            background: var(--btn-color-success-hover);
+            border-color: var(--btn-color-success-hover);
+        }
+    }
+
+    &.is-warning {
+        background: var(--btn-color-warning);
+        color: var(--white);
+        border-color: var(--btn-color-warning);
+
+        &:hover {
+            background: var(--btn-color-warning-hover);
+            border-color: var(--btn-color-warning-hover);
+        }
+    }
+
+    &.is-info {
+        background: var(--btn-color-info);
+        color: var(--white);
+        border-color: var(--btn-color-info);
+
+        &:hover {
+            background: var(--btn-color-info-hover);
+            border-color: var(--btn-color-info-hover);
+        }
+    }
+
+    &.is-ghost {
+        background: transparent;
+        color: var(--btn-color-ghost-text);
+        border-color: transparent;
+
+        &:hover {
+            background: var(--btn-color-ghost-hover);
+        }
+    }
+
+    &.is-link {
+        background: transparent;
+        color: var(--btn-color-link);
+        border-color: transparent;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+
+        &:hover {
+            color: var(--btn-color-link-hover);
+        }
+    }
+
+    &.is-outline {
+        background: transparent;
+
+        &.is-primary {
+            color: var(--btn-color-primary);
+            border-color: var(--btn-color-primary);
+
+            &:hover {
+                background: var(--btn-color-primary);
+                color: var(--white);
+            }
+        }
+
+        &.is-danger {
+            color: var(--btn-color-danger);
+            border-color: var(--btn-color-danger);
+
+            &:hover {
+                background: var(--btn-color-danger);
+                color: var(--white);
+            }
+        }
+
+        &.is-success {
+            color: var(--btn-color-success);
+            border-color: var(--btn-color-success);
+
+            &:hover {
+                background: var(--btn-color-success);
+                color: var(--white);
+            }
+        }
+
+        &.is-warning {
+            color: var(--btn-color-warning);
+            border-color: var(--btn-color-warning);
+
+            &:hover {
+                background: var(--btn-color-warning);
+                color: var(--white);
+            }
+        }
+
+        &.is-info {
+            color: var(--btn-color-info);
+            border-color: var(--btn-color-info);
+
+            &:hover {
+                background: var(--btn-color-info);
+                color: var(--white);
+            }
+        }
+
+        &.is-secondary {
+            color: var(--btn-color-secondary-text);
+            border-color: var(--gray-lite-2);
+
+            &:hover {
+                background: var(--btn-color-secondary);
+            }
+        }
+    }
+
+    &.is-icon-only {
+        padding: 0;
+        width: var(--btn-height-medium);
+
+        &.is-small { width: var(--btn-height-small); }
+        &.is-large { width: var(--btn-height-large); }
+    }
+}
+.btn.is-loading:not(.is-outline) .spinner,
+.btn.is-loading:not(.is-ghost) .spinner {
+    --spinner-color: white !important;
+}
+
+.btn-icon {
+    display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    width:       var(--btn-icon-size-md);
-    height:      var(--btn-icon-size-md);
-}
-.btn--sm .btn__icon {
-    width:  var(--btn-icon-size-sm);
-    height: var(--btn-icon-size-sm);
-}
-.btn--lg .btn__icon {
-    width:  var(--btn-icon-size-lg);
-    height: var(--btn-icon-size-lg);
-}
-.btn--icon-top,
-.btn--icon-bottom { flex-direction: column; }
-
-/* ─────────────────────────────────────────────
-   Loader
-───────────────────────────────────────────── */
-.btn__loader {
-    display:          inline-block;
-    width:            var(--btn-loader-size);
-    height:           var(--btn-loader-size);
-    border:           2px solid currentColor;
-    border-top-color: transparent;
-    border-radius:    50%;
-    flex-shrink:      0;
-    animation:        btn-spin 0.6s linear infinite;
-}
-@keyframes btn-spin {
-    to { transform: rotate(360deg); }
-}
-
-/* ─────────────────────────────────────────────
-   States
-───────────────────────────────────────────── */
-.btn:disabled,
-.btn--disabled,
-.btn--loading {
-    opacity:        var(--btn-disabled-opacity);
-    cursor:         not-allowed;
-    pointer-events: none;
-}
-
-/* ─────────────────────────────────────────────
-   Variants
-───────────────────────────────────────────── */
-
-/* Primary */
-.btn--primary {
-    background:   var(--btn-primary-bg);
-    color:        var(--btn-primary-color);
-    border-color: var(--btn-primary-border);
-}
-.btn--primary:hover {
-    background:   var(--btn-primary-bg-hover);
-    border-color: var(--btn-primary-border-hover);
-}
-
-/* Secondary */
-.btn--secondary {
-    background:   var(--btn-secondary-bg);
-    color:        var(--btn-secondary-color);
-    border-color: var(--btn-secondary-border);
-}
-.btn--secondary:hover {
-    background:   var(--btn-secondary-bg-hover);
-    border-color: var(--btn-secondary-border-hover);
-}
-
-/* Danger */
-.btn--danger {
-    background:   var(--btn-danger-bg);
-    color:        var(--btn-danger-color);
-    border-color: var(--btn-danger-border);
-}
-.btn--danger:hover {
-    background:   var(--btn-danger-bg-hover);
-    border-color: var(--btn-danger-border-hover);
-}
-
-/* Success */
-.btn--success {
-    background:   var(--btn-success-bg);
-    color:        var(--btn-success-color);
-    border-color: var(--btn-success-border);
-}
-.btn--success:hover {
-    background:   var(--btn-success-bg-hover);
-    border-color: var(--btn-success-border-hover);
-}
-
-/* Warning */
-.btn--warning {
-    background:   var(--btn-warning-bg);
-    color:        var(--btn-warning-color);
-    border-color: var(--btn-warning-border);
-}
-.btn--warning:hover {
-    background:   var(--btn-warning-bg-hover);
-    border-color: var(--btn-warning-border-hover);
-}
-
-/* Info */
-.btn--info {
-    background:   var(--btn-info-bg);
-    color:        var(--btn-info-color);
-    border-color: var(--btn-info-border);
-}
-.btn--info:hover {
-    background:   var(--btn-info-bg-hover);
-    border-color: var(--btn-info-border-hover);
-}
-
-/* Ghost */
-.btn--ghost {
-    background:   var(--btn-ghost-bg);
-    color:        var(--btn-ghost-color);
-    border-color: var(--btn-ghost-border);
-}
-.btn--ghost:hover {
-    background:   var(--btn-ghost-bg-hover);
-    border-color: var(--btn-ghost-border-hover);
-}
-
-/* Link */
-.btn--link {
-    background:           var(--btn-link-bg);
-    color:                var(--btn-link-color);
-    border-color:         var(--btn-link-border);
-    text-decoration:      underline;
-    text-underline-offset: 2px;
-}
-.btn--link:hover {
-    color: var(--btn-link-color-hover);
-}
-
-/* ─────────────────────────────────────────────
-   Outline modifier
-───────────────────────────────────────────── */
-.btn--outline.btn--primary {
-    background:   transparent;
-    color:        var(--btn-primary-bg);
-    border-color: var(--btn-primary-bg);
-}
-.btn--outline.btn--primary:hover {
-    background: var(--btn-primary-bg);
-    color:      var(--btn-primary-color);
-}
-
-.btn--outline.btn--danger {
-    background:   transparent;
-    color:        var(--btn-danger-bg);
-    border-color: var(--btn-danger-bg);
-}
-.btn--outline.btn--danger:hover {
-    background: var(--btn-danger-bg);
-    color:      var(--btn-danger-color);
-}
-
-.btn--outline.btn--success {
-    background:   transparent;
-    color:        var(--btn-success-bg);
-    border-color: var(--btn-success-bg);
-}
-.btn--outline.btn--success:hover {
-    background: var(--btn-success-bg);
-    color:      var(--btn-success-color);
-}
-
-.btn--outline.btn--warning {
-    background:   transparent;
-    color:        var(--btn-warning-bg);
-    border-color: var(--btn-warning-bg);
-}
-.btn--outline.btn--warning:hover {
-    background: var(--btn-warning-bg);
-    color:      var(--btn-warning-color);
-}
-
-.btn--outline.btn--info {
-    background:   transparent;
-    color:        var(--btn-info-bg);
-    border-color: var(--btn-info-bg);
-}
-.btn--outline.btn--info:hover {
-    background: var(--btn-info-bg);
-    color:      var(--btn-info-color);
-}
-
-.btn--outline.btn--secondary {
-    background:   transparent;
-    color:        var(--btn-secondary-color);
-    border-color: var(--gray-lite-2);
-}
-.btn--outline.btn--secondary:hover {
-    background: var(--btn-secondary-bg);
+    width: var(--btn-icon-size-medium);
+    height: var(--btn-icon-size-medium);
+
+    .is-small & {
+        width: var(--btn-icon-size-small);
+        height: var(--btn-icon-size-small);
+    }
+
+    .is-large & {
+        width: var(--btn-icon-size-large);
+        height: var(--btn-icon-size-large);
+    }
 }