@snabcentr/client-ui 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snabcentr/client-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Snabcentr Ltd.",
   "repository": "https://gitlab.snabcentr.met/web/angular/snabcentr-client-ui-lib",
   "license": "Commercial",
@@ -12,7 +12,21 @@
     "@angular/router": ">=14.2.12",
     "@angular/platform-browser": ">=14.2.12",
     "@angular/platform-browser-dynamic": ">=14.2.12",
-    "@snabcentr/client-core": "^0.0.67",
+    "@angular/material": ">=14.2.7",
+    "@snabcentr/client-core": ">=0.0.67",
+    "@taiga-ui/addon-charts": ">=3.42.1",
+    "@taiga-ui/addon-commerce": ">=3.42.1",
+    "@taiga-ui/addon-doc": ">=3.42.1",
+    "@taiga-ui/addon-mobile": ">=3.42.1",
+    "@taiga-ui/addon-preview": ">=3.42.1",
+    "@taiga-ui/addon-table": ">=3.42.1",
+    "@taiga-ui/addon-tablebars": ">=3.42.1",
+    "@taiga-ui/cdk": ">=3.42.1",
+    "@taiga-ui/core": ">=3.42.1",
+    "@taiga-ui/icons": ">=3.42.1",
+    "@taiga-ui/kit": ">=3.42.1",
+    "@taiga-ui/layout": ">=3.42.1",
+    "@taiga-ui/styles": ">=3.42.1",
     "moment": ">=2.29.4",
     "rxjs": ">=7.5.0",
     "zone.js": ">=0.12.0"

package/public-api.d.ts

@@ -1,2 +1,5 @@
+export * from './catalog';
+export * from './banner';
+export * from './icons';
 export * from './news';
 export * from './share-button';

package/styles/taiga/variables.less

@@ -2,9 +2,8 @@
 @font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
 
 :root {
-    // Deprecated TODO 4.0 delete variables --tui-heading-font and --tui-text-font
-    --tui-heading-font: 'Manrope', @font-fallback;
-    --tui-text-font: 'Manrope', @font-fallback;
+    --tui-heading-font: Roboto, 'Helvetica Neue', sans-serif, @font-fallback;
+    --tui-text-font: Roboto, 'Helvetica Neue', sans-serif, @font-fallback;
     // Fonts
     --tui-font-heading: var(--tui-heading-font);
     --tui-font-heading-1: bold 3.125rem/3.5rem var(--tui-font-heading);
@@ -14,14 +13,14 @@
     --tui-font-heading-5: bold 1.5rem/1.75rem var(--tui-font-heading);
     --tui-font-heading-6: bold 1.25rem/1.5rem var(--tui-font-heading);
     --tui-font-text: var(--tui-text-font);
-    --tui-font-text-xl: normal 1.1875rem/1.75rem var(--tui-font-text);
-    --tui-font-text-l: normal 1.0625rem/1.75rem var(--tui-font-text);
-    --tui-font-text-l-2: normal 1.0625rem/1.5rem var(--tui-font-text);
+    --tui-font-text-xl: normal 1.25rem/1.75rem var(--tui-font-text);
+    --tui-font-text-l: normal 1.125rem/1.75rem var(--tui-font-text);
+    --tui-font-text-l-2: normal 1.125rem/1.5rem var(--tui-font-text);
     --tui-font-text-m: normal 1rem/1.5rem var(--tui-font-text);
     --tui-font-text-m-2: normal 1rem/1.25rem var(--tui-font-text);
-    --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text);
-    --tui-font-text-s-2: normal 0.8125rem/1rem var(--tui-font-text);
-    --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text);
+    --tui-font-text-s: normal 0.875rem/1.25rem var(--tui-font-text);
+    --tui-font-text-s-2: normal 0.875rem/1rem var(--tui-font-text);
+    --tui-font-text-xs: normal 0.75rem/1rem var(--tui-font-text);
     // Sizes
     --tui-radius-xs: 0.25rem;
     --tui-radius-s: 0.5rem;
@@ -45,61 +44,61 @@
     // Base colors
     --tui-base-01: #fff; // background and icons on inverted background
     --tui-base-02: #f6f6f6; // secondary background, marker icons background
