@rhavenside/baseline-ui 1.0.0

package/src/base/_base.scss

@@ -0,0 +1,182 @@
+// ============================================================================
+// Base Styles (Technical Glass Design)
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+// Root Element
+:root {
+  font-size: 16px; // Base font size for rem calculations
+}
+
+// Body (Dark Graphite, Desaturated)
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
+// Headings (High Contrast)
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-lg);
+}
+
+h6 {
+  font-size: var(--font-size-base);
+}
+
+// Paragraphs
+p {
+  margin: 0;
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+}
+
+// Links
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: var(--transition-colors);
+
+  &:hover {
+    color: var(--color-accent-light);
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+// Lists
+ul, ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// Images
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+// Horizontal Rule
+hr {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: var(--spacing-lg) 0;
+}
+
+// Code (Technical Style, Monospace)
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border-light);
+  padding: 0.125em 0.25em;
+  border-radius: var(--tech-border-radius-sm);
+  color: var(--color-text);
+}
+
+pre {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  border: 1px solid var(--glass-border-medium);
+  padding: var(--spacing-md);
+  border-radius: var(--tech-border-radius-md);
+  overflow-x: auto;
+  color: var(--color-text);
+
+  code {
+    background-color: transparent;
+    padding: 0;
+    border: none;
+  }
+}
+
+// Blockquote
+blockquote {
+  margin: 0;
+  padding-left: var(--spacing-lg);
+  border-left: var(--border-width-base) solid var(--color-border);
+  color: var(--color-text-muted);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  padding: var(--spacing-md);
+  border-radius: var(--tech-border-radius-md);
+}
+
+// Tables (basic)
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+// Buttons (reset)
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  color: inherit;
+}
+
+// Inputs (reset)
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+// Focus styles (accessibility)
+*:focus {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+*:focus-visible {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: 2px;
+}

package/src/base/_normalize.scss

@@ -0,0 +1,186 @@
+// ============================================================================
+// Normalize.css-inspired Browser Normalization
+// ============================================================================
+
+// Document
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+// Sections
+body {
+  margin: 0;
+}
+
+// Grouping content
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Text-level semantics
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// Embedded content
+img {
+  border-style: none;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Forms
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+// Interactive
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+// Misc
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+

package/src/base/_reset.scss

@@ -0,0 +1,24 @@
+// ============================================================================
+// CSS Reset
+// ============================================================================
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+

package/src/baseline.scss

@@ -0,0 +1,48 @@
+// ============================================================================
+// Baseline Design Framework
+// Main Entry Point
+// ============================================================================
+
+// 1. Design Tokens (CSS Custom Properties)
+@use 'tokens/tokens';
+
+// 2. Base Layer (Reset & Normalization)
+@use 'base/reset';
+@use 'base/normalize';
+@use 'base/base';
+
+// 3. Layout System
+@use 'layout/container';
+@use 'layout/grid';
+@use 'layout/grid-modern';
+@use 'layout/flex';
+
+// 4. Utilities
+@use 'utilities/spacing';
+@use 'utilities/display';
+@use 'utilities/text';
+@use 'utilities/visibility';
+@use 'utilities/position';
+@use 'utilities/animations';
+@use 'utilities/accessibility';
+
+// 5. Components
+@use 'components/button';
+@use 'components/form';
+@use 'components/card';
+@use 'components/alert';
+@use 'components/badge';
+@use 'components/modal';
+@use 'components/dropdown';
+@use 'components/nav';
+@use 'components/table';
+@use 'components/tooltip';
+@use 'components/progress';
+@use 'components/spinner';
+
+// 6. Icons
+@use 'icons/icons';
+
+// 7. Themes (Dark Mode)
+@use 'themes/dark';
+

package/src/components/_alert.scss

@@ -0,0 +1,97 @@
+// ============================================================================
+// Alert Component (Technical Glass Design)
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+.bl-alert {
+  position: relative;
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  border: 1px solid var(--glass-border-medium);
+  border-left-width: 2px; // Clear border color line
+  border-radius: var(--tech-border-radius-md);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  color: var(--color-text);
+}
+
+.bl-alert-title {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+.bl-alert-message {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+// Alert Variants (Structure: Line → Title → Text)
+.bl-alert-info {
+  border-left-color: var(--color-accent);
+  color: var(--color-text);
+
+  .bl-alert-title {
+    color: var(--color-text);
+  }
+}
+
+.bl-alert-success {
+  border-left-color: var(--color-success);
+  color: var(--color-text);
+
+  .bl-alert-title {
+    color: var(--color-text);
+  }
+}
+
+.bl-alert-warning {
+  border-left-color: var(--color-warning);
+  color: var(--color-text);
+
+  .bl-alert-title {
+    color: var(--color-text);
+  }
+}
+
+.bl-alert-error {
+  border-left-color: var(--color-error);
+  color: var(--color-text);
+
+  .bl-alert-title {
+    color: var(--color-text);
+  }
+}
+
+// Dismissible Alert
+.bl-alert-dismissible {
+  padding-right: var(--spacing-3xl);
+}
+
+.bl-alert-close {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  padding: var(--spacing-xs);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: var(--transition-opacity);
+  color: var(--color-text);
+  border-radius: var(--tech-border-radius-sm);
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &::before {
+    content: '×';
+    font-size: var(--font-size-xl);
+    line-height: 1;
+  }
+}

package/src/components/_badge.scss

@@ -0,0 +1,105 @@
+// ============================================================================
+// Badge Component (Technical Glass Design - 2-part)
+// ============================================================================
+
+@use '../tokens/tokens' as *;
+
+.bl-badge {
+  display: inline-flex;
+  align-items: stretch;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--tech-border-radius-sm);
+  border: 1px solid var(--glass-border-medium);
+}
+
+// Badge Label (Left Part - Matte)
+.bl-badge-label {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  color: var(--color-text-muted);
+  border-right: 1px solid var(--glass-border-medium); // Technical edge
+  flex-shrink: 0;
+}
+
+// Badge Value (Right Part - Glassy or Accented)
+.bl-badge-value {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: var(--glass-bg-medium);
+  backdrop-filter: blur(var(--glass-blur-md));
+  -webkit-backdrop-filter: blur(var(--glass-blur-md));
+  color: var(--color-text);
+  flex-shrink: 0;
+}
+
+// Badge Variants
+.bl-badge-primary {
+  .bl-badge-value {
+    background: var(--color-accent);
+    color: var(--color-text-inverse);
+  }
+}
+
+.bl-badge-secondary {
+  .bl-badge-value {
+    background: var(--glass-bg-heavy);
+    color: var(--color-text);
+  }
+}
+
+.bl-badge-success {
+  .bl-badge-value {
+    background: var(--color-success);
+    color: var(--color-text-inverse);
+  }
+}
+
+.bl-badge-warning {
+  .bl-badge-value {
+    background: var(--color-warning);
+    color: var(--color-text-inverse);
+  }
+}
+
+.bl-badge-error {
+  .bl-badge-value {
+    background: var(--color-error);
+    color: var(--color-text-inverse);
+  }
+}
+
+.bl-badge-info {
+  .bl-badge-value {
+    background: var(--color-info);
+    color: var(--color-text-inverse);
+  }
+}
+
+// Badge Sizes
+.bl-badge-sm {
+  font-size: 0.625rem;
+
+  .bl-badge-label,
+  .bl-badge-value {
+    padding: 0.125rem var(--spacing-xs);
+  }
+}
+
+.bl-badge-lg {
+  font-size: var(--font-size-sm);
+
+  .bl-badge-label,
+  .bl-badge-value {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}