@rolemodel/optics 0.2.3

package/dist/scss/components/table.scss

@@ -0,0 +1,132 @@
+// TODO: When we get a pagination component, add it to the table styles and docs for within a table footer
+
+%table-global {
+  // Public API
+  // Cells (for padding, the appropriate variable is used when using the density modifiers)
+  --_rm-table-cell-padding-default: var(--rm-space-small) var(--rm-space-x-small);
+  --_rm-table-cell-padding-comfortable: var(--rm-space-medium) var(--rm-space-small);
+  --_rm-table-cell-padding-compact: var(--rm-space-x-small) var(--rm-space-2x-small);
+
+  // Private API
+  // These allow for overriding specific padding versions easier.
+  --__rm-table-cell-padding: var(--_rm-table-cell-padding-default);
+
+  width: 100%;
+  border-radius: var(--rm-radius-medium);
+  border-collapse: collapse;
+  box-shadow: var(--rm-border-all) var(--rm-border-color);
+  contain: paint;
+  table-layout: auto;
+
+  thead {
+    background-color: var(--rm-color-neutral-plus-four);
+    color: var(--rm-color-neutral-on-plus-four);
+  }
+
+  th {
+    font-weight: var(--rm-font-weight-normal);
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  tbody,
+  tfoot {
+    background-color: var(--rm-color-background);
+    color: var(--rm-color-on-background);
+  }
+
+  th,
+  td {
+    padding: var(--__rm-table-cell-padding);
+    font-size: var(--rm-font-small);
+  }
+
+  tr:not(:last-child) {
+    box-shadow: inset var(--rm-border-top) var(--rm-border-color);
+  }
+
+  tfoot tr {
+    box-shadow: var(--rm-border-top) var(--rm-border-color);
+  }
+
+  // Layout Modifiers
+  &.table--auto-layout {
+    table-layout: auto;
+  }
+
+  &.table--fixed-layout {
+    table-layout: fixed;
+  }
+
+  // Table Density Modifiers
+  &.table--default-density {
+    --__rm-table-cell-padding: var(--_rm-table-cell-padding-default);
+  }
+
+  &.table--comfortable-density {
+    --__rm-table-cell-padding: var(--_rm-table-cell-padding-comfortable);
+  }
+
+  &.table--compact-density {
+    --__rm-table-cell-padding: var(--_rm-table-cell-padding-compact);
+  }
+
+  // Striped Modifiers
+  &.table--even-striped {
+    tbody tr:nth-child(even) {
+      background-color: var(--rm-color-neutral-plus-seven);
+      color: var(--rm-color-neutral-on-plus-seven);
+    }
+  }
+
+  &.table--odd-striped {
+    tbody tr:nth-child(odd) {
+      background-color: var(--rm-color-neutral-plus-seven);
+      color: var(--rm-color-neutral-on-plus-seven);
+    }
+  }
+
+  // Sticky Header Row Modifier
+  &.table--sticky-header thead {
+    position: sticky;
+    top: 0;
+  }
+
+  // Sticky Footer Row Modifier
+  &.table--sticky-footer tfoot {
+    position: sticky;
+    bottom: 0;
+  }
+}
+
+// Default Table
+.table {
+  @extend %table-global;
+}
+
+// Primary Table
+.table-primary {
+  @extend %table-global;
+
+  thead {
+    background-color: var(--rm-color-primary-plus-seven);
+    color: var(--rm-color-primary-on-plus-seven);
+  }
+}
+
+// Danger Table
+.table-danger {
+  @extend %table-global;
+
+  thead {
+    background-color: var(--rm-color-alerts-danger-plus-seven);
+    color: var(--rm-color-alerts-danger-on-plus-seven);
+  }
+}
+
+// Sticky Header / Footer Table Container
+.table-container {
+  @extend %table-global;
+
+  overflow-y: auto;
+}

package/dist/scss/core/base.scss

@@ -0,0 +1,95 @@
+// After a reset, introduce base element styles specific to this system
+
+html {
+  overflow: hidden; // Needed to prevent flash messages and panels from causing overflow
+  font-family: var(--rm-font-family);
+  font-size: 62.5%; // 1rem = 10px
+}
+
+body {
+  overflow: auto;
+  height: 100vh;
+  background: var(--rm-color-background);
+  color: var(--rm-color-on-background);
+  font-size: var(--rm-font-medium);
+}
+
+button {
+  background: none;
+  cursor: pointer;
+}
+
+button,
+input[type='submit'] {
+  border: 0;
+}
+
+label {
+  display: inline-block;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+a {
+  color: var(--rm-color-primary-original);
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+figure,
+pre {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--rm-space-small);
+  font-weight: var(--rm-font-weight-normal);
+}
+
+h1 {
+  font-size: var(--rm-font-2x-large);
+}
+
+h2 {
+  font-size: var(--rm-font-x-large);
+}
+
+h3 {
+  font-size: var(--rm-font-large);
+}
+
+h4 {
+  font-size: var(--rm-font-medium);
+}
+
+h5 {
+  font-size: var(--rm-font-small);
+}
+
+h6 {
+  font-size: var(--rm-font-x-small);
+}
+
+p {
+  margin-bottom: var(--rm-space-small);
+  font-size: var(--rm-font-medium);
+}
+
+small {
+  font-size: var(--rm-font-small);
+}

package/dist/scss/core/layout.scss

@@ -0,0 +1,36 @@
+.app-wrapper {
+  display: grid;
+  width: 100%;
+  height: 100vh;
+  grid-template-columns: auto 1fr auto;
+}
+
+.app__main {
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+}
+
+.page__header {
+  position: sticky;
+  z-index: var(--rm-z-index-header);
+  top: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.page__content {
+  width: 100%;
+  max-width: $breakpoint-medium;
+  flex-grow: 1;
+  padding: 0 var(--rm-space-large);
+  margin: 0 auto;
+}
+
+.page__footer {
+  position: sticky;
+  z-index: var(--rm-z-index-footer);
+  bottom: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/dist/scss/core/tokens/base_tokens.scss

@@ -0,0 +1,251 @@
+@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+
+// Using Mixins allows us to include them at a component level
+// as needed and override them.
+
+// A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
+@mixin color-varieties {
+  // Basic Colors
+  --rm-color-white: hsl(0deg 100% 100%);
+  --rm-color-black: hsl(0deg 0% 0%);
+
+  // Primary HSL
+  --rm-color-primary-h: 216;
+  --rm-color-primary-s: 58%;
+  --rm-color-primary-l: 48%;
+
+  // Neutral HSL
+  --rm-color-neutral-h: var(--rm-color-primary-h);
+  --rm-color-neutral-s: 4%;
+  --rm-color-neutral-l: var(--rm-color-primary-l);
+
+  // Alerts Warning HSL
+  --rm-color-alerts-warning-h: 47;
+  --rm-color-alerts-warning-s: 100%;
+  --rm-color-alerts-warning-l: 61%;
+
+  // Alerts Danger HSL
+  --rm-color-alerts-danger-h: 0;
+  --rm-color-alerts-danger-s: 99%;
+  --rm-color-alerts-danger-l: 76%;
+
+  // Alerts Info HSL
+  --rm-color-alerts-info-h: 216;
+  --rm-color-alerts-info-s: 58%;
+  --rm-color-alerts-info-l: 48%;
+
+  // Alerts Notice HSL
+  --rm-color-alerts-notice-h: 130;
+  --rm-color-alerts-notice-s: 61%;
+  --rm-color-alerts-notice-l: 64%;
+}
+
+@mixin border-radius {
+  --rm-radius-small: 2px;
+  --rm-radius-medium: 4px;
+  --rm-radius-large: 8px;
+  --rm-radius-x-large: 16px;
+  --rm-radius-circle: 50%;
+  --rm-radius-pill: 9999px;
+}
+
+@mixin border-widths {
+  --rm-border-width: 1px;
+  --rm-border-width-large: 2px;
+  --rm-border-width-x-large: 4px;
+}
+
+@mixin border-colors {
+  --rm-border-color: var(--rm-color-neutral-plus-three);
+}
+
+@mixin box-shadows {
+  // E.G. box-shadow: var(--rm-border-top) var(--rm-border-color);
+  --rm-border-none: 0 0 0 0;
+  --rm-border-all: 0 0 0 var(--rm-border-width);
+  --rm-border-top: 0 calc(-1 * var(--rm-border-width)) 0 0;
+  --rm-border-right: var(--rm-border-width) 0 0 0;
+  --rm-border-bottom: 0 var(--rm-border-width) 0 0;
+  --rm-border-left: calc(-1 * var(--rm-border-width)) 0 0 0;
+  --rm-border-y: var(--rm-border-top) var(--rm-border-color), var(--rm-border-bottom) var(--rm-border-color);
+  --rm-border-x: var(--rm-border-left) var(--rm-border-color), var(--rm-border-right) var(--rm-border-color);
+}
+
+@mixin font-scales {
+  --rm-font-scale-unit: 1rem; // 10px;
+  --rm-font-x-small: calc(var(--rm-font-scale-unit) * 1.2); // 12px
+  --rm-font-small: calc(var(--rm-font-scale-unit) * 1.4); // 14px
+  --rm-font-medium: calc(var(--rm-font-scale-unit) * 1.6); // 16px
+  --rm-font-large: calc(var(--rm-font-scale-unit) * 1.8); // 18px
+  --rm-font-x-large: calc(var(--rm-font-scale-unit) * 2.4); // 24px
+  --rm-font-2x-large: calc(var(--rm-font-scale-unit) * 2.8); // 28px
+  --rm-font-3x-large: calc(var(--rm-font-scale-unit) * 3.2); // 32px
+  --rm-font-4x-large: calc(var(--rm-font-scale-unit) * 3.6); // 36px
+  --rm-font-5x-large: calc(var(--rm-font-scale-unit) * 4.8); // 48px
+}
+
+@mixin font-weights {
+  --rm-font-weight-thin: 100;
+  --rm-font-weight-extra-light: 200;
+  --rm-font-weight-light: 300;
+  --rm-font-weight-normal: 400;
+  --rm-font-weight-medium: 500;
+  --rm-font-weight-semi-bold: 600;
+  --rm-font-weight-bold: 700;
+  --rm-font-weight-extra-bold: 800;
+  --rm-font-weight-black: 900;
+}
+
+@mixin line-heights {
+  --rm-line-height-none: 0;
+  --rm-line-height-densest: 1;
+  --rm-line-height-denser: 1.15;
+  --rm-line-height-dense: 1.3;
+  --rm-line-height-base: 1.5;
+  --rm-line-height-loose: 1.6;
+  --rm-line-height-looser: 1.7;
+  --rm-line-height-loosest: 1.8;
+}
+
+@mixin letter-spacing {
+  --rm-letter-spacing-navigation: 0.01rem;
+  --rm-letter-spacing-label: 0.04rem;
+}
+
+@mixin transitions {
+  --rm-transition-input: 120ms;
+  --rm-transition-navigation: 200ms;
+  --rm-transition-sidebar: 300ms;
+  --rm-transition-modal: 300ms;
+  --rm-transition-panel: 400ms;
+  --rm-transition-flash: 5s;
+}
+
+@mixin encoded-images {
+  --rm-form-dropdown-arrow-width: 1rem; // No way to string interpolate
+  --rm-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+@mixin fonts {
+  --rm-font-family: 'Noto Sans', 'Noto Serif', sans-serif;
+}
+
+@mixin spacing-scales {
+  --rm-space-scale-unit: 1rem; // 10px;
+  --rm-space-3x-small: calc(var(--rm-space-scale-unit) * 0.2); // 2px
+  --rm-space-2x-small: calc(var(--rm-space-scale-unit) * 0.4); // 4px
+  --rm-space-x-small: calc(var(--rm-space-scale-unit) * 0.8); // 8px
+  --rm-space-small: calc(var(--rm-space-scale-unit) * 1.2); // 12px
+  --rm-space-medium: calc(var(--rm-space-scale-unit) * 1.6); // 16px
+  --rm-space-large: calc(var(--rm-space-scale-unit) * 2); // 20px
+  --rm-space-x-large: calc(var(--rm-space-scale-unit) * 2.4); // 24px
+  --rm-space-2x-large: calc(var(--rm-space-scale-unit) * 2.8); // 28px
+  --rm-space-3x-large: calc(var(--rm-space-scale-unit) * 4); // 40px
+  --rm-space-4x-large: calc(var(--rm-space-scale-unit) * 8); // 80px
+}
+
+@mixin shadows {
+  --rm-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
+  --rm-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
+  --rm-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
+  --rm-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
+  --rm-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
+}
+
+@mixin z-indexes {
+  --rm-z-index-header: 500;
+  --rm-z-index-footer: 500;
+  --rm-z-index-drawer: 700;
+  --rm-z-index-dialog: 800;
+  --rm-z-index-dialog-backdrop: 801;
+  --rm-z-index-dialog-content: 802;
+  --rm-z-index-dropdown: 900;
+  --rm-z-index-alert-group: 950;
+  --rm-z-index-tooltip: 1000;
+}
+
+@mixin inputs {
+  // This should follow multiples of 4
+  // https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
+  --rm-input-height-small: 2.4rem; // 24px
+  --rm-input-height-medium: 3.2rem; // 32px
+  --rm-input-height-large: 4.4rem; // 44px
+  --rm-input-height-x-large: 5.6rem; // 56px
+  --rm-input-outer-focus: 0 0 0 var(--rm-border-width-large) var(--rm-color-primary-plus-four);
+  --rm-input-inner-focus: inset var(--rm-border-all) var(--rm-color-primary-minus-three);
+  --rm-input-focus: var(--rm-input-inner-focus), var(--rm-input-outer-focus);
+}
+
+// We use SCSS variables outside the root since support for custom properties / css variables
+// is not yet available
+// https://drafts.csswg.org/css-env-1/
+// https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
+
+$breakpoint-x-small: 512px; // vertical phone
+$breakpoint-small: 768px; // vertical ipad
+$breakpoint-medium: 1024px; // landscape ipad
+$breakpoint-large: 1280px; // small laptop
+$breakpoint-x-large: 1440px; // medium laptop
+
+:root {
+  // Color HSLs
+  @include color-varieties;
+
+  // Border
+  @include border-radius;
+  @include border-widths;
+  @include border-colors;
+  @include box-shadows;
+
+  // Font
+  @include font-scales;
+  @include font-weights;
+  @include fonts;
+
+  // Text
+  @include line-heights;
+  @include letter-spacing;
+
+  // Transitions
+  @include transitions;
+
+  // Encoded Images
+  @include encoded-images;
+
+  // Spacing
+  @include spacing-scales;
+
+  // Shadows
+  @include shadows;
+
+  // Z Index
+  @include z-indexes;
+
+  // Inputs
+  @include inputs;
+}
+
+// Animations
+@keyframes rm-slide-in-out-flash {
+  // If an duration of 5s is set:
+  // Start off the Screen
+  0% {
+    right: -100%;
+  }
+
+  // Animate onto the screen for 0.5s
+  10% {
+    right: var(--rm-space-large);
+  }
+
+  // Stay on the screen for 3s
+  70% {
+    right: var(--rm-space-large);
+  }
+
+  // Animate off the screen for 1.5s
+  100% {
+    right: -100%;
+  }
+}