@ulu/frontend 0.0.3

package/trash/scss-old/components/_rule.scss

@@ -0,0 +1,84 @@
+////
+/// @group components-rule Rule
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../element";
+@use "../color";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.short-width Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
+/// @prop {Number} $config.short-border-width Short rule width of border
+
+$config: (
+  "short-width" : 2.75rem,
+  "short-border-width" : 4px
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss - General example, replace module-name with module's name
+///   @include module-name.set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss - General example, replace module-name with module's name
+///   @include module-name.get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "rule [config]");
+}
+
+/// Output styles
+
+@mixin styles {
+
+  $class: selector.class("rule");
+  
+  #{ $class } {
+    @include element.rule();
+  }
+  #{ $class }--content-on-top {
+    position: relative;
+    > * {
+      background-color: white; // User woud need to specific per context needed or something
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      max-width: 100%;
+      padding: 0.5em;
+      margin: 0;
+    }
+  }
+
+  // Output user's styles presets
+  @each $name, $value in element.$rule-styles {
+    #{ $class }--#{ $name } {
+      @include element.rule-style($name);
+    }
+  }
+  // Output user's margin presets
+  @each $name, $value in element.$rule-margins {
+    #{ $class }--margin-#{ $name } {
+      @include element.rule-margin($name);
+    }
+  }
+
+  // Meant to be user by tself without content
+  $short-width: get("short-width");
+  @if ($short-width) {
+    #{ $class }--short {
+      width: $short-width;
+      max-width: 100%;
+      border-bottom-width: get("short-border-width");
+    }
+  }
+}

package/trash/scss-old/helpers/_color.scss

@@ -0,0 +1,14 @@
+////
+/// @group helpers-color
+////
+
+@use "../utils";
+@use "../color";
+
+/// Prints color-context and color-[name] styles as helper classes (bottom of stylesheet)
+
+@mixin styles {
+  @include utils.file-header('helpers', 'color');
+  @include color.all-context-styles("helper-class");
+  @include color.all-color-class-styles();
+}

package/trash/scss-old/helpers/_display.scss

@@ -0,0 +1,68 @@
+////
+/// @group helpers-display
+////
+
+@use "sass:map";
+
+@use "../utils";
+@use "../utility";
+@use "../layout";
+@use "../element";
+@use "../breakpoint";
+@use "../selector";
+
+/// Print utilities helper styles
+/// @name helper-display-styles
+/// @example scss
+///  @include ulu.helper-display-styles();
+
+@mixin styles {
+
+  @include utils.file-header('helpers', 'display');
+
+  $hiddenVisuallyPrefix: selector.class("hidden-visually");
+
+  #{ $hiddenVisuallyPrefix } {
+    @include element.hidden-visually();
+  }
+  #{ $hiddenVisuallyPrefix }--focusable {
+    &:active,
+    &:focus {
+      @include element.hidden-visually(false);
+    }
+  }
+  // Consider removing
+  .clearfix,
+  .cf { 
+    @include layout.clearfix();
+  }
+  .display-block {
+    display: block;
+  }
+  .display-inline {
+    display: inline;
+  }
+  .display-inline-all * {
+    display: inline;
+  }
+  .display-inline-block {
+    display: inline-block;
+  }
+  .hidden {
+    display: none;
+  }
+
+  // Display none per breakpoint
+  @each $name in map.keys(breakpoint.$sizes) {
+    @include breakpoint.min($name) {
+      .hidden-min-#{ $name } {
+        display: none;
+      }
+    }
+    @include breakpoint.max($name) {
+      .hidden-max-#{ $name } {
+        display: none;
+      }
+    }
+  }
+}

package/trash/scss-old/helpers/_index.scss

