UNPKG

@instawork/design-system

Version:

The design system for Instawork's web apps

Instawork/design-system

1 lines • 4.99 kB
1
{"version":3,"sources":["webpack://@instawork/design-system/./scss/_theme.scss","webpack://@instawork/design-system/./scss/swatches.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AC6DJ;;AD/CA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ACkDF;;AD9CA;EACE;EACA;EACA;ACiDF;;AD9CA;EACE;EACA;EACA;ACiDF;;AD9CA;EACE;EACA;EACA;ACiDF;;AD9CA;EACE;EACA;EACA;ACiDF;;AA3GA;EACE;EACA;EACA;AA8GF;;AAxGE;EACE,yBAxBgB;AAmIpB;;AA5GE;EACE,yBAxBgB;AAuIpB;;AAhHE;EACE,yBAxBgB;AA2IpB;;AA/GE;EACE,yBAvBiB;AAyIrB;;AAnHE;EACE,yBAvBiB;AA6IrB;;AAvHE;EACE,yBAvBiB;AAiJrB;;AA3HE;EACE,yBAvBiB;AAqJrB;;AA/HE;EACE,yBAvBiB;AAyJrB,C","file":"swatches.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":""}