mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
110 lines
2.8 KiB
Plaintext
110 lines
2.8 KiB
Plaintext
@hue-slate: 208;
|
|
@hue-cream: 50;
|
|
|
|
@hue-brand-primary: 171;
|
|
@color-brand-primary: #00ceae;
|
|
|
|
@color-brand-gradient-start: #00b8c6;
|
|
@color-brand-gradient-stop: #00c6a2;
|
|
|
|
@hue-blue: 193;
|
|
@color-blue: hsl(@hue-blue, 77%, 58%);
|
|
|
|
@hue-green: 167;
|
|
@color-green: hsl(@hue-green, 53%, 55%);
|
|
|
|
@hue-red: 2;
|
|
@color-danger: hsl(@hue-red, 75%, 55%);
|
|
|
|
@hue-gray: 208;
|
|
// @hue-gray: 50;
|
|
@color-gray-10: #fff;
|
|
@color-gray-9: hsl(@hue-gray, 20%, 98%);
|
|
@color-gray-8: hsl(@hue-gray, 25%, 96%);
|
|
@color-gray-7: hsl(@hue-gray, 25%, 90%);
|
|
@color-gray-6: hsl(@hue-gray, 25%, 82%);
|
|
@color-gray-5: hsl(@hue-gray, 25%, 62%);
|
|
@color-gray-4: hsl(@hue-gray, 25%, 52%);
|
|
@color-gray-3: hsl(@hue-gray, 25%, 35%);
|
|
@color-gray-2: hsl(@hue-gray, 25%, 25%);
|
|
@color-gray-1: hsl(@hue-gray, 25%, 16%);
|
|
|
|
@color-white: @color-gray-10;
|
|
@color-black: @color-gray-1;
|
|
|
|
@color-blue-highlight: hsl(215, 99%, 63%);
|
|
|
|
// Backgrounds
|
|
@bg-light-hue: @hue-slate;
|
|
@bg-light: hsl(@bg-light-hue, 0%, 100%);
|
|
@bg-light-soft: hsl(@bg-light-hue, 20%, 98%);
|
|
@bg-light-softer: hsl(@bg-light-hue, 20%, 96%);
|
|
|
|
@bg-dark-hue: @hue-slate;
|
|
@bg-dark: hsl(@bg-dark-hue, 14%, 33%);
|
|
@bg-dark-soft: hsl(@bg-dark-hue, 14%, 42%);
|
|
@bg-dark-softer: hsl(@bg-dark-hue, 14%, 52%);
|
|
|
|
@bg-primary: @color-brand-primary;
|
|
|
|
@bg-highlight: hsl(215, 99%, 63%);
|
|
|
|
|
|
// Borders
|
|
@border-dark-hue: @hue-slate;
|
|
@border-dark: hsl(@border-dark-hue, 25%, 82%);
|
|
@border-dark-soft: hsl(@border-dark-hue, 25%, 90%);
|
|
@border-dark-softer: hsl(@border-dark-hue, 25%, 96%);
|
|
|
|
@border-light: @color-white;
|
|
@border-light-soft: fade(@color-white, 60%);
|
|
@border-light-softer: fade(@color-white, 35%);
|
|
|
|
@border-danger: @color-danger;
|
|
@border-danger-soft: fade(@color-danger, 50%);
|
|
|
|
@border-brand: @color-brand-primary;
|
|
|
|
@border-default: @border-dark-soft;
|
|
|
|
|
|
// Text
|
|
@text-light: @color-white;
|
|
@text-light-soft: fade(@color-white, 60%);
|
|
@text-light-softer: fade(@color-white, 45%);
|
|
@text-light-softest: fade(@color-white, 35%);
|
|
|
|
@text-dark-hue: @hue-slate;
|
|
@text-dark: hsl(@text-dark-hue, 10%, 25%);
|
|
@text-dark-soft: hsl(@text-dark-hue, 10%, 50%);
|
|
@text-dark-softer: hsl(@text-dark-hue, 10%, 65%);
|
|
@text-dark-softest: hsl(@text-dark-hue, 10%, 75%);
|
|
|
|
@text-brand: hsl(@hue-brand-primary, 100%, 40%);
|
|
@text-danger: @color-danger;
|
|
|
|
|
|
// Buttons
|
|
@btn-primary-text-color: @color-white;
|
|
@btn-primary-bg-color: @color-brand-primary;
|
|
|
|
@btn-secondary-text-color: @text-dark-soft;
|
|
@btn-secondary-bg-color: @color-white;
|
|
@btn-secondary-border-color: @border-dark;
|
|
|
|
@btn-blue-text-color: @color-white;
|
|
@btn-blue-bg-color: @color-blue;
|
|
|
|
@btn-themed-text-color: @color-white;
|
|
|
|
@btn-inv-outline-text-color: @color-white;
|
|
|
|
@btn-disabled-bg: @color-gray-8;
|
|
@btn-disabled-border: @color-gray-4;
|
|
@btn-disabled-text: @btn-disabled-border;
|
|
|
|
|
|
// Forms
|
|
@form-input-placeholder-color: @text-dark-softest;
|
|
@form-input-border-error-color: lighten(@color-danger, 25%);
|