@@ -0,0 +1,67 @@
+////
+/// @group helpers (import all)
+////
+
+@forward "typography" as typography-*;
+@forward "display"  as display-*;
+@forward "utilities"  as utilities-*;
+@forward "print"  as print-*;
+@forward "units"  as units-*;
+@forward "color"  as color-*;
+
+@use "sass:map";
+@use "../utils";
+@use "typography";
+@use "display";
+@use "utilities";
+@use "units";
+@use "print";
+@use "color";
+
+// Used to check against user's includes
+
+$-all-includes: (
+  "typography" : true, 
+  "units" : true,
+  "display" : true,
+  "utilities" : true, 
+  "print" : true,
+  "color" : true
+);
+
+/// Prints all Helper styles
+/// @name helper-styles
+/// @param {List} $includes AA list of changes to this module's includes
+/// @example scss
+///  @include ulu.helper-styles();
+
+@mixin styles($includes: null) {
+  @include utils.file-header("helpers");
+  @if $includes {
+    @include utils.require-list-contains($-all-includes, $includes);
+    $-all-includes: map.merge($-all-includes, $includes) !global;
+  }
+  @if (map.get($-all-includes, "typography")) {
+    @include typography.styles;
+  }
+  @if (map.get($-all-includes, "units")) {
+    @include units.styles;
+  }
+  @if (map.get($-all-includes, "display")) {
+    @include display.styles;
+  }
+  @if (map.get($-all-includes, "utilities")) {
+    @include utilities.styles;
+  }
+  @if (map.get($-all-includes, "print")) {
+    @include print.styles;
+  }
+  @if (map.get($-all-includes, "color")) {
+    @include color.styles;
+  }
+}
+
+
+
+
+

package/trash/scss-old/helpers/_print.scss

@@ -0,0 +1,59 @@
+////
+/// @group helpers-print
+////
+
+/// Printed Media Styles 
+/// @name helper-print-styles
+/// @example scss
+///  @include ulu.helper-print-styles();
+
+@mixin styles {
+  // Note: this is an old framework stylesheet (may be outdated)
+  @media (print) {
+    .no-print { 
+      display: none; 
+    }
+    * {
+      background: transparent !important;
+      color: black !important;
+      box-shadow: none !important;
+      text-shadow: none !important;
+      filter: none !important;
+    }
+  
+    /* Black prints faster: h5bp.com/s */
+    a, 
+    a:visited {
+      text-decoration: underline;
+    }
+  
+    /* Don't show links for images, or javascript/internal links */
+    pre, 
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+  
+    /*thead {
+      display: table-header-group;
+    }*/
+  
+    /* h5bp.com/t */
+    tr, img {
+      page-break-inside: avoid;
+    }
+    img {
+      max-width: 100% !important;
+    }
+    p, 
+    h2, 
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+    h2, 
+    h3 {
+      page-break-after: avoid;
+    }
+  }
+}

package/trash/scss-old/helpers/_typography.scss

@@ -0,0 +1,73 @@
+////
+/// @group helpers-typography
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../typography";
+
+/// Prints Typography Helper styles
+/// @name helper-typography-styles
+/// @example scss
+///  @include ulu.helper-typography-styles();
+/// @example html {preview}  Example of type size as helper prefixed
+///  <span class="type-large-xxx">A</span>
+///  <span class="type-large-xx">A</span>
+///  <span class="type-large-x">A</span>
+///  <span class="type-large">A</span>
+///  <span class="type-base">A</span>
+///  <span class="type-small">A</span>
+///  <span class="type-small-x">A</span>
+
+@mixin styles {
+  
+  @include utils.file-header('helpers', 'typography');
+
+  $prefix: selector.class("type");
+
+  @each $size, $values in typography.$sizes {
+    @if (map.get($values, "helper-class")) {
+      @if (map.get($values, "helper-class-prefixed")) {
+        #{ $prefix }-#{$size} {
+          @include typography.size($size);
+        }
+      } @else {
+        .#{$size} {
+          @include typography.size($size);
+        }
+      }
+    }
+  }
+  
+  #{ $prefix }-light    { font-weight: typography.get("font-weight-light"); }
+  #{ $prefix }-normal   { font-weight: typography.get("font-weight-normal"); }
+  #{ $prefix }-semibold { font-weight: typography.get("font-weight-semibold"); }
+  #{ $prefix }-bold     { font-weight: typography.get("font-weight-bold"); }
+  
+  #{ $prefix }-italic   { font-style: italic; }
+
+  #{ $prefix }-center   { text-align: center; }
+  #{ $prefix }-left     { text-align: left; }
+  #{ $prefix }-right    { text-align: right; }
+
+  #{ $prefix }-upper    { 
+    text-transform: uppercase; 
+    letter-spacing: typography.get("letter-spacing-uppercase");
+  }
+  #{ $prefix }-lower    { text-transform: lowercase; }
+  #{ $prefix }-title    { text-transform: capitalize; }
+
+  #{ $prefix }-family { font-family: typography.get("font-family"); }
+  #{ $prefix }-family-sans { font-family: typography.get("font-family-sans"); }
+  #{ $prefix }-family-serif { font-family: typography.get("font-family-serif"); }
+  #{ $prefix }-family-mono { font-family: typography.get("font-family-monospace"); }
+
+  #{ $prefix }-word-break { @include typography.word-break(); }
+  #{ $prefix }-word-break-all { @include typography.word-break(true); }
+
+  #{ $prefix }-max-width { max-width: typography.get("max-width"); }
+  #{ $prefix }-max-width-small { max-width: typography.get("max-width-small"); }
+  #{ selector.class("line-height") }-dense { line-height: typography.get("line-height-dense"); }
+  #{ selector.class("line-height") }-spaced { line-height: typography.get("line-height-spaced"); }
+}

