@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/styles/utilities/text.scss

@@ -1,100 +1,114 @@
-@use '../typography/config' as typographyConfig;
-@use '../typography/mixins' as typographyMixins;
-@use '../tools/layout' as *;
-@use '../tools/text' as *;
-@use '../tools/generate';
-@use '../tokens/color';
-@use '../tokens/base';
-@use '../tokens/breakpoint';
-
-strong,
-.bold {
-  font-weight: 700 !important;
-}
+@use "../typography/config" as typographyConfig;
+@use "../typography/mixins" as typographyMixins;
+@use "../tools/layout" as *;
+@use "../tools/text" as *;
+@use "../tools/generate";
+@use "../tokens/color";
+@use "../tokens/base";
+@use "../tokens/breakpoint";
 
-em,
-.italic {
-  font-style: italic !important;
-}
+@layer utilities {
+  strong,
+  .bold {
+    font-weight: 700 !important;
+  }
 
-small,
-.small {
-  @include generate.css-map(typographyConfig.$body-text, 'small');
-}
+  .normal {
+    font-weight: 400 !important;
+  }
 
-.large {
-  @include generate.css-map(typographyConfig.$body-text, 'large');
-}
+  .thin {
+    font-weight: 300 !important;
+  }
 
-.text-nowrap {
-  white-space: nowrap !important;
-}
+  em,
+  .italic {
+    font-style: italic !important;
+  }
 
-.text-wrap {
-  white-space: normal !important;
-}
+  .underline {
+    text-decoration: underline !important;
+  }
 
-.text-ellipsis {
-  @include text-ellipsis;
-}
+  small,
+  .small {
+    @include generate.css-map(typographyConfig.$body-text, "small");
+  }
 
-.align-left {
-  text-align: left !important;
-}
-.align-center {
-  text-align: center !important;
-}
-.align-right {
-  text-align: right !important;
-}
+  .large {
+    @include generate.css-map(typographyConfig.$body-text, "large");
+  }
 
-@each $name, $width in breakpoint.$map {
-  @if $name != 'xs' {
-    @include breakpoint.get($name) {
-      .align-#{$name}-right {
-        text-align: right !important;
-      }
-      .align-#{$name}-left {
-        text-align: left !important;
-      }
-      .align-#{$name}-center {
-        text-align: center !important;
+  .text-nowrap {
+    white-space: nowrap !important;
+  }
+
+  .text-wrap {
+    white-space: normal !important;
+  }
+
+  .text-ellipsis {
+    @include text-ellipsis;
+  }
+
+  .align-left {
+    text-align: left !important;
+  }
+  .align-center {
+    text-align: center !important;
+  }
+  .align-right {
+    text-align: right !important;
+  }
+
+  @each $name, $width in breakpoint.$map {
+    @if $name != "xs" {
+      @include breakpoint.get($name) {
+        .align-#{$name}-right {
+          text-align: right !important;
+        }
+        .align-#{$name}-left {
+          text-align: left !important;
+        }
+        .align-#{$name}-center {
+          text-align: center !important;
+        }
       }
     }
   }
-}
 
-.reset-text-decoration {
-  text-decoration: none !important;
-}
+  .reset-text-decoration {
+    text-decoration: none !important;
+  }
 
-.align-middle {
-  vertical-align: middle !important;
-}
-.align-top {
-  vertical-align: top !important;
-}
-.align-bottom {
-  vertical-align: bottom !important;
-}
-.align-baseline {
-  vertical-align: baseline !important;
-}
+  .align-middle {
+    vertical-align: middle !important;
+  }
+  .align-top {
+    vertical-align: top !important;
+  }
+  .align-bottom {
+    vertical-align: bottom !important;
+  }
+  .align-baseline {
+    vertical-align: baseline !important;
+  }
 
-.reset-font-weight {
-  font-weight: normal !important;
-}
-.reset-font-size {
-  font-size: base.$font-size !important;
-  line-height: base.$line-height !important;
-}
+  .reset-font-weight {
+    font-weight: normal !important;
+  }
+  .reset-font-size {
+    font-size: base.$font-size !important;
+    line-height: base.$line-height !important;
+  }
 
-.text-fullwidth {
-  @include typographyMixins.text-fullwidth;
-}
-.text-readable {
-  @include typographyMixins.text-readable;
-}
-.text-narrow {
-  @include typographyMixins.text-narrow;
+  .text-fullwidth {
+    @include typographyMixins.text-fullwidth;
+  }
+  .text-readable {
+    @include typographyMixins.text-readable;
+  }
+  .text-narrow {
+    @include typographyMixins.text-narrow;
+  }
 }

package/src/styles/utilities/visibility.scss

@@ -1,90 +1,94 @@
-@use 'sass:map' as sassmap;
-@use '../tokens/breakpoint';
-@use '../tools/map';
-@use '../tools/visibility';
+@use "sass:map" as sassmap;
+@use "../tokens/breakpoint";
+@use "../tools/map";
+@use "../tools/visibility";
 
