JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class=".green-lighten-5">1</div>

SASS

div {
  height: 50px;
  width: 50px;
  display: inline-block;
}
.green-lighten-5 {
  background-color: $green-lighten-5;
}

/ צבע בסיס
$base-green: #5ABA47;

// ============================================
// מערכת צבעים מבוססת SASS
// ============================================

// Lighten variations (מבהיר)
$green-lighten-5: lighten(red, 5%);   // #6DC458
$green-lighten-10: lighten($base-green, 10%); // #80CE69
$green-lighten-15: lighten($base-green, 15%); // #93D87A
$green-lighten-20: lighten($base-green, 20%); // #A6E28B
$green-lighten-25: lighten($base-green, 25%); // #B9EC9C
$green-lighten-30: lighten($base-green, 30%); // #CCF6AD
$green-lighten-35: lighten($base-green, 35%); // #DFFFBE
$green-lighten-40: lighten($base-green, 40%); // #F2FFCF

// Darken variations (מכהה)
$green-darken-5: darken($base-green, 5%);   // #47A736
$green-darken-10: darken($base-green, 10%); // #349425
$green-darken-15: darken($base-green, 15%); // #218114
$green-darken-20: darken($base-green, 20%); // #0E6E03
$green-darken-25: darken($base-green, 25%); // #005B00

// Saturate variations (רווי יותר)
$green-saturate-5: saturate($base-green, 5%);   // #5BBF45
$green-saturate-10: saturate($base-green, 10%); // #5DC443
$green-saturate-15: saturate($base-green, 15%); // #5EC941
$green-saturate-20: saturate($base-green, 20%); // #5FCE3F
$green-saturate-25: saturate($base-green, 25%); // #60D33D

// Desaturate variations (פחות רווי)
$green-desaturate-5: desaturate($base-green, 5%);   // #5CB549
$green-desaturate-10: desaturate($base-green, 10%); // #5EB04B
$green-desaturate-15: desaturate($base-green, 15%); // #60AB4D
$green-desaturate-20: desaturate($base-green, 20%); // #62A64F
$green-desaturate-25: desaturate($base-green, 25%); // #64A151
$green-desaturate-30: desaturate($base-green, 30%); // #669C53
$green-desaturate-35: desaturate($base-green, 35%); // #689755

// שילובים (Lighten + Desaturate)
$green-light-desat-10:...