@inspark/inspark-components 19.0.49 → 19.0.51

package/src/scss/patchPrimeng/calendar/_primeng.components.calendar.scss

@@ -0,0 +1,401 @@
+/* Базовые контейнеры */
+.p-calendar,
+.p-datepicker-panel {
+  position: relative;
+  display: inline-block;
+}
+
+/* PrimeNG 19: trigger button class changed from .p-calendar-button to .p-datepicker-dropdown */
+.p-calendar .p-calendar-button,
+.p-calendar .p-datepicker-dropdown,
+.p-datepicker .p-calendar-button,
+.p-datepicker .p-datepicker-dropdown {
+  height: 100%;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  width: 2em;
+  border-left: 0 none;
+}
+
+.p-calendar .p-calendar-button:enabled:hover,
+.p-calendar .p-calendar-button:focus,
+.p-calendar .p-datepicker-dropdown:enabled:hover,
+.p-calendar .p-datepicker-dropdown:focus,
+.p-datepicker .p-calendar-button:enabled:hover,
+.p-datepicker .p-calendar-button:focus,
+.p-datepicker .p-datepicker-dropdown:enabled:hover,
+.p-datepicker .p-datepicker-dropdown:focus {
+  border-left: 0 none;
+}
+
+.p-datepicker-panel {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.p-timepicker {
+  order: 2 !important;
+  width: 100% !important;
+  margin-top: 8px !important;
+  border-top: 1px solid var(--colorBgLevel3) !important;
+  padding-top: 8px !important;
+  display: flex !important;
+  justify-content: center !important;
+  gap: 1rem !important;
+}
+
+.p-datepicker-panel .p-datepicker-group {
+  border-right: none !important;
+}
+.p-calendar .p-datepicker,
+.p-calendar .p-datepicker-panel {
+  min-width: 100%;
+
+}
+
+/* Fluid */
+.p-fluid .p-calendar {
+  width: 100%;
+}
+
+.p-fluid .p-calendar-button {
+  width: 2em;
+}
+
+.p-fluid .p-datepicker-buttonbar button {
+  width: auto;
+  outline: none !important;
+}
+
+.p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
+  width: calc(100% - 2em);
+}
+
+/* Datepicker */
+/* PrimeNG 19: .p-datepicker is now the ROOT wrapper (input+button span), not the popup.
+   Only .p-datepicker-panel is the absolutely-positioned popup. */
+.p-datepicker-panel {
+  width: auto;
+  padding: .2em;
+  position: absolute;
+}
+
+.p-datepicker-panel.p-datepicker-panel-inline {
+  display: inline-block;
+  position: static;
+}
+
+.p-datepicker .p-datepicker-group,
+.p-datepicker-panel .p-datepicker-group {
+  border-left-width: 0;
+  border-right-width: 0;
+  border-top-width: 0;
+  border-bottom-width: 0;
+}
+
+/* Header */
+.p-datepicker .p-datepicker-header,
+.p-datepicker-panel .p-datepicker-header {
+  position: relative;
+  padding: .5em 0;
+}
+
+.p-datepicker .p-datepicker-prev,
+.p-datepicker .p-datepicker-next,
+.p-datepicker .p-datepicker-prev-button,
+.p-datepicker .p-datepicker-next-button,
+.p-datepicker-panel .p-datepicker-prev-button,
+.p-datepicker-panel .p-datepicker-next-button {
+  position: absolute;
+  top: .5em;
+  width: 1.8em;
+  height: 1.8em;
+}
+
+.p-datepicker .p-datepicker-prev,
+.p-datepicker .p-datepicker-prev-button,
+.p-datepicker-panel .p-datepicker-prev-button {
+  left: .125em;
+}
+
+.p-datepicker .p-datepicker-next,
+.p-datepicker .p-datepicker-next-button,
+.p-datepicker-panel .p-datepicker-next-button {
+  right: .125em;
+}
+
+.p-datepicker .p-datepicker-prev span,
+.p-datepicker .p-datepicker-next span,
+.p-datepicker .p-datepicker-prev-button span,
+.p-datepicker .p-datepicker-next-button span,
+.p-datepicker-panel .p-datepicker-prev-button span,
+.p-datepicker-panel .p-datepicker-next-button span {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-top: -.5em;
+  margin-left: -.5em;
+}
+
+.p-datepicker .p-datepicker-title,
+.p-datepicker-panel .p-datepicker-title {
+  margin: 0 2.3em;
+  line-height: 1.8em;
+  text-align: center;
+}
+
+.p-datepicker .p-datepicker-title select,
+.p-datepicker-panel .p-datepicker-title select {
+  font-size: 1em;
+  margin: .125em 0;
+  vertical-align: middle;
+}
+
+.p-datepicker .p-datepicker-month,
+.p-datepicker .p-datepicker-select-month,
+.p-datepicker-panel .p-datepicker-select-month {
+  margin-right: .25em;
+}
+
+.p-datepicker span.p-datepicker-year,
+.p-datepicker .p-datepicker-select-year,
+.p-datepicker-panel .p-datepicker-select-year {
+  margin-left: .25em;
+}
+
+/* Multiple Month DatePicker */
+.p-datepicker-multiple-month .p-datepicker-group {
+  display: table-cell;
+  border-left-width: 0;
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-right-width: 1px;
+}
+
+/* DatePicker Table */
+.p-datepicker table,
+.p-datepicker-panel table {
+  width: 100%;
+  font-size: .9em;
+  border-collapse: collapse;
+  margin: 0 0 .4em;
+}
+
+.p-datepicker th,
+.p-datepicker-panel th {
+  padding: .5em;
+  text-align: center;
+  font-weight: bold;
+  border: 0;
+}
+
+.p-datepicker td,
+.p-datepicker-panel td,
+.p-datepicker-day-cell {
+  border: 0;
+  padding: 0;
+}
+
+.p-datepicker td > span,
+.p-datepicker td > a,
+.p-datepicker-day-cell .p-datepicker-day,
+.p-datepicker-panel td > span,
+.p-datepicker-panel td > a {
+  display: block;
+  padding: .5em;
+  text-decoration: none;
+  border: 0 none;
+  text-align: center;
+}
+
+.p-datepicker .p-datepicker-buttonbar {
+  border-left: 0 none;
+  border-right: 0 none;
+  border-bottom: 0 none;
+  padding: .5em;
+}
+
+.p-datepicker .p-datepicker-buttonbar > .p-g > div:last-child {
+  text-align: right;
+}
+
+.p-datepicker .p-datepicker-buttonbar > .p-g > div {
+  padding: 0;
+}
+
+.p-calendar.p-calendar-w-btn input {
+  -moz-border-radius-topright: 0px;
+  -webkit-border-top-right-radius: 0px;
+  -khtml-border-top-right-radius: 0px;
+  border-top-right-radius: 0px;
+  -moz-border-radius-bottomright: 0px;
+  -webkit-border-bottom-right-radius: 0px;
+  -khtml-border-bottom-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+/* Month Picker */
+.p-monthpicker .p-monthpicker-month {
+  width: 33.3%;
+  display: inline-block;
+  text-align: center;
+  padding: .5em;
+  cursor: pointer;
+}
+
+.p-datepicker-monthpicker select.p-datepicker-year {
+  width: auto;
+}
+
+/* Time Picker */
+.p-timepicker {
+  text-align: center;
+  padding: .5em 0;
+}
+
+.p-timepicker > div {
+  display: inline-block;
+  margin-left: .5em;
+  min-width: 1.5em;
+}
+
+.p-timepicker > .p-minute-picker,
+.p-timepicker > .p-second-picker {
+  margin-left: 0;
+}
+
+.p-timepicker > .p-separator {
+  margin-left: 0px;
+  min-width: .75em;
+}
+
+.p-timepicker > .p-separator a {
+  visibility: hidden;
+}
+
+.p-timepicker > div a {
+  display: block;
+  opacity: 0.7;
+  filter:Alpha(Opacity=70);
+  cursor: pointer;
+}
+
+.p-timepicker > div a:last-child {
+  margin-top: .3em;
+}
+
+.p-timepicker > div a:hover {
+  display: block;
+  opacity: 1;
+  filter:Alpha(Opacity=100);
+}
+
+input[type=text]::-ms-clear {
+  display: none;
+}
+
+/* Touch UI */
+.p-datepicker-touch-ui,
+.p-calendar .p-datepicker-touch-ui {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  min-width: 80vw;
+}
+
+.p-datepicker-touch-ui.p-datepicker th {
+  padding: 2em 0;
+}
+
+.p-datepicker-touch-ui.p-datepicker td {
+  padding: 0;
+}
+
+.p-datepicker-touch-ui.p-datepicker td > span,
+.p-datepicker-touch-ui.p-datepicker td > a {
+  padding: 2em 0;
+}
+
+.p-datepicker-touch-ui .p-timepicker {
+  padding: 1em 0;
+}
+
+.p-datepicker-touch-ui .p-timepicker > div a {
+  font-size: 2em;
+}
+
+.p-datepicker-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+@media screen and (max-width: 40em) {
+  .p-datepicker-multiple-month {
+    width: 17em;
+    overflow: auto;
+  }
+
+  .p-datepicker-touch-ui.p-datepicker th {
+    padding: 1em 0;
+  }
+
+  .p-datepicker-touch-ui.p-datepicker td span,
+  .p-datepicker-touch-ui.p-datepicker td a {
+    padding: 1em 0;
+  }
+}
+
+/* ============================================ */
+/* ПЕРЕОПРЕДЕЛЯЮЩИЕ СТИЛИ (с !important) */
+/* ============================================ */
+
+/* PrimeNG 19: .p-datepicker is the ROOT wrapper — only style the panel popup here */
+.p-datepicker-panel {
+  background: var(--element-background) !important;
+  padding: 8px !important;
+}
+
+.p-datepicker-panel a:hover {
+  background: var(--colorBgLevel2) !important;
+}
+
+/* PrimeNG 19: trigger button is .p-datepicker-dropdown (was .p-calendar-button) */
+.p-calendar .p-calendar-button,
+.p-calendar .p-datepicker-dropdown,
+.p-datepicker .p-calendar-button,
+.p-datepicker .p-datepicker-dropdown {
+  height: 37px !important;
+  width: 2.5em !important;
+  flex-shrink: 0;
+}
+
+/* PrimeNG 19: root wrapper is .p-datepicker (display: inline-flex already set by PrimeNG) */
+.p-calendar,
+.p-datepicker {
+  display: inline-flex !important;
+  align-items: center !important;
+}
+
+.p-calendar .p-button-icon .p-button-icon-left,
+.p-datepicker .p-button-icon .p-button-icon-left {
+  margin-top: -9px !important;
+}
+
+.p-calendar .p-button-text,
+.p-datepicker .p-button-text {
+  vertical-align: middle !important;
+}
+
+.p-state-active,
+.p-datepicker-day-selected {
+  background: #38738280 !important;
+}
+
+.p-state-disabled,
+.p-datepicker .p-disabled {
+  opacity: .4 !important;
+}
+
+

package/src/scss/patchPrimeng/calendar/_primeng.components.calendar.theme-light.scss

@@ -0,0 +1,67 @@
+@use "@inspark/components-web/src/inspark" as *;
+
+// PrimeNG 19: trigger button class is .p-datepicker-dropdown (was .p-calendar-button)
+// Match the text input field so input+button look like one unit
+.p-calendar,
+.p-datepicker {
+  // PrimeNG 19: .p-datepicker-dropdown; older: .p-calendar-button
+  .p-datepicker-dropdown,
+  .p-calendar-button {
+    background-color: var(--ids-theme-inuit-forms-background, #{$form-background});
+    color: var(--ids-theme-inuit-forms-color, #{$form-color});
+    border: var(--ids-theme-inuit-forms-border_outer, #{$form-border_outer});
+    border-left: 0 none !important;
+    box-shadow: none;
+
+    &:hover,
+    &:enabled:hover {
+      background-color: var(--colorBg, #ebebeb);
+      border-color: var(--ids-theme-primary);
+    }
+
+    &:focus {
+      box-shadow: none;
+      outline: 0;
+    }
+  }
+}
+
+// Calendar popup panel — use a white background in light theme
+// (base uses --element-background = #D6D6D7 which is too dark for light theme)
+.p-datepicker-panel {
+  background: var(--colorBgLevel3, #fff) !important;
+  color: var(--ids-theme-inuit-forms-color, #{$form-color}) !important;
+  border: 1px solid var(--colorBg, #ebebeb);
+}
+
+.p-datepicker-panel th {
+  color: var(--ids-theme-inuit-forms-color, #{$form-color});
+}
+
+.p-datepicker-panel td > span,
+.p-datepicker-panel td > a,
+.p-datepicker-day-cell .p-datepicker-day {
+  color: var(--ids-theme-inuit-forms-color, #{$form-color});
+}
+
+.p-datepicker-panel td > span:hover,
+.p-datepicker-panel td > a:hover,
+.p-datepicker-day-cell .p-datepicker-day:hover {
+  background: var(--colorBg, #ebebeb) !important;
+}
+
+.p-datepicker-title {
+  color: var(--ids-theme-inuit-forms-color, #{$form-color});
+}
+
+.p-datepicker-prev-button,
+.p-datepicker-next-button,
+.p-datepicker-prev,
+.p-datepicker-next {
+  color: var(--ids-theme-inuit-forms-color, #{$form-color}) !important;
+  background: transparent !important;
+
+  &:hover {
+    background: var(--colorBg, #ebebeb) !important;
+  }
+}

package/src/scss/patchPrimeng/card/_primeng.components.card.scss

@@ -0,0 +1,6 @@
+
+
+.p-card-title {
+  font-size: inherit;
+  margin-bottom: 0;
+}

package/src/scss/patchPrimeng/card/_primeng.components.card.theme-contrast.scss

@@ -0,0 +1,3 @@
+.p-card {
+  background-color: var(--card-background);
+}

package/src/scss/patchPrimeng/card/_primeng.components.card.theme-dark.scss

@@ -0,0 +1,3 @@
+.p-card {
+  background-color: var(--card-background);
+}

package/src/scss/patchPrimeng/card/_primeng.components.card.theme-light.scss

@@ -0,0 +1,3 @@
+.p-card {
+  background-color: var(--card-background);
+}

package/src/scss/patchPrimeng/checkbox/_primeng.components.checkbox.scss

@@ -0,0 +1,75 @@
+//@import "~primeng/resources/components/checkbox/checkbox.css";
+
+.p-checkbox {
+  display: inline-block;
+  margin-bottom: 2px;
+  cursor: pointer;
+
+  @mixin p-checkbox-box($sibling-icon-selector : ".p-checkbox-icon") {
+
+    #{$sibling-icon-selector} {
+      display: inline-block;
+      position: relative;
+      height: 20px;
+      top: 4px;
+      margin-bottom: 0;
+      padding-left: 28px;
+      font-size: $font-size-base;
+      font-weight: $font-weight-normal;
+      line-height: $line-height-base;
+      text-transform: none;
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        position: absolute;
+        left: 0;
+        width: $checkbox-size - 4px;
+        height: $checkbox-size - 4px;
+        border-radius: $global-radius - 1px;
+        // scss-lint:disable ColorVariable
+        background: transparent;
+        border: 2px solid $checkbox-border-color;
+        // scss-lint:enable ColorVariable
+        content: " ";
+      }
+
+      &::after {
+        top: -2px;
+        left: -2px;
+        width: $checkbox-size;
+        height: $checkbox-size;
+        transition: transform 0.1s ease-in-out, opacity 0.2s linear;
+        opacity: 0;
+        border: 0 none;
+      }
+
+      &.pi-check::after {
+        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPCEtLUdlbmVyYXRvcjogU2tldGNoIDQ1LjIgKDQzNTE0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC0tPgogIDx0aXRsZT4KICAgIEljb24vY2hlY2tib3hfb24KICA8L3RpdGxlPgogIDxkZXNjPgogICAgQ3JlYXRlZCB3aXRoIFNrZXRjaC4KICA8L2Rlc2M+CiAgPGRlZnM+CiAgICA8cGF0aCBpZD0iY2hlY2tib3hfb24tYSIgZD0iTTIsMy45OTA3OTUxNCBDMiwyLjg5MTMwOTM0IDIuODk4MjEyMzgsMiAzLjk5MDc5NTE0LDIgTDIwLjAwOTIwNDksMiBDMjEuMTA4NjkwNywyIDIyLDIuODk4MjEyMzggMjIsMy45OTA3OTUxNCBMMjIsMjAuMDA5MjA0OSBDMjIsMjEuMTA4NjkwNyAyMS4xMDE3ODc2LDIyIDIwLjAwOTIwNDksMjIgTDMuOTkwNzk1MTQsMjIgQzIuODkxMzA5MzQsMjIgMiwyMS4xMDE3ODc2IDIsMjAuMDA5MjA0OSBMMiwzLjk5MDc5NTE0IFogTTkuMzAyNzcxMjYsMTcuOTI0NzczMyBMMTguODA4LDcuNDY5MTk2MzYgTDE3LjE5MjkzMjIsNiBMOS4yMjg1MjUzLDE0Ljc2MTg5NTcgTDYuNTQzNDQyMzEsMTIuMDc2ODEyOCBMNSwxMy42MjExMjg1IEw5LjMwMjc3MTI2LDE3LjkyNDc3MzMgWiIvPgogIDwvZGVmcz4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj4KICAgIDxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMiIgeT0iMiIvPgogICAgPG1hc2sgaWQ9ImNoZWNrYm94X29uLWIiIGZpbGw9IiNmZmYiPgogICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjaGVja2JveF9vbi1hIi8+CiAgICA8L21hc2s+CiAgICA8Zy8+CiAgICA8ZyBmaWxsPSIjNzhGNEZGIiBtYXNrPSJ1cmwoI2NoZWNrYm94X29uLWIpIj4KICAgICAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIwIiB5PSIwIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K');
+        opacity: 1;
+      }
+
+      &.pi-minus::after {
+        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4gIDxkZWZzPiAgICA8cGF0aCBpZD0iY2hlY2tib3hfaW5kZXRlcm1pbmF0ZS1jb3B5Mi1hIiBkPSJNMiwyLjgzMzMzMzMzIEMyLDIuMzczMDk2MDQgMi4zNzMwOTYwNCwyIDIuODMzMzMzMzMsMiBMMjEuMTY2NjY2NywyIEMyMS42MjY5MDQsMiAyMiwyLjM3MzA5NjA0IDIyLDIuODMzMzMzMzMgTDIyLDIxLjE2NjY2NjcgQzIyLDIxLjYyNjkwNCAyMS42MjY5MDQsMjIgMjEuMTY2NjY2NywyMiBMMi44MzMzMzMzMywyMiBDMi4zNzMwOTYwNCwyMiAyLDIxLjYyNjkwNCAyLDIxLjE2NjY2NjcgTDIsMi44MzMzMzMzMyBaIE0xNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgTDgsMTEgQzcuNDQ3NzE1MjUsMTEgNywxMS40NDc3MTUzIDcsMTIgQzcsMTIuNTUyMjg0NyA3LjQ0NzcxNTI1LDEzIDgsMTMgTDE2LDEzIFoiLz4gIDwvZGVmcz4gIDx1c2UgZmlsbD0iIzc4RjRGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgeGxpbms6aHJlZj0iI2NoZWNrYm94X2luZGV0ZXJtaW5hdGUtY29weTItYSIvPjwvc3ZnPg==');
+        opacity: 1;
+      }
+    }
+
+    &.p-state-active #{$sibling-icon-selector}.pi-check::after,
+    &.p-state-active #{$sibling-icon-selector}.pi-minus::after {
+      opacity: 1;
+    }
+  }
+
+  .p-checkbox-box {
+    @include p-checkbox-box;
+
+    &.p-state-active {
+      background: none;
+    }
+  }
+}
+
+.p-checkbox-label {
+  vertical-align: middle;
+}

package/src/scss/patchPrimeng/checkbox/_primeng.components.checkbox.theme-contrast.scss

@@ -0,0 +1,45 @@
+.p-checkbox {
+  .p-checkbox-box {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+
+    .p-checkbox-icon {
+
+      &::before,
+      &::after {
+        border: 2px solid $checkbox-border-color;
+      }
+
+      &::after {
+        border: 0 none;
+        opacity: 0;
+      }
+
+      &.pi-check::after {
+        background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiPiAgPHRpdGxlPiAgICBJY29uL2NoZWNrYm94X29uICA8L3RpdGxlPiAgPGRlc2M+ICAgIENyZWF0ZWQgd2l0aCBTa2V0Y2guICA8L2Rlc2M+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImNoZWNrYm94X29uLWEiIGQ9Ik0yLDMuOTkwNzk1MTQgQzIsMi44OTEzMDkzNCAyLjg5ODIxMjM4LDIgMy45OTA3OTUxNCwyIEwyMC4wMDkyMDQ5LDIgQzIxLjEwODY5MDcsMiAyMiwyLjg5ODIxMjM4IDIyLDMuOTkwNzk1MTQgTDIyLDIwLjAwOTIwNDkgQzIyLDIxLjEwODY5MDcgMjEuMTAxNzg3NiwyMiAyMC4wMDkyMDQ5LDIyIEwzLjk5MDc5NTE0LDIyIEMyLjg5MTMwOTM0LDIyIDIsMjEuMTAxNzg3NiAyLDIwLjAwOTIwNDkgTDIsMy45OTA3OTUxNCBaIE05LjMwMjc3MTI2LDE3LjkyNDc3MzMgTDE4LjgwOCw3LjQ2OTE5NjM2IEwxNy4xOTI5MzIyLDYgTDkuMjI4NTI1MywxNC43NjE4OTU3IEw2LjU0MzQ0MjMxLDEyLjA3NjgxMjggTDUsMTMuNjIxMTI4NSBMOS4zMDI3NzEyNiwxNy45MjQ3NzMzIFoiLz4gIDwvZGVmcz4gIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiPiAgICA8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHg9IjIiIHk9IjIiLz4gICAgPG1hc2sgaWQ9ImNoZWNrYm94X29uLWIiIGZpbGw9IiNmZmYiPiAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2NoZWNrYm94X29uLWEiLz4gICAgPC9tYXNrPiAgICA8Zy8+ICAgIDxnIGZpbGw9IiMzODczODIiIG1hc2s9InVybCgjY2hlY2tib3hfb24tYikiPiAgICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgeD0iMCIgeT0iMCIvPiAgICA8L2c+ICA8L2c+PC9zdmc+");
+        opacity: 1;
+      }
+
+      &.pi-minus::after {
+        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4gIDxkZWZzPiAgICA8cGF0aCBpZD0iY2hlY2tib3hfaW5kZXRlcm1pbmF0ZS1jb3B5LWEiIGQ9Ik0yLDIuODMzMzMzMzMgQzIsMi4zNzMwOTYwNCAyLjM3MzA5NjA0LDIgMi44MzMzMzMzMywyIEwyMS4xNjY2NjY3LDIgQzIxLjYyNjkwNCwyIDIyLDIuMzczMDk2MDQgMjIsMi44MzMzMzMzMyBMMjIsMjEuMTY2NjY2NyBDMjIsMjEuNjI2OTA0IDIxLjYyNjkwNCwyMiAyMS4xNjY2NjY3LDIyIEwyLjgzMzMzMzMzLDIyIEMyLjM3MzA5NjA0LDIyIDIsMjEuNjI2OTA0IDIsMjEuMTY2NjY2NyBMMiwyLjgzMzMzMzMzIFogTTE2LDEzIEMxNi41NTIyODQ3LDEzIDE3LDEyLjU1MjI4NDcgMTcsMTIgQzE3LDExLjQ0NzcxNTMgMTYuNTUyMjg0NywxMSAxNiwxMSBMOCwxMSBDNy40NDc3MTUyNSwxMSA3LDExLjQ0NzcxNTMgNywxMiBDNywxMi41NTIyODQ3IDcuNDQ3NzE1MjUsMTMgOCwxMyBMMTYsMTMgWiIvPiAgPC9kZWZzPiAgPHVzZSBmaWxsPSIjMzg3MzgyIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiB4bGluazpocmVmPSIjY2hlY2tib3hfaW5kZXRlcm1pbmF0ZS1jb3B5LWEiLz48L3N2Zz4=');
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.p-checkbox_icon_currentcolor {
+  .p-checkbox-box {
+    .p-checkbox-icon {
+
+      &::before,
+      &::after {
+        border: 2px solid currentColor;
+      }
+
+      &::after {
+        border: 0 none;
+        opacity: 0;
+      }
+    }
+  }
+}

package/src/scss/patchPrimeng/checkbox/_primeng.components.checkbox.theme-dark.scss

@@ -0,0 +1,46 @@
+@use "@inspark/components-web/src/inspark" as *;;
+.p-checkbox {
+  .p-checkbox-box {
+    //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
+
+    .p-checkbox-icon {
+
+      &::before,
+      &::after {
+        border: 2px solid currentColor;
+      }
+
+      &::after {
+        border: 0 none;
+        opacity: 0;
+      }
+
+      &.pi-check::after {
+        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KPCEtLUdlbmVyYXRvcjogU2tldGNoIDQ1LjIgKDQzNTE0KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC0tPgogIDx0aXRsZT4KICAgIEljb24vY2hlY2tib3hfb24KICA8L3RpdGxlPgogIDxkZXNjPgogICAgQ3JlYXRlZCB3aXRoIFNrZXRjaC4KICA8L2Rlc2M+CiAgPGRlZnM+CiAgICA8cGF0aCBpZD0iY2hlY2tib3hfb24tYSIgZD0iTTIsMy45OTA3OTUxNCBDMiwyLjg5MTMwOTM0IDIuODk4MjEyMzgsMiAzLjk5MDc5NTE0LDIgTDIwLjAwOTIwNDksMiBDMjEuMTA4NjkwNywyIDIyLDIuODk4MjEyMzggMjIsMy45OTA3OTUxNCBMMjIsMjAuMDA5MjA0OSBDMjIsMjEuMTA4NjkwNyAyMS4xMDE3ODc2LDIyIDIwLjAwOTIwNDksMjIgTDMuOTkwNzk1MTQsMjIgQzIuODkxMzA5MzQsMjIgMiwyMS4xMDE3ODc2IDIsMjAuMDA5MjA0OSBMMiwzLjk5MDc5NTE0IFogTTkuMzAyNzcxMjYsMTcuOTI0NzczMyBMMTguODA4LDcuNDY5MTk2MzYgTDE3LjE5MjkzMjIsNiBMOS4yMjg1MjUzLDE0Ljc2MTg5NTcgTDYuNTQzNDQyMzEsMTIuMDc2ODEyOCBMNSwxMy42MjExMjg1IEw5LjMwMjc3MTI2LDE3LjkyNDc3MzMgWiIvPgogIDwvZGVmcz4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj4KICAgIDxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMiIgeT0iMiIvPgogICAgPG1hc2sgaWQ9ImNoZWNrYm94X29uLWIiIGZpbGw9IiNmZmYiPgogICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjaGVja2JveF9vbi1hIi8+CiAgICA8L21hc2s+CiAgICA8Zy8+CiAgICA8ZyBmaWxsPSIjNzhGNEZGIiBtYXNrPSJ1cmwoI2NoZWNrYm94X29uLWIpIj4KICAgICAgPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4PSIwIiB5PSIwIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K');
+        opacity: 1;
+      }
+
+      &.pi-minus::after {
+        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0Ij4gIDxkZWZzPiAgICA8cGF0aCBpZD0iY2hlY2tib3hfaW5kZXRlcm1pbmF0ZS1jb3B5Mi1hIiBkPSJNMiwyLjgzMzMzMzMzIEMyLDIuMzczMDk2MDQgMi4zNzMwOTYwNCwyIDIuODMzMzMzMzMsMiBMMjEuMTY2NjY2NywyIEMyMS42MjY5MDQsMiAyMiwyLjM3MzA5NjA0IDIyLDIuODMzMzMzMzMgTDIyLDIxLjE2NjY2NjcgQzIyLDIxLjYyNjkwNCAyMS42MjY5MDQsMjIgMjEuMTY2NjY2NywyMiBMMi44MzMzMzMzMywyMiBDMi4zNzMwOTYwNCwyMiAyLDIxLjYyNjkwNCAyLDIxLjE2NjY2NjcgTDIsMi44MzMzMzMzMyBaIE0xNiwxMyBDMTYuNTUyMjg0NywxMyAxNywxMi41NTIyODQ3IDE3LDEyIEMxNywxMS40NDc3MTUzIDE2LjU1MjI4NDcsMTEgMTYsMTEgTDgsMTEgQzcuNDQ3NzE1MjUsMTEgNywxMS40NDc3MTUzIDcsMTIgQzcsMTIuNTUyMjg0NyA3LjQ0NzcxNTI1LDEzIDgsMTMgTDE2LDEzIFoiLz4gIDwvZGVmcz4gIDx1c2UgZmlsbD0iIzc4RjRGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgeGxpbms6aHJlZj0iI2NoZWNrYm94X2luZGV0ZXJtaW5hdGUtY29weTItYSIvPjwvc3ZnPg==');
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.p-checkbox_icon_currentcolor {
+  .p-checkbox-box {
+    .p-checkbox-icon {
+
+      &::before,
+      &::after {
+        border: 2px solid currentColor;
+      }
+
+      &::after {
+        border: 0 none;
+        opacity: 0;
+      }
+    }
+  }
+}