draft-components 0.75.2 → 1.0.0-beta

package/scss/abstracts/_variables.scss

@@ -1,229 +0,0 @@
-/*------------------------------------*\
-  #COLORS
-\*------------------------------------*/
-
-$gray-50: #fafafa;
-$gray-100: #f4f4f5;
-$gray-200: #e4e4e7;
-$gray-300: #d4d4d8;
-$gray-400: #a1a1aa;
-$gray-500: #71717a;
-$gray-600: #52525b;
-$gray-700: #3f3f46;
-$gray-800: #27272a;
-$gray-900: #18181b;
-
-$blue-50: #eff6ff;
-$blue-100: #dbeafe;
-$blue-200: #bfdbfe;
-$blue-300: #93c5fd;
-$blue-400: #60a5fa;
-$blue-500: #3b82f6;
-$blue-600: #2563eb;
-$blue-700: #1d4ed8;
-$blue-800: #1e40af;
-$blue-900: #1e3a8a;
-
-$cyan-50: #e3fafc;
-$cyan-100: #c5f6fa;
-$cyan-200: #99e9f2;
-$cyan-300: #66d9e8;
-$cyan-400: #3bc9db;
-$cyan-500: #22b8cf;
-$cyan-600: #15aabf;
-$cyan-700: #1098ad;
-$cyan-800: #0c8599;
-$cyan-900: #0b7285;
-
-$red-50: #fff5f5;
-$red-100: #ffe3e3;
-$red-200: #ffc9c9;
-$red-300: #ffa8a8;
-$red-400: #ff8787;
-$red-500: #ff6b6b;
-$red-600: #fa5252;
-$red-700: #f03e3e;
-$red-800: #e03131;
-$red-900: #b52626;
-
-$green-50: #f2fcf5;
-$green-100: #e2fbe8;
-$green-200: #c7f5d4;
-$green-300: #9fecb1;
-$green-400: #77d989;
-$green-500: #5ec169;
-$green-600: #4ca054;
-$green-700: #3b7c44;
-$green-800: #306339;
-$green-900: #285131;
-
-$lime-50: #f4fce3;
-$lime-100: #e9fac8;
-$lime-200: #d8f5a2;
-$lime-300: #c0eb75;
-$lime-400: #a9e34b;
-$lime-500: #94d82d;
-$lime-600: #82c91e;
-$lime-700: #74b816;
-$lime-800: #66a80f;
-$lime-900: #47730a;
-
-$indigo-50: #edf2ff;
-$indigo-100: #dbe4ff;
-$indigo-200: #bac8ff;
-$indigo-300: #91a7ff;
-$indigo-400: #748ffc;
-$indigo-500: #5c7cfa;
-$indigo-600: #4c6ef5;
-$indigo-700: #4263eb;
-$indigo-800: #3b5bdb;
-$indigo-900: #364fc7;
-
-$yellow-50: #fffceb;
-$yellow-100: #fff3bf;
-$yellow-200: #ffec99;
-$yellow-300: #ffe066;
-$yellow-400: #ffd43b;
-$yellow-500: #fcc419;
-$yellow-600: #f0a800;
-$yellow-700: #c78100;
-$yellow-800: #ab6700;
-$yellow-900: #995200;
-
-$orange-50: #fff4e6;
-$orange-100: #ffe8cc;
-$orange-200: #ffd8a8;
-$orange-300: #ffc078;
-$orange-400: #ffa94d;
-$orange-500: #ff922b;
-$orange-600: #fd7e14;
-$orange-700: #f76707;
-$orange-800: #e8590c;
-$orange-900: #d9480f;
-
-/*------------------------------------*\
-  #FONT FAMILY
-\*------------------------------------*/
-$font-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-$font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-$font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-  'Liberation Mono', 'Courier New', monospace;
-
-/*------------------------------------*\
-  #FONT SIZE
-\*------------------------------------*/
-$font-size-2xs: 0.625rem; // 10px
-$font-size-xs: 0.75rem; // 12px
-$font-size-sm: 0.875rem; // 14px
-$font-size-base: 1rem; // 16px
-$font-size-lg: 1.125rem; // 18px
-$font-size-xl: 1.5rem; // 24px
-$font-size-2xl: 1.75rem; // 28px
-$font-size-3xl: 2rem; // 32px
-
-/*------------------------------------*\
-  #FONT WEIGHT
-\*------------------------------------*/
-$font-weight-normal: 400;
-$font-weight-medium: 500;
-$font-weight-semi-bold: 600;
-$font-weight-bold: 700;
-$font-weight-extra-bold: 800;
-
-/*------------------------------------*\
-  #LINE HEIGHT
-\*------------------------------------*/
-$leading-default: 1;
-$leading-tight: 1.25;
-$leading-normal: 1.375;
-$leading-lg: 1.5;
-
-/*------------------------------------*\
-  #LETTER SPACING
-\*------------------------------------*/
-$tracking-tight: -0.025em;
-$tracking-normal: 0;
-$tracking-wide: 0.025em;
-
-/*------------------------------------*\
-  #BORDER RADIUS
-\*------------------------------------*/
-$border-radius-2xs: 0.125rem; // 2px
-$border-radius-xs: 0.25rem; // 4px
-$border-radius-sm: 0.3125rem; // 5px
-$border-radius-md: 0.375rem; // 6px
-$border-radius-lg: 0.5rem; // 8px
-$border-radius-xl: 0.625rem; // 10px
-$border-radius-2xl: 0.75rem; // 12px
-
-/*------------------------------------*\
-  #GAPS
-\*------------------------------------*/
-$gap-base-value: 0.25rem;
-$gap-1x: 1 * $gap-base-value;
-$gap-2x: 2 * $gap-base-value;
-$gap-3x: 3 * $gap-base-value;
-$gap-4x: 4 * $gap-base-value;
-$gap-5x: 5 * $gap-base-value;
-$gap-6x: 6 * $gap-base-value;
-$gap-8x: 8 * $gap-base-value;
-$gap-10x: 10 * $gap-base-value;
-$gap-12x: 12 * $gap-base-value;
-$gap-16x: 16 * $gap-base-value;
-$gap-20x: 20 * $gap-base-value;
-$gap-24x: 24 * $gap-base-value;
-
-/*------------------------------------*\
-  #OPACITY
-\*------------------------------------*/
-$opacity-0: 0;
-$opacity-5: 0.05;
-$opacity-10: 0.1;
-$opacity-15: 0.15;
-$opacity-20: 0.2;
-$opacity-25: 0.25;
-$opacity-30: 0.3;
-$opacity-35: 0.35;
-$opacity-40: 0.4;
-$opacity-45: 0.45;
-$opacity-50: 0.5;
-$opacity-55: 0.55;
-$opacity-60: 0.6;
-$opacity-65: 0.65;
-$opacity-70: 0.7;
-$opacity-75: 0.75;
-$opacity-80: 0.8;
-$opacity-85: 0.85;
-$opacity-90: 0.9;
-$opacity-95: 0.95;
-$opacity-100: 1;
-
-/*------------------------------------*\
-  #TRANSITION
-\*------------------------------------*/
-$transition-quick: 100ms ease-in-out;
-$transition-normal: 200ms ease-in-out;
-$transition-slow: 500ms ease-in-out;
-
-/*------------------------------------*\
-  #SHADOWS
-\*------------------------------------*/
-$shadow-xs: 0 0.0625rem 0.125rem 0 rgba(black, 0.05);
-$shadow-sm: (
-  0 0.0625rem 0.1875rem 0 rgba(black, 0.1),
-  0 0.0625rem 0.125rem 0 rgba(black, 0.06)
-);
-$shadow-md: (
-  0 0.25rem 0.375rem -0.0625rem rgba(black, 0.1),
-  0 0.125rem 0.25rem -0.0625rem rgba(black, 0.06)
-);
-$shadow-lg: (
-  0 0.625rem 0.9375rem -0.1875rem rgba(black, 0.1),
-  0 0.25rem 0.375rem -0.125rem rgba(black, 0.05)
-);
-$shadow-xl: (
-  0 1.25rem 1.5625rem -0.3125rem rgba(black, 0.1),
-  0 0.625rem 0.625rem -0.3125rem rgba(black, 0.04)
-);

