@accelint/design-toolkit/dist/index.css

An open-source component library to serve as part of the entire ecosystem of UX for Accelint.

/*
 * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
@import '@fontsource-variable/roboto-flex';
@import '@fontsource-variable/roboto-mono';
@import 'tailwindcss';

/* Import generated themes.css */
@import './tokens/themes.css';

@theme {
  --color-current: currentColor;
}

@import './variants/variants.css';

/**
 * Provides an escalation selector allowing for easier bump in specificity
 * instead of having to target the same level established by a previous style.
 *
 * Can be stacked if necessary, just don't get carried away with power.
 */
@custom-variant sudo (&&);

/**
 * DesignTK chooses to implement outlines instead of borders to make it so
 * that the style doesn't impact box model dimensions. This way elements with
 * or without a "border" are consistently sized based on content and padding alone
 */
@utility outline {
  outline-offset: -1px;
}

/* Note: we may want to generate these typography utility classes in themes.css in the future */
@utility text-header-xxl {
  font-size: var(--typography-header-xxl-size);
  font-weight: 500;
  letter-spacing: var(--typography-header-xxl-spacing);
  line-height: var(--typography-header-xxl-height);
}

@utility text-header-xl {
  font-size: var(--typography-header-xl-size);
  font-weight: 500;
  letter-spacing: var(--typography-header-xl-spacing);
  line-height: var(--typography-header-xl-height);
}

@utility text-header-l {
  font-size: var(--typography-header-l-size);
  font-weight: 500;
  letter-spacing: var(--typography-header-l-spacing);
  line-height: var(--typography-header-l-height);
}

@utility text-header-m {
  font-size: var(--typography-header-m-size);
  font-weight: 500;
  letter-spacing: var(--typography-header-m-spacing);
  line-height: var(--typography-header-m-height);
}

@utility text-header-s {
  font-size: var(--typography-header-s-size);
  font-weight: 500;
  letter-spacing: var(--typography-header-s-spacing);
  line-height: var(--typography-header-s-height);
}

@utility text-header-xs {
  font-size: var(--typography-header-xs-size);
  font-weight: 500;
  letter-spacing: var(--typography-header-xs-spacing);
  line-height: var(--typography-header-xs-height);
}

@utility text-body-l {
  font-size: var(--typography-body-l-size);
  font-weight: 400;
  letter-spacing: var(--typography-body-l-spacing);
  line-height: var(--typography-body-l-height);
}

@utility text-body-m {
  font-size: var(--typography-body-m-size);
  font-weight: 400;
  letter-spacing: var(--typography-body-m-spacing);
  line-height: var(--typography-body-m-height);
}

@utility text-body-s {
  font-size: var(--typography-body-s-size);
  font-weight: 400;
  letter-spacing: var(--typography-body-s-spacing);
  line-height: var(--typography-body-s-height);
}

@utility text-body-xs {
  font-size: var(--typography-body-xs-size);
  font-weight: 400;
  letter-spacing: var(--typography-body-xs-spacing);
  line-height: var(--typography-body-xs-height);
}

@utility text-body-xxs {
  font-size: var(--typography-body-xxs-size);
  font-weight: 400;
  letter-spacing: var(--typography-body-xxs-spacing);
  line-height: var(--typography-body-xxs-height);
}

@utility text-button-l {
  font-size: var(--typography-button-l-size);
  font-weight: bold;
  letter-spacing: var(--typography-button-l-spacing);
  line-height: var(--typography-button-l-height);
}

@utility text-button-m {
  font-size: var(--typography-button-m-size);
  font-weight: bold;
  letter-spacing: var(--typography-button-m-spacing);
  line-height: var(--typography-button-m-height);
}

@utility text-button-s {
  font-size: var(--typography-button-s-size);
  font-weight: bold;
  letter-spacing: var(--typography-button-s-spacing);
  line-height: var(--typography-button-s-height);
}

@utility text-button-xs {
  font-size: var(--typography-button-xs-size);
  font-weight: bold;
  letter-spacing: var(--typography-button-xs-spacing);
  line-height: var(--typography-button-xs-height);
}

@utility w-content {
  width: fit-content;
}

@utility h-content {
  height: fit-content;
}

@utility w-* {
  width: --value([ *]);
}

@utility icon-* {
  --icon-color: --value([ *]);
  --icon-color: --value(--color- *);
}

html {
  @apply bg-surface-default;
  @apply fg-primary-bold;
  @apply font-primary;
}

@layer components {
  .hide-cancel::-webkit-search-cancel-button {
    display: none;
  }

  /*
 * Scrollbars
 */
  ::-webkit-scrollbar {
    width: var(--spacing-l);
    height: var(--spacing-l);
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-interactive-muted-hover);
  }

  ::-webkit-scrollbar-thumb{
    background-color: var(--bg-interactive-muted);
    border-radius: var(--radius-large);
    border: 5px solid transparent;
    background-clip: padding-box;
  }


  /**
   * Rule line only applicable to the QueryBuilder component
   */
  .queryBuilder .rule-lines::before {
    content: '';
    width: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    background-image:
      repeating-linear-gradient(to bottom, var(--primitive-neutral-400), var(--primitive-neutral-400)),
      repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
    background-position: left -1px, center;
    background-repeat: repeat-y, repeat-x;
    background-size: 1px 4px, 4px 1px;
  }

  .queryBuilder .group > span.rule-lines:last-of-type::before {
    content: '';
    width: 10px;
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 50%;
    background-image:
      repeating-linear-gradient(to bottom,var(--primitive-neutral-400), var(--primitive-neutral-400)),
      repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
    background-position: left -1px, bottom;
    background-repeat: repeat-y, repeat-x;
    background-size: 1px 4px, 4px 1px;
  }

  .queryBuilder .group > span.rule-lines:last-of-type:has(~ div.group)::before {
    content: '';
    width: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    background-image:
      repeating-linear-gradient(to bottom, var(--primitive-neutral-400), var(--primitive-neutral-400)),
      repeating-linear-gradient(to right, var(--primitive-neutral-400), var(--primitive-neutral-400));
    background-position: left -1px, center;
    background-repeat: repeat-y, repeat-x;
    background-size: 1px 4px, 4px 1px;
  }
}