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

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

{"version":3,"sourceRoot":"","sources":["../../scss/themes/playful.scss","../../scss/themes/playful/_styles.scss"],"names":[],"mappings":"AAcA,eCbE,2BACA,qCAEA,qBACA,8BACA,gDACA,8CACA,kDAEA,uBACA,iCACA,kDACA,gDACA,oDAGA,oBACE,6BAGF,4BACE,6BACA,8BACA,uCACA,6DACA,0BACA,uEACA,8DACA,2BACA,wEAGF,8BACE,+BACA,8BACA,yCACA,+CACA,0BACA,yDACA,gDACA,2BACA,0DAGF,4BACE,2BACA,6BACA,qCACA,wCACA,0BACA,kDACA,yCACA,2BACA,mDAGF,oCACE,gCACA,uCACA,6DACA,0BACA,oCACA,2BACA,2BACA,wEAGF,sCACE,kCACA,yCACA,+CACA,0BACA,oCACA,2BACA,2BACA,0DAIF,qBACE,kBACA","file":"playful.css","sourcesContent":["/**\n * Theme: playful\n */\n\n// Functions, variables, maps, and mixins\n@import \"../core\";\n\n@import \"playful/variables\";\n\n// Mixins\n@import \"playful/light\";\n@import \"playful/dark\";\n@import \"playful/styles\";\n\n.theme-playful {\n\t@include playful-styles;\n}\n\n[data-bs-theme=\"light\"],\n:root:not([data-bs-theme=\"dark\"]) {\n  .theme-playful {\n    @include playful-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-playful {\n      @include playful-dark;\n    }\n  }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-bs-theme=\"dark\"] {\n  .theme-playful {\n    @include playful-dark;\n  }\n}\n","@mixin playful-styles {\n  --x-border-radius: #{$border-radius-xl};\n  --x-font-display: var(--font-nunito);\n\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  // Buttons\n  .btn {\n    --x-btn-border-radius: #{$border-radius-pill};\n  }\n\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\n  // Cards\n  .card {\n    --x-card-bg: #{$white};\n    --x-card-box-shadow: #{$box-soft-shadow};\n  }\n}"]}