ar-design/dist/assets/css/core/ar-core.css

AR Design is a (react | nextjs) ui library.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "JetBrainsMono-Bold";
  src: url("../../../assets/fonts/JetBrainsMono-Bold.ttf");
}

@font-face {
  font-family: "JetBrainsMono-Regular";
  src: url("../../../assets/fonts/JetBrainsMono-Regular.ttf");
}

/* #region Height */
:root {
  --input-height: 2.25rem;
}
/* #endregion */
/* Height */

/* #region Color Palette */
:root {
  --white: #fff;
  --white-rgb: 255, 255, 255;
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-dark: #343a40;
  --red: #ff0000;
  --red-rgb: 255, 0, 0;
  --green: #00ff00;
  --green-rgb: 0, 255, 0;
  --blue: #0000ff;
  --blue-rgb: 0, 0, 255;

  /* ... */
  --primary: #007bff;
  --primary-active: #005abb;
  --primary-light: #92c7ff;
  --primary-rgb: 0, 123, 255;
  --secondary: #6c757d;
  --secondary-active: #495055;
  --secondary-rgb: 108, 117, 125;
  --success: #28a745;
  --success-active: #1c7a32;
  --success-rgb: 40, 167, 69;
  --warning: #ffc107;
  --warning-active: #cf9c05;
  --warning-rgb: 255, 193, 7;
  --warning-font-color: #463500;
  --danger: #dc3545;
  --danger-active: #af2936;
  --danger-rgb: 220, 53, 69;
  --information: #17a2b8;
  --information-active: #107c8c;
  --information-rgb: 23, 162, 184;
  --light: #e4e6e9;
  --light-active: #dde0e3;
  --light-rgb: 222, 226, 230;
  --dark: var(--gray-600);
  --dark-active: var(--gray-700);
  --dark-rgb: 52, 58, 64;
}
/* #endregion */
/* Color Palette */

/* #region Fonts */
:root {
  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jetBrainsMonoBold: "JetBrainsMono-Bold";
  --jetBrainsMonoRegular: "JetBrainsMono-Regular";
}
/* #endregion */
/* Fonts */

/* #region Code Editor */
:root {
  --bg-color: #282c34;
  --color: #abb2bf;
  --tag-color: #679ad1;
  --custom-tag-color: #6fc2ae;
  --attribute-key-color: #a9d9f9;
  --string-value-color: #c5947c;
  --number-value-color: #bacdab;
  --boolean-value-color: #57b0fe;
  --object-value-color: #57b0fe;
  --curly-bracket-color: #e4e49c;
  --child-curly-bracket-color: #df6ed2;
}
/* #endregion */
/* Color Palette */

/* #region Border */
:root {
  /* Border */

  /* Border Radius */
  --border-radius: 0.465rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  --border-radius-xxl: 2rem;
  --border-radius-pill: 50rem;
}
/* #endregion */
/* Border */

/* #region Box Shadow */
:root {
  --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
}
/* #endregion */
/* Box Shadow */

/* #region Variants */
@import url("./variants/animation.css");

.filled {
  border-color: transparent;
  transition: border 250ms, box-shadow 250ms ease-in-out;
}

@import url("./variants/filled/filled.css");

.outlined {
  background-color: transparent;
  border-style: solid;
  border-width: 1px !important;
  border-color: transparent;
  transition: border 250ms, box-shadow 250ms ease-in-out;
}

@import url("./variants/outlined/outlined.css");

.dashed {
  background-color: transparent;
  border-style: dashed;
  border-width: 1px !important;
  border-color: transparent;
  transition: border 250ms, box-shadow 250ms ease-in-out;
}

@import url("./variants/dashed/dashed.css");

.borderless {
  background-color: transparent;
  border-width: 1px;
  border-color: transparent;
  transition: border 250ms, box-shadow 250ms ease-in-out;
}
.borderless:disabled {
  background-color: var(--gray-100) !important;
  border: none !important;
  color: var(--gray-500) !important;
  cursor: no-drop !important;
}

@import url("./variants/borderless/borderless.css");
@import url("./variants/border.css");

:is(input) {
  border: solid 1px transparent;
}
:is(input)::placeholder {
  color: var(--dark);
}
input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  pointer-events: none;
}
:is(input, button):disabled,
:is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.filled, .outlined) {
  /* background-color: var(--gray-100) !important; */
  /* border: solid 1px var(--gray-500) !important; */
  /* color: var(--gray-500) !important; */
  cursor: no-drop !important;
}
/* :is(input, button):is(.outlined):disabled {
  background-color: transparent !important;
} */
/* :is(input, button):is(.dashed):disabled {
  background-color: transparent !important;
  border: dashed 1px var(--gray-500) !important;
} */
:is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.borderless) {
  background-color: var(--gray-100) !important;
  color: var(--gray-500) !important;
  cursor: no-drop !important;
}
:is(input[type="checkbox"]):disabled + span {
  color: var(--gray-500) !important;
  cursor: no-drop !important;
}
/* #endregion */
/* Variants */