@adnap/krysalicss 0.0.1 → 0.1.0

package/src/variables/_feature.scss

@@ -8,11 +8,15 @@ $list: true !default;
   @return $list == true or list.index($list, $name) != null;
 }
 
+$light-variants: true !default;
+
 $base-reset: _defaultValue(base-reset) !default;
 $base-global: _defaultValue(base-global) !default;
 $layout-container: _defaultValue(layout-container) !default;
 $layout-flex: _defaultValue(layout-flex) !default;
 $layout-grid: _defaultValue(layout-grid) !default;
+$layout-hero: _defaultValue(layout-hero) !default;
+$layout-footer: _defaultValue(layout-footer) !default;
 $typography-base: _defaultValue(typography-base) !default;
 $typography-title: _defaultValue(typography-title) !default;
 $typography-link: _defaultValue(typography-link) !default;
@@ -24,6 +28,8 @@ $module-field: _defaultValue(module-field) !default;
 $module-navbar: _defaultValue(module-navbar) !default;
 $module-modal: _defaultValue(module-modal) !default;
 $module-tabs: _defaultValue(module-tabs) !default;
+$module-dropdown: _defaultValue(module-dropdown) !default;
+$module-section: _defaultValue(module-section) !default;
 $element-button: _defaultValue(element-button) !default;
 $element-badge: _defaultValue(element-badge) !default;
 $element-progress: _defaultValue(element-progress) !default;
@@ -37,3 +43,33 @@ $element-file: _defaultValue(element-file) !default;
 $element-range: _defaultValue(element-range) !default;
 $helper-breakpoints: _defaultValue(helper-breakpoints) !default;
 $helper-state: _defaultValue(helper-state) !default;
+$helper-visibility: _defaultValue(helper-visibility) !default;
+$helper-spacing: _defaultValue(helper-spacing) !default;
+$helper-text: _defaultValue(helper-text) !default;
+$helper-color: _defaultValue(helper-color) !default;
+$helper-flex: _defaultValue(helper-flex) !default;
+$helper-sizing: _defaultValue(helper-sizing) !default;
+$helper-position: _defaultValue(helper-position) !default;
+$helper-shadow: _defaultValue(helper-shadow) !default;
+$helper-border: _defaultValue(helper-border) !default;
+$helper-interactions: _defaultValue(helper-interactions) !default;
+$helper-ratio: _defaultValue(helper-ratio) !default;
+$helper-object-fit: _defaultValue(helper-object-fit) !default;
+$helper-overflow: _defaultValue(helper-overflow) !default;
+$helper-stack: _defaultValue(helper-stack) !default;
+$element-spinner: _defaultValue(element-spinner) !default;
+$element-box: _defaultValue(element-box) !default;
+$element-divider: _defaultValue(element-divider) !default;
+$module-breadcrumb: _defaultValue(module-breadcrumb) !default;
+$module-pagination: _defaultValue(module-pagination) !default;
+$typography-lead: _defaultValue(typography-lead) !default;
+$typography-blockquote: _defaultValue(typography-blockquote) !default;
+$typography-list: _defaultValue(typography-list) !default;
+$helper-font-size: _defaultValue(helper-font-size) !default;
+$helper-line-height: _defaultValue(helper-line-height) !default;
+$helper-tooltip: _defaultValue(helper-tooltip) !default;
+$module-buttons: _defaultValue(module-buttons) !default;
+$module-toast: _defaultValue(module-toast) !default;
+$module-popover: _defaultValue(module-popover) !default;
+$element-image: _defaultValue(element-image) !default;
+$typography-figure: _defaultValue(typography-figure) !default;

package/src/variables/_global.scss

@@ -40,6 +40,14 @@ $disabled-opacity: 0.6 !default;
 // only, not as a control boundary.
 $border-mix: 50% !default;
 
+// Subtle-border tint for decorative surface edges (card, popover, modal,
+// dropdown) and subpart dividers (card header / footer / inter-item).
+// 12 % is the empirically-tuned tint that reads as a hairline on every
+// shipped combination without competing with the surface fill. Distinct
+// from `$border-mix` (50 %): that one enforces a WCAG 1.4.11 floor for
+// interactive borders against the page bg; this one is decorative.
+$subtle-border-mix: 12% !default;
+
 // AAA touch-target minimum (WCAG 2.5.5): interactive controls must be
 // ≥ 44 × 44 CSS pixels. Padding alone provides the height; this token
 // enforces the floor for short labels (icon-only buttons, "OK", "No").

package/src/variables/_selector.scss

@@ -1 +1,2 @@
 $prefix-is: ".is-" !default;
+$prefix-has: ".has-" !default;

package/dist/tokens/dark.json

