@instawork/design-system/css/swatches.css

The design system for Instawork's web apps

:root, .force-light, .force-light * {
  --base-color-string: 3, 24, 56;
  --text-color: #151519;
  --text-color-inverse: #ebebee;
  --text-color-light: #606373;
  --text-color-light-inverse: #c8cad1;
  --primary-color-string: 41, 82, 239;
  --primary-color: rgb(var(--primary-color-string));
  --accent-color-string: 41, 82, 239;
  --accent-color: rgb(var(--accent-color-string));
  --accent-color-light: rgba(var(--accent-color-string), 8%);
  --light-color-string: 255, 255, 255;
  --light-color: #FFF;
  --dark-color: #151519;
  --border-color: #dadbe0;
  --background-color: #fafbff;
  --card-background-color: #FFF;
  --hover-color-string: 20, 23, 30;
  --hover-color: rgba(var(--hover-color-string), 0.04);
  --background-color-inverse: var(--text-color);
  --icon-color: brightness(1);
  --shadow-color-string: 0, 0, 0;
  --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08);
  --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);
  --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02);
  --border-radius: 0.5rem;
  --bg-accent-default: #e6f2ff;
  --bg-accent-emphasis: #4778ff;
  --bg-celebration-default: #fef1cf;
  --bg-celebration-emphasis: #fbb90e;
  --bg-default: #ffffff;
  --bg-destructive-default: #fee6e6;
  --bg-destructive-emphasis: #ff4847;
  --bg-muted: #bdc4c4;
  --bg-subtle: #f4f4f4;
  --bg-success-default: #d6fecd;
  --bg-success-emphasis: #63cb76;
  --bg-warning-default: #fef1cf;
  --bg-warning-emphasis: #d99000;
  --border-accent: #4778ff;
  --border-default: #8d9494;
  --border-destructive: #ff4847;
  --border-muted: #e1e3e3;
  --border-on_emphasis: #ffffff;
  --border-success: #63cb76;
  --border-warning: #fbb90e;
  --button-bg-destructive-default: #ff4847;
  --button-bg-destructive-disabled: #bdc4c4;
  --button-bg-destructive-hover: #ffffff;
  --button-bg-destructive-loading: #ff9796;
  --button-bg-destructive-pressed: #d92b2b;
  --button-bg-primary-default: #4778ff;
  --button-bg-primary-disabled: #bdc4c4;
  --button-bg-primary-hover: #ffffff;
  --button-bg-primary-loading: #80aaff;
  --button-bg-primary-pressed: #255ccc;
  --button-border-destructive-default: #ff4847;
  --button-border-destructive-disabled: #bdc4c4;
  --button-border-destructive-hover: #ffffff;
  --button-border-destructive-loading: #ff9796;
  --button-border-destructive-pressed: #d92b2b;
  --button-border-primary-default: #4778ff;
  --button-border-primary-disabled: #bdc4c4;
  --button-border-primary-hover: #ffffff;
  --button-border-primary-loading: #80aaff;
  --button-border-primary-pressed: #255ccc;
  --button-fg-destructive-default: #ff4847;
  --button-fg-destructive-disabled: #bdc4c4;
  --button-fg-destructive-hover: #ffffff;
  --button-fg-destructive-loading: #ff9796;
  --button-fg-destructive-pressed: #d92b2b;
  --button-fg-on_emphasis: #ffffff;
  --button-fg-primary-default: #4778ff;
  --button-fg-primary-disabled: #bdc4c4;
  --button-fg-primary-hover: #ffffff;
  --button-fg-primary-loading: #80aaff;
  --button-fg-primary-pressed: #255ccc;
  --fg-accent-default: #4778ff;
  --fg-accent-emphasis: #3964bb;
  --fg-celebration-default: #fbb90e;
  --fg-celebration-emphasis: #d99000;
  --fg-default: #1f1f1f;
  --fg-destructive-default: #d92b2b;
  --fg-destructive-emphasis: #bb3939;
  --fg-muted: #4e4d4d;
  --fg-on_emphasis: #ffffff;
  --fg-subtle: #8d9494;
  --fg-success-default: #2db245;
  --fg-success-emphasis: #08771d;
  --fg-warning-default: #d99000;
  --fg-warning-emphasis: #946300;
}

.force-dark, .force-dark * {
  --text-color: #ebebee;
  --text-color-inverse: #606373;
  --text-color-light: #b7b9c3;
  --text-color-light-inverse: #606373;
  --icon-color: brightness(1);
  --light-color-string: 21, 21, 25;
  --light-color: #151519;
  --dark-color: #f9f9fa;
  --border-color: #373942;
  --background-color: #06070a;
  --hover-color-string: 250, 251, 255;
  --card-background-color: #151519;
  --shadow-color-string: 0, 0, 0;
}

.theme-info, .theme-info * {
  --primary-color-string: 131, 65, 163;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-warning, .theme-warning * {
  --primary-color-string: 224, 132, 45;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-danger, .theme-danger * {
  --primary-color-string: 219, 7, 61;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.theme-success, .theme-success * {
  --primary-color-string: 43, 153, 72;
  --primary-color: rgb(var(--primary-color-string));
  --primary-color-light: rgba(var(--primary-color-string), 8%);
}

.swatch {
  height: 4rem;
  width: 4rem;
  border-radius: 2rem;
}

.swatch-black-50 {
  background-color: #151519;
}

.swatch-gray-80 {
  background-color: #676b7c;
}

.swatch-gray-30 {
  background-color: #cecfd6;
}

.swatch-blue3 {
  background-color: #6d89f4;
}

.swatch-red3 {
  background-color: #f94472;
}

.swatch-yellow3 {
  background-color: #f7b577;
}

.swatch-green3 {
  background-color: #62bd7b;
}

.swatch-purple3 {
  background-color: #ad76c8;
}

/*# sourceMappingURL=swatches.css.map*/