@datafluxgrid/fluxgrid-css 1.0.5 → 1.0.7

package/src/css/fonts.css

@@ -0,0 +1,100 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..900;1,200..900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Fira+Code:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=Space+Grotesk:wght@300..700&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Geist:wght@100..900&display=swap");
+
+.c-font-inter {
+  font-family: "Inter", sans-serif;
+}
+.c-font-poppins {
+  font-family: "Poppins", sans-serif;
+}
+.c-font-roboto {
+  font-family: "Roboto", sans-serif;
+}
+.c-font-montserrat {
+  font-family: "Montserrat", sans-serif;
+}
+.c-font-open-sans {
+  font-family: "Open Sans", sans-serif;
+}
+.c-font-lato {
+  font-family: "Lato", sans-serif;
+}
+.c-font-nunito {
+  font-family: "Nunito", sans-serif;
+}
+.c-font-merriweather {
+  font-family: "Merriweather", serif;
+}
+.c-font-playfair {
+  font-family: "Playfair Display", serif;
+}
+.c-font-fira-code {
+  font-family: "Fira Code", monospace;
+}
+.c-font-dm-sans {
+  font-family: "DM Sans", sans-serif;
+}
+.c-font-space-grotesk {
+  font-family: "Space Grotesk", sans-serif;
+}
+.c-font-outfit {
+  font-family: "Outfit", sans-serif;
+}
+.c-font-jakarta {
+  font-family: "Plus Jakarta Sans", sans-serif;
+}
+.c-font-geist {
+  font-family: "Geist", sans-serif;
+}
+
+.c-font-thin {
+  font-weight: 100;
+}
+.c-font-extralight {
+  font-weight: 200;
+}
+.c-font-light {
+  font-weight: 300;
+}
+.c-font-regular {
+  font-weight: 400;
+}
+.c-font-medium {
+  font-weight: 500;
+}
+.c-font-semibold {
+  font-weight: 600;
+}
+.c-font-bold {
+  font-weight: 700;
+}
+.c-font-extrabold {
+  font-weight: 800;
+}
+.c-font-black {
+  font-weight: 900;
+}
+
+.c-font-italic {
+  font-style: italic;
+}
+.c-font-normal {
+  font-style: normal;
+}
+
+.c-font-sans {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+.c-font-serif {
+  font-family: Georgia, "Times New Roman", serif;
+}
+.c-font-mono {
+  font-family: "Fira Code", Consolas, "Courier New", monospace;
+}
+.c-font-system {
+  font-family: inherit;
+}

package/src/css/forms.css

@@ -409,3 +409,75 @@ input[type="range"]::-moz-range-thumb {
   margin-top: -7px;
   margin-left: -7px;
 }
+
+.c-select {
+  display: block;
+  width: 100%;
+  padding: 10px 40px 10px 14px;
+  border: 1px solid var(--c-gray-300);
+  border-radius: 8px;
+  background-color: var(--c-white);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  color: var(--c-gray-900);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+  box-shadow: var(--c-shadow-xs);
+}
+
+.c-select:focus {
+  border-color: var(--c-primary-500);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  outline: none;
+}
+
+.c-select:hover:not(:focus) {
+  border-color: var(--c-gray-400);
+}
+
+.c-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--c-gray-50);
+}
+
+.c-select option {
+  background-color: var(--c-white);
+  color: var(--c-gray-900);
+  padding: 8px;
+}
+
+.c-select-sm {
+  padding: 6px 32px 6px 10px;
+  font-size: 0.75rem;
+  border-radius: 6px;
+}
+
+.c-select-lg {
+  padding: 14px 44px 14px 18px;
+  font-size: 1rem;
+  border-radius: 10px;
+}
+
+.c-select-error {
+  border-color: var(--c-error-500);
+}
+
+.c-select-error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+}
+
+.c-select-success {
+  border-color: var(--c-success-500);
+}
+.c-select-success:focus {
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
+}

package/src/css/index.css

@@ -11,3 +11,4 @@
 @import "./forms.css";
 @import "./scroll.css";
 @import "./print.css";
+@import "./fonts.css";