@lottecode/lottecss 0.0.2 → 0.0.4

package/README.md

@@ -25,11 +25,11 @@ That's it. Your semantic HTML is now styled.
 
 ---
 
-## For AI Assistants (Claude, etc.)
+## For AI assistants (Claude, etc.)
 
 If you are an AI assistant generating markup for a project that uses lottecss, read this section carefully.
 
-### The Core Rule
+### The core rule
 
 **Do not style anything.** lottecss does it for you. Your job is to write correct, semantic HTML.
 
@@ -42,7 +42,7 @@ If you are an AI assistant generating markup for a project that uses lottecss, r
 - Use `.card` class for card-like containers
 - Use basic Tailwind utilities (`flex`, `grid`, `gap-*`, `p-*`, `m-*`) for layout only
 
-### Do Not
+### Do not
 
 - Add `style=""` attributes to any element
 - Add visual classes (`text-xl`, `text-blue-500`, `font-bold`, `bg-gray-100`, etc.)
@@ -87,13 +87,13 @@ If you are an AI assistant generating markup for a project that uses lottecss, r
 <div class="card-header">Not a real element</div>
 ```
 
-### If Something Looks Wrong
+### If something looks wrong
 
 Choose a different semantic element — don't add styling. The element you picked is probably wrong for that context.
 
 ---
 
-## What lottecss Styles
+## What lottecss styles
 
 | Module | What it covers |
 |---|---|

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@lottecode/lottecss",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "out of the box design and styling for your semantic markup",
   "type": "module",
   "main": "styles.css",
   "style": "styles.css",
   "files": [
     "styles.css",
-    "src/css"
+    "src/css/**"
   ],
   "exports": {
     "./styles.css": "./styles.css"

package/src/css/accordion.css

@@ -0,0 +1,73 @@
+.AccordionRoot {
+  border: 1px solid var(--color-border);
+}
+.AccordionItem {
+  border-bottom: 1px solid var(--color-border);
+  overflow: hidden;
+}
+.AccordionItem h2 {
+  font-size: 0.825rem;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+}
+.AccordionItem p + h2 {
+  padding-top: 1rem;
+}
+.AccordionItem p + p {
+  padding-top: 1rem;
+}
+.AccordionItem:focus-within {
+  position: relative;
+  z-index: 1;
+}
+.AccordionHeader {
+  display: flex;
+  margin-bottom: 0.25rem;
+}
+.AccordionTrigger {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 400;
+  text-transform: capitalize;
+  font-size: 0.825rem;
+  padding: 0.5rem;
+}
+.AccordionTrigger:hover {
+  border: 1px solid var(--color-foreground);
+}
+.AccordionContentText {
+  background-color: var(--color-surface);
+  padding: 0.5rem;
+}
+.AccordionContent[data-state="open"] {
+  animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionContent[data-state="closed"] {
+  animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionChevron {
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+.AccordionTrigger[data-state="open"] > .AccordionChevron {
+  transform: rotate(180deg);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/css/button.css

@@ -0,0 +1,53 @@
+body {
+  & button,
+  & input[type="button"],
+  & button[type="submit"] {
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    padding: 0.55rem 1.5rem;
+    line-height: 1.5;
+    border-radius: 2rem;
+    transition:
+      color 0.15s ease-in-out,
+      background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out;
+    cursor: pointer;
+  }
+
+  & button,
+  & input[type="button"],
+  & button[type="submit"] {
+    color: var(--color-background);
+    background-color: var(--color-foreground);
+  }
+
+  & button:hover,
+  & input[type="button"]:hover,
+  & button[type="submit"]:hover {
+    color: var(--color-foreground);
+    background-color: var(--color-highlight);
+  }
+
+  /* Clerk button overrides */
+  & .cl-formButtonPrimary,
+  & .cl-formButtonPrimary span {
+    color: white !important;
+    border-radius: 2rem !important;
+  }
+
+  & [class*="cl-"] * {
+    margin-bottom: 0 !important;
+  }
+
+  /* Disabled state */
+
+  & button:disabled,
+  & input:disabled {
+    opacity: 0.65;
+    cursor: not-allowed;
+  }
+}

package/src/css/card.css

@@ -0,0 +1,12 @@
+.card {
+  background-color: var(--color-background);
+  border: 1px solid var(--color-border);
+  padding: 1rem;
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  /*background-color: var(--color-surface);*/
+  /*transform: translateY(-2px);*/
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}

package/src/css/colors.css

@@ -0,0 +1,124 @@
+/* Colors Styles */
+
+:root {
+  --color-background: #fffcf1;
+  --color-foreground: #121212;
+  --color-surface: #fff;
+  --color-border: #121212;
+  --color-accent: #0c0;
+  --color-highlight: #fceaf5;
+  --color-info: #79bce8;
+  --color-success: #59c07d;
+  --color-warning: #ffd24d;
+  --color-error: #f26c6c;
+  --color-sage: #c8d9d1;
+}
+
+.theme-dark {
+  --color-background: #121212;
+  --color-foreground: #f5f5f5;
+  --color-surface: #130f40;
+  --color-border: #e0bcd3;
+  --color-accent: #fceaf5;
+  --color-highlight: #94e59c;
+  --color-info: #3d87b5;
+  --color-success: #2e8c51;
+  --color-warning: #d9a305;
+  --color-error: #c13d3d;
+  --color-sage: #c8d9d1;
+}
+
+/* Opacity/Transparency */
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-40 {
+  opacity: 0.4;
+}
+
+.opacity-20 {
+  opacity: 0.2;
+}
+
+/* Background Colors */
+.bg-background {
+  background-color: var(--color-background);
+}
+
+.bg-foreground {
+  background-color: var(--color-foreground);
+}
+
+.bg-surface {
+  background-color: var(--color-surface);
+}
+
+.bg-border {
+  background-color: var(--color-border);
+}
+
+.bg-accent {
+  background-color: var(--color-accent);
+}
+
+.bg-info {
+  background-color: var(--color-info);
+}
+
+.bg-success {
+  background-color: var(--color-success);
+}
+
+.bg-warning {
+  background-color: var(--color-warning);
+}
+
+.bg-error {
+  background-color: var(--color-error);
+}
+
+/* Text Colors */
+.text-background {
+  color: var(--color-background);
+}
+
+.text-foreground {
+  color: var(--color-foreground);
+}
+
+.text-surface {
+  color: var(--color-surface);
+}
+
+.text-border {
+  color: var(--color-border);
+}
+
+.text-accent {
+  color: var(--color-accent);
+}
+
+.text-info {
+  color: var(--color-info);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-error {
+  color: var(--color-error);
+}

package/src/css/column.css

@@ -0,0 +1,330 @@
+/* Multi-Column Layout */
+
+/* Column Count */
+.columns-1 {
+  column-count: 1;
+}
+
+.columns-2 {
+  column-count: 2;
+}
+
+.columns-3 {
+  column-count: 3;
+}
+
+.columns-4 {
+  column-count: 4;
+}
+
+.columns-5 {
+  column-count: 5;
+}
+
+.columns-6 {
+  column-count: 6;
+}
+
+/* Column Width */
+.columns-xs {
+  column-width: 10rem;
+}
+
+.columns-sm {
+  column-width: 15rem;
+}
+
+.columns-md {
+  column-width: 20rem;
+}
+
+.columns-lg {
+  column-width: 25rem;
+}
+
+.columns-xl {
+  column-width: 30rem;
+}
+
+/* Column Gap */
+.column-gap-0 {
+  column-gap: 0;
+}
+
+.column-gap-1 {
+  column-gap: 0.25rem;
+}
+
+.column-gap-2 {
+  column-gap: 0.5rem;
+}
+
+.column-gap-4 {
+  column-gap: 1rem;
+}
+
+.column-gap-6 {
+  column-gap: 1.5rem;
+}
+
+.column-gap-8 {
+  column-gap: 2rem;
+}
+
+/* Column Rule */
+.column-rule {
+  column-rule: 1px solid var(--color-border);
+}
+
+.column-rule-none {
+  column-rule: none;
+}
+
+.column-rule-dotted {
+  column-rule-style: dotted;
+}
+
+.column-rule-dashed {
+  column-rule-style: dashed;
+}
+
+.column-rule-solid {
+  column-rule-style: solid;
+}
+
+.column-rule-double {
+  column-rule-style: double;
+}
+
+/* Column Rule Width */
+.column-rule-1 {
+  column-rule-width: 1px;
+}
+
+.column-rule-2 {
+  column-rule-width: 2px;
+}
+
+.column-rule-4 {
+  column-rule-width: 4px;
+}
+
+/* Column Rule Color - using CSS variables */
+.column-rule-primary {
+  column-rule-color: var(--color-primary);
+}
+
+.column-rule-secondary {
+  column-rule-color: var(--color-secondary);
+}
+
+.column-rule-muted {
+  column-rule-color: var(--color-muted);
+}
+
+/* Column Span */
+.column-span-all {
+  column-span: all;
+}
+
+.column-span-none {
+  column-span: none;
+}
+
+/* Column Fill */
+.column-fill-auto {
+  column-fill: auto;
+}
+
+.column-fill-balance {
+  column-fill: balance;
+}
+
+/* Break Inside */
+.break-inside-auto {
+  break-inside: auto;
+}
+
+.break-inside-avoid {
+  break-inside: avoid;
+}
+
+.break-inside-avoid-column {
+  break-inside: avoid-column;
+}
+
+/* Break Before */
+.break-before-auto {
+  break-before: auto;
+}
+
+.break-before-column {
+  break-before: column;
+}
+
+.break-before-avoid-column {
+  break-before: avoid-column;
+}
+
+/* Break After */
+.break-after-auto {
+  break-after: auto;
+}
+
+.break-after-column {
+  break-after: column;
+}
+
+.break-after-avoid-column {
+  break-after: avoid-column;
+}
+
+/* Responsive Column Utilities */
+@media (min-width: 640px) {
+  .sm\:columns-1 {
+    column-count: 1;
+  }
+  .sm\:columns-2 {
+    column-count: 2;
+  }
+  .sm\:columns-3 {
+    column-count: 3;
+  }
+  .sm\:columns-4 {
+    column-count: 4;
+  }
+  .sm\:columns-5 {
+    column-count: 5;
+  }
+  .sm\:columns-6 {
+    column-count: 6;
+  }
+
+  .sm\:columns-xs {
+    column-width: 10rem;
+  }
+  .sm\:columns-sm {
+    column-width: 15rem;
+  }
+  .sm\:columns-md {
+    column-width: 20rem;
+  }
+  .sm\:columns-lg {
+    column-width: 25rem;
+  }
+  .sm\:columns-xl {
+    column-width: 30rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:columns-1 {
+    column-count: 1;
+  }
+  .md\:columns-2 {
+    column-count: 2;
+  }
+  .md\:columns-3 {
+    column-count: 3;
+  }
+  .md\:columns-4 {
+    column-count: 4;
+  }
+  .md\:columns-5 {
+    column-count: 5;
+  }
+  .md\:columns-6 {
+    column-count: 6;
+  }
+
+  .md\:columns-xs {
+    column-width: 10rem;
+  }
+  .md\:columns-sm {
+    column-width: 15rem;
+  }
+  .md\:columns-md {
+    column-width: 20rem;
+  }
+  .md\:columns-lg {
+    column-width: 25rem;
+  }
+  .md\:columns-xl {
+    column-width: 30rem;
+  }
+
+  .md\:column-gap-0 {
+    column-gap: 0;
+  }
+  .md\:column-gap-1 {
+    column-gap: 0.25rem;
+  }
+  .md\:column-gap-2 {
+    column-gap: 0.5rem;
+  }
+  .md\:column-gap-4 {
+    column-gap: 1rem;
+  }
+  .md\:column-gap-6 {
+    column-gap: 1.5rem;
+  }
+  .md\:column-gap-8 {
+    column-gap: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:columns-1 {
+    column-count: 1;
+  }
+  .lg\:columns-2 {
+    column-count: 2;
+  }
+  .lg\:columns-3 {
+    column-count: 3;
+  }
+  .lg\:columns-4 {
+    column-count: 4;
+  }
+  .lg\:columns-5 {
+    column-count: 5;
+  }
+  .lg\:columns-6 {
+    column-count: 6;
+  }
+
+  .lg\:columns-xs {
+    column-width: 10rem;
+  }
+  .lg\:columns-sm {
+    column-width: 15rem;
+  }
+  .lg\:columns-md {
+    column-width: 20rem;
+  }
+  .lg\:columns-lg {
+    column-width: 25rem;
+  }
+  .lg\:columns-xl {
+    column-width: 30rem;
+  }
+
+  .lg\:column-gap-0 {
+    column-gap: 0;
+  }
+  .lg\:column-gap-1 {
+    column-gap: 0.25rem;
+  }
+  .lg\:column-gap-2 {
+    column-gap: 0.5rem;
+  }
+  .lg\:column-gap-4 {
+    column-gap: 1rem;
+  }
+  .lg\:column-gap-6 {
+    column-gap: 1.5rem;
+  }
+  .lg\:column-gap-8 {
+    column-gap: 2rem;
+  }
+}

package/src/css/editorial.css

@@ -0,0 +1,12 @@
+.editorial p,
+.editorial h1,
+.editorial h2,
+.editorial h3,
+.editorial h4,
+.editorial h5,
+.editorial h6,
+.editorial ul,
+.editorial ol,
+.editorial blockquote {
+    max-width: 400px;
+}

package/src/css/fonts.css

@@ -0,0 +1,46 @@
+/* Fonts */
+
+/* Font Variables */
+:root {
+  --font-cdn: "https://assets.lottecode.com";
+  --font-family-sans: "Berkeley Mono", monospace;
+  --font-family-mono: "Berkeley Mono", monospace;
+}
+
+/* Font Utility Classes */
+.font-sans {
+  font-family: var(--font-family-sans);
+}
+
+.font-mono {
+  font-family: var(--font-family-mono);
+}
+
+/* Berkeley Mono — https://berkeleygraphics.com/typefaces/berkeley-mono */
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Berkeley Mono";
+  src: url("https://assets.lottecode.com/fonts/BerkeleyMono-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+}