-    --tui-base-03: #ededed; // basic border
-    --tui-base-04: #d7d7d7; // hovered borders
-    --tui-base-05: #b0b0b0; // interface icons
-    --tui-base-06: #959595; // hovered interface icons
-    --tui-base-07: #808080; // inverted background
-    --tui-base-08: #333; // dark interface icons
+    --tui-base-03: #eeefef; // basic border
+    --tui-base-04: #E0DFE0; // hovered borders
+    --tui-base-05: #cbcbcb; // interface icons
+    --tui-base-06: #b8b8b8; // hovered interface icons
+    --tui-base-07: #888888; // inverted background
+    --tui-base-08: #666666; // dark interface icons
     --tui-base-09: #000; // icons on inverted background
-    --tui-primary: #526ed3; // primary buttons, background
-    --tui-primary-hover: #6c86e2; // primary buttons hover
-    --tui-primary-active: #314692; // primary buttons pressed
-    --tui-primary-text: #fff; // text on primary background
-    --tui-secondary: #ebefff; // inputs and secondary buttons
-    --tui-secondary-hover: #dfe3f3; // inputs and secondary buttons hover
-    --tui-secondary-active: #d8ddf2; // inputs and secondary buttons pressed
+    --tui-primary: #ffcc40; // primary buttons, background
+    --tui-primary-hover: #ffe49b; // primary buttons hover
+    --tui-primary-active: #ffbb00; // primary buttons pressed
+    --tui-primary-text: #000; // text on primary background
+    --tui-secondary: var(--tui-base-01); // inputs and secondary buttons
+    --tui-secondary-hover: var(--tui-base-04); // inputs and secondary buttons hover
+    --tui-secondary-active: var(--tui-base-02); // inputs and secondary buttons pressed
     --tui-accent: #ff7043; // fill and outline of accent elements
     --tui-accent-hover: #ff9a94; // accent elements hover
     --tui-accent-active: #e7716a; // accent elements pressed
     --tui-accent-text: #fff; // text on accent background
     --tui-selection: rgba(112, 182, 246, 0.12); // selected text background
     --tui-focus: rgba(51, 51, 51, 0.64); // focus ring color
-    --tui-clear: rgba(0, 0, 0, 0.04); // translucent dark fill
-    --tui-clear-disabled: rgba(0, 0, 0, 0.04); // translucent dark fill disabled
-    --tui-clear-hover: rgba(0, 0, 0, 0.16); // translucent dark fill hover
-    --tui-clear-active: rgba(0, 0, 0, 0.2); // translucent dark fill pressed
+    --tui-clear: rgba(246, 246, 246, 1); // translucent dark fill
+    --tui-clear-disabled: rgb(230, 229, 229); // translucent dark fill disabled
+    --tui-clear-hover: rgba(238, 239, 239, 1); // translucent dark fill hover
+    --tui-clear-active: rgba(224, 223, 224, 1); // translucent dark fill pressed
     --tui-clear-inverse: rgba(255, 255, 255, 0.16); // translucent light fill
     --tui-clear-inverse-hover: rgba(255, 255, 255, 0.24); // translucent light fill hover
     --tui-clear-inverse-active: rgba(255, 255, 255, 0.4); // translucent light fill pressed
     --tui-elevation-01: #fff; // background of elevated elements
     --tui-elevation-02: #fff; // background of elevated elements
     // Statuses
