Move social brand colors from tabler.css to tabler-socials.css (#3308)

.changeset/brand-colors-in-socials.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": major
+"@tabler/docs": patch
+---
+
+Removed social brand colors from `tabler.css`; `.btn-facebook`, `.bg-x` and other brand classes now ship in `tabler-socials.css`.

core/package.json

@@ -183,19 +183,19 @@
       },
       {
         "path": "./dist/css/tabler-socials.css",
-        "maxSize": "1.3 kB"
+        "maxSize": "3.6 kB"
       },
       {
         "path": "./dist/css/tabler-socials.min.css",
-        "maxSize": "0.9 kB"
+        "maxSize": "3.4 kB"
       },
       {
         "path": "./dist/css/tabler-socials.rtl.css",
-        "maxSize": "1.3 kB"
+        "maxSize": "3.6 kB"
       },
       {
         "path": "./dist/css/tabler-socials.rtl.min.css",
-        "maxSize": "0.9 kB"
+        "maxSize": "3.4 kB"
       },
       {
         "path": "./dist/css/tabler-themes.css",

core/scss/_deprecated-props.scss

@@ -4,7 +4,6 @@
 //
 // Removed in 2.0, together with this file.
 @use 'sass:color';
-@use 'sass:map';
 @use 'sass:math';
 @use 'config' as *;
 
@@ -17,10 +16,10 @@
 // deprecated(2.0): `--tblr-*-rgb`. Tabler mixes colours with `color-mix()` and
 // reads none of these. They are static, as they were in 1.5: overriding
 // `--tblr-primary` does not change `--tblr-primary-rgb`.
-@mixin deprecated-color-props() {
+@mixin deprecated-color-props($colors: $theme-colors) {
   @if $enable-deprecated {
     :root {
-      @each $name, $color in map.merge($theme-colors, $social-colors) {
+      @each $name, $color in $colors {
         --#{$name}-rgb: #{deprecated-rgb-triplet($color)};
         --#{$name}-lt-rgb: #{deprecated-rgb-triplet(color.mix($color, #fff, 10%, $method: rgb))};
       }

core/scss/_deprecated.scss

@@ -7,7 +7,6 @@
 // with `@extend`, which only reaches modules upstream of this one.
 //
 // Removed in 2.0, together with this file and `_deprecated-props.scss`.
-@use 'sass:map';
 @use 'config' as *;
 @use 'core';
 @use 'deprecated-props' as *;
@@ -97,7 +96,7 @@
     --status-color-rgb: #{deprecated-rgb-triplet($text-secondary)};
   }
 
-  @each $name, $color in map.merge($theme-colors, $social-colors) {
+  @each $name, $color in $theme-colors {
     .status-#{$name} {
       --status-color-rgb: var(--#{$name}-rgb);
     }

core/scss/_props.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'config' as *;
 
 :root,
@@ -42,13 +41,8 @@
   --brand: #{$primary};
 
   // Theme colors
-  @each $name, $color in map.merge($theme-colors, $social-colors) {
-    --#{$name}: #{$color};
-    --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
-    --#{$name}-darken: #{adjust-lightness-css(var(--#{$name}), -6%)};
-    --#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
-    --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
-  }
+  // Brand colors (`$social-colors`) are set in `tabler-socials.css`
+  @include color-props($theme-colors);
 
   // Gray colors
   @each $name, $color in $gray-colors {

core/scss/mixins/_mixins.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:map';
 @use 'sass:meta';
 @use '../settings' as *;
 @use '../variables' as *;
@@ -146,3 +147,97 @@
   $default: add($input-btn-line-height, add(calc($input-btn-padding-y * 2), calc(#{$input-btn-border-width} * 2), false));
   @return if(sass($input-height == $default): var(--btn-input-min-height); else: $input-height);
 }
+
+// The palette custom properties of each color in `$colors` (a name → color
+// map): the color, its foreground, a darker shade and two tints.
+@mixin color-props($colors) {
+  @each $name, $color in $colors {
+    --#{$name}: #{$color};
+    --#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
+    --#{$name}-darken: #{adjust-lightness-css(var(--#{$name}), -6%)};
+    --#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
+    --#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
+  }
+}
+
+// `.btn-{c}`, `.btn-outline-{c}` and `.btn-ghost-{c}` for each color name in
+// `$colors`. Each color class only points the --btn-variant* tokens at its
+// palette colors; the shared rules below turn them into the button tokens. The
+// rules are grouped by variant (solid, outline, ghost) rather than by color, so
+// each token list is written once instead of once per color.
+@function btn-color-selectors($colors, $patterns...) {
+  $selectors: ();
+  @each $pattern in $patterns {
+    @each $color in $colors {
+      $selectors: list.append($selectors, str-replace($pattern, '{c}', '#{$color}'), $separator: comma);
+    }
+  }
+  @return $selectors;
+}
+
+@mixin button-color-variants($colors) {
+  @each $color in $colors {
+    .btn-#{$color},
+    .btn-outline-#{$color},
+    .btn-ghost-#{$color} {
+      --btn-variant: var(--#{$color});
+      --btn-variant-fg: var(--#{$color}-fg);
+      --btn-variant-darken: var(--#{$color}-darken);
+    }
+  }
+
+  #{btn-color-selectors($colors, '.btn-{c}')} {
+    --btn-border-color: transparent;
+    --btn-hover-border-color: transparent;
+    --btn-active-border-color: transparent;
+    --btn-color: var(--btn-variant-fg, #{$white});
+    --btn-bg: var(--btn-variant);
+    --btn-hover-color: var(--btn-variant-fg);
+    --btn-hover-bg: var(--btn-variant-darken);
+    --btn-active-color: var(--btn-variant-fg);
+    --btn-active-bg: var(--btn-variant-darken);
+    --btn-disabled-bg: var(--btn-variant);
+    --btn-disabled-color: var(--btn-variant-fg);
+    --btn-box-shadow: var(--shadow-input);
+  }
+
+  @if list.index($colors, 'dark') {
+    .btn-dark {
+      --btn-border-color: var(--dark-mode-border-color);
+      --btn-hover-border-color: var(--dark-mode-border-active-color);
+      --btn-active-border-color: var(--dark-mode-border-active-color);
+    }
+  }
+
+  #{btn-color-selectors($colors, '.btn-outline-{c}', '.btn-outline.btn-{c}')} {
+    --btn-color: var(--btn-variant);
+    --btn-bg: transparent;
+    --btn-border-color: var(--btn-variant);
+    --btn-hover-color: var(--btn-variant-fg);
+    --btn-hover-border-color: transparent;
+    --btn-hover-bg: var(--btn-variant);
+    --btn-active-color: var(--btn-variant-fg);
+    --btn-active-bg: var(--btn-variant);
+    --btn-active-border-color: var(--btn-variant);
+    --btn-disabled-color: var(--btn-variant);
+    --btn-disabled-border-color: var(--btn-variant);
+  }
+
+  #{btn-color-selectors($colors, '.btn-ghost-{c}', '.btn-ghost.btn-{c}')} {
+    --btn-color: var(--btn-variant);
+    --btn-bg: transparent;
+    --btn-border-color: transparent;
+    --btn-hover-color: var(--btn-variant-fg);
+    --btn-hover-bg: var(--btn-variant);
+    --btn-hover-border-color: var(--btn-variant);
+    --btn-active-color: var(--btn-variant-fg);
+    --btn-active-bg: var(--btn-variant);
+    --btn-active-border-color: transparent;
+    --btn-active-shadow: #{$btn-active-box-shadow};
+    --btn-disabled-color: var(--btn-variant);
+    --btn-disabled-bg: transparent;
+    --btn-disabled-border-color: transparent;
+    --gradient: none;
+    --btn-box-shadow: none;
+  }
+}

core/scss/tabler-socials.scss

@@ -1 +1,2 @@
+@forward 'ui/social-colors';
 @forward 'ui/social';

core/scss/ui/_buttons.scss

@@ -1,4 +1,3 @@
-@use 'sass:list';
 @use 'sass:map';
 
 //
@@ -108,86 +107,8 @@ $btn-tokens: defaults(
   --btn-hover-color: var(--body-color);
 }
 
-// Each color class only points the --btn-variant* tokens at its palette
-// colors; the shared rules below turn them into the button tokens. The rules
-// are grouped by variant (solid, outline, ghost) rather than by color, so each
-// token list is written once instead of once per color.
-$btn-colors: map.keys(map.merge($theme-colors, $social-colors));
-
-@function btn-color-selectors($patterns...) {
-  $selectors: ();
-  @each $pattern in $patterns {
-    @each $color in $btn-colors {
-      $selectors: list.append($selectors, str-replace($pattern, '{c}', '#{$color}'), $separator: comma);
-    }
-  }
-  @return $selectors;
-}
-
-@each $color in $btn-colors {
-  .btn-#{$color},
-  .btn-outline-#{$color},
-  .btn-ghost-#{$color} {
-    --btn-variant: var(--#{$color});
-    --btn-variant-fg: var(--#{$color}-fg);
-    --btn-variant-darken: var(--#{$color}-darken);
-  }
-}
-
-#{btn-color-selectors('.btn-{c}')} {
-  --btn-border-color: transparent;
-  --btn-hover-border-color: transparent;
-  --btn-active-border-color: transparent;
-  --btn-color: var(--btn-variant-fg, #{$white});
-  --btn-bg: var(--btn-variant);
-  --btn-hover-color: var(--btn-variant-fg);
-  --btn-hover-bg: var(--btn-variant-darken);
-  --btn-active-color: var(--btn-variant-fg);
-  --btn-active-bg: var(--btn-variant-darken);
-  --btn-disabled-bg: var(--btn-variant);
-  --btn-disabled-color: var(--btn-variant-fg);
-  --btn-box-shadow: var(--shadow-input);
-}
-
-@if map.has-key($theme-colors, 'dark') {
-  .btn-dark {
-    --btn-border-color: var(--dark-mode-border-color);
-    --btn-hover-border-color: var(--dark-mode-border-active-color);
-    --btn-active-border-color: var(--dark-mode-border-active-color);
-  }
-}
-
-#{btn-color-selectors('.btn-outline-{c}', '.btn-outline.btn-{c}')} {
-  --btn-color: var(--btn-variant);
-  --btn-bg: transparent;
-  --btn-border-color: var(--btn-variant);
-  --btn-hover-color: var(--btn-variant-fg);
-  --btn-hover-border-color: transparent;
-  --btn-hover-bg: var(--btn-variant);
-  --btn-active-color: var(--btn-variant-fg);
-  --btn-active-bg: var(--btn-variant);
-  --btn-active-border-color: var(--btn-variant);
-  --btn-disabled-color: var(--btn-variant);
-  --btn-disabled-border-color: var(--btn-variant);
-}
-
-#{btn-color-selectors('.btn-ghost-{c}', '.btn-ghost.btn-{c}')} {
-  --btn-color: var(--btn-variant);
-  --btn-bg: transparent;
-  --btn-border-color: transparent;
-  --btn-hover-color: var(--btn-variant-fg);
-  --btn-hover-bg: var(--btn-variant);
-  --btn-hover-border-color: var(--btn-variant);
-  --btn-active-color: var(--btn-variant-fg);
-  --btn-active-bg: var(--btn-variant);
-  --btn-active-border-color: transparent;
-  --btn-active-shadow: #{$btn-active-box-shadow};
-  --btn-disabled-color: var(--btn-variant);
-  --btn-disabled-bg: transparent;
-  --btn-disabled-border-color: transparent;
-  --gradient: none;
-  --btn-box-shadow: none;
-}
+// Brand colors (`$social-colors`) get the same classes in `tabler-socials.css`.
+@include button-color-variants(map.keys($theme-colors));
 
 //
 // Button sizes

core/scss/ui/_legend.scss

@@ -1,5 +1,4 @@
 // Legend
-@use 'sass:map';
 
 @use '../config' as *;
 
@@ -107,7 +106,7 @@ button.legend {
   }
 }
 
-@each $name, $color in map.merge($theme-colors, $social-colors) {
+@each $name, $color in $theme-colors {
   .legend-#{$name} {
     --legend-color: var(--#{$name});
   }

core/scss/ui/_social-colors.scss

@@ -0,0 +1,39 @@
+// Brand colors (`$social-colors`): the palette custom properties and the
+// color classes of each brand, so `.btn-facebook`, `.bg-x` or
+// `.status-github` work like their theme-color counterparts. They ship in
+// `tabler-socials.css`, not in `tabler.css`.
+@use 'sass:map';
+@use '../config' as *;
+@use '../deprecated-props' as *;
+
+:root,
+:host {
+  @include color-props($social-colors);
+}
+
+@include deprecated-color-props($social-colors);
+
+@include button-color-variants(map.keys($social-colors));
+
+@each $color, $value in $social-colors {
+  .bg-#{'' + $color} {
+    --bg-opacity: 1;
+    background-color: color-transparent(var(--#{$color}), calc(var(--bg-opacity) * 100%)) !important;
+  }
+
+  .text-#{'' + $color}-fg {
+    color: var(--#{$color}-fg) !important;
+  }
+
+  .legend-#{$color} {
+    --legend-color: var(--#{$color});
+  }
+
+  .status-#{$color} {
+    --status-color: var(--#{$color});
+
+    @if $enable-deprecated {
+      --status-color-rgb: var(--#{$color}-rgb);
+    }
+  }
+}

core/scss/ui/_status.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @use '../config' as *;
 
 @keyframes status-pulsate-main {
@@ -93,7 +91,7 @@ $status-tokens: defaults(
   border: var(--border-width) var(--border-style) var(--border-color) !important;
 }
 
-@each $name, $color in map.merge($theme-colors, $social-colors) {
+@each $name, $color in $theme-colors {
   .status-#{$name} {
     --status-color: var(--#{$name});
   }

core/scss/utils/_colors.scss

@@ -87,17 +87,6 @@
   }
 }
 
-@each $color, $value in $social-colors {
-  .bg-#{'' + $color} {
-    --bg-opacity: 1;
-    background-color: color-transparent(var(--#{$color}), calc(var(--bg-opacity) * 100%)) !important;
-  }
-
-  .text-#{'' + $color}-fg {
-    color: var(--#{$color}-fg) !important;
-  }
-}
-
 .bg-inverted {
   --bg-opacity: 1;
   background-color: color-transparent(var(--bg-surface-inverted), calc(var(--bg-opacity) * 100%)) !important;

docs/content/ui/base/colors.mdx

@@ -2,6 +2,7 @@
 title: Colors
 summary: The Tabler color palette with base colors, light variants, the gray scale and social brand colors, each with background and text utilities.
 description: The Tabler color palette, with base and light shades, the gray scale and social brand colors.
+css-plugins: [socials]
 ---
 
 import Colors from '@components/Colors.astro'
@@ -38,7 +39,7 @@ Every shade of the gray palette has a background and a text utility, from `50` t
 
 ## Social colors
 
-The brand colors of popular services are available too, for social buttons and icons.
+The brand colors of popular services are available too, for social buttons and icons. They ship in the socials plugin, so include `tabler-socials.css` or `tabler-socials.min.css` to get the `--tblr-{brand}` custom properties and the `btn-`, `bg-`, `text-{brand}-fg`, `legend-` and `status-` classes for each brand.
 
 <Colors colors={site.socialColors} />
 

docs/content/ui/components/button.mdx

@@ -3,6 +3,7 @@ title: Button
 summary: Buttons in every color, size and shape, with icons, loading states, social styles and button groups.
 description: Buttons in many colors, sizes and shapes, with icons, loading states and social styles.
 related: [/ui/components/dropdown]
+css-plugins: [socials]
 source: core/scss/ui/_buttons.scss
 css-vars: btn
 classnames:
@@ -45,7 +46,7 @@ classnames:
       desc: Animates the icon on hover, with -pulse, -rotate, -shake, -tada or -move-start
   color:
     - class: btn-{color}
-      desc: Any base or social color, for example btn-primary or btn-facebook
+      desc: Any base color, for example btn-primary; social colors such as btn-facebook need the socials plugin
   size:
     - class: btn-sm
       desc: Small size
@@ -217,7 +218,7 @@ See all icons at [tabler.io/icons](https://tabler.io/icons).
 
 ## Social buttons
 
-Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once.
+Social buttons use the brand colors and icons of popular services, so a share or follow button is recognized at once. The brand colors are part of the socials plugin: include `tabler-socials.css` or `tabler-socials.min.css` to use them. Each brand also works with `btn-outline-` and `btn-ghost-`.
 
 <Example separated centered hideCode>
 <div class="btn-list">

docs/content/ui/plugins/social-icons.mdx

@@ -25,7 +25,7 @@ import CdnImportPlugin from '@components/CdnImportPlugin.astro'
 
 ## Installation
 
-Social icons are a plugin. Include `tabler-socials.css` or `tabler-socials.min.css` in your page to enable them.
+Social icons are a plugin. Include `tabler-socials.css` or `tabler-socials.min.css` in your page to enable them. The same file holds the [social brand colors](/ui/base/colors#social-colors), used by social buttons such as `btn-facebook`.
 
 You can also include the plugin via CDN: