@bgord/design 0.4.0 → 0.7.0

package/dist/main.css

@@ -426,6 +426,8 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+-ms-flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 *[data-display='block'] {
   display: block;
@@ -489,28 +491,6 @@
 }
 /* ===================== */
 
-/* Positions */
-
-*[data-position='static'] {
-  position: static;
-}
-*[data-position='relative'] {
-  position: relative;
-}
-*[data-position='absolute'] {
-  position: absolute;
-}
-*[data-position='fixed'] {
-  position: fixed;
-}
-*[data-position='sticky'] {
-  position: sticky;
-}
-*[data-position='unset'] {
-  position: unset;
-}
-/* ===================== */
-
 /* Flex wraps */
 
 *[data-wrap='nowrap'] {
@@ -531,19 +511,31 @@
 }
 /* ===================== */
 
-/* Displays */
+/* Flex directions */
 
-*[data-z='0'] {
-  z-index: 0;
+*[data-direction='row'] {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
 }
-*[data-z='1'] {
-  z-index: 1;
+*[data-direction='row-reverse'] {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
 }
-*[data-z='2'] {
-  z-index: 2;
+*[data-direction='column'] {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
-*[data-z='3'] {
-  z-index: 3;
+*[data-direction='column-reverse'] {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
 }
 /* ===================== */
 
@@ -560,6 +552,44 @@
 }
 /* ===================== */
 
+/* Positions */
+
+*[data-position='static'] {
+  position: static;
+}
+*[data-position='relative'] {
+  position: relative;
+}
+*[data-position='absolute'] {
+  position: absolute;
+}
+*[data-position='fixed'] {
+  position: fixed;
+}
+*[data-position='sticky'] {
+  position: sticky;
+}
+*[data-position='unset'] {
+  position: unset;
+}
+/* ===================== */
+
+/* Displays */
+
+*[data-z='0'] {
+  z-index: 0;
+}
+*[data-z='1'] {
+  z-index: 1;
+}
+*[data-z='2'] {
+  z-index: 2;
+}
+*[data-z='3'] {
+  z-index: 3;
+}
+/* ===================== */
+
 /* Font sizes */
 
 *[data-fs='12'] {
@@ -582,31 +612,81 @@
 }
 /* ===================== */
 
-/* Flex directions */
+/* Font sizes */
 
-*[data-direction='row'] {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+*[data-fw='300'] {
+  font-weight: 300;
 }
-*[data-direction='row-reverse'] {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: row-reverse;
-          flex-direction: row-reverse;
+*[data-fw='400'] {
+  font-weight: 400;
 }
-*[data-direction='column'] {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+*[data-fw='500'] {
+  font-weight: 500;
 }
-*[data-direction='column-reverse'] {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-          flex-direction: column-reverse;
+*[data-fw='700'] {
+  font-weight: 700;
+}
+*[data-fw='900'] {
+  font-weight: 900;
+}
+*[data-fw='unset'] {
+  font-weight: unset;
+}
+/* ===================== */
+
+/* Line heights */
+
+*[data-lh='12'] {
+  line-height: 12;
+}
+*[data-lh='16'] {
+  line-height: 16;
+}
+*[data-lh='20'] {
+  line-height: 20;
+}
+*[data-lh='24'] {
+  line-height: 24;
+}
+*[data-lh='32'] {
+  line-height: 32;
+}
+*[data-lh='unset'] {
+  line-height: unset;
+}
+/* ===================== */
+
+/* Backgrounds */
+
+*[data-bg='white'] {
+  background-color: #F9FAFB;
+}
+*[data-bg='gray-100'] {
+  background-color: #F3F4F6;
+}
+*[data-bg='gray-200'] {
+  background-color: #E5E7EB;
+}
+*[data-bg='gray-300'] {
+  background-color: #D1D5DB;
+}
+*[data-bg='gray-400'] {
+  background-color: #9CA3AF;
+}
+*[data-bg='gray-500'] {
+  background-color: #6B7280;
+}
+*[data-bg='gray-600'] {
+  background-color: #4B5563;
+}
+*[data-bg='gray-700'] {
+  background-color: #374151;
+}
+*[data-bg='gray-800'] {
+  background-color: #1F2937;
+}
+*[data-bg='black'] {
+  background-color: #111827;
 }
 /* ===================== */
 

package/dist/main.min.css

@@ -1 +1 @@
-[data-m='0']{margin:0}[data-m='3']{margin:3px}[data-m='6']{margin:6px}[data-m='12']{margin:12px}[data-m='24']{margin:24px}[data-m='48']{margin:48px}[data-m='72']{margin:72px}[data-m=auto]{margin:auto}[data-m=unset]{margin:unset}[data-mx='0']{margin-left:0;margin-right:0}[data-mx='3']{margin-left:3px;margin-right:3px}[data-mx='6']{margin-left:6px;margin-right:6px}[data-mx='12']{margin-left:12px;margin-right:12px}[data-mx='24']{margin-left:24px;margin-right:24px}[data-mx='48']{margin-left:48px;margin-right:48px}[data-mx='72']{margin-left:72px;margin-right:72px}[data-mx=auto]{margin-left:auto;margin-right:auto}[data-mx=unset]{margin-left:unset;margin-right:unset}[data-my='0']{margin-top:0;margin-bottom:0}[data-my='3']{margin-top:3px;margin-bottom:3px}[data-my='6']{margin-top:6px;margin-bottom:6px}[data-my='12']{margin-top:12px;margin-bottom:12px}[data-my='24']{margin-top:24px;margin-bottom:24px}[data-my='48']{margin-top:48px;margin-bottom:48px}[data-my='72']{margin-top:72px;margin-bottom:72px}[data-my=auto]{margin-top:auto;margin-bottom:auto}[data-my=unset]{margin-top:unset;margin-bottom:unset}[data-mt='0']{margin-top:0}[data-mt='3']{margin-top:3px}[data-mt='6']{margin-top:6px}[data-mt='12']{margin-top:12px}[data-mt='24']{margin-top:24px}[data-mt='48']{margin-top:48px}[data-mt='72']{margin-top:72px}[data-mt=auto]{margin-top:auto}[data-mt=unset]{margin-top:unset}[data-mr='0']{margin-right:0}[data-mr='3']{margin-right:3px}[data-mr='6']{margin-right:6px}[data-mr='12']{margin-right:12px}[data-mr='24']{margin-right:24px}[data-mr='48']{margin-right:48px}[data-mr='72']{margin-right:72px}[data-mr=auto]{margin-right:auto}[data-mr=unset]{margin-right:unset}[data-mb='0']{margin-bottom:0}[data-mb='3']{margin-bottom:3px}[data-mb='6']{margin-bottom:6px}[data-mb='12']{margin-bottom:12px}[data-mb='24']{margin-bottom:24px}[data-mb='48']{margin-bottom:48px}[data-mb='72']{margin-bottom:72px}[data-mb=auto]{margin-bottom:auto}[data-mb=unset]{margin-bottom:unset}[data-ml='0']{margin-left:0}[data-ml='3']{margin-left:3px}[data-ml='6']{margin-left:6px}[data-ml='12']{margin-left:12px}[data-ml='24']{margin-left:24px}[data-ml='48']{margin-left:48px}[data-ml='72']{margin-left:72px}[data-ml=auto]{margin-left:auto}[data-ml=unset]{margin-left:unset}[data-p='0']{padding:0}[data-p='3']{padding:3px}[data-p='6']{padding:6px}[data-p='12']{padding:12px}[data-p='24']{padding:24px}[data-p='48']{padding:48px}[data-p='72']{padding:72px}[data-p=auto]{padding:auto}[data-p=unset]{padding:unset}[data-px='0']{padding-left:0;padding-right:0}[data-px='3']{padding-left:3px;padding-right:3px}[data-px='6']{padding-left:6px;padding-right:6px}[data-px='12']{padding-left:12px;padding-right:12px}[data-px='24']{padding-left:24px;padding-right:24px}[data-px='48']{padding-left:48px;padding-right:48px}[data-px='72']{padding-left:72px;padding-right:72px}[data-px=auto]{padding-left:auto;padding-right:auto}[data-px=unset]{padding-left:unset;padding-right:unset}[data-py='0']{padding-top:0;padding-bottom:0}[data-py='3']{padding-top:3px;padding-bottom:3px}[data-py='6']{padding-top:6px;padding-bottom:6px}[data-py='12']{padding-top:12px;padding-bottom:12px}[data-py='24']{padding-top:24px;padding-bottom:24px}[data-py='48']{padding-top:48px;padding-bottom:48px}[data-py='72']{padding-top:72px;padding-bottom:72px}[data-py=auto]{padding-top:auto;padding-bottom:auto}[data-py=unset]{padding-top:unset;padding-bottom:unset}[data-pt='0']{padding-top:0}[data-pt='3']{padding-top:3px}[data-pt='6']{padding-top:6px}[data-pt='12']{padding-top:12px}[data-pt='24']{padding-top:24px}[data-pt='48']{padding-top:48px}[data-pt='72']{padding-top:72px}[data-pt=auto]{padding-top:auto}[data-pt=unset]{padding-top:unset}[data-pr='0']{padding-right:0}[data-pr='3']{padding-right:3px}[data-pr='6']{padding-right:6px}[data-pr='12']{padding-right:12px}[data-pr='24']{padding-right:24px}[data-pr='48']{padding-right:48px}[data-pr='72']{padding-right:72px}[data-pr=auto]{padding-right:auto}[data-pr=unset]{padding-right:unset}[data-pb='0']{padding-bottom:0}[data-pb='3']{padding-bottom:3px}[data-pb='6']{padding-bottom:6px}[data-pb='12']{padding-bottom:12px}[data-pb='24']{padding-bottom:24px}[data-pb='48']{padding-bottom:48px}[data-pb='72']{padding-bottom:72px}[data-pb=auto]{padding-bottom:auto}[data-pb=unset]{padding-bottom:unset}[data-pl='0']{padding-left:0}[data-pl='3']{padding-left:3px}[data-pl='6']{padding-left:6px}[data-pl='12']{padding-left:12px}[data-pl='24']{padding-left:24px}[data-pl='48']{padding-left:48px}[data-pl='72']{padding-left:72px}[data-pl=auto]{padding-left:auto}[data-pl=unset]{padding-left:unset}[data-display=flex]{display:-webkit-box;display:-ms-flexbox;display:flex}[data-display=block]{display:block}[data-display=inline-block]{display:inline-block}[data-main=start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}[data-main=end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}[data-main=between]{-webkit-box-pack:between;-ms-flex-pack:between;justify-content:between}[data-main=center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-main=baseline]{-webkit-box-pack:baseline;-ms-flex-pack:baseline;justify-content:baseline}[data-cross=start]{-webkit-box-align:start;-ms-flex-align:start;align-items:start}[data-cross=end]{-webkit-box-align:end;-ms-flex-align:end;align-items:end}[data-cross=between]{-webkit-box-align:between;-ms-flex-align:between;align-items:between}[data-cross=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-cross=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[data-position=static]{position:static}[data-position=relative]{position:relative}[data-position=absolute]{position:absolute}[data-position=fixed]{position:fixed}[data-position=sticky]{position:sticky}[data-position=unset]{position:unset}[data-wrap=nowrap]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[data-wrap=wrap]{-ms-flex-wrap:wrap;flex-wrap:wrap}[data-wrap=wrap-reverse]{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[data-wrap=unset]{-ms-flex-wrap:unset;flex-wrap:unset}[data-z='0']{z-index:0}[data-z='1']{z-index:1}[data-z='2']{z-index:2}[data-z='3']{z-index:3}[data-width='100%']{width:100%}[data-width=auto]{width:auto}[data-width=unset]{width:unset}[data-fs='12']{font-size:12px}[data-fs='14']{font-size:14px}[data-fs='16']{font-size:16px}[data-fs='20']{font-size:20px}[data-fs='24']{font-size:24px}[data-fs='32']{font-size:32px}[data-direction=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-direction=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[data-direction=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-direction=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}
+[data-m='0']{margin:0}[data-m='3']{margin:3px}[data-m='6']{margin:6px}[data-m='12']{margin:12px}[data-m='24']{margin:24px}[data-m='48']{margin:48px}[data-m='72']{margin:72px}[data-m=auto]{margin:auto}[data-m=unset]{margin:unset}[data-mx='0']{margin-left:0;margin-right:0}[data-mx='3']{margin-left:3px;margin-right:3px}[data-mx='6']{margin-left:6px;margin-right:6px}[data-mx='12']{margin-left:12px;margin-right:12px}[data-mx='24']{margin-left:24px;margin-right:24px}[data-mx='48']{margin-left:48px;margin-right:48px}[data-mx='72']{margin-left:72px;margin-right:72px}[data-mx=auto]{margin-left:auto;margin-right:auto}[data-mx=unset]{margin-left:unset;margin-right:unset}[data-my='0']{margin-top:0;margin-bottom:0}[data-my='3']{margin-top:3px;margin-bottom:3px}[data-my='6']{margin-top:6px;margin-bottom:6px}[data-my='12']{margin-top:12px;margin-bottom:12px}[data-my='24']{margin-top:24px;margin-bottom:24px}[data-my='48']{margin-top:48px;margin-bottom:48px}[data-my='72']{margin-top:72px;margin-bottom:72px}[data-my=auto]{margin-top:auto;margin-bottom:auto}[data-my=unset]{margin-top:unset;margin-bottom:unset}[data-mt='0']{margin-top:0}[data-mt='3']{margin-top:3px}[data-mt='6']{margin-top:6px}[data-mt='12']{margin-top:12px}[data-mt='24']{margin-top:24px}[data-mt='48']{margin-top:48px}[data-mt='72']{margin-top:72px}[data-mt=auto]{margin-top:auto}[data-mt=unset]{margin-top:unset}[data-mr='0']{margin-right:0}[data-mr='3']{margin-right:3px}[data-mr='6']{margin-right:6px}[data-mr='12']{margin-right:12px}[data-mr='24']{margin-right:24px}[data-mr='48']{margin-right:48px}[data-mr='72']{margin-right:72px}[data-mr=auto]{margin-right:auto}[data-mr=unset]{margin-right:unset}[data-mb='0']{margin-bottom:0}[data-mb='3']{margin-bottom:3px}[data-mb='6']{margin-bottom:6px}[data-mb='12']{margin-bottom:12px}[data-mb='24']{margin-bottom:24px}[data-mb='48']{margin-bottom:48px}[data-mb='72']{margin-bottom:72px}[data-mb=auto]{margin-bottom:auto}[data-mb=unset]{margin-bottom:unset}[data-ml='0']{margin-left:0}[data-ml='3']{margin-left:3px}[data-ml='6']{margin-left:6px}[data-ml='12']{margin-left:12px}[data-ml='24']{margin-left:24px}[data-ml='48']{margin-left:48px}[data-ml='72']{margin-left:72px}[data-ml=auto]{margin-left:auto}[data-ml=unset]{margin-left:unset}[data-p='0']{padding:0}[data-p='3']{padding:3px}[data-p='6']{padding:6px}[data-p='12']{padding:12px}[data-p='24']{padding:24px}[data-p='48']{padding:48px}[data-p='72']{padding:72px}[data-p=auto]{padding:auto}[data-p=unset]{padding:unset}[data-px='0']{padding-left:0;padding-right:0}[data-px='3']{padding-left:3px;padding-right:3px}[data-px='6']{padding-left:6px;padding-right:6px}[data-px='12']{padding-left:12px;padding-right:12px}[data-px='24']{padding-left:24px;padding-right:24px}[data-px='48']{padding-left:48px;padding-right:48px}[data-px='72']{padding-left:72px;padding-right:72px}[data-px=auto]{padding-left:auto;padding-right:auto}[data-px=unset]{padding-left:unset;padding-right:unset}[data-py='0']{padding-top:0;padding-bottom:0}[data-py='3']{padding-top:3px;padding-bottom:3px}[data-py='6']{padding-top:6px;padding-bottom:6px}[data-py='12']{padding-top:12px;padding-bottom:12px}[data-py='24']{padding-top:24px;padding-bottom:24px}[data-py='48']{padding-top:48px;padding-bottom:48px}[data-py='72']{padding-top:72px;padding-bottom:72px}[data-py=auto]{padding-top:auto;padding-bottom:auto}[data-py=unset]{padding-top:unset;padding-bottom:unset}[data-pt='0']{padding-top:0}[data-pt='3']{padding-top:3px}[data-pt='6']{padding-top:6px}[data-pt='12']{padding-top:12px}[data-pt='24']{padding-top:24px}[data-pt='48']{padding-top:48px}[data-pt='72']{padding-top:72px}[data-pt=auto]{padding-top:auto}[data-pt=unset]{padding-top:unset}[data-pr='0']{padding-right:0}[data-pr='3']{padding-right:3px}[data-pr='6']{padding-right:6px}[data-pr='12']{padding-right:12px}[data-pr='24']{padding-right:24px}[data-pr='48']{padding-right:48px}[data-pr='72']{padding-right:72px}[data-pr=auto]{padding-right:auto}[data-pr=unset]{padding-right:unset}[data-pb='0']{padding-bottom:0}[data-pb='3']{padding-bottom:3px}[data-pb='6']{padding-bottom:6px}[data-pb='12']{padding-bottom:12px}[data-pb='24']{padding-bottom:24px}[data-pb='48']{padding-bottom:48px}[data-pb='72']{padding-bottom:72px}[data-pb=auto]{padding-bottom:auto}[data-pb=unset]{padding-bottom:unset}[data-pl='0']{padding-left:0}[data-pl='3']{padding-left:3px}[data-pl='6']{padding-left:6px}[data-pl='12']{padding-left:12px}[data-pl='24']{padding-left:24px}[data-pl='48']{padding-left:48px}[data-pl='72']{padding-left:72px}[data-pl=auto]{padding-left:auto}[data-pl=unset]{padding-left:unset}[data-display=flex]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}[data-display=block]{display:block}[data-display=inline-block]{display:inline-block}[data-main=start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}[data-main=end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}[data-main=between]{-webkit-box-pack:between;-ms-flex-pack:between;justify-content:between}[data-main=center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-main=baseline]{-webkit-box-pack:baseline;-ms-flex-pack:baseline;justify-content:baseline}[data-cross=start]{-webkit-box-align:start;-ms-flex-align:start;align-items:start}[data-cross=end]{-webkit-box-align:end;-ms-flex-align:end;align-items:end}[data-cross=between]{-webkit-box-align:between;-ms-flex-align:between;align-items:between}[data-cross=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-cross=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[data-wrap=nowrap]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[data-wrap=wrap]{-ms-flex-wrap:wrap;flex-wrap:wrap}[data-wrap=wrap-reverse]{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[data-wrap=unset]{-ms-flex-wrap:unset;flex-wrap:unset}[data-direction=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-direction=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[data-direction=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-direction=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-width='100%']{width:100%}[data-width=auto]{width:auto}[data-width=unset]{width:unset}[data-position=static]{position:static}[data-position=relative]{position:relative}[data-position=absolute]{position:absolute}[data-position=fixed]{position:fixed}[data-position=sticky]{position:sticky}[data-position=unset]{position:unset}[data-z='0']{z-index:0}[data-z='1']{z-index:1}[data-z='2']{z-index:2}[data-z='3']{z-index:3}[data-fs='12']{font-size:12px}[data-fs='14']{font-size:14px}[data-fs='16']{font-size:16px}[data-fs='20']{font-size:20px}[data-fs='24']{font-size:24px}[data-fs='32']{font-size:32px}[data-fw='300']{font-weight:300}[data-fw='400']{font-weight:400}[data-fw='500']{font-weight:500}[data-fw='700']{font-weight:700}[data-fw='900']{font-weight:900}[data-fw=unset]{font-weight:unset}[data-lh='12']{line-height:12}[data-lh='16']{line-height:16}[data-lh='20']{line-height:20}[data-lh='24']{line-height:24}[data-lh='32']{line-height:32}[data-lh=unset]{line-height:unset}[data-bg=white]{background-color:#f9fafb}[data-bg=gray-100]{background-color:#f3f4f6}[data-bg=gray-200]{background-color:#e5e7eb}[data-bg=gray-300]{background-color:#d1d5db}[data-bg=gray-400]{background-color:#9ca3af}[data-bg=gray-500]{background-color:#6b7280}[data-bg=gray-600]{background-color:#4b5563}[data-bg=gray-700]{background-color:#374151}[data-bg=gray-800]{background-color:#1f2937}[data-bg=black]{background-color:#111827}

package/dist/tokens.d.ts

@@ -14,6 +14,12 @@ declare type WidthType = '100%' | 'auto' | 'unset';
 export declare const Widths: Record<WidthType, string>;
 declare type FontSizeType = '12' | '14' | '16' | '20' | '24' | '32';
 export declare const FontSizes: Record<FontSizeType, string>;
+declare type FontWeightType = '300' | '400' | '500' | '700' | '900' | 'unset';
+export declare const FontWeights: Record<FontWeightType, string>;
+declare type LineHeightType = '12' | '16' | '20' | '24' | '32' | 'unset';
+export declare const LineHeights: Record<LineHeightType, string>;
 declare type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export declare const FlexDirections: Record<FlexDirectionType, string>;
+declare type ColorsType = 'white' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'black';
+export declare const Colors: Record<ColorsType, string>;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/backgrounds-generator.ts

@@ -0,0 +1,32 @@
+import { GeneratorInterface, GeneratorConfigType } from './generator';
+
+export class BackgroundsGenerator implements GeneratorInterface {
+  spacing: GeneratorConfigType['spacing'];
+  displays: GeneratorConfigType['displays'];
+  colors: GeneratorConfigType['colors'];
+
+  constructor(config: GeneratorConfigType) {
+    this.spacing = config.spacing;
+    this.displays = config.displays;
+    this.colors = config.colors;
+  }
+
+  generateHeader(): string {
+    return '/* Backgrounds */\n\n';
+  }
+
+  generateCss(): string {
+    let output = '';
+
+    // Regular display: data-bg="*"
+    for (const [key, value] of Object.entries(this.colors)) {
+      output += `*[data-bg='${key}'] {\n  background-color: ${value};\n}\n`;
+    }
+
+    return output;
+  }
+
+  generateFooter(): string {
+    return '/* ===================== */\n\n';
+  }
+}

package/src/displays-generator.ts

@@ -18,7 +18,11 @@ export class DisplaysGenerator implements GeneratorInterface {
 
     // Regular display: data-display="*"
     for (const [key, value] of Object.entries(this.displays)) {
-      output += `*[data-display='${key}'] {\n  display: ${value};\n}\n`;
+      if (value === 'flex') {
+        output += `*[data-display='${key}'] {\n  display: ${value};\nflex-wrap: wrap;\n}\n`;
+      } else {
+        output += `*[data-display='${key}'] {\n  display: ${value};\n}\n`;
+      }
     }
 
     return output;

package/src/font-weight-generator.ts

@@ -0,0 +1,32 @@
+import { GeneratorInterface, GeneratorConfigType } from './generator';
+
+export class FontWeightGenerator implements GeneratorInterface {
+  spacing: GeneratorConfigType['spacing'];
+  displays: GeneratorConfigType['displays'];
+  fontWeights: GeneratorConfigType['fontWeights'];
+
+  constructor(config: GeneratorConfigType) {
+    this.spacing = config.spacing;
+    this.displays = config.displays;
+    this.fontWeights = config.fontWeights;
+  }
+
+  generateHeader(): string {
+    return '/* Font sizes */\n\n';
+  }
+
+  generateCss(): string {
+    let output = '';
+
+    // Regular display: data-fw="*"
+    for (const [key, value] of Object.entries(this.fontWeights)) {
+      output += `*[data-fw='${key}'] {\n  font-weight: ${value};\n}\n`;
+    }
+
+    return output;
+  }
+
+  generateFooter(): string {
+    return '/* ===================== */\n\n';
+  }
+}

package/src/generate-css.ts

@@ -10,7 +10,10 @@ import { FlexWrapGenerator } from './flex-wraps-generator';
 import { ZIndexGenerator } from './z-index-generator';
 import { WidthsGenerator } from './widhts-generator';
 import { FontSizeGenerator } from './font-size-generator';
+import { FontWeightGenerator } from './font-weight-generator';
+import { LineHeightsGenerator } from './line-height-generator';
 import { FlexDirectionsGenerator } from './flex-directions-generator';
+import { BackgroundsGenerator } from './backgrounds-generator';
 
 import {
   Spacing,
@@ -21,7 +24,10 @@ import {
   ZIndexes,
   Widths,
   FontSizes,
+  FontWeights,
   FlexDirections,
+  LineHeights,
+  Colors,
 } from './tokens';
 
 class GeneratorProcessor {
@@ -50,19 +56,29 @@ export async function main() {
     zIndexes: ZIndexes,
     widths: Widths,
     fontSizes: FontSizes,
+    fontWeights: FontWeights,
+    lineHeights: LineHeights,
     flexDirections: FlexDirections,
+    colors: Colors,
   };
 
   await new GeneratorProcessor().process([
     new Margins(config),
     new Paddings(config),
+
     new DisplaysGenerator(config),
     new AxisPlacementsGenerator(config),
-    new PositionsGenerator(config),
     new FlexWrapGenerator(config),
-    new ZIndexGenerator(config),
+    new FlexDirectionsGenerator(config),
+
     new WidthsGenerator(config),
+    new PositionsGenerator(config),
+    new ZIndexGenerator(config),
+
     new FontSizeGenerator(config),
-    new FlexDirectionsGenerator(config),
+    new FontWeightGenerator(config),
+    new LineHeightsGenerator(config),
+
+    new BackgroundsGenerator(config),
   ]);
 }

package/src/generator.ts

@@ -8,6 +8,9 @@ import {
   Widths,
   FontSizes,
   FlexDirections,
+  FontWeights,
+  LineHeights,
+  Colors,
 } from './tokens';
 
 export interface GeneratorInterface {
@@ -28,5 +31,8 @@ export type GeneratorConfigType = {
   zIndexes: typeof ZIndexes;
   widths: typeof Widths;
   fontSizes: typeof FontSizes;
+  fontWeights: typeof FontWeights;
+  lineHeights: typeof LineHeights;
   flexDirections: typeof FlexDirections;
+  colors: typeof Colors;
 };

package/src/line-height-generator.ts

@@ -0,0 +1,32 @@
+import { GeneratorInterface, GeneratorConfigType } from './generator';
+
+export class LineHeightsGenerator implements GeneratorInterface {
+  spacing: GeneratorConfigType['spacing'];
+  displays: GeneratorConfigType['displays'];
+  lineHeights: GeneratorConfigType['lineHeights'];
+
+  constructor(config: GeneratorConfigType) {
+    this.spacing = config.spacing;
+    this.displays = config.displays;
+    this.lineHeights = config.lineHeights;
+  }
+
+  generateHeader(): string {
+    return '/* Line heights */\n\n';
+  }
+
+  generateCss(): string {
+    let output = '';
+
+    // Regular display: data-lh="*"
+    for (const [key, value] of Object.entries(this.lineHeights)) {
+      output += `*[data-lh='${key}'] {\n  line-height: ${value};\n}\n`;
+    }
+
+    return output;
+  }
+
+  generateFooter(): string {
+    return '/* ===================== */\n\n';
+  }
+}

package/src/tokens.ts

@@ -93,6 +93,28 @@ export const FontSizes: Record<FontSizeType, string> = {
   32: '32',
 };
 
+type FontWeightType = '300' | '400' | '500' | '700' | '900' | 'unset';
+
+export const FontWeights: Record<FontWeightType, string> = {
+  '300': '300',
+  '400': '400',
+  '500': '500',
+  '700': '700',
+  '900': '900',
+  unset: 'unset',
+};
+
+type LineHeightType = '12' | '16' | '20' | '24' | '32' | 'unset';
+
+export const LineHeights: Record<LineHeightType, string> = {
+  '12': '12',
+  '16': '16',
+  '20': '20',
+  '24': '24',
+  '32': '32',
+  unset: 'unset',
+};
+
 type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 
 export const FlexDirections: Record<FlexDirectionType, string> = {
@@ -101,3 +123,28 @@ export const FlexDirections: Record<FlexDirectionType, string> = {
   column: 'column',
   'column-reverse': 'column-reverse',
 };
+
+type ColorsType =
+  | 'white'
+  | 'gray-100'
+  | 'gray-200'
+  | 'gray-300'
+  | 'gray-400'
+  | 'gray-500'
+  | 'gray-600'
+  | 'gray-700'
+  | 'gray-800'
+  | 'black';
+
+export const Colors: Record<ColorsType, string> = {
+  white: '#F9FAFB',
+  'gray-100': '#F3F4F6',
+  'gray-200': '#E5E7EB',
+  'gray-300': '#D1D5DB',
+  'gray-400': '#9CA3AF',
+  'gray-500': '#6B7280',
+  'gray-600': '#4B5563',
+  'gray-700': '#374151',
+  'gray-800': '#1F2937',
+  black: '#111827',
+};