-    --tui-error-fill: rgba(244, 87, 37, 1); // icons and decorative elements with error status
-    --tui-error-bg: rgba(244, 87, 37, 0.12); // translucent error background
-    --tui-error-bg-hover: rgba(244, 87, 37, 0.24); // translucent hover error background
-    --tui-success-fill: rgba(74, 201, 155, 1); // icon and decorative elements with success status
-    --tui-success-bg: rgba(74, 201, 155, 0.12); // translucent success background
-    --tui-success-bg-hover: rgba(74, 201, 155, 0.24); // translucent success hover
-    --tui-warning-fill: rgba(255, 199, 0, 1); // icon and decorative elements with warning status
-    --tui-warning-bg: rgba(255, 199, 0, 0.12); // translucent warning background
-    --tui-warning-bg-hover: rgba(255, 199, 0, 0.24); // translucent warning background
-    --tui-info-fill: rgba(112, 182, 246, 1); // icon and decorative elements with info status
-    --tui-info-bg: rgba(112, 182, 246, 0.12); // translucent info background
-    --tui-info-bg-hover: rgba(112, 182, 246, 0.24); // translucent info background
-    --tui-neutral-fill: rgb(121, 129, 140); // icon and decorative elements with neutral status
-    --tui-neutral-bg: rgba(121, 129, 140, 0.12); // translucent info background
-    --tui-neutral-bg-hover: rgba(121, 129, 140, 0.24); // translucent info background
+    --tui-error-fill: rgba(226, 56, 56, 1); // icons and decorative elements with error status
+    --tui-error-bg: rgba(252, 230, 230, 1); // translucent error background
+    --tui-error-bg-hover: rgba(252, 209, 209, 1); // translucent hover error background
+    --tui-success-fill: rgba(67, 146, 39, 1); // icon and decorative elements with success status
+    --tui-success-bg: rgba(228, 242, 224, 1); // translucent success background
+    --tui-success-bg-hover: rgba(194, 220, 185, 1); // translucent success hover
+    --tui-warning-fill: var(--tui-primary); // icon and decorative elements with warning status
+    --tui-warning-bg: rgba(255, 246, 223, 1); // translucent warning background
+    --tui-warning-bg-hover: var(--tui-primary-hover);// translucent warning background
+    --tui-info-fill: rgba(119, 174, 237, 1); // icon and decorative elements with info status
+    --tui-info-bg: rgba(235, 245, 255, 1); // translucent info background
+    --tui-info-bg-hover: rgba(212, 231, 255, 1); // translucent info background
+    --tui-neutral-fill: var(--tui-base-07);// icon and decorative elements with neutral status
+    --tui-neutral-bg: var(--tui-base-02); // translucent info background
+    --tui-neutral-bg-hover: var(--tui-base-04); // translucent info background
     // Text
-    --tui-text-01: rgba(27, 31, 59, 1);
-    --tui-text-02: rgba(27, 31, 59, 0.65);
-    --tui-text-03: rgba(27, 31, 59, 0.4);
-    --tui-link: #526ed3;
-    --tui-link-hover: #6c86e2;
-    --tui-positive: #3aa981;
-    --tui-positive-hover: #7ac5aa;
-    --tui-negative: #dd4c1e;
-    --tui-negative-hover: #e38163;
+    --tui-text-01: var(--tui-base-09);
+    --tui-text-02: var(--tui-base-07);
+    --tui-text-03: var(--tui-base-05);
+    --tui-link: #1e50c8;
+    --tui-link-hover: #4c91ed;
+    --tui-positive: var(--tui-success-fill);
+    --tui-positive-hover: var(--tui-success-bg);
+    --tui-negative: var(--tui-error-fill);
+    --tui-negative-hover: var(--tui-error-bg-hover);
     // Modifiers for dark background
     --tui-error-fill-night: rgba(255, 140, 103, 1);
     --tui-error-bg-night: rgba(244, 87, 37, 0.32);

package/styles/tailwind/extend.js

