@ulu/frontend 0.0.3

package/trash/scss-old/_color.scss

@@ -0,0 +1,200 @@
+////
+/// @group color
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "utils";
+@use "selector";
+
+/// The color palette map, can be extended or modified with set() and accessed with get()
+/// @type map  
+
+$palette: (
+  "black":        black,
+  "white":        white,
+  "type":         black,
+  "focus":        blue,
+  "error":        red,
+  "accent":       orange,
+  "selected" :    green,
+  "box-shadow":   rgba(0, 0, 0, 0.349),
+  "rule":         gray,
+  "rule-light":   lightgray,
+  "link":         blue,
+  "link:hover":   darkblue,
+  "link:active":  darkblue,
+  "link:visited": purple,
+  "bullet":       inherit
+) !default;
+
+/// Pairs of background-color and color definitions
+/// @type map
+/// @prop {Number|String} $contexts.name.background-color Color value or name of color in $palette
+/// @prop {Number|String} $contexts.name.color Color value or name of color in $palette
+/// @prop {Boolean} $contexts.name.base-class Print this value in the base module as a class (if base prints)
+
+$contexts: (
+  "dark" : (
+    "background-color" : "black",
+    "color" : "white",
+    "base-class" : true
+  ),
+  "light" : (
+    "background-color" : "white",
+    "color" : "black",
+    "base-class" : true
+  ),
+);
+
+/// Palette entries that are output as classes when using all-color-class-styles
+$color-classes: (
+  "black" : true,
+  "white" : true,
+  "type": true
+) !default;
+
+/// Used to override or extend the color palette
+/// @param {Map} $changes A map to merge into the color palette
+/// @example scss Setting the error and type color
+///   @include color.set((
+///     "type" : #444,
+///     "error" : orange,
+///   ));
+
+@mixin set($changes) {
+  $palette: map.merge($palette, $changes) !global;
+}
+
+/// Get a color from the palette by name
+/// @param {String} $name Name of color to get
+/// @return {Color}
+
+@function get($name) {
+  // Allow non lookup if the value is already a color (helps with code flow)
+  @if (meta.type-of($name) == "color") {
+    @return $name;
+  } @else if ($name == "inherit") {
+    @return $name;
+  } @else {
+    @return utils.require-map-get($palette, $name, 'color');
+  }
+}
+
+/// Set ouput classes for all-color-class-styles
+/// @param {Map} $changes Map of changes (you can disable defaults this way)
+
+@mixin set-color-classes($changes) {
+  $color-classes: map.merge($color-classes, $changes) !global;
+}
+
+@function exists($name) {
+  $color: map.get($palette, $name);
+  @return if($color != null, true, false);
+}
+
+/// Set color contexts
+/// @param {Map} $changes A map to merge 
+/// @param {Map} $deep Use deep merge
+/// @param {Map} $overwrite Overwrite the completly (cannot be used with deep)
+/// @example scss Overwriting contexts
+///   @include color.set-contexts((
+///     "dark" : (
+///       "background-color" : red,
+///       "color" : white,
+///     )
+///   ), false, true);
+
+@mixin set-contexts($changes, $deep: false, $overwrite: false) {
+  $contexts: utils.map-merge-or-overwrite($contexts, $changes, $deep, $overwrite) !global;
+}
+
+/// Get a context by name
+/// @param {String} $name Name of context
+/// @return {Map}
+
+@function get-context($name) {
+  @return utils.require-map-get($contexts, $name, 'context');
+}
+
+/// Get a context's value'
+/// @param {String} $name Name of context
+/// @param {String} $prop The property to get
+/// @return {Color}
+
+@function get-context-value($name, $prop) {
+  $context: get-context($name);
+  $value: map.get($context, $prop);
+  // Get from pallete by name
+  @if (meta.type-of($value) == "string") {
+    $value: get($value);
+  }
+  @return $value;
+}
+
+/// Prints contexts styles
+/// @param {String} $name Name of context
+
+@mixin context-styles($name) {
+  $context: get-context($name);
+  background-color: get-context-value($name, "background-color");
+  background: map.get($context, "background"); // Allow gradients/images
+  background-image: map.get($context, "background-image"); // Allow gradients/images
+  color: get-context-value($name, "color");
+}
+
+/// Lighten a color using the default white by a percentage
+/// @param {Color, String} $color Color/palette color name to apply to tint
+/// @param {Number} $percentage Percentage
+/// @return {Color}
+/// @link https://css-tricks.com/snippets/sass/tint-shade-functions/ Modified from source (CSS Tricks, Kitty Giraudel)
+
+@function tint($color, $percentage) {
+  @return mix(get("white"), get($color), $percentage);
+}
+
+/// Darken a color with the default black by a percentage
+/// @param {Color, String} $color Color/palette color name to shade
+/// @param {Number} $percentage Percentage to shade
+/// @return {Color}
+/// @author Kitty Giraudel
+/// @link https://css-tricks.com/snippets/sass/tint-shade-functions/ Modified from source (CSS Tricks, Kitty Giraudel)
+
+@function shade($color, $percentage) {
+  @return mix(get("black"), get($color), $percentage);
+}
+
+/// Prints all context styles 
+/// @param {String} $with-prop Checks the specific context for a certain prop (has to be truthy)(used for output in helper/base color modules)
+/// @example scss
+///  @include ulu.all-context-styles();
+/// @example html {preview} Example of a color-context
+///  <div class="color-context-dark" style="padding: 1rem">
+////   Some text in dark context
+//// </div>
+@mixin all-context-styles($with-prop: null) {
+  $prefix: selector.class("color-context");
+  @each $name, $context in $contexts {
+    @if (not $with-prop or map.get($context, $with-prop)) {
+      #{ $prefix }-#{ $name } {
+        @include context-styles($name);
+      }
+    }
+  }
+}
+
+/// Outputs all color classes
+/// @example scss
+///  @include ulu.all-color-class-styles();
+/// @example html {preview} Example of a color-context
+///  <span class="color-name">Some text</span>
+@mixin all-color-class-styles() {
+  $prefix: selector.class("color");
+  @each $name, $output in $color-classes {
+    @if ($output) {
+      #{ $prefix }-#{ $name } {
+        color: get($name);
+      }
+    }
+  }
+}

