@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/src/scss/marketing/_pricing.scss

@@ -0,0 +1,111 @@
+$pricing-card-width: 22rem;
+
+.pricing {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  justify-content: center;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
+}
+
+.pricing-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: $white;
+  border: 1px solid $border-color;
+  padding: 2rem;
+  margin: 0 0 1rem;
+  position: relative;
+  box-shadow: $box-shadow-card;
+  text-align: center;
+  border-radius: $border-radius-lg;
+
+  @include media-breakpoint-up(md) {
+    margin: 1rem -1px;
+    max-width: $pricing-card-width;
+
+    &:first-child {
+      border-radius: $border-radius-lg 0 0 $border-radius-lg;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius-lg $border-radius-lg 0;
+    }
+  }
+
+  &.featured {
+    z-index: 1;
+    border: 2px solid $primary;
+    order: -1;
+
+    @include media-breakpoint-up(md) {
+      order: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+      box-shadow: $box-shadow-card;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+.pricing-title {
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
+}
+
+.pricing-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-50%);
+  vertical-align: bottom;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pricing-btn {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+
+.pricing-price {
+  display: flex;
+  justify-content: center;
+  font-size: 2.5rem;
+  line-height: 1;
+  font-weight: $font-weight-black;
+  margin: 0.75rem 0;
+}
+
+.pricing-price-currency {
+  font-size: $h2-font-size;
+  line-height: 1.5;
+  margin-right: 0.25rem;
+  font-weight: $font-weight-bold;
+}
+
+.pricing-price-description {
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
+  font-weight: $font-weight-normal;
+  color: $text-secondary;
+  align-self: center;
+  margin-left: 0.5rem;
+}
+
+.pricing-features {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+
+  > li:not(:first-child) {
+    margin-top: 0.25rem;
+  }
+}

package/src/scss/marketing/_sections.scss

@@ -0,0 +1,124 @@
+@keyframes move-forever1 {
+  0% {
+    transform: translate(85px, 0%);
+  }
+
+  100% {
+    transform: translate(-90px, 0%);
+  }
+}
+
+@keyframes move-forever2 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+@keyframes move-forever3 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+//
+// Sections
+//
+.section {
+  --section-bg: transparent;
+  background: var(--section-bg);
+  position: relative;
+  padding: 5rem 0;
+}
+
+.section-sm {
+  padding: 4rem 0;
+}
+
+.section-white {
+  --section-bg: var(--#{$prefix}bg-surface);
+}
+
+.section-light {
+  --section-bg: var(--#{$prefix}bg-surface-secondary);
+}
+
+.section-primary {
+  --section-bg: var(--#{$prefix}primary);
+  color: $white;
+}
+
+.section-dark {
+  --section-bg: var(--#{$prefix}dark);
+  color: $white;
+}
+
+.section-header {
+  text-align: center;
+  max-width: 45rem;
+  margin: 0 auto 5rem;
+
+  @at-root .section-sm & {
+    margin-bottom: 4rem;
+  }
+}
+
+.section-title {
+  font-size: var(--#{$prefix}font-size-h1);
+  font-weight: var(--#{$prefix}font-weight-bold);
+  line-height: 1.2;
+}
+
+.section-title-lg {
+  font-size: 2rem;
+}
+
+.section-description {
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h3);
+  line-height: var(--#{$prefix}line-height-h3);
+  margin-top: 1rem;
+}
+
+//
+// Section divider
+//
+.section-divider {
+  position: absolute;
+  bottom: 100%;
+  pointer-events: none;
+  height: 5rem;
+  width: 100%;
+
+  path {
+    fill: var(--section-bg);
+  }
+
+  .wave-1 {
+    animation: move-forever1 30s linear infinite;
+    animation-delay: -2s;
+  }
+
+  .wave-2 {
+    animation: move-forever2 24s linear infinite;
+    opacity: .5;
+    animation-delay: -2s;
+  }
+
+  .wave-3 {
+    animation: move-forever3 18s linear infinite;
+    opacity: .3;
+    animation-delay: -2s;
+  }
+}
+
+.section-divider-auto {
+  height: auto;
+}

package/src/scss/marketing/_shape.scss

@@ -0,0 +1,31 @@
+.shape {
+  --#{$prefix}shape-size: #{$avatar-size};
+  --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+  background-color: var(--#{$prefix}primary-lt);
+  color: var(--#{$prefix}primary);
+  border-radius: 35%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--#{$prefix}shape-size);
+  width: var(--#{$prefix}shape-size);
+
+  .icon {
+    width: var(--#{$prefix}shape-icon-size);
+    height: var(--#{$prefix}shape-icon-size);
+  }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+  .shape-#{$avatar-size} {
+    --#{$prefix}shape-size: #{map-get($size, size)};
+    --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+  }
+}
+
+@each $name, $color in $colors {
+  .shape-#{$name} {
+    background: var(--#{$prefix}#{$name}-lt);
+    color: var(--#{$prefix}#{$name});
+  }
+}

package/src/scss/mixins/_mixins.scss

@@ -1,11 +1,11 @@
 @mixin subheader($include-color: true, $include-line-height: true) {
-  font-size: $h6-font-size;
+  font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-bold);
   text-transform: uppercase;
   letter-spacing: .04em;
 
   @if $include-line-height {
-    line-height: $h6-line-height;
+    line-height: $h5-line-height;
   }
 
   @if ($include-color) {

package/src/scss/tabler-marketing.scss

@@ -0,0 +1,13 @@
+@import "config";
+@import "variables";
+@import "utilities-marketing";
+
+@import "marketing/core";
+@import "marketing/hero";
+@import "marketing/browser";
+@import "marketing/sections";
+@import "marketing/filters";
+@import "marketing/pricing";
+@import "marketing/shape";
+
+@import "bootstrap/scss/utilities/api";

package/src/scss/tabler-socials.scss

@@ -0,0 +1,2 @@
+@import "config";
+@import "ui/social";

package/src/scss/tabler-vendors.scss

@@ -11,3 +11,4 @@
 @import "vendor/tinymce";
 @import "vendor/stars-rating";
 @import "vendor/coloris";
+@import "vendor/typed";

package/src/scss/ui/_buttons.scss

@@ -2,7 +2,7 @@
 // Button
 //
 .btn {
-  --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size};
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: #{$btn-border-color};
@@ -23,6 +23,7 @@
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
     min-width: var(--#{$prefix}btn-icon-size);
+    font-size: var(--#{$prefix}btn-icon-size);
     margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
     vertical-align: bottom;
     color: inherit;
@@ -83,9 +84,9 @@
     --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
@@ -129,13 +130,13 @@
 // Button sizes
 //
 .btn-sm, .btn-group-sm > .btn {
-  --#{$prefix}btn-line-height: 1.5;
-  --#{$prefix}btn-icon-size: .75rem;
+  --#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
 }
 
 .btn-lg, .btn-group-lg > .btn {
-  --#{$prefix}btn-line-height: 1.5;
-  --#{$prefix}btn-icon-size: 2rem;
+  --#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
 }
 
 //

package/src/scss/ui/_forms.scss

@@ -130,6 +130,10 @@ Form control
   border-radius: var(--#{$prefix}border-radius);
 }
 
+fieldset:empty {
+  display: none;
+}
+
 /**
 Form help
  */

package/src/scss/ui/_images.scss

@@ -13,3 +13,7 @@
     --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }
+
+.img-bg {
+  background: no-repeat center/cover;
+}

package/src/scss/ui/_lists.scss

@@ -95,26 +95,22 @@
   }
 }
 
-
-.list-separated-item {
-  padding: 1rem 0;
-
-  &:first-child {
-    padding-top: 0;
-  }
-
-  &:last-child {
-    padding-bottom: 0;
-  }
-
-  & + & {
-    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  }
+/**
+Seprated list
+*/
+.list-separated {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer;
 }
 
 /**
 Inline list
  */
+.list-inline {
+  margin: 0;
+}
+
 .list-inline-item:not(:last-child) {
   margin-right: auto;
   margin-inline-end: $list-inline-padding;

package/src/scss/ui/_social.scss

@@ -0,0 +1,52 @@
+$apps: (
+  "apple",
+  "discord",
+  "dribbble",
+  "facebook",
+  "figma",
+  "github",
+  "google",
+  "instagram",
+  "linkedin",
+  "medium",
+  "meta",
+  "metamask",
+  "pinterest",
+  "reddit",
+  "signal",
+  "skype",
+  "snapchat",
+  "spotify",
+  "telegram",
+  "tiktok",
+  "tumblr",
+  "twitch",
+  "vk",
+  "x",
+  "youtube"
+);
+
+.social {
+  position: relative;
+  display: inline-block;
+  height: $avatar-size;
+  aspect-ratio: 1;
+  background: no-repeat center/cover;
+  vertical-align: bottom;
+}
+
+@each $app in $apps {
+  .social-app-#{$app} {
+    background-image: url("#{$assets-base}/img/social/#{$app}.svg");
+
+    &.social-gray {
+      background-image: url("#{$assets-base}/img/social/#{$app}-gray.svg");
+    }
+  }
+}
+
+@each $flag-size, $size in $flag-sizes {
+  .social-#{$flag-size} {
+    height: map-get($size, size);
+  }
+}

package/src/scss/ui/_tables.scss

@@ -1,7 +1,6 @@
 .table {
   thead {
     th {
-      color: $table-th-color;
       background: $table-th-bg;
       @include subheader;
       padding-top: $table-th-padding-y;

package/src/scss/ui/_type.scss

@@ -163,6 +163,10 @@ Links
   }
 }
 
+a:hover:has(.icon) {
+  text-decoration: none;
+}
+
 /**
 Subheader
  */

package/src/scss/utils/_colors.scss

@@ -13,7 +13,7 @@
   }
 
   .border-#{"" + $color} {
-    border-color: $value !important;
+    border-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}border-opacity)) !important;
   }
 }
 

package/src/scss/vendor/_dropzone.scss

@@ -1,7 +1,7 @@
 .dropzone {
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  color: var(--#{$prefix}secondary);
-  padding: 1rem;
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
+  color: var(--#{$prefix}secondary) !important;
+  padding: 1rem !important;
 
   &.dz-drag-hover {
     border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);

package/src/scss/vendor/_tom-select.scss

@@ -42,6 +42,7 @@ $input-border-width: 1px;
   background: var(--#{$prefix}bg-surface);
   color: var(--#{$prefix}body-color);
   box-shadow: var(--#{$prefix}box-shadow-dropdown);
+  z-index: $zindex-dropdown;
 
   .option {
     padding: $dropdown-item-padding-y $dropdown-item-padding-x;

package/src/scss/vendor/_typed.scss

@@ -0,0 +1,4 @@
+.typed-cursor {
+  font-weight: 500;
+  color: $secondary;
+}

package/dist/css/tabler-social.css

@@ -1,10 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/
-/* prettier-ignore */
-/* prettier-ignore */

package/dist/css/tabler-social.min.css

@@ -1,8 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/

package/dist/css/tabler-social.rtl.css

@@ -1,10 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/
-/* prettier-ignore */
-/* prettier-ignore */

package/dist/css/tabler-social.rtl.min.css

@@ -1,8 +0,0 @@
-/*!
-* Tabler v1.0.0-beta22 (https://tabler.io)
-* @version 1.0.0-beta22
-* @link https://tabler.io
-* Copyright 2018-2025 The Tabler Authors
-* Copyright 2018-2025 codecalm.net Paweł Kuna
-* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-*/

package/docs/icons/figma.mdx

@@ -1,7 +0,0 @@
----
-title: Figma plugin
----
-
-![Tabler Figma Plugin](/docs/icons/figma-plugin.png)
-
-[Download Plugin](https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons)

package/docs/icons/png.mdx

@@ -1,19 +0,0 @@
----
-title: PNG version
----
-
-![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-png.png)
-
-## Installation
-
-<TabsPackage name="@tabler/icons-png" />
-
-or just [download from Github](https://github.com/tabler/tabler-icons/releases).
-
-All PNG files are stored in `icons` subdirectory.
-
-## CDN
-
-```html
-<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/home.png" />
-```