@webpixels/css/dist/themes/teal.css.map

Utility and component-centric design system based on Bootstrap for fast, responsive UI development.

{"version":3,"sourceRoot":"","sources":["../../scss/themes/teal.scss","../../scss/themes/teal/_styles.scss"],"names":[],"mappings":"AAcA,YCbE,qBACA,8BACA,iDACA,mDACA,oDAEA,uBACA,8BACA,gDACA,kDACA,sDAGA,yBACA,kCACA,iCACA,qCAGA,yBACE,6BACA,8BACA,uCACA,qEACA,0BACA,+EACA,sEACA,2BACA,gFAGF,2BACE,+BACA,8BACA,yCACA,wCACA,0BACA,kDACA,yCACA,2BACA,mDAGF,yBACE,2BACA,6BACA,qCACA,wCACA,0BACA,kDACA,yCACA,2BACA,mDAGF,iCACE,gCACA,uCACA,qEACA,0BACA,oCACA,2BACA,2BACA,gFAGF,mCACE,kCACA,yCACA,wCACA,0BACA,oCACA,2BACA,2BACA","file":"teal.css","sourcesContent":["/**\n * Theme: teal\n */\n\n// Functions, variables, maps, and mixins\n@import \"../core\";\n\n@import \"teal/variables\";\n\n// Mixins\n@import \"teal/light\";\n@import \"teal/dark\";\n@import \"teal/styles\";\n\n.theme-teal {\n\t@include teal-styles;\n}\n\n[data-bs-theme=\"light\"],\n:root:not([data-bs-theme=\"dark\"]) {\n  .theme-teal {\n    @include teal-light;\n  }\n}\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n\n@media only screen and (prefers-color-scheme: dark) {\n  :root:not([data-bs-theme]) {\n    .theme-teal {\n      @include teal-dark;\n    }\n  }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-bs-theme=\"dark\"] {\n  .theme-teal {\n    @include teal-dark;\n  }\n}\n","@mixin teal-styles {\n  --x-primary: #{$primary};\n  --x-primary-rgb: #{to-rgb($primary)};\n  --x-primary-text-emphasis: #{$primary-text-emphasis};\n  --x-primary-bg-subtle: #{$primary-bg-subtle};\n  --x-primary-border-subtle: #{$primary-border-subtle};\n\n  --x-secondary: #{$secondary};\n  --x-secondary-rgb: #{to-rgb($secondary)};\n  --x-secondary-text-emphasis: #{$secondary-text-emphasis};\n  --x-secondary-bg-subtle: #{$secondary-bg-subtle};\n  --x-secondary-border-subtle: #{$secondary-border-subtle};\n\n  // Links \n  --x-link-color: $primary;\n  --x-link-color-rgb: $primary-rgba;\n  --x-link-hover-color: $secondary;\n  --x-link-hover-color-rgb: #{to-rgb($secondary)};\n\n  // Buttons\n  .btn-primary {\n    --x-btn-bg: var(--x-primary);\n    --x-btn-color: var(--x-white);\n    --x-btn-border-color: var(--x-primary);\n    --x-btn-hover-bg: #{lighten($primary, 6%)};\n    --x-btn-hover-color: #{color-contrast($primary)};\n    --x-btn-hover-border-color: #{lighten($primary, 6%)};\n    --x-btn-active-bg: #{lighten($primary, 6%)};\n    --x-btn-active-color: #{color-contrast($primary)};\n    --x-btn-active-border-color: #{lighten($primary, 6%)};\n  }\n\n  .btn-secondary {\n    --x-btn-bg: var(--x-secondary);\n    --x-btn-color: var(--x-white);\n    --x-btn-border-color: var(--x-secondary);\n    --x-btn-hover-bg: #{lighten($secondary, 6%)};\n    --x-btn-hover-color: #{color-contrast($secondary)};\n    --x-btn-hover-border-color: #{lighten($secondary, 6%)};\n    --x-btn-active-bg: #{lighten($secondary, 6%)};\n    --x-btn-active-color: #{color-contrast($secondary)};\n    --x-btn-active-border-color: #{lighten($secondary, 6%)};\n  }\n\n  .btn-inverse {\n    --x-btn-bg: var(--x-white);\n    --x-btn-color: var(--x-dark);\n    --x-btn-border-color: var(--x-white);\n    --x-btn-hover-bg: #{lighten($dark, 6%)};\n    --x-btn-hover-color: #{color-contrast($dark)};\n    --x-btn-hover-border-color: #{lighten($dark, 6%)};\n    --x-btn-active-bg: #{lighten($dark, 6%)};\n    --x-btn-active-color: #{color-contrast($dark)};\n    --x-btn-active-border-color: #{lighten($dark, 6%)};\n  }\n\n  .btn-outline-primary {\n    --x-btn-color: var(--x-primary);\n    --x-btn-border-color: var(--x-primary);\n    --x-btn-hover-bg: #{lighten($primary, 6%)};\n    --x-btn-hover-color: #{color-contrast($primary)};\n    --x-btn-hover-border-color: #{$primary};\n    --x-btn-active-bg: #{$primary};\n    --x-btn-active-color: #{color-contrast($primary)};\n    --x-btn-active-border-color: #{lighten($primary, 6%)};\n  }\n\n  .btn-outline-secondary {\n    --x-btn-color: var(--x-secondary);\n    --x-btn-border-color: var(--x-secondary);\n    --x-btn-hover-bg: #{lighten($secondary, 6%)};\n    --x-btn-hover-color: #{color-contrast($secondary)};\n    --x-btn-hover-border-color: #{$secondary};\n    --x-btn-active-bg: #{$secondary};\n    --x-btn-active-color: #{color-contrast($secondary)};\n    --x-btn-active-border-color: #{lighten($secondary, 6%)};\n  }\n}"]}