npm - ds-leobecker - Versions diffs - 0.1.0 → 0.2.0 - Mend

ds-leobecker 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/README.md +84 -14
package/dist/figma-variables.json +761 -0
package/dist/tokens.json +193 -0
package/dist/ui/alert.d.ts +9 -0
package/dist/ui/alert.d.ts.map +1 -0
package/dist/ui/alert.js +22 -0
package/dist/ui/badge.d.ts +10 -0
package/dist/ui/badge.d.ts.map +1 -0
package/dist/ui/badge.js +20 -0
package/dist/ui/button.d.ts +12 -0
package/dist/ui/button.d.ts.map +1 -0
package/dist/ui/button.js +33 -0
package/dist/ui/card.d.ts +9 -0
package/dist/ui/card.d.ts.map +1 -0
package/dist/ui/card.js +16 -0
package/dist/ui/checkbox.d.ts +5 -0
package/dist/ui/checkbox.d.ts.map +1 -0
package/dist/ui/checkbox.js +8 -0
package/dist/ui/dialog.d.ts +20 -0
package/dist/ui/dialog.d.ts.map +1 -0
package/dist/ui/dialog.js +22 -0
package/dist/ui/dropdown-menu.d.ts +28 -0
package/dist/ui/dropdown-menu.d.ts.map +1 -0
package/dist/ui/dropdown-menu.js +36 -0
package/dist/ui/form.d.ts +24 -0
package/dist/ui/form.d.ts.map +1 -0
package/dist/ui/form.js +65 -0
package/dist/ui/input.d.ts +4 -0
package/dist/ui/input.d.ts.map +1 -0
package/dist/ui/input.js +8 -0
package/dist/ui/label.d.ts +6 -0
package/dist/ui/label.d.ts.map +1 -0
package/dist/ui/label.js +9 -0
package/dist/ui/popover.d.ts +7 -0
package/dist/ui/popover.d.ts.map +1 -0
package/dist/ui/popover.js +10 -0
package/dist/ui/select.d.ts +14 -0
package/dist/ui/select.d.ts.map +1 -0
package/dist/ui/select.js +26 -0
package/dist/ui/table.d.ts +11 -0
package/dist/ui/table.d.ts.map +1 -0
package/dist/ui/table.js +20 -0
package/dist/ui/tabs.d.ts +8 -0
package/dist/ui/tabs.d.ts.map +1 -0
package/dist/ui/tabs.js +12 -0
package/dist/ui/tooltip.d.ts +8 -0
package/dist/ui/tooltip.d.ts.map +1 -0
package/dist/ui/tooltip.js +10 -0
package/package.json +81 -20
package/src/components/accent-dot.tsx +11 -0
package/src/components/background-pattern.tsx +36 -0
package/src/components/badge-dot.tsx +34 -0
package/src/components/index.ts +7 -0
package/src/components/pill.tsx +22 -0
package/src/components/stripe-button.tsx +49 -0
package/src/index.ts +1 -0
package/src/lib/utils.ts +6 -0
package/src/theme.css +63 -5
package/src/tokens/tokens.json +193 -0
package/guidelines/components/badge-dot.md +0 -33
package/guidelines/components/button.md +0 -39
package/guidelines/components/overview.md +0 -14
package/guidelines/foundations/color.md +0 -48
package/guidelines/foundations/motion.md +0 -37
package/guidelines/foundations/overview.md +0 -7
package/guidelines/foundations/radius.md +0 -19
package/guidelines/foundations/spacing.md +0 -36
package/guidelines/foundations/typography.md +0 -29
package/guidelines/overview.md +0 -26
package/guidelines/setup.md +0 -26

package/dist/figma-variables.json ADDED Viewed

