@magmonium/one 0.0.3 → 0.0.5

package/sass/utilities/_text.sass

@@ -0,0 +1,207 @@
+// Text utility classes derived from mixins
+@use '../mixins/text' as text
+
+// Text variants
+.text-body
+  @include text.text-body
+
+.text-lead
+  @include text.text-lead
+
+.text-small
+  @include text.text-small
+
+.text-muted
+  @include text.text-muted
+
+.text-caption
+  @include text.text-caption
+
+// Text sizes
+.text-xs
+  @include text.text-base(0.75rem)
+
+.text-sm
+  @include text.text-base(0.875rem)
+
+.text-base
+  @include text.text-base(1rem)
+
+.text-lg
+  @include text.text-base(1.125rem)
+
+.text-xl
+  @include text.text-base(1.25rem)
+
+.text-2xl
+  @include text.text-base(1.5rem)
+
+.text-3xl
+  @include text.text-base(1.875rem)
+
+// Font weights
+.text-thin
+  font-weight: 100
+
+.text-light
+  font-weight: 300
+
+.text-normal
+  font-weight: 400
+
+.text-medium
+  font-weight: 500
+
+.text-semibold
+  font-weight: 600
+
+.text-bold
+  font-weight: 700
+
+.text-extrabold
+  font-weight: 800
+
+// Text alignment
+.text-left
+  @include text.text-left
+
+.text-center
+  @include text.text-center
+
+.text-right
+  @include text.text-right
+
+.text-justify
+  @include text.text-justify
+
+// Text transform
+.text-uppercase
+  @include text.text-uppercase
+
+.text-lowercase
+  @include text.text-lowercase
+
+.text-capitalize
+  @include text.text-capitalize
+
+// Text truncation
+.text-truncate
+  @include text.text-truncate
+
+.text-truncate-2
+  @include text.text-truncate-lines(2)
+
+.text-truncate-3
+  @include text.text-truncate-lines(3)
+
+.text-truncate-4
+  @include text.text-truncate-lines(4)
+
+// Text spacing
+.text-tracked
+  @include text.text-tracked
+
+.text-tight
+  @include text.text-tight
+
+// Text with icons
+.text-with-icon
+  @include text.text-with-icon
+
+.text-with-icon-right
+  @include text.text-with-icon('right')
+
+// Text emphasis
+.text-emphasis
+  @include text.text-emphasis
+
+.text-highlight
+  @include text.text-highlight
+
+// Code text
+.text-code
+  @include text.text-code
+
+// Text overlay
+.text-overlay
+  @include text.text-overlay
+
+// Text selection
+.text-selection
+  @include text.text-selection
+
+// Responsive text utilities
+.text-responsive-sm
+  @include text.text-responsive(0.875rem, 1rem)
+
+.text-responsive-base
+  @include text.text-responsive(1rem, 1.125rem)
+
+.text-responsive-lg
+  @include text.text-responsive(1.125rem, 1.25rem)
+
+.text-responsive-xl
+  @include text.text-responsive(1.25rem, 1.5rem)
+
+// Line height utilities
+.leading-none
+  line-height: 1
+
+.leading-tight
+  line-height: 1.25
+
+.leading-snug
+  line-height: 1.375
+
+.leading-normal
+  line-height: 1.5
+
+.leading-relaxed
+  line-height: 1.625
+
+.leading-loose
+  line-height: 2
+
+// White space utilities
+.whitespace-normal
+  white-space: normal
+
+.whitespace-nowrap
+  white-space: nowrap
+
+.whitespace-pre
+  white-space: pre
+
+.whitespace-pre-line
+  white-space: pre-line
+
+.whitespace-pre-wrap
+  white-space: pre-wrap
+
+// Word break utilities
+.break-normal
+  overflow-wrap: normal
+  word-break: normal
+
+.break-words
+  overflow-wrap: break-word
+
+.break-all
+  word-break: break-all
+
+// Text decoration utilities
+.underline
+  text-decoration: underline
+
+.no-underline
+  text-decoration: none
+
+.line-through
+  text-decoration: line-through
+
+// Text fade out effect
+.text-fade-out
+  @include text.text-fade-out
+
+.text-fade-out-lg
+  @include text.text-fade-out(3em)

package/sass/variables/_animations.sass

@@ -0,0 +1,5 @@
+// Animation Variables
+$standard-curve: cubic-bezier(0.4, 0, 0.2, 1) !default
+$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1) !default
+$standard-bezier: $standard-curve
+$transition-base: all 0.3s $ease-out-expo

package/sass/variables/_borders.sass

@@ -0,0 +1,25 @@
+// Border Variables
+@use './colors' as *
+
+// Border widths map following spacing pattern
+$border-widths: (0: 0, 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px)
+
+// Border radius sizes
+$border-radius-sizes: (
+  0: 0, 
+  1: 0.125rem, 
+  2: 0.25rem, 
+  3: 0.375rem, 
+  4: 0.5rem, 
+  5: 1rem, 
+  pill: 50rem, 
+  circle: 50%
+)
+
+// Border styles (excluding solid since it's default)
+$border-styles: (dashed, dotted, double, groove, ridge, inset, outset, none)
+
+// Default border configuration
+$default-border-width: 1px
+$default-border-color: $border-color
+$default-border-style: solid

package/sass/variables/_colors.sass