package/trash/scss-old/helpers/_units.scss

@@ -0,0 +1,68 @@
+////
+/// @group helpers-units
+////
+
+@use "sass:map";
+@use "../units";
+@use "../utils";
+@use "../selector";
+
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
+
+$config: (
+  "sides": ("top", "bottom", "left", "right")
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss - General example, replace module-name with module's name
+///   @include module-name.set(( "property" : value ));
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss - General example, replace module-name with module's name
+///   @include module-name.get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "units [config]");
+}
+
+/// Prints all unit helper classes
+
+@mixin styles {
+  @include utils.file-header('helpers', 'leading');
+  @include create-property-classes("margin", selector.class("margin"));
+  @include create-property-classes("padding", selector.class("padding"));
+}
+
+/// Creates the unit classes with all variations (from unit presets)
+/// - This can be used by itself if not outputing .styles() or if you wanted to change the default prefixes
+@mixin create-property-classes($property, $prefix) {
+  // On all sides
+  #{ $prefix } {
+    #{ $property } : units.get(1);
+  }
+  @each $name, $value in units.$config {
+    #{ $prefix }-#{ $name } {
+      #{ $property }: units.get($name);
+    }
+  }
+  // Individual sides
+  @each $side in get("sides") {
+    $full-prop: #{ $property }-#{ $side };
+    #{ $prefix }-#{ $side } {
+      #{ $full-prop }: units.get(1);
+    }
+    @each $name, $value in units.$config {
+      #{ $prefix }-#{ $side }-#{ $name } {
+        #{ $full-prop }: units.get($name);
+      }
+    }
+  }
+}

package/trash/scss-old/helpers/_utilities.scss

