@graupl/graupl 1.0.0-alpha.10 → 1.0.0-alpha.12

package/dist/component/table.css

@@ -1,2 +0,0 @@
-@layer graupl.component{table .primary,table.primary{--graupl-table-header-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-table-header-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)));--graupl-table-striped-background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)));--graupl-table-striped-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-table-hover-background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)));--graupl-table-hover-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-table-border-color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)));--graupl-table-highlight-background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)));--graupl-table-highlight-color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))}table .secondary,table.secondary{--graupl-table-header-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-table-header-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)));--graupl-table-striped-background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)));--graupl-table-striped-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-table-hover-background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)));--graupl-table-hover-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-table-border-color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)));--graupl-table-highlight-background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)));--graupl-table-highlight-color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))}table .tertiary,table.tertiary{--graupl-table-header-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-table-header-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)));--graupl-table-striped-background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)));--graupl-table-striped-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-table-hover-background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)));--graupl-table-hover-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-table-border-color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)));--graupl-table-highlight-background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)));--graupl-table-highlight-color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))}table.bordered{border-collapse:collapse;border-color:var(--graupl-table-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-style:var(--graupl-table-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-table-border-width,var(--graupl-border-width,2px))}table.bordered tr>*{border-color:var(--graupl-table-cell-border-color,var(--graupl-table-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))));border-style:var(--graupl-table-cell-border-style,var(--graupl-table-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-table-cell-border-width,var(--graupl-table-border-width,var(--graupl-border-width,2px)))}table.striped-columns tbody tr:nth-child(odd)>*,table.striped-rows tbody tr>:nth-child(odd){background:var(--graupl-table-striped-background,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-table-striped-color,var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124))))}table.hoverable tbody tr:hover>*{background:var(--graupl-table-hover-background,var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8))));color:var(--graupl-table-hover-color,var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124))))}table .highlight{--graupl-table-cell-background:var(--graupl-table-highlight-background,var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093))));--graupl-table-cell-color:var(--graupl-table-highlight-color,var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7))));--graupl-table-header-background:var(--graupl-table-highlight-background,var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093))));--graupl-table-header-color:var(--graupl-table-highlight-color,var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7))));--graupl-table-striped-background:var(--graupl-table-highlight-background,var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093))));--graupl-table-striped-color:var(--graupl-table-highlight-color,var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7))))}.responsive-table{display:block;overflow:scroll hidden;width:100%}.responsive-table table{margin-bottom:0;width:100%}}
-/*# sourceMappingURL=table.css.map */

package/dist/component/table.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/scss/mixins/_layer.scss","../../src/scss/component/table/_index.scss","table.css","../../src/scss/component/table/_variables.scss"],"names":[],"mappings":"AASI,wBCEE,6BAGI,oJAAA,CAAA,+IAAA,CAAA,qJAAA,CAAA,gJAAA,CAAA,mJAAA,CAAA,8IAAA,CAAA,+IAAA,CAAA,uJAAA,CAAA,kJCFR,CDDI,iCAGI,0JAAA,CAAA,qJAAA,CAAA,2JAAA,CAAA,sJAAA,CAAA,yJAAA,CAAA,oJAAA,CAAA,qJAAA,CAAA,6JAAA,CAAA,wJCUR,CDbI,+BAGI,uJAAA,CAAA,kJAAA,CAAA,wJAAA,CAAA,mJAAA,CAAA,sJAAA,CAAA,iJAAA,CAAA,kJAAA,CAAA,uJAAA,CAAA,qJCsBR,CDdE,eACE,wBAAA,CAGA,iKEVe,CFSf,8EEbe,CFYf,4ECkBJ,CDdI,oBAGE,uMEDkB,CFAlB,oHEJkB,CFGlB,kHCkBN,CDJI,4FACE,2KERmB,CFSnB,iKCUN,CDLI,iCACE,yKELiB,CFMjB,+JCON,CDHE,iBACE,iMAAA,CACA,uLAAA,CACA,mMAAA,CACA,yLAAA,CACA,oMAAA,CACA,0LCKJ,CDDA,kBACE,aAAA,CAEA,sBAAA,CADA,UCIF,CDDE,wBAEE,eAAA,CADA,UCIJ,CACF","file":"table.css"}

package/scss/component/button.scss

@@ -1,3 +0,0 @@
-// Graupl Button Component.
-
-@forward "../../src/scss/component/button";

package/scss/component/table.scss

@@ -1,3 +0,0 @@
-// Table component styles.
-
-@forward "../../src/scss/component/table";

package/src/scss/component/button/_index.scss