-.visually-hidden,
-.sr-only {
-  @include visibility.visually-hidden;
-}
+@layer utilities {
+  .visually-hidden,
+  .sr-only {
+    @include visibility.visually-hidden;
+  }
 
-@mixin show-for($breakpoint) {
-  @if sassmap.get(breakpoint.$map, $breakpoint) {
-    @include breakpoint.get($breakpoint, downfrom) {
-      display: none !important;
+  @mixin show-for($breakpoint) {
+    display: none !important;
+    @if sassmap.get(breakpoint.$map, $breakpoint) {
+      @include breakpoint.get($breakpoint) {
+        display: inherit !important;
+      }
+    } @else {
+      @warn 'show-for() parameter breakpoint is not defined in the breakpoint.$map map';
     }
-  } @else {
-    @warn 'show-for() parameter breakpoint is not defined in the breakpoint.$map map';
   }
-}
 
-@mixin hide-for($breakpoint) {
-  @if sassmap.get(breakpoint.$map, $breakpoint) {
-    @include breakpoint.get($breakpoint) {
-      display: none !important;
+  @mixin hide-for($breakpoint) {
+    display: inherit !important;
+    @if sassmap.get(breakpoint.$map, $breakpoint) {
+      @include breakpoint.get($breakpoint) {
+        display: none !important;
+      }
+    } @else {
+      @warn 'hide-for() parameter breakpoint is not defined in the breakpoint.$map map';
     }
-  } @else {
-    @warn 'hide-for() parameter breakpoint is not defined in the breakpoint.$map map';
   }
-}
 
-@mixin show-for-only($breakpoint) {
-  $lower-bound-name: $breakpoint;
-  $upper-bound-name: map.next(breakpoint.$map, $breakpoint, 'key');
+  @mixin show-for-only($breakpoint) {
+    $lower-bound-name: $breakpoint;
+    $upper-bound-name: map.next(breakpoint.$map, $breakpoint, "key");
 
-  @if $lower-bound-name {
-    @include breakpoint.get($lower-bound-name, downfrom) {
-      display: none !important;
+    @if $lower-bound-name {
+      @include breakpoint.get($lower-bound-name, downfrom) {
+        display: none !important;
+      }
+
+      @if $upper-bound-name {
+        @include breakpoint.get($upper-bound-name) {
+          display: none !important;
+        }
+      }
+    } @else {
+      @warn 'hide-for() parameter #{$breakpoint} is not defined properly in the breakpoint.$map map';
     }
+  }
 
-    @if $upper-bound-name {
-      @include breakpoint.get($upper-bound-name) {
+  @mixin hide-for-only($breakpoint) {
+    @if sassmap.get(breakpoint.$map, $breakpoint) {
+      @include breakpoint.get($breakpoint, only) {
         display: none !important;
       }
+    } @else {
+      @warn 'hide-for() parameter #{$breakpoint} is not defined properly in the breakpoint.$map map';
     }
-  } @else {
-    @warn 'hide-for() parameter #{$breakpoint} is not defined properly in the breakpoint.$map map';
   }
-}
 
-@mixin hide-for-only($breakpoint) {
-  @if sassmap.get(breakpoint.$map, $breakpoint) {
-    @include breakpoint.get($breakpoint, only) {
+  @mixin visibility-classes() {
+    .hide {
       display: none !important;
     }
-  } @else {
-    @warn 'hide-for() parameter #{$breakpoint} is not defined properly in the breakpoint.$map map';
-  }
-}
 
-@mixin visibility-classes() {
-  .hide {
-    display: none !important;
-  }
+    .invisible {
+      visibility: hidden;
+    }
 
-  .invisible {
-    visibility: hidden;
-  }
+    @each $breakpoint, $size in breakpoint.$map {
+      @if $breakpoint != "xs" {
+        .show-#{$breakpoint} {
+          @include show-for($breakpoint);
+        }
 
-  @each $breakpoint, $size in breakpoint.$map {
-    @if $breakpoint != 'xs' {
-      .show-#{$breakpoint} {
-        @include show-for($breakpoint);
+        .hide-#{$breakpoint} {
+          @include hide-for($breakpoint);
+        }
       }
 
-      .hide-#{$breakpoint} {
-        @include hide-for($breakpoint);
+      .show-#{$breakpoint}-only {
+        @include show-for-only($breakpoint);
       }
-    }
-
-    .show-#{$breakpoint}-only {
-      @include show-for-only($breakpoint);
-    }
 
-    .hide-#{$breakpoint}-only {
-      @include hide-for-only($breakpoint);
+      .hide-#{$breakpoint}-only {
+        @include hide-for-only($breakpoint);
+      }
     }
   }
-}
 
-@include visibility-classes;
+  @include visibility-classes;
+}

package/build/404.html

@@ -1 +0,0 @@
-<!DOCTYPE html><html lang="en" class="__className_df92c2"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/671791babd225be4-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/c62d990acddde5f0-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/dfdbb1c4973e0bd7-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/14f3a3e0186fb7a8.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-623f6e616651e1c0.js"/><script src="/_next/static/chunks/4bd1b696-40a218329c8ae32b.js" async=""></script><script src="/_next/static/chunks/684-c72f8f73e7f2d568.js" async=""></script><script src="/_next/static/chunks/main-app-ce2a2222e012907f.js" async=""></script><script src="/_next/static/chunks/app/layout-f74d44a2772d8d63.js" async=""></script><meta name="robots" content="noindex"/><meta name="next-size-adjust" content=""/><title>404: This page could not be found.</title><script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><div hidden=""><!--$--><!--/$--></div><div id="root"><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:49px;margin:0">This page could not be found.</h2></div></div></div><!--$--><!--/$--></div><div id="root-modals"></div><div id="root-dropdowns"></div><div id="root-tooltips"></div><script src="/_next/static/chunks/webpack-623f6e616651e1c0.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[3640,[\"177\",\"static/chunks/app/layout-f74d44a2772d8d63.js\"],\"default\"]\n3:I[5085,[\"177\",\"static/chunks/app/layout-f74d44a2772d8d63.js\"],\"SpritePathProvider\"]\n4:I[7555,[],\"\"]\n5:I[1295,[],\"\"]\n6:I[9665,[],\"OutletBoundary\"]\n9:I[4911,[],\"AsyncMetadataOutlet\"]\nb:I[9665,[],\"ViewportBoundary\"]\nd:I[9665,[],\"MetadataBoundary\"]\nf:I[6614,[],\"\"]\n:HL[\"/_next/static/media/671791babd225be4-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/c62d990acddde5f0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/dfdbb1c4973e0bd7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/14f3a3e0186fb7a8.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"CRhIjUFtohDOfdDfzvfXM\",\"p\":\"\",\"c\":[\"\",\"_not-found\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"/_not-found\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/14f3a3e0186fb7a8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__className_df92c2\",\"children\":[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"div\",null,{\"id\":\"root\",\"children\":[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"div\",null,{\"id\":\"root-modals\"}],[\"$\",\"div\",null,{\"id\":\"root-dropdowns\"}],[\"$\",\"div\",null,{\"id\":\"root-tooltips\"}]]}]}]]}],{\"children\":[\"/_not-found\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:1:props:children:props:children:props:notFound:0:1:props:style\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:1:props:children:props:children:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:1:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:children:props:children:1:props:children:props:children:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],null,[\"$\",\"$L6\",null,{\"children\":[\"$L7\",\"$L8\",[\"$\",\"$L9\",null,{\"promise\":\"$@a\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[[\"$\",\"meta\",null,{\"name\":\"robots\",\"content\":\"noindex\"}],[\"$\",\"$1\",\"Xno2YqYk5hRfnsnY2RHb4v\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"10:\"$Sreact.suspense\"\n11:I[4911,[],\"AsyncMetadata\"]\ne:[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$10\",null,{\"fallback\":null,\"children\":[\"$\",\"$L11\",null,{\"promise\":\"$@12\"}]}]}]\n8:null\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n7:null\n"])</script><script>self.__next_f.push([1,"a:{\"metadata\":[],\"error\":null,\"digest\":\"$undefined\"}\n12:{\"metadata\":\"$a:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>

package/build/_next/static/CRhIjUFtohDOfdDfzvfXM/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(e,r,t){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},__routerFilterStatic:{numItems:9,errorRate:1e-4,numBits:173,numHashes:14,bitArray:[0,0,r,1,1,r,r,e,r,e,r,e,r,r,e,e,e,e,e,r,e,r,e,e,e,r,r,e,r,e,r,e,e,e,r,r,r,e,r,e,r,e,e,e,e,r,e,e,e,e,r,r,e,r,e,e,e,e,e,e,r,e,e,e,r,r,r,e,r,r,e,r,r,r,r,r,e,r,e,e,r,e,e,e,r,e,r,r,e,r,e,e,e,e,e,e,r,e,r,r,r,e,e,r,r,e,r,e,e,e,r,r,e,e,r,r,e,r,r,r,r,e,e,r,r,e,r,r,e,r,e,r,r,e,e,r,r,r,e,r,r,r,e,r,r,r,r,r,e,e,e,r,r,e,r,e,e,e,r,e,e,r,e,e,r,e,e,e,e,r,e,e,e]},__routerFilterDynamic:{numItems:r,errorRate:1e-4,numBits:r,numHashes:NaN,bitArray:[]},"/_error":["static/chunks/pages/_error-cc3f077a18ea1793.js"],sortedPages:["/_app","/_error"]}}(1,0,1e-4),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

package/build/_next/static/CRhIjUFtohDOfdDfzvfXM/_ssgManifest.js

@@ -1 +0,0 @@
-self.__SSG_MANIFEST=new Set([]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()