@tedi-design-system/core 2.0.0

package/tedi-storybook-styles.scss

@@ -0,0 +1,172 @@
+.mobile {
+  .tedi-text {
+    &--h1 {
+      font-size: var(--heading-h1-size-mobile);
+    }
+
+    &--h2 {
+      font-size: var(--heading-h2-size-mobile);
+    }
+
+    &--h3 {
+      font-size: var(--heading-h3-size-mobile);
+    }
+
+    &--h4 {
+      font-size: var(--heading-h4-size-mobile);
+    }
+
+    &--h5 {
+      font-size: var(--heading-h5-size-mobile);
+    }
+
+    &--h6 {
+      font-size: var(--heading-h6-size-mobile);
+    }
+  }
+
+  .text {
+    &-subtitle {
+      font-size: var(--heading-subtitle-small-size-mobile);
+    }
+  }
+}
+
+a {
+  color: var(--link-primary-default);
+
+  &.underlined {
+    text-decoration: underline;
+  }
+
+  &.no-underline {
+    text-decoration: none;
+  }
+}
+
+.bg {
+  display: flex;
+  align-items: center;
+  padding: var(--dimensions-08);
+  border-radius: var(--radius-03);
+
+  &-primary {
+    background-color: var(--general-surface-brand-primary);
+  }
+
+  &-success {
+    background-color: var(--general-status-success-background-secondary);
+  }
+
+  &-danger {
+    background-color: var(--general-status-danger-background-secondary);
+  }
+
+  &-warning {
+    background-color: var(--general-status-warning-text);
+  }
+
+  &-tab {
+    background-color: var(--tab-background);
+  }
+}
+
+.display-flex {
+  display: flex;
+  align-items: center;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.example-list {
+  overflow: hidden;
+  border: 1px solid var(--neutral-350);
+  border-radius: var(--radius-03);
+}
+
+.example-text {
+  &--primary {
+    color: var(--neutral-900);
+  }
+
+  &--secondary {
+    color: var(--neutral-700);
+  }
+}
+
+.example-col {
+  padding: 0.75rem;
+  background-color: rgb(39 41 43 / 3%);
+  border: 1px solid rgb(39 41 43 / 10%);
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--neutral-350);
+
+  &--3x {
+    border-width: 3px;
+  }
+}
+
+.padding-14-16 {
+  padding: 14px 16px;
+  margin: 0;
+}
+
+.color {
+  width: 200px;
+}
+
+.color-card {
+  position: relative;
+  width: 100%;
+  width: 110px;
+  height: 110px;
+  overflow: hidden;
+  border-radius: var(--dimensions-05);
+}
+
+.color-card::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background-color: var(--neutral-150);
+  background-image: linear-gradient(
+      45deg,
+      var(--neutral-300) 25%,
+      transparent 25%,
+      transparent 75%,
+      var(--neutral-300) 75%
+    ),
+    linear-gradient(45deg, var(--neutral-300) 25%, transparent 25%, transparent 75%, var(--neutral-300) 75%);
+  background-position: 0 0, 10px 10px;
+  background-size: 20px 20px;
+}
+
+.color-card::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background: inherit;
+}
+
+.story-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 20px;
+  align-items: start;
+}

package/variables/_base-variables.scss

@@ -0,0 +1,168 @@
+:root {
+  /* 1.1 Base colors */
+  --accent-100: var(--orange-100);
+  --accent-200: var(--orange-200);
+  --accent-300: var(--orange-300);
+  --accent-400: var(--orange-400);
+  --accent-500: var(--orange-500);
+  --accent-600: var(--orange-600);
+  --accent-700: var(--orange-700);
+  --accent-800: var(--orange-800);
+  --alpha-01: rgba(0 0 0 / 0%);
+  --alpha-10: rgba(0 0 0 / 10%);
+  --alpha-14: rgba(0 0 0 / 14%);
+  --alpha-20: rgba(0 0 0 / 20%);
+  --alpha-40: rgba(23 23 23 / 40%);
+  --alpha-80: rgba(34 35 43 / 80%);
+  --alpha-primary-08: rgba(0 90 163 / 8%);
+  --alpha-primary-20: rgba(0 90 163 / 20%);
+  --alpha-white-10: rgba(255 255 255 / 10%);
+  --alpha-white-14: rgba(255 255 255 / 14%);
+  --alpha-white-20: rgba(255 255 255 / 20%);
+  --alpha-white-30: rgba(255 255 255 / 30%);
+  --alpha-white-50: rgba(255 255 255 / 50%);
+  --alpha-white-80: rgba(255 255 255 / 80%);
+  --blue-100: #e7f0f6;
+  --blue-200: #d0e1ee;
+  --blue-300: #99bdda;
+  --blue-400: #4587bc;
+  --blue-500: #337bb5;
+  --blue-600: #005aa3;
+  --blue-700: #004277;
+  --blue-800: #003662;
+  --green-100: #eaf3ee;
+  --green-200: #d6e7dd;
+  --green-300: #accfba;
+  --green-400: #83b698;
+  --green-500: #599e75;
+  --green-600: #308653;
+  --green-700: #266b42;
+  --green-800: #1d5032;
+  --neutral-100: #fff;
+  --neutral-200: #f9f9f9;
+  --neutral-300: #f0f0f2;
+  --neutral-350: #e1e2e5;
+  --neutral-400: #d2d3d8;
+  --neutral-450: #9293a4;
+  --neutral-500: #838494;
+  --neutral-550: #737482;
+  --neutral-600: #5d6071;
+  --neutral-700: #4b4e62;
+  --neutral-750: #34394c;
+  --neutral-800: #262b3b;
+  --neutral-850: #151926;
+  --neutral-900: #000;
+  --orange-100: #fff2e6;
+  --orange-200: #ffe6cc;
+  --orange-300: #fc9;
+  --orange-400: #ffb366;
+  --orange-500: #f93;
+  --orange-600: #ff8000;
+  --orange-700: #994d00;
+  --orange-800: #630;
+  --primary-100: var(--blue-100);
+  --primary-200: var(--blue-200);
+  --primary-300: var(--blue-300);
+  --primary-400: var(--blue-400);
+  --primary-500: var(--blue-500);
+  --primary-600: var(--blue-600);
+  --primary-700: var(--blue-700);
+  --primary-800: var(--blue-800);
+  --red-100: #fbecec;
+  --red-200: #f7d8d8;
+  --red-300: #efb2b2;
+  --red-400: #e78b8b;
+  --red-500: #df6565;
+  --red-600: #d73e3e;
+  --red-700: #ac3232;
+  --red-800: #812525;
+  --yellow-100: #fff8e7;
+  --yellow-200: #fff0cf;
+  --yellow-300: #ffe1a0;
+  --yellow-400: #ffd370;
+  --yellow-500: #ffb511;
+  --yellow-600: #ba830d;
+  --yellow-700: #94690d;
+  --yellow-800: #664807;
+
+  /* BASE DIMENSIONS */
+  --dimensions-00: 0rem;
+  --dimensions-01: 0.0625rem;
+  --dimensions-02: 0.125rem;
+  --dimensions-03: 0.25rem;
+  --dimensions-04: 0.375rem;
+  --dimensions-05: 0.5rem;
+  --dimensions-06: 0.625rem;
+  --dimensions-07: 0.75rem;
+  --dimensions-08: 0.8125rem;
+  --dimensions-09: 0.875rem;
+  --dimensions-10: 1rem;
+  --dimensions-11: 1.125rem;
+  --dimensions-12: 1.375rem;
+  --dimensions-13: 1.5rem;
+  --dimensions-14: 2rem;
+  --dimensions-15: 2.25rem;
+  --dimensions-16: 2.5rem;
+  --dimensions-17: 2.75rem;
+  --dimensions-18: 3rem;
+  --dimensions-19: 3.5rem;
+  --dimensions-20: 4rem;
+  --dimensions-21: 4.5rem;
+  --dimensions-22: 5rem;
+  --dimensions-23: 6rem;
+  --dimensions-24: 10rem;
+  --dimensions-25: 24rem;
+  --radius-00: 0px;
+  --radius-01: 2px;
+  --radius-02-default: 4px;
+  --radius-03: 8px;
+  --radius-04: 16px;
+  --radius-05: 20px;
+  --radius-06: 40px;
+  --radius-07: 100px;
+  --radius-08: 360px;
+  --containers-01: 160px;
+  --containers-02: 240px;
+  --containers-03: 312px;
+  --containers-04: 340px;
+  --containers-05: 460px;
+  --containers-06: 480px;
+  --containers-07: 552px;
+  --containers-08: 616px;
+  --containers-09: 820px;
+  --containers-10: 840px;
+  --containers-11: 1024px;
+  --containers-12: 1416px;
+  --containers-13: 1232px;
+  --borders-01: 1px;
+  --borders-02: 2px;
+  --borders-03: 3px;
+  --borders-04: 4px;
+
+  /* BASE FONTS */
+  --family-roboto: 'Roboto';
+  --size-00: 0.75rem; /* 12px */
+  --size-01: 0.875rem; /* 14px */
+  --size-02: 1rem; /* 16px */
+  --size-03: 1.125rem; /* 18px */
+  --size-04: 1.25rem; /* 20px */
+  --size-05: 1.375rem; /* 22px */
+  --size-06: 1.5rem; /* 24px */
+  --size-07: 1.75rem; /* 28px */
+  --size-08: 1.875rem; /* 30px */
+  --size-09: 2rem; /* 32px */
+  --line-height-01: 1.25rem; /* 20px */
+  --line-height-02: 1.3125rem; /* 21px */
+  --line-height-03: 1.5rem; /* 24px */
+  --line-height-04: 1.625rem; /* 26px */
+  --line-height-05: 1.75rem; /* 28px */
+  --line-height-06: 1.875rem; /* 30px */
+  --line-height-07: 2rem; /* 32px */
+  --line-height-08: 2.25rem; /* 36px */
+  --line-height-09: 2.625rem; /* 42px */
+  --line-height-10: 2.875rem; /* 46px */
+  --line-height-11: 3rem; /* 48px */
+  --weight-01: 300;
+  --weight-02: 400;
+  --weight-03: 700;
+}

package/variables/_bootstrap-variables.scss

@@ -0,0 +1,30 @@
+$grid-columns: 12;
+$grid-gutter-width: 1.5rem;
+$grid-row-columns: 12;
+$variable-prefix: 'bs-';
+$spacer: 1rem;
+$enable-important-utilities: true;
+$gutters: (
+  0: 0,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+);
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+);
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+);