@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/scss/variables.scss

@@ -1,337 +0,0 @@
-@import 'functions';
-@import '../tokens/build/scss/tokens';
-
-// Layout
-$grid-size: px-to-rem(8px);
-$gl-spacing-scale-1: 0.25 * $grid-size;
-$gl-spacing-scale-2: 0.5 * $grid-size;
-$gl-spacing-scale-3: $grid-size;
-$gl-spacing-scale-4: 1.5 * $grid-size;
-$gl-spacing-scale-5: 2 * $grid-size;
-$gl-spacing-scale-6: 3 * $grid-size;
-$gl-spacing-scale-7: 4 * $grid-size;
-$gl-spacing-scale-8: 5 * $grid-size;
-$gl-spacing-scale-9: 6 * $grid-size;
-$gl-spacing-scale-10: 7 * $grid-size;
-$gl-spacing-scale-11: 8 * $grid-size;
-$gl-spacing-scale-11-5: 9 * $grid-size;
-$gl-spacing-scale-12: 10 * $grid-size;
-$gl-spacing-scale-13: 12 * $grid-size;
-$gl-spacing-scale-15: 15 * $grid-size;
-$gl-spacing-scale-18: 18 * $grid-size;
-$gl-spacing-scale-20: 20 * $grid-size;
-$gl-spacing-scale-26: 26 * $grid-size;
-$gl-spacing-scale-28: 28 * $grid-size;
-$gl-spacing-scale-30: 30 * $grid-size;
-$gl-spacing-scale-31: 31 * $grid-size;
-$gl-spacing-scale-33: 33 * $grid-size;
-$gl-spacing-scale-34: 34 * $grid-size;
-$gl-spacing-scale-37: 37 * $grid-size;
-$gl-spacing-scale-48: 48 * $grid-size;
-$gl-spacing-scale-62: 62 * $grid-size;
-$gl-spacing-scale-75: 75 * $grid-size;
-$gl-spacing-scale-80: 80 * $grid-size;
-$gl-spacing-scale-88: 88 * $grid-size;
-
-// Responsive breakpoints
-
-$breakpoint-sm: 576px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
-
-$breakpoints: (
-  xs: 0,
-  sm: $breakpoint-sm,
-  md: $breakpoint-md,
-  lg: $breakpoint-lg,
-  xl: $breakpoint-xl,
-);
-
-// Max widths
-$limited-layout-width: 990px !default;
-$container-xl: 1280px !default;
-
-// Color schema
-$black-normal: #333 !default;
-
-$white-contrast: #fff !default;
-$white-normal: #f0f0f0 !default;
-$white-dark: #eaeaea !default;
-$white-transparent: rgba(255, 255, 255, 0.8) !default;
-$transparent-rgba: rgba($white, 0);
-
-// Text
-$gl-text-color: $gray-900 !default;
-$gl-text-color-secondary: $gray-500 !default;
-
-$gl-font-weight-light: 300;
-$gl-font-weight-normal: 400;
-$gl-font-weight-semibold: 500;
-$gl-font-weight-bold: 600;
-
-$gl-font-weights: (
-  'normal': $gl-font-weight-normal,
-  'bold': $gl-font-weight-bold,
-);
-
-// Fonts
-$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
-  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
-$gl-regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
-  Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji' !default;
-
-$gl-fonts: (
-  'monospace': $gl-monospace-font,
-  'regular': $gl-regular-font,
-);
-
-// New UI type scale
-// Implements the type scale from https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/15
-// Old variables and styles need to be removed after intergration
-
-// Font size scale
-
-// fixed scale (compact markdown)
-$gl-font-sizes-fixed: (
-  100: px-to-rem(12px),
-  200: px-to-rem(13px),
-  300: px-to-rem(14px),
-  400: px-to-rem(16px),
-  500: px-to-rem(18px),
-  600: px-to-rem(21px),
-  700: px-to-rem(24px),
-  800: px-to-rem(28px),
-);
-
-// dynamic scale (default) resizes based on viewport width
-$gl-font-sizes: (
-  100: map-get($gl-font-sizes-fixed, 100),
-  200: map-get($gl-font-sizes-fixed, 200),
-  300: map-get($gl-font-sizes-fixed, 300),
-  400: map-get($gl-font-sizes-fixed, 400),
-  500: clamp-between(map-get($gl-font-sizes-fixed, 500), px-to-rem(20px)),
-  600: clamp-between(map-get($gl-font-sizes-fixed, 600), px-to-rem(25px)),
-  700: clamp-between(map-get($gl-font-sizes-fixed, 700), px-to-rem(30px)),
-  800: clamp-between(map-get($gl-font-sizes-fixed, 800), px-to-rem(36px)),
-);
-
-// Heading variables
-// Not all are currently used, but documented here to capture intent
-$gl-font-heading: $gl-regular-font;
-$gl-font-weight-heading: 600;
-$gl-letter-spacing-heading: inherit;
-$gl-letter-spacing-heading-reduced: -0.01em;
-$gl-line-height-heading: 1.25;
-$gl-line-height-heading-display: 1.125;
-$gl-mb-heading: $gl-spacing-scale-5;
-$gl-mb-heading-display: $gl-spacing-scale-6;
-$gl-text-color-heading: $gl-text-color;
-// Not yet supported, but we'll be ready
-$gl-text-wrap-heading: pretty;
-
-// END New UI type scale
-
-// UI typescale
-
-// default (min-width: 0)
-$gl-font-size: px-to-rem(14px);
-$gl-font-size-xs: px-to-rem(10px);
-$gl-font-size-sm: px-to-rem(12px);
-$gl-font-size-lg: px-to-rem(16px);
-
-$gl-font-size-h-display: px-to-rem(28px);
-$gl-font-size-h1: px-to-rem(23px);
-$gl-font-size-h2: px-to-rem(19px);
-
-// breakpoint (min-width: 768px)
-$gl-font-size-h-display-md: px-to-rem(31px);
-$gl-font-size-h1-md: px-to-rem(25px);
-$gl-font-size-h2-md: px-to-rem(20px);
-
-// breakpoint (min-width: 1200px)
-$gl-font-size-h-display-xl: px-to-rem(45px);
-$gl-font-size-h1-xl: px-to-rem(32px);
-$gl-font-size-h2-xl: px-to-rem(23px);
-
-// Markdown typescale
-
-// default (min-width: 0)
-$gl-font-size-markdown: px-to-rem(16px);
-$gl-font-size-markdown-sm: px-to-rem(14px);
-
-$gl-font-size-markdown-h1: px-to-rem(28px);
-$gl-font-size-markdown-h2: px-to-rem(23px);
-$gl-font-size-markdown-h3: px-to-rem(19px);
-
-// breakpoint (min-width: 768px)
-$gl-font-size-markdown-h1-md: px-to-rem(31px);
-$gl-font-size-markdown-h2-md: px-to-rem(25px);
-$gl-font-size-markdown-h3-md: px-to-rem(20px);
-
-// breakpoint (min-width: 1200px)
-$gl-font-size-markdown-h1-xl: px-to-rem(45px);
-$gl-font-size-markdown-h2-xl: px-to-rem(32px);
-$gl-font-size-markdown-h3-xl: px-to-rem(23px);
-
-// Compact markdown typescale
-
-// default (min-width: 0)
-$gl-font-size-compact-markdown-h1: px-to-rem(19px);
-
-// media-md: min-width: 768px
-$gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
-
-// media xl (min-width: 1200px)
-$gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
-
-$border-color: $gray-100 !default;
-
-// use px for borders rather than rem
-// we don't want borders to scale with font size
-// 1px can end up being rounded to 0 after
-// conversion to/from rem
-$gl-border-size-1: 1px;
-$gl-border-size-2: 2px;
-$gl-border-size-3: 3px;
-$gl-border-size-4: 4px;
-$gl-border-size-5: 5px;
-$gl-border-size-8: 8px;
-
-// border roundness
-$gl-border-radius-small: $gl-spacing-scale-1;
-$gl-border-radius-base: $gl-spacing-scale-2;
-$gl-border-radius-large: $gl-spacing-scale-3;
-$gl-border-radius-6: $gl-spacing-scale-6;
-$gl-border-radius-7: $gl-spacing-scale-7;
-$gl-border-radius-full: 50%;
-
-// component height
-$gl-button-small-size: px-to-rem(24px);
-$gl-button-medium-size: px-to-rem(32px);
-
-// transition parameters
-$gl-transition-duration-slow: 0.4s;
-$gl-transition-duration-medium: 0.2s;
-$gl-transition-duration-fast: 0.1s;
-
-// Animation easings
-$gl-easing-linear: linear;
-$gl-easing-default: ease;
-$gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
-
-// Focus ring
-$outline-offset: 1px;
-$outline-width: 2px;
-$outline: #{$outline-offset + $outline-width};
-$focus-ring: 0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
-  0 0 0 #{$outline-offset + $outline-width} var(--gl-focus-ring-outer-color);
-$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
-  inset 0 0 0 $outline-offset var(--gl-focus-ring-inner-color);
-$focus-ring-dark: 0 0 0 $outline-offset rgba($black, 0.6),
-  0 0 0 #{$outline-offset + $outline-width} $blue-300;
-$focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);
-
-// Toasts
-$toast-max-width: px-to-rem(586px);
-$toast-padding-right: px-to-rem(42px);
-
-// Chart tooltip
-$chart-tooltip-max-width: px-to-rem(512px);
-
-$gl-icon-chevron-left: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L7.414 8l2.293-2.293a1 1 0 0 0-1.414-1.414l-3 3z"/></svg>';
-$gl-icon-chevron-right: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M10.707 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 8 6.293 5.707a1 1 0 0 1 1.414-1.414l3 3z"/></svg>';
-$gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M7.293 10.707a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L8 8.586 5.707 6.293a1 1 0 0 0-1.414 1.414l3 3z"/></svg>';
-$gl-icon-select-chevron-down: 'data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0.21967 0.21967C0.512563 -0.0732232 0.987437 -0.0732232 1.28033 0.21967L4 2.93934L6.71967 0.21967C7.01256 -0.073223 7.48744 -0.0732229 7.78033 0.21967C8.07322 0.512563 8.07322 0.987437 7.78033 1.28033L4.53033 4.53033C4.23744 4.82322 3.76256 4.82322 3.46967 4.53033L0.21967 1.28033C-0.0732233 0.987437 -0.0732233 0.512563 0.21967 0.21967Z" fill="%23666666"/%3E%3C/svg%3E%0A';
-$gl-icon-check: 'data:image/svg+xml,%3Csvg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0.75 4.76289L3.15312 7.24678L9.25 1.1499" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A';
-$gl-icon-indeterminate: 'data:image/svg+xml,%3Csvg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.75 1H8.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E%0A';
-$gl-icon-radio: 'data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="3" cy="3" r="3" fill="white"/%3E%3C/svg%3E%0A';
-
-// Icons
-$default-icon-size: px-to-rem(16px);
-$gl-icon-sizes: 8 12 14 16 24 32 48 72;
-
-// Dropdowns
-$gl-dropdown-width: px-to-rem(240px);
-$gl-new-dropdown-min-width: px-to-rem(248px);
-$gl-new-dropdown-max-width: px-to-rem(456px);
-$gl-dropdown-width-narrow: px-to-rem(160px);
-$gl-dropdown-width-wide: px-to-rem(400px);
-$gl-max-dropdown-max-height: px-to-rem(312px);
-
-// Broadcast messages
-$gl-broadcast-message-notification-max-width: px-to-rem(300px);
-
-// Modal Widths
-$gl-modal-small-width: px-to-rem(512px);
-$gl-modal-medium-width: px-to-rem(768px);
-$gl-modal-large-width: px-to-rem(990px);
-
-// Modal bootstrap variables
-$modal-header-border-color: $gray-200;
-$modal-footer-border-color: $gray-200;
-$modal-title-line-height: $gl-line-height-20;
-$modal-backdrop-bg: #000;
-$modal-backdrop-opacity: 0.64;
-
-// Bootstrap overrides
-// these should ideally be moved further up in the file to the compoent-relevant sections
-// but they can wait here for now
-$body-color: $gl-text-color !default;
-$enable-validation-icons: false;
-
-$secondary: $gray-50;
-$success: $green-500;
-$info: $blue-500;
-$warning: $orange-500;
-$danger: $red-500;
-
-$font-weight-bold: $gl-font-weight-bold;
-
-$font-family-sans-serif: $gl-regular-font !default;
-$font-family-monospace: $gl-monospace-font !default;
-
-$h1-font-size: $gl-font-size * 2.5;
-$h2-font-size: $gl-font-size * 2;
-$h3-font-size: $gl-font-size * 1.75;
-$h4-font-size: $gl-font-size * 1.5;
-$h5-font-size: $gl-font-size * 1.25;
-$h6-font-size: $gl-font-size;
-
-$spacer: $grid-size;
-$spacers: (
-  1: $gl-spacing-scale-2,
-  2: $gl-spacing-scale-3,
-  3: $gl-spacing-scale-5,
-  4: $gl-spacing-scale-6,
-  5: $gl-spacing-scale-7,
-  6: $gl-spacing-scale-8,
-  7: $gl-spacing-scale-9,
-  8: $gl-spacing-scale-10,
-  9: $gl-spacing-scale-11,
-);
-
-$table-accent-bg: $gray-50;
-$card-border-color: $gray-100;
-$card-cap-bg: $gray-10 !default;
-
-// Form input sizes
-$gl-form-input-sizes: (
-  xs: $grid-size * 10,
-  sm: $grid-size * 20,
-  md: $grid-size * 30,
-  lg: $grid-size * 40,
-  xl: $grid-size * 70,
-);
-
-$popover-bg: $white !default;
-$popover-arrow-width: 0.5rem;
-$popover-arrow-height: 0.25rem;
-$popover-arrow-color: $popover-bg;
-$popover-arrow-outer-color: $gray-100;
-
-$tooltip-opacity: 1;
-
-// Feature flag for GlButton border migration
-$feature-button-border: false !default;