@konce-pt/styles 0.8.5 → 0.9.0

package/components.css

@@ -92,7 +92,7 @@
     border: var(--kpt-border-width-thin, 1px) solid color-mix(in oklch, var(--_accent) 35%, transparent);
     border-inline-start: 3px solid var(--_accent);
     border-radius: var(--kpt-radius-md, 0.5rem);
-    background: color-mix(in oklch, var(--_accent) 10%, var(--kpt-color-surface));
+    background: color-mix(in oklab, var(--_accent) 10%, var(--kpt-color-surface));
     color: var(--kpt-color-on-surface);
     font-size: var(--kpt-font-size-sm, 0.875rem);
   }
@@ -1354,6 +1354,7 @@
     cursor: pointer;
     background-color: var(--_bg);
     color: var(--_fg);
+    text-decoration: none;
     transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
   .kpt-button::after {
@@ -1367,33 +1368,65 @@
     pointer-events: none;
     transition: opacity var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-button:hover:not(:disabled) {
+  .kpt-button:hover:not(:disabled):not([aria-disabled=true]) {
     --_state: var(--_bg-hover);
   }
-  .kpt-button:hover:not(:disabled)::after {
+  .kpt-button:hover:not(:disabled):not([aria-disabled=true])::after {
     opacity: 1;
   }
-  .kpt-button:active:not(:disabled) {
+  .kpt-button:active:not(:disabled):not([aria-disabled=true]) {
     --_state: var(--_bg-active, var(--_bg-hover));
   }
-  .kpt-button:disabled {
+  .kpt-button:is(:disabled, [aria-disabled=true]) {
     cursor: not-allowed;
     opacity: 0.5;
   }
+  .kpt-button__content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kpt-button-gap, 0.5rem);
+  }
+  .kpt-button :is(.kpt-button__icon, .kpt-button__content .kpt-icon-host) {
+    font-size: var(--_icon, 1.125rem);
+  }
+  .kpt-button[data-size=xs] {
+    --_h: 1.75rem;
+    --_px: 0.5rem;
+    --_fs: 0.75rem;
+    --_icon: 0.875rem;
+  }
   .kpt-button[data-size=sm] {
     --_h: 2rem;
     --_px: 0.75rem;
     --_fs: 0.8125rem;
+    --_icon: 1rem;
   }
   .kpt-button[data-size=md] {
     --_h: 2.5rem;
     --_px: 1rem;
     --_fs: 0.875rem;
+    --_icon: 1.125rem;
   }
   .kpt-button[data-size=lg] {
     --_h: 3rem;
     --_px: 1.5rem;
     --_fs: 1rem;
+    --_icon: 1.25rem;
+  }
+  .kpt-button[data-size=xl] {
+    --_h: 3.5rem;
+    --_px: 2rem;
+    --_fs: 1.125rem;
+    --_icon: 1.5rem;
+  }
+  .kpt-button[data-variant=elevated] {
+    --_bg: var(--kpt-button-elevated-bg);
+    --_fg: var(--kpt-button-elevated-fg);
+    --_bg-hover: var(--kpt-button-elevated-bg-hover);
+    box-shadow: var(--kpt-shadow-sm);
+  }
+  .kpt-button[data-variant=elevated]:hover:not(:disabled):not([aria-disabled=true]) {
+    box-shadow: var(--kpt-shadow-md);
   }
   .kpt-button[data-variant=tonal] {
     --_bg: var(--kpt-button-tonal-bg);
@@ -1414,18 +1447,44 @@
     --_bg-hover: var(--kpt-button-text-bg-hover);
     --_bg-active: var(--kpt-button-text-bg-hover);
   }
+  .kpt-button[data-variant=link] {
+    --_bg: transparent;
+    --_fg: var(--kpt-button-link-fg);
+    --_bg-hover: transparent;
+    --_px: 0;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  .kpt-button[data-variant=link]:hover:not(:disabled):not([aria-disabled=true]) {
+    --_fg: var(--kpt-button-link-fg-hover);
+  }
   .kpt-button[data-variant=danger] {
-    --_bg: var(--kpt-color-danger);
-    --_fg: var(--kpt-color-on-danger);
-    --_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);
-    --_bg-active: color-mix(in oklch, var(--kpt-color-danger) 78%, black);
+    --_bg: var(--kpt-button-danger-bg);
+    --_fg: var(--kpt-button-danger-fg);
+    --_bg-hover: var(--kpt-button-danger-bg-hover);
+  }
+  .kpt-button[data-variant=success] {
+    --_bg: var(--kpt-button-success-bg);
+    --_fg: var(--kpt-button-success-fg);
+    --_bg-hover: var(--kpt-button-success-bg-hover);
+  }
+  .kpt-button[data-variant=warning] {
+    --_bg: var(--kpt-button-warning-bg);
+    --_fg: var(--kpt-button-warning-fg);
+    --_bg-hover: var(--kpt-button-warning-bg-hover);
+  }
+  .kpt-button[data-variant=info] {
+    --_bg: var(--kpt-button-info-bg);
+    --_fg: var(--kpt-button-info-fg);
+    --_bg-hover: var(--kpt-button-info-bg-hover);
   }
   .kpt-button--loading .kpt-button__content {
     opacity: 0.75;
   }
   .kpt-button__spinner {
-    width: 1em;
-    height: 1em;
+    width: var(--_icon, 1.125rem);
+    height: var(--_icon, 1.125rem);
+    flex: none;
     border: 2px solid currentColor;
     border-right-color: transparent;
     border-radius: 50%;
@@ -1467,10 +1526,14 @@
     border-inline-start: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
     background: none;
     color: var(--kpt-color-on-surface);
-    padding: 0 var(--kpt-space-4, 1rem);
-    height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kpt-button-gap, 0.5rem);
+    padding: 0 var(--_px, 1rem);
+    height: var(--_h, 2.5rem);
     font: inherit;
-    font-size: var(--kpt-font-size-sm, 0.875rem);
+    font-size: var(--_fs, 0.875rem);
     font-weight: var(--kpt-font-weight-medium, 500);
     cursor: pointer;
     transition: background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
@@ -1489,15 +1552,30 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
-  .kpt-button-group[data-size=sm] .kpt-button-group__item {
-    height: 2rem;
-    padding-inline: 0.75rem;
-    font-size: 0.8125rem;
+  .kpt-button-group__icon {
+    font-size: var(--_icon, 1.125rem);
   }
-  .kpt-button-group[data-size=lg] .kpt-button-group__item {
-    height: 3rem;
-    padding-inline: 1.5rem;
-    font-size: 1rem;
+  .kpt-button-group {
+    --_h: 2.5rem;
+    --_px: 1rem;
+    --_fs: 0.875rem;
+    --_icon: 1.125rem;
+  }
+  .kpt-button-group[data-size=sm] {
+    --_h: 2rem;
+    --_px: 0.75rem;
+    --_fs: 0.8125rem;
+    --_icon: 1rem;
+  }
+  .kpt-button-group[data-size=lg] {
+    --_h: 3rem;
+    --_px: 1.5rem;
+    --_fs: 1rem;
+    --_icon: 1.25rem;
+  }
+  .kpt-button-group[data-icon-only] .kpt-button-group__item {
+    --_px: 0;
+    width: var(--_h);
   }
 }
 
@@ -1742,7 +1820,7 @@
     white-space: nowrap;
   }
   .kpt-chip[data-variant=primary] {
-    --_bg: color-mix(in oklch, var(--kpt-color-primary) 14%, var(--kpt-color-surface));
+    --_bg: color-mix(in oklab, var(--kpt-color-primary) 14%, var(--kpt-color-surface));
     --_fg: var(--kpt-color-primary);
   }
   .kpt-chip[data-variant=success] {
@@ -3029,7 +3107,8 @@
 @layer kpt.components {
   .kpt-dialog {
     margin: auto;
-    width: min(32rem, 100vw - 2rem);
+    --_width: 32rem;
+    width: min(var(--_width), 100vw - 2rem);
     max-height: calc(100vh - 4rem);
     padding: 0;
     border: var(--kpt-border-width-thin, 1px) solid var(--kpt-color-border);
@@ -3038,6 +3117,12 @@
     color: var(--kpt-color-on-surface);
     box-shadow: var(--kpt-elevation-4);
   }
+  .kpt-dialog[data-size=sm] {
+    --_width: 24rem;
+  }
+  .kpt-dialog[data-size=lg] {
+    --_width: 48rem;
+  }
   .kpt-dialog::backdrop {
     background: var(--kpt-color-overlay-scrim);
   }
@@ -3095,6 +3180,13 @@
   .kpt-dialog [kptDialogFooter] {
     flex: none;
     display: flex;
+    /*
+     * Zawijanie jest obowiązkowe, nie kosmetyczne. `<dialog>` dostaje z arkusza przeglądarki
+     * `overflow: auto`, więc stopka, która nie mieści się w szerokości okna, nie wystaje —
+     * zostaje **ucięta**. Cztery przyciski w oknie `sm` wystarczą, żeby pierwszy z nich
+     * przestał być czytelny, a użytkownik nie ma jak się do niego dostać.
+     */
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: var(--kpt-space-3, 0.75rem);
     padding: var(--kpt-space-4, 1rem) var(--kpt-space-6, 1.5rem);
@@ -3409,7 +3501,7 @@
   }
   .kpt-file-upload__zone:hover:not(.is-disabled), .kpt-file-upload__zone.is-dragover {
     border-color: var(--kpt-color-primary);
-    background: color-mix(in oklch, var(--kpt-color-primary) 6%, var(--kpt-color-surface));
+    background: color-mix(in oklab, var(--kpt-color-primary) 6%, var(--kpt-color-surface));
   }
   .kpt-file-upload__zone.is-disabled {
     opacity: 0.6;
@@ -3728,7 +3820,7 @@
   .kpt-icon-button[data-variant=danger] {
     --_bg: var(--kpt-color-danger);
     --_fg: var(--kpt-color-on-danger);
-    --_bg-hover: color-mix(in oklch, var(--kpt-color-danger) 88%, black);
+    --_bg-hover: color-mix(in oklab, var(--kpt-color-danger) 88%, black);
   }
   @media (prefers-reduced-motion: reduce) {
     .kpt-icon-button::after {
@@ -4854,66 +4946,179 @@
 /* src/lib/progress/progress.component.scss */
 @layer kpt.components {
   .kpt-progress-host {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--kpt-progress-gap, 0.5rem);
+    row-gap: 0.25rem;
     --_color: var(--kpt-color-primary);
+    --_thickness: var(--kpt-progress-thickness-md, 0.5rem);
+    --_stroke: 4;
   }
-  .kpt-progress__linear[data-variant=success],
-  .kpt-progress__circular[data-variant=success] {
+  .kpt-progress-host[data-variant=success] {
     --_color: var(--kpt-color-success);
   }
-  .kpt-progress__linear[data-variant=danger],
-  .kpt-progress__circular[data-variant=danger] {
+  .kpt-progress-host[data-variant=danger] {
     --_color: var(--kpt-color-danger);
   }
-  .kpt-progress__linear[data-variant=warning],
-  .kpt-progress__circular[data-variant=warning] {
+  .kpt-progress-host[data-variant=warning] {
     --_color: var(--kpt-color-warning);
   }
-  .kpt-progress__linear[data-variant=info],
-  .kpt-progress__circular[data-variant=info] {
+  .kpt-progress-host[data-variant=info] {
     --_color: var(--kpt-color-info);
   }
+  .kpt-progress-host[data-size=sm] {
+    --_thickness: var(--kpt-progress-thickness-sm, 0.25rem);
+    --_stroke: 3;
+  }
+  .kpt-progress-host[data-size=lg] {
+    --_thickness: var(--kpt-progress-thickness-lg, 0.75rem);
+    --_stroke: 6;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__label {
+    order: 1;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__value {
+    order: 2;
+    margin-inline-start: auto;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=top] .kpt-progress__linear {
+    order: 3;
+    flex: 1 1 100%;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__linear {
+    order: 1;
+    flex: 1 1 100%;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__label {
+    order: 2;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=bottom] .kpt-progress__value {
+    order: 3;
+    margin-inline-start: auto;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__label {
+    order: 1;
+    flex: 1 1 100%;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__linear {
+    order: 2;
+    flex: 1 1 0;
+  }
+  .kpt-progress-host[data-type=linear][data-label-position=end] .kpt-progress__value {
+    order: 3;
+    flex: 0 0 auto;
+  }
+  .kpt-progress__label {
+    color: var(--kpt-progress-label-fg, var(--kpt-color-on-surface-muted));
+    font-size: var(--kpt-font-size-sm);
+  }
+  .kpt-progress__value {
+    color: var(--kpt-progress-value-fg, var(--kpt-color-on-surface));
+    font-size: var(--kpt-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    line-height: 1.2;
+  }
   .kpt-progress__linear {
-    height: 0.5rem;
+    position: relative;
+    height: var(--_thickness);
     width: 100%;
     border-radius: var(--kpt-radius-full, 9999px);
-    background: var(--kpt-color-surface-variant);
+    background: var(--kpt-progress-track-bg, var(--kpt-color-surface-variant));
     overflow: hidden;
   }
+  .kpt-progress__linear .kpt-progress__buffer,
   .kpt-progress__linear .kpt-progress__bar {
-    height: 100%;
-    background: var(--_color);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
     border-radius: inherit;
+    background: var(--_color);
     transition: width var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-progress__linear .kpt-progress--indeterminate {
-    width: 40% !important;
-    animation: kpt-progress-slide 1.2s ease-in-out infinite;
+  .kpt-progress__linear .kpt-progress__buffer {
+    opacity: var(--kpt-progress-buffer-opacity, 0.32);
+  }
+  .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate {
+    width: 40%;
+    transition: none;
+    animation: kpt-progress-slide 1.6s var(--kpt-motion-easing-standard, ease-in-out) infinite;
+  }
+  .kpt-progress-host[data-type=circular] {
+    display: inline-grid;
+    place-items: center;
+    column-gap: 0;
+    row-gap: 0;
+  }
+  .kpt-progress-host[data-type=circular] > * {
+    grid-area: 1/1;
   }
   .kpt-progress__circular {
     transform: rotate(-90deg);
   }
   .kpt-progress__circular .kpt-progress__track {
     fill: none;
-    stroke: var(--kpt-color-surface-variant);
-    stroke-width: 4;
+    stroke: var(--kpt-progress-track-bg, var(--kpt-color-surface-variant));
+    stroke-width: var(--_stroke);
   }
   .kpt-progress__circular .kpt-progress__bar {
     fill: none;
     stroke: var(--_color);
-    stroke-width: 4;
+    stroke-width: var(--_stroke);
     stroke-linecap: round;
     transition: stroke-dashoffset var(--kpt-motion-duration-base, 200ms) var(--kpt-motion-easing-standard);
   }
   .kpt-progress__circular.kpt-progress--indeterminate {
-    animation: kpt-spinner-rotate 1s linear infinite;
+    animation: kpt-progress-rotate 1.6s linear infinite;
+  }
+  .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
+    transition: none;
+    animation: kpt-progress-dash 1.4s ease-in-out infinite;
   }
   @keyframes kpt-progress-slide {
     0% {
-      transform: translateX(-100%);
+      transform: translateX(-110%) scaleX(0.6);
+    }
+    50% {
+      transform: translateX(90%) scaleX(1.6);
+    }
+    100% {
+      transform: translateX(280%) scaleX(0.6);
+    }
+  }
+  @keyframes kpt-progress-rotate {
+    from {
+      transform: rotate(-90deg);
+    }
+    to {
+      transform: rotate(270deg);
+    }
+  }
+  @keyframes kpt-progress-dash {
+    0% {
+      stroke-dasharray: 1 100.5;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 70 100.5;
+      stroke-dashoffset: -15;
     }
     100% {
-      transform: translateX(350%);
+      stroke-dasharray: 1 100.5;
+      stroke-dashoffset: -99;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kpt-progress__linear .kpt-progress__bar.kpt-progress--indeterminate,
+    .kpt-progress__circular.kpt-progress--indeterminate,
+    .kpt-progress__circular.kpt-progress--indeterminate .kpt-progress__bar {
+      animation-duration: 3.2s;
+    }
+    .kpt-progress__linear .kpt-progress__buffer,
+    .kpt-progress__linear .kpt-progress__bar,
+    .kpt-progress__circular .kpt-progress__bar {
+      transition: none;
     }
   }
 }
@@ -5756,7 +5961,7 @@
   }
   .kpt-skeleton {
     display: block;
-    background: linear-gradient(90deg, var(--kpt-color-surface-variant) 25%, color-mix(in oklch, var(--kpt-color-surface-variant) 60%, var(--kpt-color-surface)) 50%, var(--kpt-color-surface-variant) 75%);
+    background: linear-gradient(90deg, var(--kpt-color-surface-variant) 25%, color-mix(in oklab, var(--kpt-color-surface-variant) 60%, var(--kpt-color-surface)) 50%, var(--kpt-color-surface-variant) 75%);
     background-size: 200% 100%;
     border-radius: var(--kpt-radius-md, 0.5rem);
     animation: kpt-skeleton-shimmer 1.4s ease-in-out infinite;
@@ -8099,7 +8304,7 @@
     background: color-mix(in oklch, var(--kpt-color-primary) 10%, transparent);
   }
   .kpt-roadmap__row:hover .kpt-roadmap__label {
-    background: color-mix(in oklch, var(--kpt-color-primary) 10%, var(--kpt-color-surface));
+    background: color-mix(in oklab, var(--kpt-color-primary) 10%, var(--kpt-color-surface));
   }
   .kpt-roadmap__row--group {
     background: var(--kpt-color-surface-variant, var(--kpt-color-surface));
@@ -8108,7 +8313,7 @@
     background: var(--kpt-color-surface-variant, var(--kpt-color-surface));
   }
   .kpt-roadmap__row--group:hover, .kpt-roadmap__row--group:hover .kpt-roadmap__label {
-    background: color-mix(in oklch, var(--kpt-color-primary) 10%, var(--kpt-color-surface-variant, var(--kpt-color-surface)));
+    background: color-mix(in oklab, var(--kpt-color-primary) 10%, var(--kpt-color-surface-variant, var(--kpt-color-surface)));
   }
   .kpt-roadmap__label {
     position: sticky;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "description": "Base CSS for Koncept UI — reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
   "license": "MIT",
   "author": "konce.pt",
@@ -52,7 +52,7 @@
     "src"
   ],
   "peerDependencies": {
-    "@konce-pt/tokens": "0.8.5"
+    "@konce-pt/tokens": "0.9.0"
   },
   "devDependencies": {
     "sass": "^1.77.0"