@pb33f/cowboy-components 0.7.18 → 0.9.0

package/dist/css/alerts.css.js

@@ -4,6 +4,8 @@ export default css `
     strong {
         display: block;
         margin-bottom: var(--global-space);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     sl-alert::part(base) {

package/dist/css/badges.css.js

@@ -2,6 +2,8 @@ import { css } from "lit";
 export default css `
     sl-badge::part(base) {
         border-radius: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
     }
     
     sl-badge {

package/dist/css/button.css.js

@@ -44,7 +44,8 @@ export default css `
     }
     
     sl-button::part(label){
-        
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     sl-button.small::part(label){
@@ -52,6 +53,17 @@ export default css `
         line-height: 17px;
     }
 
+    sl-button.slim::part(base){
+        min-height: unset;
+        margin-top: 0;
+        padding: 2px 8px;
+    }
+
+    sl-button.slim::part(label){
+        font-size: 0.75rem;
+        line-height: 1.2;
+    }
+
     sl-button::part(base):hover{
         font-family: var(--font-stack), monospace;
         background-color: var(--primary-color);
@@ -91,5 +103,26 @@ export default css `
         background-color: var(--warn-color);
         color: var(--background-color);
     }
+
+    sl-button.text-button::part(base){
+        border: none;
+        margin-top: 6px;
+        height: 20px;
+        border-radius: 0;
+        min-height: inherit;
+        font-size: 0.9rem;
+        line-height: 20px;
+    }
+    
+    sl-button.premium::part(base) {
+        border-color: var(--warn-color);
+        color: var(--warn-color);
+    }
+    
+    sl-button.premium::part(base):hover {
+        border-color: var(--warn-color);
+        background-color: var(--warn-color);
+        color: var(--background-color);
+    }
     
 `;

package/dist/css/chroma-synxtax.css.js

@@ -27,7 +27,7 @@ export default css `
 
     .chroma {
         background-color: rgba(0, 0, 0, 0);
-        background-image: linear-gradient(to right, #171d25, var(--background-color));
+        background-image: linear-gradient(to right, var(--chroma-gradient-start, #171d25), var(--background-color));
     }
 
     @media only screen and (max-width: 800px) {
@@ -43,17 +43,17 @@ export default css `
 
     }
 
-    /* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
+    /* Background */ .chroma { color: var(--font-color); background-color: var(--chroma-bg, #282a36) }
     /* Other */ .chroma .x {  }
     /* Error */ .chroma .err {  }
     /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
     /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-    /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+    /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: var(--chroma-highlight, #ffffcc) }
     /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
     /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
     /* Keyword */ .chroma .k { color: var(--secondary-color) }
     /* KeywordConstant */ .chroma .kc { color: var(--primary-color) }
-    /* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-family: var(--font-stack-bold), monospaced }
+    /* KeywordDeclaration */ .chroma .kd { color: var(--chroma-keyword-decl, #8be9fd); font-family: var(--font-stack-bold), monospaced }
     /* KeywordNamespace */ .chroma .kn { color: var(--secondary-color) }
     /* KeywordPseudo */ .chroma .kp { color: var(--secondary-color) }
     /* KeywordReserved */ .chroma .kr { color: var(--secondary-color) }
@@ -103,23 +103,23 @@ export default css `
     /* LiteralNumberInteger */ .chroma .mi { color: var(--tertiary-color) }
     /* LiteralNumberIntegerLong */ .chroma .il { color: var(--tertiary-color) }
     /* LiteralNumberOct */ .chroma .mo { color: var(--tertiary-color) }
-    /* Operator */ .chroma .o { color: #ff79c6 }
-    /* OperatorWord */ .chroma .ow { color: #ff79c6 }
+    /* Operator */ .chroma .o { color: var(--chroma-operator, #ff79c6) }
+    /* OperatorWord */ .chroma .ow { color: var(--chroma-operator, #ff79c6) }
     /* Punctuation */ .chroma .p { color: var(--font-color-sub1)  }
-    /* Comment */ .chroma .c { color: #6272a4 }
-    /* CommentHashbang */ .chroma .ch { color: #6272a4 }
-    /* CommentMultiline */ .chroma .cm { color: #6272a4 }
-    /* CommentSingle */ .chroma .c1 { color: #6272a4 }
-    /* CommentSpecial */ .chroma .cs { color: #6272a4 }
-    /* CommentPreproc */ .chroma .cp { color: #ff79c6 }
-    /* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+    /* Comment */ .chroma .c { color: var(--chroma-comment, #6272a4) }
+    /* CommentHashbang */ .chroma .ch { color: var(--chroma-comment, #6272a4) }
+    /* CommentMultiline */ .chroma .cm { color: var(--chroma-comment, #6272a4) }
+    /* CommentSingle */ .chroma .c1 { color: var(--chroma-comment, #6272a4) }
+    /* CommentSpecial */ .chroma .cs { color: var(--chroma-comment, #6272a4) }
+    /* CommentPreproc */ .chroma .cp { color: var(--chroma-operator, #ff79c6) }
+    /* CommentPreprocFile */ .chroma .cpf { color: var(--chroma-operator, #ff79c6) }
     /* Generic */ .chroma .g {  }
     /* GenericDeleted */ .chroma .gd { color: var(--error-color)}
     /* GenericEmph */ .chroma .ge { text-decoration: underline }
     /* GenericError */ .chroma .gr {  }
     /* GenericHeading */ .chroma .gh { font-family: var(--font-stack-bold), monospaced }
     /* GenericInserted */ .chroma .gi { color: var(--terminal-text); font-family: var(--font-stack-bold), monospaced }
-    /* GenericOutput */ .chroma .go { color: #44475a }
+    /* GenericOutput */ .chroma .go { color: var(--chroma-comment, #44475a) }
     /* GenericPrompt */ .chroma .gp {  }
     /* GenericStrong */ .chroma .gs {  }
     /* GenericSubheading */ .chroma .gu { font-family: var(--font-stack-bold), monospaced }

package/dist/css/cowboy-components.css

@@ -43,7 +43,7 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-track {
-    background-color: black;
+    background-color: var(--terminal-background);
 }
 
 body::-webkit-scrollbar-thumb {
@@ -464,6 +464,40 @@ blockquote:before {
     display: inline-block;
 }
 
+.chips {
+    font-size: 25px;
+}
+
+.mode-switcher {
+    text-align: right;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    font-family: var(--font-stack), sans-serif;
+}
+
+.read-only-banner {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    background: var(--warn-200);
+    color: var(--background-color);
+    font-family: var(--font-stack), sans-serif;
+    font-size: 0.8rem;
+    border-left: 4px solid var(--warn-300);
+}
+
+.read-only-banner sl-icon {
+    font-size: 1.1rem;
+    margin-right: 5px;
+}
+
+sl-switch.mode-switcher::part(label) {
+    font-family: var(--font-stack), sans-serif;
+    font-size: 0.7rem;
+    color: var(--tertiary-color);
+}
+
+
 @keyframes spinner {
     0% {
         transform: rotate(0);
@@ -478,6 +512,16 @@ blockquote:before {
     }
 }
 
+html[theme="light"] .monaco-editor,
+html[theme="light"] .monaco-diff-editor {
+    --vscode-diffEditor-insertedTextBackground: rgba(0, 0, 0, 0.1) !important;
+    --vscode-diffEditor-insertedLineBackground: rgba(0, 0, 0, 0.06) !important;
+    --vscode-diffEditor-removedTextBackground: rgba(0, 0, 0, 0.25) !important;
+    --vscode-diffEditor-removedLineBackground: rgba(0, 0, 0, 0.12) !important;
+    --vscode-diffEditorGutter-insertedLineBackground: rgba(0, 0, 0, 0.06) !important;
+    --vscode-diffEditorGutter-removedLineBackground: rgba(0, 0, 0, 0.12) !important;
+}
+
 @media only screen and (max-width: 1000px) {
     ul > li {
         margin-bottom: calc(var(--global-space) * 2);

package/dist/css/dialog.css.js

@@ -2,10 +2,19 @@ import { css } from "lit";
 export default css `
     sl-dialog {
         --width: 50vw
-    }   
+    }
     sl-dialog::part(panel) {
         border: 1px dashed var(--secondary-color);
         border-radius: 0;
     }
-    
+
+    sl-dialog::part(title) {
+        font-family: var(--font-stack-bold), monospace;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    sl-dialog::part(header) {
+        border-bottom: 1px dashed var(--secondary-color);
+    }
 `;

package/dist/css/filter.css.js

@@ -5,7 +5,9 @@ export default css `
     }
 
     .label {
-        padding-top: 7px;
+        padding-top: 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     sl-button::part(base){
@@ -26,8 +28,10 @@ export default css `
         line-height: 17px;
         font-size: 0.7rem;
         overflow-x: hidden;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
-    
+
     sl-menu{
         border: 1px solid var(--primary-color);
         border-radius: 0;
@@ -39,12 +43,14 @@ export default css `
         line-height: 17px;
         font-size: 0.7rem;
         --sl-color-neutral-100: var(--secondary-color-lowalpha);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
-    
+
     sl-input {
         width: 100%;
     }
-    
+
     sl-input::part(base){
         border-radius: 0;
         border: 1px solid var(--primary-color);
@@ -54,13 +60,19 @@ export default css `
         padding: 0;
         margin-top: 5px;
         background-color: var(--background-color);
-
     }
 
     sl-input::part(input){
         border-radius: 0;
         height: 16px;
         padding: 0 0 0 5px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    sl-input::part(input)::placeholder {
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
 `;

package/dist/css/forms.css.js

@@ -14,6 +14,8 @@ export default css `
         display: inline-block;
         text-align: center;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .checkbox {
@@ -31,6 +33,8 @@ export default css `
     sl-checkbox::part(label) {
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .label-on-left::part(form-control) {
@@ -51,6 +55,8 @@ export default css `
     sl-input::part(form-control-label) {
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     sl-input::part(base) {
@@ -73,11 +79,15 @@ export default css `
     sl-textarea::part(form-control-label) {
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     sl-select::part(form-control-label) {
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     sl-select::part(form-control) {
@@ -113,11 +123,15 @@ export default css `
     sl-radio-group::part(label) {
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     sl-radio-group::part(form-control-label) {
         font-family: var(--font-stack), monospace;
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     sl-radio::part(base) {
         font-family: var(--font-stack), monospace;

package/dist/css/pb33f-theme.css

@@ -175,22 +175,103 @@ html {
 
 html[theme="light"] {
     --background-color: #fff;
-    --font-color: black;
-
-    --font-color-sub1: #282828;
-    --font-color-sub2: #434343;
-    --font-color-sub3: #747474;
-    --secondary-color: #c201c8;
-    --secondary-color-dimmer: rgba(163, 0, 167, 0.45);
-    --secondary-color-text-shadow: rgba(250, 113, 251, 0.5);
-    --tertiary-color: #4c4c4c;
+    --background-color-withopacity: rgba(255, 255, 255, 0.9);
+    --background-color-withlowopacity: rgba(255, 255, 255, 0.3);
+
+    --font-color: #000;
+    --font-color-sub1: #222;
+    --font-color-sub2: #555;
+    --font-color-sub3: #888;
+    --font-color-sub4: #bbb;
+
+    --secondary-color: #000;
+    --secondary-color-dimmer: rgba(0, 0, 0, 0.35);
+    --secondary-color-text-shadow: none;
+    --secondary-color-text-shadow-outer: none;
+    --secondary-color-lowalpha: rgba(0, 0, 0, 0.25);
+    --secondary-color-very-lowalpha: rgba(0, 0, 0, 0.08);
+    --secondary-color-shadow: #ddd;
+    --secondary-color-shadow-mid: #ccc;
+
+    --tertiary-color: #666;
+
+    --terminal-yellow: #000;
+
+    --hrcolor: #ccc;
+    --code-border: #999;
+    --string-literal: #000;
+    --neon-pink: #000;
+
+    --warn-400: #000;
+    --warn-400-glow: #000;
+    --warn-400-lowalpha: rgba(0, 0, 0, 0.2);
+    --warn-300: #000;
+    --warn-300-lowalpha: rgba(0, 0, 0, 0.2);
+    --warn-200: #000;
+    --warn-200-lowalpha: rgba(0, 0, 0, 0.2);
+    --warn-color: #000;
+    --warn-color-lowalpha: rgba(0, 0, 0, 0.2);
+
+    --ok-400: #000;
+    --ok-400-lowalpha: rgba(0, 0, 0, 0.2);
+    --ok-300: #000;
+    --ok-300-lowalpha: rgba(0, 0, 0, 0.2);
+    --ok-200: #000;
+    --ok-200-lowalpha: rgba(0, 0, 0, 0.2);
+    --ok-color: #000;
+    --ok-color-lowalpha: rgba(0, 0, 0, 0.2);
+
+    --sl-color-primary-50: rgba(0, 0, 0, 0.05);
+    --sl-color-primary-100: rgba(0, 0, 0, 0.10);
+    --sl-color-primary-200: rgba(0, 0, 0, 0.20);
+    --sl-color-primary-300: rgba(0, 0, 0, 0.35);
+    --sl-color-primary-400: rgba(0, 0, 0, 0.50);
+    --sl-color-primary-500: rgba(0, 0, 0, 0.65);
+    --sl-color-primary-600: #000;
+    --sl-color-primary-700: #222;
+    --sl-color-primary-800: #333;
+    --sl-color-primary-900: #444;
+
+    --sl-color-success-50: rgba(0, 0, 0, 0.05);
+    --sl-color-success-100: rgba(0, 0, 0, 0.10);
+    --sl-color-success-200: rgba(0, 0, 0, 0.20);
+    --sl-color-success-300: rgba(0, 0, 0, 0.35);
+    --sl-color-success-400: rgba(0, 0, 0, 0.50);
+    --sl-color-success-500: rgba(0, 0, 0, 0.65);
+    --sl-color-success-600: #000;
+    --sl-color-success-700: #222;
+    --sl-color-success-800: #333;
+    --sl-color-success-900: #444;
+
+    --sl-color-danger-50: rgba(0, 0, 0, 0.05);
+    --sl-color-danger-100: rgba(0, 0, 0, 0.10);
+    --sl-color-danger-200: rgba(0, 0, 0, 0.20);
+    --sl-color-danger-300: rgba(0, 0, 0, 0.35);
+    --sl-color-danger-400: rgba(0, 0, 0, 0.50);
+    --sl-color-danger-500: rgba(0, 0, 0, 0.65);
+    --sl-color-danger-600: #000;
+    --sl-color-danger-700: #222;
+    --sl-color-danger-800: #333;
+    --sl-color-danger-900: #444;
+
+    --sl-color-warning-50: rgba(0, 0, 0, 0.05);
+    --sl-color-warning-100: rgba(0, 0, 0, 0.10);
+    --sl-color-warning-200: rgba(0, 0, 0, 0.20);
+    --sl-color-warning-300: rgba(0, 0, 0, 0.35);
+    --sl-color-warning-400: rgba(0, 0, 0, 0.50);
+    --sl-color-warning-500: rgba(0, 0, 0, 0.65);
+    --sl-color-warning-600: #000;
+    --sl-color-warning-700: #222;
+    --sl-color-warning-800: #333;
+    --sl-color-warning-900: #444;
+
+    --terminal-background: #f5f5f5;
+    --terminal-text: #000;
+    --terminal-text-shadow: none;
 
-    --primary-color: rgb(47, 142, 251);
-    --primary-color-text-shadow: none;
+    --pagination-header: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.9) 70%, rgba(0, 0, 0, 0.1) 100%);
 
-    --terminal-background: #f4f4f4;
-    --terminal-text: black;
-    --terminal-text-shadow: none;
+    --table-header-background-solid: rgba(0, 0, 0, 0.08);
 
     --kv-table-header-border-top: var(--code-border);
     --kv-table-dividers: var(--code-border);
@@ -198,10 +279,39 @@ html[theme="light"] {
     --kv-table-header-background: linear-gradient(-90deg, var(--background-color) 0%, var(--terminal-background) 60%);
     --kv-table-header-background-solid: var(--terminal-background);
 
+    --card-background-color: rgba(245, 245, 245, 0.85);
 
-    --bars-and-borders: var(--code-border);
-    --bars-and-borders-dim: var(--font-color-sub3);
+    --primary-color: #000;
+    --primary-color-text-shadow: none;
+    --primary-color-lowalpha: rgba(0, 0, 0, 0.4);
+    --primary-color-verylowalpha: rgba(0, 0, 0, 0.08);
+
+    --error-color: #000;
+    --error-color-glow: #000;
+    --error-font-color: #000;
+    --error-color-dimmed: rgba(0, 0, 0, 0.5);
+    --error-color-lowalpha: rgba(0, 0, 0, 0.3);
+    --error-color-dark: #f0f0f0;
+    --error-color-loweralpha: rgba(0, 0, 0, 0.15);
+    --error-color-verylowalpha: #f8f8f8;
+
+    --progress-bar-background: #e0e0e0;
+    --progress-bar-fill: #000;
+
+    --bars-and-borders: #999;
+    --bars-and-borders-dim: #bbb;
     --primary-text-shadow: none;
     --secondary-text-shadow: none;
 
+    --chart-color1: rgba(0, 0, 0, 0.6);
+    --chart-color2: rgba(0, 0, 0, 0.4);
+    --chart-color3: rgba(0, 0, 0, 0.25);
+    --chart-color4: rgba(0, 0, 0, 0.15);
+    --chart-color5: rgba(0, 0, 0, 0.08);
+
+    --chroma-bg: var(--background-color);
+    --chroma-gradient-start: var(--background-color);
+    --chroma-keyword-decl: #000;
+    --chroma-operator: #000;
+    --chroma-comment: #888;
 }

package/dist/css/scrollbar.css.js

@@ -5,7 +5,7 @@ export default css `
     }
 
     .scroller::-webkit-scrollbar-track {
-        background-color: black;
+        background-color: var(--terminal-background);
     }
 
     .scroller::-webkit-scrollbar-thumb {

package/dist/css/syntax.css.js

@@ -30,6 +30,11 @@ export default css `
         hyphens: none;
     }
 
+    :host-context(html[theme="light"]) code[class*="language-"],
+    :host-context(html[theme="light"]) pre[class*="language-"] {
+        text-shadow: none;
+    }
+
     /* Code blocks */
 
     pre[class*="language-"] {

package/dist/css/tabs.css.js

@@ -5,23 +5,40 @@ export default css `
     }
 
     sl-tab::part(base) {
-        padding-top: 0;
+        padding: 0 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
     .tab-group {
         --indicator-color: var(--secondary-color);
+    }
 
+    sl-tab-group {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 132px)
+    }
+
+    sl-tab-group::part(body) {
+        flex: 1;
+        overflow: hidden;
     }
 
     sl-tab-panel::part(base) {
         padding-top: 10px;
         overflow: hidden;
-
+        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
     .tab::part(base) {
         font: var(--font-stack);
         font-size: 0.9rem;
+        padding: 0 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
 

package/dist/css/tooltip.css.js

@@ -4,6 +4,8 @@ export default css `
     sl-tooltip::part(base){
         font-family: var(--font-stack), monospace;
         font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
 
 
@@ -14,6 +16,8 @@ export default css `
         color: var(--font-color);
         border: 1px dashed var(--secondary-color);
         border-radius: 0;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     sl-tooltip::part(base__arrow){
         background-color: var(--secondary-color);