Back to the list
Variables
To speed up the development process Fajny CSS uses a lot of variables.
Colors
| Name |
SCSS |
CSS |
Value |
| Black |
$color-black |
var(--color-black) |
rgb(0, 0, 0) |
| White |
$color-white |
var(--color-white) |
rgb(255, 255, 255) |
| Gray 50 |
$color-gray-50 |
var(--color-gray-50) |
rgb(248, 248, 248) |
| Gray 100 |
$color-gray-100 |
var(--color-gray-100) |
rgb(228, 228, 228) |
| Gray 200 |
$color-gray-200 |
var(--color-gray-200) |
rgb(200, 200, 200) |
| Gray 300 |
$color-gray-300 |
var(--color-gray-300) |
rgb(173, 173, 173) |
| Gray 400 |
$color-gray-400 |
var(--color-gray-400) |
rgb(145, 145, 145) |
| Gray 500 |
$color-gray-500 |
var(--color-gray-500) |
rgb(118, 118, 118) |
| Gray 600 |
$color-gray-600 |
var(--color-gray-600) |
rgb(94, 94, 94) |
| Gray 700 |
$color-gray-700 |
var(--color-gray-700) |
rgb(71, 71, 71) |
| Gray 800 |
$color-gray-800 |
var(--color-gray-800) |
rgb(47, 47, 47) |
| Gray 900 |
$color-gray-900 |
var(--color-gray-900) |
rgb(24, 24, 24) |
| Primary 50 |
$color-primary-50 |
var(--color-primary-50) |
rgb(244, 246, 247) |
| Primary 100 |
$color-primary-100 |
var(--color-primary-100) |
rgb(209, 218, 225) |
| Primary 200 |
$color-primary-200 |
var(--color-primary-200) |
rgb(164, 181, 195) |
| Primary 300 |
$color-primary-300 |
var(--color-primary-300) |
rgb(118, 143, 164) |
| Primary 400 |
$color-primary-400 |
var(--color-primary-400) |
rgb(73, 106, 134) |
| Primary 500 |
$color-primary-500 |
var(--color-primary-500) |
rgb(27, 69, 104) |
| Primary 600 |
$color-primary-600 |
var(--color-primary-600) |
rgb(22, 55, 83) |
| Primary 700 |
$color-primary-700 |
var(--color-primary-700) |
rgb(16, 41, 62) |
| Primary 800 |
$color-primary-800 |
var(--color-primary-800) |
rgb(11, 28, 42) |
| Primary 900 |
$color-primary-900 |
var(--color-primary-900) |
rgb(5, 14, 21) |
| Secondary 50 |
$color-secondary-50 |
var(--color-secondary-50) |
rgb(244, 248, 253) |
| Secondary 100 |
$color-secondary-100 |
var(--color-secondary-100) |
rgb(212, 226, 246) |
| Secondary 200 |
$color-secondary-200 |
var(--color-secondary-200) |
rgb(168, 197, 237) |
| Secondary 300 |
$color-secondary-300 |
var(--color-secondary-300) |
rgb(125, 167, 229) |
| Secondary 400 |
$color-secondary-400 |
var(--color-secondary-400) |
rgb(81, 138, 220) |
| Secondary 500 |
$color-secondary-500 |
var(--color-secondary-500) |
rgb(38, 109, 211) |
| Secondary 600 |
$color-secondary-600 |
var(--color-secondary-600) |
rgb(30, 87, 169) |
| Secondary 700 |
$color-secondary-700 |
var(--color-secondary-700) |
rgb(23, 65, 127) |
| Secondary 800 |
$color-secondary-800 |
var(--color-secondary-800) |
rgb(15, 44, 84) |
| Secondary 900 |
$color-secondary-900 |
var(--color-secondary-900) |
rgb(8, 22, 42) |
| Success 50 |
$color-success-50 |
var(--color-success-50) |
rgb(243, 249, 246) |
| Success 100 |
$color-success-100 |
var(--color-success-100) |
rgb(206, 230, 219) |
| Success 200 |
$color-success-200 |
var(--color-success-200) |
rgb(157, 205, 183) |
| Success 300 |
$color-success-300 |
var(--color-success-300) |
rgb(107, 179, 146) |
| Success 400 |
$color-success-400 |
var(--color-success-400) |
rgb(58, 154, 110) |
| Success 500 |
$color-success-500 |
var(--color-success-500) |
rgb(9, 129, 74) |
| Success 600 |
$color-success-600 |
var(--color-success-600) |
rgb(7, 103, 59) |
| Success 700 |
$color-success-700 |
var(--color-success-700) |
rgb(5, 77, 44) |
| Success 800 |
$color-success-800 |
var(--color-success-800) |
rgb(4, 52, 30) |
| Success 900 |
$color-success-900 |
var(--color-success-900) |
rgb(2, 26, 15) |
| Danger 50 |
$color-danger-50 |
var(--color-danger-50) |
rgb(251, 242, 244) |
| Danger 100 |
$color-danger-100 |
var(--color-danger-100) |
rgb(240, 204, 209) |
| Danger 200 |
$color-danger-200 |
var(--color-danger-200) |
rgb(225, 153, 164) |
| Danger 300 |
$color-danger-300 |
var(--color-danger-300) |
rgb(209, 102, 118) |
| Danger 400 |
$color-danger-400 |
var(--color-danger-400) |
rgb(194, 51, 73) |
| Danger 500 |
$color-danger-500 |
var(--color-danger-500) |
rgb(179, 0, 27) |
| Danger 600 |
$color-danger-600 |
var(--color-danger-600) |
rgb(143, 0, 22) |
| Danger 700 |
$color-danger-700 |
var(--color-danger-700) |
rgb(107, 0, 16) |
| Danger 800 |
$color-danger-800 |
var(--color-danger-800) |
rgb(72, 0, 11) |
| Danger 900 |
$color-danger-900 |
var(--color-danger-900) |
rgb(36, 0, 5) |
| Warning 50 |
$color-warning-50 |
var(--color-warning-50) |
rgb(252, 246, 242) |
| Warning 100 |
$color-warning-100 |
var(--color-warning-100) |
rgb(243, 219, 204) |
| Warning 200 |
$color-warning-200 |
var(--color-warning-200) |
rgb(231, 182, 153) |
| Warning 300 |
$color-warning-300 |
var(--color-warning-300) |
rgb(220, 146, 102) |
| Warning 400 |
$color-warning-400 |
var(--color-warning-400) |
rgb(208, 109, 51) |
| Warning 500 |
$color-warning-500 |
var(--color-warning-500) |
rgb(196, 73, 0) |
| Warning 600 |
$color-warning-600 |
var(--color-warning-600) |
rgb(157, 58, 0) |
| Warning 700 |
$color-warning-700 |
var(--color-warning-700) |
rgb(118, 44, 0) |
| Warning 800 |
$color-warning-800 |
var(--color-warning-800) |
rgb(78, 29, 0) |
| Warning 900 |
$color-warning-900 |
var(--color-warning-900) |
rgb(39, 15, 0) |
Overlays
| Name |
SCSS |
CSS |
Value |
| Plain Black 50 |
$overlay-black-50 |
var(--overlay-black-50) |
rgba(0, 0, 0, 0.5) |
| Plain Black 80 |
$overlay-black-80 |
var(--overlay-black-80) |
rgba(0, 0, 0, 0.8) |
| Plain White 50 |
$overlay-white-50 |
var(--overlay-white-50) |
rgba(255, 255, 255, 0.5) |
| Overlay White 80 |
$overlay-white-80 |
var(--overlay-white-80) |
rgba(255, 255, 255, 0.8) |
| Gradient Black |
$overlay-gradient-black |
var(--overlay-gradient-black) |
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%) |
| Gradient White |
$overlay-gradient-white |
var(--overlay-gradient-white) |
linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.35) 100%) |
Font families
| Name |
SCSS |
CSS |
Value |
| Font family body |
$font-family-body |
var(--font-family-body) |
"Lato", sans-serif |
| Font family code |
$font-family-code |
var(--font-family-code) |
monospace |
Font sizes
| Name |
SCSS |
CSS |
Value |
| Display h1 |
$font-size-display-h1 |
var(--font-size-display-h1) |
5rem |
| Display h2 |
$font-size-display-h2 |
var(--font-size-display-h2) |
4rem |
| Display h3 |
$font-size-display-h3 |
var(--font-size-display-h3) |
3.5rem |
| Display h4 |
$font-size-display-h4 |
var(--font-size-display-h4) |
3rem |
| Display h5 |
$font-size-display-h5 |
var(--font-size-display-h5) |
2.5rem |
| H1 |
$font-size-h1 |
var(--font-size-h1) |
2.5rem |
| H2 |
$font-size-h2 |
var(--font-size-h2) |
2rem |
| H3 |
$font-size-h3 |
var(--font-size-h3) |
1.8rem |
| H4 |
$font-size-h4 |
var(--font-size-h4) |
1.5rem |
| H5 |
$font-size-h5 |
var(--font-size-h5) |
1.3rem |
| H6 |
$font-size-h6 |
var(--font-size-h6) |
1.1rem |
| Body |
$font-size-body |
var(--font-size-body) |
1rem |
| Small |
$font-size-small |
var(--font-size-small) |
0.875rem |
Font weights
| Name |
SCSS |
CSS |
Value |
| Regular |
$font-weight-regular |
var(--font-weight-regular) |
400 |
| Bold |
$font-weight-bold |
var(--font-weight-bold) |
700 |
| Black |
$font-weight-black |
var(--font-weight-black) |
900 |
Line heights
| Name |
SCSS |
CSS |
Value |
| Line height |
$line-height |
var(--line-height) |
1.5 |
| Line height code |
$line-height-code |
var(--line-height-code) |
1.8 |
Shadows
| Name |
SCSS |
CSS |
Value |
| Shadow XXL |
$shadow-xxl |
var(--shadow-xxl) |
0px 25px 50px -12px rgba(0, 0, 0, 0.25) |
| Shadow XL |
$shadow-xl |
var(--shadow-xl) |
0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1) |
| Shadow L |
$shadow-l |
var(--shadow-l) |
0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1) |
| Shadow M |
$shadow-m |
var(--shadow-m) |
0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1) |
| Shadow S |
$shadow-s |
var(--shadow-s) |
0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1) |
| Shadow XS |
$shadow-xs |
var(--shadow-xs) |
0px 1px 2px 0 rgba(0, 0, 0, 0.05) |
Radiuses
| Name |
SCSS |
CSS |
Value |
| XXL |
$radius-xxl |
var(--radius-xxl) |
24px
|
| XL |
$radius-xl |
var(--radius-xl) |
16px
|
| L |
$radius-l |
var(--radius-l) |
12px
|
| M |
$radius-m |
var(--radius-m) |
8px
|
| S |
$radius-s |
var(--radius-s) |
4px
|
| XS |
$radius-xs |
var(--radius-xs) |
2px
|
| Round |
$radius-round |
var(--radius-round) |
99em
|
| Circle |
$radius-circle |
var(--radius-circle) |
50%
|
Layouts
| Name |
SCSS |
CSS |
Value |
Value tablet |
| Main default |
$main-default |
var(--main-default) |
600px |
100% |
| Main large |
$main-large |
var(--main-large) |
800px |
100% |
| Main form |
$main-form |
var(--main-form) |
400px |
100% |
| Aside default |
$aside-default |
var(--aside-default) |
250px |
100% |
| Aside small |
$aside-small |
var(--aside-small) |
200px |
100% |
| Wrapper 1 col |
$wrapper-1-col |
var(--wrapper-1-col) |
1fr auto 1fr |
5vw 1fr 5vw |
| Wrapper 2 cols |
$wrapper-2-cols |
var(--wrapper-2-cols) |
1fr auto auto 1fr |
5vw 1fr 5vw |
| Wrapper 3 cols |
$wrapper-3-cols |
var(--wrapper-3-cols) |
1fr auto auto auto 1fr |
5vw 1fr 5vw |
Spacers
| Name |
SCSS |
CSS |
Value |
| XXL |
$spacer-xxl |
var(--spacer-xxl) |
48px |
| XL |
$spacer-xl |
var(--spacer-xl) |
32px |
| L |
$spacer-l |
var(--spacer-l) |
24px |
| M |
$spacer-m |
var(--spacer-m) |
16px |
| S |
$spacer-s |
var(--spacer-s) |
12px |
| XS |
$spacer-xs |
var(--spacer-xs) |
8px |
| XXS |
$spacer-xxs |
var(--spacer-xxs) |
4px |
Transitions
| Name |
SCSS |
CSS |
Value |
| Short |
$transition-short |
var(--transition-short) |
all 0.2s ease |
| Long |
$transition-long |
var(--transition-long) |
all 0.5s ease |
| Bezier |
$transition-bezier |
var(--transition-bezier) |
all 0.5s cubic-bezier(0.25, 0.75, 0, 0.66) |
