@trebco/treb 23.6.5 → 25.0.0-rc2

package/treb-embed/style/theme-defaults.scss

@@ -0,0 +1,444 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+/** 
+ * new theme! should add a class name (use treb-main?)
+ */
+
+/**
+ * we're using variables for selection colors because the colors are used
+ * in more than one place; that's a drawback of using CSS, but I think overall
+ * the benefits are still worth it.
+ *
+ * just FYI primary selection color is used in header overlay; and alternate
+ * selection color is used to highlight in formula editors (TODO/WIP).
+ */
+// $primary-selection-color: rgb(64, 192, 64);
+$primary-selection-color: #4caaf1;
+$primary-selection-color-unfocused: #acc0cf;
+
+
+$alternate-selection-color-1: rgb(251, 177, 60);
+//$alternate-selection-color-2: rgb(87, 184, 255);
+$alternate-selection-color-2: rgb(64, 192, 64);
+$alternate-selection-color-3: rgb(182, 109, 13);
+$alternate-selection-color-4: rgb(33, 118, 174);
+$alternate-selection-color-5: rgb(254, 104, 71);
+
+/**
+ * slightly darkening colors for text highlighting
+ * algo: convert to HSL; if L > .5, regenerate with L = .5; back to RGB (why?)
+ */
+$text-reference-color-1: rgb(250, 155, 5);
+//$text-reference-color-2: rgb(0, 147, 255);
+$text-reference-color-2: rgb(58, 173, 58);
+$text-reference-color-3: rgb(182, 109, 13);
+$text-reference-color-4: rgb(33, 118, 174);
+$text-reference-color-5: rgb(254, 47, 1);
+
+.treb-layout {
+
+/** 
+ * move primary selection focus color to focus-within on the top-level 
+ * node, and use a (new) unfocused selection color. name?
+ *
+ * this has to be as specific as the inside version
+ */
+.treb-container:focus-within {
+  // .treb-main {
+    .treb-grid-selection .primary-selection, .treb-header-overlay {
+      color: var(--treb-selection-color, $primary-selection-color);
+    }
+  // } 
+
+}
+
+
+  /* 
+  
+  theme colors (new). these are in addition to the cell text and background,
+  which are technically theme colors as well and should maybe move into this
+  section? not sure
+
+  */
+
+  .theme-color-1  { color: var(--treb-theme-color-1,  #E7E6E6); }
+  .theme-color-2  { color: var(--treb-theme-color-2,  #44546A); }
+  .theme-color-3  { color: var(--treb-theme-color-3,  #4472C4); }
+  .theme-color-4  { color: var(--treb-theme-color-4,  #ED7D31); }
+  .theme-color-5  { color: var(--treb-theme-color-5,  #A5A5A5); }
+  .theme-color-6  { color: var(--treb-theme-color-6,  #FFC000); }
+  .theme-color-7  { color: var(--treb-theme-color-7,  #5B9BD5); }
+  .theme-color-8  { color: var(--treb-theme-color-8,  #70AD47); }
+  .theme-color-9  { color: var(--treb-theme-color-9,  #0563C1); }
+  .theme-color-10 { color: var(--treb-theme-color-10, #954F72); }
+
+  /*
+
+  NOTE: much of the theme/style is supplied by the embed lib, which 
+  sets things like font. we decided to leave it there because it's applied
+  to more than just the treb-main node (also to the dialog), so it's easier
+  to keep it consistent over there. 
+  
+  We have the children, grid-specific, in here. you can still use a single
+  theme to override.
+
+  */
+
+  /* 
+   * offset colors. for some special cases (theme tables) we use offsets 
+   * against theme colors, selecting a color based on the lightness value 
+   * of another color.
+   */
+
+  /** offset dark is the DARK color applied against LIGHT backgrounds */
+  .treb-offset-dark { color: #000; }
+
+  /** offset light is the LIGHT color applied against DARK backgrounds */
+  .treb-offset-light { color: #fff; }
+
+  /** 
+   * highlight in the corner of a cell when there's a comment. this is painted.
+   */
+  .note-marker {
+    background:   var(--treb-note-marker-color,       #6FAB20);
+  }
+
+  /** 
+   * grid row/column headers. these are painted, so this CSS is read,
+   * instead of applied.
+   */
+  .grid-headers {
+    font-family:  var(--treb-grid-header-font-family,   inherit);
+    font-size:    var(--treb-grid-header-font-size,     10pt);
+    font-weight:  var(--treb-grid-header-font-weight,   normal);
+    font-style:   var(--treb-grid-header-font-style,    normal);
+    background:   var(--treb-grid-header-background,  rgb(238, 238, 242));
+
+    // for these two fall back to grid values, then defaults
+    color:        var(--treb-grid-header-color,       var(--treb-grid-default-color, #666));
+    stroke:       var(--treb-grid-header-grid-color,    var(--treb-grid-grid-color, rgb(204, 204, 212)));
+  }
+
+  /** 
+   * cells in the grid. background is the unstyled background color 
+   * (should probably be in grid, not here). 
+   *
+   * everything can be overridden by cell/column/row/sheet styles.
+   *
+   * stroke here is the color for grid lines. that used to be a separate
+   * section, but it seems superfluous.
+   */
+  .grid-cells {
+    font-family:  var(--treb-grid-font-family,          inherit);
+    font-size:    var(--treb-grid-font-size,            14px);
+    color:        var(--treb-grid-default-color,        inherit);
+    stroke:       var(--treb-grid-grid-color,         rgb(204, 204, 212));
+    background:   var(--treb-grid-background,         #fff);
+  }
+
+  .grid-background {
+    background-image: var(--treb-grid-background-image, none);
+  }
+
+  /**
+   * this is used for freeze-area highlights
+   */
+  .frozen-selection {
+    &.highlight-area {
+      background: rgba(87, 184, 255, .25);
+      border-left-color: rgba(33, 118, 174, 1); /* not using */
+      border-bottom-color: rgba(33, 118, 174, 1); /* not using */
+    }
+  }
+
+  /** 
+   * tooltip when entering formula
+   * FIXME: could go into some sort of container with the list? (...) 
+   */
+  .treb-autocomplete-tooltip {
+
+    font-size: 14px; /* FIXME: relative */
+    border-radius: 2px;
+
+    background:   var(--treb-autocomplete-tooltip-background,   #fffbb5);
+    color:        var(--treb-autocomplete-tooltip-color,          inherit);
+    border: 1px solid var(--treb-autocomplete-tooltip-border-color, unset);
+    
+    & .active-argument {
+      font-weight: 700;
+    }
+  
+    & .function-description {
+      font-style: italic;
+    }
+  
+    padding: 3px 8px;
+    margin: 4px 0px;
+    line-height: normal;
+
+  }
+
+  /** 
+   * autocomplete for functions (and names)
+   */
+  .treb-autocomplete {
+
+    font-size: 14px; /* FIXME: relative? could be larger, actually */
+    background: var(--treb-autocomplete-background, #fff);
+    border-radius: 2px;
+    border: 1px solid var(--treb-autocomplete-border-color, var(--treb-ui-border-color, #ccc));
+    box-shadow: $default-box-shadow;
+
+    li {
+      color: var(--treb-autocomplete-entry-color, #333);
+      a.selected {
+        // background: #339966;
+        background: var(--treb-autocomplete-selected-entry-background, #2e8dd6);
+        color: var(--treb-autocomplete-selected-entry-color, #fff);
+      }
+    }
+
+  }
+
+  /** header overlays (indicate selection) */
+  .treb-header-overlay {
+
+    stroke: none;
+    color: var(--treb-selection-color-unfocused, var(--treb-selection-color, $primary-selection-color));
+
+    .treb-overlay {
+      fill: rgb(0, 0, 0); /* FIXME: use color? */
+      stroke: none;
+      opacity: 0.05;
+    }
+
+    .treb-highlight {
+      fill: currentColor;
+    }
+
+  }
+
+  /** 
+   * these are highlight colors in editors. we are not consolidating 
+   * because we may need to adjust a little bit (some are too light to 
+   * be useful).
+   */
+
+  .treb-editor-container > div, .treb-overlay-editor {
+
+    /* span:nth-of-type(1n) { */
+    span.highlight-1 {
+      color: $text-reference-color-1;
+    }
+
+    /* span:nth-of-type(2n) { */
+    span.highlight-2 {
+        color: $text-reference-color-2;
+    }
+
+    /* span:nth-of-type(3n) { */
+    span.highlight-3 {
+        color: $text-reference-color-3;
+    }
+
+    /* span:nth-of-type(4n) { */
+      span.highlight-4 {
+      color: $text-reference-color-4;
+    }
+
+    /* span:nth-of-type(5n) { */
+    span.highlight-5 {
+      color: $text-reference-color-5;
+    }
+
+  }
+
+  /** 
+   * selections
+   */
+  .treb-grid-selection, .frozen-selection {
+
+    /** common */
+    .selection {
+      stroke-width: var(--treb-selection-stroke-width, 2px);
+      .outline {
+        stroke: currentColor;
+        fill: none;
+      }
+      .fill {
+        stroke: none;
+        fill: currentColor;
+        opacity: var(--treb-selection-fill-opacity, .1);
+      }
+    }
+
+    /** common to alternate selections */
+    .alternate-selection {
+      stroke-dasharray: var(--treb-alternate-selection-dasharray, 3 2);
+    }
+
+    .alternate-selection:nth-of-type(1n) {
+      color: $alternate-selection-color-1;
+    }
+
+    .alternate-selection:nth-of-type(2n) {
+      color: $alternate-selection-color-2;
+    }
+
+    .alternate-selection:nth-of-type(3n) {
+      color: $alternate-selection-color-3;
+    }
+
+    .alternate-selection:nth-of-type(4n) {
+      color: $alternate-selection-color-4;
+    }
+
+    .alternate-selection:nth-of-type(5n) {
+      color: $alternate-selection-color-5;
+    }
+
+    /** 
+     * primary selection has a separate fill node, because the "target" is
+     * not filled
+     */
+    .primary-selection {
+      color: var(--treb-selection-color-unfocused, var(--treb-selection-color, $primary-selection-color));
+      
+      .nub {
+        stroke: #fff; // <-- ? maybe grid background color?
+        fill: currentColor;
+        stroke-width: 1px;
+      }
+    }
+  }
+
+  /**
+   * column/row size tooltip
+   * TODO/FIXME: should this have a box-shadow?
+   */
+  .treb-tooltip {
+
+    font-size: 11pt; /** FIXME: relative */
+
+    background:     var(--treb-resize-tooltip-background,   rgba(0, 0, 0, .8));
+    color:          var(--treb-resize-tooltip-color,        #fff);
+    border-color:   var(--treb-resize-tooltip-background,   rgba(0, 0, 0, .8)); /* for arrow */
+
+  }
+
+  /**
+   * styling the tab bar, at bottom; includes the add-tab tab and
+   * remove tab button
+   */
+  .treb-spreadsheet-footer {
+
+    font-size: 14px; /* FIXME: could be relative? */
+
+    .treb-spreadsheet-tabs > li, .treb-add-tab {
+      background: var(--treb-tab-bar-tab-background, rgb(238, 238, 242));
+      color: var(--treb-tab-bar-tab-color, var(--treb-ui-color, inherit));
+
+      &[selected] {
+        background: var(--treb-tab-bar-active-tab-background, #fff);
+        color: var(--treb-tab-bar-active-tab-color, var(--treb-ui-color, inherit));
+      }
+    }
+
+  }
+
+  /**
+   * formula bar and address label. includes f(x) button which we don't use ATM
+   *
+   * FIXME: a lot of formula bar styling is in a separate stylesheet
+   * (formula-bar.scss); that's OK for layout styling but colors and fonts
+   * should centralize here. TODO/WIP.
+   */
+  .treb-formula-bar {
+    .treb-address-label, .treb-editor-container {
+      background: var(--treb-formula-bar-background, transparent);
+      color: var(--treb-formula-bar-color, var(--treb-ui-color, inherit));
+
+      &[locked] {
+        background: var(--treb-formula-bar-locked-background, rgb(238, 244, 252));
+        position: relative;
+
+        &:after {
+          position: absolute;
+          right: 2px;
+          top: 2px;
+          content: '';
+          width: 12px;
+          height: 12px;
+          opacity: .4;
+
+          /**
+           * NOTE: recent updates to webpack (v5ish) require a new option
+           * to css-loader, otherwise it rewrites this with a URL API function
+           * which breaks IE11. 
+           *
+           * (removed nasty comment about webpack)
+           *
+           * FIXME: this makes theming the lock icon impossible. use a node.
+           */
+          // background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 224H400V144C400 65 335 0 256 0S112 65 112 144V224H96C61 224 32 253 32 288V448C32 483 61 512 96 512H416C451 512 480 483 480 448V288C480 253 451 224 416 224ZM176 144C176 100 212 64 256 64S336 100 336 144V224H176V144Z' fill='currentColor'/%3E%3C/svg%3E");
+
+          --icon: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 224H400V144C400 65 335 0 256 0S112 65 112 144V224H96C61 224 32 253 32 288V448C32 483 61 512 96 512H416C451 512 480 483 480 448V288C480 253 451 224 416 224ZM176 144C176 100 212 64 256 64S336 100 336 144V224H176V144Z' fill='currentColor'/%3E%3C/svg%3E");
+
+          background: var(--treb-formula-bar-lock-icon-color, currentColor);
+          mask-position: center;
+          -webkit-mask-position: center;
+          mask-repeat: no-repeat;
+          -webkit-mask-repeat: no-repeat;
+          mask-image: var(--icon);
+          -webkit-mask-image: var(--icon);
+          mask-size: 12px 12px;
+          -webkit-mask-size: 12px 12px;
+
+          
+
+        }
+
+      }
+
+    }
+
+  }
+
+
+
+/**
+ * special override for windows, using calibri (which is too small).
+ * you should still be able to override with a regular theme style,
+ * or (potentially) also override for windows specifically. fancy!
+ */
+.treb-ua-windows .grid-cells {
+  font-size: var(--treb-grid-font-size-windows, var(--treb-grid-font-size, 12pt)); 
+  font-family: var(--treb-grid-font-family-windows, var(--treb-grid-font-family, "Calibri", $font-stack)); // does this actually work? is this included? (...)
+}
+
+.treb-ua-osx .grid-cells {
+  font-size: var(--treb-grid-font-size-osx, var(--treb-grid-font-size, 10pt)); // slightly smaller default
+  font-family: var(--treb-grid-font-family-osx, var(--treb-grid-font-family, inherit));
+}
+
+}
+