@matteusan/himig 1.0.0

package/README.md

@@ -0,0 +1,29 @@
+![Gaia Logo Light Mode](https://raw.githubusercontent.com/GrowStocks/gaia/main/media/gds-logo-light.svg?sanitize=true#gh-light-mode-only)
+![Gaia Logo Dark Mode](https://raw.githubusercontent.com/GrowStocks/gaia/main/media/gds-logo-dark.svg?sanitize=true#gh-dark-mode-only)
+
+## Prerequisites
+Be sure to have [NodeJS](https://nodejs.org) LTS installed. Any other version will risk the project breaking in
+development.
+This design system is dependent on the CSS preprocessor, [Sass](https://sass-lang.com). When using sass, **be sure to
+use DartSass instead of the now deprecated LibSass (node-sass)**.
+
+## Setup
+```sh
+$ npm install @growstocks/himig --save
+
+# or
+
+$ yarn add @growstocks/himig
+```
+```scss
+// main.scss
+
+@use 'node_modules/@matteusan/himig';
+@use 'node_modules/@matteusan/himig/ms-button';
+
+@include himig.init {
+  @include ms-button.render();
+}
+```
+## Contributing
+Contributing guidelines are located [here](https://github.com/GrowStocks/gaia/tree/main/.github/CONTRIBUTING.md).

package/_index.scss

@@ -0,0 +1,219 @@
+//---------------------------------------------------
+//  Copyright (c) 2024 MatteuSan
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in all
+//  copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+//  SOFTWARE.
+//---------------------------------------------------
+
+$expressive-inks: false !default;
+$module-mode: false !default;
+$test-mode: $module-mode !default;
+$vue-mode: $test-mode !default;
+
+@use 'ms-core' with (
+  $expressive-inks: $expressive-inks,
+  $module-mode: $module-mode,
+  $test-mode: $test-mode,
+  $vue-mode: $vue-mode,
+);
+@use 'sass:map';
+@use 'init-font-pack' as font-pack;
+
+// For accessing core lib from the main himig module.
+@forward 'ms-core';
+
+@mixin init(
+  $surface: 'ms-blue',
+  $accent: 'ms-yellow',
+  $background: 'ms-blue.800',
+  $error: 'ms-red',
+  $warning: 'ms-yellow',
+  $success: 'ms-green',
+  $undefined: 'ms-grey',
+  $radius: (),
+  $global: (),
+  $supertitle: (),
+  $title: (),
+  $subtitle: (),
+  $body: (),
+  $mono: (),
+  $small: (),
+  $breakpoints: (),
+  $extend: (),
+) {
+
+  $_init-family: 'family.sans-serif';
+  $_init-line-height: 'line-height.normal';
+
+  $_init-type-global: (
+    'family': $_init-family,
+    'size': 'size.sm',
+    'weight': 'weight.normal',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-type-supertitle: (
+    'family': $_init-family,
+    'size': 'size.xl',
+    'weight': 'weight.black',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-type-title: (
+    'family': $_init-family,
+    'size': 'size.lg',
+    'weight': 'weight.bold',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-type-subtitle: (
+    'family': $_init-family,
+    'size': 'size.md',
+    'weight': 'weight.bold',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-type-body: (
+    'family': $_init-family,
+    'size': 'size.sm',
+    'weight': 'weight.normal',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-type-mono: (
+    'family': 'family.mono',
+    'size': 'size.sm',
+    'weight': 'weight.normal',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-type-small: (
+    'family': $_init-family,
+    'size': 'size.xs',
+    'weight': 'weight.light',
+    'line-height': $_init-line-height,
+  );
+
+  $_init-breakpoints: (
+    'small': ms-core.primitive-token-get('breakpoint.sm'),
+    'medium': ms-core.primitive-token-get('breakpoint.md'),
+    'large': ms-core.primitive-token-get('breakpoint.lg'),
+    'xlarge': ms-core.primitive-token-get('breakpoint.xl'),
+  );
+
+  :root {
+    @include ms-core.primitive-token-register($map: $extend);
+    @include ms-core.theme-config(
+      $surface: $surface,
+      $accent: $accent,
+      $background: $background,
+      $error: $error,
+      $warning: $warning,
+      $success: $success,
+      $undefined: $undefined,
+      $radius: $radius,
+      $breakpoints: $breakpoints,
+      $global: map.merge($_init-type-global, $global),
+      $supertitle: map.merge($_init-type-supertitle, $supertitle),
+      $title: map.merge($_init-type-title, $title),
+      $subtitle: map.merge($_init-type-subtitle, $subtitle),
+      $body: map.merge($_init-type-body, $body),
+      $mono: map.merge($_init-type-mono, $mono),
+      $small: map.merge($_init-type-small, $small),
+    );
+
+    // Immutables
+    --ms-shadow-color: rgba(0, 0, 0, 0.25);
+    --ms-sprite-size: 32px;
+    --ms-transition-time: 0.2s;
+  }
+
+  @include ms-core.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));
+
+  @include font-pack.load((
+    'global': map.get($global, 'family'),
+    'supertitle': map.get($supertitle, 'family'),
+    'title': map.get($title, 'family'),
+    'subtitle': map.get($subtitle, 'family'),
+    'body': map.get($body, 'family'),
+    'mono': map.get($mono, 'family'),
+    'small': map.get($small, 'family'),
+  ));
+
+  *,
+  :before,
+  :after {
+    margin: 0;
+    padding: 0;
+    box-sizing: inherit;
+    color: inherit;
+  }
+
+  html {
+    box-sizing: border-box;
+    font-size: 100%;
+  }
+
+  body {
+    background: ms-core.key-create('body-fill', ms-core.token-get('background'));
+    color: ms-core.key-create('body-ink', ms-core.token-get('background-ink'));
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  span,
+  a {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: ms-core.primitive-token-get('line-height.normal');
+  }
+
+  main.content-wrap {
+    $margin: 15px;
+    width: calc(100% - #{$margin * 2});
+    max-width: ms-core.key-create('content-wrap-max-width', ms-core.primitive-token-get('dimension.xl'));
+    display: ms-core.key-create('content-wrap-display', grid);
+    grid-template-columns: repeat(ms-core.key-create('content-wrap-cols', 4), 1fr);
+    gap: ms-core.key-create('content-wrap-gap', ms-core.primitive-token-get('spacing.md'));
+    margin: 0 auto;
+    padding:
+      ms-core.key-create('content-wrap-padding-y', ms-core.primitive-token-get('spacing.lg'))
+      ms-core.key-create('content-wrap-padding-x', ms-core.primitive-token-get('spacing.none'));
+
+    @include ms-core.breakpoint-create('medium') {
+      @include ms-core.key-bind('content-wrap-cols', repeat(8, 1fr));
+    }
+
+    @include ms-core.breakpoint-create('large') {
+      @include ms-core.key-bind('content-wrap-cols', repeat(12, 1fr));
+    }
+  }
+
+  @content;
+}