init

2020-08-19 16:04:21 -07:00
commit 8482272d45
336 changed files with 197309 additions and 0 deletions
@@ -0,0 +1,167 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Generate and apply base theme colors
+// -----------------------------------------------------------------------------------------------------
+@include treo-theme {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $is-dark: map-get($theme, is-dark);
+
+    // Base color and background
+    & {
+        color: map-get($foreground, text);
+        background-color: map-get($background, background);
+    }
+
+    // Base border color for all elements
+    *,
+    *::before,
+    *::after {
+        border-color: map-get($foreground, divider);
+    }
+
+    // Force the disabled colors on disabled elements
+    [disabled] {
+
+        * {
+            color: map-get($foreground, disabled) !important;
+        }
+    }
+
+    .mat-icon {
+
+        @if ($is-dark) {
+            color: map-get($foreground, secondary-text);
+        } @else {
+            color: map-get($foreground, icon);
+        }
+    }
+
+    .text-card {
+        color: map-get($background, card);
+    }
+
+    .text-default {
+        color: map-get($foreground, text);
+    }
+
+    .text-secondary {
+        color: map-get($foreground, secondary-text);
+    }
+
+    .text-hint {
+        color: map-get($foreground, hint-text);
+    }
+
+    .text-disabled {
+        color: map-get($foreground, disabled-text);
+    }
+
+    .divider {
+        color: map-get($foreground, divider);
+    }
+
+    // Background colors
+    .bg-default {
+        background-color: map-get($background, background);
+    }
+
+    .bg-dialog,
+    .bg-card {
+        background-color: map-get($background, card);
+    }
+
+    .bg-hover {
+        background-color: map-get($background, hover);
+    }
+
+    // Dark - light variants
+    @if ($is-dark) {
+
+        &.dark\:text-normal,
+        .dark\:text-normal {
+            color: map-get($foreground, text);
+        }
+
+        &.dark\:text-secondary,
+        .dark\:text-secondary {
+            color: map-get($foreground, secondary-text);
+        }
+
+        &.dark\:text-hint,
+        .dark\:text-hint {
+            color: map-get($foreground, hint-text);
+        }
+
+        &.dark\:text-disabled,
+        .dark\:text-disabled {
+            color: map-get($foreground, disabled-text);
+        }
+
+        &.dark\:text-divider,
+        .dark\:text-divider {
+            color: map-get($foreground, divider);
+        }
+
+        &.dark\:bg-default,
+        .dark\:bg-default {
+            background-color: map-get($background, background);
+        }
+
+        &.dark\:bg-dialog,
+        .dark\:bg-dialog,
+        &.dark\:bg-card,
+        .dark\:bg-card {
+            background-color: map-get($background, card);
+        }
+
+        &.dark\:bg-hover,
+        .dark\:bg-hover {
+            background-color: map-get($background, hover);
+        }
+
+    } @else {
+
+        &.light\:text-normal,
+        .light\:text-normal {
+            color: map-get($foreground, text);
+        }
+
+        &.light\:text-secondary,
+        .light\:text-secondary {
+            color: map-get($foreground, secondary-text);
+        }
+
+        &.light\:text-hint,
+        .light\:text-hint {
+            color: map-get($foreground, hint-text);
+        }
+
+        &.light\:text-disabled,
+        .light\:text-disabled {
+            color: map-get($foreground, disabled-text);
+        }
+
+        &.light\:text-divider,
+        .light\:text-divider {
+            color: map-get($foreground, divider);
+        }
+
+        &.light\:bg-default,
+        .light\:bg-default {
+            background-color: map-get($background, background);
+        }
+
+        &.light\:bg-dialog,
+        .light\:bg-dialog,
+        &.light\:bg-card,
+        .light\:bg-card {
+            background-color: map-get($background, card);
+        }
+
+        &.light\:bg-hover,
+        .light\:bg-hover {
+            background-color: map-get($background, hover);
+        }
+    }
+}
@@ -0,0 +1,279 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Manually forked from TailwindCSS preflight.css
+// -----------------------------------------------------------------------------------------------------
+
+/**
+ * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
+ * A thin layer on top of normalize.css that provides a starting point more
+ * suitable for web applications.
+ */
+
+/**
+ * 1. Prevent padding and border from affecting element width
+ * https://goo.gl/pYtbK7
+ * 2. Change the default font family in all browsers (opinionated)
+ */
+
+html {
+    box-sizing: border-box; /* 1 */
+    font-family: sans-serif; /* 2 */
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+/**
+ * Removes the default spacing and border for appropriate elements.
+ */
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+figure,
+p,
+pre {
+    margin: 0;
+}
+
+button {
+    background: transparent;
+    padding: 0;
+}
+
+/**
+ * Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ */
+
+button:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+}
+
+ol,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the system font stack as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ * to override it to ensure consistency even when using the default theme.
+ */
+
+html {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
+    line-height: 1.5; /* 2 */
+}
+
+/**
+ * Allow adding a border to an element by just adding a border-width.
+ *
+ * By default, the way the browser specifies that an element should have no
+ * border is by setting it's border-style to `none` in the user-agent
+ * stylesheet.
+ *
+ * In order to easily add borders to elements by just setting the `border-width`
+ * property, we change the default border-style for all elements to `solid`, and
+ * use border-width to hide them instead. This way our `border` utilities only
+ * need to set the `border-width` property instead of the entire `border`
+ * shorthand, making our border utilities much more straightforward to compose.
+ *
+ * https://github.com/tailwindcss/tailwindcss/pull/116
+ */
+*,
+*::before,
+*::after {
+    border-width: 0;
+    border-style: solid;
+    // Default border color is defined in 'styles/base/_colors.scss' file for convenience
+}
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+img {
+    border-style: solid;
+}
+
+textarea {
+    resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: inherit;
+    //opacity: 0.5;
+}
+
+button,
+[role="button"] {
+    cursor: pointer;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    padding: 0;
+    line-height: inherit;
+    color: inherit;
+}
+
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+pre,
+code,
+kbd,
+samp {
+    font-family: $treo-font-mono;
+}
+
+/**
+ * Make replaced elements `display: block` by default as that's
+ * the behavior you want almost all of the time. Inspired by
+ * CSS Remedy, with `svg` added as well.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    display: block;
+    vertical-align: middle;
+}
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their instrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Treo custom reset styles
+// -----------------------------------------------------------------------------------------------------
+
+* {
+    // Text rendering
+    text-rendering: optimizeLegibility;
+    -o-text-rendering: optimizeLegibility;
+    -ms-text-rendering: optimizeLegibility;
+    -moz-text-rendering: optimizeLegibility;
+    -webkit-text-rendering: optimizeLegibility;
+    -webkit-tap-highlight-color: transparent;
+
+    // Disable default focus outline
+    &:focus {
+        outline: none !important;
+    }
+
+    // Enable focus outline only on keyboard focused buttons
+    button.cdk-focused.cdk-keyboard-focused {
+        outline: 1px dotted !important;
+        outline: 5px auto -webkit-focus-ring-color !important;
+    }
+}
+
+html,
+body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 100%;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+}
+
+hr {
+    margin: 32px 0;
+    border-bottom-width: 1px;
+}
+
+img {
+    width: 100%;
+    vertical-align: top;
+}
+
+// Fix: Disabled placeholder color is too faded on Safari
+input[disabled] {
+    opacity: 1;
+    -webkit-text-fill-color: currentColor;
+}
@@ -0,0 +1,17 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Apply Angular Material theme and generate Treo color classes for the theme
+// -----------------------------------------------------------------------------------------------------
+@include treo-theme {
+
+    // Generate Angular Material theme
+    @include angular-material-theme($theme);
+
+    // Generate Treo color classes for the theme
+    @include treo-color-classes(
+            (
+                primary: map-get($theme, primary),
+                accent: map-get($theme, accent),
+                warn: map-get($theme, warn)
+            )
+    );
+}
@@ -0,0 +1,483 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Angular Material typography config
+// -----------------------------------------------------------------------------------------------------
+@include angular-material-typography(
+        mat-typography-config(
+            $font-family: $treo-font-sans,
+            $title: mat-typography-level(1.25rem, 2rem, 600),
+            $body-2: mat-typography-level(0.875rem, 1.5rem, 600),
+            $button: mat-typography-level(0.875rem, 0.875rem, 500),
+            $input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
+        )
+);
+
+// -----------------------------------------------------------------------------------------------------
+// @ General
+// -----------------------------------------------------------------------------------------------------
+html {
+    font-size: 16px;
+}
+
+body {
+    font-size: 0.875rem;
+    font-family: $treo-font-sans;
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+    margin: 1.25em 0 0.5em 0;
+}
+
+h1 {
+    font-size: 32px;
+    font-weight: 800;
+    letter-spacing: -0.022em;
+    line-height: 1.25;
+}
+
+h2 {
+    font-size: 32px;
+    font-weight: 600;
+    letter-spacing: -0.022em;
+    line-height: 1.25;
+}
+
+h3 {
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.019em;
+    line-height: 1.25;
+}
+
+h4 {
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: -0.017em;
+}
+
+h5 {
+    font-size: 18px;
+    font-weight: 500;
+    letter-spacing: -0.014em;
+}
+
+h6 {
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: -0.011em;
+}
+
+// Override links for web apps
+a {
+    color: currentColor;
+    text-decoration: none;
+}
+
+// Link helper for applying default 'a' style
+.link {
+    cursor: pointer;
+
+    &:focus,
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+// Breadcrumb
+.breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    .path {
+        white-space: nowrap;
+
+        &a {
+            color: inherit;
+        }
+
+        &.current {
+
+        }
+    }
+
+    .separator {
+        margin: 0 6px;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Code and Pre
+// -----------------------------------------------------------------------------------------------------
+code,
+pre {
+    font-family: $treo-font-mono;
+    font-size: 14px;
+    line-height: 1.6;
+    border-radius: 4px;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+
+    white-space: pre-wrap;
+    word-break: break-word;
+    word-wrap: break-word;
+}
+
+pre {
+    padding: 24px;
+    margin: 0;
+    @include treo-elevation();
+}
+
+:not(pre) > code {
+    padding: 2px 5px;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Rich text
+// -----------------------------------------------------------------------------------------------------
+.rich-text {
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    h1 {
+        font-size: 36px;
+        font-weight: 600;
+        line-height: 1;
+    }
+
+    h1 + * {
+        margin-top: 32px;
+    }
+
+    h2 {
+        font-size: 24px;
+        font-weight: 600;
+        line-height: 1.25;
+    }
+
+    * + h2 {
+        margin-top: 32px;
+    }
+
+    h2 + * {
+        margin-top: 16px;
+    }
+
+    h3 {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 1.25;
+    }
+
+    * + h3 {
+        margin-top: 32px;
+    }
+
+    h2 + h3 {
+        margin-top: 16px;
+    }
+
+    h3 + * {
+        margin-top: 8px;
+    }
+
+    h4 {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 1.5;
+    }
+
+    * + h4 {
+        margin-top: 24px;
+    }
+
+    h3 + h4 {
+        margin-top: 8px;
+    }
+
+    h4 + * {
+        margin-top: 8px;
+    }
+
+    h5 {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.5;
+    }
+
+    h6 {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.5;
+    }
+
+    p {
+        line-height: 1.75;
+    }
+
+    p + p {
+        margin-top: 16px;
+    }
+
+    ol {
+        list-style-type: decimal;
+        padding-left: 20px;
+    }
+
+    * + ol {
+        margin-top: 16px;
+    }
+
+    ol + * {
+        margin-top: 16px;
+    }
+
+    li ol {
+        margin-top: 8px;
+    }
+
+    ul {
+        list-style-type: disc;
+        padding-left: 20px;
+    }
+
+    * + ul {
+        margin-top: 16px;
+    }
+
+    ul + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+        margin-top: 16px;
+    }
+
+    li ul {
+        margin-top: 8px;
+    }
+
+    li + li {
+        margin-top: 8px;
+    }
+
+    li p {
+        margin-top: 16px;
+    }
+
+    li p + p {
+        margin-top: 8px;
+    }
+
+    li:first-child p:first-child {
+        margin-top: 8px;
+    }
+
+    a {
+        font-weight: 500;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    abbr {
+        cursor: help;
+        border-bottom-width: 1px;
+        border-bottom-style: dotted;
+    }
+
+    blockquote {
+        border-left-width: 3px;
+        font-style: italic;
+        margin: 16px 0;
+        padding-left: 16px;
+
+        footer {
+            font-style: normal;
+
+            &:before {
+                content: '\2014 \00A0';
+            }
+        }
+
+        &.reverse {
+            border-left-width: 0;
+            border-right-width: 3px;
+            text-align: right;
+            padding-left: 0;
+            padding-right: 16px;
+
+            footer {
+
+                &:before {
+                    content: '';
+                }
+
+                &:after {
+                    content: '\2014 \00A0';
+                }
+            }
+        }
+    }
+
+    * + blockquote {
+        margin-top: 16px;
+    }
+
+    blockquote + * {
+        margin-top: 16px;
+    }
+
+    dl {
+
+        dt {
+            font-weight: 700;
+        }
+
+        dd {
+            margin: 4px 0 16px 0;
+        }
+    }
+
+    fieldset {
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+        padding-block-start: 0;
+        padding-block-end: 0;
+        width: 100%;
+        border-width: 1px;
+        border-radius: 4px;
+        padding: 24px;
+
+        legend {
+            padding: 0 6px;
+            margin-left: -6px;
+        }
+    }
+
+    img {
+        margin-top: 32px;
+        margin-bottom: 32px;
+    }
+
+    * + pre {
+        margin-top: 16px;
+    }
+
+    pre + * {
+        margin-top: 16px;
+    }
+
+    pre code {
+        padding: 0;
+    }
+
+    strong {
+        font-weight: 700;
+    }
+
+    // treo-highlight
+    * + .treo-highlight {
+        margin-top: 16px;
+    }
+
+    .treo-highlight + p {
+        margin-top: 24px;
+    }
+
+    // treo-message
+    * + treo-message {
+        margin-top: 24px;
+    }
+
+    treo-message + p {
+        margin-top: 24px;
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Theming
+// -----------------------------------------------------------------------------------------------------
+@include treo-theme {
+
+    $foreground: map-get($theme, foreground);
+    $primary: map-get($theme, primary);
+    $is-dark: map-get($theme, is-dark);
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ General
+    // -----------------------------------------------------------------------------------------------------
+
+    // Link helper for applying default 'a' style
+    .link {
+        color: map-get($primary, default);
+        border-bottom-color: map-get($primary, default);
+    }
+
+    // Breadcrumb
+    .breadcrumb {
+
+        .path {
+            color: map-get($primary, default);
+
+            &.current {
+                color: map-get($foreground, secondary-text);
+            }
+        }
+
+        .separator {
+            color: map-get($foreground, secondary-text);
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Code and Pre
+    // -----------------------------------------------------------------------------------------------------
+    code,
+    pre {
+        @if ($is-dark) {
+            color: treo-color('cool-gray', 400);
+            background: treo-color('cool-gray', 800);
+        } @else {
+            background: #FFFFFF;
+            color: #728FCB;
+        }
+    }
+
+    :not(pre) > code {
+        @if ($is-dark) {
+            color: treo-color('cool-gray', 400);
+            background: treo-color('cool-gray', 700);
+        } @else {
+            color: treo-color('cool-gray', 500);
+            background: treo-color('cool-gray', 200);
+        }
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Rich text
+    // -----------------------------------------------------------------------------------------------------
+    .rich-text {
+
+        a {
+            color: map-get($primary, default);
+            border-bottom-color: map-get($primary, default);
+        }
+
+        mark {
+            background: #F7F49A;
+        }
+    }
+}