package/scss/base/_animations.scss

@@ -1,8 +0,0 @@
-@keyframes dc-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/scss/base/_index.scss

@@ -1,2 +0,0 @@
-@import 'normalize';
-@import 'animations';

package/scss/base/_normalize.scss

@@ -1,351 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  overflow: visible; /* 2 */
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-  border-bottom: none; /* 1 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input {
-  /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select {
-  /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  display: table; /* 1 */
-  box-sizing: border-box; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-  color: inherit; /* 2 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type='search'] {
-  outline-offset: -2px; /* 2 */
-  -webkit-appearance: textfield; /* 1 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  font: inherit; /* 2 */
-  -webkit-appearance: button; /* 1 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

package/scss/components/_actions-group.scss

@@ -1,20 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-actions-group {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0.125rem;
-  border: 0.0625rem solid var(--dc-actions-group-border);
-  border-radius: dc.$border-radius-md;
-  background: var(--dc-actions-group-bg);
-  box-shadow: dc.$shadow-xs;
-}
-
-.dc-actions-group > * + * {
-  margin-left: dc.$gap-1x;
-}
-
-.dc-actions-group__btn {
-  border-radius: inherit;
-}

package/scss/components/_alert.scss

@@ -1,95 +0,0 @@
-@use '../abstracts' as dc;
-
-.dc-alert {
-  --dc-alert-bg-color: #{dc.$gray-50};
-  --dc-alert-border-color: #{dc.$gray-200};
-  --dc-alert-icon-color: #{dc.$gray-400};
-  --dc-alert-primary-text-color: #{dc.$gray-800};
-  --dc-alert-secondary-text-color: #{dc.$gray-600};
-}
-
-.dc-alert {
-  font-family: var(--dc-font-base);
-  font-weight: dc.$font-weight-normal;
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  padding: dc.$gap-3x dc.$gap-4x;
-  border: 0.0625rem solid var(--dc-alert-border-color);
-  border-radius: dc.$border-radius-md;
-  background: var(--dc-alert-bg-color);
-}
-
-.dc-alert__icon {
-  flex-shrink: 0;
-  width: 1.125rem;
-  height: 1.125rem;
-  margin-right: dc.$gap-3x;
-  color: var(--dc-alert-icon-color);
-}
-
-.dc-alert__body {
-}
-
-.dc-alert__heading {
-  font-weight: dc.$font-weight-medium;
-  line-height: 1.125rem;
-  margin: 0;
-  color: var(--dc-alert-primary-text-color);
-}
-
-.dc-alert__description {
-  margin: 0;
-  color: var(--dc-alert-secondary-text-color);
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0 0 0 1em;
-
-    li + li {
-      margin-top: dc.$gap-1x;
-    }
-  }
-
-  * + & {
-    margin-top: dc.$gap-1x;
-  }
-}
-
-.dc-alert_bordered {
-  border-left: 0.25rem solid var(--dc-alert-icon-color);
-  border-radius: 0;
-}
-
-.dc-alert_appearance_warning {
-  --dc-alert-bg-color: #{dc.$yellow-50};
-  --dc-alert-border-color: #{dc.$yellow-200};
-  --dc-alert-icon-color: #{dc.$yellow-600};
-  --dc-alert-primary-text-color: #{dc.$yellow-900};
-  --dc-alert-secondary-text-color: #{dc.$yellow-800};
-}
-
-.dc-alert_appearance_error {
-  --dc-alert-bg-color: #{dc.$red-50};
-  --dc-alert-border-color: #{dc.$red-200};
-  --dc-alert-icon-color: #{dc.$red-500};
-  --dc-alert-primary-text-color: #{dc.$red-900};
-  --dc-alert-secondary-text-color: #{dc.$red-800};
-}
-
-.dc-alert_appearance_info {
-  --dc-alert-bg-color: #{dc.$blue-50};
-  --dc-alert-border-color: #{dc.$blue-200};
-  --dc-alert-icon-color: #{dc.$blue-500};
-  --dc-alert-primary-text-color: #{dc.$blue-800};
-  --dc-alert-secondary-text-color: #{dc.$blue-700};
-}
-
-.dc-alert_appearance_success {
-  --dc-alert-bg-color: #{dc.$green-100};
-  --dc-alert-border-color: #{dc.$green-300};
-  --dc-alert-icon-color: #{dc.$green-500};
-  --dc-alert-primary-text-color: #{dc.$green-900};
-  --dc-alert-secondary-text-color: #{dc.$green-800};
-}