package/trash/scss-old/_element.scss

@@ -0,0 +1,262 @@
+////
+/// @group element
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "color";
+@use "utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.backdrop-blur Backdrop blur amount used on elements/components
+/// @prop {Color} $config.backdrop-color Backdrop color (modal overlays, etc)
+/// @prop {List} $config.box-shadow Box-shadow definition for elements that are on top of page
+/// @prop {List} $config.box-shadow-raised Box-shadow definition for elements that are raised off of the page (dropdowns, etc)
+/// @prop {List} $config.box-shadow-above Box-shadow definition for elements that are above the page (fixed items, etc)
+/// @prop {Number} $config.border-radius Common element border radius
+/// @prop {Number} $config.border-radius-small Common element border radius (small)
+/// @prop {Number} $config.border-radius-large Common element border radius (large)
+/// @prop {List} $config.text-shadow Common text shadow
+/// @prop {Number} $config.margin-small Common element margin (small) (default for lists)
+/// @prop {Number} $config.margin Common element margin
+/// @prop {Number} $config.margin-large Common element margin (large)
+/// @prop {String} $config.ol-list-style-type Ordered list type (level 1)
+/// @prop {String} $config.ol-list-style-type-2 Ordered list type (level 2)
+/// @prop {String} $config.ol-list-style-type-3 Ordered list type (level 3)
+/// @prop {String} $config.ul-list-style-type
+/// @prop {String} $config.ul-list-style-type-2
+/// @prop {String} $config.ul-list-style-type-3
+/// @prop {String} $config.link-text-decoration-default Whether links use underline, remember that removing underline will create an accessiblity issue (not relying on color)
+/// @prop {String} $config.link-text-decoration
+/// @prop {String} $config.link-text-decoration-style
+/// @prop {Color} $config.link-text-decoration-color
+/// @prop {String} $config.link-text-decoration-style-hover
+/// @prop {Color} $config.link-text-decoration-color-hover
+/// @prop {Number} $config.link-text-decoration-thickness
+/// @prop {Number} $config.link-text-underline-offset
+
+$config: (
+  "backdrop-blur":                    4px,
+  "backdrop-color":                   rgba(73, 73, 73, 0.459),
+  "box-shadow":                       0 1px 5px color.get('box-shadow'),
+  "box-shadow-raised":                0 1px 12px color.get('box-shadow'),
+  "box-shadow-above":                 0 1px 20px color.get('box-shadow'),
+  "border-radius":                    6px,
+  "border-radius-small":              3px,
+  "border-radius-large":              5%,
+  "text-shadow":                      0 1px 4px rgba(0,0,0,0.3),
+  "margin-small":                     0.65em,
+  "margin":                           1em,
+  "margin-large":                     2em,
+  "ol-list-style-type":               decimal,
+  "ol-list-style-type-2":             lower-alpha,
+  "ol-list-style-type-3":             lower-roman,
+  "ul-list-style-type":               disc,
+  "ul-list-style-type-2":             circle,
+  "ul-list-style-type-3":             square,
+  "link-text-decoration-default":     none,
+  "link-text-decoration":             underline,
+  "link-text-decoration-style":       dotted,
+  "link-text-decoration-color":       initial,
+  "link-text-decoration-style-hover": solid,
+  "link-text-decoration-color-hover": false,
+  "link-text-decoration-thickness":   0.1em,
+  "link-text-underline-offset" :     auto
+) !default;
+
+/// Rule style map, redifine defaults or add to
+/// @type Map
+
+$rule-styles: (
+  "default": 1px solid color.get("rule"),
+  "light":   1px solid color.get("rule-light"),
+) !default;
+
+/// Common rule margins (space between rule and type)
+/// @type Map
+
+$rule-margins: (
+  "smallest": 0.5rem,
+  "small":    1rem,
+  "medium":   2rem,
+  "large":    3rem
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+///   @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
+///   @include module-name.get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "element [config]");
+}
+
+/// Sets rule styles
+/// @param {Map} $changes Map of changes
+
+@mixin set-rule-styles($changes) {
+  $rule-styles: map.merge($rule-styles, $changes) !global;
+}
+
+/// Sets rule margins
+/// @param {Map} $changes Map of changes
+
+@mixin set-rule-margins($changes) {
+  $rule-margins: map.merge($rule-margins, $changes) !global;
+}
+
+/// Get a rule style
+/// @param {Map} $changes Map of changes
+
+@function get-rule-style($name: "default") {
+  @return utils.require-map-get($rule-styles, $name, "element [rule style]");
+}
+
+/// Sets rule margin
+/// @param {Map} $changes Map of changes
+
+@function get-rule-margin($name) {
+  @return utils.require-map-get($rule-margins, $name, "element [rule style]");
+}
+
+/// Get full rule CSS (style and margin)
+/// @param {Map} $changes Map of changes
+
+@mixin rule(
+  $style-name: "default", 
+  $margin-name: null
+) {
+  @include rule-style($style-name);
+  @include rule-margin($margin-name);
+}
+@mixin rule-style($name: "default") {
+  border-bottom: get-rule-style($name);
+}
+@mixin rule-margin($name:  null) {
+  $margin: if($name, get-rule-margin($name), get("margin"));
+  margin-top: $margin;
+  margin-bottom: $margin;
+}
+
+/// Print link styles
+/// @param {Boolean} $visited Include visited style
+/// @param {Boolean} $active Include active style
+
+@mixin link($visited: false, $active: false) {
+  color: color.get("link");
+  text-decoration: get("link-text-decoration");
+  text-decoration-style: get("link-text-decoration-style");
+  text-decoration-color: get("link-text-decoration-color");
+  text-decoration-thickness: get("link-text-decoration-thickness");
+  text-underline-offset: get("link-text-underline-offset");
+  &:hover {
+    color: color.get("link:hover");
+    text-decoration-style: get("link-text-decoration-style-hover");
+    text-decoration-color: get("link-text-decoration-color-hover");
+  }
+  @if ($visited) {
+    &:visited {
+      color: color.get("link:visited");
+    }
+  }
+  @if ($active) {
+    &:active {
+      color: color.get("link:active");
+    }
+  }
+}
+
+/// Print the defautl link styling (no hover and focus styles)
+
+@mixin link-defaults() {
+  color: color.get("link");
+  text-decoration: get("link-text-decoration-default");
+}
+
+/// Print the ordered list items styling
+/// @param {Boolean} $bullet-color Optional bullet color (defaults to palette 'bullet')
+
+@mixin styles-ordered-list($bullet-color: "bullet") {
+  margin-bottom: get("margin");
+  list-style: get("ol-list-style-type") outside;
+  li {
+    margin-bottom: get("margin-small");
+    margin-left: 1em;
+  }
+  > li {
+    &::marker {
+      color: color.get($bullet-color);
+    }
+  }
+  ol {
+    margin: get("margin-small") 0 0 get("margin-small");
+    list-style: get("ol-list-style-type-2");
+    ol { 
+      list-style-type: get("ol-list-style-type-3");
+    }
+  }
+  ul,
+  ol {
+    margin-top: get("margin-small");
+    margin-bottom: get("margin-small");
+  }
+}
+
+/// Print the unordered list items styling
+/// @param {Boolean} $bullet-color Optional bullet color
+
+@mixin styles-unordered-list($bullet-color: "bullet") {
+  list-style: get("ul-list-style-type") outside;
+  > li {
+    margin-left: 1.5em;
+    margin-bottom: get("margin-small");
+    &::marker {
+      color: color.get($bullet-color);
+    }
+  }
+  ul {
+    list-style-type: get("ul-list-style-type-2");
+  }
+   ul ul {
+    list-style-type: get("ul-list-style-type-3");
+  }
+  ul,
+  ol {
+    margin-top: get("margin-small");
+    margin-bottom: get("margin-small");
+  }
+}
+
+/// Hide text for assistive devices
+/// @param {Boolean} $hidden Defaults to true, pass false to override the hidden css (ie. on focus)
+/// @example scss
+///   @include ulu.layout-hidden-visually()
+///   // Reset styling
+///   @include ulu.layout-hidden-visually(false)
+
+@mixin hidden-visually($hidden: true) {
+  @if $hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  } @else {
+    clip: auto;
+    clip-path: none;
+    height: auto;
+    overflow: visible;
+    position: static;
+    white-space: normal;
+    width: auto;
+  }
+}