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

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

{"version":3,"sourceRoot":"","sources":["../../scss/themes/green.scss","../../scss/themes/green/_styles.scss"],"names":[],"mappings":"AAcA,aCbE,qBACA,8BACA,iDACA,mDACA,oDAEA,uBACA,8BACA,gDACA,kDACA,sDAGA,yBACA,kCACA,iCACA,qCAGA,0BACE,6BACA,8BACA,uCACA,qEACA,0BACA,+EACA,sEACA,2BACA,gFAGF,4BACE,+BACA,8BACA,yCACA,wCACA,0BACA,kDACA,yCACA,2BACA,mDAGF,0BACE,2BACA,6BACA,qCACA,wCACA,0BACA,kDACA,yCACA,2BACA,mDAGF,kCACE,gCACA,uCACA,qEACA,0BACA,oCACA,2BACA,2BACA,gFAGF,oCACE,kCACA,yCACA,wCACA,0BACA,oCACA,2BACA,2BACA","file":"green.css","sourcesContent":["/**\n * Theme: green\n */\n\n// Functions, variables, maps, and mixins\n@import \"../core\";\n\n@import \"green/variables\";\n\n// Mixins\n@import \"green/light\";\n@import \"green/dark\";\n@import \"green/styles\";\n\n.theme-green {\n\t@include green-styles;\n}\n\n[data-bs-theme=\"light\"],\n:root:not([data-bs-theme=\"dark\"]) {\n  .theme-green {\n    @include green-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-green {\n      @include green-dark;\n    }\n  }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-bs-theme=\"dark\"] {\n  .theme-green {\n    @include green-dark;\n  }\n}\n","@mixin green-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}"]}