@graupl/graupl 1.0.0-alpha.13 → 1.0.0-alpha.15

package/docs/mixins.md

@@ -0,0 +1,47 @@
+# Mixins
+
+A mixin used to define layers. So the styling is exported in the correct order.
+
+`*@mixin* layer($layer)`
+
+A media query for targetting users who have not requested reduced motion.
+
+```jsx
+@mixin animation-on {
+  @media (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}
+```
+
+A media query for targetting users who have requested reduced motion.
+
+```jsx
+@mixin animation-off {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+```
+
+A media query for targetting specific screen sizes.
+
+```sass
+@mixin screen($size) {
+  $screen-size: map.get(root-defaults.$screen-sizes, $size);
+
+  @media screen and #{$screen-size} {
+    @content;
+  }
+}
+```
+
+```sass
+@mixin screen-trigger($size) {
+  $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $size);
+
+  @media screen and #{$screen-size-trigger} {
+    @content;
+  }
+}
+```

package/docs/state.md

@@ -0,0 +1,67 @@
+## State
+
+State is used to style elements when a pseudo element is active like focus.
+
+Defaults
+
+```sass
+$focus-outline-style: dotted !default;
+$focus-box-shadow-style: inset !default;
+```
+
+Variables
+
+The focus width property:
+
+```scss
+--#{root-defaults.$prefix}-focus-width
+
+```
+
+The focus outline color property:
+
+```scss
+--#{root-defaults.$prefix}-focus-outline-color
+
+```
+
+The focus outline width property:
+
+```scss
+--#{root-defaults.$prefix}-focus-outline-width
+
+```
+
+The focus outline style property:
+
+```scss
+--#{root-defaults.$prefix}-focus-outline-style
+
+```
+
+The focus outline offset property:
+
+```scss
+--#{root-defaults.$prefix}-focus-outline-offset
+
+```
+
+The focus box shadow color property:
+
+```scss
+--#{root-defaults.$prefix}-focus-box-shadow-color
+
+```
+
+The focus box shadow style property:
+
+```scss
+--#{root-defaults.$prefix}-focus-box-shadow-style
+
+```
+
+The focus box shadow property:
+
+```scss
+--#{root-defaults.$prefix}-focus-box-shadow
+```

package/docs/theme.md