@@ -0,0 +1,761 @@
+{
+  "collection": "Leo Becker Design System",
+  "modes": [
+    "dark",
+    "light"
+  ],
+  "variables": [
+    {
+      "name": "raw/orange-100",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9412,
+          "g": 0.3333,
+          "b": 0.1412
+        },
+        "light": {
+          "r": 0.9412,
+          "g": 0.3333,
+          "b": 0.1412
+        }
+      }
+    },
+    {
+      "name": "raw/orange-200",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.8902,
+          "g": 0.2902,
+          "b": 0.0941
+        },
+        "light": {
+          "r": 0.8902,
+          "g": 0.2902,
+          "b": 0.0941
+        }
+      }
+    },
+    {
+      "name": "raw/orange-300",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.8235,
+          "g": 0.2667,
+          "b": 0.1098
+        },
+        "light": {
+          "r": 0.8235,
+          "g": 0.2667,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "raw/teal-1000",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.0667,
+          "b": 0.0549
+        },
+        "light": {
+          "r": 0,
+          "g": 0.0667,
+          "b": 0.0549
+        }
+      }
+    },
+    {
+      "name": "raw/teal-900",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        },
+        "light": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "raw/teal-800",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        },
+        "light": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        }
+      }
+    },
+    {
+      "name": "raw/teal-700",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.2706,
+          "b": 0.2471
+        },
+        "light": {
+          "r": 0,
+          "g": 0.2706,
+          "b": 0.2471
+        }
+      }
+    },
+    {
+      "name": "raw/teal-600",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.3608,
+          "b": 0.3294
+        },
+        "light": {
+          "r": 0,
+          "g": 0.3608,
+          "b": 0.3294
+        }
+      }
+    },
+    {
+      "name": "raw/teal-500",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.1961,
+          "g": 0.4353,
+          "b": 0.4078
+        },
+        "light": {
+          "r": 0.1961,
+          "g": 0.4353,
+          "b": 0.4078
+        }
+      }
+    },
+    {
+      "name": "raw/teal-400",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.4314,
+          "g": 0.5412,
+          "b": 0.5137
+        },
+        "light": {
+          "r": 0.4314,
+          "g": 0.5412,
+          "b": 0.5137
+        }
+      }
+    },
+    {
+      "name": "raw/beige-50",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    },
+    {
+      "name": "raw/beige-100",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.8314,
+          "g": 0.7804,
+          "b": 0.6588
+        },
+        "light": {
+          "r": 0.8314,
+          "g": 0.7804,
+          "b": 0.6588
+        }
+      }
+    },
+    {
+      "name": "raw/beige-200",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        },
+        "light": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        }
+      }
+    },
+    {
+      "name": "raw/beige-300",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.6157,
+          "g": 0.6863,
+          "b": 0.6431
+        },
+        "light": {
+          "r": 0.6157,
+          "g": 0.6863,
+          "b": 0.6431
+        }
+      }
+    },
+    {
+      "name": "raw/green-500",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.4745,
+          "g": 0.8863,
+          "b": 0.4941
+        },
+        "light": {
+          "r": 0.4745,
+          "g": 0.8863,
+          "b": 0.4941
+        }
+      }
+    },
+    {
+      "name": "raw/red-500",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 1,
+          "g": 0.2941,
+          "b": 0.2941
+        },
+        "light": {
+          "r": 1,
+          "g": 0.2941,
+          "b": 0.2941
+        }
+      }
+    },
+    {
+      "name": "raw/yellow-500",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9608,
+          "g": 0.7725,
+          "b": 0.2588
+        },
+        "light": {
+          "r": 0.9608,
+          "g": 0.7725,
+          "b": 0.2588
+        }
+      }
+    },
+    {
+      "name": "raw/blue-500",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.2941,
+          "g": 0.6196,
+          "b": 1
+        },
+        "light": {
+          "r": 0.2941,
+          "g": 0.6196,
+          "b": 1
+        }
+      }
+    },
+    {
+      "name": "semantic/background",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.0667,
+          "b": 0.0549
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    },
+    {
+      "name": "semantic/background-secondary",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        },
+        "light": {
+          "r": 0.8314,
+          "g": 0.7804,
+          "b": 0.6588
+        }
+      }
+    },
+    {
+      "name": "semantic/background-tertiary",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        },
+        "light": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        }
+      }
+    },
+    {
+      "name": "semantic/foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        },
+        "light": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "semantic/foreground-strong",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        },
+        "light": {
+          "r": 0,
+          "g": 0.0667,
+          "b": 0.0549
+        }
+      }
+    },
+    {
+      "name": "semantic/foreground-muted",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.4314,
+          "g": 0.5412,
+          "b": 0.5137
+        },
+        "light": {
+          "r": 0.1961,
+          "g": 0.4353,
+          "b": 0.4078
+        }
+      }
+    },
+    {
+      "name": "semantic/primary",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9412,
+          "g": 0.3333,
+          "b": 0.1412
+        },
+        "light": {
+          "r": 0.9412,
+          "g": 0.3333,
+          "b": 0.1412
+        }
+      }
+    },
+    {
+      "name": "semantic/primary-hover",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.8902,
+          "g": 0.2902,
+          "b": 0.0941
+        },
+        "light": {
+          "r": 0.8235,
+          "g": 0.2667,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "semantic/primary-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.0667,
+          "b": 0.0549
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    },
+    {
+      "name": "semantic/border",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.2706,
+          "b": 0.2471
+        },
+        "light": {
+          "r": 0.6157,
+          "g": 0.6863,
+          "b": 0.6431
+        }
+      }
+    },
+    {
+      "name": "semantic/border-muted",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        },
+        "light": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        }
+      }
+    },
+    {
+      "name": "semantic/input",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        },
+        "light": {
+          "r": 0.8314,
+          "g": 0.7804,
+          "b": 0.6588
+        }
+      }
+    },
+    {
+      "name": "semantic/ring",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.8902,
+          "g": 0.2902,
+          "b": 0.0941
+        },
+        "light": {
+          "r": 0.8902,
+          "g": 0.2902,
+          "b": 0.0941
+        }
+      }
+    },
+    {
+      "name": "semantic/success",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.4745,
+          "g": 0.8863,
+          "b": 0.4941
+        },
+        "light": {
+          "r": 0.4745,
+          "g": 0.8863,
+          "b": 0.4941
+        }
+      }
+    },
+    {
+      "name": "semantic/error",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 1,
+          "g": 0.2941,
+          "b": 0.2941
+        },
+        "light": {
+          "r": 1,
+          "g": 0.2941,
+          "b": 0.2941
+        }
+      }
+    },
+    {
+      "name": "semantic/warning",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9608,
+          "g": 0.7725,
+          "b": 0.2588
+        },
+        "light": {
+          "r": 0.9608,
+          "g": 0.7725,
+          "b": 0.2588
+        }
+      }
+    },
+    {
+      "name": "semantic/info",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.2941,
+          "g": 0.6196,
+          "b": 1
+        },
+        "light": {
+          "r": 0.2941,
+          "g": 0.6196,
+          "b": 1
+        }
+      }
+    },
+    {
+      "name": "semantic/card",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    },
+    {
+      "name": "semantic/card-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        },
+        "light": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "semantic/popover",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    },
+    {
+      "name": "semantic/popover-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        },
+        "light": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "semantic/muted",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        },
+        "light": {
+          "r": 0.8314,
+          "g": 0.7804,
+          "b": 0.6588
+        }
+      }
+    },
+    {
+      "name": "semantic/muted-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.4314,
+          "g": 0.5412,
+          "b": 0.5137
+        },
+        "light": {
+          "r": 0.1961,
+          "g": 0.4353,
+          "b": 0.4078
+        }
+      }
+    },
+    {
+      "name": "semantic/secondary",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.1882,
+          "b": 0.1647
+        },
+        "light": {
+          "r": 0.8314,
+          "g": 0.7804,
+          "b": 0.6588
+        }
+      }
+    },
+    {
+      "name": "semantic/secondary-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.7686,
+          "g": 0.7098,
+          "b": 0.5922
+        },
+        "light": {
+          "r": 0,
+          "g": 0.1255,
+          "b": 0.1098
+        }
+      }
+    },
+    {
+      "name": "semantic/accent",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9412,
+          "g": 0.3333,
+          "b": 0.1412
+        },
+        "light": {
+          "r": 0.9412,
+          "g": 0.3333,
+          "b": 0.1412
+        }
+      }
+    },
+    {
+      "name": "semantic/accent-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0,
+          "g": 0.0667,
+          "b": 0.0549
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    },
+    {
+      "name": "semantic/destructive",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 1,
+          "g": 0.2941,
+          "b": 0.2941
+        },
+        "light": {
+          "r": 1,
+          "g": 0.2941,
+          "b": 0.2941
+        }
+      }
+    },
+    {
+      "name": "semantic/destructive-foreground",
+      "type": "COLOR",
+      "values": {
+        "dark": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        },
+        "light": {
+          "r": 0.9098,
+          "g": 0.8627,
+          "b": 0.7569
+        }
+      }
+    }
+  ]
+}