@@ -0,0 +1,189 @@
+module.exports = {
+    fontFamily: {
+        'tui-heading': 'var(--tui-font-heading)',
+        'tui-text': 'var(--tui-font-text)',
+    },
+    borderRadius: {
+        'tui-radius-xs': 'var(--tui-radius-xs)',
+        'tui-radius-s': 'var(--tui-radius-s)',
+        'tui-radius-m': 'var(--tui-radius-m)',
+        'tui-radius-l': 'var(--tui-radius-l)',
+        'tui-radius-xl': 'var(--tui-radius-xl)',
+    },
+    fontSize: {
+        'tui-heading-1': 'var(--tui-font-heading-1)',
+        'tui-heading-2': 'var(--tui-font-heading-2)',
+        'tui-heading-3': 'var(--tui-font-heading-3)',
+        'tui-heading-4': 'var(--tui-font-heading-4)',
+        'tui-heading-5': 'var(--tui-font-heading-5)',
+        'tui-heading-6': 'var(--tui-font-heading-6)',
+        'tui-xl': 'var(--tui-font-text-xl)',
+        'tui-l': 'var(--tui-font-text-l)',
+        'tui-l-2': 'var(--tui-font-text-l-2)',
+        'tui-m': 'var(--tui-font-text-m)',
+        'tui-m-2': 'var(--tui-font-text-m-2)',
+        'tui-s': 'var(--tui-font-text-s)',
+        'tui-s-2': 'var(--tui-font-text-s-2)',
+        'tui-xs': 'var(--tui-font-text-xs)',
+    },
+    colors: {
+        // Base colors
+        'tui-autofill': 'var(--tui-autofill)',
+        'tui-base-01': 'var(--tui-base-01)',
+        'tui-base-02': 'var(--tui-base-02)',
+        'tui-base-03': 'var(--tui-base-03)',
+        'tui-base-04': 'var(--tui-base-04)',
+        'tui-base-05': 'var(--tui-base-05)',
+        'tui-base-06': 'var(--tui-base-06)',
+        'tui-base-07': 'var(--tui-base-07)',
+        'tui-base-08': 'var(--tui-base-08)',
+        'tui-base-09': 'var(--tui-base-09)',
+        'tui-primary': 'var(--tui-primary)',
+        'tui-primary-hover': 'var(--tui-primary-hover)',
+        'tui-primary-active': 'var(--tui-primary-active)',
+        'tui-primary-text': 'var(--tui-primary-text)',
+        'tui-secondary': 'var(--tui-secondary)',
+        'tui-secondary-hover': 'var(--tui-secondary-hover)',
+        'tui-secondary-active': 'var(--tui-secondary-active)',
+        'tui-accent': 'var(--tui-accent)',
+        'tui-accent-hover': 'var(--tui-accent-hover)',
+        'tui-accent-active': 'var(--tui-accent-active)',
+        'tui-accent-text': 'var(--tui-accent-text)',
+        'tui-selection': 'var(--tui-selection)',
+        'tui-focus': 'var(--tui-focus)',
+        'tui-clear': 'var(--tui-clear)',
+        'tui-clear-disabled': 'var(--tui-clear-disabled)',
+        'tui-clear-hover': 'var(--tui-clear-hover)',
+        'tui-clear-active': 'var(--tui-clear-active)',
+        'tui-clear-inverse': 'var(--tui-clear-inverse)',
+        'tui-clear-inverse-hover': 'var(--tui-clear-inverse-hover)',
+        'tui-clear-inverse-active': 'var(--tui-clear-inverse-active)',
+        'tui-elevation-01': 'var(--tui-elevation-01)',
+        'tui-elevation-02': 'var(--tui-elevation-02)',
+
+        // Statuses
+        'tui-error-fill': 'var(--tui-error-fill)',
+        'tui-error-bg': 'var(--tui-error-bg)',
+        'tui-error-bg-hover': 'var(--tui-error-bg-hover)',
+        'tui-success-fill': 'var(--tui-success-fill)',
+        'tui-success-bg': 'var(--tui-success-bg)',
+        'tui-success-bg-hover': 'var(--tui-success-bg-hover)',
+        'tui-warning-fill': 'var(--tui-warning-fill)',
+        'tui-warning-bg': 'var(--tui-warning-bg)',
+        'tui-warning-bg-hover': 'var(--tui-warning-bg-hover)',
+        'tui-info-fill': 'var(--tui-info-fill)',
+        'tui-info-bg': 'var(--tui-info-bg)',
+        'tui-info-bg-hover': 'var(--tui-info-bg-hover)',
+        'tui-neutral-fill': 'var(--tui-neutral-fill)',
+        'tui-neutral-bg': 'var(--tui-neutral-bg)',
+        'tui-neutral-bg-hover': 'var(--tui-neutral-bg-hover)',
+
+        // Text
+        'tui-text-01': 'var(--tui-text-01)',
+        'tui-text-02': 'var(--tui-text-02)',
+        'tui-text-03': 'var(--tui-text-03)',
+        'tui-link': 'var(--tui-link)',
+        'tui-link-hover': 'var(--tui-link-hover)',
+        'tui-positive': 'var(--tui-positive)',
+        'tui-positive-hover': 'var(--tui-positive-hover)',
+        'tui-negative': 'var(--tui-negative)',
+        'tui-negative-hover': 'var(--tui-negative-hover)',
+
+        // Modifiers for dark background
+        'tui-error-fill-night': 'var(--tui-error-fill-night)',
+        'tui-error-bg-night': 'var(--tui-error-bg-night)',
+        'tui-error-bg-night-hover': 'var(--tui-error-bg-night-hover)',
+        'tui-success-fill-night': 'var(--tui-success-fill-night)',
+        'tui-success-bg-night': 'var(--tui-success-bg-night)',
+        'tui-success-bg-night-hover': 'var(--tui-success-bg-night-hover)',
+        'tui-warning-fill-night': 'var(--tui-warning-fill-night)',
+        'tui-warning-bg-night': 'var(--tui-warning-bg-night)',
+        'tui-warning-bg-night-hover': 'var(--tui-warning-bg-night-hover)',
+        'tui-info-fill-night': 'var(--tui-info-fill-night)',
+        'tui-info-bg-night': 'var(--tui-info-bg-night)',
+        'tui-info-bg-night-hover': 'var(--tui-info-bg-night-hover)',
+        'tui-neutral-fill-night': 'var(--tui-neutral-fill-night)',
+        'tui-neutral-bg-night': 'var(--tui-neutral-bg-night)',
+        'tui-neutral-bg-night-hover': 'var(--tui-neutral-bg-night-hover)',
+        'tui-autofill-night': 'var(--tui-autofill-night)',
+        'tui-text-01-night': 'var(--tui-text-01-night)',
+        'tui-text-02-night': 'var(--tui-text-02-night)',
+        'tui-text-03-night': 'var(--tui-text-03-night)',
+        'tui-link-night': 'var(--tui-link-night)',
+        'tui-link-night-hover': 'var(--tui-link-night-hover)',
+        'tui-positive-night': 'var(--tui-positive-night)',
+        'tui-positive-night-hover': 'var(--tui-positive-night-hover)',
+        'tui-negative-night': 'var(--tui-negative-night)',
+        'tui-negative-night-hover': 'var(--tui-negative-night-hover)',
+
+        // Others
+        'tui-support-01': 'var(--tui-support-01)',
+        'tui-support-02': 'var(--tui-support-02)',
+        'tui-support-03': 'var(--tui-support-03)',
+        'tui-support-04': 'var(--tui-support-04)',
+        'tui-support-05': 'var(--tui-support-05)',
+        'tui-support-06': 'var(--tui-support-06)',
+        'tui-support-07': 'var(--tui-support-07)',
+        'tui-support-08': 'var(--tui-support-08)',
+        'tui-support-09': 'var(--tui-support-09)',
+        'tui-support-10': 'var(--tui-support-10)',
+        'tui-support-11': 'var(--tui-support-11)',
+        'tui-support-12': 'var(--tui-support-12)',
+        'tui-support-13': 'var(--tui-support-13)',
+        'tui-support-14': 'var(--tui-support-14)',
+        'tui-support-15': 'var(--tui-support-15)',
+        'tui-support-16': 'var(--tui-support-16)',
+        'tui-support-17': 'var(--tui-support-17)',
+        'tui-support-18': 'var(--tui-support-18)',
+        'tui-support-19': 'var(--tui-support-19)',
+        'tui-support-20': 'var(--tui-support-20)',
+        'tui-support-21': 'var(--tui-support-21)',
+        'tui-chart-0': 'var(--tui-chart-0)',
+        'tui-chart-1': 'var(--tui-chart-1)',
+        'tui-chart-2': 'var(--tui-chart-2)',
+        'tui-chart-3': 'var(--tui-chart-3)',
+        'tui-chart-4': 'var(--tui-chart-4)',
+    },
+    boxShadow: {
+        sc: '2px 7px 20px 1px rgba(0, 0, 0, 0.1)',
+    },
+    width: {
+        // TODO: доработать после исправления всего дизайна.
+        50: '12.5rem',
+        39.5: '9.875rem',
+        70: '17.5rem',
+    },
+    height: {
+        'tui-height-xs': 'var(--tui-height-xs)',
+        'tui-height-s': 'var(--tui-height-s)',
+        'tui-height-m': 'var(--tui-height-m)',
+        'tui-height-l': 'var(--tui-height-l)',
+        // TODO: доработать после исправления всего дизайна.
+        35: '8.75rem',
+        39.5: '9.875rem',
+        50: '12.5rem',
+        82: '20.5rem',
+    },
+    padding: {
+        'tui-padding-s': 'var(--tui-padding-s)',
+        'tui-padding-m': 'var(--tui-padding-m)',
+        'tui-padding-l': 'var(--tui-padding-l)',
+        // TODO: доработать после исправления всего дизайна.
+        4.5: '1.125rem',
+    },
+    opacity: {
+        'tui-padding-s': 'var(--tui-padding-s)',
+        'tui-padding-m': 'var(--tui-padding-m)',
+        'tui-padding-l': 'var(--tui-padding-l)',
+    },
+    maxHeight: {
+        35: '8.75rem',
+    },
+    minHeight: {
+        8: '2rem',
+        10: '2.5rem',
+    },
+    spacing: {
+        15: '3.75rem',
+    },
+};