@@ -0,0 +1,82 @@
+////
+/// @group helpers-utilities
+////
+
+@use "../utils";
+@use "../utility";
+@use "../layout";
+
+/// Print utilities helper styles
+/// @name helper-utilities-styles
+/// @example scss
+///  @include ulu.helper-utilities-styles();
+
+@mixin styles {
+
+  @include utils.file-header('helpers', 'utilities');
+  
+  // Consider removing
+  .no-scroll-y { 
+    overflow-y: hidden; 
+  }
+  .no-scroll-x { 
+    overflow-x: hidden; 
+  }
+  .full-height {
+    height: 100%;
+  }
+  .full-min-height {
+    min-height: 100%;
+  }
+  .image-fill {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .image-full-width img,
+  .image-full-width {
+    width: 100%;
+    height: auto;
+  }
+  .margin-auto,
+  .center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .margin-left-auto {
+    margin-left: auto;
+  }
+  .margin-right-auto {
+    margin-right: auto;
+  }
+  .no-margin {
+    margin: 0;
+  }
+  .no-margin-top {
+    margin-top: 0;
+  }
+  .no-margin-bottom {
+    margin-bottom: 0;
+  }
+  .no-margin-left {
+    margin-left: 0;
+  }
+  .no-margin-right {
+    margin-right: 0;
+  }
+  .no-padding {
+    padding: 0;
+  }
+  .no-padding-top {
+    padding-top: 0;
+  }
+  .no-padding-bottom {
+    padding-bottom: 0;
+  }
+  .no-padding-left {
+    padding-left: 0;
+  }
+  .no-padding-right {
+    padding-right: 0;
+  }
+}

package/trash/scss-old/packages/README.md

@@ -0,0 +1,3 @@
+# About Packages
+
+Packages are imports than bring in certain sets of stylesheets or libraries.

package/trash/scss-old/packages/everything.scss

@@ -0,0 +1,17 @@
+////
+/// @group packages
+////
+
+/// Stylesheet includes everything user just imports it
+/// - Note: Not configurable as far as output of styles (use minimal)
+
+@forward "../";
+
+@use "../base";
+@use "../components";
+@use "../helpers";
+
+// Output all stylesheets
+@include base.styles();
+@include components.styles();
+@include helpers.styles();

package/trash/scss-old-2/README.md

@@ -0,0 +1,58 @@
+
+### Directory Contents/Structure
+
+1. Base - The area for the base styles (normalize, html elements)
+2. Components - The area for reusable ui/layout components
+3. Helpers - The place for stylesheets that provide overriding/atomic styles (accessibility, type classes, etc)
+4. Lib - The modules that are used throughout the system and on the user's side
+5. Packages - Entry points for users with preset imports 
+   - Note: User's will need to add a namespace like `ulu` when importing a package
+
+### Important Goals
+
+1. You should be able get access to anything from the user's side
+   - Mixins, Functions, Variables
+   - Styles - Things should be able to be 
+     - Extended into a pre-existing system (when you have little selector control)
+     - Mixing in styles when needed
+       - Use placeholders as a more flexible selector system
+2. Namespacing
+   - Should you be able to namespace the library (selectors not modules)?
+     - Would create a log of interpolation which makes the codebase harder to maintain
+     - Bigger barrier if someone else works into this
+     - Probably important with certain components
+     - If it's within a module/component (interpolation) it's probably not a huge deal
+
+### Rules
+
+- Leverage default parameters in mixin and functions over config defaults that rely on other module's configuration
+  - Testing shows that these are evaluated when the function is called, which makes sense because if not these may have all the same references (thinking JS has the parameter scope and is evaluated on call)
+- No changing vars (aka with)
+- No extending (not supported, only within the same module for convenience)
+- No relying on use of @use > with to configure, it's too complicated for user (and me). 
+  - Use mixin to set vars (kind of a pain but we should probably rely more on maps so there isn't so much repetition)
+- Kabab case will be used for everything, @see "Module Prefixes" below, works better with kabab case
+- Modules use simple variable, mixins and function names relative to their module
+- Forwards will make namespacing in the overall ulu packaged module
+- **Module Prefixes:** Modules all get prefixed by parent module ie lib will transform color.set() to color-set(), adding the modules namespace for users that are importing the whole library. It also matches the core modules `map-get()` and when @used `map.get()`
+
+### Writing Docs
+
+- Should be written from the user's point of view
+  - Use prefixes @see "Module Prefixes" in member names. This will avoid confusion about normal use case. For advanced user importing specific parts would already be familiar with this pattern. 
+
+### Ideas
+
+- How to solve the inability to use standard vars (avoid with)
+  - Use maps (reduce code repetition, just need boiler plate get/set (may be able to contain this in utils and extend the module not sure if you can add functions to a namespace dynamically?))
+    - Issue: You can't use it for grandchild deps defaults, aka if another dep has .get() then it will get the unconfigured value
+      - The issue is that these things are not references or there is no way to easily poin
+      - Think how do we solve this in JS?
+      - Could this be solved by some standardized lifecycle?
+        - Fuzzy but something that the user has to call to initialize? (don't like this)
+      - Could this be solved by tokens? Like the color library (actual value is set when requested, versus variables (on module init))
+    - Note: This is one reason the element system ("_element()") mixin could be handy across the board. It still has the same issue though in terms of references changing (maps being cloned and they aren't references)
+    - Could use a global config/theme and allow that to be set with "with"
+    - Or allow the user to configure the modules and not try and group modules
+      - One flat list
+    - Needs more thought