@@ -0,0 +1,258 @@
+# Theme
+
+## Color
+
+Defaults
+
+```sass
+// Colours.
+$default-colors: (
+  primary: (
+    100: hsl(219deg 100% 95%),
+    200: hsl(219deg 90% 80%),
+    300: hsl(219deg 80% 65%),
+    400: hsl(219deg 75% 55%),
+    500: hsl(219deg 75% 50%),
+    600: hsl(219deg 75% 45%),
+    700: hsl(219deg 80% 35%),
+    800: hsl(219deg 90% 20%),
+    900: hsl(219deg 100% 10%),
+  ),
+  secondary: (
+    100: hsl(235deg 40% 95%),
+    200: hsl(235deg 30% 80%),
+    300: hsl(235deg 20% 65%),
+    400: hsl(235deg 15% 55%),
+    500: hsl(235deg 15% 50%),
+    600: hsl(235deg 15% 45%),
+    700: hsl(235deg 20% 35%),
+    800: hsl(235deg 30% 20%),
+    900: hsl(235deg 40% 10%),
+  ),
+  tertiary: (
+    100: hsl(340deg 85% 95%),
+    200: hsl(340deg 75% 80%),
+    300: hsl(340deg 65% 65%),
+    400: hsl(340deg 60% 55%),
+    500: hsl(340deg 60% 50%),
+    600: hsl(340deg 60% 45%),
+    700: hsl(340deg 65% 35%),
+    800: hsl(340deg 75% 20%),
+    900: hsl(340deg 85% 10%),
+  ),
+);
+$custom-colors: () !default;
+$colors: map.merge($default-colors, $custom-colors);
+
+// A map for reversing the shade values of the dark theme.
+$base-dark-map: (
+  100: 900,
+  200: 800,
+  300: 700,
+  400: 600,
+  500: 500,
+  600: 400,
+  700: 300,
+  800: 200,
+  900: 100,
+);
+$custom-dark-map: () !default;
+$dark-map: map.merge($base-dark-map, $custom-dark-map);
+
+```
+
+Variables
+
+```sass
+// A custom variable is defined for each color and shade.
+--#{root-defaults.$prefix}-#{$color}--#{$shade}
+
+// There are three modes for the theme.
+// Active is what is currently being used.
+--#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}
+// Theme dark is the color used when dark mode is active.
+--#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade}
+// Light theme is the color active whne light mode is active
+--#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade}
+
+// Globaly defined root color and root background.
+--#{root-defaults.$prefix}-root-color
+--#{root-defaults.$prefix}-root-background
+```
+
+## Typography
+
+Defaults
+
+```sass
+// font properties.
+$font-size-base: 1rem !default;
+$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;
+$line-height: 1.2em !default;
+
+// Multipliers for font sizes.
+// This uses a minor third scale.
+// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000
+$base-font-size-multipliers: (
+  xs: 0.694,
+  sm: 0.833,
+  base: 1,
+  lg: 1.2,
+  xl: 1.44,
+  2xl: 1.728,
+  3xl: 2.074,
+  4xl: 2.488,
+  5xl: 2.986,
+);
+$custom-font-size-multipliers: () !default;
+$font-size-multipliers: map.merge(
+  $base-font-size-multipliers,
+  $custom-font-size-multipliers
+);
+
+// Weights.
+$base-font-weights: (
+  light: 300,
+  normal: 400,
+  bold: 700,
+);
+$custom-font-weights: () !default;
+$font-weights: map.merge($base-font-weights, $custom-font-weights);
+
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+$root-font-family:
+  system-ui,
+  -apple-system,
+  blinkmacsystemfont,
+  "Segoe UI",
+  roboto,
+  "Helvetica Neue",
+  arial,
+  sans-serif !default;
+```
+
+Variables
+
+The font properties:
+
+```scss
+--#{root-defaults.$prefix}-font-size-base
+--#{root-defaults.$prefix}-line-height
+
+```
+
+The font size properties:
+
+```scss
+--#{root-defaults.$prefix}-font-#{$key}
+
+```
+
+The font weight properties:
+
+```scss
+--#{root-defaults.$prefix}-font-weight-#{$key}
+--#{root-defaults.$prefix}-font-weight-bold
+
+```
+
+The root properties:
+
+```scss
+--#{root-defaults.$prefix}-root-font-family
+--#{root-defaults.$prefix}-root-font-size
+
+```
+
+The typography properties:
+
+```scss
+--#{root-defaults.$prefix}-body-font-size
+--#{root-defaults.$prefix}-body-line-height
+--#{root-defaults.$prefix}-body-font-weight
+--#{root-defaults.$prefix}-paragraph-font-size
+--#{root-defaults.$prefix}-paragraph-line-height
+--#{root-defaults.$prefix}-paragraph-margin
+--#{root-defaults.$prefix}-paragraph-font-weight
+--#{root-defaults.$prefix}-small-font-size
+--#{root-defaults.$prefix}-small-line-height
+--#{root-defaults.$prefix}-small-margin
+--#{root-defaults.$prefix}-small-font-weight
+
+```
+
+The heading properties:
+
+```scss
+--#{root-defaults.$prefix}-heading-font-family
+--#{root-defaults.$prefix}-heading-line-height
+--#{root-defaults.$prefix}-heading-margin
+--#{root-defaults.$prefix}-heading-font-weight
+
+```
+
+The H1 properties:
+
+```scss
+--#{root-defaults.$prefix}-h1-font-size
+--#{root-defaults.$prefix}-h1-line-height
+--#{root-defaults.$prefix}-h1-margin
+--#{root-defaults.$prefix}-h1-font-family
+--#{root-defaults.$prefix}-h1-font-weight
+
+```
+
+The H2 properties:
+
+```scss
+--#{root-defaults.$prefix}-h2-font-size
+--#{root-defaults.$prefix}-h2-line-height
+--#{root-defaults.$prefix}-h2-margin
+--#{root-defaults.$prefix}-h2-font-family
+--#{root-defaults.$prefix}-h2-font-weight
+
+```
+
+The H3 properties:
+
+```scss
+--#{root-defaults.$prefix}-h3-font-size
+--#{root-defaults.$prefix}-h3-line-height
+--#{root-defaults.$prefix}-h3-margin
+--#{root-defaults.$prefix}-h3-font-family
+--#{root-defaults.$prefix}-h3-font-weight
+
+```
+
+The H4 properties:
+
+```scss
+--#{root-defaults.$prefix}-h4-font-size
+--#{root-defaults.$prefix}-h4-line-height
+--#{root-defaults.$prefix}-h4-margin
+--#{root-defaults.$prefix}-h4-font-family
+--#{root-defaults.$prefix}-h4-font-weight
+
+```
+
+The H5 properties:
+
+```scss
+--#{root-defaults.$prefix}-h5-font-size
+--#{root-defaults.$prefix}-h5-line-height
+--#{root-defaults.$prefix}-h5-margin
+--#{root-defaults.$prefix}-h5-font-family
+--#{root-defaults.$prefix}-h5-font-weight
+
+```
+
+The H6 properties:
+
+```scss
+--#{root-defaults.$prefix}-h6-font-size
+--#{root-defaults.$prefix}-h6-line-height
+--#{root-defaults.$prefix}-h6-margin
+--#{root-defaults.$prefix}-h6-font-family
+--#{root-defaults.$prefix}-h6-font-weight
+
+```

