Change primary color to new Tabler brand (#1599)

.changeset/olive-cars-admire.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Change primary color value to new Tabler branding

_config.yml

@@ -74,7 +74,7 @@ defaults:
 colors:
   blue:
     class: blue
-    hex: '#206bc4'
+    hex: '#0054a6'
     title: Blue
   azure:
     class: azure

docs/config.json

@@ -23,7 +23,7 @@
       {
         "name": "blue",
         "variable": "var(--tblr-blue)",
-        "value": "#206bc4"
+        "value": "#0054a6"
       },
       {
         "name": "azure",
@@ -232,7 +232,7 @@
       },
       {
         "name": "tabler",
-        "value": "#206bc4"
+        "value": "#0054a6"
       }
     ]
   },

docs/forms/form-color-check.mdx

@@ -173,7 +173,7 @@ Add an color picker to your form to let users customise it according to their pr
 ```html example code centered
 <div class="mb-3">
   <label class="form-label">Color picker</label>
-  <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#0054a6" title="Choose your color">
 </div>
 ```
 

src/pages/_data/colors.yml

@@ -1,146 +1,3 @@
-#blue: '#206bc4'
-#blue-100: '#d2e1f3'
-#blue-200: '#a6c4e7'
-#blue-300: '#79a6dc'
-#blue-400: '#4d89d0'
-#blue-500: '#206bc4'
-#blue-600: '#1a569d'
-#blue-700: '#134076'
-#blue-800: '#0d2b4e'
-#blue-900: '#061527'
-#
-#azure: '#45aaf2'
-#azure-100: '#daeefc'
-#azure-200: '#b5ddfa'
-#azure-300: '#8fccf7'
-#azure-400: '#6abbf5'
-#azure-500: '#45aaf2'
-#azure-600: '#3788c2'
-#azure-700: '#296691'
-#azure-800: '#1c4461'
-#azure-900: '#0e2230'
-#
-#indigo: '#6574cd'
-#indigo-100: '#e0e3f5'
-#indigo-200: '#c1c7eb'
-#indigo-300: '#a3ace1'
-#indigo-400: '#8490d7'
-#indigo-500: '#6574cd'
-#indigo-600: '#515da4'
-#indigo-700: '#3d467b'
-#indigo-800: '#282e52'
-#indigo-900: '#141729'
-#
-#purple: '#a55eea'
-#purple-100: '#eddffb'
-#purple-200: '#dbbff7'
-#purple-300: '#c99ef2'
-#purple-400: '#b77eee'
-#purple-500: '#a55eea'
-#purple-600: '#844bbb'
-#purple-700: '#63388c'
-#purple-800: '#42265e'
-#purple-900: '#21132f'
-#
-#pink: '#f66d9b'
-#pink-100: '#fde2eb'
-#pink-200: '#fbc5d7'
-#pink-300: '#faa7c3'
-#pink-400: '#f88aaf'
-#pink-500: '#f66d9b'
-#pink-600: '#c5577c'
-#pink-700: '#94415d'
-#pink-800: '#622c3e'
-#pink-900: '#31161f'
-#
-#red: '#cd201f'
-#red-100: '#f5d2d2'
-#red-200: '#eba6a5'
-#red-300: '#e17979'
-#red-400: '#d74d4c'
-#red-500: '#cd201f'
-#red-600: '#a41a19'
-#red-700: '#7b1313'
-#red-800: '#520d0c'
-#red-900: '#290606'
-#
-#orange: '#ff922b'
-#orange-100: '#ffe9d5'
-#orange-200: '#ffd3aa'
-#orange-300: '#ffbe80'
-#orange-400: '#ffa855'
-#orange-500: '#ff922b'
-#orange-600: '#cc7522'
-#orange-700: '#99581a'
-#orange-800: '#663a11'
-#orange-900: '#331d09'
-#
-#yellow: '#fab005'
-#yellow-100: '#feefcd'
-#yellow-200: '#fddf9b'
-#yellow-300: '#fcd069'
-#yellow-400: '#fbc037'
-#yellow-500: '#fab005'
-#yellow-600: '#c88d04'
-#yellow-700: '#966a03'
-#yellow-800: '#644602'
-#yellow-900: '#322301'
-#
-#lime: '#94d82d'
-#lime-100: '#eaf7d5'
-#lime-200: '#d4efab'
-#lime-300: '#bfe881'
-#lime-400: '#a9e057'
-#lime-500: '#94d82d'
-#lime-600: '#76ad24'
-#lime-700: '#59821b'
-#lime-800: '#3b5612'
-#lime-900: '#1e2b09'
-#
-#green: '#5eba00'
-#green-100: '#dff1cc'
-#green-200: '#bfe399'
-#green-300: '#9ed666'
-#green-400: '#7ec833'
-#green-500: '#5eba00'
-#green-600: '#4b9500'
-#green-700: '#387000'
-#green-800: '#264a00'
-#green-900: '#132500'
-#
-#teal: '#2bcbba'
-#teal-100: '#d5f5f1'
-#teal-200: '#aaeae3'
-#teal-300: '#80e0d6'
-#teal-400: '#55d5c8'
-#teal-500: '#2bcbba'
-#teal-600: '#22a295'
-#teal-700: '#1a7a70'
-#teal-800: '#11514a'
-#teal-900: '#092925'
-#
-#cyan: '#17a2b8'
-#cyan-100: '#d1ecf1'
-#cyan-200: '#a2dae3'
-#cyan-300: '#74c7d4'
-#cyan-400: '#45b5c6'
-#cyan-500: '#17a2b8'
-#cyan-600: '#128293'
-#cyan-700: '#0e616e'
-#cyan-800: '#09414a'
-#cyan-900: '#052025'
-#
-#gray: '#cbcfd6'
-#gray-100: '#f5f7fb'
-#gray-200: '#f1f3f8'
-#gray-300: '#e9ecf1'
-#gray-400: '#dee1e7'
-#gray-500: '#cbcfd6'
-#gray-600: '#a8aeb7'
-#gray-700: '#7a828f'
-#gray-800: '#545d6d'
-#gray-900: '#354052'
-
 border-color: 'rgba(110, 117, 130, 0.2)'
 text-secondary: '#6e7582'
 