package/styles/tailwind/tailwind.scss

@@ -580,6 +580,10 @@ video {
   border-width: 0;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .\!visible {
   visibility: visible !important;
 }
@@ -604,6 +608,10 @@ video {
   position: fixed;
 }
 
+.\!absolute {
+  position: absolute !important;
+}
+
 .absolute {
   position: absolute;
 }
@@ -620,6 +628,22 @@ video {
   position: sticky;
 }
 
+.left-1 {
+  left: 0.25rem;
+}
+
+.left-3 {
+  left: 0.75rem;
+}
+
+.top-1 {
+  top: 0.25rem;
+}
+
+.top-3 {
+  top: 0.75rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -636,6 +660,14 @@ video {
   margin-bottom: 0.625rem;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .line-clamp-3 {
   overflow: hidden;
   display: -webkit-box;
@@ -643,6 +675,10 @@ video {
   -webkit-line-clamp: 3;
 }
 
+.\!block {
+  display: block !important;
+}
+
 .block {
   display: block;
 }
@@ -667,6 +703,10 @@ video {
   display: contents;
 }
 
+.\!hidden {
+  display: none !important;
+}
+
 .hidden {
   display: none;
 }
@@ -687,6 +727,10 @@ video {
   height: 20.5rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -703,6 +747,10 @@ video {
   width: 2rem;
 }
 
+.w-96 {
+  width: 24rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -711,6 +759,14 @@ video {
   flex-shrink: 1;
 }
 
+.shrink {
+  flex-shrink: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -735,6 +791,18 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -743,6 +811,14 @@ video {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-8 {
   gap: 2rem;
 }
@@ -765,13 +841,24 @@ video {
   border-radius: 0.5rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.rounded-tui-radius-m {
+  border-radius: var(--tui-radius-m);
+}
+
+.rounded-tui-radius-s {
+  border-radius: var(--tui-radius-s);
+}
+
 .border {
   border-width: 1px;
 }
 
-.bg-sc-light-grey {
-  --tw-bg-opacity: 1;
-  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+.bg-tui-base-02 {
+  background-color: var(--tui-base-02);
 }
 
 .bg-white {
@@ -791,6 +878,19 @@ video {
   background-repeat: no-repeat;
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -810,6 +910,11 @@ video {
   vertical-align: baseline;
 }
 
+.\!text-2xl {
+  font-size: 1.5rem !important;
+  line-height: 2rem !important;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -845,9 +950,17 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-sc-dark-grey {
+.text-green-600 {
   --tw-text-opacity: 1;
-  color: rgb(136 136 136 / var(--tw-text-opacity));
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.text-tui-base-07 {
+  color: var(--tui-base-07);
+}
+
+.text-tui-primary {
+  color: var(--tui-primary);
 }
 
 .underline {
@@ -917,6 +1030,10 @@ video {
   transition-duration: 150ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }