@pb33f/cowboy-components 0.7.18 → 0.8.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/cowboy-components.css

@@ -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);

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,70 @@ 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;
+
+    --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 +246,33 @@ 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: #d32f5a;
+    --error-color-glow: #d32f5a;
+    --error-font-color: #c02050;
+    --error-color-dimmed: rgba(211, 47, 90, 0.5);
+    --error-color-lowalpha: rgba(211, 47, 90, 0.3);
+    --error-color-dark: #fce8ed;
+    --error-color-loweralpha: rgba(211, 47, 90, 0.15);
+    --error-color-verylowalpha: #fff5f7;
+
+    --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);
 }

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);