@@ -1,98 +0,0 @@
-// Graupl Button Component.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../theme/color/variables" as color;
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../mixins/media-queries" as *;
-@use "sass:map";
-
-@include layer(component) {
-  .button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: $button-min-width;
-    min-height: $button-min-height;
-    padding: $button-padding;
-    transition: $button-transition;
-    border-width: $button-border-width;
-    border-style: $button-border-style;
-    border-radius: $button-border-radius;
-    font-size: $button-font-size;
-    cursor: pointer;
-
-    &:hover {
-      transform: $button-hover-transform;
-    }
-
-    &:active {
-      transform: $button-active-transform;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      &:hover,
-      &:active {
-        transform: none;
-      }
-    }
-  }
-
-  @include animation-off {
-    .button {
-      transition: $button-transition-reduced-motion;
-
-      &:hover {
-        transform: $button-hover-transform-reduced-motion;
-      }
-
-      &:active {
-        transform: $button-active-transform-reduced-motion;
-      }
-    }
-  }
-}
-
-@include layer(theme) {
-  .button {
-    border-color: $button-border-color;
-    background: $button-background;
-    color: $button-color;
-
-    &:hover {
-      border-color: $button-hover-border-color;
-      background: $button-hover-background;
-      color: $button-hover-color;
-    }
-
-    &:active {
-      border-color: $button-active-border-color;
-      background: $button-active-background;
-      color: $button-active-color;
-    }
-
-    &:disabled {
-      border-color: $button-disabled-border-color;
-      background: $button-disabled-background;
-      color: $button-disabled-color;
-
-      &:hover,
-      &:active {
-        border-color: $button-disabled-border-color;
-        background: $button-disabled-background;
-        color: $button-disabled-color;
-      }
-    }
-
-    @each $color, $map in color.$theme-active {
-      &.#{$color} {
-        @each $prop, $shade in defaults.$button-state-theme-map {
-          --#{root-defaults.$prefix}-button-#{$prop}: #{map.get($map, $shade)};
-        }
-      }
-    }
-  }
-}

package/src/scss/component/table/_defaults.scss

@@ -1,30 +0,0 @@
-// Default values for Graupl.
-//
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
-
-@use "sass:map";
-
-// Table theme defaults.
-// This map is used to define the default colour shades for the
-// themed table components.
-//
-// e.g.
-// Primary tables will use primary--700 as the header background,
-// and primary--100 as the header text colour.
-//
-// Secondary/tertiary tables will use the same shade for their respective colours.
-$base-table-theme-map: (
-  header-background: 700,
-  header-color: 100,
-  striped-background: 200,
-  striped-color: 900,
-  hover-background: 300,
-  hover-color: 900,
-  border-color: 900,
-  highlight-background: 500,
-  highlight-color: 100,
-);
-$custom-table-theme-map: () !default;
-$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);

package/src/scss/component/table/_index.scss

@@ -1,77 +0,0 @@
-// Table component styles.
-
-@use "variables" as *;
-@use "defaults";
-@use "../../mixins/layer" as *;
-@use "../../defaults" as root-defaults;
-@use "../../functions/theme";
-
-@include layer(component) {
-  table {
-    @each $variant in theme.variants() {
-      &.#{$variant},
-      .#{$variant} {
-        @each $prop, $key in defaults.$table-theme-map {
-          --#{root-defaults.$prefix}-table-#{$prop}: #{theme.get(
-              $variant,
-              $key
-            )};
-        }
-      }
-    }
-
-    &.bordered {
-      border-collapse: collapse;
-      border-width: $table-border-width;
-      border-style: $table-border-style;
-      border-color: $table-border-color;
-
-      tr > * {
-        border-width: $table-cell-border-width;
-        border-style: $table-cell-border-style;
-        border-color: $table-cell-border-color;
-      }
-    }
-
-    &.striped-columns {
-      tbody tr:nth-child(odd) > * {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &.striped-rows {
-      tbody tr > :nth-child(odd) {
-        background: $table-striped-background;
-        color: $table-striped-color;
-      }
-    }
-
-    &.hoverable {
-      tbody tr:hover > * {
-        background: $table-hover-background;
-        color: $table-hover-color;
-      }
-    }
-
-    .highlight {
-      --#{root-defaults.$prefix}-table-cell-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-cell-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}-table-header-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-header-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}-table-striped-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-striped-color: #{$table-highlight-color};
-    }
-  }
-
-  .responsive-table {
-    display: block;
-    width: 100%;
-    overflow: scroll hidden;
-
-    table {
-      width: 100%;
-      margin-bottom: 0;
-    }
-  }
-}

package/src/scss/component/table/_variables.scss

@@ -1,64 +0,0 @@
-// Variables referencing custom properties.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../variables" as root-variables;
-@use "../../functions/theme";
-
-// Table border properties.
-$table-border-width: var(
-  --#{root-defaults.$prefix}-table-border-width,
-  #{root-variables.$border-width}
-);
-$table-border-style: var(
-  --#{root-defaults.$prefix}-table-border-style,
-  #{root-variables.$border-style}
-);
-$table-border-color: var(
-  --#{root-defaults.$prefix}-table-border-color,
-  #{theme.get(primary, 900)}
-);
-
-// Table cell border properties.
-$table-cell-border-width: var(
-  --#{root-defaults.$prefix}-table-cell-border-width,
-  #{$table-border-width}
-);
-$table-cell-border-style: var(
-  --#{root-defaults.$prefix}-table-cell-border-style,
-  #{$table-border-style}
-);
-$table-cell-border-color: var(
-  --#{root-defaults.$prefix}-table-cell-border-color,
-  #{$table-border-color}
-);
-
-// Table striped properties.
-$table-striped-background: var(
-  --#{root-defaults.$prefix}-table-striped-background,
-  #{theme.get(secondary, 200)}
-);
-$table-striped-color: var(
-  --#{root-defaults.$prefix}-table-striped-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table hover properties.
-$table-hover-background: var(
-  --#{root-defaults.$prefix}-table-hover-background,
-  #{theme.get(secondary, 300)}
-);
-$table-hover-color: var(
-  --#{root-defaults.$prefix}-table-hover-color,
-  #{theme.get(secondary, 900)}
-);
-
-// Table highlight properties.
-$table-highlight-background: var(
-  --#{root-defaults.$prefix}-table-highlight-background,
-  #{theme.get(secondary, 500)}
-);
-$table-highlight-color: var(
-  --#{root-defaults.$prefix}-table-highlight-color,
-  #{theme.get(secondary, 100)}
-);