@@ -0,0 +1,93 @@
+// Magmonium Color Variables
+// Single source of truth: ThemeStore writes --m-* CSS custom properties to :root.
+// SASS vars are pure aliases — no fallbacks, no hardcoded values.
+// To change a color, update the theme asset file (mag_assets/theme/*.ts), not here.
+
+// Base
+$background: var(--m-background)
+$border: var(--m-border)
+$frame: var(--m-frame)
+$background-lite: var(--m-background-lite)
+$highlight: var(--m-highlight)
+
+// Text
+$text: var(--m-text)
+$inverse-text: var(--m-inverse-text)
+$text-secondary: var(--m-text-secondary)
+$text-tertiary: var(--m-text-tertiary)
+$text-quaternary: var(--m-text-quaternary)
+$text-quinary: var(--m-text-quinary)
+$text-senary: var(--m-text-senary)
+$text-septenary: var(--m-text-septenary)
+$text-octonary: var(--m-text-octonary)
+$text-nonary: var(--m-text-nonary)
+
+// Brand
+$mm: var(--m-mm)
+$mm-lite: var(--m-mm-lite)
+$mm-dark: var(--m-mm-dark)
+$focus: var(--m-focus)
+$header: var(--m-header)
+
+// Status
+$error: var(--m-error)
+$error-light: var(--m-error-light)
+$warning: var(--m-warning)
+$warning-lite: var(--m-warning-lite)
+$success: var(--m-success)
+$success-lite: var(--m-success-lite)
+$info: var(--m-info)
+$info-lite: var(--m-info-lite)
+$fade: var(--m-fade)
+$wealth: var(--m-wealth)
+$gold: var(--m-gold)
+
+// Backgrounds
+$page: var(--m-page)
+$page-dark: var(--m-page-dark)
+$bg-focus: var(--m-bg-focus)
+$focus-bg: var(--m-focus-bg)
+
+// Interactive
+$click-effect: var(--m-click-effect)
+$modal-background: var(--m-modal-background)
+$tooltip-bg: var(--m-tool-tip-bg)
+$tooltip-col: var(--m-tool-tip-col)
+
+// Backdrop
+$backdrop-standard: var(--m-backdrop-standard)
+$backdrop-glass: var(--m-backdrop-glass)
+$backdrop-frosted: var(--m-backdrop-frosted)
+$backdrop-theme: var(--m-backdrop-theme)
+$backdrop-border: var(--m-backdrop-border)
+$backdrop-frame: var(--m-backdrop-frame)
+$backdrop-modal: var(--m-modal-background)
+$backdrop-overlay: var(--m-backdrop-overlay)
+$backdrop-popup: var(--m-backdrop-popup)
+$backdrop-nav: var(--m-backdrop-nav)
+$backdrop-sidebar: var(--m-backdrop-sidebar)
+$backdrop-card: var(--m-backdrop-card)
+$backdrop-surface: var(--m-backdrop-surface)
+$backdrop-mm: var(--m-backdrop-mm)
+$backdrop-error: var(--m-backdrop-error)
+$backdrop-warning: var(--m-backdrop-warning)
+$backdrop-success: var(--m-backdrop-success)
+$backdrop-shadow: var(--m-backdrop-shadow)
+$backdrop-gold: var(--m-backdrop-gold)
+$backdrop-focus: var(--m-focus-bg)
+$backdrop-click: var(--m-click-effect)
+
+// Aliases
+$primary: $mm
+$primary-lite: $mm-lite
+$primary-dark: $mm-dark
+$secondary: $text-secondary
+$danger: $error
+$danger-lite: $error-light
+
+// Legacy aliases (backward compatibility)
+$background-color: $background
+$white: white
+$primary-color: $mm
+$border-color: $border
+$frame-color: $frame

package/sass/variables/_index.sass

@@ -0,0 +1,6 @@
+@forward "number"
+@forward "colors"
+@forward "spacing"
+@forward "typography"
+@forward "borders"
+@forward "animations"

package/sass/variables/_number.sass

@@ -0,0 +1 @@
+$base-z-index: 526

package/sass/variables/_spacing.sass

@@ -0,0 +1,28 @@
+// Spacing Variables
+@use './colors' as *
+
+$spacer: 1rem
+$spacers: (0: 0, 1: $spacer * 0.25, 2: $spacer * 0.5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3)
+
+// Margins and Paddings
+$margin-base: $spacer
+$padding-base: $spacer
+
+// Container Padding
+$container-padding-x: $spacer
+
+// Component Spacing
+$component-active-color: $white
+$component-active-bg: $primary-color
+
+// Grid System
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
+
+$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px)
+
+// Grid Gutter
+$grid-gutter-width: 1.5rem
+$grid-row-columns: 6
+
+$desktop-width: 1200px
+$tablet-width: 768px

package/sass/variables/_typography.sass

@@ -0,0 +1,40 @@
+// Typography Variables
+@use './spacing' as *
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+
+$font-family-base: $font-family-sans-serif
+$font-family-code: $font-family-monospace
+
+// Font Sizes
+$font-size-root: null
+$font-size-base: 1rem
+$font-size-sm: $font-size-base * 0.875
+$font-size-lg: $font-size-base * 1.25
+
+$font-sizes: (1: $font-size-base * 2.5, 2: $font-size-base * 2, 3: $font-size-base * 1.75, 4: $font-size-base * 1.5, 5: $font-size-base * 1.25, 6: $font-size-base)
+
+// Font Weights
+$font-weight-lighter: lighter
+$font-weight-light: 300
+$font-weight-normal: 400
+$font-weight-medium: 500
+$font-weight-semibold: 600
+$font-weight-bold: 700
+$font-weight-bolder: bolder
+
+$font-weight-base: $font-weight-normal
+
+// Line Heights
+$line-height-base: 1.5
+$line-height-sm: 1.25
+$line-height-lg: 2
+
+// Headings
+$headings-margin-bottom: $spacer * 0.5
+$headings-font-family: null
+$headings-font-style: null
+$headings-font-weight: 500
+$headings-line-height: 1.2
+$headings-color: inherit