@graupl/graupl 1.0.0-beta.2 → 1.0.0-beta.20

package/docs/mixins.md

@@ -1,47 +0,0 @@
-# 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

@@ -1,67 +0,0 @@
-## 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

@@ -1,258 +0,0 @@
-# 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

@@ -1,357 +0,0 @@
-## 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 |