@@ -157,4 +14,4 @@ vk: '#6383a8'
 rss: '#ffa500'
 flickr: '#0063dc'
 bitbucket: '#0052cc'
-tabler: '#206bc4'
+tabler: '#0054a6'

src/pages/_includes/ui/colorpicker.html

@@ -19,7 +19,7 @@
 			{% if format %}format: "{{ format }}",{% endif %}
 			{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
 			swatches: [
-				"#206bc4",
+				"#0054a6",
 				"#45aaf2",
 				"#6574cd",
 				"#a55eea",

src/pages/colorpicker.html

@@ -5,7 +5,7 @@
 libs: coloris.js
 ---
 
-{% assign colors = "#206bc4,#45aaf2,#6574cd,#a55eea,#f66d9b,#fa4654,#fd9644,#f1c40f,#7bd235,#5eba00,#2bcbba,#17a2b8" | split: "," %}
+{% assign colors = "#0054a6,#45aaf2,#6574cd,#a55eea,#f66d9b,#fa4654,#fd9644,#f1c40f,#7bd235,#5eba00,#2bcbba,#17a2b8" | split: "," %}
 
 <div class="card">
 	<div class="card-body">

src/scss/_variables.scss

@@ -165,7 +165,7 @@ $body-emphasis-color: $dark !default;
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
 
-$blue: #206bc4 !default;
+$blue: #0054a6 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
 $purple: #ae3ec9 !default;
@@ -178,7 +178,7 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #206bc4;
+$color-blue: #0054a6;
 $color-azure: #3586c9;
 $color-indigo: #4263eb;
 $color-purple: #ae3ec9;
@@ -271,7 +271,7 @@ $social-colors: (
   "rss": #ffa500,
   "flickr": #0063dc,
   "bitbucket": #0052cc,
-  "tabler": #206bc4,
+  "tabler": #0054a6,
 ) !default;
 
 $gray-colors: (