@@ -1,85 +0,0 @@
-{
-  "$description": "Krysalicss \"dark\" theme tokens, W3C Design Tokens Community Group format. Compatible with Style Dictionary v4.",
-  "kc": {
-    "bg": {
-      "$value": "#121417",
-      "$type": "color"
-    },
-    "fg": {
-      "$value": "#e6e8eb",
-      "$type": "color"
-    },
-    "link": {
-      "$value": "#6cd2a8",
-      "$type": "color"
-    },
-    "link-hover": {
-      "$value": "#9be3c1",
-      "$type": "color"
-    },
-    "border-radius": {
-      "$value": "5px",
-      "$type": "dimension"
-    },
-    "card-bg": {
-      "$value": "#1c1f23",
-      "$type": "color"
-    },
-    "card-fg": {
-      "$value": "#e6e8eb",
-      "$type": "color"
-    },
-    "focus-ring": {
-      "$value": "#6cd2a8",
-      "$type": "color"
-    },
-    "default-bg": {
-      "$value": "#1c1f23",
-      "$type": "color"
-    },
-    "default-fg": {
-      "$value": "#e6e8eb",
-      "$type": "color"
-    },
-    "light-bg": {
-      "$value": "#3d5a3f",
-      "$type": "color"
-    },
-    "light-fg": {
-      "$value": "#e6e8eb",
-      "$type": "color"
-    },
-    "primary-bg": {
-      "$value": "#21704f",
-      "$type": "color"
-    },
-    "primary-fg": {
-      "$value": "#f5f7f5",
-      "$type": "color"
-    },
-    "warning-bg": {
-      "$value": "#b89a1e",
-      "$type": "color"
-    },
-    "warning-fg": {
-      "$value": "#1a1a12",
-      "$type": "color"
-    },
-    "danger-bg": {
-      "$value": "#a3471a",
-      "$type": "color"
-    },
-    "danger-fg": {
-      "$value": "#fff5ee",
-      "$type": "color"
-    },
-    "success-bg": {
-      "$value": "#5c6529",
-      "$type": "color"
-    },
-    "success-fg": {
-      "$value": "#f4f6e6",
-      "$type": "color"
-    }
-  }
-}

package/dist/tokens/default.json

@@ -1,85 +0,0 @@
-{
-  "$description": "Krysalicss \"default\" theme tokens, W3C Design Tokens Community Group format. Compatible with Style Dictionary v4.",
-  "kc": {
-    "bg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "fg": {
-      "$value": "#27282b",
-      "$type": "color"
-    },
-    "link": {
-      "$value": "#1f6e51",
-      "$type": "color"
-    },
-    "link-hover": {
-      "$value": "#6b7330",
-      "$type": "color"
-    },
-    "border-radius": {
-      "$value": "5px",
-      "$type": "dimension"
-    },
-    "card-bg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "card-fg": {
-      "$value": "#27282b",
-      "$type": "color"
-    },
-    "focus-ring": {
-      "$value": "#1f6e51",
-      "$type": "color"
-    },
-    "default-bg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "default-fg": {
-      "$value": "#27282b",
-      "$type": "color"
-    },
-    "light-bg": {
-      "$value": "#c2f2c5",
-      "$type": "color"
-    },
-    "light-fg": {
-      "$value": "#27282b",
-      "$type": "color"
-    },
-    "primary-bg": {
-      "$value": "#1f6e51",
-      "$type": "color"
-    },
-    "primary-fg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "warning-bg": {
-      "$value": "#ecf241",
-      "$type": "color"
-    },
-    "warning-fg": {
-      "$value": "#27282b",
-      "$type": "color"
-    },
-    "danger-bg": {
-      "$value": "#f26b1d",
-      "$type": "color"
-    },
-    "danger-fg": {
-      "$value": "#27282b",
-      "$type": "color"
-    },
-    "success-bg": {
-      "$value": "#6b7330",
-      "$type": "color"
-    },
-    "success-fg": {
-      "$value": "#fff",
-      "$type": "color"
-    }
-  }
-}

package/dist/tokens/high-contrast.json

@@ -1,85 +0,0 @@
-{
-  "$description": "Krysalicss \"high-contrast\" theme tokens, W3C Design Tokens Community Group format. Compatible with Style Dictionary v4.",
-  "kc": {
-    "bg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "fg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "link": {
-      "$value": "#ffd400",
-      "$type": "color"
-    },
-    "link-hover": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "border-radius": {
-      "$value": "0",
-      "$type": "dimension"
-    },
-    "card-bg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "card-fg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "focus-ring": {
-      "$value": "#ffd400",
-      "$type": "color"
-    },
-    "default-bg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "default-fg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "light-bg": {
-      "$value": "#fff",
-      "$type": "color"
-    },
-    "light-fg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "primary-bg": {
-      "$value": "#00d2ff",
-      "$type": "color"
-    },
-    "primary-fg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "warning-bg": {
-      "$value": "#ffd400",
-      "$type": "color"
-    },
-    "warning-fg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "danger-bg": {
-      "$value": "#ff8585",
-      "$type": "color"
-    },
-    "danger-fg": {
-      "$value": "#000",
-      "$type": "color"
-    },
-    "success-bg": {
-      "$value": "#00ff85",
-      "$type": "color"
-    },
-    "success-fg": {
-      "$value": "#000",
-      "$type": "color"
-    }
-  }
-}