@konce-pt/styles 0.8.1 → 0.8.3

package/components.css

@@ -845,6 +845,17 @@
     padding: var(--kpt-space-8, 2rem);
     color: var(--kpt-color-primary-contrast);
     background: var(--kpt-auth-promo-bg, linear-gradient(135deg, var(--kpt-color-primary), var(--kpt-color-primary-hover)));
+    --kpt-color-surface: transparent;
+    --kpt-color-surface-raised: color-mix(in oklab, var(--kpt-color-primary-contrast) 12%, transparent);
+    --kpt-color-surface-variant: color-mix(in oklab, var(--kpt-color-primary-contrast) 16%, transparent);
+    --kpt-color-surface-hover: color-mix(in oklab, var(--kpt-color-primary-contrast) 12%, transparent);
+    --kpt-color-surface-selected: color-mix(in oklab, var(--kpt-color-primary-contrast) 20%, transparent);
+    --kpt-color-surface-sunken: color-mix(in oklab, var(--kpt-color-primary-contrast) 8%, transparent);
+    --kpt-color-muted: color-mix(in oklab, var(--kpt-color-primary-contrast) 12%, transparent);
+    --kpt-color-on-surface: var(--kpt-color-primary-contrast);
+    --kpt-color-on-surface-muted: color-mix(in oklab, var(--kpt-color-primary-contrast) 72%, transparent);
+    --kpt-color-border: color-mix(in oklab, var(--kpt-color-primary-contrast) 35%, transparent);
+    --kpt-color-border-strong: color-mix(in oklab, var(--kpt-color-primary-contrast) 55%, transparent);
   }
   .kpt-auth__promo-inner {
     display: flex;
@@ -1934,7 +1945,7 @@
   .kpt-context-menu__header .kpt-context-menu__label {
     font-weight: var(--kpt-font-weight-semibold, 600);
   }
-  .kpt-context-menu__header kpt-icon {
+  .kpt-context-menu__header .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-context-menu__text {
@@ -2008,7 +2019,7 @@
   .kpt-data-table__pager [kptPaginatorActions] {
     margin-inline-start: 0.5rem;
   }
-  .kpt-data-table__pager kpt-paginator {
+  .kpt-data-table__pager .kpt-paginator {
     flex: 1 1 auto;
     min-width: 0;
   }
@@ -2083,7 +2094,7 @@
     border-color: var(--kpt-form-field-border-focus);
     box-shadow: 0 0 0 2px color-mix(in oklch, var(--kpt-form-field-border-focus) 30%, transparent);
   }
-  .kpt-data-table__filter-row kpt-select, .kpt-data-table__filter-row kpt-date-range {
+  .kpt-data-table__filter-row .kpt-select-host, .kpt-data-table__filter-row .kpt-date-range-host {
     display: block;
     width: 100%;
     font-weight: var(--kpt-font-weight-normal, 400);
@@ -2217,7 +2228,7 @@
     cursor: pointer;
     transition: background-color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard), color var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
-  .kpt-data-table__expander-btn kpt-icon {
+  .kpt-data-table__expander-btn .kpt-icon-host {
     display: inline-flex;
     transition: transform var(--kpt-motion-duration-fast, 120ms) var(--kpt-motion-easing-standard);
   }
@@ -2232,7 +2243,7 @@
   .kpt-data-table__expander-btn--open {
     color: var(--kpt-color-primary);
   }
-  .kpt-data-table__expander-btn--open kpt-icon {
+  .kpt-data-table__expander-btn--open .kpt-icon-host {
     transform: rotate(90deg);
   }
   .kpt-data-table__detail-row > .kpt-data-table__detail {
@@ -2363,7 +2374,7 @@
     text-align: center;
     color: var(--kpt-color-on-surface-muted);
   }
-  .kpt-data-view kpt-paginator {
+  .kpt-data-view .kpt-paginator {
     margin-top: var(--kpt-space-3, 0.75rem);
     display: block;
   }
@@ -2932,7 +2943,7 @@
   .kpt-calendar__timebar:hover {
     background: var(--kpt-color-muted);
   }
-  .kpt-calendar__timebar kpt-icon {
+  .kpt-calendar__timebar .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-calendar__footer {
@@ -3365,7 +3376,7 @@
     border-radius: var(--kpt-radius-md, 0.5rem);
     font-size: var(--kpt-font-size-sm, 0.875rem);
   }
-  .kpt-file-upload__file kpt-icon {
+  .kpt-file-upload__file .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-file-upload__name {
@@ -3411,7 +3422,7 @@
   }
   .kpt-form-field__required {
     color: var(--kpt-color-danger);
-    margin-inline-start: 0.125rem;
+    margin-inline-start: 0.25rem;
   }
   .kpt-form-field__message {
     font-size: var(--kpt-font-size-xs, 0.75rem);
@@ -4139,10 +4150,10 @@
   .kpt-menu__item--danger {
     color: var(--kpt-color-danger);
   }
-  .kpt-menu__item kpt-icon {
+  .kpt-menu__item .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
-  .kpt-menu__item--danger kpt-icon {
+  .kpt-menu__item--danger .kpt-icon-host {
     color: var(--kpt-color-danger);
   }
   /* Wiersz nagłówkowy — dane zalogowanego użytkownika lub opis menu. */
@@ -4157,7 +4168,7 @@
   .kpt-menu__header .kpt-menu__label {
     font-weight: var(--kpt-font-weight-semibold, 600);
   }
-  .kpt-menu__header kpt-icon {
+  .kpt-menu__header .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-menu__text {
@@ -4629,7 +4640,7 @@
   .kpt-pick-list__controls button:hover {
     background: var(--kpt-color-muted);
   }
-  .kpt-pick-list__controls button kpt-icon + kpt-icon {
+  .kpt-pick-list__controls button .kpt-icon-host + .kpt-icon-host {
     margin-left: -0.5rem;
   }
 }
@@ -5196,13 +5207,13 @@
   .kpt-rt-menu__item:hover {
     background: var(--kpt-color-muted);
   }
-  .kpt-rt-menu__item kpt-icon {
+  .kpt-rt-menu__item .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-rt-menu__item--danger {
     color: var(--kpt-color-danger);
   }
-  .kpt-rt-menu__item--danger kpt-icon {
+  .kpt-rt-menu__item--danger .kpt-icon-host {
     color: var(--kpt-color-danger);
   }
   .kpt-rt-menu__item.is-disabled {
@@ -5459,14 +5470,14 @@
     color: var(--kpt-color-on-primary);
     font-size: 0.7rem;
   }
-  .kpt-select__check kpt-icon {
+  .kpt-select__check .kpt-icon-host {
     opacity: 0;
   }
   .kpt-select__check.is-on {
     background: var(--kpt-color-primary);
     border-color: var(--kpt-color-primary);
   }
-  .kpt-select__check.is-on kpt-icon {
+  .kpt-select__check.is-on .kpt-icon-host {
     opacity: 1;
   }
   .kpt-select__empty {
@@ -5905,7 +5916,7 @@
   .kpt-split-button__item--danger {
     color: var(--kpt-color-danger);
   }
-  .kpt-split-button__item kpt-icon {
+  .kpt-split-button__item .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-split-button {
@@ -5922,7 +5933,7 @@
   .kpt-split-button__header .kpt-split-button__label {
     font-weight: var(--kpt-font-weight-semibold, 600);
   }
-  .kpt-split-button__header kpt-icon {
+  .kpt-split-button__header .kpt-icon-host {
     color: var(--kpt-color-on-surface-muted);
   }
   .kpt-split-button__text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/styles",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "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.1"
+    "@konce-pt/tokens": "0.8.3"
   },
   "devDependencies": {
     "sass": "^1.77.0"