UNPKG

@instawork/design-system

Version:

The design system for Instawork's web apps

Instawork/design-system

1 lines • 4.63 kB
1
{"version":3,"sources":["webpack://@instawork/design-system/./scss/_theme.scss","webpack://@instawork/design-system/./scss/swatches.scss"],"names":[],"mappings":"AAEA,kCACE,4BACA,qBACA,6BACA,2BACA,mCACA,iCACA,iDACA,gCACA,+CACA,yDACA,iCACA,mBACA,qBACA,uBACA,2BACA,6BACA,8BACA,mDACA,6CACA,2BACA,4BACA,qHACA,gLACA,2HACA,uBAGE,ukEAcJ,0BACE,qBACA,6BACA,2BACA,mCACA,2BACA,8BACA,sBACA,qBACA,uBACA,2BACA,iCACA,gCACA,4BAIF,0BACE,kCACA,iDACA,2DAGF,gCACE,kCACA,iDACA,2DAGF,8BACE,gCACA,iDACA,2DAGF,gCACE,iCACA,iDACA,2DC1DF,QACE,YACA,WACA,mBAMA,iBACE,wBAxBgB,CAuBlB,gBACE,wBAxBgB,CAuBlB,gBACE,wBAxBgB,CA4BlB,cACE,wBAvBiB,CAsBnB,aACE,wBAvBiB,CAsBnB,gBACE,wBAvBiB,CAsBnB,eACE,wBAvBiB,CAsBnB,gBACE,wBAvBiB","file":"swatches.min.css","sourcesContent":["@import '_iwds-colors';\n\n:root, .force-light, .force-light * {\n --base-color-string: 3, 24, 56;\n --text-color: #{$gray-900};\n --text-color-inverse: #{$gray-200};\n --text-color-light: #{$gray-700};\n --text-color-light-inverse: #{$gray-400};\n --primary-color-string: 41, 82, 239;\n --primary-color: rgb(var(--primary-color-string));\n --accent-color-string: 41, 82, 239;\n --accent-color: rgb(var(--accent-color-string));\n --accent-color-light: rgba(var(--accent-color-string), 8%);\n --light-color-string: 255, 255, 255;\n --light-color: #FFF;\n --dark-color: #{$gray-900};\n --border-color: #{$gray-300};\n --background-color: #{scale-color($blue-50, $lightness: 97.5%)};\n --card-background-color: #FFF;\n --hover-color-string: 20, 23, 30;\n --hover-color: rgba(var(--hover-color-string), 0.04);\n --background-color-inverse: var(--text-color);\n --icon-color: brightness(1);\n --shadow-color-string: 0, 0, 0;\n --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08);\n --shadow-hover: 0.5rem 1rem rgba(var(--shadow-color-string), .08), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02), 0 0.125rem 1rem rgba(var(--shadow-color-string), .08);\n --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02);\n --border-radius: 0.5rem;\n\n @each $name, $color in $colors {\n --#{$name}: #{$color};\n }\n}\n\n//@media (max-width: 580px) {\n// :root, .force-light, .force-light * {\n// --background: #FFF;\n// --card-background: #{scale-color($blue-50, $lightness: 97.5%)};\n// --shadow: 0 0 0 0;\n// }\n//}\n\n//@media (prefers-color-scheme: dark) {\n// :root:not([light]),\n.force-dark, .force-dark * {\n --text-color: #{$gray-200};\n --text-color-inverse: #{$gray-700};\n --text-color-light: #{$gray-500};\n --text-color-light-inverse: #{$gray-700};\n --icon-color: brightness(1);\n --light-color-string: 21, 21, 25;\n --light-color: #{$gray-900};\n --dark-color: #{$gray-100};\n --border-color: #{$gray-800};\n --background-color: #06070a;\n --hover-color-string: 250, 251, 255;\n --card-background-color: #{$gray-900};\n --shadow-color-string: 0, 0, 0;\n}\n//}\n\n.theme-info, .theme-info * {\n --primary-color-string: 131, 65, 163;\n --primary-color: rgb(var(--primary-color-string));\n --primary-color-light: rgba(var(--primary-color-string), 8%);\n}\n\n.theme-warning, .theme-warning * {\n --primary-color-string: 224, 132, 45;\n --primary-color: rgb(var(--primary-color-string));\n --primary-color-light: rgba(var(--primary-color-string), 8%);\n}\n\n.theme-danger, .theme-danger * {\n --primary-color-string: 219, 7, 61;\n --primary-color: rgb(var(--primary-color-string));\n --primary-color-light: rgba(var(--primary-color-string), 8%);\n}\n\n.theme-success, .theme-success * {\n --primary-color-string: 43, 153, 72;\n --primary-color: rgb(var(--primary-color-string));\n --primary-color-light: rgba(var(--primary-color-string), 8%);\n}\n","@import \"colors\";\n@import \"theme\";\n\n@import 'custom-variables';\n\n@import '../node_modules/bootstrap/scss/functions';\n@import '../node_modules/bootstrap/scss/variables';\n@import '../node_modules/bootstrap/scss/mixins';\n\n\n$iw-neutral-colors: (\n \"black-50\": $gray-900,\n \"gray-80\": $gray-80,\n \"gray-30\": $gray-30,\n);\n\n$iw-extended-colors: (\n \"blue3\": $blue-30,\n \"red3\": $red-30,\n \"yellow3\": $yellow-30,\n \"green3\": $green-30,\n \"purple3\": $purple-30,\n);\n\n.swatch {\n height: 4rem;\n width: 4rem;\n border-radius: 2rem;\n}\n\n\n// Swatches\n@each $color, $value in $iw-neutral-colors {\n .swatch-#{$color} {\n background-color: $value;\n }\n}\n@each $color, $value in $iw-extended-colors {\n .swatch-#{$color} {\n background-color: $value;\n }\n}\n"],"sourceRoot":""}