lutra 0.0.33 → 0.1.0

package/dist/css/1-props.css

@@ -0,0 +1,775 @@
+/**
+ * Form fields
+ */
+
+@property --field-radius {
+    syntax: "<length-percentage>";
+    inherits: true;
+    initial-value: 6px;
+}
+
+@property --field-padding {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 8px;
+}
+
+@property --field-border-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 1px;
+}
+
+@property --field-border-style {
+    syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
+    inherits: true;
+    initial-value: solid;
+}
+
+@property --field-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ccc;
+}
+
+@property --field-border-color-error {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #dc3545;
+}
+
+@property --field-border-color-success {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #28a745;
+}
+
+@property --field-border-color-warning {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ffc107;
+}
+
+@property --field-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: black;
+}
+
+@property --field-placeholder-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ddd;
+}
+
+@property --field-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+/**
+ * Borders
+ */
+
+@property --border-radius {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 8px;
+}
+
+@property --border-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 1px;
+}
+
+@property --border-style {
+    syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
+    inherits: true;
+    initial-value: solid;
+}
+
+@property --border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ccc;
+}
+
+/**
+ * Icons
+ */
+
+@property --icon-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 24px;
+}
+
+/**
+ * Focus
+ */
+@property --focus-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 2px;
+}
+
+@property --focus-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: oklch(0.5 0.2 280);
+}
+
+/**
+ * Spaces (margins and padding)
+ */
+@property --space-base {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 16px;
+}
+
+@property --space-ratio {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1.2;
+}
+
+/**
+ * Typography
+ */
+
+@property --font-size-base {
+    syntax: "<length-percentage>";
+    inherits: true;
+    initial-value: 16px;
+}
+
+@property --font-size-ratio {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1.2;
+}
+
+@property --font-family {
+    syntax: "<string>#";
+    inherits: true;
+    initial-value: "Helvetica", "sans-serif";
+}
+
+@property --font-family-mono {
+    syntax: "<string>#";
+    inherits: true;
+    initial-value: "monospace";
+}
+
+@property --font-weight-regular {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 400;
+}
+
+@property --font-weight-medium {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 500;
+}
+
+@property --font-weight-semibold {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 600;
+}
+
+@property --font-weight-bold {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 700;
+}
+
+@property --line-height {
+    syntax: "<length-percentage> | <number>";
+    inherits: true;
+    initial-value: 1.5;
+}
+
+@property --text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #333;
+}
+
+@property --text-color-subtle {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #666;
+}
+
+@property --text-color-subtler {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ccc;
+}
+
+@property --text-color-subtlest {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ddd;
+}
+
+@property --text-color-heading {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: black;
+}
+
+@property --text-color-link {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007bff;
+}
+
+@property --text-color-link-hover {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+@property --text-color-link-active {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+@property --text-color-link-visited {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+@property --text-link-decoration {
+    syntax: "<string>";
+    inherits: true;
+    initial-value: none;
+}
+
+@property --text-link-decoration-hover {
+    syntax: "<string>";
+    inherits: true;
+    initial-value: underline;
+}
+
+/**
+ * Preformatted text
+ */
+
+@property --code-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #000;
+}
+
+@property --code-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #f8f9fa;
+}
+
+@property --code-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #ccc;
+}
+
+@property --code-border-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 1px;
+}
+
+/**
+ * Buttons
+ */
+
+@property --button-radius {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 8px;
+}
+
+@property --button-padding {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 16px;
+}
+
+@property --button-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: white;
+}
+
+@property --button-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007bff;
+}
+
+@property --button-border-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 1px;
+}
+
+@property --button-border-style {
+    syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
+    inherits: true;
+    initial-value: solid;
+}
+
+@property --button-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007bff;
+}
+
+@property --button-hover-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: white;
+}
+
+@property --button-hover-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+@property --button-hover-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+/* Active */
+
+@property --button-active-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: white;
+}
+
+@property --button-active-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+@property --button-active-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0056b3;
+}
+
+/* Secondary */
+
+@property --button-secondary-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007bff;
+}
+
+@property --button-secondary-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #f8f9fa;
+}
+
+@property --button-secondary-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #f8f9fa;
+}
+
+@property --button-secondary-hover-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007bff;
+}
+
+@property --button-secondary-hover-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #e9ecef;
+}
+
+@property --button-secondary-active-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007bff;
+}
+
+@property --button-secondary-active-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #e9ecef;
+}
+
+/* Warning button */
+
+@property --button-warning-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFC107;
+}
+
+@property --button-warning-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFF3CD;
+}
+
+@property --button-warning-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFC107;
+}
+
+@property --button-warning-hover-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFC107;
+}
+
+@property --button-warning-hover-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFC107;
+}
+
+@property --button-warning-hover-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFC107;
+}
+
+@property --button-warning-active-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #212529;
+}
+
+@property --button-warning-active-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #E0A800;
+}
+
+@property --button-warning-active-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #D39E00;
+}
+
+/* Danger/Error button */
+
+@property --button-danger-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: white;
+}
+
+@property --button-danger-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: var(--state-error-color);
+}
+
+@property --button-danger-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: var(--state-error-color);
+}
+
+@property --button-danger-hover-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: white;
+}
+
+@property --button-danger-hover-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #C82333;
+}
+
+@property --button-danger-hover-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #BD2130;
+}
+
+@property --button-danger-active-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: white;
+}
+
+@property --button-danger-active-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #BD2130;
+}
+
+@property --button-danger-active-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #B21F2D;
+}
+
+/* Tertiary/Ghost button */
+
+@property --button-tertiary-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: var(--text-color-link);
+}
+
+@property --button-tertiary-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+@property --button-tertiary-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+@property --button-tertiary-hover-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: var(--text-color-link-hover);
+}
+
+@property --button-tertiary-hover-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: rgba(0, 0, 0, 0.05);
+}
+
+@property --button-tertiary-hover-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+@property --button-tertiary-active-text-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: var(--text-color-link-active);
+}
+
+@property --button-tertiary-active-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: rgba(0, 0, 0, 0.1);
+}
+
+@property --button-tertiary-active-border-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: transparent;
+}
+
+/**
+ * Overlays
+ */
+
+@property --overlay-bg-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #000;
+}
+
+@property --overlay-backdrop-filter {
+    syntax: "<filter-function>";
+    inherits: true;
+    initial-value: blur(10px);
+}
+
+@property --overlay-control-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #fff;
+}
+
+/**
+ * Transitions
+ */
+
+@property --transition-speed-base {
+    syntax: "<time>";
+    inherits: true;
+    initial-value: 0.3s;
+}
+
+@property --transition-speed-fast {
+    syntax: "<time>";
+    inherits: true;
+    initial-value: 0.1s;
+}
+
+@property --transition-speed-slow {
+    syntax: "<time>";
+    inherits: true;
+    initial-value: 0.5s;
+}
+
+/**
+ * States
+ */
+
+@property --state-warn-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFC107; /* Vibrant Yellow */
+}
+
+@property --state-warn-bg {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFF3CD; /* Light Yellow */
+}
+
+@property --state-warn-border {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FFEEBA; /* Darker Yellow */
+}
+
+@property --state-warn-text {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #856404; /* Dark Yellow/Brown text */
+}
+
+@property --state-info-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #007BFF; /* Bright Blue */
+}
+
+@property --state-info-bg {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #E0F2FE; /* Light Blue */
+}
+
+@property --state-info-border {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #7DD3FC; /* Medium Blue */
+}
+
+@property --state-info-text {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #0C4A6E; /* Dark Blue */
+}
+
+@property --state-success-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #28A745; /* Green */
+}
+
+@property --state-success-bg {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #DCFCE7; /* Light Green */
+}
+
+@property --state-success-border {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #86EFAC; /* Medium Green */
+}
+
+@property --state-success-text {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #166534; /* Dark Green */
+}
+
+@property --state-error-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #DC3545; /* Red */
+}
+
+@property --state-error-bg {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FEE2E2; /* Light Red */
+}
+
+@property --state-error-border {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #FCA5A5; /* Medium Red */
+}
+
+@property --state-error-text {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #991B1B; /* Dark Red */
+}
+
+@property --state-processing-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #6F42C1; /* Purple */
+}
+
+@property --state-processing-bg {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #EDE9FE; /* Light Purple */
+}
+
+@property --state-processing-border {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #C4B5FD; /* Medium Purple */
+}
+
+@property --state-processing-text {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #5B21B6; /* Dark Purple */
+}
+
+/**
+ * Shadows
+ */
+
+@property --shadow-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #000;
+}
+
+@property --shadow-opacity {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0.1;
+}
+
+@property --shadow-blur {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 10px;
+}