@aarhus-university/au-designsystem-delphinus 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.0.2 (July 27, 2023)
+
+### Core Delphinus Updates
+* Adds compilation of missing css file for the [BEM documentation page](https://delphinus.au.dk/code/bem-class-naming).
+
+### Delphinus Projects Updates
+None
+
+
 ## 1.0.1 (July 21, 2023)
 
 ### Core Delphinus Updates

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@aarhus-university/au-designsystem-delphinus",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "scripts": {
     "start": "concurrently \"npm run nodemon\" \"npm run sass\" \"npm run build\"",
     "nodemon": "nodemon ./bin/www",
-    "sass": "sass --watch source/style.scss:public/style.css source/projects/bachelor-applications/style.scss:public/projects/bachelor-applications/style.css source/projects/brightspace/style.scss:public/projects/brightspace/style.css source/projects/course-catalogue/style.scss:public/projects/course-catalogue/style.css source/projects/medarbejdere/style.scss:public/projects/medarbejdere/style.css source/projects/mitstudie/style.scss:public/projects/mitstudie/style.css source/projects/queue-it/style.scss:public/projects/queue-it/style.css source/projects/typo3/style.scss:public/projects/typo3/style.css source/demo-style.scss:public/demo-style.css source/atoms/misc/atoms-style.scss:public/atoms/atoms-style.css source/atoms/misc/atom-iframe.scss:source/atoms/misc/atom-iframe.css            source/atoms/fonts/atom-fonts.scss:public/atoms/fonts/atom-fonts.css source/atoms/colors/atom-colors.scss:public/atoms/colors/atom-colors.css source/atoms/spacing/atom-spacing.scss:public/atoms/spacing/atom-spacing.css source/figma-tokens/cssvars/figma-tokens.scss:public/figma-tokens/style.css",
+    "sass": "sass --watch source/style.scss:public/style.css source/projects/bachelor-applications/style.scss:public/projects/bachelor-applications/style.css source/projects/brightspace/style.scss:public/projects/brightspace/style.css source/projects/course-catalogue/style.scss:public/projects/course-catalogue/style.css source/projects/medarbejdere/style.scss:public/projects/medarbejdere/style.css source/projects/mitstudie/style.scss:public/projects/mitstudie/style.css source/projects/queue-it/style.scss:public/projects/queue-it/style.css source/projects/typo3/style.scss:public/projects/typo3/style.css source/demo-style.scss:public/demo-style.css source/atoms/misc/atoms-style.scss:public/atoms/atoms-style.css source/atoms/misc/atom-iframe.scss:source/atoms/misc/atom-iframe.css source/atoms/fonts/atom-fonts.scss:public/atoms/fonts/atom-fonts.css source/atoms/colors/atom-colors.scss:public/atoms/colors/atom-colors.css source/atoms/spacing/atom-spacing.scss:public/atoms/spacing/atom-spacing.css source/style/module-demo/demo-component.scss:public/demo/demo-component.css source/figma-tokens/cssvars/figma-tokens.scss:public/figma-tokens/style.css",
     "build": "node ./esbuild.mjs"
   },
   "dependencies": {

package/public/demo/demo-component.css

@@ -0,0 +1,38 @@
+.content-container > *:first-child:not(.row) {
+  margin-top: 0;
+}
+.content-container > *:last-child:not(.row) {
+  margin-bottom: 0;
+}
+
+.component {
+  padding: var(--spacing-m1);
+  background-color: var(--color-background-secondary);
+  color: var(--color-foreground);
+}
+.component > *:first-child:not(.row) {
+  margin-top: 0;
+}
+.component > *:last-child:not(.row) {
+  margin-bottom: 0;
+}
+.component--warning {
+  background-color: var(--color-utility-warning-background);
+  color: var(--color-utility-foreground);
+}
+.component__header {
+  margin-bottom: var(--spacing-m5);
+  font-size: var(--font-size-p1);
+  line-height: calc(1.1em + 0.3rem);
+  font-weight: 700;
+}
+.component__header--shout {
+  text-transform: uppercase;
+}
+.component__content {
+  font-size: var(--font-size-0);
+  line-height: calc(1.1em + 0.7rem);
+  font-weight: 400;
+}
+
+/*# sourceMappingURL=demo-component.css.map */

package/source/markup/code/bem-class-naming.pug

@@ -11,7 +11,7 @@ block append script
   script(src="/js/3rdparty/prism.js")
 
 block append style
-  link(rel='stylesheet' href='/style/module-demo/demo-component.css')
+  link(rel='stylesheet' href='/demo/demo-component.css')
 
 block content
   .page__content__block

package/source/markup/code/borders.pug

@@ -0,0 +1,81 @@
+extends ../partials/page-templates/_layout.pug
+include ../partials/mixins-demo/_nav-code.pug
+include ../partials/mixins-demo/_code-documentation.pug
+
+block append variables
+  - var sidebar = true
+  - var active_nav_item = "code"
+  - var page_title = "Code: variables for borders"
+
+block append script
+  script(src="/js/3rdparty/prism.js")
+
+block content
+  .page__content__block
+    h1 
+      span.text--stamp Sass
+      | Variables for
+      | 
+      strong borders
+
+    p Variables for styling
+      | 
+      code :focus
+      | 
+      | states with an outline. The outline should be styled as a border with a small offset. The outline has the same color across all themes, both in dark and normal modes. 
+
+    +usage(null)
+      | border-width: $width-border;
+      | 
+      | border-width: $width-border-slim;
+      | 
+      | border-width: $nav-width-active-style;
+      | 
+      | border-width: $width-border-utility;
+
+    h2 Examples
+    .demo-code-block
+      +codeblock("scss")
+        | input[type="text"] {
+        |   border: $width-border solid color("border");
+        | }
+      +codeblock("css")
+        | input[type="text"] {
+        |   border: 2px solid var(--color-border); /* #9e9e9e */
+        | }
+
+    .demo-code-block
+      +codeblock("scss")
+        | tr {
+        |   border-top: $width-border-slim solid color("border");
+        | }
+      +codeblock("css")
+        | tr {
+        |   border-top: 1px solid var(--color-border); /* #9e9e9e */
+        | }
+
+    .demo-code-block
+      +codeblock("scss")
+        | .nav__item--active {
+        |   border-bottom-width: $nav-width-active-style;
+        | }
+      +codeblock("css")
+        | .nav__item--active {
+        |   border-bottom-width: 4px;
+        | }
+
+    .demo-code-block
+      +codeblock("scss")
+        | .callout {
+        |   border-left: $width-border-utility solid color("utility-attention");
+        | }
+      +codeblock("css")
+        | .callout {
+        |   border-left: 6px solid var(--color-utility-attention"); /* #ffa620 */
+        | }   
+
+
+
+
+block sidebar
+  +nav-code("borders")

package/source/markup/code/index.pug

@@ -51,7 +51,7 @@ block content
       | 
       | repository. 
     p The bolierplate-file can then be appended with more
-      | 
+      |
       code @import
       |'s of your own creation, that can make use of our Sass mixins, functions and variables; see the menu.
 
@@ -68,9 +68,6 @@ block content
 
     pre
       code(class="language-bash") https://cdn.jsdelivr.net/npm/@aarhus-university/au-designsystem-delphinus@x.x.x/public/style.css
-      
-    +notification().notification--attention.notification--constrain-width.vertical-spacing-top
-      p The documenation on the these pages are some intial documenation of the sass code base. It is not yet complete. Menu items marked with * are not written yet, but are meant to provide an overview of the most important features.  
     
     h2 Got questions?
     ul

package/source/markup/code/shadows.pug

@@ -0,0 +1,72 @@
+extends ../partials/page-templates/_layout.pug
+include ../partials/mixins-demo/_nav-code.pug
+include ../partials/mixins-demo/_code-documentation.pug
+
+block append variables
+  - var sidebar = true
+  - var active_nav_item = "code"
+  - var page_title = "Code: variables for shadows"
+
+block append script
+  script(src="/js/3rdparty/prism.js")
+
+block content
+  .page__content__block
+    h1 
+      span.text--stamp Sass
+      | Variables for
+      | 
+      strong shadows
+
+    p Variables for setting
+      | 
+      code box-shadow
+      |. The are three different styles for shadows: Front, center and back. They only differ in how far above the page the element apper to be.
+    p The frontmost shadow is intend for primary interactive elements, like buttons, and for content panels that float on top of the page, like modals. The center shadow is intended for secondary interactive elements, like selects. The backmost shadow is intend for the
+      | 
+      code :active
+      | 
+      | of such elements.
+
+    +usage(null)
+      | box-shadow: $shadow-style-front color("shadow");
+      | 
+      | box-shadow: $shadow-style-center color("shadow");
+      | 
+      | box-shadow: $shadow-style-back color("shadow");
+
+    h2 Examples
+    .demo-code-block
+      +codeblock("scss")
+        | button {
+        |   box-shadow: $shadow-style-front color("shadow");
+        | }
+      +codeblock("css")
+        | button {
+        |   box-shadow: 0 0.2rem 0.6rem 0 var(--color-shadow); /* rgba(0, 0, 0, 0.4) */
+        | }
+
+    .demo-code-block
+      +codeblock("scss")
+        | select {
+        |   box-shadow: $shadow-style-center color("shadow");
+        | }
+      +codeblock("css")
+        | select {
+        |   box-shadow: 0 0.1rem 0.3rem 0 var(--color-shadow); /* rgba(0, 0, 0, 0.4) */
+        | }   
+
+    .demo-code-block
+      +codeblock("scss")
+        | button:active {
+        |   box-shadow: $shadow-style-back color("shadow");
+        | }
+      +codeblock("css")
+        | button:active {
+        |   box-shadow: 0 0.05rem 0.2rem 0 var(--color-shadow); /* rgba(0, 0, 0, 0.4) */
+        | }  
+
+
+
+block sidebar
+  +nav-code("shadows")

package/source/markup/partials/mixins-demo/_nav-code.pug

@@ -19,8 +19,8 @@ mixin nav-code(active_item = null)
       ["font-size", "font-size"],
       ["line-height", "line-height"],
       ["spacing", "spacing"],
-      ["borders", "*Borders", "Sass variables"],
-      ["shadows", "*Shadows"],
+      ["borders", "Borders", "Sass variables"],
+      ["shadows", "Shadows"],
       ["outline", "Outline"],
     ]
     

package/source/style/module-demo/demo-component.scss

@@ -1,3 +1,6 @@
+// Math module for division
+@use "sass:math";
+
 @import "../../atoms/atoms-settings";
 @import "../../atoms/colors/colors";
 @import "../../atoms/fonts/fonts";