├── .gitignore
├── LICENSE
├── README.md
├── dist
    └── main.0.0.1.css
├── images
    ├── favicon.png
    └── og.png
├── index.html
├── lib
    ├── main.css
    ├── reset.css
    ├── variables
    │   ├── colors.css
    │   ├── fonts.css
    │   ├── units.css
    │   └── variables.css
    └── views
    │   ├── button.css
    │   ├── list.css
    │   ├── stacks.css
    │   ├── text.css
    │   └── views.css
├── package.json
└── postcss.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | bun.lockb
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 lil software, LLC
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # DesignKit
 2 | 
 3 | [kit.design](https://kit.design)
 4 | 
 5 | A declarative syntax for the web. No frameworks, just plug and play.
 6 | 
 7 | It's simple:
 8 | 
 9 | **CSS**
10 | 
11 | ```
12 | <link href="https://kit.design/dist/main.0.0.1.css" rel="stylesheet" />
13 | ```
14 | 
15 | **HTML**
16 | 
17 | ```
18 | <vstack padding>
19 |   <text font="large-title">Hello, World!</text>
20 | </vstack>
21 | ```
22 | 
23 | ---
24 | 
25 | Learn more at [kit.design](https://kit.design)
26 | 
27 | ---
28 | 
29 | By [lil software](https://lil.software) and [Jordan Singer](https://twitter.com/jsngr)
30 | 


--------------------------------------------------------------------------------
/dist/main.0.0.1.css:
--------------------------------------------------------------------------------
1 | :root,[color-scheme=light]{--color-white:#fff;--color-black:#000;--color-red:#ff3b30;--color-orange:#ff9500;--color-yellow:#ffc107;--color-green:#34c759;--color-mint:#00c7be;--color-teal:#30c1c7;--color-cyan:#32d7e5;--color-blue:#007aff;--color-indigo:#5856d6;--color-purple:#af52de;--color-pink:#ff2d55;--color-brown:#a6875e;--color-gray:#8e8e93;--color-gray2:#aeaeb2;--color-gray3:#c7c7cc;--color-gray4:#d1d1d6;--color-gray5:#e5e5ea;--color-gray6:#f2f2f7}[color-scheme=dark]{--color-red:#ff453a;--color-orange:#ff9f0a;--color-yellow:#ffd60a;--color-green:#30d158;--color-mint:#64d2ff;--color-teal:#0a84ff;--color-cyan:#64d2ff;--color-blue:#0a84ff;--color-indigo:#5856d6;--color-purple:#bf5af2;--color-pink:#ff375f;--color-brown:#b98b6d;--color-gray:#8e8e93;--color-gray2:#636366;--color-gray3:#48484a;--color-gray4:#3a3a3c;--color-gray5:#2c2c2e;--color-gray6:#1c1c1e}[foreground=white]{color:var(--color-white)}[background=white]{background-color:var(--color-white)}[foreground=black]{color:var(--color-black)}[background=black]{background-color:var(--color-black)}[foreground=red]{color:var(--color-red)}[background=red]{background-color:var(--color-red)}[foreground=orange]{color:var(--color-orange)}[background=orange]{background-color:var(--color-orange)}[foreground=yellow]{color:var(--color-yellow)}[background=yellow]{background-color:var(--color-yellow)}[foreground=green]{color:var(--color-green)}[background=green]{background-color:var(--color-green)}[foreground=mint]{color:var(--color-mint)}[background=mint]{background-color:var(--color-mint)}[foreground=teal]{color:var(--color-teal)}[background=teal]{background-color:var(--color-teal)}[foreground=cyan]{color:var(--color-cyan)}[background=cyan]{background-color:var(--color-cyan)}[foreground=blue]{color:var(--color-blue)}[background=blue]{background-color:var(--color-blue)}[foreground=indigo]{color:var(--color-indigo)}[background=indigo]{background-color:var(--color-indigo)}[foreground=purple]{color:var(--color-purple)}[background=purple]{background-color:var(--color-purple)}[foreground=pink]{color:var(--color-pink)}[background=pink]{background-color:var(--color-pink)}[foreground=brown]{color:var(--color-brown)}[background=brown]{background-color:var(--color-brown)}[foreground=gray]{color:var(--color-gray)}[background=gray]{background-color:var(--color-gray)}[foreground=gray2]{color:var(--color-gray2)}[background=gray2]{background-color:var(--color-gray2)}[foreground=gray3]{color:var(--color-gray3)}[background=gray3]{background-color:var(--color-gray3)}[foreground=gray4]{color:var(--color-gray4)}[background=gray4]{background-color:var(--color-gray4)}[foreground=gray5]{color:var(--color-gray5)}[background=gray5]{background-color:var(--color-gray5)}[foreground=gray6]{color:var(--color-gray6)}[background=gray6]{background-color:var(--color-gray6)}:root{--font-size:16px;--font-body:1rem;--font-large-title:3rem;--font-title1:2rem;--font-title2:1.5rem;--font-title3:1.25rem;--font-headline:1.0625rem;--font-callout:0.9375rem;--font-subheadline:0.9375rem;--font-footnote:0.8125rem;--font-caption1:0.75rem;--font-caption2:0.6875rem;--padding-small:4px;--padding:12px;--padding-large:24px;--padding-xlarge:48px;--gap:12px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:var(--font-size)}[padding=""]{padding:var(--padding)}[padding-small=""]{--padding:var(--padding-small)}[padding-large=""]{--padding:var(--padding-large)}[padding-xlarge=""]{--padding:var(--padding-xlarge)}[padding=top]{padding-top:var(--padding)}[padding=bottom]{padding-bottom:var(--padding)}[padding=leading]{padding-left:var(--padding)}[padding=horizontal],[padding=trailing]{padding-right:var(--padding)}[padding=horizontal]{padding-left:var(--padding)}[padding=vertical]{padding-bottom:var(--padding);padding-top:var(--padding)}hstack,vstack{align-items:center;display:flex;gap:var(--gap)}hstack{flex-direction:row}hstack:has(spacer){width:100%}hstack[alignment=top]{align-items:start}hstack[alignment=center]{align-items:center}hstack[alignment=bottom]{align-items:end}vstack{flex-direction:column}vstack:has(spacer){height:100%}vstack[alignment=leading]{align-items:start}vstack[alignment=center]{align-items:center}vstack[alignment=trailing]{align-items:end}zstack{position:relative}zstack>*{position:absolute}zstack[alignment=bottom-leading]>*{bottom:0;left:0}spacer{flex:1}divider{background-color:var(--color-gray)}vstack divider{height:1px;width:100%}hstack divider{height:100%;width:1px}[font=body],text{font-size:var(--font-body)}[font=large-title]{font-size:var(--font-large-title);font-weight:500}[font=title1]{font-size:var(--font-title1);font-weight:500}[font=title2]{font-size:var(--font-title2);font-weight:500}[font=title3]{font-size:var(--font-title3);font-weight:500}[font=headline]{font-size:var(--font-headline);font-weight:500}[font=callout]{font-size:var(--font-callout)}[font=subheadline]{font-size:var(--font-subheadline);font-weight:500}[font=footnote]{font-size:var(--font-footnote)}[font=caption1]{font-size:var(--font-caption1)}[font=caption2]{font-size:var(--font-caption2)}.button,button{background-color:var(--color-blue);border-radius:999px;color:var(--color-white);cursor:pointer;font-size:var(--font-body);padding:var(--padding-small) var(--padding)}list{display:flex;flex-direction:column;width:100%}list>*{border-bottom:1px solid var(--color-gray);flex:1;padding:var(--padding) 0}list>:last-child{border-bottom:none}*{-webkit-font-smoothing:antialiased;border:none;box-sizing:border-box;list-style:none;margin:0;outline:none;padding:0;text-decoration:none}body,html{height:100%}body{display:flex;flex-direction:column}


--------------------------------------------------------------------------------
/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lil-software/designkit/33a684fe980eaff17d19839c4b8534c6d228e04f/images/favicon.png


--------------------------------------------------------------------------------
/images/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lil-software/designkit/33a684fe980eaff17d19839c4b8534c6d228e04f/images/og.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
  6 |     <title>DesignKit</title>
  7 |     <meta name="description" content="A declarative syntax for the web." />
  8 |     <meta property="og:title" content="DesignKit" />
  9 |     <meta
 10 |       property="og:description"
 11 |       content="A declarative syntax for the web."
 12 |     />
 13 |     <meta property="og:image" content="https://kit.design/images/og.png" />
 14 |     <meta name="twitter:card" content="summary_large_image" />
 15 |     <meta name="twitter:title" content="DesignKit" />
 16 |     <meta
 17 |       name="twitter:description"
 18 |       content="A declarative syntax for the web."
 19 |     />
 20 |     <meta name="twitter:image" content="https://kit.design/images/og.png" />
 21 |     <link href="lib/main.css" rel="stylesheet" />
 22 |     <link rel="icon" type="image/png" href="images/favicon.png" />
 23 |   </head>
 24 |   <body>
 25 |     <vstack alignment="leading" padding>
 26 |       <hstack>
 27 |         <text font="headline">DesignKit</text>
 28 |         <text foreground="gray">Preview</text>
 29 |       </hstack>
 30 |       <text font="subheadline" foreground="gray"
 31 |         >A declarative syntax for the web. No frameworks, just plug and
 32 |         play.</text
 33 |       >
 34 |       <divider></divider>
 35 |       <list padding>
 36 |         <text font="headline">Elements</text>
 37 |         <hstack>
 38 |           <text font="headline">vstack</text>
 39 |           <text foreground="gray">A vertical stack of elements.</text>
 40 |         </hstack>
 41 |         <hstack>
 42 |           <text font="headline">hstack</text>
 43 |           <text foreground="gray">A horizontal stack of elements.</text>
 44 |         </hstack>
 45 |         <hstack>
 46 |           <text font="headline">zstack</text>
 47 |           <text foreground="gray">An overlaid stack of elements.</text>
 48 |         </hstack>
 49 |         <hstack>
 50 |           <text font="headline">list</text>
 51 |           <text foreground="gray">A list of elements.</text>
 52 |         </hstack>
 53 |         <hstack>
 54 |           <text font="headline">button</text>
 55 |           <text foreground="gray">A button.</text>
 56 |         </hstack>
 57 |       </list>
 58 | 
 59 |       <list padding>
 60 |         <text font="headline">Attributes</text>
 61 |         <hstack alignment="top">
 62 |           <text font="headline">padding</text>
 63 |           <text foreground="gray"
 64 |             >top, bottom, leading, trailing, horizontal, vertical</text
 65 |           >
 66 |         </hstack>
 67 |         <hstack alignment="top">
 68 |           <text font="headline">alignment</text>
 69 |           <text foreground="gray"
 70 |             >top, center, bottom, leading, center, trailing</text
 71 |           >
 72 |         </hstack>
 73 |         <hstack alignment="top">
 74 |           <text font="headline">font</text>
 75 |           <a href="#fonts" foreground="gray">See fonts</a>
 76 |         </hstack>
 77 |         <hstack>
 78 |           <text font="headline">foreground</text>
 79 |           <a href="#colors" foreground="gray">See colors</a>
 80 |         </hstack>
 81 |         <hstack>
 82 |           <text font="headline">background</text>
 83 |           <a href="#colors" foreground="gray">See colors</a>
 84 |         </hstack>
 85 |       </list>
 86 | 
 87 |       <list padding id="fonts">
 88 |         <text font="headline">Fonts</text>
 89 |         <text font="caption2">caption2</text>
 90 |         <text font="caption1">caption1</text>
 91 |         <text font="subheadline">subheadline</text>
 92 |         <text font="body">body</text>
 93 |         <text font="headline">headline</text>
 94 |         <text font="title3">title3</text>
 95 |         <text font="title2">title2</text>
 96 |         <text font="title1">title1</text>
 97 |         <text font="large-title">large title</text>
 98 |       </list>
 99 | 
100 |       <list padding id="colors">
101 |         <text font="headline">Colors</text>
102 |         <text foreground="gray">Gray</text>
103 |         <text foreground="gray2">Gray 2</text>
104 |         <text foreground="gray3">Gray 3</text>
105 |         <text foreground="gray4">Gray 4</text>
106 |         <text foreground="gray5">Gray 5</text>
107 |         <text foreground="gray6">Gray 6</text>
108 |         <text foreground="red">Red</text>
109 |         <text foreground="orange">Orange</text>
110 |         <text foreground="yellow">Yellow</text>
111 |         <text foreground="green">Green</text>
112 |         <text foreground="blue">Blue</text>
113 |         <text foreground="indigo">Indigo</text>
114 |         <text foreground="purple">Purple</text>
115 |         <text foreground="pink">Pink</text>
116 |       </list>
117 |       <divider></divider>
118 |       <hstack alignment="center">
119 |         <a href="https://github.com/lil-software/designkit" class="button"
120 |           >GitHub</a
121 |         >
122 |         <a href="https://twitter.com/lildotinc" class="button">Twitter</a>
123 |       </hstack>
124 |       <a href="https://lil.software" font="caption1" foreground="gray"
125 |         >Made by lil</a
126 |       >
127 |     </vstack>
128 |   </body>
129 | </html>
130 | 


--------------------------------------------------------------------------------
/lib/main.css:
--------------------------------------------------------------------------------
1 | /* Imports */
2 | @import "variables/variables.css";
3 | @import "views/views.css";
4 | @import "reset.css";
5 | 


--------------------------------------------------------------------------------
/lib/reset.css:
--------------------------------------------------------------------------------
 1 | /* Reset */
 2 | * {
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   list-style: none;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   box-sizing: border-box;
 8 |   outline: none;
 9 |   border: none;
10 |   text-decoration: none;
11 | }
12 | 
13 | html,
14 | body {
15 |   height: 100%;
16 | }
17 | 
18 | body {
19 |   display: flex;
20 |   flex-direction: column;
21 | }
22 | 


--------------------------------------------------------------------------------
/lib/variables/colors.css:
--------------------------------------------------------------------------------
  1 | /* Light */
  2 | :root,
  3 | [color-scheme="light"] {
  4 |   --color-white: #ffffff;
  5 |   --color-black: #000000;
  6 |   --color-red: #ff3b30;
  7 |   --color-orange: #ff9500;
  8 |   --color-yellow: #ffc107;
  9 |   --color-green: #34c759;
 10 |   --color-mint: #00c7be;
 11 |   --color-teal: #30c1c7;
 12 |   --color-cyan: #32d7e5;
 13 |   --color-blue: #007aff;
 14 |   --color-indigo: #5856d6;
 15 |   --color-purple: #af52de;
 16 |   --color-pink: #ff2d55;
 17 |   --color-brown: #a6875e;
 18 |   --color-gray: #8e8e93;
 19 |   --color-gray2: #aeaeb2;
 20 |   --color-gray3: #c7c7cc;
 21 |   --color-gray4: #d1d1d6;
 22 |   --color-gray5: #e5e5ea;
 23 |   --color-gray6: #f2f2f7;
 24 | }
 25 | 
 26 | /* Dark */
 27 | [color-scheme="dark"] {
 28 |   --color-red: #ff453a;
 29 |   --color-orange: #ff9f0a;
 30 |   --color-yellow: #ffd60a;
 31 |   --color-green: #30d158;
 32 |   --color-mint: #64d2ff;
 33 |   --color-teal: #0a84ff;
 34 |   --color-cyan: #64d2ff;
 35 |   --color-blue: #0a84ff;
 36 |   --color-indigo: #5856d6;
 37 |   --color-purple: #bf5af2;
 38 |   --color-pink: #ff375f;
 39 |   --color-brown: #b98b6d;
 40 |   --color-gray: #8e8e93;
 41 |   --color-gray2: #636366;
 42 |   --color-gray3: #48484a;
 43 |   --color-gray4: #3a3a3c;
 44 |   --color-gray5: #2c2c2e;
 45 |   --color-gray6: #1c1c1e;
 46 | }
 47 | 
 48 | /* White */
 49 | [foreground="white"] {
 50 |   color: var(--color-white);
 51 | }
 52 | [background="white"] {
 53 |   background-color: var(--color-white);
 54 | }
 55 | 
 56 | /* Black */
 57 | [foreground="black"] {
 58 |   color: var(--color-black);
 59 | }
 60 | [background="black"] {
 61 |   background-color: var(--color-black);
 62 | }
 63 | 
 64 | /* Red */
 65 | [foreground="red"] {
 66 |   color: var(--color-red);
 67 | }
 68 | [background="red"] {
 69 |   background-color: var(--color-red);
 70 | }
 71 | 
 72 | /* Orange */
 73 | [foreground="orange"] {
 74 |   color: var(--color-orange);
 75 | }
 76 | [background="orange"] {
 77 |   background-color: var(--color-orange);
 78 | }
 79 | 
 80 | /* Yellow */
 81 | [foreground="yellow"] {
 82 |   color: var(--color-yellow);
 83 | }
 84 | [background="yellow"] {
 85 |   background-color: var(--color-yellow);
 86 | }
 87 | 
 88 | /* Green */
 89 | [foreground="green"] {
 90 |   color: var(--color-green);
 91 | }
 92 | [background="green"] {
 93 |   background-color: var(--color-green);
 94 | }
 95 | 
 96 | /* Mint */
 97 | [foreground="mint"] {
 98 |   color: var(--color-mint);
 99 | }
100 | [background="mint"] {
101 |   background-color: var(--color-mint);
102 | }
103 | 
104 | /* Teal */
105 | [foreground="teal"] {
106 |   color: var(--color-teal);
107 | }
108 | [background="teal"] {
109 |   background-color: var(--color-teal);
110 | }
111 | 
112 | /* Cyan */
113 | [foreground="cyan"] {
114 |   color: var(--color-cyan);
115 | }
116 | [background="cyan"] {
117 |   background-color: var(--color-cyan);
118 | }
119 | 
120 | /* Blue */
121 | [foreground="blue"] {
122 |   color: var(--color-blue);
123 | }
124 | [background="blue"] {
125 |   background-color: var(--color-blue);
126 | }
127 | 
128 | /* Indigo */
129 | [foreground="indigo"] {
130 |   color: var(--color-indigo);
131 | }
132 | [background="indigo"] {
133 |   background-color: var(--color-indigo);
134 | }
135 | 
136 | /* Purple */
137 | [foreground="purple"] {
138 |   color: var(--color-purple);
139 | }
140 | [background="purple"] {
141 |   background-color: var(--color-purple);
142 | }
143 | 
144 | /* Pink */
145 | [foreground="pink"] {
146 |   color: var(--color-pink);
147 | }
148 | [background="pink"] {
149 |   background-color: var(--color-pink);
150 | }
151 | 
152 | /* Brown */
153 | [foreground="brown"] {
154 |   color: var(--color-brown);
155 | }
156 | [background="brown"] {
157 |   background-color: var(--color-brown);
158 | }
159 | 
160 | /* Gray */
161 | [foreground="gray"] {
162 |   color: var(--color-gray);
163 | }
164 | [background="gray"] {
165 |   background-color: var(--color-gray);
166 | }
167 | 
168 | /* Gray2 */
169 | [foreground="gray2"] {
170 |   color: var(--color-gray2);
171 | }
172 | [background="gray2"] {
173 |   background-color: var(--color-gray2);
174 | }
175 | 
176 | /* Gray3 */
177 | [foreground="gray3"] {
178 |   color: var(--color-gray3);
179 | }
180 | [background="gray3"] {
181 |   background-color: var(--color-gray3);
182 | }
183 | 
184 | /* Gray4 */
185 | [foreground="gray4"] {
186 |   color: var(--color-gray4);
187 | }
188 | [background="gray4"] {
189 |   background-color: var(--color-gray4);
190 | }
191 | 
192 | /* Gray5 */
193 | [foreground="gray5"] {
194 |   color: var(--color-gray5);
195 | }
196 | [background="gray5"] {
197 |   background-color: var(--color-gray5);
198 | }
199 | 
200 | /* Gray6 */
201 | [foreground="gray6"] {
202 |   color: var(--color-gray6);
203 | }
204 | [background="gray6"] {
205 |   background-color: var(--color-gray6);
206 | }
207 | 


--------------------------------------------------------------------------------
/lib/variables/fonts.css:
--------------------------------------------------------------------------------
 1 | /* Defaults */
 2 | :root {
 3 |   --font-size: 16px;
 4 |   font-size: var(--font-size);
 5 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 6 | }
 7 | 
 8 | /* Fonts */
 9 | 
10 | :root {
11 |   --font-body: 1rem;
12 |   --font-large-title: 3rem;
13 |   --font-title1: 2rem;
14 |   --font-title2: 1.5rem;
15 |   --font-title3: 1.25rem;
16 |   --font-headline: 1.0625rem;
17 |   --font-callout: 0.9375rem;
18 |   --font-subheadline: 0.9375rem;
19 |   --font-footnote: 0.8125rem;
20 |   --font-caption1: 0.75rem;
21 |   --font-caption2: 0.6875rem;
22 | }
23 | 


--------------------------------------------------------------------------------
/lib/variables/units.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --padding-small: 4px;
 3 |   --padding: 12px;
 4 |   --padding-large: 24px;
 5 |   --padding-xlarge: 48px;
 6 |   --gap: 12px;
 7 | }
 8 | 
 9 | [padding=""] {
10 |   padding: var(--padding);
11 | }
12 | [padding-small=""] {
13 |   --padding: var(--padding-small);
14 | }
15 | [padding-large=""] {
16 |   --padding: var(--padding-large);
17 | }
18 | [padding-xlarge=""] {
19 |   --padding: var(--padding-xlarge);
20 | }
21 | 
22 | [padding="top"] {
23 |   padding-top: var(--padding);
24 | }
25 | [padding="bottom"] {
26 |   padding-bottom: var(--padding);
27 | }
28 | [padding="leading"] {
29 |   padding-left: var(--padding);
30 | }
31 | [padding="trailing"] {
32 |   padding-right: var(--padding);
33 | }
34 | [padding="horizontal"] {
35 |   padding-left: var(--padding);
36 |   padding-right: var(--padding);
37 | }
38 | [padding="vertical"] {
39 |   padding-top: var(--padding);
40 |   padding-bottom: var(--padding);
41 | }
42 | 


--------------------------------------------------------------------------------
/lib/variables/variables.css:
--------------------------------------------------------------------------------
1 | /* Imports */
2 | @import "colors.css";
3 | @import "fonts.css";
4 | @import "units.css";
5 | 


--------------------------------------------------------------------------------
/lib/views/button.css:
--------------------------------------------------------------------------------
 1 | button,
 2 | .button {
 3 |   font-size: var(--font-body);
 4 |   background-color: var(--color-blue);
 5 |   color: var(--color-white);
 6 |   cursor: pointer;
 7 |   padding: var(--padding-small) var(--padding);
 8 |   border-radius: 999px;
 9 | }
10 | 


--------------------------------------------------------------------------------
/lib/views/list.css:
--------------------------------------------------------------------------------
 1 | list {
 2 |   display: flex;
 3 |   width: 100%;
 4 |   flex-direction: column;
 5 | }
 6 | list > * {
 7 |   flex: 1;
 8 |   border-bottom: 1px solid var(--color-gray);
 9 |   padding: var(--padding) 0;
10 | }
11 | list > *:last-child {
12 |   border-bottom: none;
13 | }
14 | 


--------------------------------------------------------------------------------
/lib/views/stacks.css:
--------------------------------------------------------------------------------
 1 | /* Defaults */
 2 | hstack,
 3 | vstack {
 4 |   display: flex;
 5 |   align-items: center;
 6 |   gap: var(--gap);
 7 | }
 8 | 
 9 | /* HStack */
10 | hstack {
11 |   flex-direction: row;
12 | }
13 | hstack:has(spacer) {
14 |   width: 100%;
15 | }
16 | hstack[alignment="top"] {
17 |   align-items: start;
18 | }
19 | hstack[alignment="center"] {
20 |   align-items: center;
21 | }
22 | hstack[alignment="bottom"] {
23 |   align-items: end;
24 | }
25 | 
26 | /* VStack */
27 | vstack {
28 |   flex-direction: column;
29 | }
30 | vstack:has(spacer) {
31 |   height: 100%;
32 | }
33 | vstack[alignment="leading"] {
34 |   align-items: start;
35 | }
36 | vstack[alignment="center"] {
37 |   align-items: center;
38 | }
39 | vstack[alignment="trailing"] {
40 |   align-items: end;
41 | }
42 | 
43 | /* ZStack */
44 | zstack {
45 |   position: relative;
46 | }
47 | 
48 | zstack > * {
49 |   position: absolute;
50 | }
51 | 
52 | zstack[alignment="bottom-leading"] > * {
53 |   bottom: 0;
54 |   left: 0;
55 | }
56 | 
57 | /* Spacer */
58 | spacer {
59 |   flex: 1;
60 | }
61 | 
62 | /* Divider */
63 | divider {
64 |   background-color: var(--color-gray);
65 | }
66 | 
67 | vstack divider {
68 |   width: 100%;
69 |   height: 1px;
70 | }
71 | 
72 | hstack divider {
73 |   width: 1px;
74 |   height: 100%;
75 | }
76 | 


--------------------------------------------------------------------------------
/lib/views/text.css:
--------------------------------------------------------------------------------
 1 | text,
 2 | [font="body"] {
 3 |   font-size: var(--font-body);
 4 | }
 5 | [font="large-title"] {
 6 |   font-size: var(--font-large-title);
 7 |   font-weight: 500;
 8 | }
 9 | [font="title1"] {
10 |   font-size: var(--font-title1);
11 |   font-weight: 500;
12 | }
13 | [font="title2"] {
14 |   font-size: var(--font-title2);
15 |   font-weight: 500;
16 | }
17 | [font="title3"] {
18 |   font-size: var(--font-title3);
19 |   font-weight: 500;
20 | }
21 | [font="headline"] {
22 |   font-size: var(--font-headline);
23 |   font-weight: 500;
24 | }
25 | [font="callout"] {
26 |   font-size: var(--font-callout);
27 | }
28 | [font="subheadline"] {
29 |   font-size: var(--font-subheadline);
30 |   font-weight: 500;
31 | }
32 | [font="footnote"] {
33 |   font-size: var(--font-footnote);
34 | }
35 | [font="caption1"] {
36 |   font-size: var(--font-caption1);
37 | }
38 | [font="caption2"] {
39 |   font-size: var(--font-caption2);
40 | }
41 | 


--------------------------------------------------------------------------------
/lib/views/views.css:
--------------------------------------------------------------------------------
1 | /* Imports */
2 | @import "stacks.css";
3 | @import "text.css";
4 | @import "button.css";
5 | @import "list.css";
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "DesignKit",
 3 |   "version": "0.0.1",
 4 |   "dependencies": {
 5 |     "cssnano": "^6.0.1",
 6 |     "postcss-cli": "^10.1.0",
 7 |     "postcss-import": "^15.1.0"
 8 |   },
 9 |   "scripts": {
10 |     "bundle": "postcss lib/main.css -o dist/main.$npm_package_version.css"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: [
3 |         require('postcss-import'),
4 |         require('cssnano')({
5 |             preset: 'default',
6 |         }),
7 |     ],
8 | };


--------------------------------------------------------------------------------