@seniorsistemas/tecnologia-design-tokens
Version:
Design Tokens for BPM Suite projects
1 lines • 18.2 kB
Source Map (JSON)
{"version":3,"sourceRoot":"","sources":["../../../../web/scss/themes/light.scss","../../../tokens/scss/_variables.scss","../../../../web/scss/themes/mixins/_backgrounds.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACCA;AAAA;AAAA;AAAA;ACKE;AAIE;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE","file":"light.css","sourcesContent":["/*\n * Tecnologia Design Tokens (https://github.com/SeniorSA/tecnologia-design-tokens)\n * Copyright - Senior Sistemas S/A\n * Licensed under MIT (https://github.com/SeniorSA/tecnologia-design-tokens/blob/master/LICENSE)\n*/\n\n@import 'mixins/backgrounds';\n\n$theme: 'light';\n\n@include generate-backgrounds($theme);\n","\n/*\n Do not edit directly\n Generated on Mon, 29 Mar 2021 19:05:43 GMT\n*/\n\n$breakpoint-base-sm: 640px !default;\n$breakpoint-base-md: 768px !default;\n$breakpoint-base-lg: 1024px !default;\n$breakpoint-base-xl: 1280px !default;\n$breakpoint-base-2xl: 1536px !default;\n$breakpoint-screen-tablet: 640px !default;\n$breakpoint-screen-laptop: 1024px !default;\n$breakpoint-screen-desktop: 1280px !default;\n$color-base-gray-100: #f6f6f6 !default;\n$color-base-gray-200: #e4e4e4 !default;\n$color-base-gray-300: #d3d3d3 !default;\n$color-base-gray-400: #c1c1c1 !default;\n$color-base-gray-500: #a7a7a7 !default;\n$color-base-gray-600: #858585 !default;\n$color-base-gray-700: #646464 !default;\n$color-base-gray-800: #424242 !default;\n$color-base-gray-900: #212121 !default;\n$color-base-blue-gray-100: #f6f8fa !default;\n$color-base-blue-gray-200: #eaeef4 !default;\n$color-base-blue-gray-300: #e2e8f0 !default;\n$color-base-blue-gray-400: #cbd0d8 !default;\n$color-base-blue-gray-500: #9ea2a8 !default;\n$color-base-blue-gray-600: #878b90 !default;\n$color-base-blue-gray-700: #717478 !default;\n$color-base-blue-gray-800: #5a5c60 !default;\n$color-base-blue-gray-900: #434548 !default;\n$color-base-red-100: #fdebeb !default;\n$color-base-red-200: #f9c4c6 !default;\n$color-base-red-300: #f59da1 !default;\n$color-base-red-400: #f1767b !default;\n$color-base-red-500: #ec3c43 !default;\n$color-base-red-600: #a52a2e !default;\n$color-base-red-700: #bc3035 !default;\n$color-base-red-800: #d4363c !default;\n$color-base-red-900: #8d2428 !default;\n$color-base-orange-100: #ffe0b2 !default;\n$color-base-orange-200: #ffcc80 !default;\n$color-base-orange-300: #ffb74d !default;\n$color-base-orange-400: #ffa726 !default;\n$color-base-orange-500: #ff9800 !default;\n$color-base-orange-600: #fb8c00 !default;\n$color-base-orange-700: #f57c00 !default;\n$color-base-orange-800: #ef6c00 !default;\n$color-base-orange-900: #e65100 !default;\n$color-base-deep-orange-100: #fdf3eb !default;\n$color-base-deep-orange-200: #f9dcc4 !default;\n$color-base-deep-orange-300: #f5c69d !default;\n$color-base-deep-orange-400: #f1af76 !default;\n$color-base-deep-orange-500: #ec8d3c !default;\n$color-base-deep-orange-600: #d47e36 !default;\n$color-base-deep-orange-700: #bc7030 !default;\n$color-base-deep-orange-800: #a5622a !default;\n$color-base-deep-orange-900: #8d5424 !default;\n$color-base-yellow-100: #fef8e7 !default;\n$color-base-yellow-200: #feebb7 !default;\n$color-base-yellow-300: #fddf87 !default;\n$color-base-yellow-400: #fcd257 !default;\n$color-base-yellow-500: #fcbf10 !default;\n$color-base-yellow-600: #e2ab0e !default;\n$color-base-yellow-700: #c9980c !default;\n$color-base-yellow-800: #b0850b !default;\n$color-base-yellow-900: #977209 !default;\n$color-base-green-100: #e5f9f4 !default;\n$color-base-green-200: #b2eee0 !default;\n$color-base-green-300: #7fe4cc !default;\n$color-base-green-400: #4cd9b8 !default;\n$color-base-green-500: #00c99a !default;\n$color-base-green-600: #00b48a !default;\n$color-base-green-700: #00a07b !default;\n$color-base-green-800: #008c6b !default;\n$color-base-green-900: #00785c !default;\n$color-base-sea-green-100: #e8f7f8 !default;\n$color-base-sea-green-200: #bbe8eb !default;\n$color-base-sea-green-300: #8fd9de !default;\n$color-base-sea-green-400: #62c9d1 !default;\n$color-base-sea-green-500: #1fb3be !default;\n$color-base-sea-green-600: #1ba1ab !default;\n$color-base-sea-green-700: #188f98 !default;\n$color-base-sea-green-800: #157d85 !default;\n$color-base-sea-green-900: #126b72 !default;\n$color-base-sky-blue-100: #e9f3fc !default;\n$color-base-sky-blue-200: #d3e8fa !default;\n$color-base-sky-blue-300: #a8d2f6 !default;\n$color-base-sky-blue-400: #7dbcf2 !default;\n$color-base-sky-blue-500: #3c9bec !default;\n$color-base-sky-blue-600: #368bd4 !default;\n$color-base-sky-blue-700: #307cbc !default;\n$color-base-sky-blue-800: #2a6ca5 !default;\n$color-base-sky-blue-900: #245d8d !default;\n$color-base-blue-100: #eaeffd !default;\n$color-base-blue-200: #c0cff9 !default;\n$color-base-blue-300: #96b0f5 !default;\n$color-base-blue-400: #6c90f1 !default;\n$color-base-blue-500: #2e61ec !default;\n$color-base-blue-600: #2957d4 !default;\n$color-base-blue-700: #244dbc !default;\n$color-base-blue-800: #2043a5 !default;\n$color-base-blue-900: #1b3a8d !default;\n$color-base-lavender-100: #e7ddfc !default;\n$color-base-lavender-200: #d0bbfa !default;\n$color-base-lavender-300: #b89af7 !default;\n$color-base-lavender-400: #a178f5 !default;\n$color-base-lavender-500: #8a57f3 !default;\n$color-base-lavender-600: #7c4eda !default;\n$color-base-lavender-700: #6e45c2 !default;\n$color-base-lavender-800: #603caa !default;\n$color-base-lavender-900: #523491 !default;\n$color-base-magenta-100: #ffecf1 !default;\n$color-base-magenta-200: #ffb5c9 !default;\n$color-base-magenta-300: #ff90ae !default;\n$color-base-magenta-400: #ff6b93 !default;\n$color-base-magenta-500: #ff4678 !default;\n$color-base-magenta-600: #e53f6c !default;\n$color-base-magenta-700: #cc3860 !default;\n$color-base-magenta-800: #b23154 !default;\n$color-base-magenta-900: #992a48 !default;\n$color-font-base-light: #777777 !default;\n$color-font-base-dark: #ffffff !default;\n$font-family-sans-serif-font1-family: Roboto !default;\n$font-family-sans-serif-font1-weight: 500 !default;\n$font-family-sans-serif-font2-family: Almarai !default;\n$font-family-sans-serif-font2-weight: 500 !default;\n$font-family-sans-serif-font3-family: Inter !default;\n$font-family-sans-serif-font3-weight: 500 !default;\n$font-family-sans-serif-font4-family: Arial !default;\n$font-family-sans-serif-font4-weight: 500 !default;\n$font-family-sans-serif-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Roboto\", \"Almarai\", \"Inter\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default; // default font-family full string\n$font-family-serif-font1-family: Volkhov !default;\n$font-family-serif-font1-weight: 500 !default;\n$font-family-serif-font2-family: Libre Baskerville !default;\n$font-family-serif-font2-weight: 500 !default;\n$font-family-serif-font3-family: Georgia !default;\n$font-family-serif-font3-weight: 500 !default;\n$font-family-serif-base: ui-serif, \"Volkhov\", \"Libre Baskerville\", Georgia, serif !default; // default font-family full string\n$font-family-mono-font1-family: Fira Mono !default;\n$font-family-mono-font1-weight: 500 !default;\n$font-family-mono-font2-family: Roboto Mono !default;\n$font-family-mono-font2-weight: 600 !default;\n$font-family-mono-font3-family: Oxygen Mono !default;\n$font-family-mono-font3-weight: 500 !default;\n$font-family-mono-font4-family: Consolas !default;\n$font-family-mono-font4-weight: 500 !default;\n$font-family-mono-base: ui-monospace, \"Fira Mono\", \"Roboto Mono\", \"Oxygen Mono\", Consolas, monospace !default; // default font-family full string\n$font-line-height-xs: 1rem !default;\n$font-line-height-sm: 1.25rem !default;\n$font-line-height-base: 1.5rem !default;\n$font-line-height-lg: 1.75rem !default;\n$font-line-height-xl: 1.75rem !default;\n$font-line-height-2x1: 2rem !default;\n$font-line-height-3x1: 2.25rem !default;\n$font-line-height-4x1: 2.5rem !default;\n$font-line-height-5x1: 3rem !default;\n$font-line-height-6x1: 3.75rem !default;\n$font-line-height-7x1: 4.5rem !default;\n$font-line-height-8x1: 6rem !default;\n$font-line-height-9x1: 8rem !default;\n$font-size-xs: 0.75rem !default;\n$font-size-sm: 0.875rem !default;\n$font-size-base: 1rem !default;\n$font-size-lg: 1.125rem !default;\n$font-size-xl: 1.25rem !default;\n$font-size-2x1: 1.5rem !default;\n$font-size-3x1: 1.875rem !default;\n$font-size-4x1: 2.25rem !default;\n$font-size-5x1: 3rem !default;\n$font-size-6x1: 3.75rem !default;\n$font-size-7x1: 4.5rem !default;\n$font-size-8x1: 6rem !default;\n$font-size-9x1: 8rem !default;\n$status-primary-color-light: #3c9bec !default;\n$status-primary-color-dark: #7dbcf2 !default;\n$status-secondary-color-light: #cbd0d8 !default;\n$status-secondary-color-dark: #cbd0d8 !default;\n$status-danger-color-light: #ec3c43 !default;\n$status-danger-color-dark: #ec3c43 !default;\n$status-success-color-light: #00c99a !default;\n$status-success-color-dark: #00c99a !default;\n$status-warning-color-light: #ff9800 !default;\n$status-warning-color-dark: #ff9800 !default;\n\n$tokens: (\n 'breakpoint': (\n 'base': (\n 'sm': $breakpoint-base-sm,\n 'md': $breakpoint-base-md,\n 'lg': $breakpoint-base-lg,\n 'xl': $breakpoint-base-xl,\n '2xl': $breakpoint-base-2xl\n ),\n 'screen': (\n 'tablet': $breakpoint-screen-tablet,\n 'laptop': $breakpoint-screen-laptop,\n 'desktop': $breakpoint-screen-desktop\n )\n ),\n 'color': (\n 'base': (\n 'gray': (\n '100': $color-base-gray-100,\n '200': $color-base-gray-200,\n '300': $color-base-gray-300,\n '400': $color-base-gray-400,\n '500': $color-base-gray-500,\n '600': $color-base-gray-600,\n '700': $color-base-gray-700,\n '800': $color-base-gray-800,\n '900': $color-base-gray-900\n ),\n 'blue-gray': (\n '100': $color-base-blue-gray-100,\n '200': $color-base-blue-gray-200,\n '300': $color-base-blue-gray-300,\n '400': $color-base-blue-gray-400,\n '500': $color-base-blue-gray-500,\n '600': $color-base-blue-gray-600,\n '700': $color-base-blue-gray-700,\n '800': $color-base-blue-gray-800,\n '900': $color-base-blue-gray-900\n ),\n 'red': (\n '100': $color-base-red-100,\n '200': $color-base-red-200,\n '300': $color-base-red-300,\n '400': $color-base-red-400,\n '500': $color-base-red-500,\n '600': $color-base-red-600,\n '700': $color-base-red-700,\n '800': $color-base-red-800,\n '900': $color-base-red-900\n ),\n 'orange': (\n '100': $color-base-orange-100,\n '200': $color-base-orange-200,\n '300': $color-base-orange-300,\n '400': $color-base-orange-400,\n '500': $color-base-orange-500,\n '600': $color-base-orange-600,\n '700': $color-base-orange-700,\n '800': $color-base-orange-800,\n '900': $color-base-orange-900\n ),\n 'deep-orange': (\n '100': $color-base-deep-orange-100,\n '200': $color-base-deep-orange-200,\n '300': $color-base-deep-orange-300,\n '400': $color-base-deep-orange-400,\n '500': $color-base-deep-orange-500,\n '600': $color-base-deep-orange-600,\n '700': $color-base-deep-orange-700,\n '800': $color-base-deep-orange-800,\n '900': $color-base-deep-orange-900\n ),\n 'yellow': (\n '100': $color-base-yellow-100,\n '200': $color-base-yellow-200,\n '300': $color-base-yellow-300,\n '400': $color-base-yellow-400,\n '500': $color-base-yellow-500,\n '600': $color-base-yellow-600,\n '700': $color-base-yellow-700,\n '800': $color-base-yellow-800,\n '900': $color-base-yellow-900\n ),\n 'green': (\n '100': $color-base-green-100,\n '200': $color-base-green-200,\n '300': $color-base-green-300,\n '400': $color-base-green-400,\n '500': $color-base-green-500,\n '600': $color-base-green-600,\n '700': $color-base-green-700,\n '800': $color-base-green-800,\n '900': $color-base-green-900\n ),\n 'sea-green': (\n '100': $color-base-sea-green-100,\n '200': $color-base-sea-green-200,\n '300': $color-base-sea-green-300,\n '400': $color-base-sea-green-400,\n '500': $color-base-sea-green-500,\n '600': $color-base-sea-green-600,\n '700': $color-base-sea-green-700,\n '800': $color-base-sea-green-800,\n '900': $color-base-sea-green-900\n ),\n 'sky-blue': (\n '100': $color-base-sky-blue-100,\n '200': $color-base-sky-blue-200,\n '300': $color-base-sky-blue-300,\n '400': $color-base-sky-blue-400,\n '500': $color-base-sky-blue-500,\n '600': $color-base-sky-blue-600,\n '700': $color-base-sky-blue-700,\n '800': $color-base-sky-blue-800,\n '900': $color-base-sky-blue-900\n ),\n 'blue': (\n '100': $color-base-blue-100,\n '200': $color-base-blue-200,\n '300': $color-base-blue-300,\n '400': $color-base-blue-400,\n '500': $color-base-blue-500,\n '600': $color-base-blue-600,\n '700': $color-base-blue-700,\n '800': $color-base-blue-800,\n '900': $color-base-blue-900\n ),\n 'lavender': (\n '100': $color-base-lavender-100,\n '200': $color-base-lavender-200,\n '300': $color-base-lavender-300,\n '400': $color-base-lavender-400,\n '500': $color-base-lavender-500,\n '600': $color-base-lavender-600,\n '700': $color-base-lavender-700,\n '800': $color-base-lavender-800,\n '900': $color-base-lavender-900\n ),\n 'magenta': (\n '100': $color-base-magenta-100,\n '200': $color-base-magenta-200,\n '300': $color-base-magenta-300,\n '400': $color-base-magenta-400,\n '500': $color-base-magenta-500,\n '600': $color-base-magenta-600,\n '700': $color-base-magenta-700,\n '800': $color-base-magenta-800,\n '900': $color-base-magenta-900\n )\n ),\n 'font': (\n 'base': (\n 'light': $color-font-base-light,\n 'dark': $color-font-base-dark\n )\n )\n ),\n 'font': (\n 'family': (\n 'sans-serif': (\n 'font1': (\n 'family': $font-family-sans-serif-font1-family,\n 'weight': $font-family-sans-serif-font1-weight\n ),\n 'font2': (\n 'family': $font-family-sans-serif-font2-family,\n 'weight': $font-family-sans-serif-font2-weight\n ),\n 'font3': (\n 'family': $font-family-sans-serif-font3-family,\n 'weight': $font-family-sans-serif-font3-weight\n ),\n 'font4': (\n 'family': $font-family-sans-serif-font4-family,\n 'weight': $font-family-sans-serif-font4-weight\n ),\n 'base': $font-family-sans-serif-base\n ),\n 'serif': (\n 'font1': (\n 'family': $font-family-serif-font1-family,\n 'weight': $font-family-serif-font1-weight\n ),\n 'font2': (\n 'family': $font-family-serif-font2-family,\n 'weight': $font-family-serif-font2-weight\n ),\n 'font3': (\n 'family': $font-family-serif-font3-family,\n 'weight': $font-family-serif-font3-weight\n ),\n 'base': $font-family-serif-base\n ),\n 'mono': (\n 'font1': (\n 'family': $font-family-mono-font1-family,\n 'weight': $font-family-mono-font1-weight\n ),\n 'font2': (\n 'family': $font-family-mono-font2-family,\n 'weight': $font-family-mono-font2-weight\n ),\n 'font3': (\n 'family': $font-family-mono-font3-family,\n 'weight': $font-family-mono-font3-weight\n ),\n 'font4': (\n 'family': $font-family-mono-font4-family,\n 'weight': $font-family-mono-font4-weight\n ),\n 'base': $font-family-mono-base\n )\n ),\n 'line-height': (\n 'xs': $font-line-height-xs,\n 'sm': $font-line-height-sm,\n 'base': $font-line-height-base,\n 'lg': $font-line-height-lg,\n 'xl': $font-line-height-xl,\n '2x1': $font-line-height-2x1,\n '3x1': $font-line-height-3x1,\n '4x1': $font-line-height-4x1,\n '5x1': $font-line-height-5x1,\n '6x1': $font-line-height-6x1,\n '7x1': $font-line-height-7x1,\n '8x1': $font-line-height-8x1,\n '9x1': $font-line-height-9x1\n ),\n 'size': (\n 'xs': $font-size-xs,\n 'sm': $font-size-sm,\n 'base': $font-size-base,\n 'lg': $font-size-lg,\n 'xl': $font-size-xl,\n '2x1': $font-size-2x1,\n '3x1': $font-size-3x1,\n '4x1': $font-size-4x1,\n '5x1': $font-size-5x1,\n '6x1': $font-size-6x1,\n '7x1': $font-size-7x1,\n '8x1': $font-size-8x1,\n '9x1': $font-size-9x1\n )\n ),\n 'status': (\n 'primary': (\n 'color': (\n 'light': $status-primary-color-light,\n 'dark': $status-primary-color-dark\n )\n ),\n 'secondary': (\n 'color': (\n 'light': $status-secondary-color-light,\n 'dark': $status-secondary-color-dark\n )\n ),\n 'danger': (\n 'color': (\n 'light': $status-danger-color-light,\n 'dark': $status-danger-color-dark\n )\n ),\n 'success': (\n 'color': (\n 'light': $status-success-color-light,\n 'dark': $status-success-color-dark\n )\n ),\n 'warning': (\n 'color': (\n 'light': $status-warning-color-light,\n 'dark': $status-warning-color-dark\n )\n )\n )\n);\n","@import '../../../../dist/tokens/scss/variables';\n\n$status: map-get($tokens, status);\n$keys: map-keys($status);\n\n@mixin generate-backgrounds($theme) {\n /* #{$theme} backgrounds */\n @each $key in $keys {\n $color: map-get($status, $key);\n $status-color: map-get($color, color);\n .bg-#{$key} {\n background-color: map-get($status-color, $theme);\n }\n }\n}\n"]}