package/docs/utilities.md

@@ -0,0 +1,357 @@
+## Utilities
+
+---
+
+### Alignment
+
+**Variables**
+
+Property Prefixes
+
+- $align-content-class-prefix: "align-content-" !default;
+- $align-items-class-prefix: "align-items-” !default;
+- $align-self-class-prefix: "align-self-" !default;
+
+Custom Variables to extend properties
+
+- $custom-align-content-properties
+- $custom-align-items-properties
+- $custom-align-self-properties
+
+Align Content
+
+- align-content-normal
+- align-content-start
+- align-content-end
+- align-content-center
+- align-content-between
+- align-content-around
+- align-content-evenly
+- align-content-baseline
+- align-content-stretch
+
+Align Items
+
+- align-items-start
+- align-items-end
+- align-items-center
+- align-items-baseline
+- align-items-stretch
+
+Align Self
+
+- align-self-auto
+- align-self-start
+- align-self-end
+- align-self-center
+- align-self-baseline
+- align-self-stretch
+
+### Color
+
+Variables
+
+- $background-class-prefix: "bg-" !default;
+- $text-class-prefix: "text-" !default;
+- $custom-background-properties
+- $custom-text-properties
+- $custom-colors
+- $custom-dark-map
+
+Color Classes
+
+- #{defaults.$background-class-prefix}-#{$color}-#{$shade};
+- The class is a combination of the prefix, color, and shade.
+- See table below for examples on how to use the background and text classes.
+
+| Prefix | Color | Shade | Background Class | Text Class |
+| --- | --- | --- | --- | --- |
+| bg \| text | primary \| secondary \| tertiary | 100 | bg-primary-100 | text-primary-100 |
+| bg \| text | primary \| secondary \| tertiary | 200 | bg-primary-200 | text-primary-200 |
+| bg \| text | primary \| secondary \| tertiary | 300 | bg-primary-300 | text-primary-300 |
+| bg \| text | primary \| secondary \| tertiary | 400 | bg-primary-400 | text-primary-400 |
+| bg \| text | primary \| secondary \| tertiary | 500 | bg-primary-500 | text-primary-500 |
+| bg \| text | primary \| secondary \| tertiary | 600 | bg-primary-600 | text-primary-600 |
+| bg \| text | primary \| secondary \| tertiary | 700 | bg-primary-700 | text-primary-700 |
+| bg \| text | primary \| secondary \| tertiary | 800 | bg-primary-800 | text-primary-800 |
+| bg \| text | primary \| secondary \| tertiary | 900 | bg-primary-900 | text-primary-900 |
+
+Background and text properties
+
+| Background Property | Text Property |
+| --- | --- |
+| bg-inherit | text-inherit |
+| bg-current | text-current |
+| bg-transparent | text-transparent |
+
+### Display
+
+- $display-class-prefix: "display-" !default;
+- $custom-display-properties
+
+| Display Property |
+| --- |
+| display-block |
+| display-inline-block |
+| display-inline |
+| display-flex |
+| display-inline-flex |
+| display-grid |
+| display-inline-grid |
+| display-flow-root |
+| display-none |
+| display-contents |
+| display-list-item |
+
+### Flex
+
+- $flex-direction-class-prefix: "flex-" !default;
+- $flex-wrap-class-prefix: "flex-" !default;
+- $flex-grow-class-prefix: "flex-" !default;
+- $flex-shrink-class-prefix: "flex-" !default;
+
+Custom variables to extend properties
+
+- $custom-flex-direction-properties
+- $custom-flex-wrap-properties
+- $custom-flex-grow-properties
+- $custom-flex-shrink-properties
+
+| Prefix | Property | Class Name |
+| --- | --- | --- |
+| flex- | row | flex-row |
+| flex- | row-reverse | flex-row-reverse |
+| flex- | col | flex-col |
+| flex- | col-reverse | flex-col-reverse |
+| flex- | wrap | flex-wrap |
+| flex- | wrap-reverse | flex-wrap-reverse |
+| flex- | nowrap | flex-nowrap |
+| flex- | grow | flex-grow |
+| flex- | no-grow | flex-no-grow |
+| flex- | shrink | flex-shrink |
+| flex- | no-shrink | flex-no-shrink |
+
+### Inset
+
+- $custom-inset-properties
+- $custom-inset-values
+
+Every property is mapped to every value. So you can append the property name to any value.
+
+| Property | Value | Class Name |
+| --- | --- | --- |
+| inset | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | inset-auto |
+| inset-x | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | inset-x-full |
+| inset-y | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | inset-y-quarter |
+| inset-start | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | inset-start-half |
+| inset-end | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | inset-end-three-quarters |
+| top | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | top-third |
+| right | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | right-two-thirds |
+| bottom | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | bottom-0 |
+| left | 0 \| auto \| full \| quarter \| half \| three-quarters \| third \| two-thirds | left-auto |
+
+### Justification
+
+- $justify-content-class-prefix: "justify-content-" !default;
+- .$justify-items-class-prefix: "justify-items-" !default;
+- $justify-self-class-prefix: "justify-self-" !default;
+- $custom-justify-content-properties
+- $custom-justify-items-properties
+- $custom-justify-self-properties
+
+Justify Content
+
+| normal | justify-content-normal |
+| --- | --- |
+| start | justify-content-start |
+| end | justify-content-end |
+| center | justify-content-center |
+| between | justify-content-between |
+| around | justify-content-around |
+| evenly | justify-content-evenly |
+| stretch | justify-content-stretch |
+
+Justify Items
+
+| Property | Class Name |
+| --- | --- |
+| start | justify-items-start |
+| end | justify-items-end |
+| center | justify-items-center |
+| stretch | justify-items-stretch |
+
+Justify Self
+
+| auto | justify-self-auto |
+| --- | --- |
+| start | justify-self-start |
+| end | justify-self-end |
+| center | justify-self-center |
+| stretch | justify-self-stretch |
+
+### List
+
+- $list-style-type-class-prefix: "list-style-" !default;
+- $list-style-postion-class-prefix: "list-style-" !default;
+- $custom-list-style-type-properties
+- $custom-list-style-postion-properties
+
+List style type properties
+
+| Property | Class Name |
+| --- | --- |
+| none | list-style-none |
+| disc | list-style-disc |
+| decimal | list-style-decimal |
+| circle | list-style-circle |
+| square | list-style-square |
+
+List style position properties
+
+| inside | list-style-inside |
+| --- | --- |
+| outside | list-style-outside |
+
+### Order
+
+- $order-class-prefix
+- $custom-order-properties
+
+| Property | Class Name |
+| --- | --- |
+| none | order-none |
+| first | order-first |
+| last | order-last |
+
+### Position
+
+- $position-class-prefix
+- $custom-position-properties
+
+| Property | Class Name |
+| --- | --- |
+| static | position-static |
+| fixed | position-fixed |
+| absolute | position-absolute |
+| relative | position-relative |
+| sticky | position-sticky |
+
+### Ratio
+
+Variables
+
+`$ratio: var(*--#{root-defaults.$prefix}-ratio*);`
+
+Contains element add this class to
+
+- $ratio-selector: ".ratio" !default;
+
+Item that covers the container uses this with the default prefix as “.”
+
+- $ratio-variant-selector-prefix: "." !default;
+
+Different rations you can use
+
+| Property | Class Name |
+| --- | --- |
+| one-by-one | one-by-one |
+| two-by-one | two-by-one |
+| four-by-three | four-by-three |
+| four-by-one | four-by-one |
+| sixteen-by-nine | sixteen-by-nine |
+| three-by-two | three-by-two |
+| eight-by-five | eight-by-five |
+
+### Spacing
+
+| Abbreviation | Description | Values | Class Name |
+| --- | --- | --- | --- |
+| g | gap | 1 to 10 | g-1 |
+| rg | row-gap | 1 to 10 | rg-2 |
+| cg | column-gap | 1 to 10 | cg-3 |
+| p | padding | 1 to 10 | p-4 |
+| pt | padding-top | 1 to 10 | pt-5 |
+| pr | padding-right | 1 to 10 | pr-6 |
+| pb | padding-bottom | 1 to 10 | pb-7 |
+| pl | padding-left | 1 to 10 | pl-8 |
+| px | padding-left padding-right | 1 to 10 | px-9 |
+| py | padding-top padding-bottom | 1 to 10 | py-10 |
+| pbs | padding-block-start | 1 to 10 | pbs-1 |
+| pbe | padding-block-end | 1 to 10 | pbe-2 |
+| pbse | padding-block-start padding-block-end | 1 to 10 | pbse-3 |
+| pis | padding-inline-start | 1 to 10 | pis-4 |
+| pie | padding-inline-end | 1 to 10 | pie-5 |
+| pise | padding-inline-start padding-inline-end | 1 to 10 | pise-6 |
+| m | margin | 1 to 10 | m-7 |
+| mt | margin-top | 1 to 10 | mt-8 |
+| mr | margin-right | 1 to 10 | mr-9 |
+| mb | margin-bottom | 1 to 10 | mb-10 |
+| ml | margin-left | 1 to 10 | ml-1 |
+| mx | margin-left margin-right | 1 to 10 | mx-2 |
+| my | margin-top margin-bottom | 1 to 10 | my-3 |
+| mbs | margin-block-start | 1 to 10 | mbs-4 |
+| mbe | margin-block-end | 1 to 10 | mbe-5 |
+| mbse | margin-block-start margin-block-end | 1 to 10 | mbse-6 |
+| mis | margin-inline-start | 1 to 10 | mis-7 |
+| mie | margin-inline-end | 1 to 10 | mie-8 |
+| mise | margin-inline-start margin-inline-end | 1 to 10 | mise-9 |
+
+### Typography
+
+- $text-class-prefix: "text-" !default;
+
+Text utilities
+
+- text-paragraph
+- text-small
+- text-h1
+- text-h2
+- text-h3
+- text-h4
+- text-h5
+- text-h6
+
+Font Size Utilities
+
+- $text-class-prefix: "text-" !default;
+
+| Property | Class Name |
+| --- | --- |
+| xs | text-xs |
+| sm | text-sm |
+| base | text-base |
+| lg | text-lg |
+| xl | text-xl |
+| 2xl | text-2xl |
+| 3xl | text-3xl |
+| 4xl | text-4xl |
+| 5xl | text-5xl |
+
+Font Weight Utilities
+
+- $font-weight-class-prefix: "font-" !default;
+
+| Property | Class Name |
+| --- | --- |
+| light | font-light |
+| normal | font-normal|
+| bold | font-bold |
+
+Font Style Utilities
+
+- $font-style-class-prefix: "font-" !default;
+
+| Property | Class Name |
+| --- | --- |
+| normal | font-normal |
+| italic | font-italic |
+
+### Visibility
+
+$visibility-class-prefix: "visibility-" !default;
+
+| Property | Class Name |
+| --- | --- |
+| visible | visibility-visible |
+| hidden | visibility-hidden |
+| collapse | visibility-collapse |