├── docs └── shot-1.png ├── .gitattributes ├── README.md ├── poco.css └── poco-utilities.css /docs/shot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hihayk/poco/HEAD/docs/shot-1.png -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://github.com/hihayk/poco/blob/master/docs/shot-1.png?raw=true) 2 | -------------------------------------------------------------------------------- /poco.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --unit: 8px; 3 | --fontFamily: -apple-system, BlinkMacSystemFont, sans-serif; 4 | 5 | --spaceIncrement: 2; 6 | 7 | --space-s: var(--unit); 8 | --space-m: calc(var(--unit) * var(--spaceIncrement)); 9 | --space-l: calc(var(--space-m) * var(--spaceIncrement)); 10 | --space-xl: calc(var(--space-l) * var(--spaceIncrement)); 11 | --space-2xl: calc(var(--space-xl) * var(--spaceIncrement)); 12 | --space-3xl: calc(var(--space-2xl) * var(--spaceIncrement)); 13 | --space-4xl: calc(var(--space-3xl) * var(--spaceIncrement)); 14 | --space-5xl: calc(var(--space-4xl) * var(--spaceIncrement)); 15 | 16 | --spaceframe-s: var(--space-s); 17 | --spaceframe-m: var(--space-m); 18 | --spaceframe-l: var(--space-l); 19 | --spaceframe-xl: var(--space-xl); 20 | 21 | --fontSize-xs: 12px; 22 | --lineHeight-xs: calc(var(--unit) * 2); 23 | 24 | --fontSize-s: 16px; 25 | --lineHeight-s: calc(var(--unit) * 3); 26 | 27 | --fontSize-m: 22px; 28 | --lineHeight-m: calc(var(--unit) * 4); 29 | 30 | --fontSize-l: 36px; 31 | --lineHeight-l: calc(var(--unit) * 5); 32 | 33 | --fontSize-xl: 44px; 34 | --lineHeight-xl: calc(var(--unit) * 6); 35 | 36 | --fontWeight-400: 400; 37 | --fontWeight-700: 700; 38 | 39 | --colorLightnessIncrement: 10%; 40 | 41 | --c-primary-hue: 215; 42 | --c-primary-saturation: 46%; 43 | --c-primary-lightness: 50%; 44 | 45 | --c-primary: hsl(var(--c-primary-hue), var(--c-primary-saturation), var(--c-primary-lightness)); 46 | 47 | --c-primary-2xlight: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) + var(--colorLightnessIncrement) * 3)); 48 | --c-primary-xlight: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) + var(--colorLightnessIncrement) * 2)); 49 | --c-primary-light: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) + var(--colorLightnessIncrement))); 50 | 51 | --c-primary-dark: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) - var(--colorLightnessIncrement))); 52 | --c-primary-xdark: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) - var(--colorLightnessIncrement) * 2)); 53 | --c-primary-2xdark: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) - var(--colorLightnessIncrement) * 3)); 54 | 55 | --greyHue: 0; 56 | --greySaturation: 0%; 57 | 58 | --initialGreyLightness: 93%; 59 | --greyscaleLightnessIncrement: 11%; 60 | 61 | --c-grey-1: hsl(var(--greyHue), var(--greySaturation), var(--initialGreyLightness)); 62 | --c-grey-2: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 1)); 63 | --c-grey-3: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 2)); 64 | --c-grey-4: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 3)); 65 | --c-grey-5: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 4)); 66 | --c-grey-6: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 5)); 67 | --c-grey-7: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 6)); 68 | --c-grey-8: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 7)); 69 | } -------------------------------------------------------------------------------- /poco-utilities.css: -------------------------------------------------------------------------------- 1 | .width-s {width: var(--space-s)} 2 | .width-m {width: var(--space-m)} 3 | .width-l {width: var(--space-l)} 4 | .width-xl {width: var(--space-xl)} 5 | .width-2xl {width: var(--space-2xl)} 6 | .width-3xl {width: var(--space-3xl)} 7 | .width-4xl {width: var(--space-4xl)} 8 | .width-5xl {width: var(--space-5xl)} 9 | 10 | .minWidth-s {min-width: var(--space-s)} 11 | .minWidth-m {min-width: var(--space-m)} 12 | .minWidth-l {min-width: var(--space-l)} 13 | .minWidth-xl {min-width: var(--space-xl)} 14 | .minWidth-2xl {min-width: var(--space-2xl)} 15 | .minWidth-3xl {min-width: var(--space-3xl)} 16 | .minWidth-4xl {min-width: var(--space-4xl)} 17 | .minWidth-5xl {min-width: var(--space-5xl)} 18 | 19 | .maxWidth-s {max-width: var(--space-s)} 20 | .maxWidth-m {max-width: var(--space-m)} 21 | .maxWidth-l {max-width: var(--space-l)} 22 | .maxWidth-xl {max-width: var(--space-xl)} 23 | .maxWidth-2xl {max-width: var(--space-2xl)} 24 | .maxWidth-3xl {max-width: var(--space-3xl)} 25 | .maxWidth-4xl {max-width: var(--space-4xl)} 26 | .maxWidth-5xl {max-width: var(--space-5xl)} 27 | 28 | .height-s {height: var(--space-s)} 29 | .height-m {height: var(--space-m)} 30 | .height-l {height: var(--space-l)} 31 | .height-xl {height: var(--space-xl)} 32 | .height-2xl {height: var(--space-2xl)} 33 | .height-3xl {height: var(--space-3xl)} 34 | .height-4xl {height: var(--space-4xl)} 35 | .height-5xl {height: var(--space-5xl)} 36 | 37 | .minHeight-s {min-height: var(--space-s)} 38 | .minHeight-m {min-height: var(--space-m)} 39 | .minHeight-l {min-height: var(--space-l)} 40 | .minHeight-xl {min-height: var(--space-xl)} 41 | .minHeight-2xl {min-height: var(--space-2xl)} 42 | .minHeight-3xl {min-height: var(--space-3xl)} 43 | .minHeight-4xl {min-height: var(--space-4xl)} 44 | .minHeight-5xl {min-height: var(--space-5xl)} 45 | 46 | .maxHeight-s {max-height: var(--space-s)} 47 | .maxHeight-m {max-height: var(--space-m)} 48 | .maxHeight-l {max-height: var(--space-l)} 49 | .maxHeight-xl {max-height: var(--space-xl)} 50 | .maxHeight-2xl {max-height: var(--space-2xl)} 51 | .maxHeight-3xl {max-height: var(--space-3xl)} 52 | .maxHeight-4xl {max-height: var(--space-4xl)} 53 | .maxHeight-5xl {max-height: var(--space-5xl)} 54 | 55 | .spacerRight-s {margin-right: var(--space-s)} 56 | .spacerRight-m {margin-right: var(--space-m)} 57 | .spacerRight-l {margin-right: var(--space-l)} 58 | .spacerRight-xl {margin-right: var(--space-xl)} 59 | 60 | .spacerLeft-s {margin-left: var(--space-s)} 61 | .spacerLeft-m {margin-left: var(--space-m)} 62 | .spacerLeft-l {margin-left: var(--space-l)} 63 | .spacerLeft-xl {margin-left: var(--space-xl)} 64 | 65 | .spacerTop-s {margin-top: var(--space-s)} 66 | .spacerTop-m {margin-top: var(--space-m)} 67 | .spacerTop-l {margin-top: var(--space-l)} 68 | .spacerTop-xl {margin-top: var(--space-xl)} 69 | 70 | .spacerBottom-s {margin-bottom: var(--space-s)} 71 | .spacerBottom-m {margin-bottom: var(--space-m)} 72 | .spacerBottom-l {margin-bottom: var(--space-l)} 73 | .spacerBottom-xl {margin-bottom: var(--space-xl)} 74 | 75 | .spaceframe-s {padding: var(--spaceframe-s)} 76 | .spaceframe-m {padding: var(--spaceframe-m)} 77 | .spaceframe-l {padding: var(--spaceframe-l)} 78 | .spaceframe-xl {padding: var(--spaceframe-xl)} 79 | 80 | .textSize-xs { 81 | font-size: var(--fontSize-xs); 82 | line-height: var(--lineHeight-xs); 83 | } 84 | 85 | .textSize-s { 86 | font-size: var(--fontSize-s); 87 | line-height: var(--lineHeight-s); 88 | } 89 | 90 | .textSize-m { 91 | font-size: var(--fontSize-m); 92 | line-height: var(--lineHeight-m); 93 | } 94 | 95 | .textSize-l { 96 | font-size: var(--fontSize-l); 97 | line-height: var(--lineHeight-l); 98 | } 99 | 100 | .textSize-xl { 101 | font-size: var(--fontSize-xl); 102 | line-height: var(--lineHeight-xl); 103 | } 104 | 105 | .fontWeight-400 {font-weight: var(--fontWeight-400)} 106 | .fontWeight-700 {font-weight: var(--fontWeight-700)} 107 | 108 | .c-primary-2xlight {color: var(--c-primary-2xlight)} 109 | .c-primary-xlight {color: var(--c-primary-xlight)} 110 | .c-primary-light {color: var(--c-primary-light)} 111 | .c-primary {color: var(--c-primary)} 112 | .c-primary-dark {color: var(--c-primary-dark)} 113 | .c-primary-xdark {color: var(--c-primary-xdark)} 114 | .c-primary-2xdark {color: var(--c-primary-2xdark)} 115 | 116 | .bg-primary-2xlight {background-color: var(--c-primary-2xlight)} 117 | .bg-primary-xlight {background-color: var(--c-primary-xlight)} 118 | .bg-primary-light {background-color: var(--c-primary-light)} 119 | .bg-primary {background-color: var(--c-primary)} 120 | .bg-primary-dark {background-color: var(--c-primary-dark)} 121 | .bg-primary-xdark {background-color: var(--c-primary-xdark)} 122 | .bg-primary-2xdark {background-color: var(--c-primary-2xdark)} 123 | 124 | .c-grey-1 {color: var(--c-grey-1)} 125 | .c-grey-2 {color: var(--c-grey-2)} 126 | .c-grey-3 {color: var(--c-grey-3)} 127 | .c-grey-4 {color: var(--c-grey-4)} 128 | .c-grey-5 {color: var(--c-grey-5)} 129 | .c-grey-6 {color: var(--c-grey-6)} 130 | .c-grey-7 {color: var(--c-grey-7)} 131 | .c-grey-8 {color: var(--c-grey-8)} 132 | 133 | .bg-grey-1 {background-color: var(--c-grey-1)} 134 | .bg-grey-2 {background-color: var(--c-grey-2)} 135 | .bg-grey-3 {background-color: var(--c-grey-3)} 136 | .bg-grey-4 {background-color: var(--c-grey-4)} 137 | .bg-grey-5 {background-color: var(--c-grey-5)} 138 | .bg-grey-6 {background-color: var(--c-grey-6)} 139 | .bg-grey-7 {background-color: var(--c-grey-7)} 140 | .bg-grey-8 {background-color: var(--c-grey-8)} 141 | 142 | .c-body {color: var(--c-body)} 143 | .c-background {color: var(--c-background)} 144 | 145 | .bg-body {background-color: var(--c-body)} 146 | .bg-background {background-color: var(--c-background)} --------------------------------------------------------------------------------