Nulsheet
:root {
/* identity colors */
--primary-color: #d22365;
--primary-light-color: #ff94bd;
--primary-dark-color: #530020;
--secondary-color:#6b46c1;
--secondary-light-color: #ceb9ff;
--secondary-dark-color: #311e6d;
--tertiary-color:#2ee9b4;
--tertiary-light-color: #a4ffe5;
--tertiary-dark-color:#004d37;
/* semantic colors */
--success-color: #75c38f;
--success-light-color:#e5f7ec;
--success-dark-color:#315542;
--warning-color: #ffc400;
--warning-light-color: #fbf6b4;
--warning-dark-color: #663d1d;
--danger-color:#ff3838;
--danger-light-color: #f7e7e6;
--danger-dark-color: #950000;
/* markup colors */
--soft-color: #fff;
--soft-light-color: transparent;
--soft-dark-color: #e6e6e6;
--neutral-color: #b3b3b3;
--neutral-light-color: #e7e7e7;
--neutral-dark-color: #999999;
--heavy-color: #282c34;
--heavy-light-color: #575f70;
--heavy-dark-color:#0d0f11;
/* font families */
--primary-font-family: 'Arial';
--secondary-font-family: 'Tahoma';
--tertiary-font-family: 'Tahoma';
/* ultilities */
--border-radius: 0.25rem;
--line-height: 0.1;
--opacity: 0.05;
--spacer: 0.25rem;
--box-shadow: 2px;
}
medias = xs: sm- sm: sm+ md- md: md+ lg- lg: lg+ xl: pt:
Colors
- variation = a z
- number = 1 2 3
- type = i s m
- state = :h :a :f
Background Colors
.(media)bg[type][number](variation)(state)
Border Colors
.(media)bc[type][number](variation)(position)(state)
Text Colors
.(media)c[type][number](variation)(state)
Horizontal Columns
- variation = a z
- number = 1 ... 24
- unit = vw
width
.(media)x[number](variation)
number of columns
.(media)xn[number]
column unit
.(media)xvw
Vertical Columns
- variation = a z
- number = 1 ... 24
- unit = vw
height
.(media)y[number](variation)
number of columns
.(media)yn[number]
column unit
.(media)yvh
Depth
- number = 1 ... 24
.(media)z[number]
Fonts
Font Family
- number = 1 2 3
.(media)ff[number]
Font Size
- number = 1 ... 24
.(media)fs[number]
Font Weight
- number = 1 ... 10
.(media)fw[number]
Visibility
.(media)off
Vertical rows
- position = y t b sa se sb
.(media)y[position]
Horizontal rows
- position = x t b sa se sb
.(media)x[position]
Flex Orders
- number = 1 ... 24
.(media)fo[number]
Paddings
- number = 0 ... 24
- position = t b l r x y
.(media)p[number](position)
Margins
- number = 0 ... 24
- position = t b l r x y
.(media)m[number](position)
Box Shadows
- number = 0 ... 24
.(media)bs[number]
Containers
.(media)x
Opacity
- number = 0 ... 20
.(media)op[number]
Text Transform
- variation = u l c
.(media)tt[variation]
Line Height
- number = 1 ... 24
.(media)lh[number]
Border Width
- number = 0 ... 24
- position = t b l r x y
.(media)bw[number](position)
Border Radius
- number = 0 ... 24
- position tl tr bl br t b l r
.(media)br[number](position)
Positions
- position = r a f s
- y = t b
- x = r l
.(media)p[position][y][x]